Documentation
Conversation List
Displays a grouped list of conversations with date-based grouping, active highlighting, and delete functionality.
Installation
1import { ConversationListComponent } from '@angular-ai-kit/core';Live Demo
Today
Yesterday
Previous 7 days
Active: 1
Features
- Date-based grouping (Today, Yesterday, etc.)
- Active conversation highlighting
- Delete button on hover
- Empty state with custom message
- Automatic sorting by date
API Reference
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
conversations | Conversation[] | required | Array of conversations to display |
activeId | string | null | null | ID of the currently active conversation |
showDelete | boolean | true | Whether to show delete buttons on hover |
emptyMessage | string | 'No conversations yet' | Message to show when list is empty |
customClasses | string | '' | Additional CSS classes |
Outputs
| Prop | Type | Default | Description |
|---|---|---|---|
select | EventEmitter<string> | - | Emitted with conversation ID when selected |
delete | EventEmitter<string> | - | Emitted with conversation ID when delete is clicked |
Usage Example
1<ai-conversation-list2 [conversations]="conversations"3 [activeId]="activeConversationId"4 [showDelete]="true"5 (select)="handleSelect($event)"6 (delete)="handleDelete($event)"7/>Accessibility
- Keyboard navigable list items
- Delete button with aria-label
- Focus visible states
- Semantic list structure