@artmate/chat/dist/es/packages/src/bubbleList/index.vue.js

**开箱即用的AI组件库（基于 Vue3 + ElementPlus）**

import { defineComponent as z, useSlots as F, ref as f, watch as v, nextTick as M, onMounted as P, createElementBlock as d, openBlock as g, normalizeClass as S, unref as y, Fragment as U, renderList as _, createCommentVNode as A, createVNode as K, renderSlot as B, mergeProps as O, createSlots as W, withCtx as j } from "vue";
import q from "../bubble/index.vue.js";
/* empty css                   */
import { useNamespace as G } from "../hooks/useNamespace.js";
import J from "./hooks/useDisplayData.js";
import Q from "./hooks/useListData.js";
const X = 1, le = /* @__PURE__ */ z({
  __name: "index",
  props: {
    autoScroll: { type: Boolean, default: !0 },
    className: {},
    items: { default: () => [] },
    roles: {},
    rootClassName: {}
  },
  setup(k, { expose: I }) {
    const n = k, C = F(), h = G("bubble-list"), N = f(!0), c = f(!1), p = f(0), l = f(), m = f({}), { ListData: T, setListData: D } = Q(n.items, n.roles), [i, E, L] = J(T);
    v(
      () => n.items,
      () => {
        D(n.items);
      },
      {
        deep: !0
      }
    ), v(
      () => T.value,
      () => {
        L();
      }
    );
    function V(e) {
      const t = e.target;
      c.value = t.scrollHeight - Math.abs(t.scrollTop) - t.clientHeight <= X;
    }
    v(
      () => p.value,
      () => {
        n.autoScroll && l.value && c.value && l.value.scrollTo({
          top: l.value.scrollHeight
        });
      }
    ), v(
      () => i.value.length,
      () => {
        M(() => {
          var e;
          if (n.autoScroll) {
            const t = (e = i.value[i.value.length - 2]) == null ? void 0 : e.key, o = m.value[t];
            if (o) {
              const { nativeElement: s } = o, { top: a = 0, bottom: r = 0 } = (s == null ? void 0 : s.getBoundingClientRect()) ?? {}, { top: u, bottom: x } = l.value.getBoundingClientRect();
              a < x && r > u && (p.value += 1, c.value = !0);
            }
          }
        });
      }
    );
    function H() {
      n.autoScroll && (p.value = p.value + 1);
    }
    function $(e) {
      var t;
      e != null && e.key && ((t = e == null ? void 0 : e.onTypingComplete) == null || t.call(e), E(e.key));
    }
    function R({ key: e, offset: t, behavior: o = "smooth", block: s }) {
      if (typeof t == "number")
        l.value.scrollTo({
          top: t,
          behavior: o
        });
      else if (e !== void 0) {
        const a = m.value[e];
        if (a) {
          const r = i.value.findIndex((u) => u.key === e);
          c.value = r === i.value.length - 1, a.nativeElement.scrollIntoView({
            behavior: o,
            block: s
          });
        }
      }
    }
    function w(e, t) {
      t != null && (e ? Reflect.set(m.value, t, e) : Reflect.deleteProperty(m.value, t));
    }
    return P(() => {
      n.autoScroll && setTimeout(() => {
        R({ offset: l.value.scrollHeight, behavior: "auto" });
      });
    }), I({
      nativeElement: l,
      scrollTo: R
    }), (e, t) => (g(), d("div", {
      ref_key: "listRef",
      ref: l,
      class: S([y(h).b(), e.rootClassName, e.className, c.value && y(h).b("reach-end")]),
      onScroll: V
    }, [
      (g(!0), d(U, null, _(y(i), (o, s) => (g(), d("div", {
        key: o.key
      }, [
        C.leading ? (g(), d("div", {
          key: 0,
          class: S(y(h).b("leading"))
        }, [
          B(e.$slots, "leading", {
            info: o,
            index: s
          })
        ], 2)) : A("", !0),
        K(q, O({ ref_for: !0 }, o, {
          ref_for: !0,
          ref: (a) => w(a, o.key),
          typing: N.value ? o.typing : !1,
          onTypingComplete: (a) => $(o),
          onUpdate: H
        }), W({ _: 2 }, [
          _(C, (a, r) => ({
            name: r,
            fn: j((u) => [
              B(e.$slots, r, {
                info: { ...u, ...o },
                index: s
              })
            ])
          }))
        ]), 1040, ["typing", "onTypingComplete"])
      ]))), 128))
    ], 34));
  }
});
export {
  le as default
};