Conversations 管理对话

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

何时使用

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

代码演示

基本

基础用法。

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

<script setup lang="tsx">
import { theme } from 'ant-design-vue';
import { Conversations } from 'ant-design-x-vue';
import type { ConversationsProps } from 'ant-design-x-vue';

defineOptions({ name: 'AXConversationsBasic' });

const items: ConversationsProps['items'] = Array.from({ length: 4 }).map((_, index) => ({
  key: `item${index + 1}`,
  label: `Conversation Item ${index + 1}`,
  disabled: index === 3,
}));

const { token } = theme.useToken();

// Customize the style of the container
const style = {
  width: '256px',
  background: token.value.colorBgContainer,
  borderRadius: token.value.borderRadius,
};

defineRender(() => {
  return (
    <Conversations items={items} defaultActiveKey="item1" style={style} />
  )
})
</script>

隐藏源代码

会话操作

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

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

<script setup lang="tsx">
import { DeleteOutlined, EditOutlined, StopOutlined } from '@ant-design/icons-vue';
import { App, theme } from 'ant-design-vue';
import { Conversations, type ConversationsProps } from 'ant-design-x-vue';

defineOptions({ name: 'AXConversationsWithMenu' })

const items: ConversationsProps['items'] = Array.from({ length: 4 }).map((_, index) => ({
  key: `item${index + 1}`,
  label: `Conversation Item ${index + 1}`,
  disabled: index === 3,
}));

const Demo = () => {
  const { message } = App.useApp();
  const { token } = theme.useToken();

  const style = {
    width: '256px',
    background: token.value.colorBgContainer,
    borderRadius: token.value.borderRadius,
  };

  const menuConfig: ConversationsProps['menu'] = (conversation) => ({
    items: [
      {
        label: 'Operation 1',
        key: 'operation1',
        icon: <EditOutlined />,
      },
      {
        label: 'Operation 2',
        key: 'operation2',
        icon: <StopOutlined />,
        disabled: true,
      },
      {
        label: 'Operation 3',
        key: 'operation3',
        icon: <DeleteOutlined />,
        danger: true,
      },
    ],
    onClick: (menuInfo) => {
      message.info(`Click ${conversation.key} - ${menuInfo.key}`);
    },
  });

  return <Conversations defaultActiveKey="item1" menu={menuConfig} items={items} style={style} />
}


defineRender(() => {
  return (
    <App>
      <Demo />
    </App>
  )
})
</script>

隐藏源代码

受控模式

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

• Conversation Item 1
• Conversation Item 2
• Conversation Item 3

<script setup lang="tsx">
import { Button, Flex, theme } from 'ant-design-vue';
import { Conversations, type ConversationsProps } from 'ant-design-x-vue';
import { ref } from 'vue';

defineOptions({ name: 'AXConversationsControlledMode' });

const items: ConversationsProps['items'] = Array.from({ length: 3 }).map((_, index) => ({
  key: `item${index + 1}`,
  label: `Conversation Item ${index + 1}`,
}));

const activeKey = ref('item1');
const updateActiveKey = (v: string) => activeKey.value = v;
const { token } = theme.useToken();

// Customize the style of the container
const style = {
  width: '256px',
  background: token.value.colorBgContainer,
  borderRadius: token.value.borderRadius,
};

defineRender(() => {
  return (
    <Flex vertical gap="small" align="flex-start">
      <Conversations
        activeKey={activeKey.value}
        onActiveChange={(v) => updateActiveKey(v)}
        items={items}
        style={style}
      />

      <Flex gap="small">
        <Button
          onClick={() => {
            updateActiveKey('item1');
          }}
        >
          Active First
        </Button>
        <Button
          onClick={() => {
            updateActiveKey('item3');
          }}
        >
          Active Last
        </Button>
      </Flex>
    </Flex>
  )
});
</script>

隐藏源代码

分组展示

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

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

<script setup lang="tsx">
import { theme } from 'ant-design-vue';
import { Conversations, type ConversationsProps } from 'ant-design-x-vue';

defineOptions({ name: 'AXConversationsGroup' });

const items: ConversationsProps['items'] = Array.from({ length: 4 }).map((_, index) => ({
  key: `item${index + 1}`,
  label: `Conversation Item ${index + 1}`,
  disabled: index === 3,
  group: index === 3 ? 'Group2' : 'Group1',
}));

const { token } = theme.useToken();

// Customize the style of the container
const style = {
  width: '256px',
  background: token.value.colorBgContainer,
  borderRadius: token.value.borderRadius,
};

defineRender(() => {
  return (
    <Conversations items={items} defaultActiveKey="item1" style={style} groupable />
  )
});
</script>

隐藏源代码

分组排序

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

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

<script setup lang="tsx">
import { CommentOutlined } from '@ant-design/icons-vue';
import { Space, theme } from 'ant-design-vue';
import { Conversations, type ConversationsProps } from 'ant-design-x-vue';


defineOptions({ name: 'AXConversationsGroupSort' });

const items: ConversationsProps['items'] = Array.from({ length: 6 }).map((_, index) => {
  const timestamp = index <= 3 ? 1732204800000 : 1732204800000 - 60 * 60 * 24;

  return {
    key: `item${index + 1}`,
    label: `Conversation ${timestamp + index * 60 * 60}`,
    timestamp: timestamp + index * 60 * 60,
    group: index <= 3 ? 'Today' : 'Yesterday',
  };
});

const { token } = theme.useToken();

// Customize the style of the container
const style = {
  width: '272px',
  background: token.value.colorBgContainer,
  borderRadius: token.value.borderRadius,
};

const groupable: ConversationsProps['groupable'] = {
  sort(a, b) {
    if (a === b) return 0;

    return a === 'Today' ? -1 : 1;
  },
  title: (group, { components: { GroupTitle } }) =>
    group ? (
      <GroupTitle>
        <Space>
          <CommentOutlined />
          <span>{group}</span>
        </Space>
      </GroupTitle>
    ) : (
      <GroupTitle />
    ),
};

defineRender(() => {
  return (
    <Conversations style={style} groupable={groupable} defaultActiveKey="demo1" items={items} />
  )
});
</script>

隐藏源代码

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', CSSProperties>	-	-
classNames	语义化结构 className	Record<'item', string>	-	-

Conversation

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

GroupableProps

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

主题变量（Design Token）