ChatView | Markprompt Documentation

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

Prop	Type	Description
projectKey	string	The project key associated to the project.
apiUrl	string	The base API URL.
activeView	View	The active view.
chatOptions	UserConfigurableOptions & ChatOptions	Options for the chat component.
feedbackOptions	SubmitFeedbackOptions & FeedbackOptions	Options for the feedback component.
referencesOptions	ReferencesOptions	Options for the references component.
integrations	IntegrationsOptions	Options for the integrations.
showBack	boolean	Show back button. Default: `true`.
onDidPressBack	() => void	Handler when back button is pressed.
handleCreateTicket	() => void	Handler when a ticket is created.
linkAs	string \| ComponentType<any>	Component to use in place of <a>. Default: `"a"`.
minInputRows	number	Minimum number of rows. Default: `1`.
submitOnEnter	boolean	Submit on enter. Default: `true`.
branding	{ show?: boolean; type?: 'plain' \| 'text' }	Show the Markprompt footer.
display	MarkpromptOptions['display']	The way to display the chat/search content. Default: `"dialog"`.
debug	boolean	Display debug info. Default: `false`.