Bubble 对话气泡 ​

<template>
  <el-space :size="32">
    <el-bubble content="你好, 徐尹啊 !" />

    <el-bubble> 你好，天选打工人 </el-bubble>

    <el-bubble>
      <template #content> 你好，我不好 </template>
    </el-bubble>
  </el-space>
</template>

<template>
  <el-flex vertical>
    <el-bubble shape="arrow">
      <template #avatar>
        <el-avatar style="background: rgb(191 127 78)"> 尹 </el-avatar>
      </template>
      <template #default> 你好, 徐尹啊 ! </template>
    </el-bubble>

    <el-bubble
      shape="arrow"
      placement="end"
      :content-style="{ background: '#96ec69' }"
    >
      <template #avatar>
        <el-avatar style="background: rgb(9 200 31)"> 徐 </el-avatar>
      </template>
      <template #default> 你好，天选打工人 </template>
    </el-bubble>

    <el-bubble shape="arrow">
      <template #avatar>
        <el-avatar style="background: rgb(191 127 78)"> 尹 </el-avatar>
      </template>
      <template #default> 难过(ಥ﹏ಥ) </template>
    </el-bubble>
  </el-flex>
</template>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <el-bubble
      placement="start"
      content="Good morning, how are you?"
      :avatar="{ style: fooAvatar }"
    />
    <el-bubble
      placement="start"
      content="What a beautiful day!"
      :avatar="{ style: hideAvatar }"
    />
    <el-bubble
      placement="end"
      content="Hi, good morning, I'm fine!"
      :avatar="{ style: barAvatar }"
    />
    <el-bubble
      placement="end"
      content="Thank you!"
      :avatar="{ style: hideAvatar }"
    />
    <el-bubble content="Use avatar slot">
      <template #avatar>
        <el-avatar :icon="UserFilled" :style="fooAvatar" />
      </template>
    </el-bubble>
  </div>
</template>

<script setup lang="ts">
import { UserFilled } from '@element-plus/icons-vue'
import type { CSSProperties } from 'vue'

const fooAvatar: CSSProperties = {
  color: '#f56a00',
  backgroundColor: '#fde3cf',
}

const barAvatar: CSSProperties = {
  color: '#fff',
  backgroundColor: '#87d068',
}

const hideAvatar: CSSProperties = {
  visibility: 'hidden',
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <el-bubble avatar :content="content" header="字符串渲染" footer="footer" />

    <el-bubble avatar placement="end" :content="content">
      <template #header> 模版渲染 </template>
      <template #footer>
        <el-space>
          <el-icon><Refresh /></el-icon>
          <el-icon><ChatSquare /></el-icon>
        </el-space>
      </template>
    </el-bubble>

    <el-bubble
      avatar
      placement="start"
      :content="content"
      header="tsx或者render渲染"
      :footer="footer"
    />
  </div>
</template>

<script lang="tsx" setup>
import { ref } from 'vue'
import { ElIcon, ElSpace } from 'element-plus'
import { ChatSquare, Loading, Refresh } from '@element-plus/icons-vue'

const content = ref('hello world !')

const footer = (
  <ElSpace>
    <ElIcon class="is-loading">
      <Loading />
    </ElIcon>
    VNode 渲染
  </ElSpace>
)
</script>

<template>
  <el-bubble avatar :content="content" :loading="loading" />

  <p style="margin-top: 8px">
    <span>Loading state: </span>
    <el-switch v-model="loading" />
  </p>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const content = ref('hello world !')
const loading = ref(true)
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <el-bubble
      avatar
      placement="start"
      :content="text.repeat(repeat)"
      :typing="{ step: 2, interval: 50 }"
      :content-style="{ 'max-width': '60%' }"
    />
    <el-bubble
      avatar
      placement="end"
      :content="text.repeat(repeat)"
      :typing="{ step: 2, interval: 50, suffix: '💗' }"
      :content-style="{ 'max-width': '60%' }"
    />
    <el-button @click="() => (repeat = repeat < 10 ? repeat + 1 : 1)">
      Repeat {{ repeat }} Times
    </el-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const text = ref('ElementPlusX love you! ')
const repeat = ref(1)
</script>

<template>
  <el-bubble
    :key="count"
    class="bubble-box"
    :content="content"
    :message-render="renderMarkdown"
    :typing="{ step: 5, interval: 60 }"
  />

  <el-button style="margin-top: 12px" @click="count++">ReRender</el-button>
</template>

<script lang="ts" setup>
import { h, ref } from 'vue'
import markdownit from 'markdown-it'

const count = ref(1)

const content = ref(
  `
  > Render as markdown content to show rich text!

  Link: [ElementPlus X](https://sorrowx.github.io/epx/zh-CN/component/overview.html)

  ![可爱图片](https://realbot-oss.oss-accelerate.aliyuncs.com/scrm/2025/2025-05-20/16910ba6-0708-48d2-9693-27ea40e2cd30/1.jpg)

  <video src="https://realbot-oss.oss-accelerate.aliyuncs.com/scrm/2025/2025-05-21/659fa31d-dc87-4882-8be5-1fba8fb7e6ff/flower.mp4" controls width="320"></video>
`.trim()
)

const md = markdownit({ html: true, breaks: true })

const renderMarkdown = (content) => h('div', { innerHTML: md.render(content) })
</script>

<style lang="scss">
.bubble-box {
  img {
    max-width: 200px;
  }
}
</style>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <el-bubble
      :avatar="{ icon: UserFilled }"
      variant="filled"
      content="variant: filled"
    />
    <el-bubble
      :avatar="{ icon: UserFilled }"
      variant="outlined"
      content="variant: outlined"
    />
    <el-bubble
      :avatar="{ icon: UserFilled }"
      variant="shadow"
      content="variant: shadow"
    />
    <el-bubble :avatar="{ icon: UserFilled }" variant="borderless">
      <template #content>
        <span>variant: borderless</span>
        <p>content slot</p>
      </template>
    </el-bubble>
  </div>
</template>

<script lang="ts" setup>
import { UserFilled } from '@element-plus/icons-vue'
</script>

<template>
  <div
    style="display: flex; flex-direction: column; gap: 12px; padding: 0 12px"
  >
    <el-bubble avatar content="shape: default" />
    <el-bubble avatar v-bind="sharedLongTextProps" />
    <el-bubble avatar content="shape: round" shape="round" />
    <el-bubble avatar v-bind="sharedLongTextProps" shape="round" />
    <el-bubble avatar content="shape: corner" shape="corner" />
    <el-bubble avatar v-bind="sharedLongTextProps" shape="corner" />
    <el-bubble avatar content="shape: arrow" shape="arrow" />
    <el-bubble avatar v-bind="sharedLongTextProps" shape="arrow" />
  </div>
</template>

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

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <div>
      <el-button @click="add">Add Bubble</el-button>
      <el-button @click="scrollTo">Scroll To First</el-button>
    </div>
    <el-bubble-list
      ref="listRef"
      style="max-height: 300px"
      :roles="roles"
      :items="items"
      :on-last-bubble-typing-complete="handleLastBubbleTypingComplete"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { ElBubbleList } from 'element-plus-x'
import { UserFilled } from '@element-plus/icons-vue'
import type { BubbleListProps, BubbleListRef } from 'element-plus-x'

const roles: BubbleListProps['roles'] = {
  ai: {
    placement: 'start',
    avatar: { icon: UserFilled, style: { background: '#fde3cf' } },
    contentStyle: {
      maxWidth: '600px',
    },
  },
  user: {
    placement: 'end',
    avatar: { icon: UserFilled, style: { background: '#87d068' } },
  },
}

const count = ref<number>(3)

const add = () => (count.value += 1)

const scrollTo = () => listRef.value?.scrollTo({ key: 0, block: 'nearest' })

const handleLastBubbleTypingComplete = (key) => {
  console.log('last bubble typing complete:', key)
}

const listRef = ref<BubbleListRef>()

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

    const typing = i > 2 ? { step: 5, interval: 20 } : false

    return {
      key: i,
      role: isAI ? 'ai' : 'user',
      content,
      typing,
    }
  })
})
</script>

<template>
  <el-bubble-list
    ref="listRef"
    style="max-height: 300px"
    :roles="roles"
    :items="items"
  />
</template>

<script setup lang="tsx">
import { ref } from 'vue'
import { ElBubbleList } from 'element-plus-x'
import { ElIcon, ElSpace } from 'element-plus'
import {
  ChatLineRound,
  Loading,
  Refresh,
  UserFilled,
} from '@element-plus/icons-vue'
import type { BubbleListProps } from 'element-plus-x'

const roles: BubbleListProps['roles'] = {
  ai: {
    placement: 'start',
    avatar: { icon: UserFilled, style: { background: '#fde3cf' } },
    typing: { step: 5, interval: 20 },
    style: {
      maxWidth: '600px',
      marginInlineEnd: '44px',
    },
    footerStyle: {
      width: '100%',
    },
    loadingRender: () => (
      <ElSpace>
        <ElIcon class="is-loading" color="#f60">
          <Loading />
        </ElIcon>
        Custom loading...
      </ElSpace>
    ),
  },
  user: {
    placement: 'end',
    avatar: { icon: UserFilled, style: { background: '#87d068' } },
  },
}

const items = ref([
  {
    key: 'welcome',
    role: 'ai',
    content: 'Mock welcome content. '.repeat(10),
    footer: (
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <ElIcon>
          <Refresh />
        </ElIcon>
        <ElIcon>
          <ChatLineRound />
        </ElIcon>
      </div>
    ),
  },
  {
    key: 'ask',
    role: 'user',
    content: 'Mock user content.',
  },
  {
    key: 'ai',
    role: 'ai',
    loading: true,
    content: 'hihihihi.',
  },
])
</script>

<template>
  <el-bubble-list
    ref="listRef"
    style="max-height: 300px"
    :roles="roles"
    :items="items"
  />
</template>

<script setup lang="tsx">
import { ref } from 'vue'
import { ElCard } from 'element-plus'
import { ElBubbleList } from 'element-plus-x'
import { UserFilled } from '@element-plus/icons-vue'
import type { BubbleListProps } from 'element-plus-x'

const roles: BubbleListProps['roles'] = {
  ai: {
    placement: 'start',
    typing: true,
    avatar: { icon: UserFilled, style: { background: '#fde3cf' } },
  },
  file: {
    placement: 'start',
    avatar: { icon: UserFilled, style: { visibility: 'hidden' } },
    variant: 'borderless',
    messageRender: (items) => (
      <div vertical gap="middle">
        {(items as any[]).map((item) => (
          <ElCard key={item.uid} style={{ marginBottom: '4px' }}>
            {item.name}
          </ElCard>
        ))}
      </div>
    ),
  },
}

const items = ref([
  // Normal
  {
    key: 0,
    role: 'ai',
    content: 'Normal message',
  },

  // VNode
  {
    key: 1,
    role: 'ai',
    content: <span>VNode message</span>,
  },
  // Role: file
  {
    key: 3,
    role: 'file',
    content: [
      {
        uid: '1',
        name: 'excel-file.xlsx',
        size: 111111,
        description: 'Checking the data',
      },
      {
        uid: '2',
        name: 'word-file.docx',
        size: 222222,
        status: 'uploading',
        percent: 23,
      },
    ],
  },
])
</script>