Conversation History
Sidebar component displaying past conversations with search, filtering, and actions. Features conversation grouping by date, delete confirmation, and real-time search. Perfect for chat applications.
Note: This component is currently under development. Some features may not work as expected. We're actively working on improvements and will update the documentation once stable.
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
Conversation Interface
Props
| Name | Type | Default | Description |
|---|---|---|---|
conversationsRequired | Conversation[] | — | Array of conversation objects |
activeId | string | — | |
onSelect | (id: string) => void | — | Callback when conversation is clicked (id: string) => void |
onCreate | () => void | — | |
onRename | (id: string, newTitle: string) => void | — | Callback when conversation is renamed (id: string, name: string) => void |
onDelete | (id: string) => void | — | Callback when conversation is deleted (id: string) => void |
onShare | (id: string) => void | — | |
showSearch | boolean | true | |
variant | 'default' | 'floating' | 'default' | |
size | 'sm' | 'default' | 'lg' | 'default' | |
isRTL | boolean | false | |
title | string | — | |
titleAr | string | — |
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 Support
The sidebar fully supports RTL layouts. Icons, timestamps, and menu positions all adapt correctly. All text supports Arabic via *Ar props.
Left-to-Right (LTR)
Conversations
Right-to-Left (RTL)
المحادثات
Related Components
Display messages within conversations
Input for sending messages in conversations
Select AI model per conversation