Skip to content

feat: Multiline chat input with auto-resize #49

@sre-helmcode

Description

@sre-helmcode

Summary

Replace the single-line <input> element in the chat with a <textarea> that supports line breaks and grows dynamically with the text content.

Current State

  • The chat input is a standard <input> element (TeamMonitorPage.tsx, lines 622-636)
  • Does NOT support line breaks — even Shift+Enter does nothing useful
  • Pasting multiline text strips all newlines
  • Fixed single-line height regardless of content
  • Enter sends the message, Shift+Enter is handled but has no effect

Proposed Solution

  1. Replace <input> with <textarea> in TeamMonitorPage.tsx
  2. Auto-resize behavior:
    • Default: 1 line height (same as current input)
    • Grows as user types or pastes multiline content
    • Max height: ~6 lines (~150px), then scrollbar appears
    • Shrinks back when text is deleted
  3. Keyboard handling:
    • Enter → sends the message (existing behavior preserved)
    • Shift+Enter → inserts a newline
  4. Preserve existing styles (dark theme, border colors, error states, disabled state)
  5. Implementation approach:
    <textarea
      ref={textareaRef}
      value={chatMessage}
      onChange={(e) => {
        setChatMessage(e.target.value);
        autoResize(e.target);
      }}
      onKeyDown={(e) => {
        if (e.key === 'Enter' && !e.shiftKey) {
          e.preventDefault();
          handleSend();
        }
      }}
      rows={1}
      style={{ maxHeight: '150px', overflowY: 'auto' }}
      className="flex-1 rounded-lg border bg-slate-900 px-3 py-2 text-sm text-white resize-none ..."
    />

Affected Files

  • src/pages/TeamMonitorPage.tsx — Lines 622-636 (input element)

Acceptance Criteria

  • Input accepts multiline text
  • Shift+Enter inserts newline
  • Enter sends message (unchanged behavior)
  • Input grows dynamically up to ~6 lines
  • Input shrinks when text is removed
  • Scrollbar appears when exceeding max height
  • Pasting multiline text preserves line breaks
  • Existing styles and states (error, disabled) preserved
  • resize: none to prevent manual resize handle

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions