@vunk/plus 1.15.0 → 1.16.1

package/components/bubble-list/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),h=require("@vunk/plus/components/bubble-templates"),B=require("element-plus"),w=require("@element-plus/icons-vue"),S=require("@vueuse/core"),C=require("@vunk/plus/components/scrollbar"),T=require("@vunk/plus/element/bubble"),$=require("../_plugin-vue_export-helper-BHFhmbuH.js"),x=require("@vunk/shared/function"),R=require("@vunk/plus/components/agent-chat-provider"),_={},V={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 P(s,l){return e.openBlock(),e.createElementBlock("svg",V,[...l[0]||(l[0]=[e.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 z=$._export_sfc(_,[["render",P]]),N={class:"vk-bubble-list-wrapper"},q=e.defineComponent({__name:"index",props:{list:{type:Array,default:()=>[]},autoScroll:{type:Boolean,default:!0},autoScrollThreshold:{type:Number,default:200},maxHeight:{type:String,default:""},alwaysShowScrollbar:{type:Boolean,default:!1},backButtonThreshold:{type:Number,default:80},showBackButton:{type:Boolean,default:!0},backButtonPosition:{type:Object,default:()=>({bottom:"20px",left:"calc(50% - 19px)"})},btnLoading:{type:Boolean,default:!0},btnColor:{type:String,default:"#409EFF"},btnIconSize:{type:Number,default:24},scrollbarAppendTo:{type:null,default:void 0}},emits:{complete:null},setup(s,{expose:l}){const a=s,i=e.ref();function r(){document.documentElement.style.setProperty("--el-bubble-list-max-height",a.maxHeight||"100%"),document.documentElement.style.setProperty("--el-bubble-list-btn-size",`${a.btnIconSize}px`)}e.onMounted(()=>{r()}),e.watch(()=>[a.maxHeight,a.btnIconSize],()=>{r()});const u=e.ref(),v=e.computed(()=>i.value?.wrapRef?.firstElementChild),m=e.computed(()=>a.showBackButton&&u.value!==void 0&&u.value>a.backButtonThreshold);e.onMounted(()=>{setTimeout(p)});function p(){const o=i.value?.$el,n=i.value?.wrapRef;if(!(!o||!n))return u.value=n.scrollHeight-n.scrollTop-n.clientHeight,u.value}function b(...o){i.value?.scrollToBottom(...o)}function g(...o){i.value?.scrollToTop(...o)}a.autoScroll&&S.useResizeObserver(v,()=>{const o=p();o!==void 0&&o>a.autoScrollThreshold||b()});function y(o){const n=i.value?.wrapRef;if(!n)return;const d=n.querySelectorAll(".el-bubble");if(o>=d.length)return;const t=d[o],f=n.getBoundingClientRect(),k=t.getBoundingClientRect().top-f.top+n.scrollTop;n.scrollTo({top:k,behavior:"smooth"})}return l({scrollToTop:g,scrollToBottom:b,scrollToBubble:y}),(o,n)=>{const d=e.resolveComponent("el-icon");return e.openBlock(),e.createElementBlock("div",N,[e.createVNode(e.unref(C.VkScrollbar),{ref_key:"scrollbarRef",ref:i,class:"vk-bubble-list","append-to":s.scrollbarAppendTo,always:s.alwaysShowScrollbar,"hide-after":800,onScroll:p},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.list,(t,f)=>(e.openBlock(),e.createBlock(e.unref(T.Bubble),{key:t.key||f,content:t.content,placement:t.placement,loading:t.loading,shape:t.shape,variant:t.variant,"is-markdown":t.isMarkdown,"is-fog":t.isFog,typing:t.typing,"max-width":t.maxWidth,avatar:t.avatar,"avatar-size":t.avatarSize,"avatar-gap":t.avatarGap,"avatar-shape":t.avatarShape,"avatar-src-set":t.avatarSrcSet,"avatar-alt":t.avatarAlt,"avatar-fit":t.avatarFit,"no-style":t.noStyle,class:e.normalizeClass({[`is-${t.role}`]:!0})},e.createSlots({_:2},[o.$slots.avatar?{name:"avatar",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"avatar",{item:t})]),key:"0"}:void 0,o.$slots.header?{name:"header",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"header",{item:t})]),key:"1"}:void 0,o.$slots.content?{name:"content",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"content",{item:t})]),key:"2"}:void 0,o.$slots.footer?{name:"footer",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"footer",{item:t})]),key:"3"}:void 0,o.$slots.loading?{name:"loading",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"loading",{item:t})]),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","class"]))),128))]),_:3},8,["append-to","always"]),e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(["vk-bubble-list-default-back-button",{"vk-bubble-list-back-to-bottom-solt":o.$slots.backToBottom}]),style:e.normalizeStyle({bottom:s.backButtonPosition.bottom,left:s.backButtonPosition.left}),onClick:b},[e.renderSlot(o.$slots,"backToBottom",{},()=>[e.createVNode(d,{class:"vk-bubble-list-back-to-bottom-icon",style:e.normalizeStyle({color:a.btnColor})},{default:e.withCtx(()=>[e.createVNode(e.unref(w.ArrowDownBold)),a.btnLoading?(e.openBlock(),e.createBlock(z,{key:0,class:"back-to-bottom-loading-svg-bg"})):e.createCommentVNode("",!0)]),_:1},8,["style"])])],6),[[e.vShow,m.value]])])}}}),A={items:{type:Array,default:()=>[]},elRef:{type:Function,default:x.noop},scrollbarAppendTo:null,autoScrollThreshold:{type:Number,default:200}},c=e.defineComponent({name:"VkBubbleList",inheritAttrs:!1,__name:"index",props:A,setup(s){return(l,a)=>(e.openBlock(),e.createBlock(e.unref(h.VkBubbleRenderTemplates),null,{placeholder:e.withCtx(()=>[e.createVNode(e.unref(h.VkBubbleTemplates))]),default:e.withCtx(()=>[e.renderSlot(l.$slots,"renderer"),e.createVNode(e.unref(B.ElAutoResizer),null,{default:e.withCtx(({height:i})=>[e.createVNode(q,e.mergeProps({ref:l.elRef,"btn-icon-size":18,"max-height":`${i}px`,"scrollbar-append-to":l.scrollbarAppendTo,"auto-scroll-threshold":l.autoScrollThreshold,style:{"--el-bubble-list-max-height":`${i}px`},list:l.items},l.$attrs),e.createSlots({content:e.withCtx(({item:r})=>[e.createVNode(e.unref(h.VkBubbleRenderer),{source:[r]},null,8,["source"])]),_:2},[l.$slots.avatar?{name:"avatar",fn:e.withCtx(r=>[e.renderSlot(l.$slots,"avatar",e.normalizeProps(e.guardReactiveProps(r)))]),key:"0"}:void 0,l.$slots.header?{name:"header",fn:e.withCtx(r=>[e.renderSlot(l.$slots,"header",e.normalizeProps(e.guardReactiveProps(r)))]),key:"1"}:void 0,l.$slots.loading?{name:"loading",fn:e.withCtx(r=>[e.renderSlot(l.$slots,"loading",e.normalizeProps(e.guardReactiveProps(r)))]),key:"2"}:void 0,l.$slots.footer?{name:"footer",fn:e.withCtx(r=>[e.renderSlot(l.$slots,"footer",e.normalizeProps(e.guardReactiveProps(r)))]),key:"3"}:void 0]),1040,["max-height","scrollbar-append-to","auto-scroll-threshold","style","list"])]),_:3})]),_:3}))}}),E=Object.freeze(Object.defineProperty({__proto__:null},Symbol.toStringTag,{value:"Module"}));c.install=s=>{s.component(c.name||"VkBubbleList",c)};Object.defineProperty(exports,"Role",{enumerable:!0,get:()=>R.Role});exports.VkBubbleList=c;exports.__VkBubbleList=E;exports.default=c;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),m=require("@vunk/plus/components/bubble-templates"),$=require("element-plus"),g=require("@vunk/plus/vue-virtual-scroller"),R=require("@element-plus/icons-vue"),x=require("@vueuse/core"),w=require("@vunk/plus/components/scrollbar"),B=require("@vunk/plus/element/bubble"),V=require("../_plugin-vue_export-helper-BHFhmbuH.js"),z=require("@vunk/shared/function"),P=require("@vunk/plus/components/agent-chat-provider"),F={},N={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 q(l,i){return e.openBlock(),e.createElementBlock("svg",N,[...i[0]||(i[0]=[e.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 A=V._export_sfc(F,[["render",q]]),E={class:"vk-bubble-list-wrapper"},I=e.defineComponent({__name:"index",props:{list:{type:Array,default:()=>[]},autoScroll:{type:Boolean,default:!0},autoScrollThreshold:{type:Number,default:200},maxHeight:{type:String,default:""},alwaysShowScrollbar:{type:Boolean,default:!1},backButtonThreshold:{type:Number,default:80},showBackButton:{type:Boolean,default:!0},backButtonPosition:{type:Object,default:()=>({bottom:"20px",left:"calc(50% - 19px)"})},btnLoading:{type:Boolean,default:!0},btnColor:{type:String,default:"#409EFF"},btnIconSize:{type:Number,default:24},scrollbarAppendTo:{type:null,default:void 0},virtual:{type:Boolean,default:!1},keyField:{type:String,default:"key"}},emits:{complete:null},setup(l,{expose:i}){const r=l,n=e.ref(),a=e.ref(),v=e.ref();function u(){document.documentElement.style.setProperty("--el-bubble-list-max-height",r.maxHeight||"100%"),document.documentElement.style.setProperty("--el-bubble-list-btn-size",`${r.btnIconSize}px`)}e.onMounted(()=>{u(),r.virtual&&e.nextTick(()=>{const o=n.value?.wrapRef;o&&(v.value=o)}),setTimeout(p)}),e.watch(()=>[r.maxHeight,r.btnIconSize],()=>u());const s=e.ref(),S=e.computed(()=>r.showBackButton&&s.value!==void 0&&s.value>r.backButtonThreshold);function p(){const o=n.value?.wrapRef;if(o)return s.value=o.scrollHeight-o.scrollTop-o.clientHeight,s.value}function h(){if(r.virtual){a.value?.scrollToBottom();return}n.value?.scrollToBottom()}function C(){if(r.virtual){a.value?.scrollToItem(0);return}n.value?.scrollToTop()}function T(o){if(r.virtual){a.value?.scrollToItem(o),requestAnimationFrame(()=>{requestAnimationFrame(()=>{a.value?.scrollToItem(o)})});return}const c=n.value?.wrapRef;if(!c)return;const b=c.querySelectorAll(".el-bubble");if(o>=b.length)return;const t=b[o],d=c.getBoundingClientRect(),y=t.getBoundingClientRect();c.scrollTo({top:y.top-d.top+c.scrollTop,behavior:"smooth"})}const k=e.ref();return e.onMounted(()=>{e.nextTick(()=>{k.value=n.value?.wrapRef?.firstElementChild})}),r.autoScroll&&x.useResizeObserver(k,()=>{const o=p();o!==void 0&&o>r.autoScrollThreshold||h()}),i({scrollToTop:C,scrollToBottom:h,scrollToBubble:T}),(o,c)=>{const b=e.resolveComponent("el-icon");return e.openBlock(),e.createElementBlock("div",E,[l.virtual?(e.openBlock(),e.createElementBlock("div",{key:0,class:"vk-bubble-list-virtual-host",style:e.normalizeStyle({height:l.maxHeight||"100%"})},[e.createVNode(e.unref(w.VkScrollbar),{ref_key:"scrollbarRef",ref:n,class:"vk-bubble-list-virtual-scrollbar",always:l.alwaysShowScrollbar,"hide-after":800,onScroll:p},{default:e.withCtx(()=>[v.value?(e.openBlock(),e.createBlock(e.unref(g.DynamicScroller),{key:0,ref_key:"scrollerRef",ref:a,items:l.list,"min-item-size":54,"key-field":l.keyField,"page-mode":!0,"scroll-parent":v.value,class:"vk-bubble-list-dynamic-scroller"},{default:e.withCtx(({item:t,index:d,active:y})=>[e.createVNode(e.unref(g.DynamicScrollerItem),{item:t,active:y,"data-index":d,class:"vk-bubble-list-virtual-item"},{default:e.withCtx(()=>[e.createVNode(e.unref(B.Bubble),{content:t.content,placement:t.placement,loading:t.loading,shape:t.shape,variant:t.variant,"is-markdown":t.isMarkdown,"is-fog":t.isFog,typing:t.typing,"max-width":t.maxWidth,avatar:t.avatar,"avatar-size":t.avatarSize,"avatar-gap":t.avatarGap,"avatar-shape":t.avatarShape,"avatar-src-set":t.avatarSrcSet,"avatar-alt":t.avatarAlt,"avatar-fit":t.avatarFit,"no-style":t.noStyle,class:e.normalizeClass({[`is-${t.role}`]:!0})},e.createSlots({_:2},[o.$slots.avatar?{name:"avatar",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"avatar",{item:t})]),key:"0"}:void 0,o.$slots.header?{name:"header",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"header",{item:t})]),key:"1"}:void 0,o.$slots.content?{name:"content",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"content",{item:t})]),key:"2"}:void 0,o.$slots.footer?{name:"footer",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"footer",{item:t})]),key:"3"}:void 0,o.$slots.loading?{name:"loading",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"loading",{item:t})]),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","class"])]),_:2},1032,["item","active","data-index"])]),_:3},8,["items","key-field","scroll-parent"])):e.createCommentVNode("",!0)]),_:3},8,["always"])],4)):(e.openBlock(),e.createBlock(e.unref(w.VkScrollbar),{key:1,ref_key:"scrollbarRef",ref:n,class:"vk-bubble-list","append-to":l.scrollbarAppendTo,always:l.alwaysShowScrollbar,"hide-after":800,onScroll:p},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.list,(t,d)=>(e.openBlock(),e.createBlock(e.unref(B.Bubble),{key:t.key||d,content:t.content,placement:t.placement,loading:t.loading,shape:t.shape,variant:t.variant,"is-markdown":t.isMarkdown,"is-fog":t.isFog,typing:t.typing,"max-width":t.maxWidth,avatar:t.avatar,"avatar-size":t.avatarSize,"avatar-gap":t.avatarGap,"avatar-shape":t.avatarShape,"avatar-src-set":t.avatarSrcSet,"avatar-alt":t.avatarAlt,"avatar-fit":t.avatarFit,"no-style":t.noStyle,class:e.normalizeClass({[`is-${t.role}`]:!0})},e.createSlots({_:2},[o.$slots.avatar?{name:"avatar",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"avatar",{item:t})]),key:"0"}:void 0,o.$slots.header?{name:"header",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"header",{item:t})]),key:"1"}:void 0,o.$slots.content?{name:"content",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"content",{item:t})]),key:"2"}:void 0,o.$slots.footer?{name:"footer",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"footer",{item:t})]),key:"3"}:void 0,o.$slots.loading?{name:"loading",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"loading",{item:t})]),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","class"]))),128))]),_:3},8,["append-to","always"])),e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(["vk-bubble-list-default-back-button",{"vk-bubble-list-back-to-bottom-solt":o.$slots.backToBottom}]),style:e.normalizeStyle({bottom:l.backButtonPosition.bottom,left:l.backButtonPosition.left}),onClick:h},[e.renderSlot(o.$slots,"backToBottom",{},()=>[e.createVNode(b,{class:"vk-bubble-list-back-to-bottom-icon",style:e.normalizeStyle({color:r.btnColor})},{default:e.withCtx(()=>[e.createVNode(e.unref(R.ArrowDownBold)),r.btnLoading?(e.openBlock(),e.createBlock(A,{key:0,class:"back-to-bottom-loading-svg-bg"})):e.createCommentVNode("",!0)]),_:1},8,["style"])])],6),[[e.vShow,S.value]])])}}}),L={items:{type:Array,default:()=>[]},elRef:{type:Function,default:z.noop},scrollbarAppendTo:null,virtual:{type:Boolean,default:!1},keyField:{type:String,default:"key"},autoScrollThreshold:{type:Number,default:200}},f=e.defineComponent({name:"VkBubbleList",inheritAttrs:!1,__name:"index",props:L,setup(l,{expose:i}){const r=l,n=e.ref();return e.watch(()=>r.elRef,a=>{a&&a(n.value)},{immediate:!0}),i({scrollToTop:()=>n.value?.scrollToTop(),scrollToBottom:()=>n.value?.scrollToBottom(),scrollToBubble:a=>n.value?.scrollToBubble(a)}),(a,v)=>(e.openBlock(),e.createBlock(e.unref(m.VkBubbleRenderTemplates),null,{placeholder:e.withCtx(()=>[e.createVNode(e.unref(m.VkBubbleTemplates))]),default:e.withCtx(()=>[e.renderSlot(a.$slots,"renderer"),e.createVNode(e.unref($.ElAutoResizer),null,{default:e.withCtx(({height:u})=>[e.createVNode(I,e.mergeProps({ref_key:"bubbleListRef",ref:n,"btn-icon-size":18,"max-height":`${u}px`,"scrollbar-append-to":a.scrollbarAppendTo,virtual:a.virtual,"key-field":a.keyField,"auto-scroll-threshold":a.autoScrollThreshold,style:{"--el-bubble-list-max-height":`${u}px`},list:a.items},a.$attrs),e.createSlots({content:e.withCtx(({item:s})=>[e.createVNode(e.unref(m.VkBubbleRenderer),{source:[s]},null,8,["source"])]),_:2},[a.$slots.avatar?{name:"avatar",fn:e.withCtx(s=>[e.renderSlot(a.$slots,"avatar",e.normalizeProps(e.guardReactiveProps(s)))]),key:"0"}:void 0,a.$slots.header?{name:"header",fn:e.withCtx(s=>[e.renderSlot(a.$slots,"header",e.normalizeProps(e.guardReactiveProps(s)))]),key:"1"}:void 0,a.$slots.loading?{name:"loading",fn:e.withCtx(s=>[e.renderSlot(a.$slots,"loading",e.normalizeProps(e.guardReactiveProps(s)))]),key:"2"}:void 0,a.$slots.footer?{name:"footer",fn:e.withCtx(s=>[e.renderSlot(a.$slots,"footer",e.normalizeProps(e.guardReactiveProps(s)))]),key:"3"}:void 0]),1040,["max-height","scrollbar-append-to","virtual","key-field","auto-scroll-threshold","style","list"])]),_:3})]),_:3}))}}),M=Object.freeze(Object.defineProperty({__proto__:null},Symbol.toStringTag,{value:"Module"}));f.install=l=>{l.component(f.name||"VkBubbleList",f)};Object.defineProperty(exports,"Role",{enumerable:!0,get:()=>P.Role});exports.VkBubbleList=f;exports.__VkBubbleList=M;exports.default=f;

package/components/bubble-list/index.mjs

@@ -1,14 +1,15 @@
-import { openBlock as p, createElementBlock as B, createStaticVNode as E, defineComponent as _, ref as S, onMounted as $, watch as N, computed as T, resolveComponent as G, createVNode as u, unref as d, withCtx as l, Fragment as L, renderList as H, createBlock as w, normalizeClass as C, createSlots as z, renderSlot as s, withDirectives as I, createElementVNode as M, normalizeStyle as R, createCommentVNode as j, vShow as D, mergeProps as O, normalizeProps as m, guardReactiveProps as v } from "vue";
-import { VkBubbleRenderTemplates as Z, VkBubbleRenderer as q, VkBubbleTemplates as U } from "@vunk/plus/components/bubble-templates";
-import { ElAutoResizer as W } from "element-plus";
-import { ArrowDownBold as J } from "@element-plus/icons-vue";
-import { useResizeObserver as K } from "@vueuse/core";
-import { VkScrollbar as Q } from "@vunk/plus/components/scrollbar";
-import { Bubble as X } from "@vunk/plus/element/bubble";
-import { _ as Y } from "../_plugin-vue_export-helper-CHgC5LLL.mjs";
-import { noop as ee } from "@vunk/shared/function";
-import { Role as Be } from "@vunk/plus/components/agent-chat-provider";
-const te = {}, oe = {
+import { openBlock as c, createElementBlock as S, createStaticVNode as x, defineComponent as G, ref as p, onMounted as V, nextTick as P, watch as N, computed as j, resolveComponent as O, normalizeStyle as R, createVNode as d, unref as u, withCtx as o, createBlock as y, normalizeClass as C, createSlots as F, renderSlot as s, createCommentVNode as I, Fragment as q, renderList as W, withDirectives as Z, createElementVNode as _, vShow as U, mergeProps as J, normalizeProps as B, guardReactiveProps as w } from "vue";
+import { VkBubbleRenderTemplates as K, VkBubbleRenderer as Q, VkBubbleTemplates as X } from "@vunk/plus/components/bubble-templates";
+import { ElAutoResizer as Y } from "element-plus";
+import { DynamicScroller as ee, DynamicScrollerItem as te } from "@vunk/plus/vue-virtual-scroller";
+import { ArrowDownBold as ae } from "@element-plus/icons-vue";
+import { useResizeObserver as oe } from "@vueuse/core";
+import { VkScrollbar as L } from "@vunk/plus/components/scrollbar";
+import { Bubble as E } from "@vunk/plus/element/bubble";
+import { _ as le } from "../_plugin-vue_export-helper-CHgC5LLL.mjs";
+import { noop as re } from "@vunk/shared/function";
+import { Role as Re } from "@vunk/plus/components/agent-chat-provider";
+const se = {}, ne = {
   xmlns: "http://www.w3.org/2000/svg",
   "xmlns:xlink": "http://www.w3.org/1999/xlink",
   version: "1.1",
@@ -16,12 +17,12 @@ const te = {}, oe = {
   height: "704",
   viewBox: "0 0 704 704"
 };
-function le(i, o) {
-  return p(), B("svg", oe, [...o[0] || (o[0] = [
-    E('<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)
+function ie(l, f) {
+  return c(), S("svg", ne, [...f[0] || (f[0] = [
+    x('<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 ae = /* @__PURE__ */ Y(te, [["render", le]]), re = { class: "vk-bubble-list-wrapper" }, ne = /* @__PURE__ */ _({
+const ue = /* @__PURE__ */ le(se, [["render", ie]]), ce = { class: "vk-bubble-list-wrapper" }, de = /* @__PURE__ */ G({
   __name: "index",
   props: {
     list: {
@@ -71,14 +72,27 @@ const ae = /* @__PURE__ */ Y(te, [["render", le]]), re = { class: "vk-bubble-lis
     scrollbarAppendTo: {
       type: null,
       default: void 0
+    },
+    /** Enable virtual list rendering via vue-virtual-scroller */
+    virtual: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Key field name for virtual list items.
+     * DynamicScroller uses this to uniquely identify each item.
+     */
+    keyField: {
+      type: String,
+      default: "key"
     }
   },
   emits: {
     complete: null
   },
-  setup(i, { expose: o }) {
-    const r = i, c = S();
-    function a() {
+  setup(l, { expose: f }) {
+    const r = l, n = p(), a = p(), h = p();
+    function b() {
       document.documentElement.style.setProperty(
         "--el-bubble-list-max-height",
         r.maxHeight || "100%"
@@ -87,65 +101,182 @@ const ae = /* @__PURE__ */ Y(te, [["render", le]]), re = { class: "vk-bubble-lis
         `${r.btnIconSize}px`
       );
     }
-    $(() => {
-      a();
+    V(() => {
+      b(), r.virtual && P(() => {
+        const t = n.value?.wrapRef;
+        t && (h.value = t);
+      }), setTimeout(g);
     }), N(
       () => [r.maxHeight, r.btnIconSize],
-      () => {
-        a();
-      }
+      () => b()
     );
-    const f = S(), V = T(() => c.value?.wrapRef?.firstElementChild), A = T(() => r.showBackButton && f.value !== void 0 && f.value > r.backButtonThreshold);
-    $(() => {
-      setTimeout(h);
-    });
-    function h() {
-      const t = c.value?.$el, n = c.value?.wrapRef;
-      if (!(!t || !n))
-        return f.value = n.scrollHeight - n.scrollTop - n.clientHeight, f.value;
-    }
-    function g(...t) {
-      c.value?.scrollToBottom(...t);
+    const i = p(), D = j(() => r.showBackButton && i.value !== void 0 && i.value > r.backButtonThreshold);
+    function g() {
+      const t = n.value?.wrapRef;
+      if (t)
+        return i.value = t.scrollHeight - t.scrollTop - t.clientHeight, i.value;
     }
-    function x(...t) {
-      c.value?.scrollToTop(...t);
+    function T() {
+      if (r.virtual) {
+        a.value?.scrollToBottom();
+        return;
+      }
+      n.value?.scrollToBottom();
     }
-    r.autoScroll && K(V, () => {
-      const t = h();
-      t !== void 0 && t > r.autoScrollThreshold || g();
-    });
-    function F(t) {
-      const n = c.value?.wrapRef;
-      if (!n)
+    function H() {
+      if (r.virtual) {
+        a.value?.scrollToItem(0);
         return;
-      const b = n.querySelectorAll(".el-bubble");
-      if (t >= b.length)
+      }
+      n.value?.scrollToTop();
+    }
+    function M(t) {
+      if (r.virtual) {
+        a.value?.scrollToItem(t), requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            a.value?.scrollToItem(t);
+          });
+        });
         return;
-      const e = b[t], y = n.getBoundingClientRect(), P = e.getBoundingClientRect().top - y.top + n.scrollTop;
-      n.scrollTo({
-        top: P,
+      }
+      const v = n.value?.wrapRef;
+      if (!v) return;
+      const k = v.querySelectorAll(".el-bubble");
+      if (t >= k.length) return;
+      const e = k[t], m = v.getBoundingClientRect(), $ = e.getBoundingClientRect();
+      v.scrollTo({
+        top: $.top - m.top + v.scrollTop,
         behavior: "smooth"
       });
     }
-    return o({
-      scrollToTop: x,
-      scrollToBottom: g,
-      scrollToBubble: F
-    }), (t, n) => {
-      const b = G("el-icon");
-      return p(), B("div", re, [
-        u(d(Q), {
+    const A = p();
+    return V(() => {
+      P(() => {
+        A.value = n.value?.wrapRef?.firstElementChild;
+      });
+    }), r.autoScroll && oe(A, () => {
+      const t = g();
+      t !== void 0 && t > r.autoScrollThreshold || T();
+    }), f({
+      scrollToTop: H,
+      scrollToBottom: T,
+      scrollToBubble: M
+    }), (t, v) => {
+      const k = O("el-icon");
+      return c(), S("div", ce, [
+        l.virtual ? (c(), S("div", {
+          key: 0,
+          class: "vk-bubble-list-virtual-host",
+          style: R({ height: l.maxHeight || "100%" })
+        }, [
+          d(u(L), {
+            ref_key: "scrollbarRef",
+            ref: n,
+            class: "vk-bubble-list-virtual-scrollbar",
+            always: l.alwaysShowScrollbar,
+            "hide-after": 800,
+            onScroll: g
+          }, {
+            default: o(() => [
+              h.value ? (c(), y(u(ee), {
+                key: 0,
+                ref_key: "scrollerRef",
+                ref: a,
+                items: l.list,
+                "min-item-size": 54,
+                "key-field": l.keyField,
+                "page-mode": !0,
+                "scroll-parent": h.value,
+                class: "vk-bubble-list-dynamic-scroller"
+              }, {
+                default: o(({ item: e, index: m, active: $ }) => [
+                  d(u(te), {
+                    item: e,
+                    active: $,
+                    "data-index": m,
+                    class: "vk-bubble-list-virtual-item"
+                  }, {
+                    default: o(() => [
+                      d(u(E), {
+                        content: e.content,
+                        placement: e.placement,
+                        loading: e.loading,
+                        shape: e.shape,
+                        variant: e.variant,
+                        "is-markdown": e.isMarkdown,
+                        "is-fog": e.isFog,
+                        typing: e.typing,
+                        "max-width": e.maxWidth,
+                        avatar: e.avatar,
+                        "avatar-size": e.avatarSize,
+                        "avatar-gap": e.avatarGap,
+                        "avatar-shape": e.avatarShape,
+                        "avatar-src-set": e.avatarSrcSet,
+                        "avatar-alt": e.avatarAlt,
+                        "avatar-fit": e.avatarFit,
+                        "no-style": e.noStyle,
+                        class: C({
+                          [`is-${e.role}`]: !0
+                        })
+                      }, F({ _: 2 }, [
+                        t.$slots.avatar ? {
+                          name: "avatar",
+                          fn: o(() => [
+                            s(t.$slots, "avatar", { item: e })
+                          ]),
+                          key: "0"
+                        } : void 0,
+                        t.$slots.header ? {
+                          name: "header",
+                          fn: o(() => [
+                            s(t.$slots, "header", { item: e })
+                          ]),
+                          key: "1"
+                        } : void 0,
+                        t.$slots.content ? {
+                          name: "content",
+                          fn: o(() => [
+                            s(t.$slots, "content", { item: e })
+                          ]),
+                          key: "2"
+                        } : void 0,
+                        t.$slots.footer ? {
+                          name: "footer",
+                          fn: o(() => [
+                            s(t.$slots, "footer", { item: e })
+                          ]),
+                          key: "3"
+                        } : void 0,
+                        t.$slots.loading ? {
+                          name: "loading",
+                          fn: o(() => [
+                            s(t.$slots, "loading", { item: e })
+                          ]),
+                          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", "class"])
+                    ]),
+                    _: 2
+                  }, 1032, ["item", "active", "data-index"])
+                ]),
+                _: 3
+              }, 8, ["items", "key-field", "scroll-parent"])) : I("", !0)
+            ]),
+            _: 3
+          }, 8, ["always"])
+        ], 4)) : (c(), y(u(L), {
+          key: 1,
           ref_key: "scrollbarRef",
-          ref: c,
+          ref: n,
           class: "vk-bubble-list",
-          "append-to": i.scrollbarAppendTo,
-          always: i.alwaysShowScrollbar,
+          "append-to": l.scrollbarAppendTo,
+          always: l.alwaysShowScrollbar,
           "hide-after": 800,
-          onScroll: h
+          onScroll: g
         }, {
-          default: l(() => [
-            (p(!0), B(L, null, H(i.list, (e, y) => (p(), w(d(X), {
-              key: e.key || y,
+          default: o(() => [
+            (c(!0), S(q, null, W(l.list, (e, m) => (c(), y(u(E), {
+              key: e.key || m,
               content: e.content,
               placement: e.placement,
               loading: e.loading,
@@ -166,38 +297,38 @@ const ae = /* @__PURE__ */ Y(te, [["render", le]]), re = { class: "vk-bubble-lis
               class: C({
                 [`is-${e.role}`]: !0
               })
-            }, z({ _: 2 }, [
+            }, F({ _: 2 }, [
               t.$slots.avatar ? {
                 name: "avatar",
-                fn: l(() => [
+                fn: o(() => [
                   s(t.$slots, "avatar", { item: e })
                 ]),
                 key: "0"
               } : void 0,
               t.$slots.header ? {
                 name: "header",
-                fn: l(() => [
+                fn: o(() => [
                   s(t.$slots, "header", { item: e })
                 ]),
                 key: "1"
               } : void 0,
               t.$slots.content ? {
                 name: "content",
-                fn: l(() => [
+                fn: o(() => [
                   s(t.$slots, "content", { item: e })
                 ]),
                 key: "2"
               } : void 0,
               t.$slots.footer ? {
                 name: "footer",
-                fn: l(() => [
+                fn: o(() => [
                   s(t.$slots, "footer", { item: e })
                 ]),
                 key: "3"
               } : void 0,
               t.$slots.loading ? {
                 name: "loading",
-                fn: l(() => [
+                fn: o(() => [
                   s(t.$slots, "loading", { item: e })
                 ]),
                 key: "4"
@@ -205,113 +336,135 @@ const ae = /* @__PURE__ */ Y(te, [["render", le]]), re = { class: "vk-bubble-lis
             ]), 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", "class"]))), 128))
           ]),
           _: 3
-        }, 8, ["append-to", "always"]),
-        I(M("div", {
+        }, 8, ["append-to", "always"])),
+        Z(_("div", {
           class: C(["vk-bubble-list-default-back-button", {
             "vk-bubble-list-back-to-bottom-solt": t.$slots.backToBottom
           }]),
           style: R({
-            bottom: i.backButtonPosition.bottom,
-            left: i.backButtonPosition.left
+            bottom: l.backButtonPosition.bottom,
+            left: l.backButtonPosition.left
           }),
-          onClick: g
+          onClick: T
         }, [
           s(t.$slots, "backToBottom", {}, () => [
-            u(b, {
+            d(k, {
               class: "vk-bubble-list-back-to-bottom-icon",
               style: R({ color: r.btnColor })
             }, {
-              default: l(() => [
-                u(d(J)),
-                r.btnLoading ? (p(), w(ae, {
+              default: o(() => [
+                d(u(ae)),
+                r.btnLoading ? (c(), y(ue, {
                   key: 0,
                   class: "back-to-bottom-loading-svg-bg"
-                })) : j("", !0)
+                })) : I("", !0)
               ]),
               _: 1
             }, 8, ["style"])
           ])
         ], 6), [
-          [D, A.value]
+          [U, D.value]
         ])
       ]);
     };
   }
-}), se = {
+}), fe = {
   items: {
     type: Array,
     default: () => []
   },
   elRef: {
     type: Function,
-    default: ee
+    default: re
   },
   scrollbarAppendTo: null,
+  virtual: {
+    type: Boolean,
+    default: !1
+  },
+  /**
+   * Key field name for virtual list items.
+   * Defaults to 'key'. Set to 'id' or any other field your items use.
+   */
+  keyField: {
+    type: String,
+    default: "key"
+  },
   autoScrollThreshold: {
     type: Number,
     default: 200
   }
-}, k = /* @__PURE__ */ _({
+}, z = /* @__PURE__ */ G({
   name: "VkBubbleList",
   inheritAttrs: !1,
   __name: "index",
-  props: se,
-  setup(i) {
-    return (o, r) => (p(), w(d(Z), null, {
-      placeholder: l(() => [
-        u(d(U))
+  props: fe,
+  setup(l, { expose: f }) {
+    const r = l, n = p();
+    return N(() => r.elRef, (a) => {
+      a && a(n.value);
+    }, { immediate: !0 }), f({
+      scrollToTop: () => n.value?.scrollToTop(),
+      scrollToBottom: () => n.value?.scrollToBottom(),
+      scrollToBubble: (a) => n.value?.scrollToBubble(a)
+    }), (a, h) => (c(), y(u(K), null, {
+      placeholder: o(() => [
+        d(u(X))
       ]),
-      default: l(() => [
-        s(o.$slots, "renderer"),
-        u(d(W), null, {
-          default: l(({ height: c }) => [
-            u(ne, O({
-              ref: o.elRef,
+      default: o(() => [
+        s(a.$slots, "renderer"),
+        d(u(Y), null, {
+          default: o(({ height: b }) => [
+            d(de, J({
+              ref_key: "bubbleListRef",
+              ref: n,
               "btn-icon-size": 18,
-              "max-height": `${c}px`,
-              "scrollbar-append-to": o.scrollbarAppendTo,
-              "auto-scroll-threshold": o.autoScrollThreshold,
+              "max-height": `${b}px`,
+              "scrollbar-append-to": a.scrollbarAppendTo,
+              virtual: a.virtual,
+              "key-field": a.keyField,
+              "auto-scroll-threshold": a.autoScrollThreshold,
               style: {
-                "--el-bubble-list-max-height": `${c}px`
+                "--el-bubble-list-max-height": `${b}px`
               },
-              list: o.items
-            }, o.$attrs), z({
-              content: l(({ item: a }) => [
-                u(d(q), {
-                  source: [a]
+              list: a.items
+            }, a.$attrs), F({
+              content: o(({ item: i }) => [
+                d(u(Q), {
+                  source: [i]
                 }, null, 8, ["source"])
               ]),
               _: 2
             }, [
-              o.$slots.avatar ? {
+              a.$slots.avatar ? {
                 name: "avatar",
-                fn: l((a) => [
-                  s(o.$slots, "avatar", m(v(a)))
+                fn: o((i) => [
+                  s(a.$slots, "avatar", B(w(i)))
                 ]),
                 key: "0"
               } : void 0,
-              o.$slots.header ? {
+              a.$slots.header ? {
                 name: "header",
-                fn: l((a) => [
-                  s(o.$slots, "header", m(v(a)))
+                fn: o((i) => [
+                  s(a.$slots, "header", B(w(i)))
                 ]),
                 key: "1"
               } : void 0,
-              o.$slots.loading ? {
+              a.$slots.loading ? {
                 name: "loading",
-                fn: l((a) => [
-                  s(o.$slots, "loading", m(v(a)))
+                fn: o((i) => [
+                  s(a.$slots, "loading", B(w(i)))
                 ]),
                 key: "2"
               } : void 0,
-              o.$slots.footer ? {
+              a.$slots.footer ? {
                 name: "footer",
-                fn: l((a) => [
-                  s(o.$slots, "footer", m(v(a)))
+                fn: o((i) => [
+                  s(a.$slots, "footer", B(w(i)))
                 ]),
                 key: "3"
               } : void 0
-            ]), 1040, ["max-height", "scrollbar-append-to", "auto-scroll-threshold", "style", "list"])
+            ]), 1040, ["max-height", "scrollbar-append-to", "virtual", "key-field", "auto-scroll-threshold", "style", "list"])
           ]),
           _: 3
         })
@@ -319,15 +472,15 @@ const ae = /* @__PURE__ */ Y(te, [["render", le]]), re = { class: "vk-bubble-lis
       _: 3
     }));
   }
-}), ge = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), Se = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null
 }, Symbol.toStringTag, { value: "Module" }));
-k.install = (i) => {
-  i.component(k.name || "VkBubbleList", k);
+z.install = (l) => {
+  l.component(z.name || "VkBubbleList", z);
 };
 export {
-  Be as Role,
-  k as VkBubbleList,
-  ge as __VkBubbleList,
-  k as default
+  Re as Role,
+  z as VkBubbleList,
+  Se as __VkBubbleList,
+  z as default
 };