BubbleList | Element-Plus-X

📌 Warning

Added in version 1.1.6 Inherits the fog effect from the typewriter. Added scroll to bottom button, similar to Doubao🔥. Added scrollbar on mouse hover to enhance interaction experience. Please update and try it out.

🐵 This warm tip was last updated: 2025-04-13

💡 Tip

Note: The new version's auto-scroll will automatically scroll when the list length changes. However, after scrolling up, you need to manually call the scrollToBottom method to re-enable auto-scroll. Or, when the scrollbar reaches the bottom, auto-scroll will be triggered again.

The logic is the same as before, so you can upgrade without any worries.

Introduction

BubbleList relies on the Bubble component and is used to display a list of chat bubbles. This component supports setting the maximum list height and has an auto-scroll feature. It also provides various scroll control methods that users can easily call. It is powerful and requires no mental burden for developers.

Code Examples

Basic Usage

Hahaha, let me try

Basic Usage

Pre-styled bubble list, quickly create a chat record through a simple Array of messages.

📌 Warning

You can pass properties to the built-in Bubble component through the item property. Set properties for each bubble. More flexible usage. For specific properties, please refer to the Bubble component documentation.

All our message operations only need to maintain this array.

Including streaming message settings. Here we don't use interface streaming operations. In our template project, we go through real combat. You can use it as a reference.

👉 Template Project Preview

👉 Template Project Source Code Welcome to star🥰

You can also control the maximum height of the list through the max-height property.

vue

<script setup lang="ts">
import type {
  BubbleListItemProps,
  BubbleListProps
} from 'vue-element-plus-x/types/BubbleList';

type listType = BubbleListItemProps & {
  key: number;
  role: 'user' | 'ai';
};

// Example call
const list: BubbleListProps<listType>['list'] = generateFakeItems(5);

function generateFakeItems(count: number): listType[] {
  const messages: listType[] = [];
  for (let i = 0; i < count; i++) {
    const role = i % 2 === 0 ? 'ai' : 'user';
    const placement = role === 'ai' ? 'start' : 'end';
    const key = i + 1;
    const content =
      role === 'ai'
        ? '💖 Thank you for using Element Plus X ! Your support is our strongest motivation for open source ~'.repeat(
            5
          )
        : `Hahaha, let me try`;
    const loading = false;
    const shape = 'corner';
    const variant = role === 'ai' ? 'filled' : 'outlined';
    const isMarkdown = false;
    const typing = role === 'ai' ? i === count - 1 : false;
    const avatar =
      role === 'ai'
        ? 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
        : 'https://avatars.githubusercontent.com/u/76239030?v=4';

    messages.push({
      key, // Unique identifier
      role, // user | ai customize according to model definition
      placement, // start | end bubble position
      content, // Message content when streaming, just change this value
      loading, // Current bubble loading state
      shape, // Bubble shape
      variant, // Bubble style
      isMarkdown, // Whether to render as markdown
      typing, // Whether to enable typewriter effect, this property won't conflict with streaming
      isFog: role === 'ai', // Whether to enable typing fog effect, this effect is new in v1.1.6 and works when typing is true, this effect will override typing's suffix property
      avatar,
      avatarSize: '24px', // Avatar placeholder size
      avatarGap: '12px' // Distance between avatar and bubble
    });
  }
  return messages;
}
</script>

<template>
  <BubbleList :list="list" max-height="350px" />
</template>

Customized List

Dynamic content setting

Custom loading

💖 Thank you for using Element Plus X ! Your support is our strongest motivation for open source ~

Hahaha, let me try

💖 Thank you for using Element Plus X ! Your support is our strongest motivation for open source ~

Hahaha, let me try

💖 Thank you for using Element Plus X ! Your support is our strongest motivation for open source ~

Custom List Display

🍋 Through #avatar, #header, #content, #loading, #footer slots, you can more flexibly control the rendering of bubble lists

vue

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

type listType = BubbleListItemProps & {
  key: number;
  role: 'user' | 'ai';
};

// Example call
const bubbleItems = ref<BubbleListProps<listType>['list']>(
  generateFakeItems(5)
);
const avatar = ref('https://avatars.githubusercontent.com/u/76239030?v=4');
const avartAi = ref(
  'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
);
const switchValue = ref(false);
const loading = ref(false);

function generateFakeItems(count: number): listType[] {
  const messages: listType[] = [];
  for (let i = 0; i < count; i++) {
    const role = i % 2 === 0 ? 'ai' : 'user';
    const placement = role === 'ai' ? 'start' : 'end';
    const key = i + 1;
    messages.push({
      key,
      role,
      placement,
      noStyle: true // If you don't want to use default bubble styles
    });
  }
  return messages;
}

// Set loading for a specific item
function setLoading(loading: boolean) {
  bubbleItems.value[bubbleItems.value.length - 1].loading = loading;
  bubbleItems.value[bubbleItems.value.length - 2].loading = loading;
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <div style="display: flex; gap: 12px">
      <span>Dynamic content setting <el-switch v-model="switchValue" /></span>
      <span>Custom loading
        <el-switch
          v-model="loading"
          @change="(value: any) => setLoading(value as boolean)"
        /></span>
    </div>
    <BubbleList :list="bubbleItems" max-height="350px">
      <!-- Custom avatar -->
      <template #avatar="{ item }">
        <div class="avatar-wrapper">
          <img :src="item.role === 'ai' ? avartAi : avatar" alt="avatar">
        </div>
      </template>

      <!-- Custom header -->
      <template #header="{ item }">
        <div class="header-wrapper">
          <div class="header-name">
            {{ item.role === 'ai' ? 'Element Plus X 🍧' : '🧁 User' }}
          </div>
        </div>
      </template>

      <!-- Custom bubble content -->
      <template #content="{ item }">
        <div class="content-wrapper">
          <div class="content-text">
            {{
              item.role === 'ai'
                ? `${switchValue ? `#ai-${item.key}：` : ''} 💖 Thank you for using Element Plus X ! Your support is our strongest motivation for open source ~`
                : `${switchValue ? `#user-${item.key}：` : ''}Hahaha, let me try`
            }}
          </div>
        </div>
      </template>

      <!-- Custom footer -->
      <template #footer="{ item }">
        <div class="footer-wrapper">
          <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>
          <div class="footer-time">
            {{ item.role === 'ai' ? '2:32 PM' : '2:33 PM' }}
          </div>
        </div>
      </template>

      <!-- Custom loading -->
      <template #loading="{ item }">
        <div class="loading-container">
          <span>#{{ item.role }}-{{ item.key }}：</span>
          <span>I</span>
          <span>am</span>
          <span>custom</span>
          <span>loading</span>
          <span>content</span>
          <span>oh</span>
          <span>~</span>
        </div>
      </template>
    </BubbleList>
  </div>
</template>

<style scoped lang="less">
.avatar-wrapper {
  width: 40px;
  height: 40px;
  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}

.header-wrapper {
  .header-name {
    font-size: 14px;
    color: #979797;
  }
}

.content-wrapper {
  .content-text {
    font-size: 14px;
    color: #333;
    padding: 12px;
    background: linear-gradient(to right, #fdfcfb 0%, #ffd1ab 100%);
    border-radius: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
}

.footer-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  .footer-time {
    font-size: 12px;
    margin-top: 3px;
  }
}

.footer-container {
  :deep(.el-button + .el-button) {
    margin-left: 8px;
  }
}

.loading-container {
  font-size: 14px;
  color: #333;
  padding: 12px;
  background: linear-gradient(to right, #fdfcfb 0%, #ffd1ab 100%);
  border-radius: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.loading-container span {
  display: inline-block;
  margin-left: 8px;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(5px);
  }
  50% {
    transform: translateY(-5px);
  }
}

.loading-container span:nth-child(4n) {
  animation: bounce 1.2s ease infinite;
}
.loading-container span:nth-child(4n + 1) {
  animation: bounce 1.2s ease infinite;
  animation-delay: 0.3s;
}
.loading-container span:nth-child(4n + 2) {
  animation: bounce 1.2s ease infinite;
  animation-delay: 0.6s;
}
.loading-container span:nth-child(4n + 3) {
  animation: bounce 1.2s ease infinite;
  animation-delay: 0.9s;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208

Auto Scroll & Scroll to Specific Position

💖 Thank you for using Element Plus X ! Your support is our strongest motivation for open source ~

Hahaha, let me try

Auto Scroll + Scroll to Specified Index

🍑 You can easily use bubbleListRef component instance methods to control scrolling to specified index.

🍒 Component Instance Methods

scrollToTop()：Scroll to top
scrollToBottom()：Scroll to bottom
scrollToBubble(index: number)：Scroll to specified index

vue

<script setup lang="ts">
import type {
  BubbleListItemProps,
  BubbleListProps
} from 'vue-element-plus-x/types/BubbleList';
import type { TypewriterProps } from 'vue-element-plus-x/types/Typewriter';

type listType = BubbleListItemProps & {
  key: number;
  role: 'user' | 'ai';
};

// Example call
const bubbleItems = ref<BubbleListProps<listType>['list']>(
  generateFakeItems(2)
);

function generateFakeItems(count: number): listType[] {
  const messages: listType[] = [];
  for (let i = 0; i < count; i++) {
    const role = i % 2 === 0 ? 'ai' : 'user';
    const placement = role === 'ai' ? 'start' : 'end';
    const key = i + 1;
    const content =
      role === 'ai'
        ? '💖 Thank you for using Element Plus X ! Your support is our strongest motivation for open source ~'
        : `Hahaha, let me try`;
    const loading = false;
    const shape = 'corner';
    const variant = role === 'ai' ? 'filled' : 'outlined';
    const isMarkdown = false;
    const typing = false;
    const avatar =
      role === 'ai'
        ? 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
        : 'https://avatars.githubusercontent.com/u/76239030?v=4';

    messages.push({
      key,
      role,
      placement,
      content,
      loading,
      shape,
      variant,
      isMarkdown,
      typing,
      avatar,
      avatarSize: '32px'
    });
  }
  return messages;
}

const bubbleListRef = ref();
const num = ref(0);

function addMessage() {
  const i = bubbleItems.value.length;
  const isUser = !!(i % 2);
  const content = isUser
    ? 'Hahaha, let me try'
    : '💖 Thank you for using Element Plus X ! Your support is our strongest motivation for open source ~'.repeat(
        5
      );
  const shape = 'corner';
  const variant = !isUser ? 'filled' : 'outlined';
  const placement = isUser ? 'end' : 'start';
  const typing: TypewriterProps['typing'] = isUser
    ? false
    : { step: 5, suffix: '🍆', interval: 35 };
  const avatar = isUser
    ? 'https://avatars.githubusercontent.com/u/76239030?v=4'
    : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png';
  const obj = {
    key: i,
    role: isUser ? 'user' : 'ai',
    content,
    placement,
    typing,
    avatar,
    shape,
    variant,
    avatarSize: '32px',
    isFog: !isUser
  };
  bubbleItems.value.push(obj as listType);
  // Call scroll to bottom each time to trigger auto scroll
  scrollBottom();
}

function clearMessage() {
  bubbleItems.value = [];
}

function scrollToTop() {
  bubbleListRef.value.scrollToTop();
}

function scrollBottom() {
  bubbleListRef.value.scrollToBottom();
}

function scrollToBubble() {
  bubbleListRef.value.scrollToBubble(num.value);
}

onMounted(() => {
  setTimeout(() => {
    bubbleItems.value.map(item => {
      item.loading = false;
      return item;
    });
  }, 3000);
});
</script>

<template>
  <div class="component-container">
    <div class="top-wrap">
      <div class="btn-list">
        <el-button type="primary" plain @click="addMessage">
          Add Message
        </el-button>
        <el-button type="danger" plain @click="clearMessage">
          Clear Message List
        </el-button>
        <el-button type="primary" plain @click="scrollToTop">
          Scroll to Top
        </el-button>
        <el-button type="primary" plain @click="scrollBottom">
          Scroll to Bottom
        </el-button>
      </div>

      <div class="btn-list">
        <el-input-number
          v-model="num"
          :min="0"
          :max="10"
          controls-position="right"
        />
        <el-button type="primary" plain @click="scrollToBubble">
          Scroll to Bubble {{ num }}
        </el-button>
      </div>
    </div>

    <div class="component-1">
      <BubbleList ref="bubbleListRef" :list="bubbleItems" max-height="350px" />
    </div>
  </div>
</template>

<style scoped lang="less">
.component-container {
  padding: 12px;

  .btn-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .top-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
  }
}
</style>

Back to Top Button

Scrollbar display:

Show on hover

Bottom button loading state:

true

Bottom button color:

Bottom button positionDistance from bottom:

Distance from left:

Bottom button size:

💖 Thank you for using Element Plus X ! Your support is our strongest motivation for open source ~💖 Thank you for using Element Plus X ! Your support is our strongest motivation for open source ~💖 Thank you for using Element Plus X ! Your support is our strongest motivation for open source ~💖 Thank you for using Element Plus X ! Your support is our strongest motivation for open source ~💖 Thank you for using Element Plus X ! Your support is our strongest motivation for open source ~💖 Thank you for using Element Plus X ! Your support is our strongest motivation for open source ~💖 Thank you for using Element Plus X ! Your support is our strongest motivation for open source ~💖 Thank you for using Element Plus X ! Your support is our strongest motivation for open source ~

Hahaha, let me try

Back to Bottom Button + Scrollbar Experience

Built-in back to bottom button, similar to Douyin.
Scrollbar appears on mouse hover
No conflict with built-in auto-scroll, feel free to use

💌 Info

Scrollbar Control Properties

alwaysShowScrollbar property controls whether to always show scrollbar, default is false.

Bottom Button Customization Properties

You can set the threshold for the back to bottom button through the backButtonThreshold property, default is 80, meaning the back to bottom button will appear when the scrollbar is 80px away from the bottom.
showBackButton property controls whether to show the back to bottom button, default is true.
btnLoading property controls whether to show loading state, default is true.
btnColor property controls the color of the back to bottom button, default is #409EFF.
backButtonPosition property controls the position of the back to bottom button, default is { bottom: '20px', left: 'calc(50% - 19px)' } can use % to control, like { bottom: '10%', left: 'calc(50% - 19px)' }.
btnIconSize property controls the icon size of the back to bottom button, default is 24.

vue

<script setup lang="ts">
import type {
  BubbleListItemProps,
  BubbleListProps
} from 'vue-element-plus-x/types/BubbleList';

type listType = BubbleListItemProps & {
  key: number;
  role: 'user' | 'ai';
};

// Example call
const list: BubbleListProps<listType>['list'] = generateFakeItems(12);
const alwaysShowScrollbar = ref(false);
const btnLoading = ref(true);
const bottomValue = ref(10);
const leftValue = ref(85);
const backButtonPosition = computed(() => {
  return {
    bottom: `${bottomValue.value}%`,
    left: `${leftValue.value}%`
  };
});
const btnColor = ref('#2D38FF');
const btnSize = ref(40);

function generateFakeItems(count: number): listType[] {
  const messages: listType[] = [];
  for (let i = 0; i < count; i++) {
    const role = i % 2 === 0 ? 'ai' : 'user';
    const placement = role === 'ai' ? 'start' : 'end';
    const key = i + 1;
    const content =
      role === 'ai'
        ? '💖 Thank you for using Element Plus X ! Your support is our strongest motivation for open source ~'.repeat(
            8
          )
        : `Hahaha, let me try`;
    const loading = false;
    const shape = 'corner';
    const variant = role === 'ai' ? 'filled' : 'outlined';
    const isMarkdown = false;
    const typing = role === 'ai' ? i === count - 1 : false;
    const avatar =
      role === 'ai'
        ? 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
        : 'https://avatars.githubusercontent.com/u/76239030?v=4';

    messages.push({
      key, // Unique identifier
      role, // user | ai customize according to model definition
      placement, // start | end bubble position
      content, // Message content when streaming, just change this value, here we don't use streaming data for now
      loading, // Current bubble loading state
      shape, // Bubble shape
      variant, // Bubble style
      isMarkdown, // Whether to render as markdown
      typing, // Whether to enable typewriter effect, this property won't conflict with streaming
      isFog: role === 'ai', // Whether to enable typing fog effect, this effect is new in v1.1.6 and works when typing is true, this effect will override typing's suffix property
      avatar,
      avatarSize: '24px', // Avatar placeholder size
      avatarGap: '12px' // Distance between avatar and bubble
    });
  }
  return messages;
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 24px">
    <div
      style="
        display: flex;
        gap: 5px;
        border: 1px solid gray;
        border-radius: 12px;
        padding: 8px;
        flex-direction: column;
      "
    >
      <span>Scrollbar display:
        <el-switch
          v-model="alwaysShowScrollbar"
          inactive-text="Show on hover"
          active-text="Always show"
        /></span>
      <span>Bottom button loading state:
        <el-switch
          v-model="btnLoading"
          inactive-text="false"
          active-text="true"
        /></span>
      <span>Bottom button color: <el-color-picker v-model="btnColor" /></span>

      <span>Bottom button position</span>
      <span>Distance from bottom: <el-slider v-model="bottomValue" /></span>
      <span>Distance from left: <el-slider v-model="leftValue" /></span>

      <span>Bottom button size: <el-slider v-model="btnSize" /></span>
    </div>

    <BubbleList
      :list="list"
      max-height="350px"
      :always-show-scrollbar="alwaysShowScrollbar"
      :btn-color="btnColor"
      :btn-loading="btnLoading"
      :back-button-position="backButtonPosition"
      :btn-icon-size="btnSize"
    />
  </div>
</template>

Scroll Complete Event

📌 Warning

This is only needed in very special cases. It is not suitable for streaming output, as it will quickly trigger the typing end event.

trigger-indices:

complete Event and trigger-indices Property

🍉This property is rarely used, please use it judiciously for more fine-grained control over your bubble's completion events in the list.

You can trigger the list through the @complete event, which calls back when each typing Bubble component completes typing. @complete returns two parameters: instance is the typewriter component instance and index is the index of BubbleListItem.

💡 Tip

The @complete event will only trigger callback events for Bubble components with typing property set to true.
If you configure multiple bubbles with typing property in the list, the list by default only handles the @complete event of the last bubble with typing set to true.

💌 Info

If you need to handle completion callback events for multiple bubbles with typing set to true, you can specify the indices of bubbles to handle through the triggerIndices property. It's of type 'only-last' | 'all' | number[].
Default is 'only-last', only executes the @complete event of the last bubble with typing set to true.
'all' means execute @complete events for all bubbles with typing set to true. @complete will be executed multiple times.
number[] sets the indices of BubbleListItem you want to monitor. The component will automatically filter invalid indices and output console.warn

vue

<script setup lang="ts">
import type {
  BubbleListItemProps,
  BubbleListProps
} from 'vue-element-plus-x/types/BubbleList';
import type { TypewriterInstance } from 'vue-element-plus-x/types/Typewriter';

type listType = BubbleListItemProps & {
  key: number;
  role: 'user' | 'ai';
};

// Example call
const list = ref<BubbleListProps<listType>['list']>(generateFakeItems(0));

function generateFakeItems(count: number): listType[] {
  const messages: listType[] = [];
  for (let i = 0; i < count; i++) {
    const role = i % 2 === 0 ? 'ai' : 'user';
    const placement = role === 'ai' ? 'start' : 'end';
    const key = i + 1;
    const content =
      role === 'ai'
        ? '💖 Thank you for using Element Plus X ! Your support is our strongest motivation for open source ~'
        : `Hahaha, let me try`;
    const loading = false;
    const shape = 'corner';
    const variant = role === 'ai' ? 'filled' : 'outlined';
    const isMarkdown = false;
    const typing = role === 'ai';
    const avatar =
      role === 'ai'
        ? 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
        : 'https://avatars.githubusercontent.com/u/76239030?v=4';

    messages.push({
      key,
      role,
      placement,
      content,
      loading,
      shape,
      variant,
      isMarkdown,
      typing,
      avatar,
      avatarSize: '24px'
    });
  }
  return messages;
}

function onComplete(instance: TypewriterInstance, index: number) {
  console.log('@complete', instance, index);
}

const triggerIndices = ref<BubbleListProps['triggerIndices']>('only-last');

function changeTriggerIndices(type: 'only-last' | 'all' | number[]) {
  triggerIndices.value = type;
  // Regenerate list data
  list.value = [];
  nextTick(() => {
    list.value = generateFakeItems(7);
  });
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <div style="display: flex; align-items: center">
      <span style="margin-right: 12px">trigger-indices: </span>
      <el-button
        style="width: fit-content"
        @click="changeTriggerIndices('only-last')"
      >
        only-last
      </el-button>
      <el-button
        style="width: fit-content"
        type="primary"
        @click="changeTriggerIndices('all')"
      >
        all
      </el-button>
      <el-button
        style="width: fit-content"
        type="success"
        @click="changeTriggerIndices([1, 2, 3])"
      >
        [1, 2, 3]
      </el-button>
    </div>

    <BubbleList
      :list="list"
      max-height="350px"
      :trigger-indices="triggerIndices"
      @complete="onComplete"
    />
  </div>
</template>

Props

Name	Type	Required	Default	Description
`list`	Array	Yes	None	Array containing bubble information. Each element is an object with `content`, `placement`, `loading`, `shape`, `variant`, `isMarkdown`, `typing`, and other `Bubble` properties to configure the display and style of each bubble.
`autoScroll`	Boolean	No	true	Whether to enable automatic scrolling.
`maxHeight`	String	No	'-'	Maximum height of the bubble list container.(By default, the height of the wrapper container is inherited)
`alwaysShowScrollbar`	Boolean	No	false	Whether to always show the scrollbar. Default is `false`.
`backButtonThreshold`	Number	No	80	Back to bottom button display threshold. When the scrollbar is more than this distance from the bottom, the button will be shown.
`showBackButton`	Boolean	No	true	Whether to show the back to bottom button. Default is `true`.
`backButtonPosition`	`{ bottom: '20px', left: 'calc(50% - 19px)' }`	No	`{ bottom: '20px', left: 'calc(50% - 19px)' }`	Position of the back to bottom button. Default is centered at the bottom.
`btnLoading`	Boolean	No	true	Whether to enable loading state for the back to bottom button. Default is `true`.
`btnColor`	String	No	'#409EFF'	Color of the back to bottom button. Default is `'#409EFF'`.
`btnIconSize`	Number	No	24	Icon size of the back to bottom button. Default is 24px.
`triggerIndices`	'only-last' \| 'all' \| number[]	No	'only-last'	Index array of bubbles that trigger the `complete` event. Default is `'only-last'`.

Events

Event Name	Parameter	Type	Description
`@complete`	(instance, index)	Function	Triggered when the typing effect of a bubble is completed.

Ref Instance Methods

Name	Type	Description
`scrollToTop`	Function	Scroll to the top.
`scrollToBottom`	Function	Scroll to the bottom.
`scrollToBubble`	Function	Scroll to the specified bubble index.

Slots

Slot Name	Parameter	Type	Description
`#avatar`	-	Slot	Custom avatar display content
`#header`	-	Slot	Custom bubble header content
`#content`	-	Slot	Custom bubble content
`#loading`	-	Slot	Custom bubble loading state content
`#footer`	-	Slot	Custom bubble footer content

Features

Smart Scrolling - Automatically tracks the latest message position
Deep Customization - Full slot passthrough for bubble components
Multiple Scrolling Methods - Scroll to top, bottom, or specific position
Typing Effect - Supports typing effect
Multiple Styles - Supports various styles such as round, square, etc.

BubbleList Component

Introduction ​

Code Examples ​

Basic Usage ​

Customized List ​

Auto Scroll & Scroll to Specific Position ​

Back to Top Button ​

Scroll Complete Event ​

Props ​

Events ​

Ref Instance Methods ​

Slots ​

Features ​

Introduction

Code Examples

Basic Usage

Customized List

Auto Scroll & Scroll to Specific Position

Back to Top Button

Scroll Complete Event

Props

Events

Ref Instance Methods

Slots

Features