ChatView

A component that renders a chat view, with input prompt and messages.

Basic example

1import { ChatView } from '@markprompt/react';
2
3function Example() {
4  return (
5    <ChatView
6      projectKey="YOUR-PROJECT-KEY"
7      chatOptions={{
8        placeholder: 'Send message',
9        history: true,
10        avatars: {
11          user: '/avatars/user.png',
12          assistant: '/avatars/assistant.png',
13        },
14      }}
15      feedbackOptions={{ enabled: true }}
16      integrations={{
17        createTicket: {
18          enabled: true,
19          provider: 'zendesk',
20        },
21      }}
22    />
23  );
24}

Component API

PropTypeDescription
projectKeystringThe project key associated to the project.
apiUrlstringThe base API URL.
activeViewViewThe active view.
chatOptionsUserConfigurableOptions & ChatOptionsOptions for the chat component.
feedbackOptionsSubmitFeedbackOptions & FeedbackOptionsOptions for the feedback component.
referencesOptionsReferencesOptionsOptions for the references component.
integrationsIntegrationsOptionsOptions for the integrations.
showBackboolean = trueShow back button.
onDidPressBack() => voidHandler when back button is pressed.
handleCreateTicket() => voidHandler when a ticket is created.
linkAsstring | ComponentType<any> = "a"Component to use in place of <a>.
minInputRowsnumber = 1Minimum number of rows.
submitOnEnterboolean = trueSubmit on enter.
branding{ show?: boolean; type?: 'plain' | 'text' }Show the Markprompt footer.
displayMarkpromptOptions['display'] = "dialog"The way to display the chat/search content.
debugboolean = falseDisplay debug info.