React Actions Chat

Appearance

Chat ​

Chat is the main public component in react-actions-chat.

It renders three major areas:

  • the transcript
  • the persistent action bar
  • the shared input field

Basic Usage ​

tsx
import { Chat, type InputMessage } from 'react-actions-chat';
import 'react-actions-chat/styles';

const initialMessages: readonly InputMessage[] = [
  {
    type: 'other',
    content: 'Hello! How can I help you today?',
  },
];

export function App() {
  return (
    <Chat
      initialMessages={initialMessages}
      theme='dark'
    />
  );
}

Props ​

initialMessages ​

Optional seed messages shown when the component first mounts.

Notes:

  • it accepts readonly InputMessage[]
  • messages are added into the shared chat store on mount
  • if initialMessages is present, the component clears the existing transcript before adding them

theme ​

Controls the visual style of the chat.

Accepted values:

  • 'dark'
  • 'light'
  • a ChatTheme object

Custom theme objects are merged over the built-in dark theme, so partial theme objects still inherit defaults.

What Chat Handles For You ​

The component wires together the public stores and UI pieces so your app does not need to manually assemble them:

  • reads and renders useChatStore() messages
  • shows a loading bubble when the store is in loading mode
  • renders buttons attached to the current assistant message
  • renders persistent buttons from usePersistentButtonStore()
  • routes the shared input through useInputFieldStore()
  • masks visible user content when the input type is password

Conversation Model ​

When the user submits text:

  1. Chat reads the current shared input value
  2. it adds a self message to the transcript
  3. if the previous assistant message had a userResponseCallback, that callback runs

That model is what makes the library's chat-like follow-up flows work without each screen needing its own custom form state.

Chat is the main component, but these supporting exports are useful for advanced flows:

  • useChatStore
  • useInputFieldStore
  • usePersistentButtonStore
  • LIGHT_THEME
  • DARK_THEME

See Also ​