AI chat composer input too small — no auto-grow, 80 px initial / 200 px max in Blazor

[sierragolflima]

Problem

The AI chat message composer (the input area at the bottom of the thread chat view) is too small for any prompt longer than two or three lines. Pasting a substantial prompt — a code snippet, a detailed specification, a multi-paragraph instruction — causes the editor to scroll internally rather than expanding to show the content. Users cannot see what they typed or verify the full paste without awkward scrolling inside a tiny 80 px box.

Affected surfaces:

• Blazor portal (src/MeshWeaver.Blazor.Portal/Chat/ThreadChatView.razor, lines 848–858): MonacoEditorView is configured with Height="80px" and MaxHeight="200px". The component's AutomaticLayout = true only responds to external CSS container resizes — it does not expand the container based on content height. There is no onDidContentSizeChange listener in MonacoEditorView.razor.js. Content wraps and scrolls invisibly within the fixed 80 px box; the max-height: 80px rule on .input-container (ThreadChatView.razor.css line 207) additionally caps any attempt to grow via CSS.
• React client (clients/react/src/controls/threadChat.tsx, lines 456–463): Textarea is rendered with resize="vertical" only — it has no auto-grow behaviour and no explicit initial height, rendering at the Fluent UI default (typically 2 rows).

The command-palette widget in the same Blazor file already uses max-height: min(440px, calc(100vh - 180px)) (ThreadChatView.razor.css line 566), which adapts to the viewport — the composer should follow the same pattern.

Expected behaviour

The composer input should auto-grow line by line as the user types or pastes content, expanding from a comfortable baseline (≈ 3–4 lines / 96 px) up to a viewport-relative ceiling such as min(440px, calc(100vh - 180px)), and then scroll internally once that ceiling is reached. Pasted content should never be clipped without the editor first expanding to show it.

Proposed fix

Blazor — three-file change:

1. src/MeshWeaver.Blazor.Portal/Chat/ThreadChatView.razor lines 854–855 — raise Height from "80px" to "96px" (≈ 4 lines) and MaxHeight from "200px" to "min(440px, calc(100vh - 180px))".
2. src/MeshWeaver.Blazor/Components/Monaco/MonacoEditorView.razor.js — add an editor.onDidContentSizeChange listener that reads editor.getContentHeight() and sets container.style.height = Math.min(contentHeight, maxHeightPx) + "px", so the container grows reactively with content up to the ceiling. maxHeightPx is derived from the MaxHeight CSS value resolved at mount time.
3. src/MeshWeaver.Blazor.Portal/Chat/ThreadChatView.razor.css line 207 — remove or raise the max-height: 80px rule on .input-container so the CSS does not override the JS-driven height.

React:

1. Replace resize="vertical" on the Fluent Textarea (clients/react/src/controls/threadChat.tsx line 463) with an onInput handler that sets element.style.height = "auto"; element.style.height = Math.min(element.scrollHeight, maxHeightPx) + "px" on each keystroke, up to the same min(440, calc(100vh - 180px)) ceiling.
2. Set rows={3} as the starting baseline.

Both changes are scoped to the existing MonacoEditorView and Textarea controls — no new control types or layout rewiring needed.

Acceptance criteria

• Typing a single line renders the composer at its baseline height (≈ 3–4 lines).
• Pasting 20 lines of text expands the composer to its ceiling, then scrolls internally — no text is hidden behind the bottom row.
• The expanded composer does not push the Send button or agent/model selectors off the screen at common viewport heights (1024 px, 768 px, side-panel half-width).
• Both Blazor and React surfaces pass the above checks.

[sierragolflima]

Screenshot: