@artmate/chat
Version:
**开箱即用的AI组件库（基于 Vue3 + ElementPlus）**
131 lines (130 loc) • 4 kB
JavaScript
import { defineComponent as F, useSlots as M, ref as f, watch as v, nextTick as S, onMounted as P, createElementBlock as d, openBlock as g, normalizeClass as _, unref as y, Fragment as U, renderList as B, createCommentVNode as A, createVNode as K, renderSlot as k, 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__ */ F({
__name: "index",
props: {
autoScroll: { type: Boolean, default: !0 },
className: {},
items: { default: () => [] },
roles: {},
rootClassName: {}
},
setup(I, { expose: N }) {
const a = I, C = M(), h = G("bubble-list"), D = f(!0), c = f(!1), p = f(0), n = f(), m = f({}), { ListData: T, setListData: E } = Q(a.items, a.roles), [i, L, V] = J(T);
v(
() => a.items,
() => {
E(a.items);
}
), v(
() => T.value,
() => {
V();
}
);
function H(e) {
const t = e.target;
c.value = t.scrollHeight - Math.abs(t.scrollTop) - t.clientHeight <= X;
}
v(
() => p.value,
() => {
a.autoScroll && n.value && c.value && n.value.scrollTo({
top: n.value.scrollHeight
});
}
), v(
() => i.value.length,
() => {
S(() => {
var e;
if (a.autoScroll) {
const t = (e = i.value[i.value.length - 2]) == null ? void 0 : e.key, o = m.value[t];
if (o) {
const { nativeElement: l } = o, { top: s = 0, bottom: r = 0 } = (l == null ? void 0 : l.getBoundingClientRect()) ?? {}, { top: u, bottom: z } = n.value.getBoundingClientRect();
s < z && r > u && (p.value += 1, c.value = !0);
}
}
});
}
);
function $() {
a.autoScroll && (p.value = p.value + 1);
}
function w(e) {
var t;
e != null && e.key && ((t = e == null ? void 0 : e.onTypingComplete) == null || t.call(e), L(e.key));
}
function R({ key: e, offset: t, behavior: o = "smooth", block: l }) {
if (typeof t == "number")
n.value.scrollTo({
top: t,
behavior: o
});
else if (e !== void 0) {
const s = m.value[e];
if (s) {
const r = i.value.findIndex((u) => u.key === e);
c.value = r === i.value.length - 1, s.nativeElement.scrollIntoView({
behavior: o,
block: l
});
}
}
}
function x(e, t) {
t != null && (e ? Reflect.set(m.value, t, e) : Reflect.deleteProperty(m.value, t));
}
return P(() => {
S(() => {
R({ offset: n.value.scrollHeight, behavior: "auto" });
});
}), N({
nativeElement: n.value,
scrollTo: R
}), (e, t) => (g(), d("div", {
ref_key: "listRef",
ref: n,
class: _([y(h).b(), e.rootClassName, e.className, c.value && y(h).b("reach-end")]),
onScroll: H
}, [
(g(!0), d(U, null, B(y(i), (o, l) => (g(), d("div", {
key: o.key
}, [
C.leading ? (g(), d("div", {
key: 0,
class: _(y(h).b("leading"))
}, [
k(e.$slots, "leading", {
info: o,
index: l
})
], 2)) : A("", !0),
K(q, O({ ref_for: !0 }, o, {
ref_for: !0,
ref: (s) => x(s, o.key),
typing: D.value ? o.typing : !1,
onTypingComplete: (s) => w(o),
onUpdate: $
}), W({ _: 2 }, [
B(C, (s, r) => ({
name: r,
fn: j((u) => [
k(e.$slots, r, {
info: { ...u, ...o },
index: l
})
])
}))
]), 1040, ["typing", "onTypingComplete"])
]))), 128))
], 34));
}
});
export {
le as default
};