Ant Design X

Conversations管理对话

用于承载用户侧发送的历史对话列表。

使用import{ Conversations }from"@ant-design/x";

源码components/conversations

文档

编辑此页更新日志

Ant Design X

Conversations管理对话

用于承载用户侧发送的历史对话列表。

使用import{ Conversations }from"@ant-design/x";

源码components/conversations

文档

编辑此页更新日志

何时使用

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

代码演示

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

主题变量（Design Token）