Basic
A controlled chat. You own the messages and append the assistant's reply.
const [messages, setMessages] = React.useState<ChatMessage[]>([]);
const [generating, setGenerating] = React.useState(false);
const send = (text: string) => {
setMessages((m) => [...m, { id: `u${Date.now()}`, role: "user", content: text }]);
setGenerating(true);
const id = `a${Date.now()}`;
setMessages((m) => [...m, { id, role: "assistant", content: "Sure — here's the answer.", status: "streaming" }]);
setTimeout(() => {
setMessages((m) => m.map((x) => (x.id === id ? { ...x, status: "done" } : x)));
setGenerating(false);
}, 1800);
};
return (
<Chat
messages={messages}
generating={generating}
onSendMessage={send}
starters={["What can you build?", "Show me a button", "Explain reanimated"]}
/>
);