feat(Chat): add Reasoning, ToolCall, and ToolCallGroup components - #1192
Merged
Conversation
meta-cla
Bot
added
the
CLA Signed
Contributor
PR Analysis Report📚 Storybook PreviewView Storybook for this PR 🧪 Sandbox PreviewView Sandbox for this PR Modified ComponentsChat · View in Storybook · 🆕 XDSChatReasoning, XDSChatToolCalls
CodeBlock · View in Storybook
Bundle Size Summary
Accessibility AuditStatus: 2 accessibility violation(s) found — 2 serious. XDSCodeBlock - 2 issue(s)
Generated by PR Enrichment workflow | Storybook | Sandbox | View full report |
cixzhang
force-pushed
the
navi/feat/chat-reasoning-toolcall
branch
from
April 9, 2026 18:49
86e3b19 to
0141cad
Compare
Co-authored-by: Navi <navi@navibot.dev>
…lCalls
Every LLM API (Vercel AI SDK, Anthropic, OpenAI) and agentic frameworks
(Navi, LangGraph) return tool calls as an array on the message. One
component with a data prop matches that shape — no compound component
wiring needed.
- calls prop accepts array of {name, status, label, duration, data}
- Single call renders inline (no group chrome)
- Multiple calls get collapsible summary (auto-expand ≤3, collapse >3)
- renderDetail callback for rich per-tool rendering (Navi file diffs, etc.)
- label prop for human-readable summaries (e.g. 'Edit Button.tsx')
- data passthrough for arbitrary per-call context
Co-authored-by: Navi <navi@navibot.dev>
Co-authored-by: Navi <navi@navibot.dev>
…streaming story
XDSChatToolCallItem:
- node?: string — sandbox badge (renders XDSBadge neutral pill)
- stats?: {additions, deletions, files, matches} — inline stats display
- errorMessage?: string — title tooltip on error status icon
Group header:
- Pile visual: stacked background cards with translateY offset
(only when collapsed, 2+ calls). Conveys depth like Navi's tool-pile.
- Aggregate status icon: spinning for pending, error X for errors
(with count tooltip), checkmark when all complete
- Chevron moved to start (before tools icon) matching Navi layout
8 storybook stories including Streaming demo with live status transitions.
Co-authored-by: Navi <navi@navibot.dev>
- P1: Replace unrecognizable tools icon with wrench SVG - P1: Move expand/collapse chevron right after label text (not far right) - P1: Chevron points down when collapsed, up when expanded (not right→rotated) - P1: Add marginBlockStart spacing between message and reasoning/tool calls - P1: Status icons now 16px to align with the group wrench icon Both XDSChatReasoning and XDSChatToolCalls updated. Co-authored-by: Navi <navi@navibot.dev>
Each call in the calls array can now have an onClick handler. When present, the row gets pointer cursor, hover highlight, and keyboard support (Enter/Space). Consumer decides the interaction — modal, panel, drawer, navigation. Calls without onClick remain plain status rows. New story: Interactive — edit call opens diff, bash opens output, web_search is non-interactive. Co-authored-by: Navi <navi@navibot.dev>
Demonstrates onClick with XDSDialog + XDSCodeBlock: - Edit call (with +12/-3 stats) opens a modal with a diff code block - Bash call opens a modal with test output - Web search has no onClick — plain status row Shows how consumers wire onClick to any detail view pattern. Co-authored-by: Navi <navi@navibot.dev>
…script for diff Co-authored-by: Navi <navi@navibot.dev>
Co-authored-by: Navi <navi@navibot.dev>
…tory - Auto-expand group when any call has status 'error' - Group label shows '3 tool calls · 1 failed' when errors present - New ErrorWithModal story: clicking failed 'yarn test' opens a dialog with XDSBanner (error) + XDSCodeBlock (test output) - Node names updated to realistic values (cli:devvm, workspace) Co-authored-by: Navi <navi@navibot.dev>
Co-authored-by: Navi <navi@navibot.dev>
Co-authored-by: Navi <navi@navibot.dev>
Error output visible immediately without scrolling. Co-authored-by: Navi <navi@navibot.dev>
Co-authored-by: Navi <navi@navibot.dev>
… block fix Co-authored-by: Navi <navi@navibot.dev>
cixzhang
force-pushed
the
navi/feat/chat-reasoning-toolcall
branch
from
April 10, 2026 00:01
5408222 to
5a569df
Compare
cixzhang
added a commit
that referenced
this pull request
Apr 26, 2026
) * feat(Chat): add Reasoning, ToolCall, ToolCallGroup Co-authored-by: Navi <navi@users.noreply.github.com> * refactor(Chat): merge ToolCall + ToolCallGroup into single XDSChatToolCalls Every LLM API (Vercel AI SDK, Anthropic, OpenAI) and agentic frameworks (Navi, LangGraph) return tool calls as an array on the message. One component with a data prop matches that shape — no compound component wiring needed. - calls prop accepts array of {name, status, label, duration, data} - Single call renders inline (no group chrome) - Multiple calls get collapsible summary (auto-expand ≤3, collapse >3) - renderDetail callback for rich per-tool rendering (Navi file diffs, etc.) - label prop for human-readable summaries (e.g. 'Edit Button.tsx') - data passthrough for arbitrary per-call context Co-authored-by: Navi <navi@users.noreply.github.com> * fix: add missing label/data to ToolCallItem type Co-authored-by: Navi <navi@users.noreply.github.com> * feat(Chat): tool call node badges, stats, pile visual, error status, streaming story XDSChatToolCallItem: - node?: string — sandbox badge (renders XDSBadge neutral pill) - stats?: {additions, deletions, files, matches} — inline stats display - errorMessage?: string — title tooltip on error status icon Group header: - Pile visual: stacked background cards with translateY offset (only when collapsed, 2+ calls). Conveys depth like Navi's tool-pile. - Aggregate status icon: spinning for pending, error X for errors (with count tooltip), checkmark when all complete - Chevron moved to start (before tools icon) matching Navi layout 8 storybook stories including Streaming demo with live status transitions. Co-authored-by: Navi <navi@users.noreply.github.com> * fix(Chat): address Kenton's feedback on Reasoning & Tool Calls (#1226) - P1: Replace unrecognizable tools icon with wrench SVG - P1: Move expand/collapse chevron right after label text (not far right) - P1: Chevron points down when collapsed, up when expanded (not right→rotated) - P1: Add marginBlockStart spacing between message and reasoning/tool calls - P1: Status icons now 16px to align with the group wrench icon Both XDSChatReasoning and XDSChatToolCalls updated. Co-authored-by: Navi <navi@users.noreply.github.com> * feat(Chat): onClick on tool call items for interactive detail viewing Each call in the calls array can now have an onClick handler. When present, the row gets pointer cursor, hover highlight, and keyboard support (Enter/Space). Consumer decides the interaction — modal, panel, drawer, navigation. Calls without onClick remain plain status rows. New story: Interactive — edit call opens diff, bash opens output, web_search is non-interactive. Co-authored-by: Navi <navi@users.noreply.github.com> * feat(Chat): Interactive story — edit opens diff modal, bash opens output Demonstrates onClick with XDSDialog + XDSCodeBlock: - Edit call (with +12/-3 stats) opens a modal with a diff code block - Bash call opens a modal with test output - Web search has no onClick — plain status row Shows how consumers wire onClick to any detail view pattern. Co-authored-by: Navi <navi@users.noreply.github.com> * fix(Chat): Interactive story — remove dialog padding, wider, use typescript for diff Co-authored-by: Navi <navi@users.noreply.github.com> * fix: remove dialog header from Interactive story Co-authored-by: Navi <navi@users.noreply.github.com> * feat(Chat): auto-expand on error, error count in label, error modal story - Auto-expand group when any call has status 'error' - Group label shows '3 tool calls · 1 failed' when errors present - New ErrorWithModal story: clicking failed 'yarn test' opens a dialog with XDSBanner (error) + XDSCodeBlock (test output) - Node names updated to realistic values (cli:devvm, workspace) Co-authored-by: Navi <navi@users.noreply.github.com> * fix: red error count, banner title + spacer in error modal Co-authored-by: Navi <navi@users.noreply.github.com> * fix: literal · instead of escaped \u00b7 in JSX Co-authored-by: Navi <navi@users.noreply.github.com> * fix: show code block first in error modal, banner below Error output visible immediately without scrolling. Co-authored-by: Navi <navi@users.noreply.github.com> * fix: scrollable code block (maxHeight 50vh) + spacer before banner Co-authored-by: Navi <navi@users.noreply.github.com> * refactor: split stories, remove renderDetail, imperative dialog, code block fix Co-authored-by: Navi <navi@users.noreply.github.com> --------- Co-authored-by: Navi <navi@users.noreply.github.com>
cixzhang
added a commit
that referenced
this pull request
Jun 21, 2026
) * feat(Chat): add Reasoning, ToolCall, ToolCallGroup Co-authored-by: Navi <navi@users.noreply.github.com> * refactor(Chat): merge ToolCall + ToolCallGroup into single XDSChatToolCalls Every LLM API (Vercel AI SDK, Anthropic, OpenAI) and agentic frameworks (Navi, LangGraph) return tool calls as an array on the message. One component with a data prop matches that shape — no compound component wiring needed. - calls prop accepts array of {name, status, label, duration, data} - Single call renders inline (no group chrome) - Multiple calls get collapsible summary (auto-expand ≤3, collapse >3) - renderDetail callback for rich per-tool rendering (Navi file diffs, etc.) - label prop for human-readable summaries (e.g. 'Edit Button.tsx') - data passthrough for arbitrary per-call context Co-authored-by: Navi <navi@users.noreply.github.com> * fix: add missing label/data to ToolCallItem type Co-authored-by: Navi <navi@users.noreply.github.com> * feat(Chat): tool call node badges, stats, pile visual, error status, streaming story XDSChatToolCallItem: - node?: string — sandbox badge (renders XDSBadge neutral pill) - stats?: {additions, deletions, files, matches} — inline stats display - errorMessage?: string — title tooltip on error status icon Group header: - Pile visual: stacked background cards with translateY offset (only when collapsed, 2+ calls). Conveys depth like Navi's tool-pile. - Aggregate status icon: spinning for pending, error X for errors (with count tooltip), checkmark when all complete - Chevron moved to start (before tools icon) matching Navi layout 8 storybook stories including Streaming demo with live status transitions. Co-authored-by: Navi <navi@users.noreply.github.com> * fix(Chat): address Kenton's feedback on Reasoning & Tool Calls (#1226) - P1: Replace unrecognizable tools icon with wrench SVG - P1: Move expand/collapse chevron right after label text (not far right) - P1: Chevron points down when collapsed, up when expanded (not right→rotated) - P1: Add marginBlockStart spacing between message and reasoning/tool calls - P1: Status icons now 16px to align with the group wrench icon Both XDSChatReasoning and XDSChatToolCalls updated. Co-authored-by: Navi <navi@users.noreply.github.com> * feat(Chat): onClick on tool call items for interactive detail viewing Each call in the calls array can now have an onClick handler. When present, the row gets pointer cursor, hover highlight, and keyboard support (Enter/Space). Consumer decides the interaction — modal, panel, drawer, navigation. Calls without onClick remain plain status rows. New story: Interactive — edit call opens diff, bash opens output, web_search is non-interactive. Co-authored-by: Navi <navi@users.noreply.github.com> * feat(Chat): Interactive story — edit opens diff modal, bash opens output Demonstrates onClick with XDSDialog + XDSCodeBlock: - Edit call (with +12/-3 stats) opens a modal with a diff code block - Bash call opens a modal with test output - Web search has no onClick — plain status row Shows how consumers wire onClick to any detail view pattern. Co-authored-by: Navi <navi@users.noreply.github.com> * fix(Chat): Interactive story — remove dialog padding, wider, use typescript for diff Co-authored-by: Navi <navi@users.noreply.github.com> * fix: remove dialog header from Interactive story Co-authored-by: Navi <navi@users.noreply.github.com> * feat(Chat): auto-expand on error, error count in label, error modal story - Auto-expand group when any call has status 'error' - Group label shows '3 tool calls · 1 failed' when errors present - New ErrorWithModal story: clicking failed 'yarn test' opens a dialog with XDSBanner (error) + XDSCodeBlock (test output) - Node names updated to realistic values (cli:devvm, workspace) Co-authored-by: Navi <navi@users.noreply.github.com> * fix: red error count, banner title + spacer in error modal Co-authored-by: Navi <navi@users.noreply.github.com> * fix: literal · instead of escaped \u00b7 in JSX Co-authored-by: Navi <navi@users.noreply.github.com> * fix: show code block first in error modal, banner below Error output visible immediately without scrolling. Co-authored-by: Navi <navi@users.noreply.github.com> * fix: scrollable code block (maxHeight 50vh) + spacer before banner Co-authored-by: Navi <navi@users.noreply.github.com> * refactor: split stories, remove renderDetail, imperative dialog, code block fix Co-authored-by: Navi <navi@users.noreply.github.com> --------- Co-authored-by: Navi <navi@users.noreply.github.com>
cixzhang
added a commit
that referenced
this pull request
Jun 21, 2026
) * feat(Chat): add Reasoning, ToolCall, ToolCallGroup * refactor(Chat): merge ToolCall + ToolCallGroup into single XDSChatToolCalls Every LLM API (Vercel AI SDK, Anthropic, OpenAI) and agentic frameworks (Navi, LangGraph) return tool calls as an array on the message. One component with a data prop matches that shape — no compound component wiring needed. - calls prop accepts array of {name, status, label, duration, data} - Single call renders inline (no group chrome) - Multiple calls get collapsible summary (auto-expand ≤3, collapse >3) - renderDetail callback for rich per-tool rendering (Navi file diffs, etc.) - label prop for human-readable summaries (e.g. 'Edit Button.tsx') - data passthrough for arbitrary per-call context * fix: add missing label/data to ToolCallItem type * feat(Chat): tool call node badges, stats, pile visual, error status, streaming story XDSChatToolCallItem: - node?: string — sandbox badge (renders XDSBadge neutral pill) - stats?: {additions, deletions, files, matches} — inline stats display - errorMessage?: string — title tooltip on error status icon Group header: - Pile visual: stacked background cards with translateY offset (only when collapsed, 2+ calls). Conveys depth like Navi's tool-pile. - Aggregate status icon: spinning for pending, error X for errors (with count tooltip), checkmark when all complete - Chevron moved to start (before tools icon) matching Navi layout 8 storybook stories including Streaming demo with live status transitions. * fix(Chat): address Kenton's feedback on Reasoning & Tool Calls (#1226) - P1: Replace unrecognizable tools icon with wrench SVG - P1: Move expand/collapse chevron right after label text (not far right) - P1: Chevron points down when collapsed, up when expanded (not right→rotated) - P1: Add marginBlockStart spacing between message and reasoning/tool calls - P1: Status icons now 16px to align with the group wrench icon Both XDSChatReasoning and XDSChatToolCalls updated. * feat(Chat): onClick on tool call items for interactive detail viewing Each call in the calls array can now have an onClick handler. When present, the row gets pointer cursor, hover highlight, and keyboard support (Enter/Space). Consumer decides the interaction — modal, panel, drawer, navigation. Calls without onClick remain plain status rows. New story: Interactive — edit call opens diff, bash opens output, web_search is non-interactive. * feat(Chat): Interactive story — edit opens diff modal, bash opens output Demonstrates onClick with XDSDialog + XDSCodeBlock: - Edit call (with +12/-3 stats) opens a modal with a diff code block - Bash call opens a modal with test output - Web search has no onClick — plain status row Shows how consumers wire onClick to any detail view pattern. * fix(Chat): Interactive story — remove dialog padding, wider, use typescript for diff * fix: remove dialog header from Interactive story * feat(Chat): auto-expand on error, error count in label, error modal story - Auto-expand group when any call has status 'error' - Group label shows '3 tool calls · 1 failed' when errors present - New ErrorWithModal story: clicking failed 'yarn test' opens a dialog with XDSBanner (error) + XDSCodeBlock (test output) - Node names updated to realistic values (cli:devvm, workspace) * fix: red error count, banner title + spacer in error modal * fix: literal · instead of escaped \u00b7 in JSX * fix: show code block first in error modal, banner below Error output visible immediately without scrolling. * fix: scrollable code block (maxHeight 50vh) + spacer before banner * refactor: split stories, remove renderDetail, imperative dialog, code block fix ---------
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
Reasoning display and tool call components for AI chat interfaces. Spec: #297
XDSChatReasoning
Compact collapsible display for model reasoning/thinking content.
isStreamingXDSChatToolCalls
Displays tool/function call invocations from LLM responses. Accepts a
callsarray matching the shape LLM APIs return.Layout:
Per-call features:
status: pending (pulse) → running (spin) → complete (check) | error (X)node: sandbox badge rendered as XDSBadge pill (e.g.cli:devvm)stats: inline additions/deletions/files/matches displayduration: shown when completeerrorMessage: title tooltip on error status icononClick: interactive rows with hover state — consumer decides the interaction (modal, panel, etc.)Group behavior:
CodeBlock fix
Added
display: flex; flex-direction: columnto root for proper scroll behavior inside dialogs.Stories
XDSChatReasoning (5): Collapsed, Expanded, Streaming, CustomLabel, InMessage
XDSChatToolCalls (10): SingleCall, MultipleCalls, WithNodes, WithStats, WithErrors, Running, Streaming, ManyCalls, Interactive (diff modal via useXDSImperativeDialog), ErrorWithModal (banner + code block)
Addresses Reasoning & Tool Calls findings from #1226.