Docs
🪄 ⏐ Examples
Chat

Chat

The chat component is a chat-only experience where no sessions are shown. Its responsive so it can be used on mobile devices or full-screen.

Session 1

Below is the code for the above example.

<Chat
  sessions={[
    {
      id: '1',
      title: 'Session 1',
      createdAt: new Date(),
      updatedAt: new Date(),
      conversations: [
        {
          id: '1',
          question: 'What is React?',
          response: 'React is a JavaScript library for building user interfaces.',
          createdAt: new Date(),
          updatedAt: new Date()
        },
        {
          id: '2',
          question: 'What is JSX?',
          response: 'JSX is a syntax extension for JavaScript.',
          createdAt: new Date(),
          updatedAt: new Date()
        }
      ]
    }
  ]}
  activeSessionId="1"
  viewType="chat"
  onDeleteSession={() => alert("delete!")}
>
  <SessionMessagePanel>
    <SessionMessagesHeader />
    <SessionMessages>
      {(conversations) =>
        conversations.map((conversation) => (
          <SessionMessage
            key={conversation.id}
            conversation={conversation}
          />
        ))
      }
    </SessionMessages>
    <ChatInput />
  </SessionMessagePanel>
</Chat>

For more information on how to set up a console chat, please refer to the getting started documentation. For more examples of how to use Reachat, please refer to the storybook demos (opens in a new tab).

ProvidersFigma