openclaw - 💡(How to fix) Fix WebChat: duplicate message rendering after streaming completes [3 comments, 3 participants]

Description

When using the WebChat (Control UI), assistant messages appear twice after a response completes. The first copy is the streaming version, the second is the full message fetched via chat.history.

Root Cause

The message dedup logic in the Control UI frontend fails because streaming messages have different IDs than the final complete message.

The merge function (tl())

When a streaming run completes (state === "final"), the frontend calls chat.history to fetch the full message list, then merges it with already-rendered streaming messages using tl().

The ID function (el())

Message dedup IDs are generated as:

function el(e) {
  let role = g(e.role);
  let text = bc(e)?.trim();
  if (text) return `${role}:text:${text}`;
  return `${role}:content:${JSON.stringify(e.content)}`;
}

The ID is based on the full text content of the message. During streaming, the text grows incrementally, so the streaming message and the final message from chat.history produce different IDs. The dedup in tl() fails, and the complete message is appended after the streaming message — resulting in the same content appearing twice.

Steps to Reproduce

1. Open WebChat (Control UI)
2. Send any message that produces a multi-sentence response
3. Observe: the response appears normally during streaming, then the full text appears again below when the run completes

Expected Behavior

Only one copy of each message should be displayed.

Environment

• OpenClaw: v2026.4.25
• Channel: WebChat (Control UI)
• Browser: Chrome 147+
• OS: macOS (ARM64)

Suggested Fix

Use a stable message identifier (e.g., message index or a server-assigned message ID) for dedup instead of content-based hashing. Alternatively, when chat.history response arrives, replace the streaming messages entirely rather than merging.

Relevant Code

File: dist/control-ui/assets/index-BUB744L7.js

• tl() — merge function that attempts dedup
• el() — generates message IDs from content text
• ol() — chat.history handler that calls tl(newMessages, existingMessages)
• TF() — streaming event handler

Related: this may be more noticeable with longer responses where the streaming text differs significantly from the final text.