PR #63986: fix(ui): single assistant group for Control UI streaming chat

• Repository: openclaw/openclaw
• Author: neeravmakwana
• State: closed | merged: False
• Link: https://github.com/openclaw/openclaw/pull/63986

Description (problem / solution / changelog)

Summary

• Problem: In-flight assistant replies in the Control UI webchat rendered each streamed segment (and the live tail) as a separate outer chat-group, so users saw multiple assistant avatars and bubbles during one turn; when the run finished, history replaced that with a normal grouped message.
• Why it matters: Jarring layout and the appearance of fragments merging when the response completed (see #63956).
• What changed: Introduced a single stream-run chat item that renders one assistant column with interleaved inner bubbles for committed segment text, tool cards (when shown), and the live streaming tail (or reading indicator). When tool calls are hidden, segment + live text merge into one updating bubble within that same group.
• What did NOT change: Gateway streaming protocol, chat event handling, or persisted message shapes.

Change Type (select all)

• Bug fix
• Feature
• Refactor required for the fix
• Docs
• Security hardening
• Chore/infra

Scope (select all touched areas)

• Gateway / orchestration
• Skills / tool execution
• Auth / tokens
• Memory / storage
• Integrations
• API / contracts
• UI / DX
• CI/CD / infra

Linked Issue/PR

• Closes #63956
• Related #
• This PR fixes a bug or regression

Root Cause (if applicable)

• Root cause: The chat list emitted one kind: "stream" item per segment and one for the live buffer, and each was rendered with renderStreamingGroup, which wraps a full chat-group (avatar + column) per chunk.
• Missing detection / guardrail: N/A (layout choice).
• Contributing context (if known): Tool streaming commits text into chatStreamSegments at each tool boundary, which multiplied outer groups.

Regression Test Plan (if applicable)

• Coverage level that should have caught this:
  • Unit test
  • Seam / integration test
  • End-to-end test
  • Existing coverage already sufficient
• Target test or file: ui/src/ui/views/chat.test.ts
• Scenario the test should lock in: With streamSegments, toolMessages, and stream set, the DOM contains exactly one .chat-group.assistant for the in-flight turn (and the same when tool calls are hidden with merged text).
• Why this is the smallest reliable guardrail: Asserts the structural fix (single outer group) without driving a full gateway session.
• Existing test that already covers this (if any): None for this regression before this PR.
• If no new test is added, why not: N/A — tests added.

User-visible / Behavior Changes

• Control UI chat: Streaming assistant turns use one assistant column; inner bubbles still separate pre-tool text, tool cards (when visible), and the live tail. With tool calls toggled off, streamed text is merged into one bubble for the active turn.

Diagram (if applicable)

Before:
[assistant group: segment 1] [assistant group: tool?] [assistant group: live]  (multiple avatars)

After:
[assistant group: segment 1 | tool | live ...]  (one avatar column)

Security Impact (required)

• New permissions/capabilities? (No)
• Secrets/tokens handling changed? (No)
• New/changed network calls? (No)
• Command/tool execution surface changed? (No)
• Data access scope changed? (No)
• If any Yes, explain risk + mitigation: N/A

Repro + Verification

Environment

• OS: any (UI change)
• Control UI webchat with streaming + optional tool use

Steps

1. Open Control UI chat and send a message that streams assistant output (ideally with at least one tool call).
2. Observe the in-flight layout: one assistant column for the active turn.

Expected

• Single assistant avatar column while the response streams; inner bubbles for text/tool/live as appropriate.

Actual

• Matches expected after this change (please confirm visually).

Evidence

• Failing test/log before + passing after
• Trace/log snippets
• Screenshot/recording
• Perf numbers (if relevant)

Human Verification (required)

What you personally verified (not just CI), and how:

• Verified scenarios: Unit tests for DOM structure (pnpm exec vitest run ui/src/ui/views/chat.test.ts); pnpm check clean.
• Edge cases checked: Tool calls visible vs hidden (merged text path).
• What you did not verify: Full manual browser run against a live gateway in this environment.

Review Conversations

• I replied to or resolved every bot review conversation I addressed in this PR.
• I left unresolved only the conversations that still need reviewer or maintainer judgment.

Compatibility / Migration

• Backward compatible? (Yes)
• Config/env changes? (No)
• Migration needed? (No)
• If yes, exact upgrade steps: N/A

Risks and Mitigations

• None material — layout-only change; message state and protocols unchanged.

Testing

• pnpm check
• pnpm exec vitest run ui/src/ui/views/chat.test.ts
• Screenshots: Please verify locally in Control UI (pnpm dev / gateway) for a streaming run with tools — one assistant column during the turn.

PR checklist (CONTRIBUTING)

• Mark degree of testing: unit tests + lint/typecheck (pnpm check, targeted Vitest).
• Confirm understanding of the change: yes — rendering-only; state from chatStream / chatStreamSegments / chatToolMessages unchanged.

Changed files

• CHANGELOG.md (modified, +2/-0)
• ui/src/ui/chat/grouped-render.ts (modified, +86/-32)
• ui/src/ui/types/chat-types.ts (modified, +11/-2)
• ui/src/ui/views/chat.test.ts (modified, +48/-0)
• ui/src/ui/views/chat.ts (modified, +82/-49)