fix: improve chat input UX and IME composition handling (revised)

[JiahaoZhu11]

Summary

This PR improves the chat input component with two main enhancements:

1. Better UX for the input bubble - The entire input bubble now behaves as a cohesive input component
2. Fixed IME composition handling - Enter key now works correctly for Chinese/Japanese/Korean input

This is a revised version of #195.

Changes

Chat Input UX

• Entire input bubble is now clickable to focus the textarea (not just the textarea itself)
• Added cursor-text cursor style to indicate the bubble is interactive
• Send button no longer shows tooltip or responds to hover when hidden (empty input)
• Removed focus outline from textarea since the outer bubble already shows focus state via focus-within

IME Composition Fix

• Added compositionstart/compositionend event handlers to track IME state
• Implemented skipNextEnter flag to differentiate between:
  • Enter to confirm character selection (should not send)
  • Enter to send message (should send)
• Fixes the issue where pressing Enter during IME composition would send the incomplete text instead of confirming the selected characters

Testing

• Click anywhere on input bubble → textarea focuses
• Empty input → send button hidden, no tooltip on hover
• With text → send button visible, tooltip shows on hover
• Type Chinese/Japanese/Korean with IME → Enter confirms selection
• After confirming IME selection → Enter sends message
• Click to select IME candidate → next Enter sends message correctly

[github-actions]

The following comment was made by an LLM, it may be inaccurate:

[JiahaoZhu11]

Automated message: IME handling + click-to-focus UX looks good and matches the polished input behavior we want.

Two items:

• PR is currently CONFLICTING with dev; please rebase.
• Please double-check skipNextEnter doesn’t swallow a real Enter when there was no composition event (should be covered, but worth a quick test with IME + normal typing).

I can’t provide a snapshot from here; a short gif/screenshot of the updated input would help design review.

@benjaminshafii Thanks for the review of #195! I ended up recreating the branch and PR—there were just too many conflicts since we were all touching the same component..

1. Rebase: ✅ Done - rebased on latest dev.

2. skipNextEnter safety check: ✅ Verified

The flag is safe by design - it can only become true when onCompositionStart fires, which exclusively happens during IME input:

• Normal typing (no IME): onCompositionStart never fires → skipNextEnter stays false → Enter works normally
• IME → normal typing: After composition ends, setTimeout(100) clears the flag → subsequent Enters work normally

Tested locally with both IME and normal typing - no issues observed.

IME.Typing.mov

Normal.Typing.mov

[JiahaoZhu11]

@benjaminshafii Just wanted to check in—if there's anything you'd like me to adjust or clarify, let me know! Otherwise, I appreciate your time reviewing this.

[JiahaoZhu11]

@benjaminshafii Ben, while this quick fix addresses an immediate issue, the most critical change is still pending: fixing the IME enter behavior. You can view the videos below to see the difference:

Before:

Before.mov

After:

After.mov

In addition, I've implemented three UI/UX improvements:

1. Show a disabled state for the send button — Instead of hiding it entirely when disabled, this displays a visually disabled button, which eliminates an awkward gap between the file button and the edge of the input area.
2. Make the entire bubble clickable and focus the input — The entire message bubble is now clickable and focuses the input, while keeping all interactive elements fully functional.
3. Fix bottom content shrinking after message is sent — The bottom content in the bubble no longer shrinks up after the message is sent, maintaining proper spacing and layout.
   All three improvements are demonstrated in the "after" video above. If you'd prefer not to include any of these improvements, we can easily remove them—just let me know.