Components
Sidebar
Conversation list UI you can run standalone or as part of ChatInterface.
Sidebar is the conversation list UI. Use it standalone for custom layouts, or let
ChatInterface render it for you.
Live preview
Full working example
import React from 'react';
import { Sidebar } from '@jazzmine-ui/react';
import type { Chat } from '@jazzmine-ui/react';
import '@jazzmine-ui/react/styles';
export function AppSidebar() {
const [chats] = React.useState<Chat[]>([]);
const [activeChatId, setActiveChatId] = React.useState<string>();
const [collapsed, setCollapsed] = React.useState(false);
return (
<div style={{ height: '100vh' }}>
<Sidebar
chats={chats}
activeChatId={activeChatId}
assistantName="Support Assistant"
onNewChat={() => {}}
onSelectChat={setActiveChatId}
onDeleteChat={(chatId) => console.log('Delete chat:', chatId)}
onSearchClick={() => {}}
collapsed={collapsed}
onToggleCollapse={(value) =>
setCollapsed((prev) => (typeof value === 'boolean' ? value : !prev))
}
chatActions={[
{ label: 'Archive', onClick: (chatId) => console.log('Archive', chatId) },
{ label: 'Delete permanently', danger: true, onClick: (chatId) => console.log(chatId) },
]}
/>
</div>
);
}Props
Prop
Type
Collapse behavior
Controlled collapse mode
Pass both collapsed and onToggleCollapse to control expansion state from your app. If you
omit them, Sidebar manages collapse state internally.
Custom chatActions
Provide chatActions to replace or extend the default action menu per conversation.
interface ChatAction {
label: string;
icon?: React.ReactNode;
onClick: (chatId: string) => void;
danger?: boolean;
}