Components
ChatInterface
Fully controlled mode where your app owns data fetching, state transitions, and action semantics.
ChatInterface is the fully controlled component: it renders exactly what you pass and calls
your handlers for every action. Your app owns messages, conversations, and persistence.
Live preview
J
JazzmineWelcome to the ChatInterface demo!
What fully controlled means
Why choose this mode
Use ChatInterface when your app already has a state architecture, custom persistence rules, or
backend orchestration that should stay centralized.
Full working example
import React from 'react';
import { ChatInterface } from '@jazzmine-ui/react';
import type { Chat, Context, Message } from '@jazzmine-ui/react';
import '@jazzmine-ui/react/styles';
export function App() {
const [messages, setMessages] = React.useState<Message[]>([]);
const [chats] = React.useState<Chat[]>([]);
const [activeChatId, setActiveChatId] = React.useState<string>();
const [isLoading, setIsLoading] = React.useState(false);
const onSend = async (text: string, contexts?: Context[]) => {
setMessages((prev) => [
...prev,
{ id: crypto.randomUUID(), text, sender: 'user', timestamp: new Date().toISOString() },
]);
setIsLoading(true);
try {
const reply = `Echo: ${text}`;
setMessages((prev) => [
...prev,
{ id: crypto.randomUUID(), text: reply, sender: 'assistant' },
]);
} finally {
setIsLoading(false);
}
};
return (
<div style={{ height: '100vh' }}>
<ChatInterface
chats={chats}
activeChatId={activeChatId}
messages={messages}
onSend={onSend}
onNewChat={() => {}}
onSelectChat={setActiveChatId}
isLoading={isLoading}
defaultMessage="Welcome! Ask me anything to get started."
/>
</div>
);
}Context forwarding with onSend
The send callback receives selected context snippets as the second argument. Forward those contexts to your backend if your model supports retrieval-augmented or grounded responses.
Props
Prop
Type