# ChatList

> Sidebar list of conversations grouped by date (Hoy, Ayer, Últimos 7 días…).

Source: https://ui.jcsoftdev.com/docs/components/chat-list

Sidebar list of conversations grouped by date (Hoy, Ayer, Últimos 7 días…).

## Import

```ts
import { ChatList } from "@jcsoftdev/ui/ai";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/ai/chat-list`.

## Usage

```tsx
<ChatList items={ITEMS} activeId="2" now={NOW} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` * | `ChatListItem[]` |  |  |
| `activeId` | `string` |  |  |
| `onSelect` | `((id: string) => void)` |  |  |
| `onNew` | `(() => void)` |  |  |
| `onDelete` | `((id: string) => void)` |  | Shows a delete button per row. |
| `now` | `string \| number \| Date` |  | Reference date for the groups; defaults to the current time. Pass it for stable output. |
| `label` | `string` | `"Conversaciones"` | Accessible name of the navigation landmark. |
| `emptyText` | `string` | `"Aún no hay conversaciones."` |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/ai-chatlist--default)
- [Interactive](/storybook/?path=/story/ai-chatlist--interactive)
- [Empty](/storybook/?path=/story/ai-chatlist--empty)
- [Narrow](/storybook/?path=/story/ai-chatlist--narrow)
- [Preset Brutal](/storybook/?path=/story/ai-chatlist--preset-brutal)

## Source

`packages/ui/src/ai/chat-list/chat-list.tsx`