useChatStore

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}

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