Skip to content

feat (UI): improve UX by grouping tool calls in the chat#2224

Open
peterj wants to merge 2 commits into
mainfrom
peterj/collapsetoolcalls
Open

feat (UI): improve UX by grouping tool calls in the chat#2224
peterj wants to merge 2 commits into
mainfrom
peterj/collapsetoolcalls

Conversation

@peterj

@peterj peterj commented Jul 13, 2026

Copy link
Copy Markdown
Collaborator

Group the tool calls in the chat for better readability of the chat. The expanded view is the same as what we currently have, the new part is the grouping of the tool calls.

image

Copilot AI review requested due to automatic review settings July 13, 2026 09:30
@chromatic-com

chromatic-com Bot commented Jul 13, 2026

Copy link
Copy Markdown

Warning

Testing paused

Monthly snapshot limit reached. Update your plan for additional snapshots and to resume testing.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR improves chat readability in the UI by collapsing consecutive tool-call messages into a single expandable “tool call group” row, while keeping the expanded view equivalent to the existing per-message rendering.

Changes:

  • Added shared, non-component helper utilities to detect/extract tool-call request/result data from A2A SDK messages.
  • Introduced a new ToolCallGroup component plus grouping logic to fold consecutive tool-call message runs into collapsible sections.
  • Updated the chat rendering pipeline to render grouped items for both stored and streaming message lists, with accompanying unit tests and Storybook stories.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
ui/src/lib/toolCallExtraction.ts New shared helpers for identifying tool messages and extracting tool call requests/results.
ui/src/lib/tests/toolCallExtraction.test.ts Unit tests covering tool call message detection and extraction behavior.
ui/src/components/chat/ToolCallGroup.tsx New grouping component and grouping algorithm for consecutive tool-call messages.
ui/src/components/chat/ToolCallGroup.stories.tsx Storybook stories demonstrating grouped tool-call UX states (passing, failing, running, many).
ui/src/components/chat/ToolCallDisplay.tsx Refactor to consume the shared extraction helpers instead of in-component copies.
ui/src/components/chat/ChatInterface.tsx Switches chat rendering to use grouped render items for stored/streaming messages.
ui/src/components/chat/tests/ToolCallGroup.test.tsx Unit tests for grouping logic and ToolCallGroup expand/collapse + summary behavior.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread ui/src/lib/toolCallExtraction.ts Outdated
Comment thread ui/src/components/chat/ToolCallGroup.tsx Outdated
Signed-off-by: Peter Jausovec <peter.jausovec@solo.io>
@peterj peterj force-pushed the peterj/collapsetoolcalls branch from b48d13a to 714d224 Compare July 13, 2026 09:39
Signed-off-by: Peter Jausovec <peter.jausovec@solo.io>
@dimetron

Copy link
Copy Markdown
Contributor

@peterj - What about subagent Tool Call and MCP App calls? Should we separated those ??

@peterj

peterj commented Jul 13, 2026 via email

Copy link
Copy Markdown
Collaborator Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants