ui: the chat comeback — side-based authorship, restored quotes, tucked whys
Blockquotes: the callout override had displaced Streamdown's own styled blockquote component, so plain quotes rendered as bare unstyled text since that commit. The pass-through branch now restores Streamdown's verbatim classes (border-l-4, muted italic). Explanations tucked for ALL questions (owner): the prediction's Why / Hide-why toggle is universal — every quiz answered card sits its explanation behind the same collapsed button. Same pattern, one law. The thinking row's rhythm: my-1 -> my-3. The 4px margin hugged the options on non-graded answered cards (owner report); 12px matches the card's mt-2/mt-3 spacing grammar everywhere the row renders. Side-based authorship (owner round, 2026-10-07): the document shape blurred user into agent — three left-rail idioms (user text, user thinking, quoted prose) collided once quotes rendered. User rows go RIGHT: 'You' messages and practice thinking cards hug the right edge at 85% width with the rail mirrored (border-r), text still reading left-to-right. In-card thinking (inside the answered card, the agent's context) stays left. Transcript thinking rows arrive EXPANDED — the thinking was clearly sent. Cmd+T (toggle-user-thinking, chat scope, cheat-sheet row) sets every user-thinking row to one state via a module store: explicit sets stomp individual toggles, late mounts honor the last set (the state initializer reads the store, so static render reflects it too).
This commit is contained in:
@@ -145,11 +145,11 @@ export function AnsweredCard({ answer }: { answer: QuestionAnswerData }) {
|
||||
{/* px-3→removed: card p-4 + box px-3 double-inset sat the "Why" label deeper
|
||||
than the option box edges (owner, round 3). Sides flush with everything
|
||||
else; py-2 stays for vertical air. */}
|
||||
{isQuiz && answer.explanation && answer.questionType === "predict" ? (
|
||||
/* The TUCKED explanation (owner 2026-10-03): a prediction's
|
||||
verdict shows, but the explanation sits collapsed — viewable,
|
||||
never center stage. The teaching that follows resolves the
|
||||
prediction; THAT is the real explanation. */
|
||||
{isQuiz && answer.explanation && (
|
||||
/* The TUCKED explanation — ALL questions (owner, 2026-10-07): the
|
||||
verdict shows, the explanation sits collapsed behind the Why
|
||||
toggle — viewable, never center stage. Identical to the
|
||||
prediction pattern it generalizes (owner, 2026-10-03). */
|
||||
<div className="mt-2" data-testid="tucked-explanation">
|
||||
<button
|
||||
type="button"
|
||||
@@ -161,20 +161,12 @@ export function AnsweredCard({ answer }: { answer: QuestionAnswerData }) {
|
||||
{whyOpen && (
|
||||
<div className="mt-1.5 rounded-lg bg-muted py-2 text-sm text-foreground/50">
|
||||
<span className="font-medium text-muted-foreground">Why: </span>
|
||||
{/* The markdown wrapper must go truly inline — a block <p> after the
|
||||
"Why:" label created the oversized leading gap (owner's fix list). */}
|
||||
<MessageResponse className="inline [&_p]:inline [&_p]:m-0">{answer.explanation}</MessageResponse>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
isQuiz &&
|
||||
answer.explanation && (
|
||||
<div className="mt-2 rounded-lg bg-muted py-2 text-sm text-foreground/50">
|
||||
<span className="font-medium text-muted-foreground">Why: </span>
|
||||
{/* The markdown wrapper must go truly inline — a block <p> after the
|
||||
"Why:" label created the oversized leading gap (owner's fix list). */}
|
||||
<MessageResponse className="inline [&_p]:inline [&_p]:m-0">{answer.explanation}</MessageResponse>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
|
||||
{/* The explain reveal (owner ruling 2026-09-27): the committed answer
|
||||
|
||||
Reference in New Issue
Block a user