<CopilotChat>

The CopilotChat is the default chat UI for the Copilot assistant. You can see it in our live demo, and customize it via appearance prop. The CopilotChat must be wrapped in a CopilotProvider.

// Example.jsx
import { CopilotProvider, CopilotChat } from '@copilotjs/react'
import '@copilotjs/styles/default.css'  // Don't forget the styles.

export default function Example() {
  return (
    <CopilotProvider appId="..." userId="..." companyId="..." context={...}>
      <CopilotChat appearance={...} />   // The default chat UI.
    </CopilotProvider>
  )
}

Props

Use these properties to configure the CopilotChat component.

Prop	Description	Type	Required
isOpen	A flag to open or close the chat UI. Default is true.	boolean	no
appearance	The visual properties of the chat UI. See details below.	object	no
id	HTML attribute passed through to the component's container.	string	no
className	HTML attribute passed through to the component's container.	string	no
style	HTML attribute passed through to the component's container. Used for inline styling.	object	no
onClose	Function invoked when the user closes the chat UI. See close event example.	(event) => void	no
onUndo	Function invoked when the user undoes an action in the chat UI. See undo event example.	(event) => void	no
onRedo	Function invoked when the user redoes an action in the chat UI. See redo event example.	(event) => void	no

appearance

Key	Description	Type	Required
showHeader	Show/hide the chat header bar.	boolean	no, default is true
headerTitle	The title on the chat header. Use empty string to hide title.	string	no, default is 'Copilot'
welcomeTitle	The title on the welcome panel. Use empty string to hide title.	string	no, default is 'How can I help?'
welcomeSubtitle	The subtitle on the welcome panel. Use empty string to hide subtitle.	string	no, default is ''
welcomePrompts	The example prompts on the welcome panel. Use empty array to hide examples.	string[]	no, default is []
showSpeakerNames	Show/hide the full names of user and assistant.	boolean	no, default is true
userName	The name of user, shown if showSpeakerNames is true.	string	no, default is 'You'
userInitials	The letter initials of the user avatar.	string	no, default is 'Y'
userColor	The background color of the user avatar.	string	no, default is '#1f2937'
assistantName	The name of assistant, shown if showSpeakerNames is true.	string	no, default is 'Copilot'
assistantInitials	The letter initials of the assistant avatar.	string	no, default is 'AI'
assistantColor	The background color of the assistant avatar.	string	no, default is '#4f46e5'
enableUndo	Enable/disable the user to undo actions performed by the assistant, directly in chat UI.	boolean	no, default is false

Example

<CopilotProvider appId="..." userId="..." companyId="..." context={...}>
  <CopilotChat
    isOpen={true}
    appearance={{
      showHeader: true,
      headerTitle: 'Copilot',
      welcomeTitle: 'How can I help?',
      welcomeSubtitle: 'Describe the action you want to perform.',
      welcomePrompts: ['Add 2 concentric circles.', 'Clear the canvas.'],
      showSpeakerNames: true,
      userName: 'You',
      userInitials: 'Y',
      userColor: '#1f2937',
      assistantName: 'Copilot',
      assistantInitials: 'AI',
      assistantColor: '#4f46e5',
      enableUndo: false,
    }}
    id="my-custom-id"
    className="my-custom-class"
    style={{ width: '300px', height: '500px' }}
    onClose={(event) => console.log('The user closed the chat UI.')}
    onUndo={(event) => console.log('The user undid an action.')}
    onRedo={(event) => console.log('The user redid an action.')}
  />
</CopilotProvider>

Events

The CopilotChat emits multiple types of events, described below.

close

When the user closes the chat UI, the onClose handler is invoked with an event such as:

{
  "type": "close",
  "data": {}
}

undo

When the user undoes an action in the chat UI, the onUndo handler is invoked with an event such as:

{
  "type": "undo",
  "data": {}
}

redo

When the user redoes an action in the chat UI, the onRedo handler is invoked with an event such as:

{
  "type": "redo",
  "data": {}
}