diff options
Diffstat (limited to 'src/features/chat/ui')
| -rw-r--r-- | src/features/chat/ui/ChatView.svelte | 93 | ||||
| -rw-r--r-- | src/features/chat/ui/TurnSummary.svelte | 75 |
2 files changed, 25 insertions, 143 deletions
diff --git a/src/features/chat/ui/ChatView.svelte b/src/features/chat/ui/ChatView.svelte index 6acda53..3a078fb 100644 --- a/src/features/chat/ui/ChatView.svelte +++ b/src/features/chat/ui/ChatView.svelte @@ -1,27 +1,16 @@ <script lang="ts"> import { groupRenderedChunks, type RenderedChunk } from "../index"; - import type { TelemetryState } from "../../../core/telemetry"; - import { stepMetrics, stepTps } from "../../../core/telemetry"; - interface Props { - chunks: readonly RenderedChunk[]; - telemetry: TelemetryState; - currentTurnId: string | null; - } - - let { chunks, telemetry, currentTurnId }: Props = $props(); + let { chunks }: { chunks: readonly RenderedChunk[] } = $props(); const groups = $derived(groupRenderedChunks(chunks)); - function formatMs(ms: number): string { - if (ms < 1000) return `${Math.round(ms)}ms`; - const s = ms / 1000; - return s < 60 ? `${s.toFixed(1)}s` : `${Math.floor(s / 60)}m${Math.round(s % 60)}s`; - } - + // Stable per-row keys. Thinking blocks get an ordinal key (`think<n>`) that + // survives the provisional→committed (seq null → seq N) transition, so the + // collapse's open/close state is NOT lost when a turn seals. (App isolates + // these keys per conversation via {#key}.) const rows = $derived.by(() => { let thinking = 0; - let stepIdx = 0; return groups.map((group, i) => { let key: string; if (group.kind === "tool-batch") { @@ -33,17 +22,14 @@ } else { key = `p${i}`; } - const si = stepIdx; - if (group.kind === "tool-batch" || (group.kind === "single" && (group.chunk.chunk.type === "tool-call" || group.chunk.chunk.type === "tool-result"))) { - stepIdx++; - } - return { group, key, stepIdx: si }; + return { group, key }; }); }); </script> -{#snippet chunkRow(rendered: RenderedChunk, sIdx: number)} +{#snippet chunkRow(rendered: RenderedChunk)} {#if rendered.role === "user"} + <!-- User: a speech bubble, left-aligned --> <div class="chat chat-start"> <div class="chat-bubble chat-bubble-primary"> {#if rendered.chunk.type === "text"} @@ -52,6 +38,9 @@ </div> </div> {:else if rendered.chunk.type === "thinking"} + <!-- Thinking: a visible bubble (like tool cards), holding a checkbox collapse + (no arrow icon, smooth open/close). Title reads "Thinking" + loading dots + while generating, then "Thoughts" with no dots once complete. --> <div class="chat chat-start [&>.chat-bubble]:max-w-5xl [&>.chat-bubble]:p-0"> <div class="chat-bubble w-full bg-transparent"> <div class="collapse w-full rounded-box bg-base-200 text-sm"> @@ -69,18 +58,14 @@ </div> </div> {:else if rendered.chunk.type === "tool-call" || rendered.chunk.type === "tool-result"} - {@const step = currentTurnId ? stepMetrics(telemetry, currentTurnId, sIdx) : undefined} - {@const toolDur = step?.toolDurationMs} + <!-- Single tool call/result: a regular (non-speech) card. Nested in the + chat-start grid via a transparent, padding-stripped chat-bubble shim so + the card inherits the same left offset as the bubble bodies. --> <div class="chat chat-start [&>.chat-bubble]:max-w-full [&>.chat-bubble]:p-0"> <div class="chat-bubble bg-transparent"> {#if rendered.chunk.type === "tool-call"} <div class="w-fit max-w-full rounded-box bg-base-200 p-3 text-sm"> - <div class="flex items-center gap-2"> - <strong>{rendered.chunk.toolName}</strong> - {#if toolDur !== undefined && toolDur > 0} - <span class="badge badge-ghost badge-xs ml-auto">{formatMs(toolDur)}</span> - {/if} - </div> + <strong>{rendered.chunk.toolName}</strong> <pre class="text-xs mt-1">{JSON.stringify(rendered.chunk.input, null, 2)}</pre> </div> {:else} @@ -88,43 +73,19 @@ class="w-fit max-w-full rounded-box bg-base-200 p-3 text-sm" class:text-error={rendered.chunk.isError} > - <div class="flex items-center gap-2"> - <strong>{rendered.chunk.toolName}</strong> - {#if toolDur !== undefined && toolDur > 0} - <span class="badge badge-ghost badge-xs ml-auto">{formatMs(toolDur)}</span> - {/if} - </div> + <strong>{rendered.chunk.toolName}</strong> <pre class="text-xs mt-1">{rendered.chunk.content}</pre> </div> {/if} </div> </div> {:else} - {@const step = currentTurnId ? stepMetrics(telemetry, currentTurnId, sIdx) : undefined} - {@const tps = step ? stepTps(step) : undefined} + <!-- Assistant text / system / error: an INVISIBLE speech bubble — same + chat-start grid as the user bubble, so it inherits identical left spacing. --> <div class="chat chat-start [&>.chat-bubble]:max-w-5xl"> <div class="chat-bubble w-full bg-transparent"> {#if rendered.chunk.type === "text"} - <ul class="list rounded-box text-sm"> - <li class="list-row"> - <p>{rendered.chunk.text}</p> - </li> - {#if step && (step.genTotalMs !== undefined || tps !== undefined || step.usage?.outputTokens !== undefined)} - <li class="list-row"> - {#if step.genTotalMs !== undefined} - <span class="badge badge-ghost badge-xs">{formatMs(step.genTotalMs)}</span> - {/if} - <span>·</span> - {#if tps !== undefined} - <span class="badge badge-ghost badge-xs">{Math.round(tps)} t/s</span> - {/if} - <span>·</span> - {#if step.usage?.outputTokens !== undefined} - <span class="badge badge-ghost badge-xs">{step.usage.outputTokens} tok</span> - {/if} - </li> - {/if} - </ul> + <p>{rendered.chunk.text}</p> {:else if rendered.chunk.type === "error"} <div class="text-error" role="alert"> {rendered.chunk.message} @@ -141,24 +102,20 @@ {/snippet} <div class="flex flex-col gap-2 p-4 pl-6" role="log" aria-live="polite"> - {#each rows as { group, key, stepIdx } (key)} + {#each rows as { group, key } (key)} {#if group.kind === "single"} - {@render chunkRow(group.chunk, stepIdx)} + {@render chunkRow(group.chunk)} {:else} - {@const step = currentTurnId ? stepMetrics(telemetry, currentTurnId, stepIdx) : undefined} - {@const toolDur = step?.toolDurationMs} + <!-- Batched tool calls (one step): a single bubble holding a DaisyUI list, + one row per call paired with its result. Same chat-start grid shim as + the single tool card so it lines up with the other messages. --> <div class="chat chat-start [&>.chat-bubble]:max-w-full [&>.chat-bubble]:p-0"> <div class="chat-bubble bg-transparent"> <ul class="list w-fit max-w-full rounded-box bg-base-200 text-sm"> {#each group.entries as entry (entry.call.toolCallId)} <li class="list-row"> <div> - <div class="flex items-center gap-2"> - <strong>{entry.call.toolName}</strong> - {#if toolDur !== undefined && toolDur > 0} - <span class="badge badge-ghost badge-xs ml-auto">{formatMs(toolDur)}</span> - {/if} - </div> + <strong>{entry.call.toolName}</strong> <pre class="text-xs mt-1">{JSON.stringify(entry.call.input, null, 2)}</pre> {#if entry.result} <pre diff --git a/src/features/chat/ui/TurnSummary.svelte b/src/features/chat/ui/TurnSummary.svelte deleted file mode 100644 index eedb0cc..0000000 --- a/src/features/chat/ui/TurnSummary.svelte +++ /dev/null @@ -1,75 +0,0 @@ -<script lang="ts"> - import type { TelemetryState } from "../../../core/telemetry"; - import { - stepCount, - totalInputTokens, - totalOutputTokens, - turnMetrics, - turnTps, - } from "../../../core/telemetry"; - - interface Props { - telemetry: TelemetryState; - turnId: string | null; - } - - let { telemetry, turnId }: Props = $props(); - - function formatMs(ms: number): string { - if (ms < 1000) return `${Math.round(ms)}ms`; - const s = ms / 1000; - return s < 60 ? `${s.toFixed(1)}s` : `${Math.floor(s / 60)}m${Math.round(s % 60)}s`; - } - - const stats = $derived.by(() => { - if (turnId === null) return null; - const metrics = turnMetrics(telemetry, turnId); - if (metrics === undefined) return null; - - const items: { label: string; value: string }[] = []; - - if (metrics.wallMs !== undefined) { - items.push({ label: "Turn", value: formatMs(metrics.wallMs) }); - } - - const outTokens = totalOutputTokens(telemetry, turnId); - const inTokens = totalInputTokens(telemetry, turnId); - if (outTokens !== undefined || inTokens !== undefined) { - const total = (outTokens ?? 0) + (inTokens ?? 0); - items.push({ label: "Tokens", value: total.toLocaleString() }); - } - if (outTokens !== undefined) { - items.push({ label: "Output", value: outTokens.toLocaleString() }); - } - if (inTokens !== undefined) { - items.push({ label: "Input", value: inTokens.toLocaleString() }); - } - - const count = stepCount(telemetry, turnId); - if (count > 0) { - items.push({ label: "Steps", value: String(count) }); - } - - const tps = turnTps(telemetry, turnId); - if (tps !== undefined) { - items.push({ label: "TPS", value: `${Math.round(tps)} t/s` }); - } - - return items; - }); -</script> - -{#if stats !== null} - <div class="chat chat-start [&>.chat-bubble]:max-w-5xl"> - <div class="chat-bubble w-full bg-transparent"> - <div class="stats stats-vertical lg:stats-horizontal"> - {#each stats as stat} - <div class="stat"> - <div class="stat-title">{stat.label}</div> - <div class="stat-value text-sm">{stat.value}</div> - </div> - {/each} - </div> - </div> - </div> -{/if} |