vue3-chat-yz
Version:
vue3-chat-yz
1,289 lines (1,282 loc) • 42 kB
JavaScript
import { defineComponent as M, computed as I, createElementBlock as c, openBlock as l, normalizeClass as v, unref as a, createCommentVNode as B, createElementVNode as R, normalizeStyle as A, renderSlot as k, createBlock as T, resolveDynamicComponent as W, toDisplayString as P, createTextVNode as z, useSlots as Z, watch as j, resolveComponent as O, createVNode as w, withCtx as C, Transition as oe, withDirectives as Ce, vShow as _e, ref as S, watchEffect as $e, Fragment as L, nextTick as fe, onMounted as we, renderList as q, mergeProps as he, createSlots as Te, onUnmounted as Se, shallowRef as ve } from "vue";
import { Opportunity as Re, Loading as Ne, SuccessFilled as Ee, CircleCloseFilled as Be, ArrowUpBold as Le } from "@element-plus/icons-vue";
import { ElDropdown as Ae, ElDropdownMenu as Ie, ElDropdownItem as Ve, ElMessage as Oe } from "element-plus";
function De(s, d, n, t, e) {
let i = `${s}-${d}`;
return n && (i += `-${n}`), i;
}
function G(s) {
const d = "Vc";
return {
namespace: d,
b: (t = "") => De(d, s, t)
};
}
const Fe = ["src"], Ke = /* @__PURE__ */ M({
__name: "Welcome",
props: {
classNames: {},
description: {},
extra: {},
icon: {},
rootClassName: {},
styles: {},
title: {},
variant: { default: "filled" },
directions: {}
},
setup(s) {
const d = s, n = G("welcome"), t = I(() => [
d.rootClassName,
{
[n.b("filled")]: d.variant === "filled",
[n.b("borderless")]: d.variant === "borderless",
[n.b("left")]: d.directions === "left",
[n.b("right")]: d.directions === "right"
}
]);
return (e, i) => {
var f, y, m, _, u, $, o, g;
return l(), c("div", {
class: v([a(n).b(), t.value])
}, [
e.$slots.icon || e.icon ? (l(), c("div", {
key: 0,
class: v([a(n).b("icon"), (f = e.classNames) == null ? void 0 : f.icon]),
style: A((y = e.styles) == null ? void 0 : y.icon)
}, [
k(e.$slots, "icon", {}, () => [
typeof e.icon == "string" ? (l(), c("img", {
key: 0,
src: e.icon,
alt: "欢迎图标"
}, null, 8, Fe)) : (l(), T(W(e.icon), { key: 1 }))
], !0)
], 6)) : B("", !0),
R("div", {
class: v(a(n).b("content-wrapper"))
}, [
e.$slots.title || e.title ? (l(), c("div", {
key: 0,
class: v([a(n).b("title"), (m = e.classNames) == null ? void 0 : m.title, (e.$slots.extra || e.extra) && "extra"]),
style: A((_ = e.styles) == null ? void 0 : _.title)
}, [
k(e.$slots, "title", {}, () => [
R("h4", null, P(e.title), 1)
], !0),
e.$slots.extra || e.extra ? (l(), c("div", {
key: 0,
class: v([a(n).b("extra"), (u = e.classNames) == null ? void 0 : u.extra]),
style: A(($ = e.styles) == null ? void 0 : $.extra)
}, [
k(e.$slots, "extra", {}, () => [
z(P(e.extra), 1)
], !0)
], 6)) : B("", !0)
], 6)) : B("", !0),
R("span", {
class: v([a(n).b("description"), (o = e.classNames) == null ? void 0 : o.description]),
style: A((g = e.styles) == null ? void 0 : g.description)
}, [
k(e.$slots, "description", {}, () => [
z(P(e.description), 1)
], !0)
], 6)
], 2)
], 2);
};
}
}), H = (s, d) => {
const n = s.__vccOpts || s;
for (const [t, e] of d)
n[t] = e;
return n;
}, le = /* @__PURE__ */ H(Ke, [["__scopeId", "data-v-f9b19b9d"]]);
le.install = (s) => {
s.component("Welcome", le);
};
const Me = ["disabled"], He = /* @__PURE__ */ M({
__name: "Thinking",
props: {
content: { default: "" },
modelValue: { type: Boolean, default: !0 },
status: { default: "start" },
autoCollapse: { type: Boolean, default: !1 },
disabled: { type: Boolean, default: !1 },
duration: { default: "0.2s" },
buttonWidth: { default: "160px" },
maxWidth: { default: "500px" },
backgroundColor: {},
color: { default: "#00" },
isBorder: { type: Boolean, default: !1 },
lb: { type: Boolean, default: !0 }
},
emits: ["update:modelValue", "change"],
setup(s, { emit: d }) {
const n = G("thinking"), t = s, e = I(() => t.status === "start" ? "开始思考" : t.status === "thinking" ? "思考中" : t.status === "end" ? "思考完成" : "思考失败"), i = d, f = Z(), y = I({
get() {
return t.modelValue;
},
set(o) {
i("update:modelValue", o);
}
}), m = () => {
y.value = !y.value, i("change", !y.value, t.status);
}, _ = I(() => {
const o = {};
return t.buttonWidth && (o.width = t.buttonWidth), t.isBorder && (o.border = "1px solid var(--border-color)"), o;
}), u = I(() => {
const o = {};
return t.maxWidth && (o.maxWidth = t.maxWidth), t.backgroundColor && (t.backgroundColor.includes("linear-gradient") ? o.background = t.backgroundColor : o.backgroundColor = t.backgroundColor), t.color && (o.color = t.color), o;
}), $ = I(() => ({
transition: t.duration ? `transform ${t.duration} ease` : "transform $motion-duration-slow ease"
}));
return j(
() => t.status,
(o) => {
t.autoCollapse && o === "end" && (y.value = !1, console.log("isOpen.value", y.value));
}
), j(
() => y.value,
(o) => {
console.log("Watch isOpen.value", o);
}
), (o, g) => {
const b = O("el-icon");
return l(), c("div", {
class: v(a(n).b())
}, [
R("div", null, [
R("button", {
class: v(a(n).b("top")),
disabled: o.disabled,
style: A(_.value),
onClick: m
}, [
R("span", {
class: v(a(n).b("icon"))
}, [
k(o.$slots, "icon", { status: o.status }, () => [
o.status === "start" ? (l(), T(b, {
key: 0,
style: { color: "var(--start-color)" }
}, {
default: C(() => [
w(a(Re))
]),
_: 1
})) : o.status === "thinking" ? (l(), T(b, {
key: 1,
style: { color: "var(--thinking-color)" },
class: "thinking-loading"
}, {
default: C(() => [
w(a(Ne))
]),
_: 1
})) : o.status === "end" ? (l(), T(b, {
key: 2,
style: { color: "var(--end-color)" }
}, {
default: C(() => [
w(a(Ee))
]),
_: 1
})) : o.status === "error" ? (l(), T(b, {
key: 3,
style: { color: "var(--error-color)" }
}, {
default: C(() => [
w(a(Be))
]),
_: 1
})) : B("", !0)
], !0)
], 2),
R("span", {
class: v(a(n).b("label"))
}, [
k(o.$slots, "label", { status: o.status }, () => [
z(P(e.value), 1)
], !0)
], 2),
R("span", {
class: v([a(n).b("arrow"), { "is-open": y.value }]),
style: A($.value)
}, [
k(o.$slots, "arrow", {}, () => [
w(b, { class: "el-icon-center" }, {
default: C(() => [
w(a(Le))
]),
_: 1
})
], !0)
], 6)
], 14, Me)
]),
w(oe, { name: "thinking-content" }, {
default: C(() => [
Ce(R("div", {
class: v([
a(n).b("content"),
{ [a(n).b("content-lb")]: o.lb }
]),
style: A(u.value)
}, [
a(f).error && o.status === "error" ? k(o.$slots, "error", { key: 0 }, void 0, !0) : k(o.$slots, "content", {
key: 1,
status: o.status,
content: o.content
}, () => [
z(P(o.content), 1)
], !0)
], 6), [
[_e, y.value]
])
]),
_: 3
})
], 2);
};
}
}), se = /* @__PURE__ */ H(He, [["__scopeId", "data-v-144544e5"]]);
se.install = (s) => {
s.component("Thinking", se);
};
function We(s) {
return I(() => {
if (!s) return [!1, 0, 0];
let n = {
step: 1,
interval: 50
};
return typeof s == "object" && (n = { ...n, ...s }), [!0, n.interval, n.step];
}).value;
}
const me = (s) => typeof s == "string", Pe = (s, d, n, t) => {
let e = S(""), i = S(1);
const f = S(d && me(s.value));
j(
() => s.value,
() => {
console.log(s.value), console.log(e.value), !f.value && me(s.value) ? i.value = s.value.length : f.value && s.value.indexOf(e.value) !== 0 && (i.value = 1), e.value = s.value;
}
), $e(() => {
if (f.value && i.value < s.value.length) {
const _ = setTimeout(() => {
const u = ($) => $ + n;
i.value = u(i.value);
}, t);
return () => clearTimeout(_);
}
});
const y = I(() => f.value && i.value < s.value.length ? () => s.value.slice(0, i.value) : () => s.value), m = I(() => f.value && i.value < s.value.length);
return [y, m];
}, Ue = {}, ze = { class: "vk-wapper-dot" }, je = {
key: "item-1",
class: /* @__PURE__ */ v("vk-wapper-dot-item")
}, Ge = {
key: "item-2",
class: /* @__PURE__ */ v("vk-wapper-dot-item")
}, qe = {
key: "item-3",
class: /* @__PURE__ */ v("vk-wapper-dot-item")
};
function Xe(s, d) {
return l(), c("span", ze, [
(l(), c("i", je)),
(l(), c("i", Ge)),
(l(), c("i", qe))
]);
}
const pe = /* @__PURE__ */ H(Ue, [["render", Xe], ["__scopeId", "data-v-88aadeec"]]), Je = ["innerHTML"], Qe = ["innerHTML"], Ye = /* @__PURE__ */ M({
inheritAttrs: !1,
__name: "Bubble",
props: {
avatar: { default: "" },
className: {},
content: { default: "" },
loading: { type: Boolean, default: !1 },
loadingRender: { type: Function, default: void 0 },
messageRender: {},
placement: { default: "start" },
shape: {},
styles: {},
typing: { type: [Boolean, Object], default: !1 },
variant: { default: "filled" },
transparent: { type: Boolean, default: !1 }
},
emits: ["onTypingComplete", "onUpdate"],
setup(s, { expose: d, emit: n }) {
const t = s;
console.log("bubble props", t);
const e = n, i = G("bubble"), f = Z();
console.log("bubble slots", f);
const y = S(), m = I(() => t.content), [_, u, $] = We(t.typing), [o, g] = Pe(
m,
_,
$,
u
);
console.log("typedContent.value", o.value);
const b = I(
() => {
var r;
return t.messageRender ? t.messageRender(((r = o.value) == null ? void 0 : r.call(o)) ?? "") : o.value;
}
);
function N(r) {
return typeof r == "string";
}
const p = S(!1);
return j(
() => g.value || t.loading,
() => {
!g.value && !t.loading ? p.value || (p.value = !0, e("onTypingComplete")) : p.value = !1;
}
), j(
() => o.value(),
// () => props.onUpdate?.()
() => e("onUpdate")
), d({
nativeElement: y
}), (r, E) => {
var V, F, K, X, x, ee, te, h, U, J, Q, Y;
const D = O("el-avatar");
return l(), c("div", {
ref_key: "divRef",
ref: y,
class: v([a(i).b(), a(i).b(r.placement)])
}, [
r.avatar || a(f).avatar ? (l(), c("div", {
key: 0,
class: v([a(i).b("avatar"), (V = t.className) == null ? void 0 : V.avatar]),
style: A((F = t.styles) == null ? void 0 : F.avatar)
}, [
k(r.$slots, "avatar", {}, () => [
typeof r.avatar == "string" ? (l(), T(D, {
key: 0,
size: 32,
src: r.avatar
}, null, 8, ["src"])) : (l(), T(W(r.avatar), { key: 1 }))
], !0)
], 6)) : B("", !0),
a(f).header || a(f).footer ? (l(), c("div", {
key: 1,
class: v([a(i).b("content-wrapper")])
}, [
a(f).header ? (l(), c("div", {
key: 0,
class: v([a(i).b("header"), (K = t.className) == null ? void 0 : K.header]),
style: A((X = t.styles) == null ? void 0 : X.header)
}, [
k(r.$slots, "header", {}, void 0, !0)
], 6)) : B("", !0),
R("div", {
class: v([
a(i).b("content"),
a(i).b(`content-${t.variant}`),
(x = t.className) == null ? void 0 : x.content,
t.shape && a(i).b(`content-${t.placement}-${t.shape}`),
{
[a(i).b("content-filled-transparent")]: t.transparent
}
]),
style: A((ee = t.styles) == null ? void 0 : ee.content)
}, [
t.loading ? (l(), c(L, { key: 0 }, [
a(f).loading ? k(r.$slots, "loading", { key: 0 }, void 0, !0) : r.loadingRender ? (l(), T(W(r.loadingRender()), { key: 1 })) : (l(), T(pe, { key: 2 }))
], 64)) : B("", !0),
t.loading ? B("", !0) : (l(), c(L, { key: 1 }, [
a(f).content ? (l(), c(L, { key: 0 }, [
a(f).content ? k(r.$slots, "content", { key: 0 }, void 0, !0) : B("", !0)
], 64)) : (l(), c(L, { key: 1 }, [
N(b.value) ? (l(), c("div", {
key: 1,
innerHTML: b.value
}, null, 8, Je)) : (l(), T(W(b.value), { key: 0 }))
], 64))
], 64))
], 6),
a(f).footer ? (l(), c("div", {
key: 1,
class: v([a(i).b("footer"), (te = t.className) == null ? void 0 : te.footer]),
style: A((h = t.styles) == null ? void 0 : h.footer)
}, [
k(r.$slots, "footer", {}, void 0, !0)
], 6)) : B("", !0)
], 2)) : (l(), c(L, { key: 2 }, [
R("div", {
class: v([
a(i).b("content"),
a(i).b(`content-${t.variant}`),
(U = t.className) == null ? void 0 : U.content,
t.shape && a(i).b(`content-${t.placement}-${t.shape}`),
{
[a(i).b("content-filled-transparent")]: t.transparent
}
]),
style: A((J = t.styles) == null ? void 0 : J.content)
}, [
t.loading ? (l(), c(L, { key: 0 }, [
a(f).loading ? k(r.$slots, "loading", { key: 0 }, void 0, !0) : r.loadingRender ? (l(), T(W(r.loadingRender()), { key: 1 })) : (l(), T(pe, { key: 2 }))
], 64)) : B("", !0),
t.loading ? B("", !0) : (l(), c(L, { key: 1 }, [
a(f).content ? (l(), c(L, { key: 0 }, [
a(f).content ? k(r.$slots, "content", { key: 0 }, void 0, !0) : B("", !0)
], 64)) : (l(), c(L, { key: 1 }, [
N(b.value) ? (l(), c("div", {
key: 1,
innerHTML: b.value
}, null, 8, Qe)) : (l(), T(W(b.value), { key: 0 }))
], 64))
], 64))
], 6),
a(f).footer ? (l(), c("div", {
key: 0,
class: v([a(i).b("footer"), (Q = t.className) == null ? void 0 : Q.footer]),
style: A((Y = t.styles) == null ? void 0 : Y.footer)
}, [
k(r.$slots, "footer", {}, void 0, !0)
], 6)) : B("", !0)
], 64))
], 2);
};
}
}), ke = /* @__PURE__ */ H(Ye, [["__scopeId", "data-v-fba8283d"]]), Ze = /* @__PURE__ */ M({
__name: "BubbleList",
props: {
autoScroll: { type: Boolean, default: !0 },
className: {},
items: { default: () => [] },
rootClassName: {}
},
setup(s, { expose: d }) {
const n = s;
console.log("bubblelist props", n);
const t = S(), e = S(0), i = S({}), f = Z(), y = G("bubble-list"), m = S(!1), _ = S(1), u = S(!0), $ = (p) => {
const r = p.target;
m.value = r.scrollHeight - Math.abs(r.scrollTop) - r.clientHeight <= _.value;
}, o = (p, r) => {
r != null && (p ? Reflect.set(i.value, r, p) : Reflect.deleteProperty(i.value, r));
};
j(
() => e.value,
() => {
n.autoScroll && t.value && m.value && t.value.scrollTo({
top: t.value.scrollHeight,
behavior: "smooth"
});
}
);
function g() {
n.autoScroll && (e.value = e.value + 1);
}
j(() => n.items.length, () => {
fe(() => {
n.autoScroll && (e.value += 1, m.value = !0);
});
});
const b = (p) => {
var r;
p.key && ((r = p == null ? void 0 : p.onTypingComplete) == null || r.call(p));
}, N = ({
key: p,
offset: r,
behavior: E = "smooth",
block: D
}) => {
var V;
if (typeof r == "number")
(V = t.value) == null || V.scrollTo({
top: r,
behavior: E
});
else if (p !== void 0) {
const F = i.value[n.items[p].key];
if (F) {
const K = n.items.findIndex(
(X) => X.key === `persit_${p}`
);
console.log("index", K, n.items), m.value = K === n.items.length - 1, F.$el.scrollIntoView({
behavior: E,
block: D
});
}
}
};
return we(() => {
fe(() => {
N({ offset: t.value.scrollHeight, behavior: "auto" });
});
}), d({
nativeElement: t.value,
scrollTo: N
}), (p, r) => (l(), c("div", {
ref_key: "listRef",
ref: t,
class: v([
a(y).b(),
p.rootClassName,
p.className,
m.value ? a(y).b("reach-end") : ""
]),
onScroll: $
}, [
(l(!0), c(L, null, q(n.items, (E) => (l(), T(ke, he({
key: E.key,
ref_for: !0
}, E, {
onOnUpdate: g,
ref_for: !0,
ref: (D) => o(D, E.key),
"on-typing-complete": () => b(E),
typing: u.value ? E.typing : !1
}), Te({ _: 2 }, [
q(f, (D, V) => ({
name: V,
fn: C(() => [
k(p.$slots, V, { info: E }, void 0, !0)
])
}))
]), 1040, ["on-typing-complete", "typing"]))), 128))
], 34));
}
}), xe = /* @__PURE__ */ H(Ze, [["__scopeId", "data-v-d2106e49"]]);
function et(s, d = []) {
const n = I(
() => {
if (!s)
return [!1, void 0, void 0];
let e = {
sort: void 0,
title: void 0
};
return typeof s == "object" && (e = { ...e, ...s }), [!0, e.sort, e.title];
}
);
return console.log(n.value), I(() => {
const e = n.value[0];
if (!e)
return [[
{
name: "unGroup",
data: d,
title: void 0
}
], e];
const i = d.reduce(
(m, _) => {
const u = _.group || "unGroup";
return m[u] || (m[u] = []), m[u].push(_), m;
},
{}
);
return [(n.value[1] && typeof n.value[1] != "boolean" ? Object.keys(i).sort(n.value[1]) : Object.keys(i)).map((m) => ({
name: m === "unGroup" ? void 0 : m,
data: i[m],
title: n.value[2]
})), n.value[0]];
}).value;
}
const tt = M({
props: {
vNode: {
type: [String, Object],
require: !0
}
},
setup(s) {
return () => s.vNode;
}
}), nt = /* @__PURE__ */ M({
__name: "Dropdown",
props: {
placement: {},
trigger: {},
disabled: { type: Boolean, default: !1 },
menu: { default: () => [] }
},
emits: ["onOpenChange"],
setup(s, { emit: d }) {
const n = s, t = d;
return (e, i) => (l(), T(a(Ae), {
onVisibleChange: i[0] || (i[0] = (f) => t("onOpenChange", f))
}, {
dropdown: C(() => [
w(a(Ie), null, {
default: C(() => [
(l(!0), c(L, null, q(n.menu, (f, y) => (l(), T(a(Ve), he({
key: y,
ref_for: !0
}, f), {
default: C(() => [
z(P(f.label), 1)
]),
_: 2
}, 1040))), 128))
]),
_: 1
})
]),
default: C(() => [
k(e.$slots, "default")
]),
_: 3
}));
}
}), ot = /* @__PURE__ */ M({
__name: "ConversationItem",
props: {
direction: {},
className: {},
active: { type: Boolean },
info: {},
menu: {},
inEllipsis: { type: Boolean, default: !0 },
line: { default: 1 }
},
emits: ["click"],
setup(s, { emit: d }) {
const n = s, t = d, e = S(!1), i = I(() => {
var o, g;
return [
n.className,
$.b("item"),
{ [$.b("item-active")]: n.active && !((o = n.info) != null && o.disabled) },
{ [$.b("item-disabled")]: (g = n.info) == null ? void 0 : g.disabled }
];
}), f = () => {
var o;
(o = n.info) != null && o.disabled || t("click", n.info);
}, y = () => {
var o, g, b, N, p;
if ((o = n.info) != null && o.disabled) {
e.value = !1;
return;
}
u.value && (e.value = ((g = u.value) == null ? void 0 : g.scrollWidth) > ((b = u.value) == null ? void 0 : b.offsetWidth) || ((N = u.value) == null ? void 0 : N.scrollHeight) > ((p = u.value) == null ? void 0 : p.offsetHeight));
}, m = (o) => {
var g, b;
Array.isArray(n.menu) || n.info && ((b = (g = n.menu) == null ? void 0 : g.onClick) == null || b.call(g, { ...n.info, key: o }));
}, _ = (o) => {
o.stopPropagation();
}, u = S(), $ = G("conversations");
return (o, g) => {
var D;
const b = O("el-icon"), N = O("More"), p = O("ElIcon"), r = O("ElButton"), E = O("el-tooltip");
return l(), T(E, {
visible: e.value,
"onUpdate:visible": g[0] || (g[0] = (V) => e.value = V),
content: (D = o.info) == null ? void 0 : D.label,
disabled: o.inEllipsis && !e.value,
placement: o.direction === "ltr" ? "left" : "right"
}, {
default: C(() => {
var V, F;
return [
R("li", {
class: v(i.value),
onClick: f
}, [
k(o.$slots, "icon", { class: "icon" }, () => [
o.info.icon ? (l(), c("div", {
key: 0,
class: v(a($).b("icon"))
}, [
typeof o.info.icon == "string" ? (l(), T(b, { key: 0 }, {
default: C(() => [
(l(), T(W(o.info.icon)))
]),
_: 1
})) : (l(), T(W(o.info.icon), { key: 1 }))
], 2)) : B("", !0)
], !0),
R("div", {
ref_key: "textRef",
ref: u,
class: v(a($).b("label")),
style: A({ textOverflow: "ellipsis", "-webkit-line-clamp": o.line }),
onMouseenter: y
}, [
k(o.$slots, "label", { item: o.info }, () => [
z(P(o.info.label), 1)
], !0)
], 38),
o.menu && !((V = o.info) != null && V.disabled) ? (l(), T(nt, {
key: 0,
disabled: (F = o.info) == null ? void 0 : F.disabled,
menu: Array.isArray(o.menu) ? o.menu : o.menu.items,
placement: o.direction === "rtl" ? "bottom-start" : "bottom-end",
trigger: "click",
onCommand: m
}, {
default: C(() => {
var K;
return [
w(r, {
disabled: (K = o.info) == null ? void 0 : K.disabled,
link: "",
onClick: _
}, {
default: C(() => [
w(p, {
class: v(a($).b("menu-icon"))
}, {
default: C(() => [
w(N)
]),
_: 1
}, 8, ["class"])
]),
_: 1
}, 8, ["disabled"])
];
}),
_: 1
}, 8, ["disabled", "menu", "placement"])) : B("", !0)
], 2)
];
}),
_: 3
}, 8, ["visible", "content", "disabled", "placement"]);
};
}
}), ye = /* @__PURE__ */ H(ot, [["__scopeId", "data-v-2b5b7ab3"]]), lt = /* @__PURE__ */ M({
__name: "Conversation",
props: {
style: {},
className: {},
direction: {},
groupable: { type: [Boolean, Object] },
items: {},
activeKey: {},
defaultActiveKey: {},
onActiveChange: { type: Function },
classNames: {},
styles: {},
menu: { type: [Function, Array] }
},
emits: ["update:activeKey"],
setup(s, { emit: d }) {
const n = s, t = d, e = G("conversations"), i = I(() => n.activeKey || n.defaultActiveKey || "");
console.log(n.items);
const [f, y] = et(n.groupable, n.items);
console.log(f, y);
const m = I(() => [
e.b(),
n.className,
{
[e.b("rtl")]: n.direction === "rtl"
}
]);
function _(u) {
n.onActiveChange && n.onActiveChange(u.key) === !1 || t("update:activeKey", u.key);
}
return (u, $) => (l(), c("ul", {
class: v(m.value),
style: A(n.style)
}, [
(l(!0), c(L, null, q(a(f), (o, g) => (l(), c(L, { key: g }, [
a(y) ? (l(), c(L, { key: 0 }, [
(l(), c("li", {
key: o.name || `key-${g}`
}, [
o.title ? (l(), T(a(tt), {
key: 0,
vNode: o.title
}, null, 8, ["vNode"])) : (l(), c(L, { key: 1 }, [
z(P(o.name), 1)
], 64))
])),
R("ul", {
class: v([a(e).b("list")])
}, [
(l(!0), c(L, null, q(o.data, (b, N) => {
var p, r;
return l(), T(ye, {
key: b.key || `key-${N}`,
active: i.value === b.key,
"class-name": (p = n.classNames) == null ? void 0 : p.item,
direction: n.direction,
info: b,
menu: typeof n.menu == "function" ? n.menu(b) : n.menu,
style: A((r = n.styles) == null ? void 0 : r.item),
onClick: _
}, {
label: C(({ item: E }) => [
k(u.$slots, "item", { item: E }, void 0, !0)
]),
icon: C(() => [
k(u.$slots, "icon", {}, void 0, !0)
]),
_: 2
}, 1032, ["active", "class-name", "direction", "info", "menu", "style"]);
}), 128))
], 2)
], 64)) : (l(!0), c(L, { key: 1 }, q(o.data, (b, N) => {
var p, r;
return l(), T(ye, {
key: b.key || `key-${N}`,
active: i.value === b.key,
"class-name": (p = n.classNames) == null ? void 0 : p.item,
direction: n.direction,
info: b,
menu: typeof n.menu == "function" ? n.menu(b) : n.menu,
style: A((r = n.styles) == null ? void 0 : r.item),
onClick: _
}, {
label: C(({ item: E }) => [
k(u.$slots, "item", { item: E }, void 0, !0)
]),
icon: C(() => [
k(u.$slots, "icon", {}, void 0, !0)
]),
_: 2
}, 1032, ["active", "class-name", "direction", "info", "menu", "style"]);
}), 128))
], 64))), 128))
], 6));
}
}), st = /* @__PURE__ */ H(lt, [["__scopeId", "data-v-2078bce4"]]), at = {}, it = {
color: "currentColor",
viewBox: "0 0 1000 1000",
xmlns: "http://www.w3.org/2000/svg",
xmlnsXlink: "http://www.w3.org/1999/xlink"
};
function rt(s, d) {
return l(), c("svg", it, d[0] || (d[0] = [
R("title", null, "停止", -1),
R("rect", {
fill: "currentColor",
height: "250",
rx: "24",
ry: "24",
width: "250",
x: "375",
y: "375"
}, null, -1),
R("circle", {
cx: "500",
cy: "500",
fill: "none",
r: "450",
stroke: "currentColor",
"stroke-width": "100",
opacity: "0.45"
}, null, -1),
R("circle", {
cx: "500",
cy: "500",
fill: "none",
r: "450",
stroke: "currentColor",
"stroke-width": "100",
"stroke-dasharray": "600 9999999"
}, [
R("animateTransform", {
attributeName: "transform",
dur: "1s",
from: "0 500 500",
repeatCount: "indefinite",
to: "360 500 500",
type: "rotate"
})
], -1)
]));
}
const be = /* @__PURE__ */ H(at, [["render", rt]]), ut = { class: "foo" }, ct = /* @__PURE__ */ M({
__name: "Sender",
props: {
modelValue: {},
className: {},
placeholder: {},
disabled: { type: Boolean },
readonly: { type: Boolean },
rootClassName: {},
styles: {},
loading: { type: Boolean },
variants: { default: "default" },
submitType: { default: "enter" },
onInput: {},
onSubmit: {}
},
emits: ["update:modelValue", "on-input", "on-submit"],
setup(s, { expose: d, emit: n }) {
const t = G("sender"), e = s, i = S(), f = S(!1), y = S(), m = S(), _ = S(!1), u = n, $ = Z(), o = I(() => {
var h;
return [
t.b("input"),
(h = e == null ? void 0 : e.className) == null ? void 0 : h.input
];
}), g = I(() => [
t.b("container"),
{
[t.b("default")]: e.variants === "default",
[t.b("updown")]: e.variants === "updown"
}
]);
function b(h) {
u("update:modelValue", h);
}
const N = (h) => {
u("on-input", h);
}, p = (h) => {
u("on-submit", h);
}, r = I({
get: () => e.modelValue,
set: (h) => b(h)
}), E = (h) => {
if (e.submitType === "enter" && !(e != null && e.loading) && h.key === "Enter" && !h.shiftKey && (h.preventDefault(), p(e.modelValue)), e.submitType === "shiftEnter") {
if (h.key === "Enter" && !h.shiftKey && !(e != null && e.loading))
return;
h.key === "Enter" && h.shiftKey && (h.preventDefault(), p(e.modelValue));
}
};
return d({
handleHeaderClose: () => {
f.value = !1;
},
handleHeaderOpen: () => {
f.value = !0;
},
handleFocusDefault: () => {
var h;
(h = y.value) == null || h.focus();
},
handleFocusupDown: () => {
var h;
(h = m.value) == null || h.focus();
},
handleFooterClose: () => {
_.value = !1;
},
handleFooterOpen: () => {
_.value = !0;
},
handleInputSubmit: () => {
r.value && p(r.value);
},
handleInputClear: () => {
r.value = "";
}
}), (h, U) => {
var ce, de;
const J = O("el-input"), Q = O("ElIcon"), Y = O("ElButton"), ie = O("Promotion"), re = O("el-icon"), ue = O("el-button");
return l(), c("div", {
class: v([a(t).b(), e == null ? void 0 : e.rootClassName]),
ref_key: "senderRef",
ref: i
}, [
w(oe, { name: "header-slide" }, {
default: C(() => [
f.value ? (l(), c("div", {
key: 0,
class: v([a(t).b("header")])
}, [
k(h.$slots, "header", {}, void 0, !0)
], 2)) : B("", !0)
]),
_: 3
}),
R("div", {
class: v(g.value)
}, [
e.variants === "default" ? (l(), c(L, { key: 0 }, [
a($).prefix ? (l(), c("div", {
key: 0,
class: v([a(t).b("prefix")])
}, [
k(h.$slots, "prefix", {}, void 0, !0)
], 2)) : B("", !0),
w(J, {
ref_key: "inputRefDefault",
ref: y,
modelValue: r.value,
"onUpdate:modelValue": U[0] || (U[0] = (ne) => r.value = ne),
placeholder: e == null ? void 0 : e.placeholder,
disabled: e == null ? void 0 : e.disabled,
autosize: "",
resize: "none",
type: "textarea",
readonly: (e == null ? void 0 : e.readonly) || (e == null ? void 0 : e.loading),
class: v(o.value),
style: A({ ...(ce = e == null ? void 0 : e.styles) == null ? void 0 : ce.input }),
submitType: e == null ? void 0 : e.submitType,
onInput: N,
onKeypress: E
}, null, 8, ["modelValue", "placeholder", "disabled", "readonly", "class", "style", "submitType"]),
a($).actionsList ? (l(), c("div", {
key: 1,
class: v([a(t).b("actionsList")])
}, [
k(h.$slots, "actionsList", {}, void 0, !0)
], 2)) : e != null && e.loading ? (l(), c("div", {
key: 2,
class: v([a(t).b("actionsList")])
}, [
w(Y, {
circle: "",
type: "primary",
disabled: !r.value
}, {
default: C(() => [
w(Q, {
color: "white",
size: "32"
}, {
default: C(() => [
w(be)
]),
_: 1
})
]),
_: 1
}, 8, ["disabled"])
], 2)) : (l(), c("div", {
key: 3,
class: v([a(t).b("actionsList-default")])
}, [
w(ue, {
circle: "",
type: "primary",
disabled: (e == null ? void 0 : e.disabled) || !r.value
}, {
default: C(() => [
w(re, null, {
default: C(() => [
w(ie, { onClick: p })
]),
_: 1
})
]),
_: 1
}, 8, ["disabled"])
], 2))
], 64)) : (l(), c(L, { key: 1 }, [
w(J, {
ref_key: "inputRefupDown",
ref: m,
modelValue: r.value,
"onUpdate:modelValue": U[1] || (U[1] = (ne) => r.value = ne),
placeholder: e == null ? void 0 : e.placeholder,
disabled: e == null ? void 0 : e.disabled,
autosize: "",
resize: "none",
type: "textarea",
readonly: (e == null ? void 0 : e.readonly) || (e == null ? void 0 : e.loading),
class: v(o.value),
style: A({ ...(de = e == null ? void 0 : e.styles) == null ? void 0 : de.input }),
submitType: e == null ? void 0 : e.submitType,
onInput: N,
onKeypress: E
}, null, 8, ["modelValue", "placeholder", "disabled", "readonly", "class", "style", "submitType"]),
R("div", ut, [
R("div", {
class: v([a(t).b("prefix")])
}, [
k(h.$slots, "prefix", {}, void 0, !0)
], 2),
a($).actionsList ? (l(), c("div", {
key: 0,
class: v([a(t).b("actionsList")])
}, [
k(h.$slots, "actionsList", {}, void 0, !0)
], 2)) : e != null && e.loading ? (l(), c("div", {
key: 1,
class: v([a(t).b("actionsList")])
}, [
w(Y, {
circle: "",
type: "primary",
disabled: !r.value
}, {
default: C(() => [
w(Q, {
color: "white",
size: "32"
}, {
default: C(() => [
w(be)
]),
_: 1
})
]),
_: 1
}, 8, ["disabled"])
], 2)) : (l(), c("div", {
key: 2,
class: v([a(t).b("actionsList-default")])
}, [
w(ue, {
circle: "",
type: "primary",
disabled: (e == null ? void 0 : e.disabled) || !r.value
}, {
default: C(() => [
w(re, null, {
default: C(() => [
w(ie, { onClick: p })
]),
_: 1
})
]),
_: 1
}, 8, ["disabled"])
], 2))
])
], 64))
], 2),
w(oe, { name: "header-slide" }, {
default: C(() => [
_.value ? (l(), c("div", {
key: 0,
class: v([a(t).b("footer")])
}, [
k(h.$slots, "footer", {}, void 0, !0)
], 2)) : B("", !0)
]),
_: 3
})
], 2);
};
}
}), dt = /* @__PURE__ */ H(ct, [["__scopeId", "data-v-ae15ee9c"]]);
function Ct(s) {
const {
lang: d = "zh-CN",
continuous: n = !0,
interimResults: t = !0,
onError: e,
onStart: i,
onEnd: f,
onResult: y
} = s, m = S(""), _ = S(!1), u = S(null), $ = () => {
"webkitSpeechRecognition" in window ? (u.value = new webkitSpeechRecognition(), u.value.continuous = n, u.value.interimResults = t, u.value.lang = d, u.value.onstart = () => {
_.value = !0, m.value = "", i == null || i();
}, u.value.onend = () => {
_.value = !1, f == null || f(m.value);
}, u.value.onerror = (g) => {
_.value = !1, e == null || e(g);
}, u.value.onresult = (g) => {
let b = "";
for (let N = 0; N < g.resultIndex + 1; N++)
b += g.results[N][0].transcript;
m.value = b, y == null || y(b);
}, u.value.start()) : Oe.error("当前浏览器不支持语音识别");
}, o = () => {
u.value && u.value.stop();
};
return Se(() => {
o(), u.value = null;
}), { start: $, stop: o, value: m, loading: _ };
}
const ft = `
`, vt = `
`, ge = ":", ae = (s) => (s ?? "").trim() !== "";
function mt() {
let s = "";
return new TransformStream({
/**
*
* @param streamChunk
* @param controller
* 类型：controller 是 TransformStreamDefaultController 类型。它提供了对流处理的控制能力。
描述：controller 用于控制当前的流处理状态。它允许你：
向下游发送数据：通过调用 controller.enqueue() 将转换后的数据传递到流的下一个阶段（比如下游的 WritableStream）。
终止流：通过调用 controller.terminate() 可以提前终止流。
关闭流：通过调用 controller.close() 来关闭流，这意味着没有更多的数据会被传递。
在 transform 方法中的作用：controller 用于控制流的输出。你可以使用它将处理后的数据（比如解析后的事件块）排入下一个流处理阶段，或者最终输出到可消费的地方。
*/
transform(d, n) {
s += d, console.log("buffer", s);
const t = s.split(ft);
console.log("parts", t), t.slice(0, -1).forEach((e) => {
ae(e) && n.enqueue(e);
}), s = t[t.length - 1];
},
flush(d) {
ae(s) && d.enqueue(s);
}
});
}
function pt() {
return new TransformStream({
transform(s, d) {
const t = s.split(vt).reduce((e, i) => {
const f = i.indexOf(ge);
if (f === -1)
throw new Error(
`键值分隔符 "${ge}" 在sse行块中找不到!`
);
const y = i.slice(0, f);
if (!ae(y)) return e;
const m = i.slice(f + 1);
return { ...e, [y]: m };
}, {});
Object.keys(t).length !== 0 && d.enqueue(t);
}
});
}
function _t() {
const s = S([]), d = S(null), n = S(!1), t = ve(null), e = ve(null);
return {
startStream: async (y) => {
const { readableStream: m } = y;
n.value = !0, d.value = null, s.value = [], t.value = new AbortController();
const _ = new TextDecoderStream();
e.value = m.pipeThrough(_).pipeThrough(mt()).pipeThrough(pt()), e.value[Symbol.asyncIterator] = async function* () {
var $;
const u = this.getReader();
for (; ; ) {
if (($ = t.value.signal) != null && $.aborted) {
await u.cancel();
break;
}
const { done: o, value: g } = await u.read();
if (o) break;
g && (yield g);
}
};
try {
for await (const u of e.value)
s.value.push(u);
} catch (u) {
u instanceof Error && (d.value = u);
} finally {
n.value = !1, e.value = null, t.value = null;
}
},
cancel: () => {
t.value && t.value.abort();
},
// 新增中断方法
data: s,
error: d,
isLoading: n
};
}
const yt = [
le,
se,
ke,
xe,
st,
dt
], bt = (s) => {
yt.forEach((d) => {
s.component(d.__name, d);
});
}, $t = { install: bt };
export {
ke as Bubble,
xe as BubbleList,
st as Conversation,
dt as Sender,
se as Thinking,
le as Welcome,
$t as default,
Ct as useAudio,
_t as useStream
};