);
}
const AssistantMessage = memo(function AssistantMessage({
msg,
isStreaming,
outlineStatus,
sessionId,
language,
onConfirmOutline,
onSubmitUserReply,
researchRequestSnapshot,
}: {
msg: { content: string; capability?: string; events?: StreamEvent[] };
isStreaming?: boolean;
outlineStatus?: "editing" | "researching" | "done";
sessionId?: string | null;
language?: string;
researchRequestSnapshot?: MessageRequestSnapshot | null;
onConfirmOutline?: (
outline: Array<{ title: string; overview: string }>,
topic: string,
researchConfig?: Record | null,
requestSnapshot?: MessageRequestSnapshot | null,
) => void;
/**
* Submit a reply for a turn that is paused on ``ask_user``. Wired
* through from the page so the card's option-buttons / free-text
* input can deliver the user's selection back to the backend over
* the unified WebSocket. Triggers a same-turn resume (no new user
* bubble). Accepts either a flat string (legacy single-question) or
* a structured object with per-question ``answers`` (v2 path).
*/
onSubmitUserReply?: (
reply:
| string
| {
text?: string;
answers?: Array<{ questionId: string; text: string }>;
},
) => void;
}) {
const events = useMemo(() => msg.events ?? [], [msg.events]);
const resultEvent = useMemo(
() => msg.events?.find((event) => event.type === "result") ?? null,
[msg.events],
);
const outlinePreview = useMemo(() => {
if (msg.capability !== "deep_research" || !resultEvent) return null;
const meta = resultEvent.metadata as Record | undefined;
if (!meta?.outline_preview) return null;
return {
sub_topics: (meta.sub_topics ?? []) as Array<{
title: string;
overview: string;
}>,
topic: String(meta.topic ?? ""),
research_config: (meta.research_config ?? null) as Record<
string,
unknown
> | null,
};
}, [msg.capability, resultEvent]);
const quizQuestions = useMemo(() => {
if (msg.capability !== "deep_question") return null;
// Once the final result event lands, it's authoritative — it carries
// the canonical summary.results[]. Until then, accumulate questions
// from the live ``quiz_question_emitted`` content events so the
// QuizViewer can render each card the moment it's generated.
if (resultEvent) return extractQuizQuestions(resultEvent.metadata);
return extractStreamingQuizQuestions(msg.events ?? []);
}, [msg.capability, msg.events, resultEvent]);
const mathAnimatorResult = useMemo(() => {
if (msg.capability !== "math_animator" || !resultEvent) return null;
return extractMathAnimatorResult(resultEvent.metadata);
}, [msg.capability, resultEvent]);
const visualizeResult = useMemo(() => {
if (msg.capability !== "visualize" || !resultEvent) return null;
return extractVisualizeResult(resultEvent.metadata);
}, [msg.capability, resultEvent]);
// Detect the ``ask_user`` terminator payload: when the assistant turn
// ended via the ``ask_user`` tool, this is the question the user is
// expected to answer next. Render option chips below the message.
const askUserPayload = useMemo(
() => extractAskUserPayload(msg.events),
[msg.events],
);
// Interleaved segments for the default chat surface — text emitted
// before the ask_user call renders above the card; text emitted by
// the resumed iteration renders below it. Only walked when this
// message will actually render through the default branch (the
// research / quiz / animator / visualize branches have their own
// layout and pin the card elsewhere).
const useInlineAskUserSegments =
!outlinePreview &&
!mathAnimatorResult &&
!visualizeResult &&
!(quizQuestions && quizQuestions.length > 0);
const messageSegments = useMemo(
() => (useInlineAskUserSegments ? extractMessageSegments(msg.events) : []),
[useInlineAskUserSegments, msg.events],
);
const hasInlineAskUser =
useInlineAskUserSegments &&
messageSegments.some((seg) => seg.kind === "ask_user");
const researchInProgress =
outlineStatus === "researching" || outlineStatus === "done";
const showResearchBody =
Boolean(outlinePreview) && researchInProgress && Boolean(msg.content);
return (
<>
{/* Activity block pinned to the TOP: the status header
("DeepTutor Exploring… · 8s" → "DeepTutor responded. · 10s") with
the exploring trace nested beneath it — expanded while DeepTutor is
still working, collapsed once it settles into the final answer. */}
{outlinePreview && outlinePreview.sub_topics.length > 0 ? (
<>
{/* Layout for the merged research bubble:
1. trace rows (above, via TraceFlow)
2. ask_user Q&A summary (collapsible once research starts)
3. Outline editor (auto-collapses once locked)
4. Final report body (only after research is underway)
The Q&A intentionally sits ABOVE the outline so the user
sees the path that produced the outline before the outline
itself. */}
{askUserPayload ? (
{
if (!onSubmitUserReply) return;
onSubmitUserReply(reply);
}}
collapsible={researchInProgress}
defaultCollapsed={researchInProgress}
/>
) : null}
onConfirmOutline?.(
items,
outlinePreview.topic,
outlinePreview.research_config,
researchRequestSnapshot,
)
}
status={outlineStatus}
/>
{showResearchBody ? (
) : null}
) : mathAnimatorResult ? (
) : visualizeResult ? (
) : quizQuestions && quizQuestions.length > 0 ? (
<>
{/* The quiz preface (the "I researched X, now let me quiz you on Y"
sentence the user watched stream in) rides along ABOVE the quiz
card. Without this, the streamed text
vanishes from the bubble the moment the first card appears
because the branch above is mutually exclusive with
. The body is already free of the
per-question markdown — the pipeline trims that out of
``msg.content`` since the QuizViewer renders the cards
themselves. */}
{msg.content ? (
) : null}
) : hasInlineAskUser ? (
// Default chat surface with one or more ask_user calls: render
// text and cards in the exact order they were streamed, so the
// pre-ask_user narration sits above the card and the resumed
// iteration's text sits below.
messageSegments.map((seg) =>
seg.kind === "text" ? (
) : (
{
if (!onSubmitUserReply) return;
onSubmitUserReply(reply);
}}
/>
),
)
) : (
)}
{/* Non-default branches (quiz, math animator, visualize) keep
ask_user below the body. The default branch inlines the card
via ``messageSegments``; the research branch renders its own
card above the outline editor — both skip this fallback. */}
{!outlinePreview && !hasInlineAskUser && askUserPayload ? (
{
if (!onSubmitUserReply) return;
onSubmitUserReply(reply);
}}
/>
) : null}
);
});
AssistantMessage.displayName = "AssistantMessage";
function CostFooter({
cost,
tokens,
calls,
}: {
cost: number;
tokens: number;
calls: number;
}) {
const { t } = useTranslation();
const formatCost = (usd: number) => {
if (usd < 0.01) return `$${usd.toFixed(4)}`;
return `$${usd.toFixed(2)}`;
};
const formatTokens = (n: number) => {
if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
return String(n);
};
return (