amosblomqvist
e2284e723a
Owner round 2 (2026-10-05), Slice F: - USER TEXT: the right-aligned bubble is gone. User messages are full-width document rows — muted 'You' label, muted quote rail, full-opacity text. Learner words are content, not a chat-app tell. - USER THINKING (everywhere): arrives COLLAPSED as a trigger row in the exact register of the agent's reasoning rows (muted label + chevron + hover affordance); expanding opens the quote block — rail, 50% opacity, italics. The inner-voice signature. The ThinkingBlock loses its shell/border: pure document material. - QUIZ CARDS: the answer's thinking is the SAME collapsible row, same placement, just inside the container; the explanation drops to 50% opacity (upright — italics stays the thinking signature). - AGENT'S THINKING: the duration bookkeeping is gone (it was live-turn state that died to 'a few seconds' on remount anyway) — the settled row reads static 'Agent's thinking', pairing with 'Your thinking'. Spinner + shimmer stay the working signal while streaming. - Glance law: user thinking = rail + 50% italic; agent thinking = no rail; user text = upright, full opacity, 'You' label.
53 lines
1.9 KiB
TypeScript
53 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { ChevronDownIcon } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/** The unified user-thinking row (owner round, 2026-10-05): ONE visual
|
|
* language for every surface where the learner's own thinking renders —
|
|
* practice thinking traces, the reading channel lifted above the answered
|
|
* card, the quiz answer's thinking inside its container. It arrives
|
|
* COLLAPSED as a trigger row in the exact register of the agent's
|
|
* reasoning rows (muted label + chevron + hover affordance); expanding
|
|
* opens the quote block — rail, 50% opacity, italics. The italics + the
|
|
* half-opacity text are the inner-voice signature; the rail marks it as
|
|
* learner material. No shell, no border: document material, full width.
|
|
*
|
|
* The glance-level law (owner): user thinking = rail + 50% italic;
|
|
* agent thinking = no rail. */
|
|
|
|
export function ThinkingBlock({
|
|
label = "Your thinking",
|
|
text,
|
|
testId,
|
|
dataCommit,
|
|
}: {
|
|
label?: string;
|
|
text: string;
|
|
testId?: string;
|
|
/** The practice marker's register flag (commit vs nudge). */
|
|
dataCommit?: boolean;
|
|
}) {
|
|
const [open, setOpen] = useState(false); // arrives collapsed, always
|
|
return (
|
|
<div data-testid={testId} data-commit={dataCommit === undefined ? undefined : dataCommit ? "true" : "false"} className="lh-card-enter my-1 w-full">
|
|
<button
|
|
type="button"
|
|
data-testid={testId ? `${testId}-trigger` : undefined}
|
|
onClick={() => setOpen((v) => !v)}
|
|
aria-expanded={open}
|
|
className="flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground"
|
|
>
|
|
{label}
|
|
<ChevronDownIcon className={cn("size-4 transition-transform", open ? "rotate-180" : "rotate-0")} />
|
|
</button>
|
|
{open && (
|
|
<div className="mt-1.5 border-l-2 border-muted-foreground/30 pl-3">
|
|
<span className="lh-prose block whitespace-pre-wrap italic text-foreground/50">{text}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|