Conversations

Used to host the list of historical dialogues sent by the user.

When to use

• Need to manage multiple conversations
• View the historical conversation list

Examples

Basic

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

Basic

Basic usage.

<script setup lang="tsx">
defineOptions({ name: 'AXConversationsBasicV2' });

import {
  CodeOutlined,
  FileImageOutlined,
  FileSearchOutlined,
} from '@ant-design/icons-vue';
import type { ConversationsProps } from 'ant-design-x-vue';
import { Conversations } from 'ant-design-x-vue';
import { Flex, Switch, theme } from 'ant-design-vue';
import { computed, ref } from 'vue';

const { token } = theme.useToken();
const deepSearchChecked = ref(false);

const style = computed(() => ({
  width: '256px',
  background: token.value.colorBgContainer,
  borderRadius: `${token.value.borderRadius}px`,
}));

const items = computed<ConversationsProps['items']>(() => [
  {
    key: 'write',
    label: 'Help Me Write',
    icon: <CodeOutlined />,
  },
  {
    key: 'coding',
    label: 'AI Coding',
    icon: <CodeOutlined />,
  },
  {
    key: 'createImage',
    label: 'Create Image',
    icon: <FileImageOutlined />,
  },
  {
    key: 'deepSearch',
    disabled: !deepSearchChecked.value,
    label: (
      <Flex gap="small" align="center">
        Deep Search
        <Switch
          size="small"
          checked={deepSearchChecked.value}
          onChange={(val: boolean) => (deepSearchChecked.value = val)}
        />
      </Flex>
    ),
    icon: <FileSearchOutlined />,
  },
]);

defineRender(() => (
  <Conversations items={items.value} defaultActiveKey="write" style={style.value} />
));
</script>

Hide source

Controlled mode

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

Controlled mode

Use activeKey and onActiveChange properties to control the currently selected conversation.

<script setup lang="tsx">
defineOptions({ name: 'AXConversationsControlledModeV2' });

import {
  CodeOutlined,
  FileImageOutlined,
  FileSearchOutlined,
} from '@ant-design/icons-vue';
import type { ConversationsProps } from 'ant-design-x-vue';
import { Conversations } from 'ant-design-x-vue';
import { Button, Flex, theme } from 'ant-design-vue';
import { computed, ref } from 'vue';

const items: ConversationsProps['items'] = [
  {
    key: 'write',
    label: 'Help Me Write',
    icon: <CodeOutlined />,
  },
  {
    key: 'coding',
    label: 'AI Coding',
    icon: <CodeOutlined />,
  },
  {
    key: 'createImage',
    label: 'Create Image',
    icon: <FileImageOutlined />,
  },
  {
    key: 'deepSearch',
    label: 'Deep Search',
    icon: <FileSearchOutlined />,
  },
];

const activeKey = ref('write');
const { token } = theme.useToken();

const style = computed(() => ({
  width: '256px',
  background: token.value.colorBgContainer,
  borderRadius: `${token.value.borderRadius}px`,
}));

defineRender(() => (
  <Flex vertical gap="small" align="flex-start">
    <Conversations
      activeKey={activeKey.value}
      onActiveChange={(v) => {
        activeKey.value = v;
      }}
      items={items}
      style={style.value}
    />
    <Flex gap="small">
      <Button onClick={() => { activeKey.value = 'write'; }}>Active First</Button>
      <Button onClick={() => { activeKey.value = 'deepSearch'; }}>Active Last</Button>
    </Flex>
  </Flex>
));
</script>

Hide source

Grouped display

• 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

Grouped display

Use the groupable property to enable grouping. Once enabled, it defaults to grouping by the Conversation.group field.

<script setup lang="tsx">
defineOptions({ name: 'AXConversationsGroupV2' });

import type { ConversationsProps } from 'ant-design-x-vue';
import { Conversations } from 'ant-design-x-vue';
import { theme } from 'ant-design-vue';
import { computed } from 'vue';

const items: ConversationsProps['items'] = Array.from({ length: 6 }).map((_, index) => ({
  key: `item${index + 1}`,
  label:
    index === 0
      ? "This's Conversation Item 1, you can click me!"
      : `Conversation Item ${index + 1}`,
  group: index < 3 ? 'Today' : 'Yesterday',
}));

const { token } = theme.useToken();

const style = computed(() => ({
  width: '256px',
  background: token.value.colorBgContainer,
  borderRadius: `${token.value.borderRadius}px`,
}));

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

Hide source

Collapsible groups

• Today(3)
• Yesterday(3)

Collapsible groups

Configure the collapsible property to enable collapsibility for groups.

<script setup lang="tsx">
defineOptions({ name: 'AXConversationsGroupCollapsibleV2' });

import type { ConversationsProps } from 'ant-design-x-vue';
import { Conversations } from 'ant-design-x-vue';
import { theme } from 'ant-design-vue';
import { computed } from 'vue';

const items: ConversationsProps['items'] = Array.from({ length: 6 }).map((_, index) => ({
  key: `item${index + 1}`,
  label:
    index === 0
      ? "This's Conversation Item 1, you can click me!"
      : `Conversation Item ${index + 1}`,
  disabled: index === 3,
  group: index < 3 ? 'Today' : 'Yesterday',
}));

const groupable: ConversationsProps['groupable'] = {
  label: (group, { groupInfo }) => (
    <>
      {group}({groupInfo.data.length})
    </>
  ),
  collapsible: true,
};

const { token } = theme.useToken();

const style = computed(() => ({
  width: '256px',
  background: token.value.colorBgContainer,
  borderRadius: `${token.value.borderRadius}px`,
}));

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

Hide source

Controlled collapsible groups

• Today
  • Conversation Item 1
  • Conversation Item 4
  • Conversation Item 7
• Yesterday
• Historical chats

Controlled collapsible groups

Controlled collapsible groups.

<script setup lang="tsx">
defineOptions({ name: 'AXConversationsControlledCollapsibleV2' });

import { FieldTimeOutlined } from '@ant-design/icons-vue';
import type { ConversationsProps } from 'ant-design-x-vue';
import { Conversations } from 'ant-design-x-vue';
import { Flex, theme } from 'ant-design-vue';
import { computed, ref } from 'vue';

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

const expandedKeys = ref(['Yesterday']);
const { token } = theme.useToken();

const style = computed(() => ({
  width: '256px',
  background: token.value.colorBgContainer,
  borderRadius: `${token.value.borderRadius}px`,
}));

defineRender(() => {
  const groupable: ConversationsProps['groupable'] = {
    label: (group) => (
      <Flex gap="small">
        <FieldTimeOutlined />
        {group}
      </Flex>
    ),
    collapsible: (group) => group !== 'Today',
    expandedKeys: expandedKeys.value,
    onExpand: (keys) => { expandedKeys.value = keys; },
  };

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

Hide source

Conversation actions

Custom actions

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

Custom actions

Custom menu trigger.

<script setup lang="tsx">
defineOptions({ name: 'AXConversationsMenuTriggerV2' });

import {
  DeleteOutlined,
  EditOutlined,
  PlusSquareOutlined,
  ShareAltOutlined,
  StopOutlined,
} from '@ant-design/icons-vue';
import type { ConversationsProps } from 'ant-design-x-vue';
import { Conversations } from 'ant-design-x-vue';
import type { MenuProps } from 'ant-design-vue';
import { theme } from 'ant-design-vue';
import { computed } from 'vue';

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

const menuItems: MenuProps['items'] = [
  {
    label: 'Rename',
    key: 'Rename',
    icon: <EditOutlined />,
  },
  {
    label: 'Share',
    key: 'Share',
    icon: <ShareAltOutlined />,
  },
  {
    type: 'divider',
  },
  {
    label: 'Archive',
    key: 'Archive',
    icon: <StopOutlined />,
    disabled: true,
  },
  {
    label: 'Delete Chat',
    key: 'deleteChat',
    icon: <DeleteOutlined />,
    danger: true,
  },
];

const menuConfig: ConversationsProps['menu'] = (conversation) => ({
  trigger:
    conversation.key === 'item2' ? (
      <ShareAltOutlined
        onClick={(e: MouseEvent) => {
          e.stopPropagation();
          console.log(`Share ${conversation.key}`);
        }}
      />
    ) : (
      <PlusSquareOutlined
        onClick={(e: MouseEvent) => {
          e.stopPropagation();
        }}
      />
    ),
  items: conversation.key !== 'item2' ? menuItems : [],
  onClick: (itemInfo) => {
    console.log(`Click ${conversation.key}-${itemInfo.key}`);
    itemInfo.domEvent.stopPropagation();
  },
});

const { token } = theme.useToken();

const style = computed(() => ({
  width: '256px',
  background: token.value.colorBgContainer,
  borderRadius: `${token.value.borderRadius}px`,
}));

defineRender(() => (
  <Conversations defaultActiveKey="item1" menu={menuConfig} items={items} style={style.value} />
));
</script>

Hide source

New conversation

• Help Me Write
• AI Coding
• Create Image
• Deep Search
• Today
  • Conversation Item 1

New conversation

Use the creation property to configure the new conversation button.

<script setup lang="tsx">
defineOptions({ name: 'AXConversationsNewChatV2' });

import {
  CodeOutlined,
  FileImageOutlined,
  FileSearchOutlined,
} from '@ant-design/icons-vue';
import type { ConversationsProps } from 'ant-design-x-vue';
import { Conversations } from 'ant-design-x-vue';
import { theme } from 'ant-design-vue';
import { ref, computed } from 'vue';

const agentItems: ConversationsProps['items'] = [
  {
    key: 'write',
    label: 'Help Me Write',
    icon: <CodeOutlined />,
  },
  {
    key: 'coding',
    label: 'AI Coding',
    icon: <CodeOutlined />,
  },
  {
    key: 'createImage',
    label: 'Create Image',
    icon: <FileImageOutlined />,
  },
  {
    key: 'deepSearch',
    label: 'Deep Search',
    icon: <FileSearchOutlined />,
  },
  {
    type: 'divider',
  },
];

const historicalItems = ref<ConversationsProps['items']>([
  {
    key: 'item1',
    label: 'Conversation Item 1',
    group: 'Today',
  },
]);

const items = computed(() => [...agentItems!, ...historicalItems.value!]);

const { token } = theme.useToken();

const style = computed(() => ({
  width: '256px',
  background: token.value.colorBgContainer,
  borderRadius: `${token.value.borderRadius}px`,
}));

const newChatClick = () => {
  historicalItems.value = [
    ...historicalItems.value!,
    {
      key: `item${historicalItems.value!.length + 1}`,
      label: `Conversation Item ${historicalItems.value!.length + 1}`,
      group: 'Today',
    },
  ];
};

defineRender(() => (
  <Conversations
    creation={{ onClick: newChatClick }}
    items={items.value}
    defaultActiveKey="write"
    style={style.value}
    groupable
  />
));
</script>

Hide source

Custom new conversation

• Help Me Write
• AI Coding
• Create Image
• Deep Search
• Today
  • Conversation Item 1

Custom new conversation

Customize the new-conversation icon, label, and alignment.

<script setup lang="tsx">
defineOptions({ name: 'AXConversationsCustomNewChatV2' });

import {
  AppstoreAddOutlined,
  CodeOutlined,
  FileImageOutlined,
  FileSearchOutlined,
} from '@ant-design/icons-vue';
import type { ConversationsProps } from 'ant-design-x-vue';
import { Conversations } from 'ant-design-x-vue';
import { theme } from 'ant-design-vue';
import { ref, computed } from 'vue';

const agentItems: ConversationsProps['items'] = [
  {
    key: 'write',
    label: 'Help Me Write',
    icon: <CodeOutlined />,
  },
  {
    key: 'coding',
    label: 'AI Coding',
    icon: <CodeOutlined />,
  },
  {
    key: 'createImage',
    label: 'Create Image',
    icon: <FileImageOutlined />,
  },
  {
    key: 'deepSearch',
    label: 'Deep Search',
    icon: <FileSearchOutlined />,
  },
  {
    type: 'divider',
  },
];

const historicalItems = ref<ConversationsProps['items']>([
  {
    key: 'item1',
    label: 'Conversation Item 1',
    group: 'Today',
  },
]);

const items = computed(() => [...agentItems!, ...historicalItems.value!]);

const { token } = theme.useToken();

const style = computed(() => ({
  width: '256px',
  background: token.value.colorBgContainer,
  borderRadius: `${token.value.borderRadius}px`,
}));

const newChatClick = () => {
  historicalItems.value = [
    ...historicalItems.value!,
    {
      key: `item${historicalItems.value!.length + 1}`,
      label: `Conversation Item ${historicalItems.value!.length + 1}`,
      group: 'Today',
    },
  ];
};

defineRender(() => (
  <Conversations
    creation={{
      label: 'Create a new chat',
      align: 'start',
      icon: <AppstoreAddOutlined />,
      onClick: newChatClick,
    }}
    items={items.value}
    defaultActiveKey="write"
    style={style.value}
    groupable
  />
));
</script>

Hide source

Keyboard shortcuts

Switch sessions with Alt/⌥ + number, and create a chat with Win/⌘ + K.

• Help Me Write
• AI Coding
• Create Image
• Deep Search
• Today
  • Conversation Item 1

Keyboard shortcuts

Use shortcutKeys to switch conversations or trigger the creation of a new conversation. You can also configure global shortcuts in XProvider under conversations.shortcutKeys.

<script setup lang="tsx">
defineOptions({ name: 'AXConversationsShortcutKeysV2' });

import {
  CodeOutlined,
  FileImageOutlined,
  FileSearchOutlined,
} from '@ant-design/icons-vue';
import type { ConversationsProps } from 'ant-design-x-vue';
import { Conversations } from 'ant-design-x-vue';
import { Tag, theme, Typography } from 'ant-design-vue';
import { computed, ref } from 'vue';

// KeyboardEvent.keyCode. K is 75, matching @ant-design/x Conversations demos.
const KeyK = 75;

const agentItems: ConversationsProps['items'] = [
  { key: 'write', label: 'Help Me Write', icon: <CodeOutlined /> },
  { key: 'coding', label: 'AI Coding', icon: <CodeOutlined /> },
  { key: 'createImage', label: 'Create Image', icon: <FileImageOutlined /> },
  { key: 'deepSearch', label: 'Deep Search', icon: <FileSearchOutlined /> },
];

const historicalItems = ref<ConversationsProps['items']>([
  { key: 'item1', label: 'Conversation Item 1', group: 'Today' },
]);

const items = computed(() => [...agentItems, ...(historicalItems.value || [])]);

const { token } = theme.useToken();
const style = computed(() => ({
  width: '256px',
  background: token.value.colorBgContainer,
  borderRadius: `${token.value.borderRadius}px`,
}));

const newChatClick = () => {
  const next = (historicalItems.value?.length || 0) + 1;
  historicalItems.value = [
    ...(historicalItems.value || []),
    {
      key: `item${next}`,
      label: `Conversation Item ${next}`,
      group: 'Today',
    },
  ];
};

defineRender(() => (
  <>
    <Typography.Paragraph>
      Switch sessions with <Tag>Alt/⌥</Tag> + <Tag>number</Tag>, and create a
      chat with <Tag>Win/⌘</Tag> + <Tag>K</Tag>.
    </Typography.Paragraph>
    <Conversations
      creation={{ onClick: newChatClick }}
      items={items.value}
      defaultActiveKey="write"
      style={style.value}
      groupable
      shortcutKeys={{
        creation: ['Meta', KeyK],
        items: ['Alt', 'number'],
      }}
    />
  </>
));
</script>

Hide source

Infinite scroll

Mobile behavior: useMobile is used internally to detect devices. The mobile conversation action menu icon will always be displayed (plus ant-conversations-menu-icon-mobile) and no longer relies on hover.

API

ConversationsProps

Properties	Description	Type	Default Value	Version
activeKey	currently selected value	string	-	-
defaultActiveKey	Default selected value	string	-	-
items	Session list data source	ItemType[]	-	-
onActiveChange	Selected change callback	(value: string, item?: ItemType) => void	-	-
menu	Conversation operation menu	MenuProps | ((value: ConversationItemType) => MenuProps)	-	-
groupable	Whether to support grouping, after enabled, the default grouping is based on the Conversation.group field	boolean | GroupableProps	-	-
creation	Configuration of new dialog button	CreationProps	-	v2
shortcutKeys	Shortcut keys. creation triggers new creation, items selects sessions in order. Modifier keys are 'Ctrl' | 'Alt' | 'Meta' | 'Shift' and the last key is KeyboardEvent.keyCode or 'number' (numeric keys 1–9)	{ creation?: ShortcutKeys; items?: ShortcutKeys | ShortcutKeys[] }	-	v2
styles	Semantic styles	Record<'root' | 'creation' | 'group' | 'item', CSSProperties>	-	-
classNames	Semantic class namesName	Record<'root' | 'creation' | 'group' | 'item', string>	-	-
rootClassName	Root class name	string	-	-

ItemType

ItemType = ConversationItemType | DividerItemType

ConversationItemType (Conversation)

Properties	Description	Type	Default Value	Version
key	unique identifier	string	-	-
label	session name	VNode | string	-	-
group	Conversation grouping type, linked with ConversationsProps.groupable	string	-	-
icon	session icon	VNode	-	-
disabled	Whether disabled	boolean	-	-

DividerItemType

Properties	Description	Type	Default Value	Version
type	Fixed value 'divider'	'divider'	-	v2
key	unique identifier	string	-	v2
dashed	Whether to dash	boolean	-	v2

GroupableProps

Properties	Description	Type	Default Value	Version
label	Custom group label rendering	VNode | string | ((group: string, info: { groupInfo }) => VNode)	-	-
collapsible	Whether it is foldable	boolean | ((group: string) => boolean)	-	v2
defaultExpandedKeys	Initialize expanded groups	string[]	-	v2
expandedKeys	Currently expanded group (controlled)	string[]	-	v2
onExpand	Expanded group change callback	(expandedKeys: string[]) => void	-	v2

CreationProps

Properties	Description	Type	Default Value	Version
label	button copy. Function parameters include shortcutKeyInfo and components.CreationLabel	VNode | string | ((info) => VNode)	Language pack, English New chat	v2
icon	button icon	VNode | (() => VNode)	PlusOutlined	v2
align	alignment	'start' | 'center' | 'end'	'center'	v2
disabled	Whether disabled	boolean	false	v2
onClick	Click callback	(event?: MouseEvent) => void	-	v2

MenuProps

Inherit antdv MenuProps properties.

Properties	Description	Type	Default Value	Version
trigger	Custom menu trigger	VNode | ((conversation: ConversationItemType, info: { originNode: VNode }) => VNode)	-	-
getPopupContainer	Menu rendering parent node	(triggerNode: HTMLElement) => HTMLElement	-	-

Semantic DOM

• Help Me Write
• AI Coding
• Create Image
• Deep Search
• Today
  • Conversation Item 1
  • Conversation Item 2

• root

  管理对话根节点

• item

  管理对话子节点

• creation

  创建对话

• group

  管理对话分组

Design Token

Token	Description	Type	Default value
creationBgColor	New session button background color	string	rgba(primaryColor, 0.15)
creationBorderColor	New session button border color	string	rgba(primaryColor, 0.22)
creationHoverColor	New session button hover background color	string	rgba(primaryColor, 0.25)
shortcutKeyTextColor	Shortcut key label font color	string	rgba(primaryColor, 0.65)

Contributors

Contributors

Loading contributors…