Bubble 对话气泡

用于聊天的气泡组件。

何时使用

常用于聊天的时候。

代码演示

基本

基础用法。

hello world！

<script setup lang="ts">
import { Bubble } from '@artmate/chat'
</script>

<template>
  <Bubble content="hello world！" />
</template>

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

查看源代码

支持位置和头像

通过 avatar 设置自定义头像，通过 placement 设置位置，提供了 start、end 两个选项。

你好！

你也好！

<script setup lang="ts">
import { Bubble } from '@artmate/chat'
</script>

<template>
  <Bubble
    content="你好！"
    placement="start"
    avatar="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
  />
  <Bubble
    content="你也好！"
    placement="end"
    avatar="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
  />
</template>

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

查看源代码

头和尾

通过 header 和 footer 属性设置气泡的头部和底部。

我是头部

你好！

我是尾部

<script setup lang="ts">
import { Bubble } from '@artmate/chat'
</script>

<template>
  <Bubble
    content="你好！"
    avatar="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
  >
    <template #header>我是头部</template>
    <template #footer>我是尾部</template>
  </Bubble>
</template>

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

查看源代码

加载中

通过 loading 属性控制加载状态。

loding state：

<script setup lang="ts">
import { Bubble } from '@artmate/chat'
import { ElSwitch } from 'element-plus'
import { ref } from 'vue'

const loading = ref(true)
</script>

<template>
  <Bubble
    content="hello world！"
    avatar="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
    :loading="loading"
  />
  loding state：
  <ElSwitch v-model="loading" />
</template>

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

查看源代码

打字效果

通过设置 typing 属性，开启打字效果。更新 content 如果是之前的子集，则会继续输出，否则会重新输出。

h

h👋

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

const repeat = ref(1)
const text = ref('hello world！')
</script>

<template>
  <ElSpace direction="vertical" alignment="align-start" style="width: 100%">
    <div class="btns">
      <ElButton style="float: right" type="primary" @click="repeat = repeat < 5 ? repeat + 1 : 1">
        Repeat {{ repeat }} Times
      </ElButton>
    </div>
    <Bubble
      :content="text.repeat(repeat)"
      avatar="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
      :typing="{ step: 2, interval: 50 }"
    />
    <Bubble
      :content="text.repeat(repeat)"
      avatar="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
      :typing="{ step: 2, interval: 50, suffix: '👋' }"
    />
  </ElSpace>
</template>

<style lang="scss" scoped>
.btns {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
</style>

查看源代码

自定义渲染内容

通过传入 content 插槽自定义渲染内容。

ArtChat

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

interface ContentType {
  imageUrl: string
  text: string
  actionBtnText: string
}

const BubbleChat = Bubble<ContentType>

const contentObj = ref<ContentType>({
  imageUrl: 'https://mtyui.asia/img/vite1.d070241e.png',
  text: 'ArtChat',
  actionBtnText: 'Click me',
})
</script>

<template>
  <BubbleChat :content="contentObj">
    <template #content="{ content }">
      <div style="display: flex; align-items: center; gap: 10px">
        <ElImage
          :src="content.imageUrl"
          style="width: 55px; height: 50px"
          :preview-src-list="[content.imageUrl]"
        />
        <span style="font-size: 18px; font-weight: bold">{{ content.text }}</span>
      </div>
    </template>
    <template #footer="{ content }">
      <ElButton text @click="contentObj.actionBtnText = '🎉 Happy ArtChat !'">
        {{ content.actionBtnText }}
      </ElButton>
    </template>
  </BubbleChat>
</template>

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

查看源代码

自定义渲染

配合 markdown-it 实现自定义渲染内容。

<script setup lang="ts">
import { Bubble } from '@artmate/chat'
import markdownit from 'markdown-it'

const md = markdownit({ html: true })
const text = `
> Render as markdown content to show rich text!

Link: [Ant Design X](https://x.ant.design)
`.trim()

const msgRender = (text: string) => md.render(text)
</script>

<template>
  <Bubble
    :content="text"
    typing
    avatar="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
    :message-render="msgRender"
  />
</template>

查看源代码

变体

通过 variant 属性设置气泡的样式变体。

variant: filled

variant: outlined

variant: shadow

variant: borderless

<script setup lang="ts">
import { Bubble } from '@artmate/chat'
import { ElSpace } from 'element-plus'
</script>

<template>
  <ElSpace direction="vertical" alignment="align-start">
    <Bubble
      variant="filled"
      avatar="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
      content="variant: filled"
    />
    <Bubble
      variant="outlined"
      avatar="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
      content="variant: outlined"
    />
    <Bubble
      variant="shadow"
      avatar="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
      content="variant: shadow"
    />
    <Bubble
      variant="borderless"
      avatar="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
      content="variant: borderless"
    />
  </ElSpace>
</template>

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

查看源代码

形状

通过 shape 属性设置气泡的形状。

shape: default

This is a long text message to show the multiline view of the bubble component. This is a long text message to show the multiline view of the bubble component. This is a long text message to show the multiline view of the bubble component.

shape: round

This is a long text message to show the multiline view of the bubble component. This is a long text message to show the multiline view of the bubble component. This is a long text message to show the multiline view of the bubble component.

shape: corner

This is a long text message to show the multiline view of the bubble component. This is a long text message to show the multiline view of the bubble component. This is a long text message to show the multiline view of the bubble component.

<script setup lang="ts">
import type { BubbleDataType } from '@artmate/chat'
import { Bubble } from '@artmate/chat'
import { ElSpace } from 'element-plus'

const sharedLongTextProps: BubbleDataType = {
  placement: 'end',
  content:
    'This is a long text message to show the multiline view of the bubble component. '.repeat(3),
  styles: { content: { maxWidth: 500 } },
}
</script>

<template>
  <ElSpace direction="vertical" alignment="align-start">
    <Bubble content="shape: default" />
    <Bubble v-bind="sharedLongTextProps" />
    <Bubble shape="round" content="shape: round" />
    <Bubble v-bind="sharedLongTextProps" shape="round" />
    <Bubble shape="corner" content="shape: corner" />
    <Bubble v-bind="sharedLongTextProps" shape="corner" />
  </ElSpace>
</template>

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

查看源代码

气泡列表

预设样式的气泡列表，支持自动滚动。使用 roles 设置气泡默认属性。

Mock user content.

Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content.

Mock user content.

Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content.

Mock user content.

Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content.

Mock user content.

Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content.

Mock user content.

M

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

const BubbleListRef = ref<InstanceType<typeof BubbleList>>()

const rolesAsObject: BubbleListProps['roles'] = {
  ai: {
    placement: 'start',
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    typing: { step: 5, interval: 20 },
  },
  user: {
    placement: 'end',
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  },
}

const count = ref<number>(10)

// const useRolesAsFunction = ref(false);

const items = computed<BubbleListProps['items']>(() =>
  Array.from({ length: count.value }).map((_, i) => {
    const isAI = !!(i % 2)
    const content = isAI ? 'Mock AI content. '.repeat(20) : 'Mock user content.'

    return {
      key: i,
      role: isAI ? 'ai' : 'user',
      // 保证只有最新的一条回话会打印输出
      typing: isAI && i === count.value - 1 && { step: 5, interval: 20 },
      content,
    }
  })
)

function scrollToFirst() {
  BubbleListRef.value?.scrollTo({
    key: 0,
    block: 'nearest',
  })
}
</script>

<template>
  <ElSpace direction="vertical" alignment="align-start">
    <div class="btns">
      <ElButton type="primary" @click="count++">Add Bubble</ElButton>
      <ElButton type="primary" @click="scrollToFirst">Scroll To First</ElButton>
    </div>
    <BubbleList
      ref="BubbleListRef"
      :items="items"
      :roles="rolesAsObject"
      auto-scroll
      :style="{ maxHeight: '300px' }"
    />
  </ElSpace>
</template>

<style lang="scss" scoped>
.btns {
  display: flex;
  justify-content: flex-end;
  padding: 10px 0;
}
</style>

查看源代码

语义化自定义

示例通过语义化以及加载定制，来调整气泡效果。

M

Mock user content.

Custom loading...

<script setup lang="ts">
import type { BubbleListProps } from '@artmate/chat'
import { BubbleList } from '@artmate/chat'
import { Loading } from '@element-plus/icons-vue'
import { ElIcon } from 'element-plus'
import { computed, ref } from 'vue'

const BubbleListRef = ref<InstanceType<typeof BubbleList>>()

const rolesAsObject: BubbleListProps['roles'] = {
  ai: {
    placement: 'start',
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    typing: { step: 5, interval: 20 },
  },
  user: {
    placement: 'end',
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  },
}

// const useRolesAsFunction = ref(false);

const items = computed(() => [
  {
    key: 'welcome',
    role: 'ai',
    content: 'Mock welcome content. '.repeat(10),
  },
  {
    key: 'ask',
    role: 'user',
    content: 'Mock user content.',
  },
  {
    key: 'ai',
    role: 'ai',
    loading: true,
  },
])
</script>

<template>
  <BubbleList
    ref="BubbleListRef"
    :items="items"
    :roles="rolesAsObject"
    auto-scroll
    :style="{ maxHeight: '300px' }"
  >
    <template #loading="{ info }">
      <div v-if="info.role === 'ai'">
        Custom loading...
        <ElIcon>
          <Loading />
        </ElIcon>
      </div>
    </template>
  </BubbleList>
</template>

<style lang="scss" scoped>
.btns {
  display: flex;
  justify-content: flex-end;
  padding: 10px 0;
}
</style>

查看源代码

自定义列表内容

自定义气泡列表内容，这对于个性化定制场景非常有用。

Normal message

ArtChat

Vue Node

How to rest effectively after long hours of work?

What are the secrets to maintaining a positive mindset?

How to stay calm under immense pressure?

excel-file

.xlsx

Checking the data

word-file

.docx

23%

<script setup lang="ts">
import type { BubbleListProps, PromptProps } from '@artmate/chat'
import { BubbleList, FileList, Prompts } from '@artmate/chat'
import { ElButton, ElImage } from 'element-plus'
import VueNode from './vue-node.vue'
import { shallowRef, h } from 'vue'

const promptItems: PromptProps[] = [
  {
    key: '6',
    description: 'How to rest effectively after long hours of work?',
  },
  {
    key: '7',
    description: 'What are the secrets to maintaining a positive mindset?',
  },
  {
    key: '8',
    description: 'How to stay calm under immense pressure?',
  },
]

const fileItems: any = [
  {
    uid: '1',
    name: 'excel-file.xlsx',
    size: 111111,
    description: 'Checking the data',
  },
  {
    uid: '2',
    name: 'word-file.docx',
    size: 222222,
    status: 'uploading',
    percent: 23,
  },
]

const items: BubbleListProps['items'] = [
  // Normal
  {
    key: 0,
    role: 'ai',
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    content: 'Normal message',
  },

  // Custom content
  {
    key: 1,
    role: 'custom',
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    content: {
      imageUrl: 'https://mtyui.asia/img/vite1.d070241e.png',
      text: 'ArtChat',
      actionNode: 'Click Me',
    },
  },

  // VueNode
  {
    key: 2,
    role: 'ai',
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    content: shallowRef(VueNode),
    messageRender(content) {
      // 使用 h 函数渲染组件内容
      return h(content)
    },
  },

  // Role: suggestion
  {
    key: 3,
    role: 'suggestion',
    variant: 'borderless',
    avatar: '123',
    prompts: promptItems,
  },

  // Role: file
  {
    key: 4,
    role: 'file',
    variant: 'borderless',
    avatar: '123',
    fileList: fileItems,
  },
]
</script>

<template>
  <BubbleList :items="items">
    <template #avatar="{ info }">
      <div
        v-if="['file', 'suggestion'].includes(info.role as string)"
        style="margin-left: 32px; visibility: hidden"
      />
    </template>
    <template #content="{ info }">
      <FileList
        v-if="info.role === 'file'"
        :items="info.fileList"
        :disabled="true"
        :list-style="{
          flexDirection: 'column',
          padding: '6px 5px 0px 0px',
        }"
      />
      <Prompts v-else-if="info.role === 'suggestion'" :items="info.prompts" vertical />
      <template v-else-if="info.role === 'custom'">
        <div style="display: flex; align-items: center; gap: 10px">
          <ElImage
            :src="info.content.imageUrl"
            style="width: 55px; height: 50px"
            :preview-src-list="[info.content.imageUrl]"
          />
          <h1>{{ info.content.text }}</h1>
        </div>
      </template>
    </template>
    <template #footer="{ info }">
      <ElButton v-if="info.role === 'custom'" text>{{ info.content.actionNode }}</ElButton>
    </template>
  </BubbleList>
</template>

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

查看源代码

选择消息

使用 leading 插槽配合 ElCheckbox 进行消息选择。

Mock user content.

Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content.

Mock user content.

Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content.

Mock user content.

Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content.

Mock user content.

Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content.

Mock user content.

M

已选中：

<script setup lang="ts">
import type { BubbleListProps } from '@artmate/chat'
import { BubbleList } from '@artmate/chat'
import { ElCheckbox, ElSpace, ElTag } from 'element-plus'
import { computed, ref } from 'vue'

const BubbleListRef = ref<InstanceType<typeof BubbleList>>()

const rolesAsObject: BubbleListProps['roles'] = {
  ai: {
    placement: 'start',
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    typing: { step: 5, interval: 20 },
  },
  user: {
    placement: 'end',
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  },
}

const count = ref<number>(10)

// const useRolesAsFunction = ref(false);

const items = computed<BubbleListProps['items']>(() =>
  Array.from({ length: count.value }).map((_, i) => {
    const isAI = !!(i % 2)
    const content = isAI ? 'Mock AI content. '.repeat(20) : 'Mock user content.'

    return {
      key: `${i}`,
      role: isAI ? 'ai' : 'user',
      // 保证只有最新的一条回话会打印输出
      typing: isAI && i === count.value - 1 && { step: 5, interval: 20 },
      content,
    }
  })
)

const selectList = ref<Array<string | number | undefined>>([])

const selectCheckbox = (key: string | number | undefined) => {
  console.log(key)
  if (selectList.value.includes(key)) {
    selectList.value = selectList.value.filter((item) => item !== key)
  } else {
    selectList.value.push(key)
  }
}
</script>

<template>
  <ElSpace direction="vertical" alignment="align-start">
    <BubbleList
      ref="BubbleListRef"
      :items="items"
      :roles="rolesAsObject"
      auto-scroll
      :style="{ maxHeight: '300px' }"
    >
      <template #leading="{ info }">
        <ElCheckbox :checked="selectList.includes(info.key)" @click="selectCheckbox(info.key)" />
      </template>
    </BubbleList>
    <div style="display: flex; flex-wrap: wrap; gap: 4px">
      已选中：<ElTag v-for="key in selectList" :key="key">
        key为 {{ key }} 的消息
      </ElTag>
    </div>
  </ElSpace>
</template>

<style lang="scss" scoped>
.btns {
  display: flex;
  justify-content: flex-end;
  padding: 10px 0;
}
</style>

查看源代码

Bubble

属性	说明	类型	默认值	版本
avatar	展示头像	VNode | String	-
classNames	语义化结构 class	Record<"avatar" | "content" | "footer" | "header", string>	-
content	聊天内容	string	-
loading	聊天内容加载状态	boolean	-
placement	信息位置	start | end	start
shape	气泡形状	round | corner	-
styles	语义化结构 style	[Record<"avatar" | "content" | "footer" | "header", CSSProperties>]	-
typing	设置聊天内容打字动画	boolean | { step?: number, interval?: number }	false
variant	气泡样式变体	filled | borderless | outlined | shadow	filled
loadingRender	自定义渲染加载态内容	() => VNode	-
messageRender	自定义渲染内容	(content?: string) => VNode	-
onTypingComplete	打字效果完成时的回调，如果没有设置 typing 将在渲染时立刻触发	() => void	-
onUpdate	内容更新时会触发	() => void	-	-

Bubble Slots

插槽名	说明	参数
avatar	头像	info: BubbleDataType | index: number
header	头部面板	info: BubbleDataType | index: number
footer	底部内容	info: BubbleDataType | index: number
loading	loading 占位	info: BubbleDataType | index: number
content	自定义内容插槽	info: BubbleDataType | index: number
leading	自定义消息列表每条消息的前缀，如选择框	info: BubbleDataType | index: number

Bubble Exposed

该组件为泛型组件，获取组件实例类型需使用 vue-component-type-helpers

属性名	说明	类型
nativeElement	获取原生节点	HTMLElement

Bubble.List

属性	说明	类型	默认值	版本
autoScroll	当内容更新时，自动滚动到最新位置。如果用户滚动，则会暂停自动滚动。	boolean	true
items	气泡数据列表	(BubbleProps & { key?: string | number, role?: string })[]	-
roles	设置气泡默认属性，items 中的 role 会进行自动对应	Record<string, BubbleProps> | (bubble) => BubbleProps	-