@chaibuilder/sdk 4.0.0-beta.1 → 4.0.0-beta.3

package/dist/save-to-lib-eiOc_SSN.js

@@ -0,0 +1,422 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { B as b, c as z, a9 as se, aa as ie, P as oe, I as L, aE as le, am as ce, aF as de, L as P } from "./index-Ct7ElCGK.js";
+import { ar as D, as as G, A as _, ay as ue } from "./index-ZuacEL1j.js";
+import { useQuery as K, useMutation as U, useQueryClient as me } from "@tanstack/react-query";
+import { toast as N } from "sonner";
+import { Trash2 as Y, Plus as pe, ImageIcon as he, X as fe, AlertCircle as ge } from "lucide-react";
+import { useState as f, useRef as V, useMemo as S, useEffect as w, useCallback as be } from "react";
+import { c as ve } from "./image-compression-DsZ1oqpb.js";
+import { isEmpty as ye, set as ke, has as Ne } from "lodash-es";
+const Be = (r) => {
+  const a = D(), o = G();
+  return U({
+    mutationFn: async (t) => o(a, {
+      action: _.UPSERT_LIBRARY_ITEM,
+      data: t
+    }),
+    onSuccess: (t) => {
+      r ? r(t) : N.success("Block saved successfully");
+    },
+    onError: (t) => {
+      console.error("Error saving block:", t), N.error("Failed to save block", {
+        description: t instanceof Error ? t.message : "Unknown error"
+      });
+    }
+  });
+}, Ce = (r) => {
+  const a = D(), o = G();
+  return K({
+    staleTime: "static",
+    queryKey: [_.GET_LIBRARY_ITEM, r],
+    enabled: !!r,
+    // Only run query if blockId is provided
+    queryFn: async () => {
+      if (!r) return null;
+      try {
+        return await o(a, {
+          action: _.GET_LIBRARY_ITEM,
+          data: { id: r }
+        });
+      } catch (t) {
+        throw console.error(t), new Error("The block could not be found on the server. It may have been deleted.");
+      }
+    },
+    retry: !1
+  });
+}, Ie = (r) => {
+  const a = D(), o = G();
+  return U({
+    mutationFn: async (t) => o(a, {
+      action: _.DELETE_LIBRARY_ITEM,
+      data: { id: t }
+    }),
+    onSuccess: () => {
+      r ? r() : N.success("Block deleted successfully");
+    },
+    onError: (t) => {
+      console.error("Error deleting block:", t), N.error("Failed to delete block", {
+        description: t instanceof Error ? t.message : "Unknown error"
+      });
+    }
+  });
+}, we = ({
+  blockId: r,
+  libBlockId: a,
+  isOpen: o,
+  onClose: t,
+  blockName: u,
+  trigger: p
+}) => {
+  const [d, l] = f(!1), c = z(), v = Ie(() => {
+    c([r], { _libBlockId: void 0 }), N.success("Block deleted successfully"), l(!1), t();
+  });
+  return /* @__PURE__ */ i(se, { open: o, onOpenChange: (m) => !m && t(), children: [
+    /* @__PURE__ */ e(ie, { asChild: !0, children: p || /* @__PURE__ */ i(b, { type: "button", variant: "destructive", size: "sm", onClick: (m) => m.preventDefault(), disabled: d, children: [
+      /* @__PURE__ */ e(Y, { className: "mr-2 h-4 w-4" }),
+      "Delete"
+    ] }) }),
+    /* @__PURE__ */ e(
+      oe,
+      {
+        className: "z-[9999] w-72 p-4",
+        sideOffset: 5,
+        align: "center",
+        children: /* @__PURE__ */ i("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ e("h4", { className: "font-medium", children: "Delete Block" }),
+          /* @__PURE__ */ i("p", { className: "text-sm", children: [
+            "Are you sure you want to delete the block",
+            /* @__PURE__ */ i("span", { className: "font-medium", children: [
+              ' "',
+              u,
+              '"'
+            ] }),
+            "?"
+          ] }),
+          /* @__PURE__ */ e("p", { className: "text-xs text-muted-foreground", children: "This block will be permanently removed from the library. This action cannot be undone." }),
+          /* @__PURE__ */ i("div", { className: "flex justify-end gap-2 pt-2", children: [
+            /* @__PURE__ */ e(b, { type: "button", variant: "outline", size: "sm", onClick: t, disabled: d, children: "Cancel" }),
+            /* @__PURE__ */ e(b, { type: "button", variant: "destructive", size: "sm", onClick: () => {
+              l(!0), v.mutate(a);
+            }, disabled: d, children: d ? "Deleting..." : "Delete" })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}, Ee = ({
+  blockId: r,
+  libBlockId: a,
+  blockName: o,
+  size: t = "sm",
+  className: u = "",
+  close: p
+}) => {
+  const [d, l] = f(!1);
+  return /* @__PURE__ */ e(
+    we,
+    {
+      blockId: r,
+      libBlockId: a,
+      isOpen: d,
+      onClose: () => {
+        l(!1), p();
+      },
+      blockName: o,
+      trigger: /* @__PURE__ */ i(
+        b,
+        {
+          type: "button",
+          variant: "destructive",
+          size: t,
+          className: u,
+          onClick: () => l(!0),
+          children: [
+            /* @__PURE__ */ e(Y, { className: "mr-2 h-4 w-4" }),
+            "Delete"
+          ]
+        }
+      )
+    }
+  );
+}, xe = () => {
+  const r = D(), a = G(), o = me(), {
+    data: t = [],
+    isLoading: u,
+    error: p
+  } = K({
+    queryKey: ["library-groups"],
+    staleTime: "static",
+    placeholderData: [],
+    queryFn: async () => {
+      try {
+        return await a(r, {
+          action: "GET_LIBRARY_GROUPS"
+        }) || [];
+      } catch (c) {
+        return console.error("Error fetching library groups:", c), [];
+      }
+    }
+  }), { mutateAsync: d, isPending: l } = U({
+    mutationFn: async (c) => {
+      if (!c.trim())
+        throw new Error("Group name is required");
+      return a(r, {
+        action: "CREATE_BLOCK_GROUP",
+        data: { name: c }
+      });
+    },
+    onSuccess: () => {
+      o.invalidateQueries({
+        queryKey: ["library-groups"]
+      }), N.success("Group created successfully");
+    },
+    onError: (c) => {
+      console.error("Error creating group:", c), N.error("Failed to create group", {
+        description: c instanceof Error ? c.message : "Unknown error"
+      });
+    }
+  });
+  return {
+    groups: t,
+    isLoading: u,
+    error: p,
+    createGroup: d,
+    isCreating: l
+  };
+}, Pe = ({ value: r, onChange: a }) => {
+  const [o, t] = f(!1), [u, p] = f(""), d = V(null), { groups: l } = xe(), [c, v] = f([
+    { id: "hero", name: "Hero" },
+    { id: "feature", name: "Feature" },
+    { id: "footer", name: "Footer" },
+    { id: "content", name: "Content" },
+    { id: "testimonial", name: "Testimonial" },
+    { id: "pricing", name: "Pricing" },
+    { id: "login", name: "Login" },
+    { id: "logos", name: "Logos" },
+    { id: "about", name: "About" },
+    { id: "banner", name: "Banner" },
+    { id: "blog", name: "Blog" },
+    { id: "careers", name: "Careers" },
+    { id: "casestudy", name: "Casestudy" },
+    { id: "changelog", name: "Changelog" },
+    { id: "compare", name: "Compare" },
+    { id: "contact", name: "Contact" },
+    { id: "cta", name: "Cta" },
+    { id: "faq", name: "Faq" },
+    { id: "gallery", name: "Gallery" },
+    { id: "integration", name: "Integration" },
+    { id: "list", name: "List" },
+    { id: "navbar", name: "Navbar" },
+    { id: "product", name: "Product" },
+    { id: "signup", name: "Signup" },
+    { id: "stats", name: "Stats" },
+    { id: "team", name: "Team" },
+    { id: "timeline", name: "Timeline" }
+  ]), h = S(
+    () => [
+      ...l,
+      ...c.filter((n) => !l.some((B) => B.id === n.id))
+    ],
+    [l, c]
+  ), g = () => {
+    const n = u.trim();
+    if (!n) return;
+    const B = { id: n, name: n };
+    v((E) => [...E, B]), a(B.id), p(""), t(!1);
+  };
+  w(() => {
+    o && d.current && d.current.focus();
+  }, [o]);
+  const m = (n) => {
+    n.key === "Enter" && (n.preventDefault(), g());
+  };
+  return w(() => {
+    r && !h.some((n) => n.id === r) && a("");
+  }, [r, h, a]), o ? /* @__PURE__ */ i("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ e(
+      L,
+      {
+        ref: d,
+        placeholder: "Enter new group name",
+        value: u,
+        onChange: (n) => p(n.target.value),
+        onKeyDown: m
+      }
+    ),
+    /* @__PURE__ */ i("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ e(b, { variant: "outline", size: "sm", onClick: () => t(!1), children: "Cancel" }),
+      /* @__PURE__ */ e(b, { size: "sm", onClick: g, children: "Create" })
+    ] })
+  ] }) : /* @__PURE__ */ i("div", { className: "flex gap-2", children: [
+    /* @__PURE__ */ i(
+      "select",
+      {
+        className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+        value: r,
+        onChange: (n) => a(n.target.value),
+        children: [
+          /* @__PURE__ */ e("option", { value: "", children: "Select a group" }),
+          l.length > 0 && /* @__PURE__ */ e("optgroup", { label: "Library Groups", children: l.map((n) => /* @__PURE__ */ e("option", { value: n.id, children: n.name }, `lib-${n.id}`)) }),
+          c.length > 0 && /* @__PURE__ */ e("optgroup", { label: "Predefined Groups", children: c.filter((n) => !l.some((B) => B.id === n.id)).map((n) => /* @__PURE__ */ e("option", { value: n.id, children: n.name }, `local-${n.id}`)) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(b, { type: "button", size: "icon", variant: "outline", onClick: () => t(!0), children: /* @__PURE__ */ e(pe, { className: "h-4 w-4" }) })
+  ] });
+}, Le = ({ value: r, onChange: a }) => {
+  const [o, t] = f(!1), u = V(null), p = be(
+    async (c) => {
+      var h;
+      const v = (h = c.target.files) == null ? void 0 : h[0];
+      if (v)
+        try {
+          t(!0);
+          let g = v;
+          v.type.startsWith("image/") && (g = await ve(v));
+          const m = new FileReader();
+          m.onloadend = () => {
+            a(m.result), t(!1);
+          }, m.readAsDataURL(g);
+        } catch (g) {
+          console.error("Error reading file:", g), t(!1), N.error("Failed to process image", {
+            description: g instanceof Error ? g.message : "Unknown error"
+          });
+        }
+    },
+    [a]
+  );
+  return /* @__PURE__ */ i("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ e(L, { type: "file", ref: u, onChange: p, accept: "image/*", className: "hidden" }),
+      /* @__PURE__ */ e(b, { type: "button", variant: "outline", onClick: () => {
+        var c;
+        (c = u.current) == null || c.click();
+      }, disabled: o, className: "w-full", children: o ? /* @__PURE__ */ i("span", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ e("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" }),
+        "Uploading..."
+      ] }) : /* @__PURE__ */ i("span", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ e(he, { className: "h-4 w-4" }),
+        "Select image"
+      ] }) }),
+      r && /* @__PURE__ */ e(b, { type: "button", variant: "outline", size: "icon", onClick: () => {
+        a(""), u.current && (u.current.value = "");
+      }, children: /* @__PURE__ */ e(fe, { className: "h-4 w-4" }) })
+    ] }),
+    r && /* @__PURE__ */ e("div", { className: "aspect-video h-[200px] max-h-[200px] overflow-hidden rounded-md border", children: /* @__PURE__ */ e("img", { src: r, alt: "Preview", className: "h-full w-full object-contain" }) })
+  ] });
+}, qe = (r) => {
+  const { blocks: a, close: o, blockId: t } = r, { getPartailBlocks: u } = le(), p = a.find((s) => s._id === t), d = p == null ? void 0 : p._libBlockId, l = !!d, c = S(() => a.some((s) => s._type === "PartialBlock" || s._type === "GlobalBlock"), [a]), v = S(() => {
+    let s = [];
+    for (const y of a)
+      if (y._type === "PartialBlock" || y._type === "GlobalBlock") {
+        let k = u(y.partialBlockId);
+        y._parent && (k == null ? void 0 : k.length) > 0 && (k = k.map((R) => (ye(R._parent) && ke(R, "_parent", y._parent), R))), s = [...s, ...k];
+      } else
+        s.push(y);
+    return s;
+  }, [a, u]), [h, g] = f(""), [m, n] = f(""), [B, E] = f(""), [x, A] = f(""), [C, W] = f({}), [Q, $] = f(!1), [H, q] = f(l), [X, J] = f(!1), { hasPermission: Z } = ce(), ee = Z(ue.DELETE_LIBRARY_BLOCK), M = z(), te = () => {
+    M([t], { _libBlockId: void 0 }), N.success("Block delinked from library"), o();
+  }, {
+    data: I,
+    isLoading: F,
+    isError: O
+  } = Ce(d);
+  w(() => {
+    O && l && (J(!0), q(!1));
+  }, [O, l]), w(() => {
+    I && !F && (g(I.name || ""), n(I.group || ""), E(I.description || ""), A(I.preview || ""), q(!1));
+  }, [I, F]), w(() => {
+    const s = h.trim().length >= 2, y = m.trim() !== "";
+    $(s && y);
+  }, [h, m]);
+  const re = () => {
+    const s = {};
+    return h.trim() ? h.length < 2 && (s.name = "Name must be at least 2 characters") : s.name = "Name is required", m || (s.group = "Group is required"), W(s), Object.keys(s).length === 0;
+  }, { resetLibrary: ae } = de({ id: "" }), j = Be((s) => {
+    l || M([t], { _libBlockId: s.id }), N.success(`Block ${l ? "updated" : "saved"} successfully`), ae(s.library), o();
+  }), ne = async (s) => {
+    if (s.preventDefault(), !re()) return;
+    const y = v.map((k) => (Ne(k, "_libBlockId") && delete k._libBlockId, k));
+    j.mutate({
+      name: h.trim(),
+      group: m,
+      blocks: y,
+      description: B.trim(),
+      // Only include previewImage if it exists and is a base64 image
+      ...x && x.startsWith("data:") ? { previewImage: x } : {},
+      // Include id if in edit mode
+      ...l ? { id: d } : {}
+    });
+  }, T = j.isPending;
+  return H || F ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ e("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" }) }) : X ? /* @__PURE__ */ i("div", { className: "space-y-4 p-6", children: [
+    /* @__PURE__ */ e("div", { className: "font-medium text-destructive", children: "Block Not Found" }),
+    /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground", children: "This block could not be found on the server. It may have been deleted." }),
+    /* @__PURE__ */ i("div", { className: "flex justify-end gap-2 pt-4", children: [
+      /* @__PURE__ */ e(b, { type: "button", variant: "outline", onClick: o, children: "Cancel" }),
+      /* @__PURE__ */ e(b, { onClick: te, variant: "destructive", children: "Delink Block" })
+    ] })
+  ] }) : /* @__PURE__ */ i("div", { children: [
+    c && /* @__PURE__ */ i("div", { className: "mb-4 flex items-start gap-2 rounded-md border border-destructive/50 bg-destructive/10 p-3 text-destructive", children: [
+      /* @__PURE__ */ e(ge, { className: "mt-0.5 h-5 w-5 flex-shrink-0" }),
+      /* @__PURE__ */ i("div", { children: [
+        /* @__PURE__ */ e("p", { className: "font-medium", children: "Partial Blocks Detected" }),
+        /* @__PURE__ */ e("p", { className: "mt-1 text-xs", children: "This block contains one or more Partial Blocks. Partial blocks will be merged into the library block" })
+      ] })
+    ] }),
+    /* @__PURE__ */ i("form", { onSubmit: ne, className: "space-y-4", children: [
+      /* @__PURE__ */ i("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ e(P, { htmlFor: "name", className: C.name ? "text-destructive" : "", children: "Name" }),
+        /* @__PURE__ */ e(
+          L,
+          {
+            id: "name",
+            placeholder: "Enter block name",
+            value: h,
+            onChange: (s) => g(s.target.value),
+            className: C.name ? "border-destructive" : ""
+          }
+        ),
+        C.name && /* @__PURE__ */ e("p", { className: "text-xs text-destructive", children: C.name })
+      ] }),
+      /* @__PURE__ */ i("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ e(P, { htmlFor: "group", className: C.group ? "text-destructive" : "", children: "Group" }),
+        /* @__PURE__ */ e(Pe, { value: m, onChange: n }),
+        C.group && /* @__PURE__ */ e("p", { className: "text-xs text-destructive", children: C.group })
+      ] }),
+      /* @__PURE__ */ i("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ e(P, { htmlFor: "description", children: "Description (optional)" }),
+        /* @__PURE__ */ e(
+          L,
+          {
+            id: "description",
+            placeholder: "Enter a brief description",
+            className: "resize-none",
+            value: B,
+            onChange: (s) => E(s.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ i("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ e(P, { htmlFor: "previewImage", children: "Preview Image (optional)" }),
+        /* @__PURE__ */ e(Le, { value: x, onChange: A })
+      ] }),
+      /* @__PURE__ */ i("div", { className: "flex justify-end gap-2 pt-2", children: [
+        l && ee && /* @__PURE__ */ e(
+          Ee,
+          {
+            blockId: t,
+            libBlockId: d,
+            blockName: h,
+            className: "mr-auto",
+            close: o
+          }
+        ),
+        /* @__PURE__ */ e(b, { type: "button", variant: "outline", onClick: o, disabled: T, children: "Cancel" }),
+        /* @__PURE__ */ e(b, { type: "submit", disabled: T || !Q, children: T ? "Saving..." : l ? "Update Block" : "Save Block" })
+      ] })
+    ] })
+  ] });
+};
+export {
+  qe as default
+};