useChatStore

useChatStore<T>(selector: (state: ChatStoreState) => T): T

The useChatStore() hook makes it easy to create support chat interfaces. It provides API bindings, state management, function calling and abort handling capabilities.

Basic example

1import {
2  type ChatViewMessage,
3  ChatProvider,
4  useChatStore,
5} from '@markprompt/react';
6import * as React from 'react';
7
8function Chat() {
9  const [input, setInput] = React.useState('');
10  const messages = useChatStore((s) => s.messages);
11  const submitChat = useChatStore((s) => s.submitChat);
12
13  return (
14    <div className="flex h-full w-full flex-col">
15      {messages.map((message) => (
16        <div key={message.id}>
17          {message.role === 'assistant' ? 'Assistant: ' : 'User: '}
18          {message.content}
19        </div>
20      ))}
21
22      <form
23        onSubmit={(e) => {
24          e.preventDefault();
25          submitChat([{ role: 'user', content: input.trim() }]);
26          setInput('');
27        }}
28      >
29        <input
30          className="fixed inset-x-2 bottom-0 rounded border border-neutral-200 p-2"
31          value={input}
32          placeholder="Send a message"
33          onChange={(e) => setInput(e.target.value)}
34        />
35      </form>
36    </div>
37  );
38}
39
40export default function Page() {
41  return (
42    <ChatProvider projectKey="YOUR-PROJECT-KEY">
43      <Chat />
44    </ChatProvider>
45  );
46}

Hook API

The useChatStore() hook is similar to the useStore() hook of Zustand , wherein you pass a function that takes the state object and returns a specific value:

1// Get the messages list
2const messages = useChatStore((s) => s.messages);
3// Get the submitChat function
4const submitChat = useChatStore((s) => s.submitChat);

ChatStoreState

Prop Type Description
projectKey string

The project key associated to the project.

apiUrl string

The base API URL.

headers { [key: string]: string }

Headers to pass along the request.

abort () => void

Abort handler.

threadId string

The current thread id.

setThreadId (threadId: string) => void

Set a thread id.

selectThread (threadId?: string) => void

Select a thread.

messages ChatViewMessage[]

The messages in the current thread.

setMessages (messages: ChatViewMessage[]) => void

Set messages.

setToolCallById (toolCallId: string, next: Partial<ToolCall>) => void

Set a tool call by id.

threadIdsByProjectKey { [projectKey: string]: string[] }

Dictionary of threads by project id.

messagesByThreadId { [threadId: string]: ThreadData }

Dictionary of messages by thread id.

toolCallsByToolCallId { [tool_call_id: string]: ToolCall }

Dictionary of tool calls by id.

submitChat ( messages: SubmitChatMessage[], additionalMetadata?: { [key: string]: unknown; }, ) => void

Submit a list of new messages.

submitToolCalls (message: ChatViewMessage) => Promise<void>

Submit tool calls.

options MarkpromptOptions['chat']

User configurable chat options.

setOptions (options: UserConfigurableOptions) => void

Set the chat options for this session.

didAcceptDisclaimerByProjectKey { [projectKey: string]: boolean }

Dictionary of disclaimer acceptance by project id.

didAcceptDisclaimer boolean

Acceptance state of the disclaimer.

setDidAcceptDisclaimer (accept: boolean) => void

Set the acceptance state of the disclaimer.

regenerateLastAnswer () => void

Trigger a regeneration of the last answer.

capMessagesByThreadId () => void

Caps the messages by thread. Call after updates to messagesByThreadId.