Chat Composer

​

About Chat Composer

​

Components

• ChatComposer - The main rich text editor
• ChatComposerContainer - Wrapper container with action buttons
• ChatComposerActionGroup - Group of action buttons
• ChatComposerActionRow - Row for action buttons
• ChatComposerAttachmentCard - Display file attachments
• ChatComposerAttachmentGroup - Group of attachments
• ChatComposerAttachmentLink - Link to attachment
• ChatComposerAttachmentDescription - Attachment description

​

Installation

yarn add @twilio-paste/chat-composer

​

Usage

import { ChatComposer } from '@twilio-paste/chat-composer';

const MyComposer = () => {
  const [message, setMessage] = React.useState('');
  
  return (
    <ChatComposer
      config={{
        namespace: 'my-chat',
        onError: (error) => console.error(error),
      }}
      placeholder="Type a message..."
      onChange={(editorState, editor) => {
        const text = editorState.read(() => $getRoot().getTextContent());
        setMessage(text);
      }}
      ariaLabel="Message input"
    />
  );
};

​

Props

​

ChatComposer

​

ChatComposerContainer

​

ChatComposerActionGroup

​

Lexical Editor Access

const editorRef = React.useRef(null);

<ChatComposer
  editorInstanceRef={editorRef}
  config={{ namespace: 'chat' }}
/>

// Later, access editor methods
editorRef.current?.clear();

​

Accessibility

• Uses semantic HTML with proper ARIA attributes
• Supports keyboard navigation
• Focus management with visual focus indicators
• Screen reader announcements for state changes
• Requires ariaLabel for accessible labeling

​

Related components

• Chat Log - For displaying sent messages
• AI Chat Log - For AI conversations