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
- Replace
<input> with <textarea> in TeamMonitorPage.tsx
- 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
- Keyboard handling:
Enter → sends the message (existing behavior preserved)
Shift+Enter → inserts a newline
- Preserve existing styles (dark theme, border colors, error states, disabled state)
- 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
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
<input>element (TeamMonitorPage.tsx, lines 622-636)Entersends the message,Shift+Enteris handled but has no effectProposed Solution
<input>with<textarea>in TeamMonitorPage.tsxEnter→ sends the message (existing behavior preserved)Shift+Enter→ inserts a newlineAffected Files
src/pages/TeamMonitorPage.tsx— Lines 622-636 (input element)Acceptance Criteria
resize: noneto prevent manual resize handle