fix(ui): deduplicate streaming chat segments to prevent growing duplicate bubbles (#47188)

caizongding.1 · caizongding.1 · commit 567141324a51 · 2026-03-15T20:46:29.000+08:00
The gateway sends the full accumulated assistant text in each streaming delta event. When a tool call interrupts the stream, the client saves the current chatStream as a segment. Subsequent deltas (still containing the full accumulated text) then show overlapping content: each segment contains all prior text, and the live stream bubble repeats it again. This was previously masked by a loadChatHistory() call after every tool result (removed in 0e8672a to fix a reload storm). Fix: track chatStreamSegmentOffset — the length of text already committed to segments. When saving a new segment, slice off the known prefix to store only the delta. When rendering the live stream bubble, strip the offset prefix so only new text appears. Adds test coverage for the segment dedup in chat.test.ts.
diff --git a/.openclaw-workspace-image-A8W3EQ/workspace/photo.png b/.openclaw-workspace-image-A8W3EQ/workspace/photo.png
diff --git a/ui/src/ui/app-gateway.node.test.ts b/ui/src/ui/app-gateway.node.test.ts
@@ -131,6 +131,7 @@ function createHost() {
     chatMessages: [],
     chatToolMessages: [],
     chatStreamSegments: [],
+    chatStreamSegmentOffset: 0,
     chatStream: null,
     chatStreamStartedAt: null,
     chatRunId: null,
diff --git a/ui/src/ui/app-render.ts b/ui/src/ui/app-render.ts
@@ -1360,6 +1360,7 @@ export function renderApp(state: AppViewState) {
                 messages: state.chatMessages,
                 toolMessages: state.chatToolMessages,
                 streamSegments: state.chatStreamSegments,
+                streamSegmentOffset: state.chatStreamSegmentOffset,
                 stream: state.chatStream,
                 streamStartedAt: state.chatStreamStartedAt,
                 draft: state.chatMessage,
diff --git a/ui/src/ui/app-tool-stream.node.test.ts b/ui/src/ui/app-tool-stream.node.test.ts
@@ -16,6 +16,7 @@ function createHost(overrides?: Partial<MutableHost>): MutableHost {
     chatStream: null,
     chatStreamStartedAt: null,
     chatStreamSegments: [],
+    chatStreamSegmentOffset: 0,
     toolStreamById: new Map<string, ToolStreamEntry>(),
     toolStreamOrder: [],
     chatToolMessages: [],
diff --git a/ui/src/ui/app-tool-stream.ts b/ui/src/ui/app-tool-stream.ts
@@ -31,6 +31,7 @@ type ToolStreamHost = {
   chatStream: string | null;
   chatStreamStartedAt: number | null;
   chatStreamSegments: Array<{ text: string; ts: number }>;
+  chatStreamSegmentOffset: number;
   toolStreamById: Map<string, ToolStreamEntry>;
   toolStreamOrder: string[];
   chatToolMessages: Record<string, unknown>[];
@@ -242,6 +243,7 @@ export function resetToolStream(host: ToolStreamHost) {
   host.toolStreamOrder = [];
   host.chatToolMessages = [];
   host.chatStreamSegments = [];
+  host.chatStreamSegmentOffset = 0;
 }
 
 export type CompactionStatus = {
@@ -437,8 +439,17 @@ export function handleAgentEvent(host: ToolStreamHost, payload?: AgentEventPaylo
   if (!entry) {
     // Commit any in-progress streaming text as a segment so it renders
     // above the tool card instead of below it.
+    // The server sends the full accumulated assistant text in each delta,
+    // so chatStream contains text already represented by previous segments.
+    // We strip the known prefix to avoid showing duplicate growing bubbles.
+    // See: https://github.com/openclaw/openclaw/issues/47188
     if (host.chatStream && host.chatStream.trim().length > 0) {
-      host.chatStreamSegments = [...host.chatStreamSegments, { text: host.chatStream, ts: now }];
+      const offset = host.chatStreamSegmentOffset ?? 0;
+      const deltaText = host.chatStream.slice(offset);
+      if (deltaText.trim().length > 0) {
+        host.chatStreamSegments = [...host.chatStreamSegments, { text: deltaText, ts: now }];
+      }
+      host.chatStreamSegmentOffset = host.chatStream.length;
       host.chatStream = null;
       host.chatStreamStartedAt = null;
     }
diff --git a/ui/src/ui/app-view-state.ts b/ui/src/ui/app-view-state.ts
@@ -64,6 +64,7 @@ export type AppViewState = {
   chatMessages: unknown[];
   chatToolMessages: unknown[];
   chatStreamSegments: Array<{ text: string; ts: number }>;
+  chatStreamSegmentOffset: number;
   chatStream: string | null;
   chatStreamStartedAt: number | null;
   chatRunId: string | null;
diff --git a/ui/src/ui/app.ts b/ui/src/ui/app.ts
@@ -151,6 +151,7 @@ export class OpenClawApp extends LitElement {
   @state() chatMessages: unknown[] = [];
   @state() chatToolMessages: unknown[] = [];
   @state() chatStreamSegments: Array<{ text: string; ts: number }> = [];
+  @state() chatStreamSegmentOffset = 0;
   @state() chatStream: string | null = null;
   @state() chatStreamStartedAt: number | null = null;
   @state() chatRunId: string | null = null;
diff --git a/ui/src/ui/views/chat.test.ts b/ui/src/ui/views/chat.test.ts
@@ -132,6 +132,7 @@ function createProps(overrides: Partial<ChatProps> = {}): ChatProps {
     messages: [],
     toolMessages: [],
     streamSegments: [],
+    streamSegmentOffset: 0,
     stream: null,
     streamStartedAt: null,
     assistantAvatarUrl: null,
@@ -768,4 +769,34 @@ describe("chat view", () => {
     );
     expect(labels).not.toContain("Subagent: cron-config-check");
   });
+
+  it("strips segment offset from stream text to prevent duplicate growing bubbles (#47188)", () => {
+    const container = document.createElement("div");
+    // Simulate: 1 segment with "Hello " (text before tool call),
+    // then the current stream has full accumulated text "Hello world"
+    // with offset = 6 (length of "Hello ").
+    // The stream bubble should show only "world" (the delta).
+    render(
+      renderChat(
+        createProps({
+          messages: [],
+          streamSegments: [{ text: "Hello ", ts: 1000 }],
+          streamSegmentOffset: 6,
+          stream: "Hello world",
+          streamStartedAt: 2000,
+          assistantName: "Assistant",
+        }),
+      ),
+      container,
+    );
+
+    const streamBubbles = container.querySelectorAll(".chat-group.assistant .chat-bubble");
+    // Should have exactly 2 bubbles: one for the segment "Hello " and one for the stream "world"
+    expect(streamBubbles.length).toBe(2);
+
+    // The second bubble (current stream) should NOT contain the full accumulated text
+    const lastBubble = streamBubbles[streamBubbles.length - 1];
+    expect(lastBubble?.textContent).toContain("world");
+    expect(lastBubble?.textContent).not.toContain("Hello world");
+  });
 });
diff --git a/ui/src/ui/views/chat.ts b/ui/src/ui/views/chat.ts
@@ -65,6 +65,7 @@ export type ChatProps = {
   messages: unknown[];
   toolMessages: unknown[];
   streamSegments: Array<{ text: string; ts: number }>;
+  streamSegmentOffset: number;
   stream: string | null;
   streamStartedAt: number | null;
   assistantAvatarUrl?: string | null;
@@ -1451,14 +1452,21 @@ function buildChatItems(props: ChatProps): Array<ChatItem | MessageGroup> {
 
   if (props.stream !== null) {
     const key = `stream:${props.sessionKey}:${props.streamStartedAt ?? "live"}`;
-    if (props.stream.trim().length > 0) {
+    // The server sends the full accumulated assistant text in each delta.
+    // Strip text already represented by committed segments to avoid
+    // duplicate growing bubbles. See: #47188
+    const offset = props.streamSegmentOffset ?? 0;
+    const displayText = offset > 0 ? props.stream.slice(offset) : props.stream;
+    if (displayText.trim().length > 0) {
       items.push({
         kind: "stream",
         key,
-        text: props.stream,
+        text: displayText,
         startedAt: props.streamStartedAt ?? Date.now(),
       });
-    } else {
+    } else if (props.stream.trim().length === 0) {
+      // Only show reading indicator when the stream itself is empty/whitespace,
+      // not when display text is empty due to segment offset stripping.
       items.push({ kind: "reading-indicator", key });
     }
   }
