AI Right Sidebar

• Non-modal design: Sidebar doesn't overlay content, main area adjusts when sidebar opens/closes
• Resizable width: Drag to resize or choose from narrow (280px), medium (360px), wide (480px)
• Pinnable: Pin the sidebar open to prevent auto-collapse
• Multi-section tabs: Chat, Context, History, and Settings in one interface
• Context management: Select and manage active resources (web search, knowledge base, files)
• Conversation history: Access previous chats with timestamps
• Smooth transitions: Animated open/close with CSS transitions

This component creates a Perplexity Comet-style collapsible sidebar for AI chat interfaces. Perfect for providing context, history, and settings without blocking the main content.

import { AIRightSidebar } from '@/components/ui/ai-right-sidebar'

function ChatInterface() {
  const [isOpen, setIsOpen] = useState(true)

  return (
    <div className="flex h-screen">
      <main className="flex-1">
        {/* Your main content */}
      </main>

      <AIRightSidebar
        isOpen={isOpen}
        onToggle={() => setIsOpen(true)}
      />
    </div>
  )
}