管理对话 Conversations - Ant Design X

何时使用

需要对多个会话进行管理
查看历史会话列表

代码演示

Conversation Item 1
Conversation Item 2
Conversation Item 3
Conversation Item 4

基础用法。

Conversation Item 1
Conversation Item 2
Conversation Item 3

使用 activeKey、onChange 属性，控制当前选中的会话。

Group1
- Conversation Item 1
- Conversation Item 2
- Conversation Item 3
Group2
- Conversation Item 4

使用 groupable 属性开启分组，开启后默认按 Conversation.group 字段分组

Today
- Conversation 1732204800000
- Conversation 1732204803600
- Conversation 1732204807200
- Conversation 1732204810800
Yesterday
- Conversation 1732204728000
- Conversation 1732204731600

通过 groupable.sort 属性对分组排序, 通过 groupable.title 自定义渲染分组。

结合 react-infinite-scroll-component 实现滚动自动加载列表。

API

通用属性参考：通用属性

ConversationsProps

属性	说明	类型	默认值	版本
activeKey	当前选中的值	string	-	-
defaultActiveKey	默认选中值	string	-	-
items	会话列表数据源	`Conversation`[]	-	-
onActiveChange	选中变更回调	(value: string) => void	-	-
menu	会话操作菜单	MenuProps \| ((value: `Conversation`) => MenuProps)	-	-
groupable	是否支持分组, 开启后默认按 `Conversation.group` 字段分组	boolean \| GroupableProps	-	-
styles	语义化结构 style	Record<'item', React.CSSProperties>	-	-
classNames	语义化结构 className	Record<'item', string>	-	-

Conversation

属性	说明	类型	默认值	版本
key	唯一标识	string	-	-
label	会话名称	React.ReactNode	-	-
timestamp	会话时间戳	number	-	-
group	会话分组类型，与 `ConversationsProps.groupable` 联动	string	-	-
icon	会话图标	React.ReactNode	-	-
disabled	是否禁用	boolean	-	-

GroupableProps

属性	说明	类型	默认值	版本
`sort`	分组排序函数	(a: string, b: string) => number	-	-
`title`	自定义渲染组件	((group: string, info: { components: { GroupTitle: React.ComponentType } }) => React.ReactNode)	-	-

MenuProps

继承 antd MenuProps 属性。

属性	说明	类型	默认值	版本
`trigger`	自定义menu触发器	React.ReactNode \| ((conversation: Conversation, info: { originNode: React.ReactNode }) => React.ReactNode)	-	-

主题变量（Design Token）