Conversation History
Sidebar component for managing multiple conversation threads with search and delete. Organizes conversations by time period (today, yesterday, last 7 days, etc.) with full CRUD operations support.
Preview
Conversations
Active Conversation: Project Planning Discussion
Chat interface would go here
Installation
Usage
Examples
Full Featured
My Conversations
Chat content
Time-based Grouping
Conversations are automatically grouped by time:
- Today
- Yesterday
- Last 7 days
- Last 30 days
- Older
Different Sizes
Small (256px)
Conversations
Large (384px)
Conversations
Floating Variant
Use floating variant for overlays or modals:
Conversations
With Search
Search filters conversations by title and preview text:
Conversations
Conversation Interface
Props
| Name | Type | Default | Description |
|---|---|---|---|
conversationsRequired | Conversation[] | — | List of conversations |
activeId | string | — | Currently active conversation ID |
onSelect | (id: string) => void | — | Callback when conversation is selected |
onCreate | () => void | — | Callback when new conversation is created |
onRename | (id: string, newTitle: string) => void | — | Callback when conversation is renamed |
onDelete | (id: string) => void | — | Callback when conversation is deleted |
onShare | (id: string) => void | — | Callback when conversation is shared |
showSearch | boolean | true | Show search input |
variant | 'default' | 'floating' | 'default' | Visual style variant |
size | 'sm' | 'default' | 'lg' | 'default' | Width size of the sidebar |
isRTL | boolean | false | Whether text direction is RTL |
title | string | — | Header title |
titleAr | string | — | Header title in Arabic |
Accessibility
Screen Reader
All interactive elements have proper labels. Action menu items include icon descriptions. Empty states provide helpful context.
Keyboard Navigation
- Tab: Navigate through conversations and buttons
- Enter: Select conversation or activate button
- ↑ / ↓: Navigate list (in scroll area)
- /: Focus search (when available)
Visual Feedback
Active conversation is highlighted. Hover states on conversations. Action menu appears on hover for better discoverability.
RTL Considerations
The sidebar fully supports RTL layouts. Icons, timestamps, and menu positions all adapt correctly. All text supports Arabic via *Ar props.
LTR (English)
Conversations
RTL (العربية)
المحادثات
Related Components
Display messages within conversations
Input for sending messages in conversations
Select AI model per conversation