Conversations 管理对话

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

何时使用

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

代码演示

基本

基础用法。

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

<script setup lang="ts">
import type { ConversationsProps } from '@artmate/chat'
import { Conversations } from '@artmate/chat'
import { ref } 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 activeKey = ref('item1')
</script>

<template>
  <Conversations v-model:active-key="activeKey" :items="items" style="width: 300px" />
</template>

<style lang="scss" scoped></style>

查看源代码

会话操作

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

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

<script setup lang="ts">
import type { ConversationsProps } from '@artmate/chat'
import { Conversations } from '@artmate/chat'
import { AddLocation, Aim, AlarmClock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { ref } 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 menuConfig: ConversationsProps['menu'] = () => ({
  items: [
    {
      label: 'Operation 1',
      icon: AddLocation,
      command: 'command1',
    },
    {
      label: 'Operation 2',
      icon: Aim,
      command: 'command2',
      disabled: true,
    },
    {
      label: 'Operation 3',
      icon: AlarmClock,
      command: 'command3',
    },
  ],
  onClick: (e) => {
    ElMessage.info(`You clicked ${e.label} - ${e.key}`)
  },
})

const activeKey = ref('item1')
</script>

<template>
  <Conversations
    v-model:active-key="activeKey"
    :items="items"
    :menu="menuConfig"
    style="width: 300px"
  />
</template>

<style lang="scss" scoped></style>

查看源代码

受控模式

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

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

<script setup lang="ts">
import type { ConversationsProps } from '@artmate/chat'
import { Conversations } from '@artmate/chat'
import { ElButton, ElSpace } from 'element-plus'
import { ref } from 'vue'

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

<template>
  <Conversations v-model:active-key="activeKey" :items="items" style="width: 300px" />
  <ElSpace>
    <ElButton type="primary" @click="updateActiveKey('item1')">Active First</ElButton>
    <ElButton type="primary" @click="updateActiveKey('item3')">Active Last</ElButton>
  </ElSpace>
</template>

<style lang="scss" scoped></style>

查看源代码

分组展示

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

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

<script setup lang="ts">
import type { ConversationsProps } from '@artmate/chat'
import { Conversations } from '@artmate/chat'
import { ref } from 'vue'

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 activeKey = ref('item1')
</script>

<template>
  <Conversations v-model:active-key="activeKey" :items="items" groupable style="width: 300px" />
</template>

<style lang="scss" scoped></style>

查看源代码

分组排序

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

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

<script setup lang="ts">
import type { ConversationsProps } from '@artmate/chat'
import { Conversations } from '@artmate/chat'
import { Service } from '@element-plus/icons-vue'
import { ElIcon } from 'element-plus'
import { ref } from 'vue'

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 groupable = {
  sort(a: string, b: string) {
    if (a === b) return 0

    return a === 'Today' ? -1 : 1
  },
}

const activeKey = ref('item1')
</script>

<template>
  <Conversations
    v-model:active-key="activeKey"
    :groupable="groupable"
    :items="items"
    style="width: 300px"
  >
    <template #title="{ info }">
      <div>
        <ElIcon>
          <Service />
        </ElIcon>
        {{ info.name }}
      </div>
    </template>
  </Conversations>
</template>

<style lang="scss" scoped></style>

查看源代码

API

ConversationsProps

属性	说明	类型	默认值	版本
v-model: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>	-	-

Bubble Slots

插槽名	说明	类型
title	排序后自定义头部内容	-
item	自定义label区域内容	-
icon	自定义icon区域内容	-
menu-icon	自定义下拉菜单icon区域内容	-

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