@templatical/editor 0.0.4 → 0.0.6

package/dist/AiChatSidebar-CNhSl_ty.js

@@ -0,0 +1,228 @@
+import { o as e, s as t } from "./dist-Ac4o1O4a.js";
+import { C as n, T as r, f as ee, g as te, r as ne } from "./keys-C0MQRs8d.js";
+import { n as i, t as a } from "./_plugin-vue_export-helper-5TQrnOhO.js";
+import { t as re } from "./circle-alert-CVTmJHKW.js";
+import { t as ie } from "./loader-circle-DilFjHSk.js";
+import { t as ae } from "./send-ChDw64yL.js";
+import { t as o } from "./sparkles-Co9fkDcv.js";
+import { t as oe } from "./trash-2-CZkMtjeC.js";
+import { t as s } from "./x-CU2XZOkQ.js";
+import { t as se } from "./LoadingTrack--aUassFH.js";
+import { Fragment as c, Transition as ce, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, inject as le, nextTick as ue, normalizeClass as de, onBeforeUnmount as g, openBlock as _, ref as v, renderList as y, toDisplayString as b, unref as x, vModelText as fe, watch as S, withCtx as pe, withDirectives as C } from "vue";
+import { useAiChat as w } from "@templatical/core/cloud";
+var T = i("redo-2", [["path", {
+	d: "m15 14 5-5-5-5",
+	key: "12vg1m"
+}], ["path", {
+	d: "M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13",
+	key: "6uklza"
+}]]), E = i("undo-2", [["path", {
+	d: "M9 14 4 9l5-5",
+	key: "102s5s"
+}], ["path", {
+	d: "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11",
+	key: "f3b9sd"
+}]]);
+//#endregion
+//#region src/composables/useAliveFlag.ts
+function D() {
+	let e = { alive: !0 };
+	return g(() => {
+		e.alive = !1;
+	}), e;
+}
+//#endregion
+//#region src/cloud/components/AiChatSidebar.vue?vue&type=script&setup=true&lang.ts
+var O = {
+	key: 0,
+	class: "tpl-ai-sidebar tpl:absolute tpl:top-14 tpl:right-0 tpl:bottom-0 tpl:z-panel tpl:flex tpl:w-[360px] tpl:flex-col tpl:border-l tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)]"
+}, k = { class: "tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-3" }, A = { class: "tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-primary)]" }, j = { class: "tpl:flex tpl:items-center tpl:gap-1" }, M = ["title"], N = { class: "tpl:relative tpl:flex tpl:min-h-0 tpl:flex-1 tpl:flex-col" }, P = {
+	key: 0,
+	class: "tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center"
+}, F = { class: "tpl:text-sm tpl:text-[var(--tpl-text-muted)]" }, I = {
+	key: 1,
+	class: "tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center"
+}, L = { class: "tpl:max-w-[240px] tpl:text-sm tpl:text-[var(--tpl-text-muted)]" }, R = {
+	key: 2,
+	class: "tpl:flex tpl:flex-col tpl:gap-4"
+}, z = {
+	key: 0,
+	class: "tpl:self-end tpl:rounded-[var(--tpl-radius-sm)] tpl:px-3.5 tpl:py-2.5 tpl:text-sm",
+	style: {
+		"background-color": "var(--tpl-primary-light)",
+		color: "var(--tpl-text)",
+		"max-width": "85%",
+		"box-shadow": "var(--tpl-shadow)"
+	}
+}, B = {
+	key: 1,
+	class: "tpl:flex tpl:flex-col tpl:gap-2"
+}, me = {
+	key: 1,
+	class: "tpl:rounded-[var(--tpl-radius-sm)] tpl:px-3.5 tpl:py-2.5 tpl:text-sm tpl:whitespace-pre-wrap",
+	style: {
+		"max-width": "85%",
+		"background-color": "var(--tpl-bg)",
+		color: "var(--tpl-text)",
+		"box-shadow": "var(--tpl-shadow)"
+	}
+}, he = {
+	key: 0,
+	class: "tpl:mx-3 tpl:mb-2 tpl:flex tpl:items-start tpl:gap-2 tpl:rounded-lg tpl:px-3 tpl:py-2 tpl:text-xs",
+	style: {
+		"background-color": "var(--tpl-danger-light)",
+		color: "var(--tpl-danger)"
+	}
+}, ge = {
+	key: 1,
+	class: "tpl:absolute tpl:right-0 tpl:bottom-0 tpl:left-0 tpl:z-10 tpl:px-3 tpl:pb-3",
+	style: {
+		"background-color": "color-mix(\n              in srgb,\n              var(--tpl-bg) 50%,\n              transparent\n            )",
+		"backdrop-filter": "blur(2px)"
+	}
+}, _e = { class: "tpl:flex tpl:flex-col tpl:gap-1.5" }, ve = ["onClick"], ye = { class: "tpl:border-t tpl:p-3 tpl:border-[var(--tpl-border)]" }, be = { class: "tpl-ai-input-wrapper tpl:flex tpl:items-end tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:border tpl:px-3 tpl:py-2 tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]" }, xe = ["placeholder", "disabled"], Se = ["disabled"], Ce = { class: "tpl:m-0 tpl:px-1 tpl:pt-2 tpl:text-center tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]" }, V = /* @__PURE__ */ a(/* @__PURE__ */ h({
+	__name: "AiChatSidebar",
+	props: {
+		visible: { type: Boolean },
+		onApply: { type: Function }
+	},
+	emits: ["close"],
+	setup(i, { emit: a }) {
+		let h = i, g = a, V = r(n, "AiChatSidebar"), H = r(ee, "AiChatSidebar"), we = r(ne, "AiChatSidebar"), U = le(te, []), W = D(), G = w({
+			authManager: we,
+			getTemplateId: () => H.state.template?.id ?? null,
+			onApply: h.onApply,
+			onError: void 0
+		}), K = v(""), q = v(null), J = v(!1), Y = v(0), { pause: X, resume: Te } = e(() => {
+			let e = G.suggestions.value?.length ?? 0;
+			Y.value < e ? Y.value++ : X();
+		}, 150, { immediate: !1 }), { start: Ee } = t(() => Te(), 100, { immediate: !1 });
+		S(() => G.suggestions.value?.length ?? 0, (e) => {
+			if (X(), e === 0) {
+				Y.value = 0;
+				return;
+			}
+			Y.value = 0, Ee();
+		});
+		function Z() {
+			ue(() => {
+				q.value && (q.value.scrollTop = q.value.scrollHeight);
+			});
+		}
+		S(() => G.messages.value?.length ?? 0, () => Z()), S(() => h.visible, async (e) => {
+			if (e && !J.value) {
+				if (J.value = !0, await G.loadConversation(), !W.alive) return;
+				(G.messages.value?.length ?? 0) === 0 && H.content.value.blocks.length === 0 && G.loadSuggestions(H.content.value, U);
+			}
+		});
+		async function Q() {
+			let e = K.value.trim();
+			!e || G.isGenerating.value || (K.value = "", G.error.value = null, G.failedPrompt.value = null, Z(), await G.sendPrompt(e, H.content.value, U), W.alive && (G.failedPrompt.value && (K.value = G.failedPrompt.value), Z()));
+		}
+		function $(e) {
+			return e.replace(/```json[\s\S]*?```/g, "").replace(/```json[\s\S]*/g, "").trim();
+		}
+		function De(e) {
+			X(), K.value = e, Q();
+		}
+		function Oe(e) {
+			e.key === "Enter" && !e.shiftKey && (e.preventDefault(), Q());
+		}
+		return (e, t) => (_(), l(ce, {
+			"enter-active-class": "tpl-ai-slide-enter-active",
+			"enter-from-class": "tpl:translate-x-full",
+			"enter-to-class": "tpl:translate-x-0",
+			"leave-active-class": "tpl-ai-slide-leave-active",
+			"leave-from-class": "tpl:translate-x-0",
+			"leave-to-class": "tpl:translate-x-full"
+		}, {
+			default: pe(() => [i.visible ? (_(), d("div", O, [
+				f("div", k, [f("div", A, [m(x(o), {
+					size: 13,
+					"stroke-width": 2
+				}), f("span", null, b(x(V).aiChat.title), 1)]), f("div", j, [(x(G).messages.value?.length ?? 0) > 0 ? (_(), d("button", {
+					key: 0,
+					class: "tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]",
+					title: x(V).aiChat.clear,
+					onClick: t[0] ||= (e) => x(G).clearChat()
+				}, [m(x(oe), {
+					size: 14,
+					"stroke-width": 2
+				})], 8, M)) : u("", !0), f("button", {
+					class: "tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]",
+					onClick: t[1] ||= (e) => g("close")
+				}, [m(x(s), {
+					size: 14,
+					"stroke-width": 2
+				})])])]),
+				f("div", N, [
+					f("div", {
+						ref_key: "messagesContainer",
+						ref: q,
+						class: "tpl:flex-1 tpl:overflow-y-auto tpl:p-4"
+					}, [x(G).isLoadingHistory.value ? (_(), d("div", P, [m(x(ie), {
+						class: "tpl-spinner tpl:text-[var(--tpl-text-muted)]",
+						size: 24,
+						"stroke-width": 2
+					}), f("p", F, b(x(V).aiChat.loadingHistory), 1)])) : (x(G).messages.value?.length ?? 0) === 0 ? (_(), d("div", I, [m(x(o), {
+						size: 32,
+						"stroke-width": 1.5,
+						class: "tpl:text-[var(--tpl-text-dim)]"
+					}), f("p", L, b(x(V).aiChat.placeholder), 1)])) : (_(), d("div", R, [(_(!0), d(c, null, y(x(G).messages.value, (e, n) => (_(), d("div", {
+						key: e.id,
+						class: "tpl:flex tpl:flex-col tpl:gap-2"
+					}, [e.role === "user" ? (_(), d("div", z, b(e.content), 1)) : (_(), d("div", B, [!$(e.content) && x(G).isGenerating.value && n === (x(G).messages.value?.length ?? 0) - 1 ? (_(), l(se, { key: 0 })) : (_(), d("div", me, b($(e.content) || x(V).aiChat.applied), 1)), e.id === x(G).lastApplyMessageId.value && !x(G).isGenerating.value ? (_(), d("button", {
+						key: 2,
+						class: "tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:self-start tpl:rounded-md tpl:border tpl:px-2.5 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
+						style: {
+							"border-color": "var(--tpl-border)",
+							color: "var(--tpl-text-muted)",
+							"background-color": "transparent"
+						},
+						onClick: t[2] ||= (e) => x(G).toggleLastRevert()
+					}, [x(G).isLastChangeReverted.value ? (_(), d(c, { key: 0 }, [m(x(T), {
+						size: 12,
+						"stroke-width": 2
+					}), p(" " + b(x(V).aiChat.reapply), 1)], 64)) : (_(), d(c, { key: 1 }, [m(x(E), {
+						size: 12,
+						"stroke-width": 2
+					}), p(" " + b(x(V).aiChat.revert), 1)], 64))])) : u("", !0)]))]))), 128))]))], 512),
+					x(G).error.value ? (_(), d("div", he, [m(x(re), {
+						size: 14,
+						"stroke-width": 2,
+						class: "tpl:mt-0.5 tpl:shrink-0"
+					}), f("span", null, b(x(G).error.value === "ai_apply_failed" ? x(V).aiChat.applyFailed : x(V).aiChat.error), 1)])) : u("", !0),
+					(x(G).suggestions.value?.length ?? 0) > 0 ? (_(), d("div", ge, [f("div", _e, [(_(!0), d(c, null, y(x(G).suggestions.value ?? [], (e, t) => (_(), d("button", {
+						key: t,
+						class: de(["tpl-suggestion-btn tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:px-3 tpl:py-2 tpl:text-left tpl:text-xs tpl:leading-snug tpl:transition-all tpl:duration-300 tpl:ease-out", (x(G).suggestions.value?.length ?? 0) - 1 - t < Y.value ? "tpl:translate-y-0 tpl:opacity-100" : "tpl:pointer-events-none tpl:-translate-y-2 tpl:opacity-0"]),
+						style: {
+							"border-color": "var(--tpl-border)",
+							color: "var(--tpl-primary)",
+							"background-color": "var(--tpl-bg)",
+							"box-shadow": "var(--tpl-shadow)"
+						},
+						onClick: (t) => De(e)
+					}, b(e), 11, ve))), 128))])])) : u("", !0)
+				]),
+				f("div", ye, [f("div", be, [C(f("textarea", {
+					"onUpdate:modelValue": t[3] ||= (e) => K.value = e,
+					class: "tpl:max-h-32 tpl:min-h-[64px] tpl:flex-1 tpl:resize-none tpl:border-none tpl:bg-transparent tpl:font-sans tpl:text-sm tpl:outline-none tpl:text-[var(--tpl-text)]",
+					placeholder: x(V).aiChat.inputPlaceholder,
+					disabled: x(G).isGenerating.value,
+					rows: "3",
+					onKeydown: Oe
+				}, null, 40, xe), [[fe, K.value]]), f("button", {
+					class: "tpl-ai-send-btn tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-center tpl:rounded-md tpl:p-1.5 tpl:transition-all tpl:duration-150 tpl:disabled:opacity-40 tpl:text-[var(--tpl-primary)]",
+					disabled: !K.value.trim() || x(G).isGenerating.value,
+					onClick: Q
+				}, [m(x(ae), {
+					size: 16,
+					"stroke-width": 2
+				})], 8, Se)]), f("p", Ce, b(x(V).aiMenu.disclaimer), 1)])
+			])) : u("", !0)]),
+			_: 1
+		}));
+	}
+}), [["__scopeId", "data-v-da2a9f9a"]]);
+//#endregion
+export { V as default };

package/dist/{AiFeatureMenu-K44aZa_P.js → AiFeatureMenu-BFVsjUJY.js}

@@ -1,11 +1,11 @@
-import "./useEditorCore-CjwRMl7K.js";
-import { t as e } from "./keys-C0MQRs8d.js";
-import { t } from "./useI18n-D6m7ZUgY.js";
-import { t as n } from "./_plugin-vue_export-helper-B1-bu7yR.js";
-import { t as r } from "./image-up-X4xIq4ea.js";
-import { t as i } from "./shield-check-f-qv4RKs.js";
-import { t as a } from "./sparkles-KhBCGlqB.js";
-import { Fragment as o, computed as s, createBlock as c, createElementBlock as l, createElementVNode as u, defineComponent as d, inject as f, normalizeStyle as p, openBlock as m, renderList as h, resolveDynamicComponent as g, toDisplayString as _ } from "vue";
+import { T as e, t } from "./keys-C0MQRs8d.js";
+import { t as n } from "./useI18n-D6m7ZUgY.js";
+import "./useEditorCore-ColJh1ST.js";
+import { t as r } from "./_plugin-vue_export-helper-5TQrnOhO.js";
+import { t as i } from "./image-up-vZa1Txr-.js";
+import { t as a } from "./shield-check-9dhLdyST.js";
+import { t as o } from "./sparkles-Co9fkDcv.js";
+import { Fragment as s, computed as c, createBlock as l, createElementBlock as u, createElementVNode as d, defineComponent as f, normalizeStyle as p, openBlock as m, renderList as h, resolveDynamicComponent as g, toDisplayString as _ } from "vue";
 //#region src/cloud/components/AiFeatureMenu.vue?vue&type=script&setup=true&lang.ts
 var v = {
 	class: "tpl-ai-feature-menu tpl:w-[280px] tpl:overflow-hidden tpl:rounded-[var(--tpl-radius)] tpl:py-1 tpl:bg-[var(--tpl-bg-elevated)] tpl:border tpl:border-[var(--tpl-border)] tpl:shadow-[var(--tpl-shadow-lg)]",
@@ -13,51 +13,51 @@ var v = {
 		"backdrop-filter": "blur(8px)",
 		"-webkit-backdrop-filter": "blur(8px)"
 	}
-}, y = ["onClick"], b = { class: "tpl:flex tpl:min-w-0 tpl:flex-col tpl:gap-0.5" }, x = { class: "tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text)]" }, S = { class: "tpl:text-xs tpl:leading-snug tpl:text-[var(--tpl-text-muted)]" }, C = /* @__PURE__ */ n(/* @__PURE__ */ d({
+}, y = ["onClick"], b = { class: "tpl:flex tpl:min-w-0 tpl:flex-col tpl:gap-0.5" }, x = { class: "tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text)]" }, S = { class: "tpl:text-xs tpl:leading-snug tpl:text-[var(--tpl-text-muted)]" }, C = /* @__PURE__ */ r(/* @__PURE__ */ f({
 	__name: "AiFeatureMenu",
 	props: { activeFeature: {} },
 	emits: ["select"],
-	setup(n, { emit: d }) {
-		let C = d, { t: w } = t(), T = f(e), E = {
+	setup(r, { emit: f }) {
+		let C = f, { t: w } = n(), T = e(t, "AiFeatureMenu"), E = {
 			"ai-chat": "chat",
 			"design-reference": "designToTemplate",
 			scoring: "scoring"
 		}, D = [
 			{
 				key: "ai-chat",
-				icon: a
+				icon: o
 			},
 			{
 				key: "design-reference",
-				icon: r
+				icon: i
 			},
 			{
 				key: "scoring",
-				icon: i
+				icon: a
 			}
-		], O = s(() => D.filter((e) => T.isFeatureEnabled(E[e.key])));
+		], O = c(() => D.filter((e) => T.isFeatureEnabled(E[e.key])));
 		function k(e) {
 			return e === "ai-chat" ? w.aiMenu.aiAssistant : e === "design-reference" ? w.aiMenu.designToTemplate : w.aiMenu.templateScore;
 		}
 		function A(e) {
 			return e === "ai-chat" ? w.aiMenu.aiAssistantDesc : e === "design-reference" ? w.aiMenu.designToTemplateDesc : w.aiMenu.templateScoreDesc;
 		}
-		return (e, t) => (m(), l("div", v, [(m(!0), l(o, null, h(O.value, (e) => (m(), l("button", {
+		return (e, t) => (m(), u("div", v, [(m(!0), u(s, null, h(O.value, (e) => (m(), u("button", {
 			key: e.key,
 			class: "tpl-ai-feature-menu-item tpl:flex tpl:w-full tpl:cursor-pointer tpl:items-start tpl:gap-3 tpl:border-none tpl:px-3 tpl:py-2.5 tpl:text-left tpl:transition-colors tpl:duration-100",
-			style: p({ backgroundColor: n.activeFeature === e.key ? "var(--tpl-primary-light)" : "transparent" }),
+			style: p({ backgroundColor: r.activeFeature === e.key ? "var(--tpl-primary-light)" : "transparent" }),
 			onClick: (t) => C("select", e.key)
-		}, [u("div", {
+		}, [d("div", {
 			class: "tpl:mt-0.5 tpl:flex tpl:size-7 tpl:shrink-0 tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)]",
 			style: p({
-				backgroundColor: n.activeFeature === e.key ? "var(--tpl-primary)" : "var(--tpl-bg-active)",
-				color: n.activeFeature === e.key ? "var(--tpl-bg)" : "var(--tpl-text-muted)"
+				backgroundColor: r.activeFeature === e.key ? "var(--tpl-primary)" : "var(--tpl-bg-active)",
+				color: r.activeFeature === e.key ? "var(--tpl-bg)" : "var(--tpl-text-muted)"
 			})
-		}, [(m(), c(g(e.icon), {
+		}, [(m(), l(g(e.icon), {
 			size: 15,
 			"stroke-width": 2
-		}))], 4), u("div", b, [u("span", x, _(k(e.key)), 1), u("span", S, _(A(e.key)), 1)])], 12, y))), 128))]));
+		}))], 4), d("div", b, [d("span", x, _(k(e.key)), 1), d("span", S, _(A(e.key)), 1)])], 12, y))), 128))]));
 	}
-}), [["__scopeId", "data-v-7980235a"]]);
+}), [["__scopeId", "data-v-638e1be2"]]);
 //#endregion
 export { C as default };