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

Prop Type Description Default
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.

true
onDidPressBack () => void

Handler when back button is pressed.

linkAs string | ComponentType<any>

Component to use in place of <a>.

"a"
minInputRows number

Minimum number of rows.

1
submitOnEnter boolean

Submit on enter.

true
branding { show?: boolean; type?: 'plain' | 'text' }

Show the Markprompt footer.

display MarkpromptOptions['display']

The way to display the chat/search content.

"dialog"
debug boolean

Display debug info.

false