@8wave/ai-elements 0.77.0 → 0.78.0

package/dist-vue/_chunks/PkChatbotMessages-j3ALQmGG.js

@@ -0,0 +1,467 @@
+import { t as e } from "./PkChatbotError-CvZxHGlI.js";
+import { c as t, f as n, o as r, p as i, u as a } from "./src-EtGd6cRz.js";
+import { t as o } from "./PkRelativeTime-WZ2aPcp_.js";
+import { t as s } from "./PkStreamingMarkdown-BBTAwHd_.js";
+import { t as c } from "./PkChatbotFeedbackForm-lj9CHdhn.js";
+import { t as l } from "./PkChatbotFilePreview-hRNtv2OJ.js";
+import { a as u, n as d, o as f, r as p, t as m } from "./utils-BegUBK7s.js";
+import { Fragment as h, Transition as g, computed as _, createBlock as v, createCommentVNode as y, createElementBlock as b, createElementVNode as x, createTextVNode as S, createVNode as C, defineAsyncComponent as w, defineComponent as T, mergeProps as E, nextTick as D, normalizeClass as O, normalizeStyle as k, onBeforeUnmount as A, onMounted as j, openBlock as M, ref as N, renderList as ee, renderSlot as te, resolveDynamicComponent as ne, toDisplayString as P, unref as F, useSlots as re, useTemplateRef as ie, watch as I, withCtx as L, withModifiers as R } from "vue";
+import { VvButton as ae, VvButtonGroup as oe, VvIcon as se } from "@volverjs/ui-vue/components";
+import { useI18n as ce } from "vue-i18n";
+//#region ../../packages/components/src/chat/toolComponentMap.ts
+var z = {
+	showArtifact: w(() => import("./PkToolShowArtifact-CbqpjzCA.js").then((e) => e.n)),
+	showCalendarEvent: w(() => import("./PkToolShowCalendarEvent-DXRAzzKm.js").then((e) => e.n)),
+	showComparison: w(() => import("./PkToolShowComparison-CqN_pqBW.js").then((e) => e.n)),
+	showContactForm: w(() => import("./PkToolShowContactForm-BkgfSyw7.js").then((e) => e.n)),
+	showEmail: w(() => import("./PkToolShowEmail-B7YiliCE.js").then((e) => e.n)),
+	showImageGallery: w(() => import("./PkToolShowImageGallery-Ckyxa0mx.js").then((e) => e.n)),
+	showLocation: w(() => import("./PkToolShowLocation-DteWf0Cs.js").then((e) => e.n)),
+	showMessage: w(() => import("./PkToolShowMessage-ujP26Ae3.js").then((e) => e.n)),
+	showMultipleChoice: w(() => import("./PkToolShowMultipleChoice-DZXfWtQp.js").then((e) => e.n)),
+	showProductList: w(() => import("./PkToolShowProductList-CtqWK0x4.js").then((e) => e.n)),
+	showQrCode: w(() => import("./PkToolShowQrCode-B4ex3m8i.js").then((e) => e.n)),
+	showSources: w(() => import("./PkToolShowSources-7Xt3iK2Z.js").then((e) => e.n)),
+	showSuggestedReply: w(() => import("./PkToolShowSuggestedReply-30m9yWDL.js").then((e) => e.n)),
+	showWeather: w(() => import("./PkToolShowWeather-B5Wp8WAt.js")),
+	showWebPages: w(() => import("./PkToolShowWebPages-DZIdrdWs.js").then((e) => e.n))
+}, le = /* @__PURE__ */ T({
+	__name: "PkStreamingMarkdownAutoscroll",
+	props: {
+		markdown: {},
+		innerClass: {}
+	},
+	setup(e) {
+		let t = e, n = N(), r = N(0), i = N(!1), a = () => {
+			if (!n.value) return;
+			let e = n.value.scrollTop;
+			e < r.value && r.value - e < 50 && (i.value = !0), e > r.value && e === n.value.scrollHeight - n.value.clientHeight && (i.value = !1), r.value = e;
+		};
+		return I(() => t.markdown, async () => {
+			await D(), n.value && !i.value && (n.value.scrollTop = n.value.scrollHeight);
+		}, { immediate: !0 }), (t, r) => (M(), b("div", {
+			ref_key: "scrollEl",
+			ref: n,
+			class: "overflow-auto light-scrollbar",
+			onScroll: a
+		}, [C(s, {
+			markdown: e.markdown,
+			class: O(e.innerClass)
+		}, null, 8, ["markdown", "class"])], 544));
+	}
+}), B = 30, V = 50, H = 500;
+function ue(e) {
+	let { scrollEl: t, status: n, messagesLength: r, lastMessageRole: i, onScrollUp: a, onScrollDown: o } = e, s = N(!1), c = !1, l = null, u = null, d = null, f = 0, p = (e = "smooth") => {
+		!t.value || s.value || (c = !0, t.value.scrollTo({
+			top: t.value.scrollHeight,
+			behavior: e
+		}), setTimeout(() => {
+			c = !1;
+		}, e === "instant" ? 0 : H));
+	}, m = () => {
+		if (!t.value) return;
+		let e = t.value.scrollTop;
+		if (c) {
+			f = e;
+			return;
+		}
+		if (e < f && (f - e < V && (s.value = !0), a?.()), e > f) {
+			let { scrollHeight: n, clientHeight: r } = t.value;
+			n - r - e < B && (s.value = !1), o?.();
+		}
+		f = e;
+	}, h = () => {
+		l || !t.value || (l = new MutationObserver(() => {
+			c || s.value || !t.value || (c = !0, t.value.scrollTop = t.value.scrollHeight, requestAnimationFrame(() => {
+				c = !1;
+			}));
+		}), l.observe(t.value, {
+			childList: !0,
+			subtree: !0,
+			characterData: !0
+		}));
+	}, g = () => {
+		l?.disconnect(), l = null;
+	};
+	I(n, (e, t) => {
+		if (e === "streaming" || e === "submitted") {
+			h();
+			return;
+		}
+		e === "ready" && t === "streaming" || g();
+	}), I(r, async () => {
+		r() && i() !== "assistant" && (s.value = !1, c = !0, await D(), p());
+	});
+	let _ = null, v = () => {
+		t.value && (t.value.scrollHeight <= t.value.clientHeight || (t.value.scrollTop = t.value.scrollHeight, _ && clearTimeout(_), _ = setTimeout(y, 300)));
+	}, y = () => {
+		u?.disconnect(), u = null, d?.disconnect(), d = null, _ &&= (clearTimeout(_), null);
+	};
+	return j(() => {
+		t.value && (u = new ResizeObserver(v), u.observe(t.value), d = new MutationObserver(v), d.observe(t.value, {
+			childList: !0,
+			subtree: !0
+		}), v());
+	}), A(() => {
+		g(), y();
+	}), {
+		handleScroll: m,
+		scrollToBottom: p,
+		userScrolledUp: s
+	};
+}
+//#endregion
+//#region ../../packages/components/src/chat/PkChatbotMessages.vue?vue&type=script&setup=true&lang.ts
+var de = { class: "pk-chatbot-messages__wrapper" }, fe = {
+	key: 0,
+	class: "pk-chatbot-divider"
+}, pe = { class: "pk-chatbot-divider__label" }, me = { class: "pk-chatbot-message__text" }, he = {
+	key: 0,
+	class: "pk-chatbot-message__loading-info"
+}, ge = { class: "flex gap-8 items-center" }, _e = { class: "font-mono rounded text-10" }, ve = { class: "flex gap-8 items-center" }, ye = {
+	key: 0,
+	class: "pk-chatbot-message__footer"
+}, be = {
+	key: 0,
+	class: "flex items-center gap-4 text-12 text-word-3"
+}, xe = ["datetime"], Se = {
+	key: 2,
+	class: "flex items-center gap-4 text-12 text-word-3"
+}, Ce = /* @__PURE__ */ T({
+	__name: "PkChatbotMessages",
+	props: {
+		status: {},
+		messages: {},
+		logo: {},
+		name: {},
+		error: {},
+		actions: {},
+		mainColor: {},
+		textColor: {},
+		revisedAnswers: {},
+		messageFeedbacks: {},
+		disableHeightAdjustment: { type: Boolean },
+		showMessageDateTime: { type: Boolean },
+		showMessageTokensCount: { type: Boolean },
+		showAllMessageParts: { type: Boolean },
+		feedbackMessageId: {},
+		feedbackLoading: { type: Boolean },
+		feedbackSubmitted: { type: Boolean },
+		feedbackError: {}
+	},
+	emits: [
+		"show-info",
+		"regenerate",
+		"revise",
+		"upvote",
+		"downvote",
+		"feedback",
+		"feedback-submit",
+		"feedback-close",
+		"scroll-up",
+		"scroll-down",
+		"auto-retry",
+		"reset-chat"
+	],
+	setup(w, { emit: T }) {
+		let A = w, j = T, { t: B } = ce({ useScope: "global" }), V = re(), H = ie("scrollEl"), Ce = _(() => f(A.textColor, A.mainColor)), { handleScroll: we, scrollToBottom: Te } = ue({
+			scrollEl: H,
+			status: () => A.status,
+			messagesLength: () => A.messages?.length,
+			lastMessageRole: () => A.messages?.[A.messages.length - 1]?.role,
+			onScrollUp: () => j("scroll-up"),
+			onScrollDown: () => j("scroll-down")
+		}), Ee = ie("messagesEl"), U = N(0);
+		I(() => A.messages, async (e) => {
+			if (!e?.length || A.disableHeightAdjustment) return;
+			await D();
+			let t = (H.value?.clientHeight ?? 0) - 48, n = e.map((e) => e.role).lastIndexOf("user"), r = t - (Ee.value?.[n]?.clientHeight ?? 0);
+			r && (U.value = r);
+		}, { deep: !0 });
+		let W = (e) => A.revisedAnswers?.some((t) => t.messageId === e), G = (e) => A.messageFeedbacks?.find((t) => t.messageId === e), De = _(() => A.messages?.[A.messages.length - 1]), K = _(() => {
+			let e = De.value;
+			return e ? e.parts[e.parts.length - 1] : null;
+		}), q = _(() => A.status === "submitted" || A.status === "streaming"), J = _(() => A.status === "error"), Y = _(() => {
+			let e = K.value;
+			return p(B, e);
+		}), X = _(() => {
+			let e = K.value;
+			return m(e);
+		}), Oe = (e) => A.messages?.findIndex((t) => t.id === e), Z = (e) => e === void 0 || !A.messages ? !1 : e === (A.messages?.length ?? 0) - 1, ke = (e) => Z(e) && A.status === "ready" && A.actions?.includes("regenerate"), Q = (e, t) => (Z(t) && A.status === "ready" || !Z(t)) && A.actions?.includes(e), Ae = (e) => {
+			let t = e.parts[e.parts.length - 1];
+			return n(t);
+		}, $ = (e) => e.role === "assistant", je = (e) => e.role === "user", Me = (e) => A.messages?.slice(0, e).reverse().find((e) => $(e)), Ne = (e) => A.messages?.slice(e + 1).find((e) => $(e)), Pe = (e) => {
+			let t = Me(e), n = Ne(e);
+			if (!t?.metadata?.createdAt || !n?.metadata?.createdAt) return !1;
+			let r = new Date(t.metadata.createdAt), i = new Date(n.metadata.createdAt);
+			return r.getFullYear() !== i.getFullYear() || r.getMonth() !== i.getMonth() || r.getDate() !== i.getDate();
+		}, Fe = (e, t) => t === 0 || e.role !== "assistant" ? !1 : A.actions?.length || A.showMessageDateTime && e.metadata?.createdAt !== void 0 || A.showMessageTokensCount && e.metadata?.totalTokens !== void 0, Ie = N();
+		return I(() => A.feedbackMessageId, async () => {
+			if (await D(), !A.feedbackMessageId) return;
+			let e = Ie.value?.[0]?.$el;
+			if (e) {
+				if (Z(Oe(A.feedbackMessageId))) {
+					Te();
+					return;
+				}
+				e.scrollIntoView({
+					behavior: "smooth",
+					block: "center"
+				});
+			}
+		}), (f, p) => {
+			let _ = se, T = ae, D = oe;
+			return M(), b("div", {
+				ref_key: "scrollEl",
+				ref: H,
+				class: "pk-chatbot-messages",
+				style: k({
+					"--chatbot-main-color": w.mainColor,
+					"--chatbot-contrast-color": Ce.value
+				}),
+				onScroll: p[5] ||= (...e) => F(we) && F(we)(...e)
+			}, [x("div", de, [
+				(M(!0), b(h, null, ee(w.messages, (e, A) => (M(), b(h, { key: e.id }, [A > 0 && je(e) && Pe(A) ? (M(), b("div", fe, [x("span", pe, P(f.$d(new Date(Ne(A)?.metadata?.createdAt ?? ""), "short")), 1)])) : y("", !0), e.parts.length || Z(A) && q.value && $(e) ? (M(), b("div", {
+					key: 1,
+					ref_for: !0,
+					ref: "messagesEl",
+					class: O(["pk-chatbot-message", [`pk-chatbot-message--${e.role}`, { "pk-chatbot-message--loading": q.value && Z(A) && $(e) }]]),
+					style: k({ minHeight: Z(A) && $(e) && !J.value ? `${U.value}px` : void 0 })
+				}, [
+					(M(!0), b(h, null, ee(e.parts, (o, c) => (M(), b(h, { key: c }, [F(n)(o) && o.text.trim() ? (M(), v(g, {
+						key: 0,
+						appear: "",
+						name: "pk-chatbot-part"
+					}, {
+						default: L(() => [x("div", me, [te(f.$slots, "text", E({ ref_for: !0 }, {
+							message: e,
+							part: o,
+							index: A,
+							isLoading: q.value
+						}), () => [$(e) ? (M(), v(s, {
+							key: 0,
+							class: "wysiwyg",
+							markdown: o.text,
+							loading: A === (w.messages?.length ?? 0) - 1 && w.status === "streaming"
+						}, null, 8, ["markdown", "loading"])) : (M(), b(h, { key: 1 }, [S(P(o.text), 1)], 64))])])]),
+						_: 2
+					}, 1024)) : F(a)(o) ? (M(), v(g, {
+						key: 1,
+						appear: "",
+						name: "pk-chatbot-part"
+					}, {
+						default: L(() => [C(l, {
+							"media-type": o.mediaType,
+							url: o.url,
+							filename: o.filename
+						}, null, 8, [
+							"media-type",
+							"url",
+							"filename"
+						])]),
+						_: 2
+					}, 1024)) : F(i)(o) && !F(u)(o) && (F(z)[F(t)(o)] || F(V)[o.type] || w.showAllMessageParts) ? (M(), v(g, {
+						key: 2,
+						appear: "",
+						name: "pk-chatbot-part"
+					}, {
+						default: L(() => [!F(V)[o.type] && F(z)[F(t)(o)] ? (M(), v(ne(F(z)[F(t)(o)]), {
+							key: `component-${c}-${F(d)(o)}`,
+							part: o
+						}, null, 8, ["part"])) : te(f.$slots, o.type, E({
+							key: 1,
+							ref_for: !0
+						}, {
+							message: e,
+							part: o,
+							index: A,
+							isLoading: q.value
+						}), () => [w.showAllMessageParts ? (M(), b("div", he, [x("div", ge, [F(m)(o) ? (M(), v(_, {
+							key: 0,
+							name: F(m)(o),
+							class: "shrink-0"
+						}, null, 8, ["name"])) : y("", !0), x("code", _e, P(F(r)(o.type)), 1)])])) : y("", !0)])]),
+						_: 2
+					}, 1024)) : y("", !0)], 64))), 128)),
+					C(g, {
+						name: "pk-chatbot-fade",
+						mode: "out-in"
+					}, {
+						default: L(() => [q.value && Z(A) && !Ae(e) && $(e) ? (M(), b("div", {
+							key: `loading-info-${e.id}`,
+							class: "pk-chatbot-message__loading-info"
+						}, [x("div", ve, [
+							C(_, {
+								name: "line-md:loading-loop",
+								class: "shrink-0"
+							}),
+							C(g, { mode: "out-in" }, {
+								default: L(() => [X.value ? (M(), v(_, {
+									key: X.value,
+									class: "shrink-0",
+									name: X.value
+								}, null, 8, ["name"])) : y("", !0)]),
+								_: 1
+							}),
+							C(g, { mode: "out-in" }, {
+								default: L(() => [Y.value ? (M(), b("span", {
+									key: Y.value,
+									class: "text-10"
+								}, P(Y.value), 1)) : y("", !0)]),
+								_: 1
+							})
+						]), C(g, { mode: "out-in" }, {
+							default: L(() => [K.value && "text" in K.value && K.value.text.trim() ? (M(), v(le, {
+								key: 0,
+								markdown: K.value.text,
+								"inner-class": "wysiwyg",
+								class: "border border-surface-4 rounded p-4 mt-8 bg-surface-1 max-h-64 text-10 w-full"
+							}, null, 8, ["markdown"])) : y("", !0)]),
+							_: 1
+						})])) : y("", !0)]),
+						_: 2
+					}, 1024),
+					C(g, { mode: "out-in" }, {
+						default: L(() => [Fe(e, A) ? (M(), b("div", ye, [
+							C(D, {
+								modifiers: "compact",
+								class: "mr-auto"
+							}, {
+								default: L(() => [
+									C(g, { mode: "out-in" }, {
+										default: L(() => [ke(A) ? (M(), v(T, {
+											key: 0,
+											icon: "ri:reset-right-line",
+											modifiers: "action-quiet-small",
+											title: F(B)("action.regenerate"),
+											onClick: p[0] ||= R((e) => f.$emit("regenerate"), ["stop"])
+										}, null, 8, ["title"])) : y("", !0)]),
+										_: 2
+									}, 1024),
+									C(g, { mode: "out-in" }, {
+										default: L(() => [Q("show-info", A) ? (M(), v(T, {
+											key: 0,
+											icon: "ri:information-line",
+											title: F(B)("action.getMoreInfo"),
+											modifiers: "action-quiet-small",
+											onClick: R((t) => f.$emit("show-info", e), ["stop"])
+										}, null, 8, ["title", "onClick"])) : y("", !0)]),
+										_: 2
+									}, 1024),
+									C(g, { mode: "out-in" }, {
+										default: L(() => [Q("revise", A) ? (M(), v(T, {
+											key: 0,
+											icon: W(e.id) ? "ri:file-edit-fill" : "ri:file-edit-line",
+											title: W(e.id) ? F(B)("action.editRevise") : F(B)("action.createRevise"),
+											modifiers: "action-quiet-small",
+											class: O({ "text-brand": W(e.id) }),
+											onClick: R((t) => f.$emit("revise", e), ["stop"])
+										}, null, 8, [
+											"icon",
+											"title",
+											"class",
+											"onClick"
+										])) : y("", !0)]),
+										_: 2
+									}, 1024),
+									C(g, { mode: "out-in" }, {
+										default: L(() => [Q("upvote", A) ? (M(), v(T, {
+											key: 0,
+											icon: G(e.id)?.vote === "upvote" ? "ri:thumb-up-fill" : "ri:thumb-up-line",
+											title: F(B)("action.upvote"),
+											modifiers: "action-quiet-small",
+											onClick: R((t) => f.$emit("upvote", e), ["stop"])
+										}, null, 8, [
+											"icon",
+											"title",
+											"onClick"
+										])) : y("", !0)]),
+										_: 2
+									}, 1024),
+									C(g, { mode: "out-in" }, {
+										default: L(() => [Q("downvote", A) ? (M(), v(T, {
+											key: 0,
+											icon: G(e.id)?.vote === "downvote" ? "ri:thumb-down-fill" : "ri:thumb-down-line",
+											title: F(B)("action.downvote"),
+											modifiers: "action-quiet-small",
+											onClick: R((t) => f.$emit("downvote", e), ["stop"])
+										}, null, 8, [
+											"icon",
+											"title",
+											"onClick"
+										])) : y("", !0)]),
+										_: 2
+									}, 1024),
+									C(g, { mode: "out-in" }, {
+										default: L(() => [Q("feedback", A) ? (M(), v(T, {
+											key: 0,
+											icon: G(e.id)?.comment ? "ri:feedback-fill" : "ri:feedback-line",
+											title: F(B)("action.feedback"),
+											modifiers: "action-quiet-small",
+											onClick: R((t) => f.$emit("feedback", e), ["stop"])
+										}, null, 8, [
+											"icon",
+											"title",
+											"onClick"
+										])) : y("", !0)]),
+										_: 2
+									}, 1024)
+								]),
+								_: 2
+							}, 1024),
+							w.showMessageTokensCount && e.metadata?.totalTokens ? (M(), b("span", be, [C(_, { name: "ri:ai-generate-2-line" }), S(" " + P(f.$n(e.metadata.totalTokens, "integer")) + " " + P(F(B)("label.tokens")), 1)])) : y("", !0),
+							w.showMessageDateTime && e.metadata?.createdAt ? (M(), b("time", {
+								key: 1,
+								datetime: new Date(e.metadata?.createdAt).toISOString(),
+								class: "flex items-center gap-4 text-12 text-word-3"
+							}, [C(_, { name: "ri:time-line" }), S(" " + P(f.$d(new Date(e.metadata?.createdAt), "date-time")), 1)], 8, xe)) : y("", !0),
+							w.showMessageDateTime && e?.metadata?.completedAt && e?.metadata?.createdAt ? (M(), b("div", Se, [C(_, { name: "ri:hourglass-line" }), C(o, {
+								date: e.metadata?.createdAt,
+								"end-date": e.metadata?.completedAt
+							}, null, 8, ["date", "end-date"])])) : y("", !0)
+						])) : y("", !0)]),
+						_: 2
+					}, 1024),
+					C(g, { mode: "out-in" }, {
+						default: L(() => [e.id === w.feedbackMessageId ? (M(), v(c, {
+							key: 0,
+							ref_for: !0,
+							ref_key: "feedbackMessageEl",
+							ref: Ie,
+							loading: w.feedbackLoading,
+							submitted: w.feedbackSubmitted,
+							error: w.feedbackError,
+							onSubmit: p[1] ||= (e) => f.$emit("feedback-submit", e),
+							onClose: p[2] ||= (e) => f.$emit("feedback-close")
+						}, null, 8, [
+							"loading",
+							"submitted",
+							"error"
+						])) : y("", !0)]),
+						_: 2
+					}, 1024)
+				], 6)) : y("", !0)], 64))), 128)),
+				C(g, {
+					appear: "",
+					name: "pk-chatbot-part"
+				}, {
+					default: L(() => [J.value ? (M(), v(e, {
+						key: 0,
+						error: w.error,
+						onRetry: p[3] ||= (e) => f.$emit("auto-retry"),
+						onReset: p[4] ||= (e) => f.$emit("reset-chat")
+					}, null, 8, ["error"])) : y("", !0)]),
+					_: 1
+				}),
+				De.value?.role === "user" || J.value ? (M(), b("div", {
+					key: 0,
+					style: k({ minHeight: `${U.value}px` })
+				}, null, 4)) : y("", !0)
+			])], 36);
+		};
+	}
+});
+//#endregion
+export { le as n, Ce as t };
+
+//# sourceMappingURL=PkChatbotMessages-j3ALQmGG.js.map