Jazzmine

Full working example

Each prop in this snippet is commented so you can map Sidebar behavior quickly.

AppSidebar.tsx

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} /* Required: list of conversations */
        activeChatId={activeChatId} /* Optional: selected conversation id */
        assistantName="Support Assistant" /* Optional: sidebar header label */
        onNewChat={() => {
          /* Required: define how new chats are created */
          console.log('Create new chat in your backend.');
        }}
        onSelectChat={setActiveChatId} /* Required: select active conversation */
        onDeleteChat={(chatId) => {
          /* Optional: enables built-in delete action */
          console.log('Delete chat:', chatId);
        }}
        onSearchClick={() => {
          /* Optional: open a separate search modal/workflow */
          console.log('Open conversation search modal.');
        }}
        onLoadMore={() => {
          /* Optional: pagination callback for infinite lists */
          console.log('Load more chats from backend.');
        }}
        hasMore={false} /* Optional: more pages flag */
        isLoadingChats={false} /* Optional: list loading state */
        collapsed={collapsed} /* Optional: controlled collapse state */
        onToggleCollapse={(value) => {
          /* Optional: controlled collapse toggle handler */
          setCollapsed((prev) => (typeof value === 'boolean' ? value : !prev));
        }}
        chatActions={[
          {
            label: 'Archive',
            onClick: (chatId) => {
              console.log('Archive chat:', chatId);
            },
          },
          {
            label: 'Delete permanently',
            danger: true,
            onClick: (chatId) => {
              console.log('Delete chat permanently:', chatId);
            },
          },
        ]}
      />
    </div>
  );
}

Sidebar props

Prop	Type	Required	Default	Description
chats	Chat[]	Yes	-	Conversations to render.
onNewChat	() => void	Yes	-	New chat button callback.
onSelectChat	(chatId: string) => void	Yes	-	Select chat callback.
activeChatId	string	No	-	Current selected chat id.
assistantName	string	No	-	Header title label.
logo	string	No	Built-in logo	Custom header/logo image.
logoAlt	string	No	-	Logo alt text.
chatActions	ChatAction[]	No	Built-in actions	Custom chat action menu items.
onRenameChat	(chatId: string, newTitle?: string) => void	No	-	Enables default rename action.
onDeleteChat	(chatId: string) => void	No	-	Enables default delete action.
onArchiveChat	(chatId: string) => void	No	-	Enables default archive action.
onSearchClick	() => void	No	-	Search trigger callback.
onLoadMore	() => void	No	-	Infinite-scroll load callback.
hasMore	boolean	No	false	More pages available.
isLoadingChats	boolean	No	false	Loading state for chat list.
isSearchOpen	boolean	No	false	Search input visibility.
searchQuery	string	No	''	Search query value.
onSearchQueryChange	(query: string) => void	No	-	Search query change callback.
className	string	No	''	Root class override.
collapsed	boolean	No	Internal state	Controlled collapse mode.
onToggleCollapse	(value?: boolean) => void	No	-	Controlled collapse handler.

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.

chat-action.ts

interface ChatAction {
  label: string;
  icon?: React.ReactNode;
  onClick: (chatId: string) => void;
  danger?: boolean;
}