Conversations - Ant Design X

When To Use

Switch between multiple agents, update conversation turns
Need to manage multiple conversations
View a list of historical conversations

Examples

API

Common props ref：Common props

ConversationsProps

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; items?:ShortcutKeys<'number'> \| 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	-	-

ItemType

tsx

type ItemType = ConversationItemType | DividerItemType;

ConversationItemType

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	-	-

DividerItemType

Property	Description	Type	Default	Version
type	Divider type	'divider'	'divider'	-
dashed	Whether dashed	boolean	false	-

GroupableProps

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[]	-	-

ItemMenuProps

Inherits antd MenuProps properties.

tsx

MenuProps & {
    trigger?:
      | React.ReactNode
      | ((
          conversation: ConversationItemType,
          info: { originNode: React.ReactNode },
        ) => React.ReactNode);
    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
  };

Design Token

Component TokenHow to use?

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)

Global TokenHow to use?