@templatical/editor 0.0.1 → 0.0.3

package/dist/AiChatSidebar-busJk9hm.js

@@ -0,0 +1,214 @@
+import { o as e, s as t } from "./dist-CG-vEqSU.js";
+import { S as n, f as ee, h as te, r as ne } from "./keys-Dwa2PmdD.js";
+import { n as r, t as i } from "./_plugin-vue_export-helper-B1-bu7yR.js";
+import { t as re } from "./circle-alert-E2vYPs5r.js";
+import { t as ie } from "./loader-circle-BTQQxC3l.js";
+import { t as ae } from "./send-C0ltAQrv.js";
+import { t as a } from "./sparkles-KhBCGlqB.js";
+import { t as oe } from "./trash-2-OwjZ-guZ.js";
+import { t as se } from "./x-CGlq2XQe.js";
+import { t as ce } from "./LoadingTrack-vK8W2PJf.js";
+import { Fragment as o, Transition as le, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, inject as m, nextTick as h, normalizeClass as ue, openBlock as g, ref as _, renderList as v, toDisplayString as y, unref as b, vModelText as de, watch as x, withCtx as fe, withDirectives as pe } from "vue";
+import { useAiChat as S } from "@templatical/core/cloud";
+var C = r("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"
+}]]), w = r("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"
+}]]), T = {
+	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)]"
+}, E = { class: "tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-3" }, D = { class: "tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-primary)]" }, O = { class: "tpl:flex tpl:items-center tpl:gap-1" }, k = ["title"], A = { class: "tpl:relative tpl:flex tpl:min-h-0 tpl:flex-1 tpl:flex-col" }, j = {
+	key: 0,
+	class: "tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center"
+}, M = { class: "tpl:text-sm tpl:text-[var(--tpl-text-muted)]" }, N = {
+	key: 1,
+	class: "tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center"
+}, P = { class: "tpl:max-w-[240px] tpl:text-sm tpl:text-[var(--tpl-text-muted)]" }, F = {
+	key: 2,
+	class: "tpl:flex tpl:flex-col tpl:gap-4"
+}, I = {
+	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)"
+	}
+}, L = {
+	key: 1,
+	class: "tpl:flex tpl:flex-col tpl:gap-2"
+}, R = {
+	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)"
+	}
+}, z = {
+	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)"
+	}
+}, B = {
+	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)"
+	}
+}, me = { class: "tpl:flex tpl:flex-col tpl:gap-1.5" }, he = ["onClick"], ge = { class: "tpl:border-t tpl:p-3 tpl:border-[var(--tpl-border)]" }, _e = { 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)]" }, ve = ["placeholder", "disabled"], ye = ["disabled"], be = { class: "tpl:m-0 tpl:px-1 tpl:pt-2 tpl:text-center tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]" }, V = /* @__PURE__ */ i(/* @__PURE__ */ p({
+	__name: "AiChatSidebar",
+	props: {
+		visible: { type: Boolean },
+		onApply: { type: Function }
+	},
+	emits: ["close"],
+	setup(r, { emit: i }) {
+		let p = r, V = i, H = m(n), U = m(ee), xe = m(ne), W = m(te, []), G = S({
+			authManager: xe,
+			getTemplateId: () => U.state.template?.id ?? null,
+			onApply: p.onApply,
+			onError: void 0
+		}), K = _(""), q = _(null), J = _(!1), Y = _(0), { pause: X, resume: Se } = e(() => {
+			let e = G.suggestions.value?.length ?? 0;
+			Y.value < e ? Y.value++ : X();
+		}, 150, { immediate: !1 }), { start: Ce } = t(() => Se(), 100, { immediate: !1 });
+		x(() => G.suggestions.value?.length ?? 0, (e) => {
+			if (X(), e === 0) {
+				Y.value = 0;
+				return;
+			}
+			Y.value = 0, Ce();
+		});
+		function Z() {
+			h(() => {
+				q.value && (q.value.scrollTop = q.value.scrollHeight);
+			});
+		}
+		x(() => G.messages.value?.length ?? 0, () => Z()), x(() => p.visible, async (e) => {
+			e && !J.value && (J.value = !0, await G.loadConversation(), (G.messages.value?.length ?? 0) === 0 && U.content.value.blocks.length === 0 && G.loadSuggestions(U.content.value, W));
+		});
+		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, U.content.value, W), 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 we(e) {
+			X(), K.value = e, Q();
+		}
+		function Te(e) {
+			e.key === "Enter" && !e.shiftKey && (e.preventDefault(), Q());
+		}
+		return (e, t) => (g(), s(le, {
+			"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: fe(() => [r.visible ? (g(), l("div", T, [
+				u("div", E, [u("div", D, [f(b(a), {
+					size: 13,
+					"stroke-width": 2
+				}), u("span", null, y(b(H).aiChat.title), 1)]), u("div", O, [(b(G).messages.value?.length ?? 0) > 0 ? (g(), l("button", {
+					key: 0,
+					class: "tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]",
+					title: b(H).aiChat.clear,
+					onClick: t[0] ||= (e) => b(G).clearChat()
+				}, [f(b(oe), {
+					size: 14,
+					"stroke-width": 2
+				})], 8, k)) : c("", !0), u("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) => V("close")
+				}, [f(b(se), {
+					size: 14,
+					"stroke-width": 2
+				})])])]),
+				u("div", A, [
+					u("div", {
+						ref_key: "messagesContainer",
+						ref: q,
+						class: "tpl:flex-1 tpl:overflow-y-auto tpl:p-4"
+					}, [b(G).isLoadingHistory.value ? (g(), l("div", j, [f(b(ie), {
+						class: "tpl-spinner tpl:text-[var(--tpl-text-muted)]",
+						size: 24,
+						"stroke-width": 2
+					}), u("p", M, y(b(H).aiChat.loadingHistory), 1)])) : (b(G).messages.value?.length ?? 0) === 0 ? (g(), l("div", N, [f(b(a), {
+						size: 32,
+						"stroke-width": 1.5,
+						class: "tpl:text-[var(--tpl-text-dim)]"
+					}), u("p", P, y(b(H).aiChat.placeholder), 1)])) : (g(), l("div", F, [(g(!0), l(o, null, v(b(G).messages.value, (e, n) => (g(), l("div", {
+						key: e.id,
+						class: "tpl:flex tpl:flex-col tpl:gap-2"
+					}, [e.role === "user" ? (g(), l("div", I, y(e.content), 1)) : (g(), l("div", L, [!$(e.content) && b(G).isGenerating.value && n === (b(G).messages.value?.length ?? 0) - 1 ? (g(), s(ce, { key: 0 })) : (g(), l("div", R, y($(e.content) || b(H).aiChat.applied), 1)), e.id === b(G).lastApplyMessageId.value && !b(G).isGenerating.value ? (g(), l("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) => b(G).toggleLastRevert()
+					}, [b(G).isLastChangeReverted.value ? (g(), l(o, { key: 0 }, [f(b(C), {
+						size: 12,
+						"stroke-width": 2
+					}), d(" " + y(b(H).aiChat.reapply), 1)], 64)) : (g(), l(o, { key: 1 }, [f(b(w), {
+						size: 12,
+						"stroke-width": 2
+					}), d(" " + y(b(H).aiChat.revert), 1)], 64))])) : c("", !0)]))]))), 128))]))], 512),
+					b(G).error.value ? (g(), l("div", z, [f(b(re), {
+						size: 14,
+						"stroke-width": 2,
+						class: "tpl:mt-0.5 tpl:shrink-0"
+					}), u("span", null, y(b(G).error.value === "ai_apply_failed" ? b(H).aiChat.applyFailed : b(H).aiChat.error), 1)])) : c("", !0),
+					(b(G).suggestions.value?.length ?? 0) > 0 ? (g(), l("div", B, [u("div", me, [(g(!0), l(o, null, v(b(G).suggestions.value ?? [], (e, t) => (g(), l("button", {
+						key: t,
+						class: ue(["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", (b(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) => we(e)
+					}, y(e), 11, he))), 128))])])) : c("", !0)
+				]),
+				u("div", ge, [u("div", _e, [pe(u("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: b(H).aiChat.inputPlaceholder,
+					disabled: b(G).isGenerating.value,
+					rows: "3",
+					onKeydown: Te
+				}, null, 40, ve), [[de, K.value]]), u("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() || b(G).isGenerating.value,
+					onClick: Q
+				}, [f(b(ae), {
+					size: 16,
+					"stroke-width": 2
+				})], 8, ye)]), u("p", be, y(b(H).aiMenu.disclaimer), 1)])
+			])) : c("", !0)]),
+			_: 1
+		}));
+	}
+}), [["__scopeId", "data-v-2735cdb5"]]);
+//#endregion
+export { V as default };

package/dist/AiFeatureMenu-DLGv_-pj.js

@@ -0,0 +1,63 @@
+import "./useEditorCore-Cc4RCwWq.js";
+import { t as e } from "./keys-Dwa2PmdD.js";
+import { t } from "./useI18n-DUirdXEX.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";
+//#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)]",
+	style: {
+		"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({
+	__name: "AiFeatureMenu",
+	props: { activeFeature: {} },
+	emits: ["select"],
+	setup(n, { emit: d }) {
+		let C = d, { t: w } = t(), T = f(e), E = {
+			"ai-chat": "chat",
+			"design-reference": "designToTemplate",
+			scoring: "scoring"
+		}, D = [
+			{
+				key: "ai-chat",
+				icon: a
+			},
+			{
+				key: "design-reference",
+				icon: r
+			},
+			{
+				key: "scoring",
+				icon: i
+			}
+		], O = s(() => 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", {
+			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" }),
+			onClick: (t) => C("select", e.key)
+		}, [u("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)"
+			})
+		}, [(m(), c(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))]));
+	}
+}), [["__scopeId", "data-v-7980235a"]]);
+//#endregion
+export { C as default };