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

PropTypeDescription
projectKeystringThe project key associated to the project.
apiUrlstringThe base API URL.
abort() => voidAbort handler.
conversationIdstringThe current conversation id.
setConversationId(conversationId: string) => voidSet a conversation id.
selectConversation(conversationId?: string) => voidSelect a conversation.
messagesChatViewMessage[]The messages in the current conversation.
setMessages(messages: ChatViewMessage[]) => voidSet messages.
setMessageByIndex(index: number, next: Partial<ChatViewMessage>) => voidSet a message by index.
setToolCallById(toolCallId: string, next: Partial<ToolCall>) => voidSet a tool call by id.
conversationIdsByProjectKey{ [projectKey: string]: string[] }Dictionary of conversations by project id.
messagesByConversationId{ [conversationId: string]: ConversationData }Dictionary of messages by conversation id.
toolCallsByToolCallId{ [tool_call_id: string]: ToolCall }Dictionary of tool calls by id.
submitChat(messages: SubmitChatMessage[]) => voidSubmit a list of new messages.
submitToolCalls(message: ChatViewMessage) => Promise<void>Submit tool calls.
optionsMarkpromptOptions['chat']User configurable chat options.
setOptions(options: UserConfigurableOptions) => voidSet the chat options for this session.
didAcceptDisclaimerByProjectKey{ [projectKey: string]: boolean }Dictionary of disclaimer acceptance by project id.
didAcceptDisclaimerbooleanAcceptance state of the disclaimer.
setDidAcceptDisclaimer(accept: boolean) => voidSet the acceptance state of the disclaimer.
regenerateLastAnswer() => voidTrigger a regeneration of the last answer.