[QOL Feature] Auto-Expanding Prompt Input with Reduced Minimum Height

[VooDisss]

Description

The current prompt input box has a large fixed minimum height (rows=4 / min-height: 56px-64px), which consumes significant vertical real estate even when empty. This is particularly problematic on mobile devices where screen space is limited.

We should implement an auto-expanding input that starts as a single line and grows dynamically with the content, up to a developer-defined maximum.

Technical Analysis

Based on the codebase, the current constraints are:

• packages/ui/src/components/prompt-input.tsx: The <textarea> has a hardcoded rows attribute (Line 1159): rows={expandState() === "expanded" ? 15 : 4}.
• packages/ui/src/styles/messaging/prompt-input.css:
  • .prompt-input-field-container has a min-height: 56px (Line 25).
  • Mobile media query @media (max-width: 640px) increases min-height to 64px (Line 310).

Proposed Solution: Auto-Expanding Input

1. Reduce Baseline Height:

   • Change the default rows from 4 to 1.
   • Remove or significantly reduce min-height in CSS to allow the input to sit flush as a single line.

2. Dynamic Height Adjustment:

   • Implement a logic (likely within handleInput or a dedicated createEffect) that sets the textarea.style.height to auto then to textarea.scrollHeight + 'px'.
   • Ensure this logic respects the manual "Expanded" state toggle.

3. Constraints & Scrolling:

   • Define a maximum height for "Normal" mode (e.g., max-height: 200px or ~8 lines).
   • Once the content exceeds this height, the input should stop expanding and enable a vertical scrollbar (overflow-y: auto).

4. Placeholder Handling:

   • The initial height must be sufficient to show the placeholder text (which may wrap to 2 lines on very narrow mobile screens).

User Experience Goal

A cleaner, "chat-style" interface where the input field is discrete when idle but scales gracefully as the user drafts complex queries.

[shantur]

@VooDisss
The minimum height is high just enough to have the expand, prev and next history buttons

[VooDisss]

@shantur on phone I can see that it has way more vertical space than those history buttons.

[VooDisss]

How it looks like, when keyboard is collapsed:

[shantur]

@VooDisss - I have implemented the reduced minimum height and we already have an expanded view button, will that be good enough for now?