ChatSubagentCardComponent

ChatSubagentCardComponent is a composition that renders an expandable card for a subagent stream. It displays the subagent's tool call ID, current status (with a color-coded badge), and expands to show the message count and latest message content.

Selector: chat-subagent-card

Import:

import { ChatSubagentCardComponent } from '@ngaf/chat';

Basic Usage

<chat-subagent-card [subagent]="subagentRef" />

API

Inputs

Input	Type	Default	Description
`subagent`	`Subagent`	Required	The subagent to display

Subagent

The Subagent type comes from @ngaf/chat. It provides reactive state for a subagent:

Property	Type	Description
`toolCallId`	`string`	The ID linking this subagent to its parent tool call
`status()`	`Signal<'pending' \| 'running' \| 'complete' \| 'error'>`	Current execution status
`messages()`	`Signal<Message[]>`	Messages produced by the subagent

Card Behavior

Collapsed State (Default)

The card header shows:

An agent icon on the left
"Subagent" label with the toolCallId in monospace
A color-coded status badge
A chevron toggle on the right

Expanded State

Clicking the header toggles expansion. The expanded area shows:

Message count (e.g., "3 message(s)")
The content of the latest message (either as plain text or serialized JSON)

Status Badge Colors

The status badge uses different chat theme variables based on the current status:

Status	Background	Text Color
`pending`	`--ngaf-chat-surface-alt`	`--ngaf-chat-text-muted`
`running`	`--ngaf-chat-warning-bg`	`--ngaf-chat-warning-text`
`complete`	(none)	`--ngaf-chat-success`
`error`	`--ngaf-chat-error-bg`	`--ngaf-chat-error-text`

Using with ChatSubagentsComponent

The ChatSubagentsComponent primitive iterates over active subagent streams from an Agent. Combine it with ChatSubagentCardComponent:

<chat-subagents [agent]="chatRef">
  <ng-template let-subagent>
    <chat-subagent-card [subagent]="subagent" />
  </ng-template>
</chat-subagents>

Full Example

import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
import { agent } from '@ngaf/langgraph';
import {
  ChatComponent,
  ChatSubagentsComponent,
  ChatSubagentCardComponent,
} from '@ngaf/chat';
 
@Component({
  selector: 'app-subagent-demo',
  standalone: true,
  imports: [ChatComponent, ChatSubagentsComponent, ChatSubagentCardComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div style="height: 100vh; display: flex; flex-direction: column;">
      <div style="flex: 1;">
        <chat [agent]="chatRef" />
      </div>
 
      <div class="p-4">
        <h3 class="text-sm font-semibold mb-2">Active Subagents</h3>
        <div class="space-y-2">
          <chat-subagents [agent]="chatRef">
            <ng-template let-subagent>
              <chat-subagent-card [subagent]="subagent" />
            </ng-template>
          </chat-subagents>
        </div>
      </div>
    </div>
  `,
})
export class SubagentDemoComponent {
  chatRef = agent({
    assistantId: 'multi_agent',
    threadId: signal(null),
  });
}

Styling

The card uses the following CSS custom properties:

Variable	Applied To
`--ngaf-chat-surface-alt`	Card background
`--ngaf-chat-surface`	Latest message content background
`--ngaf-chat-separator`	Card border, section dividers
`--ngaf-chat-radius-card`	Card border radius
`--ngaf-chat-text`	Subagent label, message content
`--ngaf-chat-text-muted`	Agent icon, tool call ID, chevron, message count

ARIA

The header button has aria-expanded reflecting the current state
The button has aria-label="Toggle subagent details"