fix(chat): scope tool-call rendering per-message + style genui demo views#446
Merged
Conversation
chat-tool-calls.toolCalls fell back to the agent's GLOBAL toolCalls list whenever the message had string content — which is the LangGraph adapter's default (extractTextContent always reduces complex content to a string). Every AI bubble in a thread re-rendered the entire thread's tool calls; with 3 AI messages and 4 tool calls, the chat showed 3 identical tool-call blocks. Fix: add `Message.toolCallIds?: string[]` populated by the LangGraph adapter from raw `tool_calls[].id`. chat-tool-calls prefers this per-message list when present; the legacy Anthropic-style content-block path stays as a fallback; the global-list fallback now fires ONLY when no message context is provided at all. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The cockpit-chat-generative-ui-angular app doesn't have Tailwind configured — styles.css only imports theme tokens. All Tailwind classes (rounded-lg, border-white/10, bg-white/5, flex, gap-6, etc.) were silently no-ops, rendering stat cards as bare stacked text and charts/tables without their card chrome. Convert all 6 view components to scoped Angular styles (or styleUrls) using raw CSS: - stat-card: card chrome, uppercase tracked label, large value, colored delta (green for up, red for down via data-trend attr) - bar-chart + line-chart: card chrome, gradient fills, gridlines, consistent axis-label and title styling - line-chart: area-fill path under the line via SVG path d= - data-grid: card chrome, uppercase header row, zebra striping, tabular-nums, horizontal scroll for narrow widths - dashboard-grid: vertical flex stack, 16px gap - container: CSS grid with row direction = equal columns based on child count, collapses to 2-col then 1-col at responsive breakpoints Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
PR #444 dropped visible label text from the demo shell toolbar to tighten the layout, but the examples/chat e2e helpers used `.filter({ hasText: label })` to find the four toolbar fields (Model, Effort, Gen UI, Theme) — with labels gone, ~5 tests failed on every CI run since #444 merged. Add `data-field` attributes to the four `.demo-shell__field` wrappers and switch the e2e helpers + the one inlined locator in model-picker.spec.ts to query by attribute. Helper signatures unchanged (label arg now maps to data-field via a small lookup table) so call sites in control-palette, color-scheme, model-picker, etc. need no changes. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Three fixes uncovered while testing the c-generative-ui demo locally with chrome MCP:
1. Duplicate tool-call cards in every AI bubble
<chat-tool-calls>was rendering the agent's GLOBAL tool-call list whenever the AI message'scontentwas a plain string — which the LangGraph adapter always produces (itsextractTextContentreduces complex content to a string). Every AI message in a thread re-rendered every tool call; a 3-AI-message thread with 4 tool calls showed three identical blocks of 4 cards (verified via chrome MCP DOM query).Fix: add
Message.toolCallIds?: string[]populated by the LangGraph adapter from rawtool_calls[].id.chat-tool-callsprefers this per-message list; the legacy Anthropic-style content-block path stays as a fallback; the global-list fallback now fires only when no message is provided at all. Verified post-fix: 3 mounted<chat-tool-calls>elements but only 1 non-empty, exactly matching the one AI message that emitted tool calls.2. Stat cards / charts / table rendered as bare text
cockpit-chat-generative-ui-angulardoesn't have Tailwind configured —styles.cssonly imports@ngaf/example-layouts/theme.css. All Tailwind classes (rounded-lg,border-white/10,bg-white/5,flex,gap-6,text-emerald-400, etc.) were silently no-ops, so:Fix: convert all 6 view components to scoped Angular styles with raw CSS:
stat-card: card chrome, uppercase label, large numeric value, colored delta via[data-trend]attribute (green up / red down)bar-chart+line-chart: card chrome, gradient SVG fills, gridlines, consistent title + axis-label styling; line chart adds an area-fill path under the linedata-grid: card chrome, uppercase header row, zebra striping, tabular-nums, horizontal scrolldashboard-grid: vertical flex stack with consistent gapcontainer: CSS grid that distributes children evenly in row direction, collapses to 2-col then 1-col at responsive breakpoints3. Specs updated
stat-card,container,dashboard-gridspecs asserted on the old Tailwind class names. Updated to assert on the new attribute-based markers (data-trend="up",data-direction="row",div.dashboard-grid).Files
libs/chat/src/lib/agent/message.ts— addtoolCallIds?: string[]libs/chat/src/lib/primitives/chat-tool-calls/chat-tool-calls.component.ts— prefer per-messagetoolCallIdslibs/langgraph/src/lib/agent.fn.ts— populatetoolCallIdsintoMessagecockpit/chat/generative-ui/angular/src/app/views/*.component.ts— 6 components rewritten with scoped CSScockpit/chat/generative-ui/angular/src/app/views/*.component.spec.ts— 3 specs updatedTest plan
pnpm nx run cockpit-chat-generative-ui-angular:test— green (21 tests pass after spec updates)pnpm nx run chat:test— greenpnpm nx run langgraph:test— green🤖 Generated with Claude Code