# antuikit / Conversations

> Conversations, a list of chats with its add, "more" and collapse glyphs drawn from the icon pack, and `Conversations.Creation` attached.

Docs: https://antuikit.com/docs/components/conversations

## Install

npx antuikit@latest init
npx antuikit@latest add conversations

## Import

import { Conversations } from "@/components/ui/conversations";

## Demos

- [Basic](https://ui.antuikit.com/embed/conversations/basic.md): Pass `items` to list the conversations and `defaultActiveKey` to select one, with `disabled` on an item to lock it.
- [New chat button](https://ui.antuikit.com/embed/conversations/creation.md): Pass `creation` to show a new chat button above the list, and add a conversation to `items` from its `onClick`.
- [Custom new chat button](https://ui.antuikit.com/embed/conversations/custom-creation.md): Give `creation` a `label`, an `icon` and `align` to change the new chat button's text, glyph and alignment.
- [Icons and dividers](https://ui.antuikit.com/embed/conversations/icons.md): Give an item an `icon` to show a glyph before its label, and add a `divider` item to separate agents from past chats.
- [Controlled](https://ui.antuikit.com/embed/conversations/controlled.md): Pass `activeKey` and `onActiveChange` to select a conversation from your own state, like the two buttons below the list.
- [Item menu](https://ui.antuikit.com/embed/conversations/menu.md): Pass `menu` to add a menu to each item, opened from the button that appears on hover.
- [Menu trigger](https://ui.antuikit.com/embed/conversations/menu-trigger.md): Set `menu.trigger` to replace the glyph that opens each item's menu, here with a chevron that stays visible.
- [Groups](https://ui.antuikit.com/embed/conversations/groups.md): Set `groupable` and give each item a `group` to list conversations under headings, like Today and Yesterday.
- [Collapsible groups](https://ui.antuikit.com/embed/conversations/collapsible-groups.md): Set `groupable.collapsible` to fold each group from its heading, and `groupable.label` to show a count beside the name.
- [Controlled groups](https://ui.antuikit.com/embed/conversations/controlled-groups.md): Pass `expandedKeys` and `onExpand` in `groupable` to open groups from your own state, with Today kept open by `collapsible`.
- [Shortcut keys](https://ui.antuikit.com/embed/conversations/shortcut-keys.md): Set `shortcutKeys` to start a new chat with Meta+K (Cmd+K on a Mac) and open a conversation with Alt and its number.
- [Assistant sidebar](https://ui.antuikit.com/embed/conversations/assistant-sidebar.md): An assistant app with past chats grouped by day in a sidebar, and the selected chat's messages and input in the pane beside it.
- [Searchable history](https://ui.antuikit.com/embed/conversations/history-panel.md): A chat history panel with a search field that filters the grouped list, and a menu on each chat to rename or delete it.
- [Workspace switcher](https://ui.antuikit.com/embed/conversations/workspace-switcher.md): A workspace picker above the chat list that swaps in each project's pinned and recent chats, with its members and chat count below.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/conversations`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Conversations` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.