Conversations is installed into your project as a file you own. It takes the same props as Ant Design X's Conversations, and draws its “more”, plus and collapse arrow glyphs from the kit's icon pack, so they match the rest of your UI. The defaults it fills in are marked antuikit in the API table, and anything you pass yourself wins.
Install
npx antuikit@latest init
npx antuikit@latest add conversations
The first command installs AntuikitProvider and the theme tokens, the second adds this component.
Import
From @/components/ui/conversations, never from @ant-design/x. The file lives in your project, so the import is a path, not a package.
import { Conversations } from "@/components/ui/conversations"
Items and selection
items holds the conversations, each with a unique key and a label. Selection can be left to the list or kept in your state.
defaultActiveKey picks the first selection and lets the list manage it from there.
activeKey with onActiveChange keeps the selection in your state. Use it when the URL or a router decides which chat is open.
disabled on an item locks it: no selection, no menu.
A { type: 'divider' } entry draws a line between conversations.
The item menu
menu adds a dropdown to every item, opened from a “more” button that shows on hover and on the selected item. It takes Menu's props, plus trigger to replace the button.
Use the function form when the action needs to know which conversation it is for. The object form shares one onClick across all items, and it does not receive the conversation.
Groups
groupable lists items under a heading taken from each item's group. Items without a group are listed without a heading.
The object form takes label to render the heading and collapsible to let the reader fold a group away.
defaultExpandedKeys, or expandedKeys with onExpand, decide which groups are open. Keys are group names.
New chat and shortcuts
creation shows a “New chat” button above the list. Pass onClick to start a chat, and label or icon to change it.
Conversations.Creation is the same button on its own, for a layout where it sits outside the list.
shortcutKeys binds keys: creation to the button, and items to select a conversation, like ['Alt', 'number'] for Alt plus 1 to 9.
1
<Conversations
2
items={items}
3
creation={{ onClick: startChat }}
4
shortcutKeys={{
5
creation: ["Meta", 75], // 75 is the K key code
6
items: ["Alt", "number"],
7
}}
8
/>
Events
onActiveChange fires when the reader picks a conversation, with its key and the item.
menu.onClick fires when the reader picks a menu action.
creation.onClick fires on the “New chat” button and its shortcut.
groupable.onExpand fires when a group opens or closes.
Styling
classNames and styles take four keys, one per part. Use them before a descendant selector: a part with a key keeps its name across versions.
1
<Conversations
2
classNames={{
3
root: "…",
4
creation: "…",
5
group: "…",
6
item: "…",
7
}}
8
/>
The list takes the width of its container. Give it a width, or put it in a sidebar that has one.
API Reference
Conversations
Conversations' props. Rows marked antuikit in the Version column are added by the kit.
ConversationItemType
One conversation in items.
DividerItemType
A divider entry in items.
GroupableProps
The object form of groupable.
ItemMenuProps
The object menu takes or returns. Rows marked antuikit in the Version column are added by the kit.
CreationProps
The object creation takes, and the props of Conversations.Creation. Rows marked antuikit in the Version column are added by the kit.