feat: Implement expandable chat input with double-click detection and gradient tooltip

[bizzkoot]

feat: Implement expandable chat input with double-click detection and gradient tooltip

Summary

This PR adds an expand/minimize button to the chat input that allows users to toggle between 3 height states: normal (default/original), 50%, and 80% of available space. The feature includes smart double-click detection for quick navigation between states and a polished tooltip with gradient background for better visibility.

Changes

1. Expand Button Component (packages/ui/src/components/expand-button.tsx)

• Created new component with Maximize2/Minimize2 icons
• Implemented smart double-click detection (300ms threshold)
  • Single-click: normal → 50%, expanded → normal
  • Double-click: normal → 80%, fifty → eighty, eighty → fifty
• Comprehensive tooltip text for all states
• Reactive state management with SolidJS signals

2. Prompt Input Enhancements (packages/ui/src/components/prompt-input.tsx)

• Added expandState signal with 3 states: "normal" | "fifty" | "eighty"
• Implemented calculateExpandedHeight() function:
  • Calculates available input space based on .session-view height
  • Reserves 200px minimum space for message section
  • Example: 768px total - 200px = 568px available for input
• Created expandedHeight memo for reactive height updates
• Added handleExpandToggle() function with textarea focus preservation
• Modified .prompt-input-field-container to use reactive height
• Updated textarea overflow handling (auto when expanded, visible when normal)

3. Styling (packages/ui/src/styles/messaging/prompt-input.css)

• Added .prompt-expand-top positioning (top: 0.3rem, right: 3.5rem)
• Created .prompt-expand-button styles with hover/active states
• Custom gradient tooltip with:
  • Dark gradient background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%)
  • Backdrop blur filter for better readability over content
  • Enhanced box-shadow with border highlight
  • Smooth fade-in animation (0.2s)
• Updated .prompt-input-actions from justify-between to justify-start
• Added margin-top: auto to .send-button to anchor at bottom
• Added height transition to .prompt-input-field-container

Technical Details

Height Calculation Logic

const availableForInput = sessionViewHeight - MIN_MESSAGE_SPACE(200px)
// Example: 768px - 200px = 568px available
// 50% state: 284px height
// 80% state: 454px height

Double-Click Detection Algorithm

1. First click: Record timestamp, start 300ms timer
2. Second click within 300ms: Cancel timer, execute double-click action immediately
3. Timer expires (no second click): Execute single-click action

State Transitions

Normal:
  Single-click → 50%
  Double-click → 80%

50% (fifty):
  Single-click → Normal
  Double-click → 80%

80% (eighty):
  Single-click → Normal
  Double-click → 50%

Tooltip Text by State

• Normal: "Click to expand (50%) • Double-click to expand further (80%)"
• 50%: "Double-click to expand to 80% • Click to minimize"
• 80%: "Click to minimize • Double-click to reduce to 50%"

Behavior Notes

1. Send button anchoring: The Send button stays at the bottom of the action bar using margin-top: auto. Stop and Arrow buttons move with height changes (accepted behavior).

2. Scrollbar support: When expanded, the textarea gets overflow-y: auto to handle content overflow gracefully.

3. Focus preservation: Expanding/collapsing keeps focus on the textarea for seamless typing.

4. Smooth transitions: All height changes animate over 250ms; tooltip fade-in is 200ms.

5. Tooltip positioning: The tooltip uses CSS ::after pseudo-element with data-tooltip attribute for instant hover feedback (no 1-2s delay like native title).

Testing Instructions

1. Basic expansion:

   • Click expand button once → input expands to 50%
   • Click again → returns to normal height
   • Click again → back to 50%

2. Double-click navigation:

   • Double-click from normal → jumps to 80%
   • Double-click from 50% → jumps to 80%
   • Double-click from 80% → reduces to 50%

3. Tooltip testing:

   • Hover over expand button at each state
   • Verify tooltip text is accurate and readable
   • Check gradient background ensures visibility over content

4. Content testing:

   • Type long text to verify scrollbar appears when expanded
   • Verify all existing buttons (Stop, Send, Arrow-up) remain functional
   • Test with attachments present

5. Keyboard shortcuts:

   • Press Cmd+Enter to send while expanded
   • Test Esc to exit shell mode (if applicable)
   • Verify ↑↓ for history navigation still works

Browser Compatibility

This implementation uses standard CSS features:

• backdrop-filter for blur effect (supported in Chrome 76+, Firefox 103+, Safari 9+)
• CSS custom properties for theming
• CSS transitions for animations
• No browser-specific prefixes required for modern browsers

Screenshots

• Normal state with Maximize2 icon
• 50% expanded state with Minimize2 icon
• 80% expanded state with scrollbar
• Tooltip hover effect

Checklist

• Expand button positioned correctly
• 3-state height management working
• Double-click detection functional
• Tooltip with gradient background visible
• Send button anchored at bottom
• Smooth transitions applied
• All debug logs removed
• No TypeScript errors
• Existing functionality preserved

Related Issues

1. So far, the 'Arrow UP' and 'STOP' button will move together with the top chat height

Breaking Changes

None. This is a new feature that doesn't modify existing behavior.

[shantur]

Hi @bizzkoot ,

Thanks for the PR.
How does it behave on phones?
I think it would be enough to have 2 states instead of 3.

As of now the calculation is around 4 lines, maybe one state could be 15 lines.

Let me know what you think

Thanks

[bizzkoot]

Hi @shantur ,

I did a short test before doing the PR, seems workable. But I do agree with your idea. So I implemented it (but limited to web/mobile usage).

I did saw the text is behind the maximize / minimize button, so I just make it shorter directly for web/mobile.

I hope this meets your criteria.

Thank you

[shantur]

Thanks for updating.

1. Sorry, I may not be clear, we don't need to have 3 states for any screen sizes.
   We need to keep it simple and only 1 approach.
2. I see that expand button is overlapping the text. Maybe we can move the expand button on the side ( in line with previous / next button ).

The less logic in the app the better.

[bizzkoot]

Done

Screen.Recording.2026-01-13.at.6.49.52.AM.mov

Screen_Recording_20260113_065103_Chrome.mp4