Amos
0baa00e418
Sidebar (replaces the modal drawer): - Inline, toggleable, no backdrop/focus theft — can stay open while working - Open state persists across pages (provider in root layout) and reloads (localStorage; starts closed server-side to avoid hydration mismatch, stored value applied post-mount; default open on first run) - Hamburger in page headers only when closed; close button in sidebar header Floating composer blob (per reference screenshot): - Floats over the transcript (absolute overlay), persists at bottom while scrolling, content fades behind it (gradient mask); pb-44 scroll clearance - Concentric corner radii: blob rounded-2xl(16px) − p-1.5(6px) = send rounded-[10px] = 25% of the 40px button; CornerDownLeft icon per reference - Stop moved from header into the blob (busy → square icon) - prompt-input.tsx + 7 orphan ui files pruned (attachments/command palette unused); hand-rolled Composer is ~100 lines and render-tested Pending-question morph (one text field on screen, never two): - Quiz/ask-select pending → blob becomes the note field (send hidden, hint line above); card's internal note input removed; Submit consumes it - Ask free-text pending → blob becomes the answer field; its send submits via the card's registered submit api (ref bridge); Enter works - Chat owns the single text state; card clears it on submit - canSend for answer mode mirrors the card predicate directly — reading the ref during render lagged one commit (found in browser testing) Widths: one shared column (max-w-3xl + px-4) for transcript, cards, and composer — all three measured pixel-identical (left 416, width 736). Assistant Message max-w-full/MessageContent w-full (was max-w-[95%]/w-fit — the 'cards are a bit shorter' bug). User messages render plain text again — no math pipeline on learner-authored text (currency hazard accepted for the model only, guarded by the prompt). Tests: 58 pass (5 new composer pins; card tests updated to controlled props). Verified live: note flow, answer flow, sidebar persistence, float, fade, zero console errors — plus the live model spontaneously honoring the $ currency escape contract in a continuation.
98 lines
2.8 KiB
TypeScript
98 lines
2.8 KiB
TypeScript
"use client";
|
||
|
||
import { CornerDownLeftIcon, SquareIcon } from "lucide-react";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
/**
|
||
* The floating composer blob. Sits on top of the transcript (the parent
|
||
* overlays it), persists at the bottom while scrolling, content fades out
|
||
* behind it.
|
||
*
|
||
* Corner-radius math (concentric rounding — outer = inner + gap):
|
||
* blob rounded-2xl (16px) − padding p-1.5 (6px) = button rounded-[10px].
|
||
* 10px is 25% of the 40px send button — matches the reference.
|
||
*
|
||
* Modes (one text field on screen, always):
|
||
* chat — normal message composer.
|
||
* note — a question is pending; text here becomes the answer's note.
|
||
* No send action (the card's Submit sends); Enter = newline.
|
||
* answer — a free-text ask is pending; this field IS the answer and the
|
||
* send button submits it.
|
||
*/
|
||
export type ComposerMode = "chat" | "note" | "answer";
|
||
|
||
const PLACEHOLDERS: Record<ComposerMode, string> = {
|
||
chat: "Ask, answer, or steer the lesson…",
|
||
note: "Add a note (optional) — anything you're unsure about",
|
||
answer: "Type your answer…",
|
||
};
|
||
|
||
export function Composer({
|
||
mode,
|
||
busy,
|
||
value,
|
||
onChange,
|
||
onSend,
|
||
onStop,
|
||
canSend,
|
||
autoFocus,
|
||
}: {
|
||
mode: ComposerMode;
|
||
busy: boolean;
|
||
value: string;
|
||
onChange: (v: string) => void;
|
||
onSend: () => void;
|
||
onStop: () => void;
|
||
canSend: boolean;
|
||
autoFocus?: boolean;
|
||
}) {
|
||
const showSend = mode !== "note";
|
||
|
||
const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||
// Enter sends (chat/answer); Shift+Enter newline. Note mode: no send.
|
||
if (e.key === "Enter" && !e.shiftKey && mode !== "note") {
|
||
e.preventDefault();
|
||
if (busy) onStop();
|
||
else if (canSend) onSend();
|
||
}
|
||
};
|
||
|
||
return (
|
||
<form
|
||
data-testid="composer"
|
||
data-mode={mode}
|
||
className="flex items-end gap-1.5 rounded-2xl border bg-card p-1.5 shadow-lg"
|
||
onSubmit={(e) => {
|
||
e.preventDefault();
|
||
if (busy) onStop();
|
||
else if (canSend && showSend) onSend();
|
||
}}
|
||
>
|
||
<textarea
|
||
value={value}
|
||
onChange={(e) => onChange(e.target.value)}
|
||
onKeyDown={handleKeyDown}
|
||
placeholder={PLACEHOLDERS[mode]}
|
||
autoFocus={autoFocus}
|
||
rows={1}
|
||
className="field-sizing-content max-h-48 min-h-10 flex-1 resize-none bg-transparent px-2.5 py-2 text-sm outline-none placeholder:text-muted-foreground"
|
||
/>
|
||
{showSend && (
|
||
<button
|
||
type="submit"
|
||
aria-label={busy ? "Stop" : "Send"}
|
||
className={cn(
|
||
"flex size-10 shrink-0 items-center justify-center rounded-[10px] transition-colors",
|
||
busy
|
||
? "bg-secondary text-foreground hover:bg-accent"
|
||
: "bg-primary text-primary-foreground hover:opacity-90 disabled:opacity-40",
|
||
)}
|
||
disabled={!busy && !canSend}
|
||
>
|
||
{busy ? <SquareIcon className="size-4" /> : <CornerDownLeftIcon className="size-5" />}
|
||
</button>
|
||
)}
|
||
</form>
|
||
);
|
||
}
|