@8wave/ai-elements 0.82.0 → 0.83.0

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

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