@vunk/plus 1.8.3 → 1.8.4

package/components/index3.mjs

@@ -1,11 +1,33 @@
-import { defineComponent, computed, openBlock, createElementBlock, mergeProps, unref, renderSlot, shallowRef, watchEffect, readonly, warn, getCurrentInstance, inject, ref, watch, customRef, getCurrentScope, onScopeDispose, onMounted, nextTick, isRef, createElementVNode, createBlock, resolveDynamicComponent, withCtx, Fragment, normalizeClass, createCommentVNode, provide, reactive, toRef, onUnmounted, useSlots, Text, onBeforeUnmount, Teleport as Teleport$1, markRaw, effectScope, createVNode, Transition, normalizeStyle, withModifiers, createTextVNode, toDisplayString, renderList, useAttrs as useAttrs$1, createSlots, normalizeProps, guardReactiveProps, TransitionGroup, withKeys, createStaticVNode, withDirectives, cloneVNode, Comment, vShow, onDeactivated, onBeforeMount, onActivated, onUpdated, resolveComponent, toHandlers, h as h$2, isVNode, triggerRef, onBeforeUpdate, shallowReactive, toRefs, toValue, isReadonly, render as render$2 } from 'vue';
+import { defineComponent, openBlock, createElementBlock, createElementVNode, computed, mergeProps, unref, renderSlot, shallowRef, watchEffect, readonly, warn, getCurrentInstance, inject, ref, watch, customRef, getCurrentScope, onScopeDispose, onMounted, nextTick, isRef, createBlock, resolveDynamicComponent, withCtx, Fragment, normalizeClass, createCommentVNode, provide, reactive, toRef, onUnmounted, useSlots, Text, onBeforeUnmount, Teleport as Teleport$1, markRaw, effectScope, createVNode, Transition, normalizeStyle, withModifiers, createTextVNode, toDisplayString, renderList, useAttrs as useAttrs$1, createSlots, normalizeProps, guardReactiveProps, TransitionGroup, withKeys, withDirectives, cloneVNode, Comment, vShow, onDeactivated, onBeforeMount, onActivated, onUpdated, resolveComponent, toHandlers, h as h$2, isVNode, triggerRef, onBeforeUpdate, shallowReactive, toRefs, toValue, isReadonly, render as render$2, createStaticVNode } from 'vue';
 import { VkBubbleRenderer, VkBubbleRenderTemplates, VkBubbleTemplates } from '@vunk/plus/components/bubble-templates';
 import { VkSpreadTo } from '@vunk/core/components/spread-to';
 import { ElAutoResizer } from 'element-plus';
-import { noop as noop$1 } from '@vunk/shared/function';
+import { VkScrollbar } from '@vunk/plus/components/scrollbar';
 import { _ as _export_sfc$2 } from './_plugin-vue_export-helper.mjs';
+import { noop as noop$1 } from '@vunk/shared/function';
 import '@vunk/plus/components/agent-chat-provider';
 
+/*! Element Plus Icons Vue v2.3.1 */
+
+var arrow_down_bold_vue_vue_type_script_setup_true_lang_default$1 = /* @__PURE__ */ defineComponent({
+  name: "ArrowDownBold",
+  __name: "arrow-down-bold",
+  setup(__props) {
+    return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 1024 1024"
+    }, [
+      createElementVNode("path", {
+        fill: "currentColor",
+        d: "M104.704 338.752a64 64 0 0 1 90.496 0l316.8 316.8 316.8-316.8a64 64 0 0 1 90.496 90.496L557.248 791.296a64 64 0 0 1-90.496 0L104.704 429.248a64 64 0 0 1 0-90.496z"
+      })
+    ]));
+  }
+});
+
+// src/components/arrow-down-bold.vue
+var arrow_down_bold_default$1 = arrow_down_bold_vue_vue_type_script_setup_true_lang_default$1;
+
 const defaultNamespace = "el";
 const statePrefix = "is-";
 const _bem = (namespace, block, blockSuffix, element, modifier) => {
@@ -455,7 +477,7 @@ const __default__$j = defineComponent({
   name: "ElIcon",
   inheritAttrs: false
 });
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   ...__default__$j,
   props: iconProps,
   setup(__props) {
@@ -480,7 +502,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var Icon = /* @__PURE__ */ _export_sfc$1(_sfc_main$w, [["__file", "icon.vue"]]);
+var Icon = /* @__PURE__ */ _export_sfc$1(_sfc_main$u, [["__file", "icon.vue"]]);
 const ElIcon = withInstall(Icon);
 
 var freeGlobal = typeof global == "object" && global && global.Object === Object && global;
@@ -2965,7 +2987,7 @@ function useButtonCustomStyle(props) {
 const __default__$1$6 = defineComponent({
   name: "ElButton"
 });
-const _sfc_main$1$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1$a = /* @__PURE__ */ defineComponent({
   ...__default__$1$6,
   props: buttonProps,
   emits: buttonEmits,
@@ -3042,7 +3064,7 @@ const _sfc_main$1$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var Button = /* @__PURE__ */ _export_sfc$1(_sfc_main$1$9, [["__file", "button.vue"]]);
+var Button = /* @__PURE__ */ _export_sfc$1(_sfc_main$1$a, [["__file", "button.vue"]]);
 const buttonGroupProps = {
   size: buttonProps.size,
   type: buttonProps.type
@@ -3050,7 +3072,7 @@ const buttonGroupProps = {
 const __default__$i = defineComponent({
   name: "ElButtonGroup"
 });
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   ...__default__$i,
   props: buttonGroupProps,
   setup(__props) {
@@ -3069,7 +3091,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var ButtonGroup = /* @__PURE__ */ _export_sfc$1(_sfc_main$v, [["__file", "button-group.vue"]]);
+var ButtonGroup = /* @__PURE__ */ _export_sfc$1(_sfc_main$t, [["__file", "button-group.vue"]]);
 const ElButton = withInstall(Button, {
   ButtonGroup
 });
@@ -3616,7 +3638,7 @@ const useEscapeKeydown = (handler) => {
     }
   });
 };
-const _sfc_main$1$8 = defineComponent({
+const _sfc_main$1$9 = defineComponent({
   name: "ElFocusTrap",
   inheritAttrs: false,
   props: {
@@ -3858,10 +3880,10 @@ const _sfc_main$1$8 = defineComponent({
     };
   }
 });
-function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
   return renderSlot(_ctx.$slots, "default", { handleKeydown: _ctx.onKeydown });
 }
-var ElFocusTrap = /* @__PURE__ */ _export_sfc$1(_sfc_main$1$8, [["render", _sfc_render$a], ["__file", "focus-trap.vue"]]);
+var ElFocusTrap = /* @__PURE__ */ _export_sfc$1(_sfc_main$1$9, [["render", _sfc_render$9], ["__file", "focus-trap.vue"]]);
 const teleportProps = buildProps({
   to: {
     type: definePropType([String, Object]),
@@ -3869,7 +3891,7 @@ const teleportProps = buildProps({
   },
   disabled: Boolean
 });
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "teleport",
   props: teleportProps,
   setup(__props) {
@@ -3883,7 +3905,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var Teleport = /* @__PURE__ */ _export_sfc$1(_sfc_main$u, [["__file", "teleport.vue"]]);
+var Teleport = /* @__PURE__ */ _export_sfc$1(_sfc_main$s, [["__file", "teleport.vue"]]);
 const ElTeleport = withInstall(Teleport);
 
 const mutable = (val) => val;
@@ -4161,7 +4183,7 @@ const imageViewerEmits = {
 const __default__$1$5 = defineComponent({
   name: "ElImageViewer"
 });
-const _sfc_main$1$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1$8 = /* @__PURE__ */ defineComponent({
   ...__default__$1$5,
   props: imageViewerProps,
   emits: imageViewerEmits,
@@ -4591,7 +4613,7 @@ const _sfc_main$1$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var ImageViewer = /* @__PURE__ */ _export_sfc$1(_sfc_main$1$7, [["__file", "image-viewer.vue"]]);
+var ImageViewer = /* @__PURE__ */ _export_sfc$1(_sfc_main$1$8, [["__file", "image-viewer.vue"]]);
 const ElImageViewer = withInstall(ImageViewer);
 const imageProps = buildProps({
   hideOnClickModal: Boolean,
@@ -4660,7 +4682,7 @@ const __default__$h = defineComponent({
   name: "ElImage",
   inheritAttrs: false
 });
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   ...__default__$h,
   props: imageProps,
   emits: imageEmits,
@@ -4871,7 +4893,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var Image$1 = /* @__PURE__ */ _export_sfc$1(_sfc_main$t, [["__file", "image.vue"]]);
+var Image$1 = /* @__PURE__ */ _export_sfc$1(_sfc_main$r, [["__file", "image.vue"]]);
 withInstall(Image$1);
 
 const progressProps = buildProps({
@@ -6375,7 +6397,7 @@ const __default__$1$4 = defineComponent({
   name: "ElUploadContent",
   inheritAttrs: false
 });
-const _sfc_main$2$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2$6 = /* @__PURE__ */ defineComponent({
   ...__default__$1$4,
   props: uploadContentProps,
   setup(__props, { expose }) {
@@ -6557,7 +6579,7 @@ const _sfc_main$2$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var UploadContent = /* @__PURE__ */ _export_sfc$1(_sfc_main$2$5, [["__file", "upload-content.vue"]]);
+var UploadContent = /* @__PURE__ */ _export_sfc$1(_sfc_main$2$6, [["__file", "upload-content.vue"]]);
 const SCOPE$2 = "ElUpload";
 const revokeFileObjectURL = (file) => {
   var _a;
@@ -6688,7 +6710,7 @@ const useHandlers = (props, uploadRef) => {
 const __default__$f = defineComponent({
   name: "ElUpload"
 });
-const _sfc_main$1$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1$7 = /* @__PURE__ */ defineComponent({
   ...__default__$f,
   props: uploadProps,
   setup(__props, { expose }) {
@@ -6803,7 +6825,7 @@ const _sfc_main$1$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var Upload = /* @__PURE__ */ _export_sfc$1(_sfc_main$1$6, [["__file", "upload.vue"]]);
+var Upload = /* @__PURE__ */ _export_sfc$1(_sfc_main$1$7, [["__file", "upload.vue"]]);
 withInstall(Upload);
 
 /*! @license DOMPurify 3.2.6 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.6/LICENSE */
@@ -12963,7 +12985,7 @@ function useConfigProvider() {
 }
 
 const _hoisted_1$a = ["innerHTML"];
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
     content: { default: "" },
@@ -13145,7 +13167,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Typewriter = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-9311cb64"]]);
+const Typewriter = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-9311cb64"]]);
 
 const avatarProps = buildProps({
   size: {
@@ -13179,7 +13201,7 @@ const avatarEmits = {
 const __default__$e = defineComponent({
   name: "ElAvatar"
 });
-const _sfc_main$1$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1$6 = /* @__PURE__ */ defineComponent({
   ...__default__$e,
   props: avatarProps,
   emits: avatarEmits,
@@ -13234,7 +13256,7 @@ const _sfc_main$1$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var Avatar = /* @__PURE__ */ _export_sfc$1(_sfc_main$1$5, [["__file", "avatar.vue"]]);
+var Avatar = /* @__PURE__ */ _export_sfc$1(_sfc_main$1$6, [["__file", "avatar.vue"]]);
 const ElAvatar = withInstall(Avatar);
 const _hoisted_1$9 = {
   key: 0,
@@ -13265,7 +13287,7 @@ const _hoisted_8 = {
   key: 1,
   class: "el-bubble-footer"
 };
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
     isFog: { type: [Boolean, Object] },
@@ -13465,309 +13487,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Bubble = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-a52d8fe0"]]);
-
-const _sfc_main$q = {};
-const _hoisted_1$8 = {
-  xmlns: "http://www.w3.org/2000/svg",
-  "xmlns:xlink": "http://www.w3.org/1999/xlink",
-  version: "1.1",
-  width: "704",
-  height: "704",
-  viewBox: "0 0 704 704"
-};
-function _sfc_render$9(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$8, _cache[0] || (_cache[0] = [
-    createStaticVNode('<defs><filter id="master_svg0_62_10054" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="-0.030120481927710843" y="-0.030120481927710843" width="1.0602409638554218" height="1.0602409638554218"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="5" result="effect1_foregroundBlur"></feGaussianBlur></filter><linearGradient id="master_svg1_62_10082" x1="0.5" y1="-0.13192443549633026" x2="0.42319029569625854" y2="1.368432641029358"><stop offset="9.145302325487137%" stop-color="currentColor" stop-opacity="1"></stop><stop offset="13.636428117752075%" stop-color="currentColor" stop-opacity="0.07539999485015869"></stop><stop offset="16.968481242656708%" stop-color="currentColor" stop-opacity="0"></stop></linearGradient></defs><g transform="matrix(0,1,-1,0,704,-664)" filter="url(#master_svg0_62_10054)"><path d="M1016,684C1199.359,684,1348,535.359,1348,352C1348,168.641,1199.359,20,1016,20C832.641,20,684,168.641,684,352C684,535.359,832.641,684,1016,684ZM1016,32C1192.731,32,1336,175.269,1336,352C1336,528.731,1192.731,672,1016,672C839.269,672,696,528.731,696,352C696,175.269,839.269,32,1016,32Z" fill-rule="evenodd" fill="url(#master_svg1_62_10082)" fill-opacity="1"></path></g>', 2)
-  ]));
-}
-const loadingBg = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$9]]);
-
-const useScrollDetector = (elementRef) => {
-  const hasVertical = ref(false);
-  const hasHorizontal = ref(false);
-  const check = () => {
-    const el = elementRef.value;
-    if (!el)
-      return;
-    hasVertical.value = el.scrollHeight > el.clientHeight;
-    hasHorizontal.value = el.scrollWidth > el.clientWidth;
-  };
-  onMounted(() => {
-    check();
-    const observer = new ResizeObserver(check);
-    observer.observe(elementRef.value);
-    onBeforeUnmount(() => observer.disconnect());
-  });
-  return {
-    hasVertical,
-    // 是否有纵向滚动条
-    hasHorizontal,
-    // 是否有横向滚动条
-    check
-    // 检查滚动条状态
-  };
-};
-const threshold = 20;
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
-  __name: "index",
-  props: {
-    list: { default: () => [] },
-    maxHeight: { default: "500px" },
-    triggerIndices: { default: "only-last" },
-    showBackButton: { type: Boolean, default: true },
-    backButtonThreshold: { default: 80 },
-    backButtonPosition: { default: () => {
-      return { bottom: "20px", left: "calc(50% - 19px)" };
-    } },
-    alwaysShowScrollbar: { type: Boolean, default: false },
-    btnLoading: { type: Boolean, default: true },
-    btnColor: { default: "#409EFF" },
-    btnIconSize: { default: 24 }
-  },
-  emits: ["complete"],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const emits = __emit;
-    function initStyle() {
-      document.documentElement.style.setProperty(
-        "--el-bubble-list-max-height",
-        props.maxHeight
-      );
-      document.documentElement.style.setProperty(
-        "--el-bubble-list-btn-size",
-        `${props.btnIconSize}px`
-      );
-    }
-    onMounted(() => {
-      initStyle();
-    });
-    const scrollContainer = ref(null);
-    const { hasVertical } = useScrollDetector(scrollContainer);
-    const stopAutoScrollToBottom = ref(false);
-    const lastScrollTop = ref(0);
-    const accumulatedScrollUpDistance = ref(0);
-    const resizeObserver = ref(null);
-    const showBackToBottom = ref(false);
-    watch(
-      () => props.list.length,
-      () => {
-        if (props.list && props.list.length > 0) {
-          nextTick(() => {
-            autoScroll();
-          });
-        }
-      },
-      { immediate: true }
-    );
-    function scrollToTop() {
-      stopAutoScrollToBottom.value = true;
-      nextTick(() => {
-        scrollContainer.value.scrollTop = 0;
-      });
-    }
-    function scrollToBottom() {
-      try {
-        if (scrollContainer.value && scrollContainer.value.scrollHeight) {
-          nextTick(() => {
-            scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight;
-            stopAutoScrollToBottom.value = false;
-          });
-        }
-      } catch (error) {
-      }
-    }
-    function scrollToBubble(index) {
-      const container = scrollContainer.value;
-      if (!container)
-        return;
-      const bubbles = container.querySelectorAll(".el-bubble");
-      if (index >= bubbles.length)
-        return;
-      stopAutoScrollToBottom.value = true;
-      const targetBubble = bubbles[index];
-      const containerRect = container.getBoundingClientRect();
-      const bubbleRect = targetBubble.getBoundingClientRect();
-      const scrollPosition = bubbleRect.top - containerRect.top + container.scrollTop;
-      container.scrollTo({
-        top: scrollPosition,
-        behavior: "smooth"
-      });
-    }
-    function autoScroll() {
-      if (scrollContainer.value) {
-        const listBubbles = scrollContainer.value.querySelectorAll(
-          ".el-bubble-content-wrapper"
-        );
-        if (resizeObserver.value) {
-          resizeObserver.value.disconnect();
-        }
-        const lastItem = listBubbles[listBubbles.length - 1];
-        if (lastItem) {
-          resizeObserver.value = new ResizeObserver(() => {
-            if (!stopAutoScrollToBottom.value) {
-              scrollToBottom();
-            }
-          });
-          resizeObserver.value.observe(lastItem);
-        }
-      }
-    }
-    const completeMap = ref({});
-    const typingList = computed(
-      () => props.list.map((item, _index_) => ({ ...item, _index_ })).filter((item) => item.typing)
-    );
-    function handleBubbleComplete(index, instance) {
-      var _a;
-      switch (props.triggerIndices) {
-        case "only-last":
-          if (index === ((_a = typingList.value[typingList.value.length - 1]) == null ? void 0 : _a._index_)) {
-            emits("complete", instance, index);
-          }
-          break;
-        case "all":
-          completeMap.value[index] = instance;
-          if (Object.keys(completeMap.value).length === typingList.value.length) {
-            emits("complete", instance, index);
-          }
-          break;
-        default:
-          props.triggerIndices.includes(index) && emits("complete", instance, index);
-          break;
-      }
-    }
-    function handleScroll() {
-      if (scrollContainer.value) {
-        const { scrollTop, scrollHeight, clientHeight } = scrollContainer.value;
-        const distanceToBottom = scrollHeight - (scrollTop + clientHeight);
-        showBackToBottom.value = props.showBackButton && distanceToBottom > props.backButtonThreshold;
-        const isCloseToBottom = scrollTop + clientHeight >= scrollHeight - 30;
-        const isScrollingUp = lastScrollTop.value > scrollTop;
-        const isScrollingDown = lastScrollTop.value < scrollTop;
-        const scrollDelta = lastScrollTop.value - scrollTop;
-        lastScrollTop.value = scrollTop;
-        if (isScrollingUp) {
-          accumulatedScrollUpDistance.value += scrollDelta;
-          if (accumulatedScrollUpDistance.value >= threshold) {
-            if (!stopAutoScrollToBottom.value) {
-              stopAutoScrollToBottom.value = true;
-            }
-            accumulatedScrollUpDistance.value = 0;
-          }
-        } else {
-          accumulatedScrollUpDistance.value = 0;
-        }
-        if (isScrollingDown && isCloseToBottom) {
-          if (stopAutoScrollToBottom.value) {
-            stopAutoScrollToBottom.value = false;
-          }
-        }
-      }
-    }
-    __expose({
-      scrollToTop,
-      scrollToBottom,
-      scrollToBubble
-    });
-    return (_ctx, _cache) => {
-      const _component_el_icon = ElIcon;
-      return openBlock(), createElementBlock("div", {
-        ref_key: "scrollContainer",
-        ref: scrollContainer,
-        class: normalizeClass(["el-bubble-list", { "always-scrollbar": props.alwaysShowScrollbar }]),
-        onScroll: handleScroll
-      }, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.list, (item, index) => {
-          return openBlock(), createBlock(Bubble, {
-            key: index,
-            content: item.content,
-            placement: item.placement,
-            loading: item.loading,
-            shape: item.shape,
-            variant: item.variant,
-            "is-markdown": item.isMarkdown,
-            "is-fog": item.isFog,
-            typing: item.typing,
-            "max-width": item.maxWidth,
-            avatar: item.avatar,
-            "avatar-size": item.avatarSize,
-            "avatar-gap": item.avatarGap,
-            "avatar-shape": item.avatarShape,
-            "avatar-src-set": item.avatarSrcSet,
-            "avatar-alt": item.avatarAlt,
-            "avatar-fit": item.avatarFit,
-            "no-style": item.noStyle,
-            onFinish: (instance) => handleBubbleComplete(index, instance)
-          }, createSlots({ _: 2 }, [
-            _ctx.$slots.avatar ? {
-              name: "avatar",
-              fn: withCtx(() => [
-                renderSlot(_ctx.$slots, "avatar", { item }, void 0, true)
-              ]),
-              key: "0"
-            } : void 0,
-            _ctx.$slots.header ? {
-              name: "header",
-              fn: withCtx(() => [
-                renderSlot(_ctx.$slots, "header", { item }, void 0, true)
-              ]),
-              key: "1"
-            } : void 0,
-            _ctx.$slots.content ? {
-              name: "content",
-              fn: withCtx(() => [
-                renderSlot(_ctx.$slots, "content", { item }, void 0, true)
-              ]),
-              key: "2"
-            } : void 0,
-            _ctx.$slots.footer ? {
-              name: "footer",
-              fn: withCtx(() => [
-                renderSlot(_ctx.$slots, "footer", { item }, void 0, true)
-              ]),
-              key: "3"
-            } : void 0,
-            _ctx.$slots.loading ? {
-              name: "loading",
-              fn: withCtx(() => [
-                renderSlot(_ctx.$slots, "loading", { item }, void 0, true)
-              ]),
-              key: "4"
-            } : void 0
-          ]), 1032, ["content", "placement", "loading", "shape", "variant", "is-markdown", "is-fog", "typing", "max-width", "avatar", "avatar-size", "avatar-gap", "avatar-shape", "avatar-src-set", "avatar-alt", "avatar-fit", "no-style", "onFinish"]);
-        }), 128)),
-        unref(showBackToBottom) && unref(hasVertical) ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          class: normalizeClass(["el-bubble-list-default-back-button", {
-            "el-bubble-list-back-to-bottom-solt": _ctx.$slots.backToBottom
-          }]),
-          style: normalizeStyle({
-            bottom: _ctx.backButtonPosition.bottom,
-            left: _ctx.backButtonPosition.left
-          }),
-          onClick: scrollToBottom
-        }, [
-          renderSlot(_ctx.$slots, "backToBottom", {}, () => [
-            createVNode(_component_el_icon, {
-              class: "el-bubble-list-back-to-bottom-icon",
-              style: normalizeStyle({ color: props.btnColor })
-            }, {
-              default: withCtx(() => [
-                createVNode(unref(arrow_down_bold_default)),
-                props.btnLoading ? (openBlock(), createBlock(loadingBg, {
-                  key: 0,
-                  class: "back-to-bottom-loading-svg-bg"
-                })) : createCommentVNode("", true)
-              ]),
-              _: 1
-            }, 8, ["style"])
-          ], true)
-        ], 6)) : createCommentVNode("", true)
-      ], 34);
-    };
-  }
-});
-const BubbleList = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-854e3219"]]);
+const Bubble = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-a52d8fe0"]]);
 
 function castArray() {
   if (!arguments.length) {
@@ -15543,7 +15263,7 @@ const whenMouse = (handler) => {
 const __default__$2$2 = defineComponent({
   name: "ElTooltipTrigger"
 });
-const _sfc_main$2$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2$5 = /* @__PURE__ */ defineComponent({
   ...__default__$2$2,
   props: useTooltipTriggerProps,
   setup(__props, { expose }) {
@@ -15603,7 +15323,7 @@ const _sfc_main$2$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var ElTooltipTrigger = /* @__PURE__ */ _export_sfc$1(_sfc_main$2$4, [["__file", "trigger.vue"]]);
+var ElTooltipTrigger = /* @__PURE__ */ _export_sfc$1(_sfc_main$2$5, [["__file", "trigger.vue"]]);
 const usePopperContainerId = () => {
   const namespace = useGetDerivedNamespace();
   const idInjection = useIdInjection();
@@ -15640,7 +15360,7 @@ const __default__$1$3 = defineComponent({
   name: "ElTooltipContent",
   inheritAttrs: false
 });
-const _sfc_main$1$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1$5 = /* @__PURE__ */ defineComponent({
   ...__default__$1$3,
   props: useTooltipContentProps,
   setup(__props, { expose }) {
@@ -15816,7 +15536,7 @@ const _sfc_main$1$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var ElTooltipContent = /* @__PURE__ */ _export_sfc$1(_sfc_main$1$4, [["__file", "content.vue"]]);
+var ElTooltipContent = /* @__PURE__ */ _export_sfc$1(_sfc_main$1$5, [["__file", "content.vue"]]);
 const __default__$d = defineComponent({
   name: "ElTooltip"
 });
@@ -16015,7 +15735,7 @@ const thumbProps = buildProps({
   always: Boolean
 });
 const COMPONENT_NAME$1$1 = "Thumb";
-const _sfc_main$2$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2$4 = /* @__PURE__ */ defineComponent({
   __name: "thumb",
   props: thumbProps,
   setup(__props) {
@@ -16144,7 +15864,7 @@ const _sfc_main$2$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var Thumb = /* @__PURE__ */ _export_sfc$1(_sfc_main$2$3, [["__file", "thumb.vue"]]);
+var Thumb = /* @__PURE__ */ _export_sfc$1(_sfc_main$2$4, [["__file", "thumb.vue"]]);
 const barProps = buildProps({
   always: {
     type: Boolean,
@@ -16155,7 +15875,7 @@ const barProps = buildProps({
     required: true
   }
 });
-const _sfc_main$1$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1$4 = /* @__PURE__ */ defineComponent({
   __name: "bar",
   props: barProps,
   setup(__props, { expose }) {
@@ -16213,7 +15933,7 @@ const _sfc_main$1$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var Bar = /* @__PURE__ */ _export_sfc$1(_sfc_main$1$3, [["__file", "bar.vue"]]);
+var Bar = /* @__PURE__ */ _export_sfc$1(_sfc_main$1$4, [["__file", "bar.vue"]]);
 const scrollbarProps = buildProps({
   distance: {
     type: Number,
@@ -16482,13 +16202,13 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
 var Scrollbar = /* @__PURE__ */ _export_sfc$1(_sfc_main$n, [["__file", "scrollbar.vue"]]);
 const ElScrollbar = withInstall(Scrollbar);
 
-const _sfc_main$1$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1$3 = /* @__PURE__ */ defineComponent({
   inheritAttrs: false
 });
 function _sfc_render$1$2(_ctx, _cache, $props, $setup, $data, $options) {
   return renderSlot(_ctx.$slots, "default");
 }
-var Collection = /* @__PURE__ */ _export_sfc$1(_sfc_main$1$2, [["render", _sfc_render$1$2], ["__file", "collection.vue"]]);
+var Collection = /* @__PURE__ */ _export_sfc$1(_sfc_main$1$3, [["render", _sfc_render$1$2], ["__file", "collection.vue"]]);
 const _sfc_main$m = /* @__PURE__ */ defineComponent({
   name: "ElCollectionItem",
   inheritAttrs: false
@@ -17213,7 +16933,7 @@ const _sfc_main$5$1 = defineComponent({
     };
   }
 });
-function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$3$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_roving_focus_collection_item = resolveComponent("el-roving-focus-collection-item");
   return openBlock(), createBlock(_component_el_roving_focus_collection_item, {
     id: _ctx.id,
@@ -17226,7 +16946,7 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["id", "focusable", "active"]);
 }
-var ElRovingFocusItem = /* @__PURE__ */ _export_sfc$1(_sfc_main$5$1, [["render", _sfc_render$3], ["__file", "roving-focus-item.vue"]]);
+var ElRovingFocusItem = /* @__PURE__ */ _export_sfc$1(_sfc_main$5$1, [["render", _sfc_render$3$1], ["__file", "roving-focus-item.vue"]]);
 const _sfc_main$4$2 = defineComponent({
   name: "DropdownItemImpl",
   components: {
@@ -17277,7 +16997,7 @@ const _sfc_main$4$2 = defineComponent({
     };
   }
 });
-function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$2$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_icon = resolveComponent("el-icon");
   return openBlock(), createElementBlock(Fragment, null, [
     _ctx.divided ? (openBlock(), createElementBlock("li", {
@@ -17307,7 +17027,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     ], 16, ["aria-disabled", "tabindex", "role", "onClick", "onFocus", "onKeydown", "onMousedown", "onPointermove", "onPointerleave"])
   ], 64);
 }
-var ElDropdownItemImpl = /* @__PURE__ */ _export_sfc$1(_sfc_main$4$2, [["render", _sfc_render$2], ["__file", "dropdown-item-impl.vue"]]);
+var ElDropdownItemImpl = /* @__PURE__ */ _export_sfc$1(_sfc_main$4$2, [["render", _sfc_render$2$1], ["__file", "dropdown-item-impl.vue"]]);
 const useDropdown = () => {
   const elDropdown = inject(DROPDOWN_INSTANCE_INJECTION_KEY, {});
   const _elDropdownSize = computed(() => elDropdown == null ? void 0 : elDropdown.dropdownSize);
@@ -17417,7 +17137,7 @@ function _sfc_render$1$1(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8, ["disabled", "text-value"]);
 }
 var DropdownItem = /* @__PURE__ */ _export_sfc$1(_sfc_main$3$2, [["render", _sfc_render$1$1], ["__file", "dropdown-item.vue"]]);
-const _sfc_main$2$2 = defineComponent({
+const _sfc_main$2$3 = defineComponent({
   name: "ElDropdownMenu",
   props: dropdownMenuProps,
   setup(props) {
@@ -17494,7 +17214,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
     renderSlot(_ctx.$slots, "default")
   ], 46, ["role", "aria-labelledby", "onBlur", "onFocus", "onKeydown", "onMousedown"]);
 }
-var DropdownMenu = /* @__PURE__ */ _export_sfc$1(_sfc_main$2$2, [["render", _sfc_render$7], ["__file", "dropdown-menu.vue"]]);
+var DropdownMenu = /* @__PURE__ */ _export_sfc$1(_sfc_main$2$3, [["render", _sfc_render$7], ["__file", "dropdown-menu.vue"]]);
 withInstall(Dropdown, {
   DropdownItem,
   DropdownMenu
@@ -29425,7 +29145,7 @@ const useCollapseItemDOM = (props, { focusing, isActive, id }) => {
 const __default__$1$1 = defineComponent({
   name: "ElCollapseItem"
 });
-const _sfc_main$2$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2$2 = /* @__PURE__ */ defineComponent({
   ...__default__$1$1,
   props: collapseItemProps,
   setup(__props, { expose }) {
@@ -29510,7 +29230,7 @@ const _sfc_main$2$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var CollapseItem = /* @__PURE__ */ _export_sfc$1(_sfc_main$2$1, [["__file", "collapse-item.vue"]]);
+var CollapseItem = /* @__PURE__ */ _export_sfc$1(_sfc_main$2$2, [["__file", "collapse-item.vue"]]);
 withInstall(Collapse, {
   CollapseItem
 });
@@ -29560,7 +29280,7 @@ const timelineItemProps = buildProps({
 const __default__$8 = defineComponent({
   name: "ElTimelineItem"
 });
-const _sfc_main$1$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1$2 = /* @__PURE__ */ defineComponent({
   ...__default__$8,
   props: timelineItemProps,
   setup(__props) {
@@ -29623,7 +29343,7 @@ const _sfc_main$1$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var TimelineItem = /* @__PURE__ */ _export_sfc$1(_sfc_main$1$1, [["__file", "timeline-item.vue"]]);
+var TimelineItem = /* @__PURE__ */ _export_sfc$1(_sfc_main$1$2, [["__file", "timeline-item.vue"]]);
 withInstall(Timeline, {
   TimelineItem
 });
@@ -46937,12 +46657,12 @@ var lodashExports = requireLodash();
 const _ = /* @__PURE__ */ getDefaultExportFromCjs(lodashExports);
 const _sfc_main$a = {};
 const _hoisted_1$6 = { class: "dot-spinner" };
-function _sfc_render$1(_ctx, _cache) {
+function _sfc_render$3(_ctx, _cache) {
   return openBlock(), createElementBlock("div", _hoisted_1$6, _cache[0] || (_cache[0] = [
     createStaticVNode('<div class="dot-spinner__dot" data-v-623b4e7e></div><div class="dot-spinner__dot" data-v-623b4e7e></div><div class="dot-spinner__dot" data-v-623b4e7e></div><div class="dot-spinner__dot" data-v-623b4e7e></div><div class="dot-spinner__dot" data-v-623b4e7e></div><div class="dot-spinner__dot" data-v-623b4e7e></div><div class="dot-spinner__dot" data-v-623b4e7e></div><div class="dot-spinner__dot" data-v-623b4e7e></div>', 8)
   ]));
 }
-const CustomLoading = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$1], ["__scopeId", "data-v-623b4e7e"]]);
+const CustomLoading = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$3], ["__scopeId", "data-v-623b4e7e"]]);
 const _hoisted_1$5 = { class: "elx-xmarkdown-container elx-run-code-content" };
 const _hoisted_2$2 = {
   style: { "position": "relative", "width": "100%", "height": "100%" },
@@ -47785,7 +47505,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   }
 });
 const CodeLine = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-7ca0e1bd"]]);
-const _sfc_main$2 = defineComponent({
+const _sfc_main$2$1 = defineComponent({
   props: {
     raw: {
       type: Object,
@@ -47904,12 +47624,12 @@ function downloadSvgAsPng(svg2) {
   } catch (error) {
   }
 }
-const _hoisted_1$1 = { class: "toolbar-right" };
+const _hoisted_1$1$1 = { class: "toolbar-right" };
 const _hoisted_2$1 = {
   key: 1,
   class: "toolbar-divider"
 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1$1 = /* @__PURE__ */ defineComponent({
   __name: "MermaidToolbar",
   props: {
     toolbarConfig: { default: () => ({}) },
@@ -48077,7 +47797,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["model-value"])
         ], 4),
-        createElementVNode("div", _hoisted_1$1, [
+        createElementVNode("div", _hoisted_1$1$1, [
           props.isSourceCodeMode ? (openBlock(), createElementBlock("div", {
             key: 0,
             class: normalizeClass(["toolbar-action-btn", { "copy-success": isCopySuccess.value }]),
@@ -48163,8 +47883,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const MermaidToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-c91486b5"]]);
-const _hoisted_1 = { class: "toolbar-container" };
+const MermaidToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$1$1, [["__scopeId", "data-v-c91486b5"]]);
+const _hoisted_1$8 = { class: "toolbar-container" };
 const _hoisted_2 = {
   key: "source",
   class: "mermaid-source-code"
@@ -48302,7 +48022,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           default: withCtx(() => {
             var _a3, _b;
             return [
-              createElementVNode("div", _hoisted_1, [
+              createElementVNode("div", _hoisted_1$8, [
                 ((_a3 = unref(codeXSlot)) == null ? void 0 : _a3.codeMermaidHeader) ? (openBlock(), createBlock(resolveDynamicComponent(unref(codeXSlot).codeMermaidHeader), normalizeProps(mergeProps({ key: 0 }, exposedMethods.value)), null, 16)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                   ((_b = unref(codeXSlot)) == null ? void 0 : _b.codeMermaidHeaderControl) ? (openBlock(), createBlock(resolveDynamicComponent(unref(codeXSlot).codeMermaidHeaderControl), normalizeProps(mergeProps({ key: 0 }, exposedMethods.value)), null, 16)) : (openBlock(), createBlock(MermaidToolbar, {
                     key: 1,
@@ -48343,7 +48063,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
 });
 function useComponents() {
   const components = {
-    code: (raw2) => h$2(_sfc_main$2, { raw: raw2 })
+    code: (raw2) => h$2(_sfc_main$2$1, { raw: raw2 })
   };
   return components;
 }
@@ -79403,6 +79123,272 @@ function requirePrism() {
 }
 requirePrism();
 
+const _sfc_main$2 = {};
+
+const _hoisted_1$1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  "xmlns:xlink": "http://www.w3.org/1999/xlink",
+  version: "1.1",
+  width: "704",
+  height: "704",
+  viewBox: "0 0 704 704"
+};
+
+function _sfc_render$2(_ctx, _cache) {
+  return (openBlock(), createElementBlock("svg", _hoisted_1$1, _cache[0] || (_cache[0] = [
+    createStaticVNode("<defs><filter id=\"master_svg0_62_10054\" filterUnits=\"objectBoundingBox\" color-interpolation-filters=\"sRGB\" x=\"-0.030120481927710843\" y=\"-0.030120481927710843\" width=\"1.0602409638554218\" height=\"1.0602409638554218\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"></feFlood><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"></feBlend><feGaussianBlur stdDeviation=\"5\" result=\"effect1_foregroundBlur\"></feGaussianBlur></filter><linearGradient id=\"master_svg1_62_10082\" x1=\"0.5\" y1=\"-0.13192443549633026\" x2=\"0.42319029569625854\" y2=\"1.368432641029358\"><stop offset=\"9.145302325487137%\" stop-color=\"currentColor\" stop-opacity=\"1\"></stop><stop offset=\"13.636428117752075%\" stop-color=\"currentColor\" stop-opacity=\"0.07539999485015869\"></stop><stop offset=\"16.968481242656708%\" stop-color=\"currentColor\" stop-opacity=\"0\"></stop></linearGradient></defs><g transform=\"matrix(0,1,-1,0,704,-664)\" filter=\"url(#master_svg0_62_10054)\"><path d=\"M1016,684C1199.359,684,1348,535.359,1348,352C1348,168.641,1199.359,20,1016,20C832.641,20,684,168.641,684,352C684,535.359,832.641,684,1016,684ZM1016,32C1192.731,32,1336,175.269,1336,352C1336,528.731,1192.731,672,1016,672C839.269,672,696,528.731,696,352C696,175.269,839.269,32,1016,32Z\" fill-rule=\"evenodd\" fill=\"url(#master_svg1_62_10082)\" fill-opacity=\"1\"></path></g>", 2)
+  ])))
+}
+var loadingBg = /*#__PURE__*/_export_sfc$2(_sfc_main$2, [['render',_sfc_render$2],['__file',"/home/runner/work/vunk-plus/vunk-plus/packages/components/bubble-list/src/core/loading.vue"]]);
+
+var _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    },
+    autoScroll: {
+      type: Boolean,
+      default: true
+    },
+    maxHeight: {
+      type: String,
+      default: ""
+    },
+    alwaysShowScrollbar: {
+      type: Boolean,
+      default: false
+    },
+    backButtonThreshold: {
+      type: Number,
+      default: 80
+    },
+    showBackButton: {
+      type: Boolean,
+      default: true
+    },
+    backButtonPosition: {
+      type: Object,
+      default: () => {
+        return { bottom: "20px", left: "calc(50% - 19px)" };
+      }
+    },
+    btnLoading: {
+      type: Boolean,
+      default: true
+    },
+    btnColor: {
+      type: String,
+      default: "#409EFF"
+    },
+    btnIconSize: {
+      type: Number,
+      default: 24
+    },
+    scrollbarAppendTo: {
+      type: null,
+      default: void 0
+    }
+  },
+  emits: {
+    complete: null
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const scrollbarRef = ref();
+    function initStyle() {
+      document.documentElement.style.setProperty(
+        "--el-bubble-list-max-height",
+        props.maxHeight || "100%"
+      );
+      document.documentElement.style.setProperty(
+        "--el-bubble-list-btn-size",
+        `${props.btnIconSize}px`
+      );
+    }
+    onMounted(() => {
+      initStyle();
+    });
+    watch(
+      () => [props.maxHeight, props.btnIconSize],
+      () => {
+        initStyle();
+      }
+    );
+    const distanceToBottom = ref();
+    const btnShow = computed(() => {
+      return props.showBackButton && distanceToBottom.value !== void 0 && distanceToBottom.value > props.backButtonThreshold;
+    });
+    onMounted(() => {
+      setTimeout(getDistanceToBottom);
+    });
+    function getDistanceToBottom() {
+      const el = scrollbarRef.value?.$el;
+      const wrap = scrollbarRef.value?.wrapRef;
+      if (!el || !wrap) {
+        return;
+      }
+      distanceToBottom.value = wrap.scrollHeight - wrap.scrollTop - wrap.clientHeight;
+    }
+    function scrollToBottom() {
+      scrollbarRef.value?.scrollToBottom();
+    }
+    function scrollToBubble(index) {
+      const container = scrollbarRef.value?.wrapRef;
+      if (!container)
+        return;
+      const bubbles = container.querySelectorAll(".el-bubble");
+      if (index >= bubbles.length)
+        return;
+      const targetBubble = bubbles[index];
+      const containerRect = container.getBoundingClientRect();
+      const bubbleRect = targetBubble.getBoundingClientRect();
+      const scrollPosition = bubbleRect.top - containerRect.top + container.scrollTop;
+      container.scrollTo({
+        top: scrollPosition,
+        behavior: "smooth"
+      });
+    }
+    __expose({
+      scrollToTop: scrollbarRef.value?.scrollToTop,
+      scrollToBottom,
+      scrollToBubble
+    });
+    const __returned__ = { props, scrollbarRef, initStyle, distanceToBottom, btnShow, getDistanceToBottom, scrollToBottom, scrollToBubble, get ArrowDownBold() {
+      return arrow_down_bold_default$1;
+    }, get VkScrollbar() {
+      return VkScrollbar;
+    }, get Bubble() {
+      return Bubble;
+    }, loadingBg };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = { class: "vk-bubble-list-wrapper" };
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_icon = resolveComponent("el-icon");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createVNode($setup["VkScrollbar"], {
+      ref: "scrollbarRef",
+      class: "vk-bubble-list",
+      "append-to": $props.scrollbarAppendTo,
+      always: $props.alwaysShowScrollbar,
+      onScroll: $setup.getDistanceToBottom
+    }, {
+      default: withCtx(() => [
+        (openBlock(true), createElementBlock(
+          Fragment,
+          null,
+          renderList($props.list, (item, index) => {
+            return openBlock(), createBlock($setup["Bubble"], {
+              key: item.key || index,
+              content: item.content,
+              placement: item.placement,
+              loading: item.loading,
+              shape: item.shape,
+              variant: item.variant,
+              "is-markdown": item.isMarkdown,
+              "is-fog": item.isFog,
+              typing: item.typing,
+              "max-width": item.maxWidth,
+              avatar: item.avatar,
+              "avatar-size": item.avatarSize,
+              "avatar-gap": item.avatarGap,
+              "avatar-shape": item.avatarShape,
+              "avatar-src-set": item.avatarSrcSet,
+              "avatar-alt": item.avatarAlt,
+              "avatar-fit": item.avatarFit,
+              "no-style": item.noStyle
+            }, createSlots({
+              _: 2
+              /* DYNAMIC */
+            }, [
+              _ctx.$slots.avatar ? {
+                name: "avatar",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "avatar", { item })
+                ]),
+                key: "0"
+              } : void 0,
+              _ctx.$slots.header ? {
+                name: "header",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "header", { item })
+                ]),
+                key: "1"
+              } : void 0,
+              _ctx.$slots.content ? {
+                name: "content",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "content", { item })
+                ]),
+                key: "2"
+              } : void 0,
+              _ctx.$slots.footer ? {
+                name: "footer",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "footer", { item })
+                ]),
+                key: "3"
+              } : void 0,
+              _ctx.$slots.loading ? {
+                name: "loading",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "loading", { item })
+                ]),
+                key: "4"
+              } : void 0
+            ]), 1032, ["content", "placement", "loading", "shape", "variant", "is-markdown", "is-fog", "typing", "max-width", "avatar", "avatar-size", "avatar-gap", "avatar-shape", "avatar-src-set", "avatar-alt", "avatar-fit", "no-style"]);
+          }),
+          128
+          /* KEYED_FRAGMENT */
+        ))
+      ]),
+      _: 3
+      /* FORWARDED */
+    }, 8, ["append-to", "always"]),
+    withDirectives(createElementVNode(
+      "div",
+      {
+        class: normalizeClass(["vk-bubble-list-default-back-button", {
+          "vk-bubble-list-back-to-bottom-solt": _ctx.$slots.backToBottom
+        }]),
+        style: normalizeStyle({
+          bottom: $props.backButtonPosition.bottom,
+          left: $props.backButtonPosition.left
+        }),
+        onClick: $setup.scrollToBottom
+      },
+      [
+        renderSlot(_ctx.$slots, "backToBottom", {}, () => [
+          createVNode(_component_el_icon, {
+            class: "vk-bubble-list-back-to-bottom-icon",
+            style: normalizeStyle({ color: $setup.props.btnColor })
+          }, {
+            default: withCtx(() => [
+              createVNode($setup["ArrowDownBold"]),
+              $setup.props.btnLoading ? (openBlock(), createBlock($setup["loadingBg"], {
+                key: 0,
+                class: "back-to-bottom-loading-svg-bg"
+              })) : createCommentVNode("v-if", true)
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["style"])
+        ])
+      ],
+      6
+      /* CLASS, STYLE */
+    ), [
+      [vShow, $setup.btnShow]
+    ])
+  ]);
+}
+var BubbleList = /* @__PURE__ */ _export_sfc$2(_sfc_main$1, [["render", _sfc_render$1], ["__file", "/home/runner/work/vunk-plus/vunk-plus/packages/components/bubble-list/src/core/index.vue"]]);
+
 const props = {
   items: {
     type: Array,
@@ -79411,7 +79397,8 @@ const props = {
   elRef: {
     type: Function,
     default: noop$1
-  }
+  },
+  scrollbarAppendTo: null
 };
 
 var _sfc_main = /* @__PURE__ */ defineComponent({
@@ -79436,9 +79423,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       return VkSpreadTo;
     }, get ElAutoResizer() {
       return ElAutoResizer;
-    }, get BubbleList() {
-      return BubbleList;
-    } };
+    }, BubbleList };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -79457,6 +79442,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             ref: _ctx.elRef,
             "btn-icon-size": 18,
             "max-height": `${height}px`,
+            "scrollbar-append-to": _ctx.scrollbarAppendTo,
             style: {
               "--el-bubble-list-max-height": `${height}px`
             },
@@ -79505,7 +79491,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               ]),
               key: "3"
             } : void 0
-          ]), 1040, ["max-height", "style", "list"])
+          ]), 1040, ["max-height", "scrollbar-append-to", "style", "list"])
         ]),
         _: 3
         /* FORWARDED */