Bubble Chat Bubble 🔥

📌 Warning

Version 1.1.6 inherits the typewriter's fog effect. Please update to try it out.

🐵 Last updated: 2025-04-13

Introduction

Bubble is a chat bubble component, commonly used in chat scenarios. It can display conversation content, supports custom avatars, headers, content, footers, and has typing effects and loading state display. The component has built-in Typewriter component that can achieve text typing animation effects.

Code Examples

Basic Usage

hello world !

Basic Usage

Simplest integration method.

<script setup lang="ts">
const content = ref('hello world !');
</script>

<template>
  <Bubble :content="content" />
</template>

Avatar and Placement

Good morning, how are you?

What a beautiful day!

Hi, good morning, I'm fine!

Hi, good morning, I'm fine! Thank you!

Support for Position and Avatar, and Spacing Settings

Set custom avatar through #avatar. Set position through placement property, provides start, end two option values.

💡 Tip

😸 Built-in element-plus el-avatar component. But to avoid property name conflicts, for example: el-avatar and Bubble's shape property. You need to use the following properties to set

1. Properties

• avatar Set avatar placeholder image
• avatar-size Set avatar placeholder size 👉This property is number type in el-avatar component, note that in this component it's string type for better custom style properties😊
• avatar-gap Set distance between avatar and bubble
• avatar-shape Set avatar shape
• avatar-icon Set avatar placeholder icon
• avatar-src-set Set avatar image srcset attribute
• avatar-alt Set avatar image alt attribute
• avatar-fit Set avatar placeholder image fill mode

2. Events

• @avatar-error Triggered when avatar loading fails.

<script setup lang="ts">
const avatarAI =
  'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png';
const avatarUser = 'https://avatars.githubusercontent.com/u/76239030?v=4';
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <!-- Avatar and Placement Left -->
    <Bubble
      content="Good morning, how are you?"
      placement="start"
      :avatar="avatarAI"
      avatar-size="48px"
    />

    <!-- avatar-size Set avatar placeholder space -->
    <Bubble
      content="What a beautiful day!"
      placement="start"
      avatar-size="48px"
    />

    <!-- Avatar and Placement Right -->
    <Bubble content="Hi, good morning, I'm fine!" placement="end">
      <template #avatar>
        <el-avatar :size="32" :src="avatarUser" />
      </template>
    </Bubble>

    <!-- avatar-gap property controls distance between bubble and avatar -->
    <Bubble
      content="Hi, good morning, I'm fine! Thank you!"
      placement="end"
      avatar-size="0px"
      avatar-gap="0px"
    />
  </div>
</template>

Header and Footer

Element Plus X

Hi! Hello, welcome to Element Plus X, if you have any questions, feel free to ask me~

Support for Custom Bubble Header and Footer Content

Customize bubble header and footer through #header and #footer slots.

<script setup lang="ts">
import { DocumentCopy, Refresh, Search, Star } from '@element-plus/icons-vue';

const content = ref(
  'Hi! Hello, welcome to Element Plus X, if you have any questions, feel free to ask me~'
);
const avatarAI =
  'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png';
</script>

<template>
  <Bubble :content="content">
    <template #avatar>
      <el-avatar :src="avatarAI" />
    </template>
    <template #header>
      <span>Element Plus X</span>
    </template>
    <template #footer>
      <div class="footer-container">
        <el-button type="info" :icon="Refresh" size="small" circle />
        <el-button type="success" :icon="Search" size="small" circle />
        <el-button type="warning" :icon="Star" size="small" circle />
        <el-button color="#626aef" :icon="DocumentCopy" size="small" circle />
      </div>
    </template>
  </Bubble>
</template>

<style scoped lang="less">
.footer-container {
  :deep(.el-button + .el-button) {
    margin-left: 8px;
  }
}
</style>

Loading State

loading...

Thank you for using Element-Plus-X 🌹 Please wait...

State:

Loading State

Set loading state through loading property. Supports custom loading state content display through #loading slot.

💌 Info

#loading slot has higher priority, built-in loading styles will be disabled. But the loading property can still control the loading state.

<script setup lang="ts">
const loading = ref(true);
const content = ref('hello world !');
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 10px">
    <Bubble :content="content" :loading="loading" />

    <Bubble :content="content" :loading="loading">
      <template #loading>
        <div>loading...</div>
      </template>
    </Bubble>

    <Bubble :content="content" :loading="loading">
      <template #loading>
        <div>Thank you for using Element-Plus-X 🌹 Please wait...</div>
      </template>
    </Bubble>

    <div style="display: flex; align-items: center">
      <span>State: </span>
      <el-switch v-model="loading" />
    </div>
  </div>
</template>

Typewriter Configuration

Typing Effect

Enable typing effect by setting the typing property. When updating content, if it's a subset of the previous content, it will continue outputting, otherwise it will restart.

💌 Info

🙊 When using #content slot to customize content, the typing property will be disabled. If you want to re-implement typing effect for your content string, you can combine it with the Typewriter component.

💡 Tip

The typing property accepts an object with the following properties:

• step: Number of characters typed each time, default is 2
• interval: Typing interval (milliseconds), default is 50
• suffix: Ending character, default is |

<script setup lang="ts">
const num = ref(1);
const content = computed(() =>
  '🥰 Thank you for using Element-Plus-X ! Your support is our strongest motivation for open source ~ '.repeat(
    num.value
  )
);
const avatarAI =
  'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png';

function changeContent() {
  num.value++;
  if (num.value > 3)
    num.value = 1;
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <el-button style="width: fit-content" @click="changeContent">
      Set text
    </el-button>

    <Bubble
      :content="content"
      :typing="{ step: 1, interval: 100, suffix: '💩' }"
    >
      <template #avatar>
        <el-avatar :src="avatarAI" />
      </template>
    </Bubble>
  </div>
</template>

Enable Markdown Rendering

Render Markdown Text Content

Enable markdown text content rendering mode by setting the is-markdown property. When updating content, if it's a subset of the previous content, it will continue outputting, otherwise it will restart.

<script setup lang="ts">
const avatarUser = 'https://avatars.githubusercontent.com/u/76239030?v=4';
const content = ref(
  `## 🔥Element-Plus-X \n 🥰 Thank you for using Element-Plus-X! \n - List item 1 \n - List item 2 **bold text** and *italic text* \n \`\`\`javascript \n console.log('Hello, world!'); \n \`\`\` \n`
);
const num = ref(1);

function changeContent() {
  num.value++;
  content.value = content.value.repeat(num.value);
  if (num.value > 2) {
    num.value = 1;
    content.value = `## 🔥Element-Plus-X \n 🥰 Thank you for using Element-Plus-X! \n - List item 1 \n - List item 2 **bold text** and *italic text* \n \`\`\`javascript \n console.log('Hello, world!'); \n \`\`\` \n`;
  }
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <el-button style="width: fit-content" @click="changeContent">
      Set markdown
    </el-button>
    <Bubble :content="content" typing is-markdown>
      <template #avatar>
        <el-avatar :size="32" :src="avatarUser" />
      </template>
    </Bubble>
  </div>
</template>

<style scoped lang="less">
:deep(.markdown-body) {
  background-color: transparent;
}
</style>

Inherit Typewriter Charts and MD Styles

Render Markdown Text Content

Enable markdown text content rendering mode by setting the is-markdown property. When updating content, if it's a subset of the previous content, it will continue outputting, otherwise it will restart.

<script setup lang="ts">
const avatarUser = 'https://avatars.githubusercontent.com/u/76239030?v=4';
const markdownText =
  ref(`#### Title \n This is a Markdown example.\n - List item 1 \n - List item 2 **bold text** and *italic text* \n \`\`\`javascript \n console.log('Hello, world!'); \n \`\`\` \n \`\`\`mermaid
 pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
 \n
\`\`\`

\`\`\`mermaid
 xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

 \n
\`\`\`
`);
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <Bubble :content="markdownText" typing is-markdown>
      <template #avatar>
        <el-avatar :size="32" :src="avatarUser" />
      </template>
    </Bubble>
  </div>
</template>

<style scoped lang="less">
:deep(.markdown-body) {
  background-color: transparent;
}
</style>

Fog Effect

Fog Effect

When typewriter is enabled, inherits the typewriter's fog property. Enable fog typewriter rendering mode by setting the is-fog property. Compatible with Markdown styles. Note that after enabling fog, the typing suffix suffix property will be disabled.

is-fog defaults to false, can be set to true or { bgColor: '#f5f5f5', width: '80px' }. Setting fog background color can better match custom styles.

<script setup lang="ts">
const avatarUser = 'https://avatars.githubusercontent.com/u/76239030?v=4';
const content = ref(
  `## 🔥Element-Plus-X \n 🥰 Thank you for using Element-Plus-X! \n - List item 1 \n - List item 2 **bold text** and *italic text* \n \`\`\`javascript \n console.log('Hello, world!'); \n \`\`\` \n`
);

function changeContent(type: number) {
  content.value = '';

  setTimeout(() => {
    if (type === 1) {
      content.value = `## 🔥Element-Plus-X \n 🥰 Thank you for using Element-Plus-X! \n - List item 1 \n - List item 2 **bold text** and *italic text* \n \`\`\`javascript \n console.log('Hello, world!'); \n \`\`\` \n`;
    }
    else if (type === 2) {
      content.value = `🔥Element-Plus-X `.repeat(10);
    }
  }, 80);
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <div style="display: flex; gap: 12px">
      <el-button style="width: fit-content" @click="changeContent(1)">
        Fog markdown
      </el-button>
      <el-button style="width: fit-content" @click="changeContent(2)">
        Fog text
      </el-button>
    </div>
    <Bubble
      :content="content"
      :typing="{ step: 3, interval: 80, suffix: '💩' }"
      is-markdown
      :is-fog="{ bgColor: '#f5f5f5' }"
    >
      <template #avatar>
        <el-avatar :size="32" :src="avatarUser" />
      </template>
    </Bubble>
  </div>
</template>

<style scoped lang="less">
:deep(.markdown-body) {
  background-color: transparent;
}
</style>

Custom Content

😊 Welcome to element-plus-x, I'm a custom bubble

Recommended Content Custom Bubble

🥤 How to rest effectively after long hours of work?

💌 What's the secret to maintaining a positive mindset?

🔥 How to stay calm under tremendous pressure?

Customize Bubble Content

Customize bubble content through #content slot.

💌 Info

#content slot has higher priority, content property will be disabled. no-padding property can disable bubble content padding.

<script setup lang="ts">
const avatarSize = '48px';
const avatarAI =
  'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png';
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <Bubble
      content="Welcome to element-plus-x."
      typing
      :avatar="avatarAI"
      :avatar-size="avatarSize"
      no-style
    >
      <template #content>
        <div class="content-container">
          😊 Welcome to element-plus-x, I'm a custom bubble
        </div>
      </template>
    </Bubble>

    <Bubble :avatar-size="avatarSize" typing no-style variant="borderless">
      <template #header>
        <div class="content-container-header">
          Recommended Content Custom Bubble
        </div>
      </template>
      <template #content>
        <div class="content-borderless-container">
          🥤 How to rest effectively after long hours of work?
        </div>
      </template>
    </Bubble>

    <Bubble :avatar-size="avatarSize" typing no-style variant="borderless">
      <template #content>
        <div class="content-borderless-container">
          💌 What's the secret to maintaining a positive mindset?
        </div>
      </template>
    </Bubble>

    <Bubble :avatar-size="avatarSize" typing no-style variant="borderless">
      <template #content>
        <div class="content-borderless-container">
          🔥 How to stay calm under tremendous pressure?
        </div>
      </template>
    </Bubble>
  </div>
</template>

<style scoped>
.content-container {
  padding: 12px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.content-container-header {
  font-size: 12px;
  color: #909399;
}

.content-borderless-container {
  user-select: none;
  padding: 12px;
  cursor: pointer;
  transition: background-color 0.3s;
  &:hover {
    background-color: #ebeef5;
  }
}
</style>

Variants and Shapes

filled

filled + round

filled + corner

borderless

borderless + round

borderless + corner

outlined

outlined + round

outlined + corner

shadow

shadow + round

shadow + corner

round

corner

placement end

Built-in Style Formats and Shapes

Set bubble's built-in style format through variant property. Set bubble's shape through shape property. Of course you can also combine them and use them together.

💌 Info

By default, variant is filled, shape is round.

When shape is corner, placement="end" will automatically flip the bubble so that the top-right corner radius pointer points to the user.

<script setup lang="ts"></script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <div style="display: flex; gap: 12px; align-items: center">
      <Bubble content="filled" variant="filled" />
      <Bubble content="filled + round" variant="filled" shape="round" />
      <Bubble content="filled + corner" variant="filled" shape="corner" />
    </div>

    <div style="display: flex; gap: 12px; align-items: center">
      <Bubble content="borderless" variant="borderless" />
      <Bubble content="borderless + round" variant="borderless" shape="round" />
      <Bubble
        content="borderless + corner"
        variant="borderless"
        shape="corner"
      />
    </div>

    <div style="display: flex; gap: 12px; align-items: center">
      <Bubble content="outlined" variant="outlined" />
      <Bubble content="outlined + round" variant="outlined" shape="round" />
      <Bubble content="outlined + corner" variant="outlined" shape="corner" />
    </div>

    <div style="display: flex; gap: 12px; align-items: center">
      <Bubble content="shadow" variant="shadow" />
      <Bubble content="shadow + round" variant="shadow" shape="round" />
      <Bubble content="shadow + corner" variant="shadow" shape="corner" />
    </div>

    <div style="display: flex; gap: 12px; align-items: center">
      <Bubble content="round" shape="round" />
    </div>

    <div style="display: flex; gap: 12px; align-items: center">
      <Bubble content="corner" shape="corner" />
      <Bubble content="placement end" shape="corner" placement="end" />
    </div>
  </div>
</template>

Control Typing

🐵 Support for controlling Bubble component play, interrupt/continue, destroy. Support for monitoring component state.

💩 Better control over interrupt output, continue typing and destroy operations

💡 Tip

😸 Built-in Typewriter component. Mounts all properties and methods from the Typewriter component to the Bubble component for convenient use in agile development.

💌 Info

🐒 If you feel the built-in Typewriter component doesn't meet your needs, you can also use the #content slot for customized development of the Bubble component. Using #content, the built-in Typewriter component will be disabled. In the slot, you can also combine it with Typewriter yourself, or customize streaming requests, streaming rendering and other personalized operations.

<script setup lang="ts">
import type { TypewriterInstance } from 'vue-element-plus-x/types/Typewriter';
import {
  Delete,
  RefreshLeft,
  VideoPause,
  VideoPlay
} from '@element-plus/icons-vue';

const markdownContent = ref(
  `# 🔥 Bubble Instance Methods-Events \n 😄 Make your typewriter highly customizable.\n - More convenient control over typewriter state \n - List item **bold text** and *italic text* \n \`\`\`javascript \n // 🙉 Console can view related logs\n console.log('Hello, world!'); \n \`\`\``
);

const isTypingValue = ref(false);
const progressValue = ref(0);
const bubbleRef = ref();
// Start typing listener method
function onStart(instance: TypewriterInstance) {
  console.log('Start typing: component ref instance', unref(instance));
  isTypingValue.value = true;
}
// Typing progress listener method
function onWriting(instance: TypewriterInstance) {
  const progress: number = instance.progress.value;
  // Avoid printing multiple onWriting events 😂
  if (progress > 90 && progress < 100) {
    // Can directly get typing progress, can set more cool styles based on typing progress
    // console.log('Writing', `${progress}%`)
    console.log(
      'Typing isTyping:',
      instance.isTyping.value,
      'progress:',
      progress
    );
  }

  if (~~progress === 80) {
    console.log(
      'Content when typing progress is 80%',
      instance.renderedContent.value
    );
  }
  isTypingValue.value = true;
  progressValue.value = ~~progress; // Use ~~ operator to round down 💩
}
// Listen for typing end event
function onFinish(instance: TypewriterInstance) {
  isTypingValue.value = false;
  console.log(
    'Typing finished isTyping',
    instance.isTyping.value,
    'progress:',
    instance.progress.value
  );
}
// Component instance method, control pause typing
function onInterrupt() {
  bubbleRef.value.interrupt();
  isTypingValue.value = false;
}
function onDestroy() {
  bubbleRef.value.destroy();
  isTypingValue.value = false;
  progressValue.value = 0;
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <div style="display: flex">
      <el-button
        v-if="isTypingValue"
        type="warning"
        style="width: fit-content"
        @click="onInterrupt"
      >
        <el-icon :size="18">
          <VideoPause />
        </el-icon>
        <span>Pause</span>
      </el-button>
      <el-button
        v-if="!isTypingValue && progressValue !== 0 && progressValue !== 100"
        type="success"
        style="width: fit-content"
        @click="bubbleRef?.continue()"
      >
        <el-icon :size="18">
          <VideoPlay />
        </el-icon>
        <span>Continue</span>
      </el-button>
      <el-button
        v-if="!isTypingValue && (progressValue === 0 || progressValue === 100)"
        type="primary"
        style="width: fit-content"
        @click="bubbleRef?.restart()"
      >
        <el-icon :size="18">
          <RefreshLeft />
        </el-icon>
        <span>Replay</span>
      </el-button>
      <el-button type="danger" style="width: fit-content" @click="onDestroy">
        <el-icon>
          <Delete />
        </el-icon>
        <span>Destroy</span>
      </el-button>
    </div>

    <el-progress
      v-if="progressValue > 0 && progressValue !== 100"
      :duration="0"
      :percentage="progressValue"
    />
    <el-progress
      v-if="progressValue === 100"
      :percentage="100"
      status="success"
    />

    <!-- Here shows that if it's markdown, typing.suffix will be ignored -->
    <Bubble
      ref="bubbleRef"
      :content="markdownContent"
      :typing="{ suffix: '💩', interval: 40 }"
      :is-markdown="true"
      @start="onStart"
      @writing="onWriting"
      @finish="onFinish"
    />
  </div>
</template>

<style scoped lang="less">
// Avoid markdown-body styles being overridden
:deep(.markdown-body) {
  background: transparent;
}
</style>

Properties

Property Name	Type	Default	Description
content	String	''	Text content to display inside the bubble
placement	String	'start'	Bubble position, options are 'start' or 'end', representing left and right sides respectively.
avatar	String	''	Image URL for the bubble avatar
loading	Boolean	false	Whether to show loading state. When true, loading state will be displayed inside the bubble.
shape	String	null	Bubble shape, options are 'round' (rounded corners) or 'corner' (angular).
variant	String	'filled'	Bubble style variant, options are 'filled' (filled), 'borderless' (no border), 'outlined' (outline), 'shadow' (shadow).
noStyle	Boolean	false	Whether to remove styles, when true, removes built-in padding and background color from the bubble
isMarkdown	Boolean	false	Whether to process content as Markdown format.
typing	Boolean | Object	false	Whether to enable typing effect. If object, can set step (characters rendered each time) and suffix (typing cursor suffix content). interval represents typing interval time in ms.
maxWidth	String	'500px'	Maximum width of bubble content.
avatar-size	String	''	Set avatar placeholder size
avatar-gap	String	'12px'	Set gap value between avatar and bubble
avatar-shape	String	''	Avatar shape, options are 'circle' (circular) or 'square' (square).
avatar-icon	String	''	Avatar icon, priority higher than avatar, supports passing icon names like 'user'.
avatar-src-set	String	''	Set avatar image srcset attribute
avatar-alt	String	''	Set avatar image alt attribute
avatar-fit	String	'cover'	Set avatar image object-fit attribute, options: 'cover', 'contain', 'fill', 'none', 'scale-down'

Events

Event Name	Parameters	Type	Description
@start	ref instance	Function	Triggered when typing effect starts
@finish	ref instance	Function	Triggered when typing effect completes
@writing	ref instance	Function	Triggered in real-time during typing
@avatarError	ref instance	Function	Triggered when avatar loading fails

Ref Instance Methods

Property Name	Type	Description
interrupt	Function	Interrupt typing.
continue	Function	Continue unfinished typing.
restart	Function	Restart typing.
destroy	Function	Actively destroy Bubble component.
renderedContent	String	Get rendered content of typing component.
isTyping	Boolean	Whether currently typing.
progress	Number	Typing progress, range 0 - 100.

Slots

Slot Name	Parameters	Type	Description
#avatar	-	Slot	Custom avatar display content
#header	-	Slot	Custom bubble top display content
#content	-	Slot	Custom bubble display content
#loading	-	Slot	Custom bubble loading state display content
#footer	-	Slot	Custom bubble bottom display content

Features

1. Layout Direction - Supports left alignment (start) and right alignment (end)
2. Content Types - Supports plain text, Markdown, custom slot content
3. Loading State - Built-in loading animation, supports custom loading content
4. Visual Effects - Provides multiple shapes and variants (rounded/angular corners, filled/outlined/shadow, etc.)
5. Typing Animation - Supports progressive text output effects
6. Flexible Slots - Provides avatar, header, content, footer, loading state and other slots