Conversations
Conversations
Used to switch between multiple agents, update conversation turns, and manage conversation history
Importimport { Conversations } from "@ant-design/x"; |
Sourcecomponents/conversations |
Ant Design XImportimport { Conversations } from "@ant-design/x"; |
Sourcecomponents/conversations |
Common props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| activeKey | Currently selected value | string | - | - |
| defaultActiveKey | Default selected value | string | - | - |
| items | Data source for conversation list | ItemType[] | - | - |
| onActiveChange | Callback for selection change | (value: string) => void | - | - |
| menu | Operation menu for conversations | ItemMenuProps| ((value: ConversationItemType) => ItemMenuProps) | - | - |
| groupable | If grouping is supported, it defaults to the Conversation.group field | boolean | GroupableProps | - | - |
| shortcutKeys | Shortcut key operations | { creation?: ShortcutKeys | - | - |
| creation | New conversation configuration | CreationProps | - | - |
| styles | Semantic structure styles | styles?: {creation?: React.CSSProperties;item?: React.CSSProperties;} | - | - |
| classNames | Semantic structure class names | classNames?: { creation?: string; item?:string;} | - | - |
| rootClassName | Root node className | string | - | - |
type ItemType = ConversationItemType | DividerItemType;
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| key | Unique identifier | string | - | - |
| label | Conversation name | React.ReactNode | - | - |
| group | Conversation type, linked to ConversationsProps.groupable | string | - | - |
| icon | Conversation icon | React.ReactNode | - | - |
| disabled | Whether to disable | boolean | - | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| type | Divider type | 'divider' | 'divider' | - |
| dashed | Whether dashed | boolean | false | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| label | Group title | React.ReactNode| ((group: string, info: { groupInfo: GroupInfoType}) => React.ReactNode) | - | - |
| collapsible | Collapsible configuration | boolean | ((group: string) => boolean) | - | - |
| defaultExpandedKeys | Default expanded or collapsed groups | string[] | - | - |
| onExpand | Expand or collapse callback | (expandedKeys: string[]) => void | - | - |
| expandedKeys | Expanded group keys | string[] | - | - |
Inherits antd MenuProps properties.
MenuProps & {trigger?:| React.ReactNode| ((conversation: ConversationItemType,info: { originNode: React.ReactNode },) => React.ReactNode);getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;};
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| creationBgColor | New conversation button background color | string | rgba(22,119,255,0.15) |
| creationBorderColor | New conversation button border color | string | rgba(22,119,255,0.22) |
| creationHoverColor | Background color of default new conversation button when hover | string | rgba(22,119,255,0.25) |
| shortcutKeyTextColor | Shortcut key identification font color | string | rgba(22,119,255,0.65) |
Basic usage.
Use the activeKey and onChange property to configure conversation.
Use the menu property to configure conversation.
Customize the menu trigger.
After using groupable properties open group, open the default according to Conversation.Group field group
Configure the collapsible property to enable group collapsibly.
Controlled group collapsing function.
New chat.
Customize the new chat.
Set shortcut keys for switching sessions or creating new sessions through shortcutKeys.
The example of infinite load with react-infinite-scroll-component.
