diff --git a/web/hwlab-cloud-web/src/components/command-bar/CommandBar.test.ts b/web/hwlab-cloud-web/src/components/command-bar/CommandBar.test.ts index 301f8c11..8df0f939 100644 --- a/web/hwlab-cloud-web/src/components/command-bar/CommandBar.test.ts +++ b/web/hwlab-cloud-web/src/components/command-bar/CommandBar.test.ts @@ -4,6 +4,8 @@ import path from "node:path"; import { fileURLToPath } from "node:url"; import { test } from "bun:test"; +import { commandInputRows } from "./CommandBar"; + const sourcePath = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "CommandBar.tsx"); test("CommandBar releases the send lock on the next tick instead of waiting for the full agent turn", () => { @@ -13,3 +15,10 @@ test("CommandBar releases the send lock on the next tick instead of waiting for assert.doesNotMatch(source, /await props\.onSubmit\(next\)/u); assert.doesNotMatch(source, /\.finally\(\(\) => setSubmitting\(false\)\)/u); }); + +test("CommandBar textarea grows to five physical lines then becomes scrollable", () => { + assert.deepEqual(commandInputRows(""), { rows: 1, scrollable: false }); + assert.deepEqual(commandInputRows("one\ntwo\nthree"), { rows: 3, scrollable: false }); + assert.deepEqual(commandInputRows("1\n2\n3\n4\n5"), { rows: 5, scrollable: false }); + assert.deepEqual(commandInputRows("1\n2\n3\n4\n5\n6"), { rows: 5, scrollable: true }); +}); diff --git a/web/hwlab-cloud-web/src/components/command-bar/CommandBar.tsx b/web/hwlab-cloud-web/src/components/command-bar/CommandBar.tsx index 843c4b24..2b28c8bd 100644 --- a/web/hwlab-cloud-web/src/components/command-bar/CommandBar.tsx +++ b/web/hwlab-cloud-web/src/components/command-bar/CommandBar.tsx @@ -1,5 +1,5 @@ import type { ReactElement } from "react"; -import { FormEvent, KeyboardEvent, useEffect, useState } from "react"; +import { FormEvent, KeyboardEvent, useEffect, useMemo, useState } from "react"; import type { ProviderProfile } from "../../types/domain"; import { DraftsList } from "./DraftsList"; @@ -31,6 +31,7 @@ export function CommandBar({ pickedDraft, onPickedDraftConsumed, disabledReason, const [value, setValue] = useState(""); const [submitting, setSubmitting] = useState(false); const [draftsOpen, setDraftsOpen] = useState(false); + const inputRows = useMemo(() => commandInputRows(value), [value]); useEffect(() => { if (pickedDraft) { @@ -68,7 +69,7 @@ export function CommandBar({ pickedDraft, onPickedDraftConsumed, disabledReason,
hwlab -