Skip to main content

​
About AI Chat Log

AI Chat Log is a specialized component for displaying conversations with AI assistants. It provides components optimized for AI chat experiences, including loading states, action cards, and source citations.

​
Components

The AI Chat Log package includes:
  • AIChatLog - Container for AI chat messages
  • AIChatMessage - Individual AI message
  • AIChatMessageBody - Message content
  • AIChatMessageAuthor - Author name/avatar
  • AIChatMessageActionGroup - Action buttons
  • AIChatMessageActionCard - Suggested actions
  • AIChatMessageLoading - Loading state indicator
  • AIChatMessageSource - Source citation
  • AIChatMessageSourceLink - Link to source
  • AIChatEvent - System event message
  • AIChatLogger - State management component
  • useAIChatLogger - Hook for chat state

​
Installation

yarn add @twilio-paste/ai-chat-log

​
Usage

import {
  AIChatLog,
  AIChatMessage,
  AIChatMessageAuthor,
  AIChatMessageBody,
  AIChatMessageLoading
} from '@twilio-paste/ai-chat-log';

const MyAIChatLog = () => (
  <AIChatLog>
    <AIChatMessage variant="inbound">
      <AIChatMessageAuthor aria-label="AI Assistant">AI Assistant</AIChatMessageAuthor>
      <AIChatMessageBody>
        Hello! I'm here to help answer your questions.
      </AIChatMessageBody>
    </AIChatMessage>
    <AIChatMessage variant="outbound">
      <AIChatMessageAuthor aria-label="You">You</AIChatMessageAuthor>
      <AIChatMessageBody>
        What's the weather like today?
      </AIChatMessageBody>
    </AIChatMessage>
    <AIChatMessage variant="inbound">
      <AIChatMessageAuthor aria-label="AI Assistant">AI Assistant</AIChatMessageAuthor>
      <AIChatMessageLoading />
    </AIChatMessage>
  </AIChatLog>
);

​
Props

​
AIChatLog

​
AIChatMessage

​
AIChatMessageBody

​
AIChatMessageAuthor

​
AIChatMessageLoading

​
AIChatMessageActionCard

​
AIChatMessageSource

​
useAIChatLogger Hook

Manages AI chat message state: 
import { useAIChatLogger } from '@twilio-paste/ai-chat-log';

const { chats, push, pop, clear } = useAIChatLogger();

​
Size Variants

The size prop on AIChatLog adjusts typography for different contexts:
  • default - Standard size for embedded chat
  • fullscreen - Larger size for dedicated chat pages

​
Accessibility

  • Uses role="log" for proper screen reader announcements
  • Messages have semantic list structure
  • Author labels are required for context
  • Loading states are announced to assistive technology
  • Source links are properly labeled

​
Related components

Build docs developers (and LLMs) love

Get started for freeTalk to us