ChatToolCallCardComponent

ChatToolCallCardComponent renders a single tool call as an expandable card with a status pill (running / complete / error), inputs, and output.

Selector: chat-tool-call-card

Import:

import { ChatToolCallCardComponent, type ToolCallInfo } from '@threadplane/chat';

Status pill

Status	Visual	aria-label
`running`	spinner (animated)	"Running"
`complete`	check (success color)	"Completed"
`error`	exclamation (error color)	"Failed"

Default-collapsed behavior

Status	Default state
`running`	Expanded
`error`	Expanded
`complete`	Collapsed (when `[defaultCollapsed]="true"`, the default)

A user click on the header toggles open/closed. Once toggled, the user choice persists across status changes for the lifetime of the card.

Inputs

Input	Type	Default	Description
`[toolCall]`	`ToolCallInfo`	— (required)	`{id, name, args, status?, result?}`
`[defaultCollapsed]`	`boolean`	`true`	Collapse on `complete`; pass `false` to keep cards always-expanded

ToolCallInfo

interface ToolCallInfo {
  id: string;
  name: string;
  args: unknown;
  status?: 'pending' | 'running' | 'complete' | 'error';
  result?: unknown;
}

Basic usage

<chat-tool-call-card [toolCall]="tc" />
 
<!-- Always-expanded -->
<chat-tool-call-card [toolCall]="tc" [defaultCollapsed]="false" />

Define tc as a ToolCallInfo in the component class:

import { Component } from '@angular/core';
import { ChatToolCallCardComponent, type ToolCallInfo } from '@threadplane/chat';
 
@Component({
  selector: 'app-tool-call-demo',
  standalone: true,
  imports: [ChatToolCallCardComponent],
  template: `<chat-tool-call-card [toolCall]="tc" />`,
})
export class ToolCallDemoComponent {
  protected readonly tc: ToolCallInfo = {
    id: 'call_1',
    name: 'search_web',
    args: { query: 'angular' },
    status: 'complete',
    result: [{ title: 'Angular', url: 'https://angular.dev' }],
  };
}