;
- const content = normalizeContent(m.content);
- const cards: ToolCard[] = [];
-
- for (const item of content) {
- const kind = String(item.type ?? "").toLowerCase();
- const isToolCall =
- ["toolcall", "tool_call", "tooluse", "tool_use"].includes(kind) ||
- (typeof item.name === "string" && item.arguments != null);
- if (isToolCall) {
- cards.push({
- kind: "call",
- name: (item.name as string) ?? "tool",
- args: coerceArgs(item.arguments ?? item.args),
- });
- }
- }
-
- for (const item of content) {
- const kind = String(item.type ?? "").toLowerCase();
- if (kind !== "toolresult" && kind !== "tool_result") continue;
- const text = extractToolText(item);
- const name = typeof item.name === "string" ? item.name : "tool";
- cards.push({ kind: "result", name, text });
- }
-
- if (
- isToolResultMessage(message) &&
- !cards.some((card) => card.kind === "result")
- ) {
- const name =
- (typeof m.toolName === "string" && m.toolName) ||
- (typeof m.tool_name === "string" && m.tool_name) ||
- "tool";
- const text = extractText(message) ?? undefined;
- cards.push({ kind: "result", name, text });
- }
-
- return cards;
-}
-
-function renderToolCardLegacy(
- card: ToolCard,
- opts?: {
- id: string;
- expanded: boolean;
- onToggle?: (id: string, expanded: boolean) => void;
- },
-) {
- const display = resolveToolDisplay({ name: card.name, args: card.args });
- const detail = formatToolDetail(display);
- const hasOutput = typeof card.text === "string" && card.text.length > 0;
- const expanded = opts?.expanded ?? false;
- const id = opts?.id ?? `${card.name}-${Math.random()}`;
- return html`
-
- `;
-}
-
-function renderToolCardSidebar(
- card: ToolCard,
- onOpenSidebar?: (content: string) => void,
-) {
- const display = resolveToolDisplay({ name: card.name, args: card.args });
- const detail = formatToolDetail(display);
- const hasText = Boolean(card.text?.trim());
-
- const canClick = Boolean(onOpenSidebar);
- const handleClick = canClick
- ? () => {
- if (hasText) {
- onOpenSidebar!(formatToolOutputForSidebar(card.text!));
- return;
- }
- const info = `## ${display.label}\n\n${
- detail ? `**Command:** \`${detail}\`\n\n` : ""
- }*No output — tool completed successfully.*`;
- onOpenSidebar!(info);
- }
- : undefined;
-
- const isShort = hasText && (card.text?.length ?? 0) <= TOOL_INLINE_THRESHOLD;
- const showCollapsed = hasText && !isShort;
- const showInline = hasText && isShort;
- const isEmpty = !hasText;
-
- return html`
-
- `;
-}
-
-function renderAvatar(role: string) {
- const normalized = normalizeRoleForGrouping(role);
- const initial = normalized === "user" ? "U" : normalized === "assistant" ? "A" : "?";
- const className = normalized === "user" ? "user" : normalized === "assistant" ? "assistant" : "other";
- return html`${initial}
`;
-}
-
-function renderStreamingGroup(
- text: string,
- startedAt: number,
- onOpenSidebar?: (content: string) => void,
-) {
- const timestamp = new Date(startedAt).toLocaleTimeString([], {
- hour: "numeric",
- minute: "2-digit",
- });
-
- return html`
-
- ${renderAvatar("assistant")}
-
- ${renderGroupedMessage(
- {
- role: "assistant",
- content: [{ type: "text", text }],
- timestamp: startedAt,
- },
- { isStreaming: true, showReasoning: false },
- onOpenSidebar,
- )}
-
-
-
- ${renderAvatar(group.role)}
-
- ${group.messages.map((item, index) =>
- renderGroupedMessage(
- item.message,
- {
- isStreaming:
- group.isStreaming && index === group.messages.length - 1,
- showReasoning: opts.showReasoning,
- },
- opts.onOpenSidebar,
- ),
- )}
-
-
-
- ${markdown
- ? html`
${unsafeHTML(toSanitizedMarkdownHtml(markdown))}
`
- : nothing}
- ${toolCards.map((card) => renderToolCardSidebar(card, onOpenSidebar))}
-