Chat Log

​

About Chat Log

​

Components

• ChatLog - Container for the entire chat message list
• ChatMessage - Individual message container
• ChatBubble - Visual bubble wrapping message content
• ChatMessageMeta - Metadata section (timestamp, status)
• ChatMessageMetaItem - Individual metadata item
• ChatEvent - System event message
• ChatBookend - Section divider in chat
• ChatAttachment - File attachment display
• ChatLogger - Component for managing chat state
• useChatLogger - Hook for chat state management

​

Installation

yarn add @twilio-paste/chat-log

​

Usage

import { ChatLog, ChatMessage, ChatBubble, ChatMessageMeta, ChatMessageMetaItem } from '@twilio-paste/chat-log';

const MyChatLog = () => (
  <ChatLog>
    <ChatMessage variant="inbound">
      <ChatBubble>
        Hello! How can I help you today?
      </ChatBubble>
      <ChatMessageMeta aria-label="message metadata">
        <ChatMessageMetaItem>Agent · 2:35 PM</ChatMessageMetaItem>
      </ChatMessageMeta>
    </ChatMessage>
    <ChatMessage variant="outbound">
      <ChatBubble>
        I have a question about my account.
      </ChatBubble>
      <ChatMessageMeta aria-label="message metadata">
        <ChatMessageMetaItem>You · 2:36 PM</ChatMessageMetaItem>
      </ChatMessageMeta>
    </ChatMessage>
  </ChatLog>
);

​

Props

​

ChatLog

​

ChatMessage

​

ChatBubble

​

ChatMessageMeta

​

ChatMessageMetaItem

​

useChatLogger Hook

import { useChatLogger } from '@twilio-paste/chat-log';

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

​

Accessibility

• Chat Log uses role="log" for proper screen reader announcements
• Messages are contained in a list structure with role="list"
• Each message has proper semantic structure
• Metadata sections require aria-label for context

​

Related components

• Chat Composer - For composing new messages
• AI Chat Log - For AI assistant conversations