CometChatAIAssistantChat - CometChat Docs

Overview

CometChatAIAssistantChat is the top-level orchestrator for the AI assistant chat experience. It wires together CometChatMessageHeader, CometChatMessageList, CometChatMessageComposer, and the CometChatAIAssistantChatHistory sidebar into a single cohesive interface. Key capabilities:

Real-time streaming — integrates with CometChatAIStreamingService to display live AI responses token-by-token
Tool call dispatch — registers CometChatAIAssistantTools handlers that the streaming service invokes automatically
Chat history sidebar — browse and resume past AI conversations without losing context
Suggestion pills — configurable quick-reply prompts sourced from explicit input or user metadata
Concurrent run support — multiple AI responses can stream simultaneously without state corruption
Keyboard accessible — full focus management including sidebar open/close focus trapping and restoration

Live Preview — default AI assistant chat preview. Open in Storybook ↗

Basic Usage

import { Component, OnInit } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
  CometChatAIAssistantChat,
  CometChatAIStreamingService,
} from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-ai-chat',
  standalone: true,
  imports: [CometChatAIAssistantChat],
  template: `
    @if (agentUser) {
      <cometchat-ai-assistant-chat
        [user]="agentUser"
      ></cometchat-ai-assistant-chat>
    }
  `,
})
export class AiChatComponent implements OnInit {
  agentUser: CometChat.User | null = null;

  constructor(private streamingService: CometChatAIStreamingService) {}

  ngOnInit(): void {
    CometChat.getUser('ai-agent-uid').then((user) => {
      this.agentUser = user;
    });

    // Wire the CometChat SDK WebSocket to the streaming service
    CometChat.addMessageListener(
      'ai-listener',
      new CometChat.MessageListener({
        onAIAssistantMessageReceived: (event: CometChat.AIAssistantBaseEvent) => {
          this.streamingService.handleWebsocketMessage(event, 'ai-agent-uid');
        },
      })
    );
  }
}

Inputs

Input	Type	Default	Description
`user`	`CometChat.User`	required	The AI agent user to chat with
`streamingSpeed`	`number`	`30`	Per-token delay in milliseconds for the streaming animation
`aiAssistantTools`	`CometChatAIAssistantTools`	`undefined`	Tool handlers the AI can invoke during a conversation
`loadLastAgentConversation`	`boolean`	`false`	When `true`, automatically resumes the most recent conversation on load
`showSuggestedMessages`	`boolean`	`true`	Whether to show suggestion pills above the composer
`suggestedMessages`	`string[]`	`[]`	Explicit suggestion pill labels; falls back to `user.getMetadata().suggestedMessages`
`greetingTemplate`	`TemplateRef<{ $implicit: CometChat.User }>`	`undefined`	Custom greeting template rendered before the first message

Events

This component does not emit outputs directly — it manages all state internally and communicates with child components via signals and the CometChatAIStreamingService.

Advanced Usage

Registering Tool Handlers

Use CometChatAIAssistantTools to register client-side functions the AI can call during a conversation. The streaming service dispatches them automatically when a tool_call_end event is received.

import { Component, OnInit } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
  CometChatAIAssistantChat,
  CometChatAIAssistantTools,
  CometChatAIStreamingService,
} from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-ai-chat-with-tools',
  standalone: true,
  imports: [CometChatAIAssistantChat],
  template: `
    @if (agentUser) {
      <cometchat-ai-assistant-chat
        [user]="agentUser"
        [aiAssistantTools]="tools"
      ></cometchat-ai-assistant-chat>
    }
  `,
})
export class AiChatWithToolsComponent implements OnInit {
  agentUser: CometChat.User | null = null;

  tools = new CometChatAIAssistantTools({
    get_weather: async (args: { city: string }) => {
      const response = await fetch(`/api/weather?city=${args.city}`);
      return response.json();
    },
    search_products: async (args: { query: string; limit?: number }) => {
      const response = await fetch(`/api/products?q=${args.query}&limit=${args.limit ?? 5}`);
      return response.json();
    },
  });

  constructor(private streamingService: CometChatAIStreamingService) {}

  ngOnInit(): void {
    CometChat.getUser('ai-agent-uid').then((user) => {
      this.agentUser = user;
    });

    CometChat.addMessageListener(
      'ai-listener',
      new CometChat.MessageListener({
        onAIAssistantMessageReceived: (event: CometChat.AIAssistantBaseEvent) => {
          this.streamingService.handleWebsocketMessage(event, 'ai-agent-uid');
        },
      })
    );
  }
}

Suggestion Pills

Provide quick-reply prompts to guide users. If suggestedMessages is empty, the component falls back to user.getMetadata().suggestedMessages.

@Component({
  template: `
    @if (agentUser) {
      <cometchat-ai-assistant-chat
        [user]="agentUser"
        [suggestedMessages]="suggestions"
        [showSuggestedMessages]="true"
      ></cometchat-ai-assistant-chat>
    }
  `,
})
export class AiChatSuggestionsComponent {
  agentUser: CometChat.User | null = null;

  suggestions = [
    'What can you help me with?',
    'Show me recent orders',
    'How do I reset my password?',
  ];
}

Custom Greeting Template

Render a personalized greeting before the first message using the greetingTemplate input. The template context exposes the agent user as $implicit.

@Component({
  standalone: true,
  imports: [CometChatAIAssistantChat],
  template: `
    @if (agentUser) {
      <cometchat-ai-assistant-chat
        [user]="agentUser"
        [greetingTemplate]="greeting"
      ></cometchat-ai-assistant-chat>
    }

    <ng-template #greeting let-user>
      <div class="greeting">
        <h2>Hi, I'm {{ user.getName() }}</h2>
        <p>Ask me anything about your account or our products.</p>
      </div>
    </ng-template>
  `,
})
export class AiChatGreetingComponent {
  agentUser: CometChat.User | null = null;
}

Concurrent Runs

The component supports multiple simultaneous AI responses. Each run streams independently — a slow tool call in one run does not block text streaming in another. This is handled automatically by CometChatAIStreamingService using per-run concatMap pipelines merged via mergeMap.

// Wire multiple agent users — each gets its own isolated streaming state
CometChat.addMessageListener(
  'ai-listener',
  new CometChat.MessageListener({
    onAIAssistantMessageReceived: (event: CometChat.AIAssistantBaseEvent) => {
      // chatId scopes the streaming state — use the agent's UID
      const chatId = event.getReceiverId();
      this.streamingService.handleWebsocketMessage(event, chatId);
    },
  })
);

Controlling Streaming Speed

Adjust the per-token animation delay at runtime. The streamingSpeed input is synced to the service via an effect() — changes take effect immediately for all active and future runs.

@Component({
  template: `
    @if (agentUser) {
      <cometchat-ai-assistant-chat
        [user]="agentUser"
        [streamingSpeed]="speedMs"
      ></cometchat-ai-assistant-chat>
    }
    <label>
      Speed (ms): <input type="range" min="0" max="100" [(ngModel)]="speedMs" />
    </label>
  `,
})
export class AiChatSpeedComponent {
  agentUser: CometChat.User | null = null;
  speedMs = 30;
}

Customization

CSS Variables

All visual properties are controlled via CSS variables. Override them in your global stylesheet or a scoped component style:

cometchat-ai-assistant-chat {
  --cometchat-primary-color: #7c3aed;
  --cometchat-background-color-01: #f9fafb;
  --cometchat-text-color-primary: #111827;
  --cometchat-radius-2: 12px;
}

Localization Keys

Key	Default (en-us)
`ai_assistant_chat_intro_message`	”How can I help you today?”
`ai_assistant_chat_composer_placeholder`	”Ask me anything…”
`ai_assistant_chat_new_chat`	”New Chat”
`ai_assistant_chat_history_title`	”AI Assistant”
`ai_assistant_chat_thinking`	”Thinking…”
`ai_assistant_chat_executing_tool`	”Executing…”
`ai_assistant_chat_no_internet`	”No internet connection”

Override any key via CometChatLocalize.updateKeys():

import { CometChatLocalize } from '@cometchat/chat-uikit-angular';

CometChatLocalize.updateKeys('en', {
  ai_assistant_chat_intro_message: 'Hello! How can I assist you today?',
  ai_assistant_chat_composer_placeholder: 'Type your question...',
});

​Overview

​Basic Usage

​Inputs

​Events

​Advanced Usage

​Registering Tool Handlers

​Suggestion Pills

​Custom Greeting Template

​Concurrent Runs

​Controlling Streaming Speed

​Customization

​CSS Variables

​Localization Keys

Overview

Basic Usage

Inputs

Events

Advanced Usage

Registering Tool Handlers

Suggestion Pills

Custom Greeting Template

Concurrent Runs

Controlling Streaming Speed

Customization

CSS Variables

Localization Keys