logoAnt Design X

设计研发组件X MarkdownX SDK演示
  • 介绍
  • 总览
  • 通用
    • Bubble对话气泡
    • Conversations管理对话
    • Notification系统通知
  • 唤醒
    • Welcome欢迎
    • Prompts提示集
  • 表达
    • Attachments输入附件
    • Sender输入框
    • Suggestion快捷指令
  • 确认
    • Sources来源引用
    • Think思考过程
    • ThoughtChain思维链
  • 反馈
    • Actions操作列表
    • FileCard文件卡片
  • 其他
    • XProvider全局化配置

Conversations
管理对话

用于切换多个智能体，更新对话轮次，对话历史切换
使用import { Conversations } from "@ant-design/x";
源码components/conversations
文档
编辑此页...
更新日志
loading

何时使用

  • 切换多个智能体，更新对话轮次
  • 需要对多个会话进行管理
  • 查看历史会话列表

代码演示

  • Help Me Write
  • AI Coding
  • Create Image
  • Deep Search
基本

基础用法。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
  • Help Me Write
  • AI Coding
  • Create Image
  • Deep Search
受控模式

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
  • Conversation Item 1
  • Conversation Item 2
  • Conversation Item 3
  • Conversation Item 4
会话操作

配合 menu 属性，配置操作菜单。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
  • Conversation Item 1
  • Conversation Item 2
  • Conversation Item 3
  • Conversation Item 4
自定义操作

自定义菜单入口。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
  • Today
    • This's Conversation Item 1, you can click me!
    • Conversation Item 2
    • Conversation Item 3
  • Yesterday
    • Conversation Item 4
    • Conversation Item 5
    • Conversation Item 6
分组展示

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
  • Today(3)
  • Yesterday(3)
分组折叠展示

配置collapsible属性为分组开启可折叠功能。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
  • Today
    • Conversation Item 1
    • Conversation Item 4
    • Conversation Item 7
  • Yesterday
    • Conversation Item 2
    • Conversation Item 5
    • Conversation Item 8
  • Historical chats
折叠受控模式

受控的分组可折叠。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
  • Help Me Write
  • AI Coding
  • Create Image
  • Deep Search
  • Today
    • Conversation Item 1
新会话

新对话。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
  • Help Me Write
  • AI Coding
  • Create Image
  • Deep Search
  • Today
    • Conversation Item 1
自定义新会话

自定义新对话。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
You can switch sessions using the shortcut key: Alt/⌥ + number, and create new chat using the shortcut key: Win/⌘ + K.
  • Help Me Write
  • AI Coding
  • Create Image
  • Deep Search
  • More Features
  • Today
    • Conversation Item 1
快捷键操作

通过 shortcutKeys 为切换会话或新建会话设置快捷键。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
    滚动加载

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

    CodeSandbox Icon
    codepen icon
    External Link Icon
    expand codeexpand code

    API

    通用属性参考：通用属性

    ConversationsProps

    属性说明类型默认值版本
    items会话列表数据源ItemType[]--
    activeKey当前选中的值string--
    defaultActiveKey初始化选中的值string--
    onActiveChange选中变更回调(value: string) => void--
    menu会话操作菜单ItemMenuProps| ((value: ConversationItemType) => ItemMenuProps)--
    groupable是否支持分组, 开启后默认按 Conversation.group 字段分组boolean | GroupableProps--
    shortcutKeys快捷键操作{ creation?: ShortcutKeys<number>; items?:ShortcutKeys<'number'> | ShortcutKeys<number>[];}--
    creation新会话操作配置CreationProps--
    styles语义化结构 stylestyles?: {creation?: React.CSSProperties;item?: React.CSSProperties;}--
    classNames语义化结构 classNameclassNames?: { creation?: string; item?:string;}--
    rootClassName根节点类名string--

    ItemType

    tsx
    type ItemType = ConversationItemType | DividerItemType;

    ConversationItemType

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

    DividerItemType

    属性说明类型默认值版本
    type会话列表分割线'divider''divider'-
    dashed是否虚线booleanfalse-

    ItemMenuProps

    继承 antd MenuProps 属性。

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

    GroupableProps

    属性说明类型默认值版本
    label分组标题React.ReactNode| ((group: string, info: { groupInfo: GroupInfoType}) => React.ReactNode)--
    collapsible可折叠配置boolean | ((group: string) => boolean)--
    defaultExpandedKeys默认展开或收起string[]--
    onExpand展开或收起(expandedKeys: string[]) => void--
    expandedKeys展开分组的 keysstring[]--

    Semantic DOM

    主题变量（Design Token）

    组件 Token如何定制？
    Token 名称描述类型默认值
    creationBgColor新会话按钮背景颜色stringrgba(22,119,255,0.15)
    creationBorderColor新会话按钮边框颜色stringrgba(22,119,255,0.22)
    creationHoverColor新会话按钮悬浮态背景颜色stringrgba(22,119,255,0.25)
    shortcutKeyTextColor快捷键标识字体颜色stringrgba(22,119,255,0.65)
    全局 Token如何定制？
    • Help Me Write
    • AI Coding
    • Create Image
    • Deep Search
    • Today
      • Conversation Item 1
      • Conversation Item 2
    • root
      管理对话根节点
    • item
      管理对话子节点
    • creation
      创建对话
    • group
      管理对话分组