UI iteration 3: question dock — pending questions morph the composer blob

- A pending quiz/ask now REPLACES the chat composer: one persistent
  rounded-2xl shell in the transcript overlay swaps contents (composer ↔
  question ↔ collapsed bar), never remounting — the structure a future
  grow-morph animation needs.
- Unified bottom row inside the question: the note field (select modes),
  the answer field (text-mode asks), or the Other text — one field, one
  'Submit answer' button, Enter submits.
- Collapse on scroll: uses useStickToBottomContext — scroll up and the
  dock folds to a slim bar (kind chip + LaTeX-flattened question teaser +
  'tap to answer'); click scrolls to bottom and re-expands. The expanded
  form stays mounted-hidden so a half-made selection survives.
- Pending/streaming tool parts no longer render inline; answered parts
  land in the transcript as graded cards on submit. Question generation
  shows a shimmer in the shell.
- Composer back to pure chat (no mode machinery); quiz-card.tsx and the
  pendingText/registerSubmit bridge deleted; render tests re-pointed at
  the dock (wrapped in StickToBottom).

Verified live: docked quiz submit (note+selection), ask-text Enter
submit, collapse/expand with selection survival, bar teaser text.
This commit is contained in:
Amos
2026-08-22 05:02:15 +03:00
parent 0baa00e418
commit cd789c11b1
6 changed files with 461 additions and 431 deletions
+16 -25
View File
@@ -1,6 +1,7 @@
/**
* Composer blob render tests — the morphing text field (chat / note / answer
* modes), concentric corner radii, and the stop-while-busy button.
* Composer render tests — the chat input row (content only; the persistent
* rounded shell lives in the chat view's overlay so it can morph into the
* question dock without remounting).
*
* Same tsx classic-JSX shim as render-cards.test.tsx.
*/
@@ -12,10 +13,9 @@ import { describe, it } from "node:test";
import { renderToStaticMarkup } from "react-dom/server";
import { Composer } from "../components/composer.tsx";
function render(mode: "chat" | "note" | "answer", opts: { busy?: boolean; canSend?: boolean } = {}) {
function render(opts: { busy?: boolean; canSend?: boolean } = {}) {
return renderToStaticMarkup(
<Composer
mode={mode}
busy={opts.busy ?? false}
value=""
onChange={() => {}}
@@ -26,35 +26,26 @@ function render(mode: "chat" | "note" | "answer", opts: { busy?: boolean; canSen
);
}
describe("Composer blob", () => {
it("chat mode: chat placeholder + send button", () => {
const html = render("chat");
describe("Composer", () => {
it("chat placeholder + send button", () => {
const html = render();
assert.match(html, /Ask, answer, or steer the lesson/);
assert.ok(html.includes('aria-label="Send"'), "send button present");
});
it("note mode: note placeholder and NO send button (card submits)", () => {
const html = render("note");
assert.match(html, /Add a note/);
assert.ok(!html.includes('aria-label="Send"'), "no send in note mode");
assert.ok(!html.includes('aria-label="Stop"'), "no stop either");
});
it("answer mode: answer placeholder + send button (submits the answer)", () => {
const html = render("answer");
assert.match(html, /Type your answer/);
assert.ok(html.includes('aria-label="Send"'), "send present in answer mode");
});
it("busy: send button becomes stop", () => {
const html = render("chat", { busy: true });
const html = render({ busy: true });
assert.ok(html.includes('aria-label="Stop"'), "stop replaces send while streaming");
});
it("concentric corner radii: blob 16px, send 10px (25% of the 40px button)", () => {
const html = render("chat");
assert.ok(html.includes("rounded-2xl"), "blob radius");
assert.ok(html.includes("rounded-[10px]"), "send radius = blob radius − padding");
it("send button radius is 10px = 25% of the 40px button (concentric with the shell)", () => {
const html = render();
assert.ok(html.includes("rounded-[10px]"), "send radius = shell radius − row padding");
assert.ok(html.includes("size-10"), "40px send button (10px = 25%)");
});
it("disabled when nothing to send", () => {
const html = render({ canSend: false });
assert.ok(/aria-label="Send"[^>]*disabled|disabled[^>]*aria-label="Send"/.test(html), "send disabled");
});
});