> };
const items: Item[] = [];
for (const e of entries) {
if (e.kind === "thought") {
items.push({ kind: "thought", text: e.text });
+ } else if (e.kind === "text") {
+ items.push({ kind: "text", text: e.text });
} else {
const last = items[items.length - 1];
if (last && last.kind === "toolGroup" && last.name === e.name) {
@@ -233,13 +253,39 @@ function Timeline({ entries }: { entries: TimelineEntry[] }) {
}
return (
- {items.map((item, i) =>
- item.kind === "thought" ? (
-
- ) : (
-
- )
- )}
+ {items.map((item, i) => {
+ if (item.kind === "thought") {
+ return ;
+ }
+ if (item.kind === "text") {
+ return ;
+ }
+ return ;
+ })}
+
+ );
+}
+
+/**
+ * One text segment in the assistant's timeline. Rendered as its own
+ * bubble so each round of multi-tool-loop output reads as a discrete
+ * step instead of concatenating into a wall of text.
+ */
+function TimelineText({ text }: { text: string }) {
+ return (
+
+
);
}
@@ -449,7 +495,29 @@ export function ChatPanel() {
try {
const res = await fetch(`/api/chat/threads/${id}`);
const data = await res.json();
- setMessages(data.messages || []);
+ // Hydrate the timeline from persisted textSegments + toolCalls
+ // so a reloaded thread renders the same per-round bubbles the
+ // user saw during streaming. Older messages without
+ // textSegments fall back to the legacy single-bubble path.
+ const hydrated = (data.messages || []).map((m: any) => {
+ if (m.role !== "assistant") return m;
+ const segs: string[] = Array.isArray(m.textSegments) ? m.textSegments : [];
+ if (segs.length === 0) return m;
+ const timeline: TimelineEntry[] = segs.map((t) => ({ kind: "text", text: t }));
+ // We don't have round-level interleaving for tool calls in
+ // the persisted shape (the schema flattens them), so we drop
+ // the toolCalls into the timeline at the end. The streamed
+ // shape preserves true ordering; this is just a reload
+ // approximation. Good enough — what the user really cares
+ // about is the text segments not run-on'ing into one blob.
+ if (Array.isArray(m.toolCalls)) {
+ for (const tc of m.toolCalls) {
+ timeline.push({ kind: "tool", name: tc.name, status: "done" });
+ }
+ }
+ return { ...m, timeline, content: "" };
+ });
+ setMessages(hydrated);
} catch { /* silent */ }
}, []);
@@ -547,11 +615,29 @@ export function ChatPanel() {
try { ev = JSON.parse(line.slice(6)); } catch { continue; }
if (ev.type === "text" && ev.text) {
- assistantContent += ev.text;
+ // Each text SSE event = one round of the model's text
+ // output. Push a new "text" timeline entry so the
+ // renderer can show multi-round turns as separate
+ // bubbles instead of one run-on paragraph. We still
+ // maintain `assistantContent` (joined with blank lines)
+ // so the legacy single-bubble fallback path and any
+ // post-stream consumers still work.
+ assistantContent += (assistantContent ? "\n\n" : "") + ev.text;
setMessages((prev) => {
const next = [...prev];
if (msgIndex >= 0 && next[msgIndex]) {
- next[msgIndex] = { ...next[msgIndex], content: assistantContent };
+ const tl = next[msgIndex].timeline ?? [];
+ next[msgIndex] = {
+ ...next[msgIndex],
+ // Don't write to msg.content during streaming —
+ // the timeline is the source of truth. Setting
+ // content on every text event re-renders one
+ // giant bubble in the bottom slot AND the
+ // segmented timeline above it, duplicating the
+ // same prose. Persisted messages pick up
+ // content via the final flush below.
+ timeline: [...tl, { kind: "text", text: ev.text }],
+ };
}
return next;
});
@@ -610,13 +696,18 @@ export function ChatPanel() {
} else if (ev.type === "error") {
const errText = ev.error || "Unknown error";
const isToolErr = /tool|mcp|coolify|gitea/i.test(errText);
- assistantContent += isToolErr
- ? `\n\n⚠️ **Tool error:** ${errText}`
- : `\n\n⚠️ ${errText}`;
+ const errBubble = isToolErr
+ ? `⚠️ **Tool error:** ${errText}`
+ : `⚠️ ${errText}`;
+ assistantContent += (assistantContent ? "\n\n" : "") + errBubble;
setMessages((prev) => {
const next = [...prev];
if (msgIndex >= 0 && next[msgIndex]) {
- next[msgIndex] = { ...next[msgIndex], content: assistantContent };
+ const tl = next[msgIndex].timeline ?? [];
+ next[msgIndex] = {
+ ...next[msgIndex],
+ timeline: [...tl, { kind: "text", text: errBubble }],
+ };
}
return next;
});