Chat · Components

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

StatusVisualaria-label
runningspinner (animated)"Running"
completecheck (success color)"Completed"
errorexclamation (error color)"Failed"

#Default-collapsed behavior

StatusDefault state
runningExpanded
errorExpanded
completeCollapsed (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

InputTypeDefaultDescription
[toolCall]ToolCallInfo— (required){id, name, args, status?, result?}
[defaultCollapsed]booleantrueCollapse 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' }],
  };
}

#See also