{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"conversation-sidebar","type":"registry:ui","title":"Conversation Sidebar","description":"The chat-history sidebar every AI app rebuilds — search, inline rename, pin, and delete with undo, grouped by date, with loading and empty states.","author":"Scrim UI (https://scrimui.dev)","categories":["conversation"],"docs":"https://scrimui.dev/components/conversation-sidebar","dependencies":[],"registryDependencies":[],"files":[{"path":"src/showcase/conversation-sidebar/conversation-sidebar.tsx","content":"\"use client\";\n\nimport * as React from \"react\";\n\n/**\n * The chat-history sidebar every AI product rebuilds.\n *\n * A list of conversations is a ten-minute component. What makes this one\n * worth its own file is everything around the list:\n *\n * **Delete is undo-first, never confirm-first.** A confirm dialog makes the\n * reader answer a question before anything has happened; an undo bar lets\n * the action land instantly and be taken back while it is still visible.\n * `onDelete` fires immediately; if `onRestore` is provided, a bar offers to\n * bring the conversation back for a few seconds.\n *\n * **Rename is inline.** The title becomes an input where it sits — Enter\n * commits, Escape cancels. A modal for editing twelve characters is a whole\n * screen change for a two-second task.\n *\n * **Grouping is the caller's job.** \"Today\" / \"Yesterday\" / date math is\n * application policy, and timezone-sensitive. This component renders the\n * groups it is given; search filters within them.\n *\n * **Row actions reveal on hover AND focus.** The action buttons live inside\n * each row, so keyboard users reach them by tabbing — `focus-within` keeps\n * them visible while focus is anywhere in the row.\n */\n\nexport type Conversation = {\n id: string;\n title: string;\n updatedAt?: string;\n pinned?: boolean;\n};\n\nexport type ConversationGroup = {\n id: string;\n label: string;\n conversations: Conversation[];\n};\n\nexport type ConversationSidebarProps = {\n groups: ConversationGroup[];\n activeId?: string;\n /** Skeleton rows instead of the list, for first load. */\n loading?: boolean;\n /** Seeds the search box. The query itself is internal state after that. */\n defaultQuery?: string;\n newChatLabel?: string;\n searchPlaceholder?: string;\n emptyText?: string;\n onNewChat?: () => void;\n onSelect?: (id: string) => void;\n onRename?: (id: string, title: string) => void;\n onTogglePin?: (id: string) => void;\n onDelete?: (id: string) => void;\n /** Enables the undo bar after a delete. Re-insert the conversation. */\n onRestore?: (conversation: Conversation) => void;\n className?: string;\n};\n\n/* ------------------------------------------------------------------ */\n/* Icons */\n/* ------------------------------------------------------------------ */\n\nfunction PlusIcon(props: React.SVGProps) {\n return (\n \n \n \n );\n}\n\nfunction SearchIcon(props: React.SVGProps) {\n return (\n \n \n \n \n );\n}\n\nfunction PinIcon(props: React.SVGProps) {\n return (\n \n \n \n \n );\n}\n\nfunction PencilIcon(props: React.SVGProps) {\n return (\n \n \n \n \n );\n}\n\nfunction TrashIcon(props: React.SVGProps) {\n return (\n \n \n \n \n \n );\n}\n\nfunction CheckIcon(props: React.SVGProps) {\n return (\n \n \n \n );\n}\n\nfunction XIcon(props: React.SVGProps) {\n return (\n \n \n \n );\n}\n\n/* ------------------------------------------------------------------ */\n/* ConversationSidebar */\n/* ------------------------------------------------------------------ */\n\nconst UNDO_MS = 6000;\n\nexport function ConversationSidebar({\n groups,\n activeId,\n loading = false,\n defaultQuery = \"\",\n newChatLabel = \"New chat\",\n searchPlaceholder = \"Search chats…\",\n emptyText = \"No conversations yet. Start a new chat to see it here.\",\n onNewChat,\n onSelect,\n onRename,\n onTogglePin,\n onDelete,\n onRestore,\n className = \"\",\n}: ConversationSidebarProps) {\n const [query, setQuery] = React.useState(defaultQuery);\n const [renamingId, setRenamingId] = React.useState(null);\n const [draft, setDraft] = React.useState(\"\");\n const [deleted, setDeleted] = React.useState(null);\n const undoTimer = React.useRef(undefined);\n\n /* The undo bar dismisses itself; a new delete restarts the clock. The\n timeout callback is the only place this state changes on a timer, so\n there is nothing to sync in an effect. */\n React.useEffect(() => () => window.clearTimeout(undoTimer.current), []);\n\n const q = query.trim().toLowerCase();\n const visible = q\n ? groups\n .map((g) => ({\n ...g,\n conversations: g.conversations.filter((c) => c.title.toLowerCase().includes(q)),\n }))\n .filter((g) => g.conversations.length > 0)\n : groups;\n const total = groups.reduce((n, g) => n + g.conversations.length, 0);\n\n function startRename(conv: Conversation) {\n setRenamingId(conv.id);\n setDraft(conv.title);\n }\n\n function commitRename() {\n if (renamingId) {\n const title = draft.trim();\n if (title) onRename?.(renamingId, title);\n }\n setRenamingId(null);\n }\n\n function handleDelete(conv: Conversation) {\n onDelete?.(conv.id);\n if (!onRestore) return;\n window.clearTimeout(undoTimer.current);\n setDeleted(conv);\n undoTimer.current = window.setTimeout(() => setDeleted(null), UNDO_MS);\n }\n\n function handleUndo() {\n window.clearTimeout(undoTimer.current);\n if (deleted) onRestore?.(deleted);\n setDeleted(null);\n }\n\n const actionBtn =\n \"rounded-md p-1.5 text-zinc-400 transition-colors hover:bg-zinc-200 hover:text-zinc-700 dark:text-zinc-500 dark:hover:bg-zinc-700 dark:hover:text-zinc-200\";\n\n return (\n
\n {/* New chat */}\n
\n \n \n {newChatLabel}\n \n
\n\n {/* Search */}\n
\n
\n \n setQuery(e.target.value)}\n placeholder={searchPlaceholder}\n aria-label=\"Search conversations\"\n className=\"w-full rounded-lg border border-zinc-200 bg-white py-1.5 pl-8 pr-3 text-[13px] text-zinc-700 placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:ring-zinc-400/40 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200 dark:placeholder:text-zinc-500\"\n />\n
\n
\n\n {/* List */}\n \n\n {/* Undo bar */}\n {deleted && (\n \n \n Deleted “{deleted.title}”\n \n \n Undo\n \n
\n )}\n \n );\n}\n","type":"registry:ui","target":"components/ui/conversation-sidebar.tsx"}]}