Docs🪄 ⏐ ExamplesConsole

Console

The console is the default view type for Reachat. It is a full-screen view that allows you to chat with your bot in a console-like interface. Below is a bare-bones example of a console chat. Its worth noting that If the console doesn’t have enough space to render fully it will fall back to the companion view.

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()
        }
      ]
    }
  ]}
  viewType="console"
  onDeleteSession={() => alert("delete!")}
  >
  <SessionsList>
    <NewSessionButton />
    <SessionGroup />
  </SessionsList>
  <SessionMessagePanel>
    <SessionMessagesHeader />
    <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.

Getting StartedCompanion