@8wave/ai-elements 0.115.0-beta.2 → 0.115.0-beta.23

package/dist-vue/_chunks/{PkChatbotMessages-R1EsTJpM.js → PkChatbotMessages-ClPdP7sw.js}

@@ -20,7 +20,7 @@ var U = (e) => e.normalize("NFD").replace(/[\u0300-\u036f]/g, ""), ye = (e) => e
 	showCalendarEvent: j(() => import("./PkToolShowCalendarEvent-BsBdsbV0.js").then((e) => e.n)),
 	showComparison: j(() => import("./PkToolShowComparison-DQs3E6-k.js").then((e) => e.n)),
 	showContactForm: j(() => import("./PkToolShowContactForm-1TFKvG_s.js").then((e) => e.n)),
-	showDiagram: j(() => import("./PkToolShowDiagram-Dmtqu3th.js")),
+	showDiagram: j(() => import("./PkToolShowDiagram-Co3GRItt.js")),
 	showEmail: j(() => import("./PkToolShowEmail-BDsBoETQ.js").then((e) => e.n)),
 	showImageGallery: j(() => import("./PkToolShowImageGallery-DudQzBx4.js").then((e) => e.n)),
 	showLocation: j(() => import("./PkToolShowLocation-Bv6sLN5P.js").then((e) => e.n)),
@@ -29,7 +29,7 @@ var U = (e) => e.normalize("NFD").replace(/[\u0300-\u036f]/g, ""), ye = (e) => e
 	showMultipleChoice: j(() => import("./PkToolShowForm-DwFKxMJd.js").then((e) => e.n)),
 	showProductList: j(() => import("./PkToolShowProductList-CsupMsuy.js").then((e) => e.n)),
 	showQrCode: j(() => import("./PkToolShowQrCode-DEAvfLFu.js").then((e) => e.n)),
-	showSources: j(() => import("./PkToolShowSources-TzkNgwnr.js").then((e) => e.n)),
+	showSources: j(() => import("./PkToolShowSources-CIccPA8Z.js").then((e) => e.n)),
 	showSuggestedReply: j(() => import("./PkToolShowSuggestedReply-qAWdCUhr.js").then((e) => e.n)),
 	showVideo: j(() => import("./PkToolShowVideo-BZOTu2Qe.js")),
 	showWeather: j(() => import("./PkToolShowWeather-Bzqalzh8.js")),
@@ -219,13 +219,13 @@ var ke = ["aria-busy"], Ae = {
 }, He = ["datetime", "title"], Ue = { class: "truncate" }, We = {
 	key: 0,
 	class: "flex items-center gap-4 min-w-0"
-}, Ge = { class: "truncate" }, Ke = {
-	key: 1,
+}, Ge = { class: "truncate" }, Ke = ["title"], qe = {
+	key: 2,
 	class: "flex items-center gap-4 text-12 text-word-3"
-}, qe = { class: "truncate" }, Je = ["datetime"], Ye = { class: "truncate" }, Xe = {
-	key: 3,
+}, Je = { class: "truncate" }, Ye = ["datetime"], Xe = { class: "truncate" }, Ze = {
+	key: 4,
 	class: "flex items-center gap-4 text-12 text-word-3"
-}, Ze = { class: "pk-chatbot-message__loading-info" }, Qe = { class: "flex gap-8 items-center" }, $e = { class: "text-12" }, et = ["title", "aria-label"], tt = /* @__PURE__ */ M({
+}, Qe = { class: "pk-chatbot-message__loading-info" }, $e = { class: "flex gap-8 items-center" }, et = { class: "text-12" }, tt = ["title", "aria-label"], nt = /* @__PURE__ */ M({
 	__name: "PkChatbotMessages",
 	props: {
 		status: {},
@@ -240,6 +240,7 @@ var ke = ["aria-busy"], Ae = {
 		disableHeightAdjustment: { type: Boolean },
 		showMessageDateTime: { type: Boolean },
 		showMessageTokensCount: { type: Boolean },
+		showMessageNumber: { type: Boolean },
 		showAllMessageParts: { type: Boolean },
 		interactive: { type: Boolean },
 		showExtendedSteps: { type: Boolean },
@@ -283,99 +284,102 @@ var ke = ["aria-busy"], Ae = {
 				id: n,
 				approved: t
 			});
-		}, W = _e("scrollEl"), G = _e("wrapperEl"), we = T(() => u(j.textColor, j.mainColor)), { handleScroll: Te, scrollToBottom: De, userScrolledUp: K, isAtBottom: tt } = Oe({
+		}, W = _e("scrollEl"), G = _e("wrapperEl"), we = T(() => u(j.textColor, j.mainColor)), { handleScroll: Te, scrollToBottom: De, userScrolledUp: K, isAtBottom: nt } = Oe({
 			scrollEl: W,
 			status: () => j.status,
 			messagesLength: () => j.messages?.length,
 			lastMessageRole: () => j.messages?.[j.messages.length - 1]?.role,
 			contentEl: () => G.value,
-			beforeNewMessageScroll: () => lt(),
+			beforeNewMessageScroll: () => ut(),
 			onScrollUp: () => M("scroll-up"),
 			onScrollDown: () => M("scroll-down")
-		}), nt = () => {
+		}), rt = () => {
 			K.value = !1, De();
 		}, q = T(() => (j.messages ?? []).filter((e) => e.role === "user").map((e) => ({
 			id: e.id,
 			preview: e.parts.find(o)?.text.trim().slice(0, 120) || "…"
-		}))), rt = L(), it = () => W.value?.querySelectorAll(".pk-chatbot-message--user") ?? [], at = () => {
+		}))), it = L(), at = () => W.value?.querySelectorAll(".pk-chatbot-message--user") ?? [], ot = () => {
 			let e = W.value;
 			if (!e || !j.showScrollToBottom) return;
 			let t = e.getBoundingClientRect().top + e.clientHeight / 2, n = q.value[0]?.id;
-			it().forEach((e, r) => {
+			at().forEach((e, r) => {
 				e.getBoundingClientRect().top <= t && (n = q.value[r]?.id);
-			}), rt.value = n;
+			}), it.value = n;
 		};
 		B(q, async () => {
-			await N(), at();
+			await N(), ot();
 		});
-		let ot = () => {
-			Te(), at();
-		}, st = (e) => {
-			let t = W.value, n = q.value.findIndex((t) => t.id === e), r = it()[n];
+		let st = () => {
+			Te(), ot();
+		}, ct = (e) => {
+			let t = W.value, n = q.value.findIndex((t) => t.id === e), r = at()[n];
 			t && r && (K.value = !0, t.scrollTo({
 				top: t.scrollTop + r.getBoundingClientRect().top - t.getBoundingClientRect().top - Number.parseFloat(getComputedStyle(t).paddingTop),
 				behavior: "smooth"
 			}));
-		}, J = L(0), ct = L(!1), lt = async () => {
+		}, J = L(0), lt = L(!1), ut = async () => {
 			let e = j.messages;
-			if (!e?.length || j.disableHeightAdjustment || e[e.length - 1].role !== "user" && j.status !== "submitted" && j.status !== "streaming" || (ct.value = !1, await N(), !W.value)) return;
-			let { paddingTop: t, paddingBottom: n } = getComputedStyle(W.value), r = W.value.clientHeight - Number.parseFloat(t) - Number.parseFloat(n), i = G.value && Number.parseFloat(getComputedStyle(G.value).rowGap) || 0, a = it(), o = r - (a[a.length - 1]?.clientHeight ?? 0) - i;
+			if (!e?.length || j.disableHeightAdjustment || e[e.length - 1].role !== "user" && j.status !== "submitted" && j.status !== "streaming" || (lt.value = !1, await N(), !W.value)) return;
+			let { paddingTop: t, paddingBottom: n } = getComputedStyle(W.value), r = W.value.clientHeight - Number.parseFloat(t) - Number.parseFloat(n), i = G.value && Number.parseFloat(getComputedStyle(G.value).rowGap) || 0, a = at(), o = r - (a[a.length - 1]?.clientHeight ?? 0) - i;
 			r > 0 && (J.value = Math.max(o, 0)), await N();
 		};
-		B(() => [j.messages?.length, j.messages?.[j.messages.length - 1]?.id], () => lt()), fe(() => {
-			(j.status === "submitted" || j.status === "streaming" || j.awaitingSpokenAnswer) && lt();
+		B(() => [j.messages?.length, j.messages?.[j.messages.length - 1]?.id], () => ut()), fe(() => {
+			(j.status === "submitted" || j.status === "streaming" || j.awaitingSpokenAnswer) && ut();
 		}), B(() => j.status, (e) => {
-			(e === "ready" || e === "error") && (ct.value = !0, J.value = 0);
+			(e === "ready" || e === "error") && (lt.value = !0, J.value = 0);
 		});
-		let ut = (e) => j.revisedAnswers?.some((t) => t.messageId === e), Y = (e) => j.messageFeedbacks?.find((t) => t.messageId === e), dt = (e, t) => !j.readonlyFeedback && kt(e, t), ft = (e) => j.readonlyFeedback ? Y(e) : void 0, pt = (e) => ft(e)?.vote, mt = (e) => {
-			let t = ft(e);
+		let dt = (e) => j.revisedAnswers?.some((t) => t.messageId === e), Y = (e) => j.messageFeedbacks?.find((t) => t.messageId === e), ft = (e, t) => !j.readonlyFeedback && At(e, t), pt = (e) => j.readonlyFeedback ? Y(e) : void 0, mt = (e) => pt(e)?.vote, ht = (e) => {
+			let t = pt(e);
 			if (t?.vote) return;
 			let n = t?.metadata?.reactionEmoji;
 			return typeof n == "string" && /\p{Extended_Pictographic}/u.test(n) ? n : void 0;
-		}, ht = (e) => !!(pt(e) || mt(e)), gt = (e) => {
-			if (mt(e)) return "pk-chatbot-message__reaction--neutral";
-			let t = pt(e);
+		}, gt = (e) => !!(mt(e) || ht(e)), _t = (e) => {
+			if (ht(e)) return "pk-chatbot-message__reaction--neutral";
+			let t = mt(e);
 			return t === "upvote" ? "pk-chatbot-message__reaction--positive" : t === "downvote" ? "pk-chatbot-message__reaction--negative" : "pk-chatbot-message__reaction--neutral";
-		}, _t = (e) => {
-			let t = pt(e);
-			return F(t === "upvote" ? "hint.userFeedbackPositive" : t === "downvote" ? "hint.userFeedbackNegative" : "hint.userFeedbackReaction");
 		}, vt = (e) => {
-			let t = xt(e);
+			let t = mt(e);
+			return F(t === "upvote" ? "hint.userFeedbackPositive" : t === "downvote" ? "hint.userFeedbackNegative" : "hint.userFeedbackReaction");
+		}, yt = (e) => {
+			let t = St(e);
 			for (let e = t.length - 1; e >= 0; --e) if (o(t[e])) return e;
 			return -1;
-		}, yt = T(() => j.messages?.[j.messages.length - 1]), X = T(() => {
-			let e = yt.value;
+		}, bt = T(() => j.messages?.[j.messages.length - 1]), X = T(() => {
+			let e = bt.value;
 			return e ? e.parts[e.parts.length - 1] : null;
-		}), bt = T(() => {
+		}), xt = T(() => {
 			let e = /* @__PURE__ */ new Map();
 			for (let t of j.messages ?? []) t.role === "assistant" && e.set(t.id, g(ne(t.parts)));
 			return e;
-		}), xt = (e) => bt.value.get(e.id) ?? e.parts, Z = T(() => j.status === "submitted" || j.status === "streaming"), St = T(() => j.status === "error"), Ct = T(() => j.awaitingSpokenAnswer === !0 && !Z.value), wt = T(() => Ct.value && yt.value?.role === "user" && !St.value), Tt = T(() => {
+		}), St = (e) => xt.value.get(e.id) ?? e.parts, Z = T(() => j.status === "submitted" || j.status === "streaming"), Ct = T(() => j.status === "error"), wt = T(() => j.awaitingSpokenAnswer === !0 && !Z.value), Tt = T(() => wt.value && bt.value?.role === "user" && !Ct.value), Et = T(() => {
 			let e = X.value;
 			return te(F, e);
-		}), Et = T(() => {
+		}), Dt = T(() => {
 			let e = X.value;
 			return v(e);
-		}), Dt = (e) => j.messages?.findIndex((t) => t.id === e), Q = (e) => e === void 0 || !j.messages ? !1 : e === j.messages.length - 1, Ot = (e) => Q(e) && j.status === "ready" && !!j.actions?.includes("regenerate"), kt = (e, t) => (!Q(t) || j.status === "ready") && !!j.actions?.includes(e), At = (e) => {
+		}), Ot = (e) => j.messages?.findIndex((t) => t.id === e), Q = (e) => e === void 0 || !j.messages ? !1 : e === j.messages.length - 1, kt = (e) => Q(e) && j.status === "ready" && !!j.actions?.includes("regenerate"), At = (e, t) => (!Q(t) || j.status === "ready") && !!j.actions?.includes(e), jt = (e) => {
 			let t = e.parts[e.parts.length - 1];
 			return o(t);
-		}, jt = (e) => e.parts.some((e) => i(e) || r(e)), Mt = (e) => !!j.showExtendedSteps && $(e) && jt(e), Nt = (e) => r(e) && !y(e) && !!(Ce[a(e)] || xe[e.type] || j.showAllMessageParts), Pt = (e) => e.parts.some((e) => o(e) && !!e.text.trim() || n(e) || d(e) && !y(e) || Nt(e)), $ = (e) => e.role === "assistant", Ft = (e) => e.role === "user", It = (e) => j.messages?.slice(0, e).reverse().find((e) => $(e)), Lt = (e) => j.messages?.slice(e + 1).find((e) => $(e)), Rt = (e) => {
-			let t = It(e)?.metadata?.createdAt, n = Lt(e)?.metadata?.createdAt;
+		}, Mt = (e) => e.parts.some((e) => i(e) || r(e)), Nt = (e) => !!j.showExtendedSteps && $(e) && Mt(e), Pt = (e) => r(e) && !y(e) && !!(Ce[a(e)] || xe[e.type] || j.showAllMessageParts), Ft = (e) => e.parts.some((e) => o(e) && !!e.text.trim() || n(e) || d(e) && !y(e) || Pt(e)), $ = (e) => e.role === "assistant", It = (e) => e.role === "user", Lt = (e) => j.messages?.slice(0, e).reverse().find((e) => $(e)), Rt = (e) => j.messages?.slice(e + 1).find((e) => $(e)), zt = (e) => {
+			let t = Lt(e)?.metadata?.createdAt, n = Rt(e)?.metadata?.createdAt;
 			if (!t || !n) return;
 			let r = new Date(t), i = new Date(n);
 			return r.toDateString() === i.toDateString() ? void 0 : i;
-		}, zt = (e, t) => t === 0 || e.role !== "assistant" ? !1 : !!(j.actions?.length || j.showMessageDateTime && e.metadata?.createdAt !== void 0 || e.metadata?.completedAt !== void 0 || j.showMessageTokensCount && e.metadata?.totalTokens !== void 0), Bt = (e) => {
+		}, Bt = T(() => {
+			let e = 0;
+			return (j.messages ?? []).map((t) => t.parts.length > 0 ? ++e : void 0);
+		}), Vt = (e, t) => t === 0 || e.role !== "assistant" ? !1 : !!(j.actions?.length || j.showMessageNumber || j.showMessageDateTime && e.metadata?.createdAt !== void 0 || e.metadata?.completedAt !== void 0 || j.showMessageTokensCount && e.metadata?.totalTokens !== void 0), Ht = (e) => {
 			let t = new Date(e), n = t.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
 			return U(t, n ? "time" : "date-time");
-		}, Vt = (e) => {
+		}, Ut = (e) => {
 			let { createdAt: t, completedAt: n } = e.metadata ?? {};
 			if (t && n) return p(ye, n - t);
-		}, Ht = _e("feedbackMessageEl");
+		}, Wt = _e("feedbackMessageEl");
 		return B(() => j.feedbackMessageId, async () => {
 			if (await N(), !j.feedbackMessageId) return;
-			let e = Ht.value?.[0]?.$el;
+			let e = Wt.value?.[0]?.$el;
 			if (e) {
-				if (Q(Dt(j.feedbackMessageId))) {
+				if (Q(Ot(j.feedbackMessageId))) {
 					De();
 					return;
 				}
@@ -389,7 +393,7 @@ var ke = ["aria-busy"], Ae = {
 			return I(), O("div", {
 				ref_key: "scrollEl",
 				ref: W,
-				class: P(["pk-chatbot-messages", { "pk-chatbot-messages--settling": ct.value }]),
+				class: P(["pk-chatbot-messages", { "pk-chatbot-messages--settling": lt.value }]),
 				role: "log",
 				"aria-live": "polite",
 				"aria-relevant": "additions text",
@@ -398,32 +402,32 @@ var ke = ["aria-busy"], Ae = {
 					"--chatbot-main-color": e.mainColor,
 					"--chatbot-contrast-color": we.value
 				}),
-				onScroll: ot
+				onScroll: st
 			}, [
 				e.showScrollToBottom && q.value.length > 1 ? (I(), O("div", Ae, [A(S, {
 					items: q.value,
-					"active-id": rt.value,
-					onSelect: st
+					"active-id": it.value,
+					onSelect: ct
 				}, null, 8, ["items", "active-id"])])) : D("", !0),
 				k("div", {
 					ref_key: "wrapperEl",
 					ref: G,
 					class: "pk-chatbot-messages__wrapper"
 				}, [
-					(I(!0), O(C, null, pe(e.messages, (c, g) => (I(), O(C, { key: c.id }, [Ft(c) && Rt(g) ? (I(), O("div", je, [k("span", Me, R(z(U)(Rt(g), "short")), 1)])) : D("", !0), c.parts.length || Q(g) && Z.value && $(c) ? (I(), O("div", {
+					(I(!0), O(C, null, pe(e.messages, (c, g) => (I(), O(C, { key: c.id }, [It(c) && zt(g) ? (I(), O("div", je, [k("span", Me, R(z(U)(zt(g), "short")), 1)])) : D("", !0), c.parts.length || Q(g) && Z.value && $(c) ? (I(), O("div", {
 						key: 1,
 						class: P(["pk-chatbot-message", [`pk-chatbot-message--${c.role}`, { "pk-chatbot-message--loading": Z.value && Q(g) && $(c) }]]),
-						style: de({ minHeight: Q(g) && $(c) && !St.value ? `${J.value}px` : void 0 })
+						style: de({ minHeight: Q(g) && $(c) && !Ct.value ? `${J.value}px` : void 0 })
 					}, [
 						A(w, {
 							appear: "",
 							name: "pk-chatbot-part"
 						}, {
-							default: V(() => [Mt(c) ? (I(), E(x, {
+							default: V(() => [Nt(c) ? (I(), E(x, {
 								key: 0,
 								message: c,
 								"is-streaming": Z.value && Q(g),
-								"has-content": Pt(c),
+								"has-content": Ft(c),
 								"is-dark": e.isDark
 							}, null, 8, [
 								"message",
@@ -433,7 +437,7 @@ var ke = ["aria-busy"], Ae = {
 							])) : D("", !0)]),
 							_: 2
 						}, 1024),
-						(I(!0), O(C, null, pe(xt(c), (i, l) => (I(), O(C, { key: l }, [z(o)(i) && i.text.trim() ? (I(), E(w, {
+						(I(!0), O(C, null, pe(St(c), (i, l) => (I(), O(C, { key: l }, [z(o)(i) && i.text.trim() ? (I(), E(w, {
 							key: 0,
 							appear: "",
 							name: "pk-chatbot-part"
@@ -453,13 +457,13 @@ var ke = ["aria-busy"], Ae = {
 								"markdown",
 								"is-dark",
 								"loading"
-							])) : (I(), O(C, { key: 1 }, [le(R(i.text), 1)], 64))]), ht(c.id) && !Y(c.id)?.comment && l === vt(c) ? (I(), O("span", {
+							])) : (I(), O(C, { key: 1 }, [le(R(i.text), 1)], 64))]), gt(c.id) && !Y(c.id)?.comment && l === yt(c) ? (I(), O("span", {
 								key: 0,
-								class: P(["pk-chatbot-message__reaction", gt(c.id)]),
-								title: _t(c.id)
-							}, [mt(c.id) ? (I(), O("span", Fe, R(mt(c.id)), 1)) : (I(), E(u, {
+								class: P(["pk-chatbot-message__reaction", _t(c.id)]),
+								title: vt(c.id)
+							}, [ht(c.id) ? (I(), O("span", Fe, R(ht(c.id)), 1)) : (I(), E(u, {
 								key: 1,
-								name: pt(c.id) === "downvote" ? "ri:thumb-down-fill" : "ri:thumb-up-fill"
+								name: mt(c.id) === "downvote" ? "ri:thumb-down-fill" : "ri:thumb-up-fill"
 							}, null, 8, ["name"]))], 10, Pe)) : D("", !0)])]),
 							_: 2
 						}, 1024)) : z(n)(i) ? (I(), E(w, {
@@ -497,7 +501,7 @@ var ke = ["aria-busy"], Ae = {
 								"onRespond"
 							]))]),
 							_: 2
-						}, 1024)) : Nt(i) ? (I(), E(w, {
+						}, 1024)) : Pt(i) ? (I(), E(w, {
 							key: 3,
 							appear: "",
 							name: "pk-chatbot-part"
@@ -517,7 +521,7 @@ var ke = ["aria-busy"], Ae = {
 							}, null, 8, ["name"])) : D("", !0), k("code", Re, R(z(be)(i.type)), 1)])])) : D("", !0)], void 0, 1)]),
 							_: 2
 						}, 1024)) : D("", !0), A(w, { mode: "out-in" }, {
-							default: V(() => [l === vt(c) && e.readonlyFeedback && Y(c.id)?.comment ? (I(), E(ae, {
+							default: V(() => [l === yt(c) && e.readonlyFeedback && Y(c.id)?.comment ? (I(), E(ae, {
 								key: 0,
 								feedback: Y(c.id)
 							}, null, 8, ["feedback"])) : D("", !0)]),
@@ -527,7 +531,7 @@ var ke = ["aria-busy"], Ae = {
 							name: "fade-in",
 							mode: "out-in"
 						}, {
-							default: V(() => [Z.value && Q(g) && !At(c) && $(c) && (!Mt(c) || Pt(c)) ? (I(), O("div", {
+							default: V(() => [Z.value && Q(g) && !jt(c) && $(c) && (!Nt(c) || Ft(c)) ? (I(), O("div", {
 								key: `loading-info-${c.id}`,
 								class: "pk-chatbot-message__loading-info"
 							}, [k("div", ze, [
@@ -536,25 +540,25 @@ var ke = ["aria-busy"], Ae = {
 									class: "shrink-0"
 								}),
 								A(w, { mode: "out-in" }, {
-									default: V(() => [Et.value ? (I(), E(u, {
-										key: Et.value,
+									default: V(() => [Dt.value ? (I(), E(u, {
+										key: Dt.value,
 										class: "shrink-0",
-										name: Et.value
+										name: Dt.value
 									}, null, 8, ["name"])) : D("", !0)]),
 									_: 1
 								}),
 								A(w, { mode: "out-in" }, {
-									default: V(() => [Tt.value ? (I(), O("span", {
-										key: Tt.value,
+									default: V(() => [Et.value ? (I(), O("span", {
+										key: Et.value,
 										class: "text-12"
-									}, R(Tt.value), 1)) : D("", !0)]),
+									}, R(Et.value), 1)) : D("", !0)]),
 									_: 1
 								})
 							]), A(w, {
 								name: "fade-in",
 								mode: "out-in"
 							}, {
-								default: V(() => [!Mt(c) && X.value && "text" in X.value && X.value.text.trim() ? (I(), E(b, {
+								default: V(() => [!Nt(c) && X.value && "text" in X.value && X.value.text.trim() ? (I(), E(b, {
 									key: 0,
 									markdown: X.value.text,
 									"is-dark": e.isDark,
@@ -571,14 +575,14 @@ var ke = ["aria-busy"], Ae = {
 							_: 2
 						}, 1024),
 						A(w, { mode: "out-in" }, {
-							default: V(() => [zt(c, g) ? (I(), O("div", Be, [
+							default: V(() => [Vt(c, g) ? (I(), O("div", Be, [
 								A(h, {
 									modifiers: "compact",
 									class: "mr-auto shrink-0"
 								}, {
 									default: V(() => [
 										A(w, { mode: "out-in" }, {
-											default: V(() => [Ot(g) ? (I(), E(p, {
+											default: V(() => [kt(g) ? (I(), E(p, {
 												key: 0,
 												icon: "ri:reset-right-line",
 												modifiers: "action-quiet-small",
@@ -589,7 +593,7 @@ var ke = ["aria-busy"], Ae = {
 											_: 2
 										}, 1024),
 										A(w, { mode: "out-in" }, {
-											default: V(() => [kt("show-info", g) ? (I(), E(p, {
+											default: V(() => [At("show-info", g) ? (I(), E(p, {
 												key: 0,
 												icon: "ri:information-line",
 												title: z(F)("action.getMoreInfo"),
@@ -604,13 +608,13 @@ var ke = ["aria-busy"], Ae = {
 											_: 2
 										}, 1024),
 										A(w, { mode: "out-in" }, {
-											default: V(() => [kt("revise", g) ? (I(), E(p, {
+											default: V(() => [At("revise", g) ? (I(), E(p, {
 												key: 0,
-												icon: ut(c.id) ? "ri:file-edit-fill" : "ri:file-edit-line",
-												title: ut(c.id) ? z(F)("action.editRevise") : z(F)("action.createRevise"),
-												"aria-label": ut(c.id) ? z(F)("action.editRevise") : z(F)("action.createRevise"),
+												icon: dt(c.id) ? "ri:file-edit-fill" : "ri:file-edit-line",
+												title: dt(c.id) ? z(F)("action.editRevise") : z(F)("action.createRevise"),
+												"aria-label": dt(c.id) ? z(F)("action.editRevise") : z(F)("action.createRevise"),
 												modifiers: "action-quiet-small",
-												class: P({ "text-brand": ut(c.id) }),
+												class: P({ "text-brand": dt(c.id) }),
 												onClick: H((e) => r.$emit("revise", c), ["stop"])
 											}, null, 8, [
 												"icon",
@@ -622,7 +626,7 @@ var ke = ["aria-busy"], Ae = {
 											_: 2
 										}, 1024),
 										A(w, { mode: "out-in" }, {
-											default: V(() => [dt("upvote", g) ? (I(), E(p, {
+											default: V(() => [ft("upvote", g) ? (I(), E(p, {
 												key: 0,
 												icon: Y(c.id)?.vote === "upvote" ? "ri:thumb-up-fill" : "ri:thumb-up-line",
 												title: z(F)("action.upvote"),
@@ -638,7 +642,7 @@ var ke = ["aria-busy"], Ae = {
 											_: 2
 										}, 1024),
 										A(w, { mode: "out-in" }, {
-											default: V(() => [dt("downvote", g) ? (I(), E(p, {
+											default: V(() => [ft("downvote", g) ? (I(), E(p, {
 												key: 0,
 												icon: Y(c.id)?.vote === "downvote" ? "ri:thumb-down-fill" : "ri:thumb-down-line",
 												title: z(F)("action.downvote"),
@@ -654,7 +658,7 @@ var ke = ["aria-busy"], Ae = {
 											_: 2
 										}, 1024),
 										A(w, { mode: "out-in" }, {
-											default: V(() => [dt("feedback", g) ? (I(), E(p, {
+											default: V(() => [ft("feedback", g) ? (I(), E(p, {
 												key: 0,
 												icon: Y(c.id)?.comment ? "ri:feedback-fill" : "ri:feedback-line",
 												title: z(F)("action.feedback"),
@@ -679,23 +683,28 @@ var ke = ["aria-busy"], Ae = {
 								}, [A(u, {
 									name: "ri:time-line",
 									class: "shrink-0"
-								}), k("span", Ue, R(Bt(c.metadata.createdAt)), 1)], 8, He), Vt(c) ? (I(), O("span", We, [A(u, {
+								}), k("span", Ue, R(Ht(c.metadata.createdAt)), 1)], 8, He), Ut(c) ? (I(), O("span", We, [A(u, {
 									name: "ri:hourglass-line",
 									class: "shrink-0"
-								}), k("span", Ge, R(Vt(c)), 1)])) : D("", !0)])) : D("", !0),
-								e.showMessageTokensCount && c.metadata?.totalTokens ? (I(), O("span", Ke, [A(u, {
+								}), k("span", Ge, R(Ut(c)), 1)])) : D("", !0)])) : D("", !0),
+								e.showMessageNumber ? (I(), O("span", {
+									key: 1,
+									title: z(F)("label.messageNumber", { n: Bt.value[g] }),
+									class: "text-12 text-word-3 tabular-nums"
+								}, " #" + R(Bt.value[g]), 9, Ke)) : D("", !0),
+								e.showMessageTokensCount && c.metadata?.totalTokens ? (I(), O("span", qe, [A(u, {
 									name: "ri:ai-generate-2-line",
 									class: "shrink-0"
-								}), k("span", qe, R(z(ye)(c.metadata.totalTokens, "integer")) + " " + R(z(F)("label.tokens")), 1)])) : D("", !0),
+								}), k("span", Je, R(z(ye)(c.metadata.totalTokens, "integer")) + " " + R(z(F)("label.tokens")), 1)])) : D("", !0),
 								e.showMessageDateTime && c.metadata?.createdAt ? (I(), O("time", {
-									key: 2,
+									key: 3,
 									datetime: new Date(c.metadata?.createdAt).toISOString(),
 									class: "flex items-center gap-4 text-12 text-word-3"
 								}, [A(u, {
 									name: "ri:time-line",
 									class: "shrink-0"
-								}), k("span", Ye, R(z(U)(new Date(c.metadata?.createdAt), "date-time")), 1)], 8, Je)) : D("", !0),
-								e.showMessageDateTime && c?.metadata?.completedAt && c?.metadata?.createdAt ? (I(), O("div", Xe, [A(u, {
+								}), k("span", Xe, R(z(U)(new Date(c.metadata?.createdAt), "date-time")), 1)], 8, Ye)) : D("", !0),
+								e.showMessageDateTime && c?.metadata?.completedAt && c?.metadata?.createdAt ? (I(), O("div", Ze, [A(u, {
 									name: "ri:hourglass-line",
 									class: "shrink-0"
 								}), A(l, {
@@ -711,7 +720,7 @@ var ke = ["aria-busy"], Ae = {
 								key: 0,
 								ref_for: !0,
 								ref_key: "feedbackMessageEl",
-								ref: Ht,
+								ref: Wt,
 								loading: e.feedbackLoading,
 								submitted: e.feedbackSubmitted,
 								error: e.feedbackError,
@@ -729,21 +738,21 @@ var ke = ["aria-busy"], Ae = {
 						appear: "",
 						name: "pk-chatbot-part"
 					}, {
-						default: V(() => [Ct.value ? (I(), O("div", {
+						default: V(() => [wt.value ? (I(), O("div", {
 							key: 0,
 							class: "pk-chatbot-message pk-chatbot-message--assistant pk-chatbot-message--loading",
-							style: de({ minHeight: wt.value ? `${J.value}px` : void 0 })
-						}, [k("div", Ze, [k("div", Qe, [A(u, {
+							style: de({ minHeight: Tt.value ? `${J.value}px` : void 0 })
+						}, [k("div", Qe, [k("div", $e, [A(u, {
 							name: "loading-loop",
 							class: "shrink-0"
-						}), k("span", $e, R(z(F)("label.answeringOnTheCall")), 1)])])], 4)) : D("", !0)]),
+						}), k("span", et, R(z(F)("label.answeringOnTheCall")), 1)])])], 4)) : D("", !0)]),
 						_: 1
 					}),
 					A(w, {
 						appear: "",
 						name: "pk-chatbot-part"
 					}, {
-						default: V(() => [St.value ? (I(), E(c, {
+						default: V(() => [Ct.value ? (I(), E(c, {
 							key: 0,
 							error: e.error,
 							onRetry: i[3] ||= (e) => r.$emit("auto-retry"),
@@ -751,21 +760,21 @@ var ke = ["aria-busy"], Ae = {
 						}, null, 8, ["error"])) : D("", !0)]),
 						_: 1
 					}),
-					yt.value?.role === "user" && !wt.value || St.value ? (I(), O("div", {
+					bt.value?.role === "user" && !Tt.value || Ct.value ? (I(), O("div", {
 						key: 0,
 						class: "pk-chatbot-messages__spacer",
 						style: de({ minHeight: `${J.value}px` })
 					}, null, 4)) : D("", !0)
 				], 512),
 				A(w, { name: "pk-chatbot-messages-fab" }, {
-					default: V(() => [e.showScrollToBottom && (z(K) || !z(tt)) ? (I(), O("button", {
+					default: V(() => [e.showScrollToBottom && (z(K) || !z(nt)) ? (I(), O("button", {
 						key: 0,
 						type: "button",
 						class: "pk-chatbot-messages__scroll-to-bottom",
 						title: z(F)("action.scrollToBottom"),
 						"aria-label": z(F)("action.scrollToBottom"),
-						onClick: nt
-					}, [A(u, { name: "ri:arrow-down-line" })], 8, et)) : D("", !0)]),
+						onClick: rt
+					}, [A(u, { name: "ri:arrow-down-line" })], 8, tt)) : D("", !0)]),
 					_: 1
 				})
 			], 46, ke);
@@ -773,6 +782,6 @@ var ke = ["aria-busy"], Ae = {
 	}
 });
 //#endregion
-export { xe as a, be as i, Se as n, ye as r, tt as t };
+export { xe as a, be as i, Se as n, ye as r, nt as t };
 
-//# sourceMappingURL=PkChatbotMessages-R1EsTJpM.js.map
+//# sourceMappingURL=PkChatbotMessages-ClPdP7sw.js.map