@accelerated-agency/visual-editor 0.3.0 → 0.3.2

package/dist/index.js

@@ -4,6 +4,7 @@ import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { HexColorPicker } from 'react-colorful';
+import 'bootstrap-icons/font/bootstrap-icons.css';
 
 var PERSIST_NAME_PREFIX = "conversion-editor-variations-v3-";
 function variationsPersistStorageName(experimentId) {
@@ -4646,6 +4647,7 @@ function PlatformVisualEditor({
   }, [dirty, onDirtyChange]);
   const loadPayload = useMemo(
     () => ({
+      iid: experiment?.iid,
       experimentId: experiment?.experimentId,
       name: experiment?.name,
       status: experiment?.status,
@@ -4655,6 +4657,7 @@ function PlatformVisualEditor({
     }),
     [experiment]
   );
+  console.log("loadPayload", loadPayload);
   useEffect(() => {
     if (!editorReady) return;
     const payloadKey = JSON.stringify(loadPayload);
@@ -4833,6 +4836,7 @@ function PlatformVisualEditorV2({
 }) {
   const iframeRef = useRef(null);
   const [editorReady, setEditorReady] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
   const [dirty, setDirty] = useState(false);
   const dirtyRef = useRef(false);
   const mutationSkipCountRef = useRef(0);
@@ -4857,6 +4861,7 @@ function PlatformVisualEditorV2({
   }, []);
   const loadPayload = useMemo(
     () => ({
+      iid: experiment?.iid,
       experimentId: experiment?.experimentId,
       name: experiment?.name,
       status: experiment?.status,
@@ -4866,6 +4871,7 @@ function PlatformVisualEditorV2({
     }),
     [experiment]
   );
+  console.log("loadPayload", loadPayload);
   const editorSrc = useMemo(() => {
     const safeBaseUrl = normalizeProxyBaseUrl(proxyBaseUrl);
     return safeBaseUrl ? `${safeBaseUrl}/vvveb-editor` : "/vvveb-editor";
@@ -5020,5 +5026,344 @@ function PlatformVisualEditorV2({
     ) })
   ] });
 }
+var AI_EDITOR_CHANNEL = "ve-ai-editor";
+var AI_VIEWPORT_WIDTH = {
+  desktop: "100%",
+  tablet: "768px",
+  mobile: "390px"
+};
+var AI_VIEWPORT_LABEL = {
+  desktop: "1440px",
+  tablet: "768px",
+  mobile: "390px"
+};
+function fingerprint(value) {
+  let hash = 5381;
+  for (let index = 0; index < value.length; index += 1) {
+    hash = hash * 33 ^ value.charCodeAt(index);
+  }
+  return (hash >>> 0).toString(36);
+}
+function PlatformAiEditor({
+  embeddedGlobalKey = "__CONVERSION_EMBEDDED__",
+  proxyBaseUrl = "",
+  chatComponent,
+  className = "fixed inset-0 z-[9999] flex flex-col bg-white",
+  editorClassName = "flex-1 min-h-0",
+  showHeader = true,
+  title,
+  status,
+  tabs = [],
+  activeTab = "AI Editor",
+  error = null,
+  showCloseButton = true,
+  closeLabel = "Close",
+  experiment,
+  activeVariationId: controlledActiveVariationId,
+  onClose,
+  onTabChange,
+  onDirtyChange,
+  onEditorReady,
+  onEditorUrlChanged,
+  onSaveSuccess,
+  onSaveError,
+  onRequestSave,
+  renderHeader,
+  renderError,
+  setActiveVariationId: controlledSetActiveVariationId
+}) {
+  const iframeRef = useRef(null);
+  const [localActiveVariationId, setLocalActiveVariationId] = useState(null);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isIframeLoading, setIsIframeLoading] = useState(false);
+  const [viewport, setViewport] = useState("desktop");
+  useEffect(() => {
+    window[embeddedGlobalKey] = true;
+    return () => {
+      delete window[embeddedGlobalKey];
+    };
+  }, [embeddedGlobalKey]);
+  useEffect(() => {
+    onDirtyChange?.(false);
+  }, [onDirtyChange]);
+  const variations = experiment?.variations ?? [];
+  const activeVariationId = controlledActiveVariationId ?? localActiveVariationId;
+  const setActiveVariationId = controlledSetActiveVariationId ?? setLocalActiveVariationId;
+  useEffect(() => {
+    if (!variations.length) {
+      setActiveVariationId(null);
+      return;
+    }
+    setActiveVariationId((current) => {
+      if (current && variations.some((variation) => variation._id === current)) return current;
+      const baseline = variations.find((variation) => variation.baseline);
+      return baseline?._id ?? variations[0]._id;
+    });
+  }, [variations]);
+  const activeVariation = useMemo(
+    () => variations.find((variation) => variation._id === activeVariationId) ?? null,
+    [variations, activeVariationId]
+  );
+  const effectiveCssCode = useMemo(() => {
+    return (activeVariation?.csscode ?? "").trim();
+  }, [activeVariation?.csscode]);
+  const effectiveJsCode = useMemo(() => {
+    return (activeVariation?.jscode ?? "").trim();
+  }, [activeVariation?.jscode]);
+  const cssFingerprint = useMemo(() => fingerprint(effectiveCssCode), [effectiveCssCode]);
+  const jsFingerprint = useMemo(() => fingerprint(effectiveJsCode), [effectiveJsCode]);
+  const hasAiCode = useMemo(
+    () => Boolean(effectiveCssCode.trim() || effectiveJsCode.trim()),
+    [effectiveCssCode, effectiveJsCode]
+  );
+  const iframeKey = useMemo(
+    () => `ai-iframe-${activeVariationId ?? "default"}-${cssFingerprint}-${jsFingerprint}`,
+    [activeVariationId, cssFingerprint, jsFingerprint]
+  );
+  const iframeWidth = AI_VIEWPORT_WIDTH[viewport];
+  const editorSrc = useMemo(() => {
+    const pageUrl = experiment?.pageUrl;
+    if (!pageUrl) return "about:blank";
+    const safeBaseUrl = normalizeProxyBaseUrl(proxyBaseUrl);
+    const query = new URLSearchParams({
+      password: experiment?.editorPassword ?? "",
+      url: pageUrl
+    }).toString();
+    const previewPath = `/api/conversion-proxy?${query}`;
+    return safeBaseUrl ? `${safeBaseUrl}${previewPath}` : previewPath;
+  }, [proxyBaseUrl, experiment?.pageUrl, experiment?.editorPassword]);
+  const postAiCodeToIframe = useCallback(() => {
+    const targetWindow = iframeRef.current?.contentWindow;
+    if (!targetWindow) return;
+    targetWindow.postMessage(
+      {
+        channel: AI_EDITOR_CHANNEL,
+        type: "apply-ai-code",
+        payload: {
+          cssCode: effectiveCssCode,
+          jsCode: effectiveJsCode
+        }
+      },
+      "*"
+    );
+  }, [effectiveCssCode, effectiveJsCode]);
+  const parseProxyPayloadFromUrl = useCallback((rawUrl) => {
+    if (!rawUrl) return null;
+    try {
+      const parsed = new URL(rawUrl, window.location.href);
+      const url = parsed.searchParams.get("url") ?? void 0;
+      const password = parsed.searchParams.get("password") ?? void 0;
+      return { url, password };
+    } catch {
+      return null;
+    }
+  }, []);
+  const applyAiCodeInIframe = useCallback(() => {
+    postAiCodeToIframe();
+  }, [postAiCodeToIframe]);
+  useEffect(() => {
+    applyAiCodeInIframe();
+  }, [applyAiCodeInIframe]);
+  useEffect(() => {
+    if (!hasAiCode) {
+      setIsIframeLoading(false);
+      return;
+    }
+    setIsIframeLoading(true);
+    const timeoutId = window.setTimeout(() => {
+      setIsIframeLoading(false);
+    }, 5e3);
+    return () => window.clearTimeout(timeoutId);
+  }, [hasAiCode, cssFingerprint, jsFingerprint, activeVariationId]);
+  const handleIframeLoad = useCallback(() => {
+    applyAiCodeInIframe();
+    postAiCodeToIframe();
+    const currentSrc = iframeRef.current?.src ?? null;
+    const proxiedPayload = parseProxyPayloadFromUrl(currentSrc);
+    if (proxiedPayload?.url || proxiedPayload?.password) {
+      void onEditorUrlChanged?.(proxiedPayload);
+    }
+    onEditorReady?.();
+  }, [
+    applyAiCodeInIframe,
+    postAiCodeToIframe,
+    onEditorReady,
+    onEditorUrlChanged,
+    parseProxyPayloadFromUrl
+  ]);
+  useEffect(() => {
+    const onMessage = (event) => {
+      const msg = event.data;
+      if (!msg || msg.channel !== AI_EDITOR_CHANNEL) return;
+      if (msg.type === "ai-code-ready") {
+        postAiCodeToIframe();
+        return;
+      }
+      if (msg.type === "ai-url-changed") {
+        const payload = msg.payload ?? {};
+        void onEditorUrlChanged?.({
+          url: payload.url,
+          password: payload.password
+        });
+        return;
+      }
+      if (msg.type === "ai-code-applied") {
+        setIsIframeLoading(false);
+      }
+    };
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [postAiCodeToIframe, onEditorUrlChanged]);
+  const onTabClick = useCallback(
+    (tab) => onTabChange?.(tab),
+    [onTabChange]
+  );
+  const handleSave = useCallback(async () => {
+    if (!onRequestSave || isSaving) return;
+    const payload = {
+      experimentId: experiment?.experimentId,
+      variations,
+      cssCode: effectiveCssCode,
+      jsCode: effectiveJsCode,
+      selectedVariationId: activeVariation?._id,
+      selectedVariation: activeVariation ?? void 0
+    };
+    setIsSaving(true);
+    try {
+      await onRequestSave(payload);
+      onSaveSuccess?.(payload);
+    } catch (error2) {
+      onSaveError?.(error2);
+    } finally {
+      setIsSaving(false);
+    }
+  }, [
+    onRequestSave,
+    isSaving,
+    experiment?.experimentId,
+    variations,
+    effectiveCssCode,
+    effectiveJsCode,
+    activeVariation,
+    onSaveSuccess,
+    onSaveError
+  ]);
+  if (error) {
+    if (renderError) return renderError(error);
+    return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-[9999] flex items-center justify-center bg-slate-50", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 text-center px-8", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-2xl text-red-300", children: "\u26A0" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-slate-700", children: "Something went wrong" }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-red-400", children: error })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    showHeader ? renderHeader?.({
+      title: title ?? experiment?.name,
+      status: status ?? experiment?.status,
+      tabs,
+      activeTab,
+      onTabClick,
+      onClose
+    }) ?? /* @__PURE__ */ jsxs("div", { className: "h-12 border-b border-slate-200 bg-white flex items-center justify-between px-4 shadow-[0_1px_3px_rgba(0,0,0,0.04)] shrink-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 min-w-0", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold tracking-wide px-1.5 py-0.5 rounded bg-indigo-50 text-indigo-600 border border-indigo-100 shrink-0", children: "AI" }),
+        /* @__PURE__ */ jsx("span", { className: "font-semibold text-sm text-slate-800 truncate", children: title ?? experiment?.name ?? "AI Editor" }),
+        status ? /* @__PURE__ */ jsx("span", { className: "hidden sm:inline-flex text-[10px] px-2 py-0.5 rounded-full border border-slate-200 text-slate-500 font-medium bg-slate-50 capitalize", children: status }) : null
+      ] }),
+      tabs.length > 0 ? /* @__PURE__ */ jsx("div", { className: "hidden md:flex items-center gap-1 absolute left-1/2 -translate-x-1/2", children: tabs.map((tab) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onTabClick(tab),
+          className: `text-[11px] font-semibold px-3 py-1 rounded-full border transition-all ${tab.label === activeTab ? "bg-indigo-600 text-white border-indigo-600 shadow-sm" : "bg-white text-slate-500 border-slate-200 hover:border-slate-300 hover:text-slate-700"}`,
+          children: tab.label
+        },
+        tab.hash
+      )) }) : null,
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "h-8 px-3 rounded-md border border-slate-200 bg-white flex items-center gap-2 text-xs font-medium text-slate-700", children: [
+          /* @__PURE__ */ jsx("span", { children: AI_VIEWPORT_LABEL[viewport] }),
+          /* @__PURE__ */ jsx("i", { className: "bi bi-chevron-down text-[10px] text-slate-500" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "h-8 rounded-lg bg-slate-100 px-1 flex items-center gap-1", style: { backgroundColor: "#F0F0F0" }, children: [
+          { key: "desktop", icon: "bi-display", title: "Desktop \u2014 full width" },
+          { key: "tablet", icon: "bi-tablet", title: "Tablet \u2014 768px" },
+          { key: "mobile", icon: "bi-phone", title: "Mobile \u2014 390px" }
+        ].map((vp) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setViewport(vp.key),
+            title: vp.title,
+            className: `w-7 h-7 rounded-md border flex items-center justify-center transition-all ${viewport === vp.key ? "bg-white border-slate-300 text-slate-700 shadow-sm" : "bg-transparent border-transparent text-slate-500 hover:text-slate-700 hover:bg-white/70"}`,
+            children: /* @__PURE__ */ jsx("i", { className: `bi ${vp.icon} text-[12px]` })
+          },
+          vp.key
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        variations.length > 0 ? /* @__PURE__ */ jsx(
+          "select",
+          {
+            className: "h-8 max-w-[220px] rounded-md border border-slate-200 bg-white px-2 text-xs text-slate-700",
+            value: activeVariationId ?? "",
+            onChange: (event) => setActiveVariationId(event.target.value || null),
+            "aria-label": "Select variation",
+            children: variations.map((variation) => /* @__PURE__ */ jsx("option", { value: variation._id, children: variation.name }, variation._id))
+          }
+        ) : null,
+        onRequestSave ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "text-[11px] font-medium px-3 py-1.5 rounded-md border border-indigo-200 text-indigo-700 bg-indigo-50 hover:bg-indigo-100 hover:border-indigo-300 transition-all disabled:opacity-60 disabled:cursor-not-allowed",
+            onClick: () => void handleSave(),
+            disabled: isSaving,
+            children: isSaving ? "Saving..." : "Save"
+          }
+        ) : null,
+        showCloseButton ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "text-[11px] font-medium px-3 py-1.5 rounded-md border border-slate-200 text-slate-600 hover:bg-slate-50 hover:border-slate-300 transition-all",
+            onClick: () => onClose?.(),
+            children: closeLabel
+          }
+        ) : null
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsxs("div", { className: `${editorClassName} relative`, children: [
+      /* @__PURE__ */ jsx("div", { className: "w-full h-full bg-slate-100 overflow-auto flex justify-center items-start p-3", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "h-full bg-white border border-slate-200 shadow-sm overflow-hidden",
+          style: {
+            width: iframeWidth,
+            minWidth: iframeWidth,
+            maxWidth: "100%"
+          },
+          children: /* @__PURE__ */ jsx(
+            "iframe",
+            {
+              ref: iframeRef,
+              src: editorSrc,
+              onLoad: handleIframeLoad,
+              className: "w-full h-full border-0",
+              title: "AI Editor Preview",
+              allow: "same-origin"
+            },
+            iframeKey
+          )
+        }
+      ) }),
+      isIframeLoading ? /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-slate-100/95 backdrop-blur-[1px]", children: /* @__PURE__ */ jsxs("div", { className: "w-[560px] max-w-[88vw]", children: [
+        /* @__PURE__ */ jsx("p", { className: "mb-3 text-center text-base font-semibold text-slate-700", children: "Loading changes..." }),
+        /* @__PURE__ */ jsx("div", { className: "h-4 w-full rounded-full border border-slate-300 bg-white/90 p-1 shadow-sm", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full overflow-hidden rounded-full bg-slate-200", children: /* @__PURE__ */ jsx("div", { className: "h-full w-1/3 rounded-full bg-gradient-to-r from-emerald-300 via-sky-500 to-indigo-600 animate-pulse" }) }) })
+      ] }) }) : null,
+      chatComponent ?? null
+    ] })
+  ] });
+}
 
-export { EditorShell, PlatformVisualEditor, PlatformVisualEditorV2, ToastProvider, hydrateVariationsFromStorage, useToast, variationsPersistStorageName };
+export { EditorShell, PlatformAiEditor, PlatformVisualEditor, PlatformVisualEditorV2, ToastProvider, hydrateVariationsFromStorage, useToast, variationsPersistStorageName };