Usage

ChatToolCalls displays tool or function call invocations from an LLM response. Pass an array of calls and the component handles the rest: a single call renders inline, while multiple calls collapse into a summary with the latest call visible at the surface. Use it anywhere an AI agent shows what actions it took.

An empty array renders nothing. Several calls collapse into one header row that shows the latest call; the header toggles between that summary and the full list. v-model:is-expanded controls the group, and default-is-expanded sets the state used while the model is unbound. label replaces the localized call count once the group is open. A call with resultDetail (or its detail alias), or the detail slot, expands on its own.

<script setup lang="ts">
import { ChatMessage, ChatToolCalls } from '@astryx-vue/core/Chat'

const calls = [
  { name: 'bash', status: 'complete' as const, target: 'git status', duration: '1.2s' },
]
</script>

<template>
  <ChatMessage sender="assistant">
    <ChatToolCalls :calls="calls" />
  </ChatMessage>
</template>

Anatomy

Element	Description
Status icon	A themed semantic success/error icon, or a spinner while the call is pending or running.
Tool name	The function or tool name displayed in monospace: bash, edit, read, web_search, etc.
Node badge	A neutral pill badge showing which sandbox or environment ran the tool, like cli:remote-server or workspace.
Target label	The target of the action (a file path, command, or search query) shown after the tool name.
Diff stats	Green additions and red deletions counts for edit operations, displayed inline after the target.
Duration	Execution time shown on the trailing edge for completed calls.
Group header	A wrench icon with a call count, shown when multiple calls are present. Clicking toggles between the summary and the full list.

Best practices

Guidance	Practices
Do	Include a target string on every call so the user can see what the tool acted on: a file path, a shell command, or a search query.
Do	Show a duration on completed calls so users can judge which tools are slow and understand why a response took time.
Do	Provide a group label when the automatic count does not explain what the calls represent.
Do	Provide the detail slot with a code block for calls that produce output (diffs for edits, terminal output for shell commands) so users can inspect results inline.
Do	Set a unique key on each call item when streaming so Vue can animate additions without re-mounting completed rows.
Don't	Don't omit the status field. Without it the call defaults to complete, which is misleading for calls that are still running or have failed.
Don't	Don't display tool calls outside a chat message context; they are designed to sit inside an assistant message, not as standalone UI.
Don't	Don't use custom wrappers around individual calls; the component handles single vs. grouped layout automatically based on the array length.

Examples

Common configurations, variations, and states.

Expandable

Tool calls with expandable result details showing diffs and command output in code blocks. Click a row to reveal its result.

Simple

Sentbashgit status1.2s

Sentreadsrc/components/DataGrid.tsx30ms

Senteditsrc/components/DataGrid.tsx+24-885ms

Senteditsrc/components/DataGrid.test.tsx+4560ms

A single inline tool call above a collapsible multi-call group with diff stats. Shows both layouts side by side.

Statuses

bashyarn build

bashyarn test

Senteditsrc/App.tsx+8-2120ms

Error: 3 lint errors foundbashyarn lint

All four status states (pending, running, complete, and error) shown together in a single group.