AI Sidebar

A feature-packed AI navigation sidebar — brand header, chat history groups, search, new chat, hover actions, collapsed rail, and user footer. Fully prop-driven.

Expanded

Brand header, new chat, quick nav, searchable history with pin/rename/delete, and a profile footer.

Loading…

Installation

CLI

npx @sonojs/ui@latest add ai-sidebar

Also needsnpx @sonojs/ui@latest add avatar button input && npm i lucide-react motion

Usage

ai-sidebar.tsx

import { AiSidebar } from "@/components/sonojs/ai-sidebar"

export function Example() {
  return (
    <AiSidebar
      brandName="Sono"
      user={{ name: "Alex Rivera", plan: "Free" }}
      onNewChat={() => {}}
      onSelectChat={(id) => console.log(id)}
    />
  )
}

Props

Prop	Type	Default	Description
brandName	string	"Sono"	Brand title in the header.
brandLogo	ReactNode	Bot icon	Logo beside the brand title.
navItems	AiSidebarNavItem[]	defaults	Quick navigation rows (Images, Library, …).
moreNavItems	AiSidebarNavItem[]	defaults	Extra items under the More menu.
chatHistoryGroups	AiSidebarChatGroup[]	defaults	Grouped conversation lists.
activeChatId	string	"chat-1"	Currently selected chat id.
user	AiSidebarUser	defaults	Name, email, avatar, and plan for the footer.
collapsed	boolean	false	Compact 64px icon rail.
searchQuery	string	—	Controlled search query (optional).
onNewChat	() => void	—	New chat button callback.
onSelectChat	(chatId: string) => void	—	Fired when a conversation is selected.
onToggleCollapse	() => void	—	Expand / collapse control callback.
onPinChat / onRenameChat / onDeleteChat	callbacks	—	History item actions from the hover menu.
className	string	—	Optional class names on the root aside.