UI iteration 4: dock morph animation, sticky-in-flow dock, scrollbar, indicators
- Animation: the blob's shell morphs height (WAAPI, 180ms) on every variant change — chat ↔ question ↔ collapsed bar — plus a quick fade/rise (160ms) on the swapped content. Gotcha pinned in code: never measure the shell while a morph is in flight (getBoundingClientRect reads the ANIMATED value and corrupts the next morph's start height); cancel running morphs before measuring, refresh settled height only when no morph is running. - Gradient-over-scrollbar fixed structurally: the dock is no longer an absolute overlay on the conversation root — it's sticky bottom-0 INSIDE the scroller (in flow). The transcript scrolls fully clear of the dock, the fade never touches the scrollbar lane, and the pb-hack clearances are gone. - New question while at the bottom scrolls to reveal the dock; scrolled up → collapsed bar, no yank. - Thin dark native scrollbar app-wide (8px webkit + scrollbar-width:thin, dark thumb, transparent track). Note: use-stick-to-bottom sets scrollbar-gutter: stable both-edges on its scroller — the lane is outside the content flow by design. - 'Writing a question…' transcript shimmer while a tool call streams its input (same slot as 'Thinking…'). Protocol pinned by a test asserting tool-input-start precedes tool-input-available; scripted mock now streams tool input as deltas like real providers do. (OpenRouter/ Anthropic often delivers the whole input in ONE delta — then the dock appears instantly and no indicator is needed or shown.) Verified live: grow 54→349px and shrink 349→54px fire with correct from/to; collapse/expand intact; gradient stops before the gutter; Thinking… observed in-page; 58/58 tests.
This commit is contained in:
Amos
@@ -84,3 +84,46 @@ body {
|
||||
background: var(--color-background);
|
||||
color: var(--color-foreground);
|
||||
}
|
||||
|
||||
/* Thin dark native scrollbar (app-wide): dark thumb, transparent track. */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--color-border) transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--color-border);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-muted-foreground);
|
||||
}
|
||||
|
||||
/* Dock variant swap — quick fade/rise on content change; the shell's HEIGHT
|
||||
morph is separate (WAAPI in DockOverlay). Re-applied via class toggling, no
|
||||
remount, so collapsed-question state survives. */
|
||||
@keyframes dock-variant-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(6px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.dock-variant {
|
||||
animation: dock-variant-in 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
|
||||
+182
-104
@@ -1,8 +1,9 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useEffect, useLayoutEffect, useRef, useState } from "react";
|
||||
import { useChat } from "@ai-sdk/react";
|
||||
import { DefaultChatTransport, isToolUIPart, lastAssistantMessageIsCompleteWithToolCalls } from "ai";
|
||||
import { useStickToBottomContext } from "use-stick-to-bottom";
|
||||
import {
|
||||
Conversation,
|
||||
ConversationContent,
|
||||
@@ -24,19 +25,17 @@ import { findPendingToolCall } from "@/src/core/pending";
|
||||
/** One width for everything: transcript, cards, and the bottom blob share this column. */
|
||||
const COLUMN = "mx-auto w-full max-w-3xl px-4";
|
||||
|
||||
/** useLayoutEffect that is silent during SSR (client components still render on the server in Next). */
|
||||
const useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
|
||||
|
||||
/**
|
||||
* The teaching session. All chat state lives in useChat; the server persists
|
||||
* the canonical transcript after every turn.
|
||||
*
|
||||
* The bottom blob is ONE persistent shell (never remounts — this is what a
|
||||
* future chat→question morph animation will animate). Its contents swap:
|
||||
* - no pending question → the chat Composer
|
||||
* - question streaming in → "Preparing a question…" shimmer
|
||||
* - pending quiz/ask → the QuestionDock (question + options + the
|
||||
* unified note/answer field + Submit answer)
|
||||
* A pending question is always the transcript tail (the lesson can't continue
|
||||
* before it's answered), so docking it at the bottom loses nothing; on submit
|
||||
* it lands in the transcript as an AnsweredCard.
|
||||
* The bottom blob is ONE persistent shell whose contents swap (chat composer ↔
|
||||
* question dock ↔ collapsed bar). The shell is sticky INSIDE the scroller —
|
||||
* never overlapping the transcript at rest, never covering the scrollbar —
|
||||
* and DockOverlay animates its height on variant changes.
|
||||
*/
|
||||
export function Chat({
|
||||
chatId,
|
||||
@@ -71,8 +70,8 @@ export function Chat({
|
||||
const pending = findPendingToolCall(messages);
|
||||
const busy = status === "submitted" || status === "streaming";
|
||||
|
||||
// A tool call still streaming its input (question being generated): the
|
||||
// blob shows a shimmer instead of the composer.
|
||||
// A tool call still streaming its input: the teacher is writing a question.
|
||||
// Shown as a transcript shimmer, exactly like the thinking indicator.
|
||||
const questionStreaming =
|
||||
!pending &&
|
||||
messages.at(-1)?.role === "assistant" &&
|
||||
@@ -95,108 +94,187 @@ export function Chat({
|
||||
<div className="min-w-0 flex-1 truncate font-medium">{title}</div>
|
||||
</header>
|
||||
|
||||
{/* Transcript scrolls full-height; the blob floats on top of it. */}
|
||||
<div className="relative min-h-0 flex-1">
|
||||
<Conversation className="h-full">
|
||||
<ConversationContent className={`${COLUMN} gap-4 pt-4 ${pending || questionStreaming ? "pb-[32rem]" : "pb-44"}`}>
|
||||
{messages.length === 0 && !busy && (
|
||||
<ConversationEmptyState
|
||||
title="New session"
|
||||
description="The teacher will open by probing what you already know."
|
||||
/>
|
||||
)}
|
||||
<ConversationContent className="h-full gap-0 p-0">
|
||||
<div className={`${COLUMN} flex flex-1 flex-col gap-4 pt-4`}>
|
||||
{messages.length === 0 && !busy && (
|
||||
<ConversationEmptyState
|
||||
title="New session"
|
||||
description="The teacher will open by probing what you already know."
|
||||
/>
|
||||
)}
|
||||
|
||||
{messages.map((m, mi) => (
|
||||
<Message key={m.id} from={m.role} className={m.role === "assistant" ? "max-w-full" : undefined}>
|
||||
<MessageContent className={m.role === "assistant" ? "w-full" : undefined}>
|
||||
{m.role === "user" ? (
|
||||
// User text renders plain: the model's LaTeX pipeline is not
|
||||
// applied to learner-authored text ($ stays $, no surprises).
|
||||
<div className="whitespace-pre-wrap">
|
||||
{m.parts.filter((p) => p.type === "text").map((p) => p.text).join("\n")}
|
||||
</div>
|
||||
) : (
|
||||
m.parts.map((part, pi) => {
|
||||
const isLastPart = mi === messages.length - 1 && pi === m.parts.length - 1;
|
||||
switch (part.type) {
|
||||
case "text":
|
||||
return <MessageResponse key={pi}>{part.text}</MessageResponse>;
|
||||
case "reasoning":
|
||||
return (
|
||||
<Reasoning key={pi} isStreaming={status === "streaming" && isLastPart} className="mb-2">
|
||||
<ReasoningTrigger />
|
||||
<ReasoningContent>{part.text}</ReasoningContent>
|
||||
</Reasoning>
|
||||
);
|
||||
case "step-start":
|
||||
return pi > 0 ? <Separator key={pi} className="my-3" /> : null;
|
||||
case "tool-quiz":
|
||||
case "tool-ask_user_question": {
|
||||
// Pending/streaming questions live in the dock, not the
|
||||
// transcript; answered ones render as graded records.
|
||||
if (part.state === "output-available") {
|
||||
return <AnsweredCard key={pi} answer={part.output as QuestionAnswerData} />;
|
||||
{messages.map((m, mi) => (
|
||||
<Message key={m.id} from={m.role} className={m.role === "assistant" ? "max-w-full" : undefined}>
|
||||
<MessageContent className={m.role === "assistant" ? "w-full" : undefined}>
|
||||
{m.role === "user" ? (
|
||||
// User text renders plain: the model's LaTeX pipeline is not
|
||||
// applied to learner-authored text ($ stays $, no surprises).
|
||||
<div className="whitespace-pre-wrap">
|
||||
{m.parts.filter((p) => p.type === "text").map((p) => p.text).join("\n")}
|
||||
</div>
|
||||
) : (
|
||||
m.parts.map((part, pi) => {
|
||||
const isLastPart = mi === messages.length - 1 && pi === m.parts.length - 1;
|
||||
switch (part.type) {
|
||||
case "text":
|
||||
return <MessageResponse key={pi}>{part.text}</MessageResponse>;
|
||||
case "reasoning":
|
||||
return (
|
||||
<Reasoning key={pi} isStreaming={status === "streaming" && isLastPart} className="mb-2">
|
||||
<ReasoningTrigger />
|
||||
<ReasoningContent>{part.text}</ReasoningContent>
|
||||
</Reasoning>
|
||||
);
|
||||
case "step-start":
|
||||
return pi > 0 ? <Separator key={pi} className="my-3" /> : null;
|
||||
case "tool-quiz":
|
||||
case "tool-ask_user_question": {
|
||||
// Pending/streaming questions live in the dock, not the
|
||||
// transcript; answered ones render as graded records.
|
||||
if (part.state === "output-available") {
|
||||
return <AnsweredCard key={pi} answer={part.output as QuestionAnswerData} />;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
return null;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
})
|
||||
)}
|
||||
</MessageContent>
|
||||
</Message>
|
||||
))}
|
||||
})
|
||||
)}
|
||||
</MessageContent>
|
||||
</Message>
|
||||
))}
|
||||
|
||||
{status === "submitted" && <Shimmer className="text-sm">Thinking…</Shimmer>}
|
||||
{error && (
|
||||
<div className="rounded-lg border border-destructive/50 bg-destructive/10 px-3 py-2 text-sm">
|
||||
Something went wrong: {error.message}
|
||||
</div>
|
||||
)}
|
||||
{status === "submitted" && <Shimmer className="text-sm">Thinking…</Shimmer>}
|
||||
{questionStreaming && <Shimmer className="text-sm">Writing a question…</Shimmer>}
|
||||
{error && (
|
||||
<div className="rounded-lg border border-destructive/50 bg-destructive/10 px-3 py-2 text-sm">
|
||||
Something went wrong: {error.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DockOverlay
|
||||
pending={pending}
|
||||
composer={
|
||||
<Composer
|
||||
busy={busy}
|
||||
value={text}
|
||||
onChange={setText}
|
||||
onSend={onSend}
|
||||
onStop={() => stop()}
|
||||
canSend={canSend}
|
||||
/>
|
||||
}
|
||||
onSubmitAnswer={(output) => {
|
||||
if (!pending) return;
|
||||
void addToolOutput({
|
||||
tool: pending.tool as "quiz" | "ask_user_question",
|
||||
toolCallId: pending.toolCallId,
|
||||
output,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</ConversationContent>
|
||||
<ConversationScrollButton />
|
||||
|
||||
{/* The floating blob. ONE persistent shell — contents swap by mode.
|
||||
Content fades out behind it. */}
|
||||
<div className="pointer-events-none absolute inset-x-0 bottom-0">
|
||||
<div className="h-24 bg-gradient-to-t from-background via-background/85 to-transparent" />
|
||||
<div className="bg-background pb-4">
|
||||
<div className={COLUMN}>
|
||||
<div className="pointer-events-auto rounded-2xl border bg-card shadow-lg">
|
||||
{pending ? (
|
||||
<QuestionDock
|
||||
toolName={pending.tool as "quiz" | "ask_user_question"}
|
||||
toolCallId={pending.toolCallId}
|
||||
input={pending.input as never}
|
||||
onSubmit={(output) =>
|
||||
void addToolOutput({
|
||||
tool: pending.tool as "quiz" | "ask_user_question",
|
||||
toolCallId: pending.toolCallId,
|
||||
output,
|
||||
})
|
||||
}
|
||||
/>
|
||||
) : questionStreaming ? (
|
||||
<div className="p-4">
|
||||
<Shimmer className="text-sm">Preparing a question…</Shimmer>
|
||||
</div>
|
||||
) : (
|
||||
<Composer
|
||||
busy={busy}
|
||||
value={text}
|
||||
onChange={setText}
|
||||
onSend={onSend}
|
||||
onStop={() => stop()}
|
||||
canSend={canSend}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Conversation>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* The floating blob: ONE persistent shell, sticky at the bottom of the
|
||||
* scroller (in flow — the transcript scrolls fully clear of it, and it never
|
||||
* covers the scrollbar). Contents swap between the chat composer and the
|
||||
* question dock; shell height morphs between variants (WAAPI, quick).
|
||||
*
|
||||
* Collapse: scroll up and the dock folds into a slim bar; click it (or scroll
|
||||
* back to the bottom) to re-expand. The question form stays MOUNTED while
|
||||
* collapsed (hidden, not unmounted) so a half-made selection survives.
|
||||
*/
|
||||
function DockOverlay({
|
||||
pending,
|
||||
composer,
|
||||
onSubmitAnswer,
|
||||
}: {
|
||||
pending: ReturnType<typeof findPendingToolCall>;
|
||||
composer: React.ReactNode;
|
||||
onSubmitAnswer: (output: QuestionAnswerData) => void;
|
||||
}) {
|
||||
const { isAtBottom, scrollToBottom } = useStickToBottomContext();
|
||||
const [forceOpen, setForceOpen] = useState(false);
|
||||
useEffect(() => {
|
||||
if (!isAtBottom) setForceOpen(false);
|
||||
}, [isAtBottom]);
|
||||
const expanded = isAtBottom || forceOpen;
|
||||
|
||||
const mode = pending ? `question:${pending.toolCallId}` : "chat";
|
||||
|
||||
// A new question while the learner is at the bottom: scroll so the dock
|
||||
// never covers the transcript tail. (Scrolled up → collapsed bar, no yank.)
|
||||
const pendingId = pending?.toolCallId ?? null;
|
||||
useEffect(() => {
|
||||
if (pendingId && isAtBottom) void scrollToBottom();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- fire only when a NEW question lands
|
||||
}, [pendingId]);
|
||||
|
||||
// Height morph: animate the shell from its previous height to its new one
|
||||
// whenever the variant (chat ↔ question ↔ collapsed bar) changes. Typing
|
||||
// growth keeps the same stateKey and is NOT animated.
|
||||
const shellRef = useRef<HTMLDivElement>(null);
|
||||
const stateKey = `${mode}:${pending ? expanded : "-"}`;
|
||||
const prevRef = useRef<{ key: string; height: number } | null>(null);
|
||||
useIsoLayoutEffect(() => {
|
||||
const el = shellRef.current;
|
||||
if (!el) return;
|
||||
const p = prevRef.current;
|
||||
if (p && p.key === stateKey) {
|
||||
// Same variant: keep the settled height fresh, but never measure while
|
||||
// a morph is in flight — getBoundingClientRect would read the ANIMATED
|
||||
// value and corrupt the start height of the next morph.
|
||||
if (el.getAnimations().length === 0) p.height = el.getBoundingClientRect().height;
|
||||
return;
|
||||
}
|
||||
el.getAnimations().forEach((a) => a.cancel()); // flush to natural height before measuring
|
||||
const h = el.getBoundingClientRect().height;
|
||||
if (p && Math.abs(p.height - h) > 1) {
|
||||
el.animate([{ height: `${p.height}px` }, { height: `${h}px` }], {
|
||||
duration: 180,
|
||||
easing: "cubic-bezier(0.2, 0.8, 0.2, 1)",
|
||||
});
|
||||
}
|
||||
prevRef.current = { key: stateKey, height: h };
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="pointer-events-none sticky bottom-0 mt-auto">
|
||||
<div className="h-24 bg-gradient-to-t from-background via-background/85 to-transparent" />
|
||||
<div className="bg-background pb-4">
|
||||
<div className={COLUMN}>
|
||||
<div ref={shellRef} className="pointer-events-auto overflow-hidden rounded-2xl border bg-card shadow-lg">
|
||||
<div key={mode} className="dock-variant">
|
||||
{pending ? (
|
||||
<QuestionDock
|
||||
toolName={pending.tool as "quiz" | "ask_user_question"}
|
||||
toolCallId={pending.toolCallId}
|
||||
input={pending.input as never}
|
||||
expanded={expanded}
|
||||
onExpand={() => {
|
||||
setForceOpen(true);
|
||||
void scrollToBottom();
|
||||
}}
|
||||
onSubmit={onSubmitAnswer}
|
||||
/>
|
||||
) : (
|
||||
composer
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { ArrowDownIcon } from "lucide-react";
|
||||
import { useStickToBottomContext } from "use-stick-to-bottom";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { MessageResponse } from "@/components/ai-elements/message";
|
||||
import { cn } from "@/lib/utils";
|
||||
@@ -26,40 +25,27 @@ import {
|
||||
* the bottom field (note for select modes, the answer for free-text asks,
|
||||
* "Other" text when Other is picked) plus the Submit button send together.
|
||||
*
|
||||
* Collapse: scroll up and the dock folds into a slim bar (question one-liner);
|
||||
* click it (or scroll back to the bottom) to re-expand. The expanded content
|
||||
* stays MOUNTED while collapsed (hidden, not unmounted) so a half-made
|
||||
* selection survives scrolling.
|
||||
*
|
||||
* Rendered inside <Conversation> to read the stick-to-bottom context.
|
||||
* Content only — the persistent shell lives in the chat view's overlay.
|
||||
* Collapse behavior (scroll-up → slim bar) is owned by the DockOverlay in the
|
||||
* chat view, which also owns the persistent shell and its height morph. This
|
||||
* component is content only. The expanded form stays MOUNTED while collapsed
|
||||
* (hidden, not unmounted) so a half-made selection survives scrolling.
|
||||
*/
|
||||
|
||||
export interface QuestionDockProps {
|
||||
toolName: "quiz" | "ask_user_question";
|
||||
toolCallId: string;
|
||||
input: QuizToolInput | AskToolInput;
|
||||
/** Collapse state, owned by the DockOverlay (it drives the shell's height morph). */
|
||||
expanded: boolean;
|
||||
onExpand: () => void;
|
||||
onSubmit: (output: QuestionAnswerData) => void;
|
||||
}
|
||||
|
||||
export function QuestionDock({ toolName, toolCallId, input, onSubmit }: QuestionDockProps) {
|
||||
const { isAtBottom, scrollToBottom } = useStickToBottomContext();
|
||||
const [forceOpen, setForceOpen] = useState(false);
|
||||
useEffect(() => {
|
||||
if (!isAtBottom) setForceOpen(false);
|
||||
}, [isAtBottom]);
|
||||
const expanded = isAtBottom || forceOpen;
|
||||
|
||||
const expand = () => {
|
||||
setForceOpen(true);
|
||||
void scrollToBottom();
|
||||
};
|
||||
|
||||
export function QuestionDock({ toolName, toolCallId, input, expanded, onExpand, onSubmit }: QuestionDockProps) {
|
||||
return (
|
||||
<>
|
||||
{!expanded && <QuestionDockBar toolName={toolName} question={input.question} onExpand={expand} />}
|
||||
{/* Stays mounted while collapsed — selection state survives scrolling. */}
|
||||
<div className={expanded ? undefined : "invisible h-0 overflow-hidden"}>
|
||||
{!expanded && <QuestionDockBar toolName={toolName} question={input.question} onExpand={onExpand} />}
|
||||
<div className={expanded ? "dock-variant" : "invisible h-0 overflow-hidden"}>
|
||||
<QuestionDockForm
|
||||
toolName={toolName}
|
||||
toolCallId={toolCallId}
|
||||
@@ -97,7 +83,7 @@ export function QuestionDockBar({
|
||||
type="button"
|
||||
data-testid="question-dock-bar"
|
||||
onClick={onExpand}
|
||||
className="flex w-full items-center gap-2.5 px-4 py-2.5 text-left text-sm transition-colors hover:bg-accent/40"
|
||||
className="dock-variant flex w-full items-center gap-2.5 px-4 py-2.5 text-left text-sm transition-colors hover:bg-accent/40"
|
||||
>
|
||||
<span className="shrink-0 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
{toolName === "quiz" ? "Quiz" : "Question"}
|
||||
@@ -111,7 +97,7 @@ export function QuestionDockBar({
|
||||
}
|
||||
|
||||
/** The expanded question: label, question, options, and the unified bottom row. */
|
||||
function QuestionDockForm({ toolName, toolCallId, input, onSubmit }: QuestionDockProps) {
|
||||
function QuestionDockForm({ toolName, toolCallId, input, onSubmit }: Omit<QuestionDockProps, "expanded" | "onExpand">) {
|
||||
const kind = toolName === "quiz" ? ("quiz" as const) : ("ask" as const);
|
||||
|
||||
// Canonical QuestionData, built once per question. Quiz options are
|
||||
|
||||
@@ -57,6 +57,12 @@ function scriptedModel(calls: string[][]) {
|
||||
{ type: "reasoning-start", id: "r1" },
|
||||
{ type: "reasoning-delta", id: "r1", delta: "Probe the basics first." },
|
||||
{ type: "reasoning-end", id: "r1" },
|
||||
// Same shape real providers use: input streams as deltas,
|
||||
// then the completed call. (This is what makes the client's
|
||||
// 'Writing a question…' indicator possible.)
|
||||
{ type: "tool-input-start", id: "call-1", toolName: "quiz" },
|
||||
{ type: "tool-input-delta", id: "call-1", delta: JSON.stringify(QUIZ_INPUT) },
|
||||
{ type: "tool-input-end", id: "call-1" },
|
||||
{
|
||||
type: "tool-call",
|
||||
toolCallId: "call-1",
|
||||
@@ -188,6 +194,23 @@ describe("teacher chat flow (scripted model)", () => {
|
||||
assert.equal(res.status, 404);
|
||||
});
|
||||
|
||||
it("streams tool-input-start before tool-input-available (protocol pin for the 'Writing a question…' indicator)", async () => {
|
||||
// The client's writing indicator keys off tool parts in state
|
||||
// 'input-streaming', which the stream processor sets from the
|
||||
// tool-input-start chunk. If a transport change ever stopped emitting
|
||||
// it, the indicator would silently die — pin the protocol.
|
||||
const agent = createTeacherAgent(scriptedModel([]));
|
||||
const chat = createChat("Test: protocol pin");
|
||||
createdChats.push(chat.id);
|
||||
const firstUser = { id: "u1", role: "user", parts: [{ type: "text", text: "quiz me" }] };
|
||||
const body = await drain(await handleChatRequest(post(chat.id, [firstUser]), agent));
|
||||
const startIdx = body.indexOf('"type":"tool-input-start"');
|
||||
const availIdx = body.indexOf('"type":"tool-input-available"');
|
||||
assert.ok(startIdx !== -1, "tool-input-start chunk present in the stream");
|
||||
assert.ok(availIdx !== -1, "tool-input-available chunk present in the stream");
|
||||
assert.ok(startIdx < availIdx, "start precedes available");
|
||||
});
|
||||
|
||||
it("persists even when the stream is aborted (resume keeps partial state)", async () => {
|
||||
const calls: string[][] = [];
|
||||
const agent = createTeacherAgent(scriptedModel(calls));
|
||||
|
||||
@@ -16,7 +16,6 @@ import assert from "node:assert/strict";
|
||||
import { describe, it } from "node:test";
|
||||
import { renderToStaticMarkup } from "react-dom/server";
|
||||
import { MessageResponse } from "../components/ai-elements/message.tsx";
|
||||
import { StickToBottom } from "use-stick-to-bottom";
|
||||
import { QuestionDock } from "../components/question-dock.tsx";
|
||||
import { AnsweredCard } from "../components/answered-card.tsx";
|
||||
import { buildAnswer, coerceCorrectAnswer, normalizeOptions, resolveCorrect, type QuestionData } from "../src/core/question-core.ts";
|
||||
@@ -44,10 +43,11 @@ function quizQD(): QuestionData {
|
||||
|
||||
|
||||
function renderDock(props: { toolName: "quiz" | "ask_user_question"; toolCallId: string; input: never; onSubmit?: () => void }) {
|
||||
// The dock reads the stick-to-bottom scroll context; wrap it. In static
|
||||
// render the context starts at isAtBottom=true → the expanded form renders.
|
||||
// expanded=true renders the full form (the collapsed bar is covered by the
|
||||
// QuestionDockBar test below). No scroll context needed — the DockOverlay
|
||||
// in the chat view owns that.
|
||||
return renderToStaticMarkup(
|
||||
<StickToBottom><QuestionDock {...props} onSubmit={props.onSubmit ?? (() => {})} /></StickToBottom>,
|
||||
<QuestionDock {...props} expanded={true} onExpand={() => {}} onSubmit={props.onSubmit ?? (() => {})} />,
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user