Conversations管理对话
Conversations
管理对话
用于承载用户侧发送的历史对话列表。
使用import { Conversations } from "@ant-design/x"; |
Ant Design X使用import { Conversations } from "@ant-design/x"; |
基础用法。
配合 menu 属性，配置操作菜单。
自定义菜单入口。
使用 activeKey、onChange 属性，控制当前选中的会话。
使用 groupable 属性开启分组，开启后默认按 Conversation.group 字段分组
通过 groupable.sort 属性对分组排序, 通过 groupable.title 自定义渲染分组。
结合 react-infinite-scroll-component 实现滚动自动加载列表。
通用属性参考：通用属性
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| 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> | - | - |
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| key | 唯一标识 | string | - | - |
| label | 会话名称 | React.ReactNode | - | - |
| timestamp | 会话时间戳 | number | - | - |
| group | 会话分组类型，与 ConversationsProps.groupable 联动 | string | - | - |
| icon | 会话图标 | React.ReactNode | - | - |
| disabled | 是否禁用 | boolean | - | - |
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
sort | 分组排序函数 | (a: string, b: string) => number | - | - |
title | 自定义渲染组件 | ((group: string, info: { components: { GroupTitle: React.ComponentType } }) => React.ReactNode) | - | - |
继承 antd MenuProps 属性。
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
trigger | 自定义menu触发器 | React.ReactNode | ((conversation: Conversation, info: { originNode: React.ReactNode }) => React.ReactNode) | - | - |
