@chaibuilder/pages 0.15.24 → 0.16.1

package/dist/ai-panel-content-qmOJKjkE.js

@@ -1,524 +0,0 @@
-import { jsxs as m, Fragment as V, jsx as r } from "react/jsx-runtime";
-import { mergeClasses as ae, useAddBlock as oe, useRemoveBlocks as se, useSelectedBlock as le, useBlocksStore as ie, useLanguages as ce, getBlocksFromHTML as de } from "@chaibuilder/sdk";
-import { Button as me } from "@chaibuilder/sdk/ui";
-import { find as J, get as B, map as ue } from "lodash-es";
-import { ChevronsUpDown as pe, Plus as he, Bot as fe, CheckCircle as ge, X as be, Paperclip as xe, Square as ye, Send as ve, Loader as Q } from "lucide-react";
-import { useState as C, useRef as O, useEffect as W } from "react";
-import { toast as K } from "sonner";
-import { L as we } from "./index-NSqs69Op.js";
-const X = [
-  "Box",
-  "Button",
-  "Heading",
-  "Paragraph",
-  "Text",
-  "Span",
-  "Link",
-  "Image",
-  "Video",
-  "Icon",
-  "List",
-  "ListItem",
-  "Row",
-  "Column",
-  "Form",
-  "Input",
-  "FormButton",
-  "Checkbox",
-  "Radio",
-  "Select",
-  "TextArea",
-  "Label",
-  "RichText",
-  "Divider",
-  "EmptyBox",
-  "LineBreak",
-  "Table",
-  "EmptySlot"
-];
-function Ne(t) {
-  if (!t) return "";
-  let e = t.trim();
-  return e = e.replace(/^```html\n?/i, ""), e = e.replace(/^```\n?/, ""), e = e.replace(/\n?```$/, ""), e = e.trim(), e;
-}
-function Ce(t) {
-  if (!t) return "";
-  const e = Ne(t);
-  return e.length === 0 || !e.includes("<") || !e.includes(">") ? "" : e;
-}
-const Y = (t) => {
-  const e = document.getElementById("canvas-iframe");
-  if (!e) return null;
-  const n = e == null ? void 0 : e.contentDocument;
-  if (!n) return null;
-  const l = n.querySelector(`[data-block-id="${t}"]`);
-  if (!l) return null;
-  if (t === "canvas") {
-    const a = n.createElement("div");
-    return a.style.height = "100vh", l.appendChild(a), a;
-  }
-  return l;
-}, Se = (t, e) => {
-  var y;
-  const n = Y(t);
-  if (!n) return { position: 0, currentHTML: "" };
-  n.style.opacity = "0.9";
-  const l = ((y = n == null ? void 0 : n.parentNode) == null ? void 0 : y.childNodes) || [], a = Array.from(l).indexOf(n), h = n.outerHTML, u = new DOMParser().parseFromString(h, "text/html");
-  return u.querySelectorAll("[data-block-id]").forEach((s) => {
-    const v = s.getAttribute("data-block-id"), c = J(e, { _id: v }), S = c == null ? void 0 : c._type;
-    if (X.includes(S)) {
-      const p = JSON.stringify(c);
-      if (p != null && p.includes("{{") && (p != null && p.includes("}}"))) {
-        const w = Object.keys(c).filter((k) => {
-          const o = c[k], b = typeof o == "string" ? o : JSON.stringify(o);
-          return b.includes("{{") && b.includes("}}");
-        });
-        w.length > 0 && (s.setAttribute("data-binding-key", w[0]), s.innerHTML = B(c, w[0], ""));
-      }
-      s.removeAttribute("data-block-type"), s.removeAttribute("data-style-prop"), s.removeAttribute("data-block-parent"), s.removeAttribute("data-style-id"), s.removeAttribute("data-block-id"), s.removeAttribute("data-block-index"), s.removeAttribute("data-highlighted");
-    } else
-      s.innerHTML = S;
-  }), { position: a, currentHTML: u.body.innerHTML };
-};
-function Te({
-  userInput: t,
-  language: e = "en",
-  currentHtml: n
-}) {
-  const l = we[e] || "English";
-  return n && n.trim().length > 0 ? `
-MODE: EDIT
-CURRENT HTML:
-${n}
-
-USER REQUEST: ${t}
-
-EDIT MODE INSTRUCTIONS:
-- Modify the existing HTML based on the user's request
-- IMPORTANT: If asked for updating content, do not change layout just update same HTML with updated content
-- CRITICAL: THINGS TO PREVENT
-  - Preserve ALL data binding placeholders in format '{{dataBindingId}}' - never remove or modify these dynamic content markers
-  - Preserve html tag with attributes data-block-type="PartialBlock" or data-block-type="CustomBlock" - never remove or modify these tag
-- Preserve the overall structure unless specifically asked to change it
-- Update content, styling, or layout as requested
-- Maintain responsive design and accessibility
-- Keep using shadcn/ui theme classes and Tailwind CSS
-- Ensure all chai-name attributes remain descriptive and accurate
-- Generate content in specified language: ${l}
-- Apply the same design principles from the system prompt
-- Make sure the edited HTML is clean and semantic`.trim() : `
-USER REQUEST: ${t}
-
-CREATE MODE INSTRUCTIONS:
-- Generate complete HTML structure based on user request
-- Use creative, modern, and responsive design
-- Apply Tailwind CSS v3+ classes exclusively
-- Follow shadcn/ui design patterns and theming
-- Include proper accessibility attributes
-- Add chai-name attributes to all wrapper/container elements
-- Use semantic HTML structure
-- Generate contextually appropriate content in ${l}
-- Make each element unique and meaningful
-- Create realistic, professional content that fits the request
-- Avoid generic placeholder text
-- Use strategic image placement where appropriate
-- Ensure mobile-first responsive design
-- Apply proper hover and focus states
-
-DESIGN REQUIREMENTS:
-- Choose creative layout patterns that are visually striking
-- Apply modern spacing and typography
-- Use proper color contrast with shadcn/ui theme classes
-- Make it responsive across all device sizes
-- Include interactive elements with proper states
-- Ensure accessibility compliance`.trim();
-}
-const ke = [
-  {
-    label: "Navbar",
-    prompt: "Create stunning, fully responsive navbar with"
-  },
-  {
-    label: "Hero section",
-    prompt: "Create visually compelling hero section with"
-  },
-  {
-    label: "Features grid",
-    prompt: "Create comprehensive features section with"
-  },
-  {
-    label: "Contact form",
-    prompt: "Create professional contact form with"
-  },
-  {
-    label: "Testimonials",
-    prompt: "Create engaging testimonials section with"
-  },
-  {
-    label: "Pricing table",
-    prompt: "Create modern pricing table with"
-  },
-  {
-    label: "FAQ section",
-    prompt: "Create informative FAQ section with"
-  },
-  {
-    label: "Footer",
-    prompt: "Create comprehensive footer section with"
-  },
-  {
-    label: "Call to action",
-    prompt: "Create compelling call to action section with"
-  },
-  {
-    label: "Team section",
-    prompt: "Create professional team section with"
-  },
-  {
-    label: "Blog grid",
-    prompt: "Create attractive blog grid section with"
-  },
-  {
-    label: "Stats section",
-    prompt: "Create impactful statistics section with"
-  }
-], Ee = [
-  {
-    label: "Update styles",
-    prompt: "Update styles"
-  },
-  {
-    label: "Update content",
-    prompt: "Update text content"
-  },
-  {
-    label: "Update layout",
-    prompt: "Update layout"
-  },
-  {
-    label: "Improve content",
-    prompt: "Improve text content grammar and spelling"
-  },
-  {
-    label: "Make content longer",
-    prompt: "Make text content longer"
-  },
-  {
-    label: "Make content shorter",
-    prompt: "Make text content shorter"
-  },
-  {
-    label: "Fix grammar",
-    prompt: "Fix grammar of the text content"
-  }
-], Me = ({ onSelect: t, currentBlock: e, selectedImage: n }) => {
-  const [l, a] = C(!1), h = e ? Ee : ke;
-  return /* @__PURE__ */ m(V, { children: [
-    /* @__PURE__ */ m(
-      "div",
-      {
-        onClick: () => a(!l),
-        className: ae(
-          "flex h-6 w-full cursor-pointer items-center justify-between gap-2 px-2",
-          e ? "bg-green-50/80 text-green-500 hover:bg-green-50" : "text-primary hover:bg-primary/5"
-        ),
-        children: [
-          /* @__PURE__ */ r("span", { className: "truncate whitespace-nowrap text-xs font-medium leading-none", children: n ? "Image actions" : e ? "Edit : " + (e._name || e._type) : "Quick Prompts" }),
-          /* @__PURE__ */ r(pe, { className: "h-3 w-3" })
-        ]
-      }
-    ),
-    l && /* @__PURE__ */ r("div", { className: "max-h-60 w-full overflow-y-auto bg-white px-1 pb-1", children: h.map((x, u) => /* @__PURE__ */ r(
-      "div",
-      {
-        className: "flex cursor-pointer items-center gap-x-1 p-1 text-xs leading-none hover:text-blue-700",
-        onClick: () => {
-          t(`${n || e ? "Update" : "Add New"} ${x.label}`, x.prompt), a(!1);
-        },
-        children: /* @__PURE__ */ m("span", { className: "truncate whitespace-nowrap", children: [
-          e ? null : /* @__PURE__ */ r("span", { className: "font-thin text-muted-foreground", children: "Add New" }),
-          " ",
-          x.label
-        ] })
-      },
-      u
-    )) })
-  ] });
-}, Ae = ({ message: t }) => {
-  var e;
-  return ((e = t == null ? void 0 : t.content) == null ? void 0 : e.length) < 100 ? /* @__PURE__ */ r("div", { className: "relative z-50 mb-3 flex w-full flex-col gap-2 overflow-hidden", children: /* @__PURE__ */ m("div", { className: "flex w-max items-center justify-center gap-1 rounded-md p-1 px-2 text-xs font-medium text-blue-500", children: [
-    /* @__PURE__ */ r(Q, { className: "h-3 w-3 animate-spin" }),
-    " Processing"
-  ] }) }) : /* @__PURE__ */ r("div", { className: "relative z-50 mb-3 flex w-full flex-col gap-2 overflow-hidden", children: /* @__PURE__ */ m("div", { className: "flex w-max items-center justify-center gap-1 rounded-md p-1 px-2 text-xs font-medium text-blue-500", children: [
-    /* @__PURE__ */ r(Q, { className: "h-3 w-3 animate-spin" }),
-    " Generating"
-  ] }) });
-}, Ie = ({ message: t, isUser: e, isLoading: n }) => e ? /* @__PURE__ */ r("div", { className: "relative mb-3 flex w-full justify-end overflow-hidden", children: /* @__PURE__ */ r(
-  "div",
-  {
-    className: "flex max-w-[95%] flex-row-reverse rounded-lg rounded-br-sm bg-blue-500 px-2 py-1.5 text-xs text-white",
-    children: t.userMessage
-  }
-) }) : n ? /* @__PURE__ */ r(Ae, { message: t }) : /* @__PURE__ */ r(
-  "div",
-  {
-    className: `relative mb-3 flex w-full overflow-hidden ${e ? "justify-end" : n ? "max-h-48 min-h-24 justify-start" : "max-h-16"}`,
-    children: /* @__PURE__ */ m("div", { className: "flex w-max items-center justify-center gap-1 rounded-md p-1 px-2 text-xs font-medium text-green-500", children: [
-      /* @__PURE__ */ r(ge, { className: "h-3 w-3" }),
-      " Completed"
-    ] })
-  }
-), Re = ({
-  input: t,
-  setInput: e,
-  onSend: n,
-  onStop: l,
-  isLoading: a,
-  disabled: h,
-  currentBlock: x
-}) => {
-  const u = O(null), y = O(null), [s, v] = C(null), c = (o) => {
-    o.key === "Enter" && !o.shiftKey && (o.preventDefault(), t.trim() && !a && (n(t == null ? void 0 : t.trim(), void 0, s || void 0), v(null)));
-  }, S = () => {
-    const o = u.current;
-    o && (o.style.height = "auto", o.style.height = Math.min(o.scrollHeight, 120) + "px");
-  }, p = (o) => {
-    var N;
-    const b = (N = o.target.files) == null ? void 0 : N[0];
-    if (b && b.type.startsWith("image/")) {
-      const M = new FileReader();
-      M.onload = (U) => {
-        var i, f;
-        const H = (i = U.target) == null ? void 0 : i.result;
-        v(H), e("Generate UI based on given image "), (f = u.current) == null || f.focus();
-      }, M.readAsDataURL(b);
-    }
-    o.target.value = "";
-  }, w = () => {
-    var o;
-    (o = y.current) == null || o.click();
-  }, k = () => {
-    n(t == null ? void 0 : t.trim(), void 0, s || void 0), v(null);
-  };
-  return W(() => {
-    S();
-  }, [t]), /* @__PURE__ */ m("div", { children: [
-    !s && /* @__PURE__ */ r(
-      "div",
-      {
-        className: `mx-auto flex w-full max-w-[95%] flex-col items-center overflow-hidden rounded-t-md border-x border-t border-gray-200 bg-gray-100 ${a ? "pointer-events-none opacity-50" : ""}`,
-        children: /* @__PURE__ */ r(
-          Me,
-          {
-            currentBlock: x,
-            selectedImage: s,
-            onSelect: (o, b) => {
-              var N;
-              e(b + " "), (N = u.current) == null || N.focus();
-            }
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ m("div", { className: "rounded-lg border border-gray-200 bg-white", children: [
-      s && /* @__PURE__ */ m("div", { className: "relative flex w-max items-center justify-start gap-x-2 px-2 pt-2", children: [
-        /* @__PURE__ */ r("img", { src: s, alt: "Selected attachment", className: "max-h-16 max-w-full rounded-md border" }),
-        /* @__PURE__ */ r(
-          "button",
-          {
-            onClick: () => v(null),
-            className: "absolute -right-0 -top-0 flex items-center rounded-full bg-red-400 p-1 text-xs text-white hover:bg-red-500",
-            title: "Remove image",
-            children: /* @__PURE__ */ r(be, { className: "h-2 w-2" })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ r(
-        "textarea",
-        {
-          ref: u,
-          value: t,
-          onChange: (o) => e(o.target.value),
-          onKeyDown: c,
-          placeholder: "Ask me anything...",
-          className: `max-h-[200px] min-h-[60px] w-full resize-none rounded-lg border-none px-3 py-2 text-sm outline-none ${a ? "cursor-not-allowed opacity-50" : ""}`,
-          rows: 3,
-          disabled: a
-        }
-      ),
-      /* @__PURE__ */ m("div", { className: "flex items-center justify-between p-2", children: [
-        /* @__PURE__ */ r(
-          "button",
-          {
-            disabled: a,
-            onClick: w,
-            className: `p-1.5 text-gray-400 hover:text-gray-500 ${a ? "cursor-not-allowed opacity-50" : ""}`,
-            title: "Attach Image",
-            children: /* @__PURE__ */ r(xe, { size: 16 })
-          }
-        ),
-        /* @__PURE__ */ r(
-          "input",
-          {
-            disabled: a,
-            ref: y,
-            type: "file",
-            accept: "image/*",
-            onChange: p,
-            className: "hidden"
-          }
-        ),
-        a ? /* @__PURE__ */ r(
-          "button",
-          {
-            onClick: l,
-            className: "z-50 rounded-md bg-red-500 p-1.5 text-white transition-colors hover:bg-red-600",
-            title: "Stop generation",
-            children: /* @__PURE__ */ r(ye, { size: 16 })
-          }
-        ) : /* @__PURE__ */ r(
-          "button",
-          {
-            onClick: k,
-            disabled: !t.trim() || h,
-            className: `rounded-md bg-blue-500 p-1.5 text-white transition-colors hover:bg-blue-600 ${!t.trim() || h ? "cursor-not-allowed opacity-50" : ""}`,
-            children: /* @__PURE__ */ r(ve, { size: 16 })
-          }
-        )
-      ] })
-    ] })
-  ] });
-}, je = () => {
-  const [t, e] = C(""), [n, l] = C([]), [a, h] = C(!1), [x, u] = C(null), y = O(null), { addPredefinedBlock: s } = oe(), v = se(), c = le(), [S, p] = C(null), [w] = ie(), { selectedLang: k, fallbackLang: o } = ce(), b = k || o, N = () => {
-    var i;
-    (i = y.current) == null || i.scrollIntoView({ behavior: "smooth" });
-  };
-  W(() => {
-    N();
-  }, [n, a]);
-  const M = () => {
-    x && (x.abort(), u(null)), h(!1), e(""), p(null), l((i) => {
-      const f = i[i.length - 1];
-      return f && f.role === "assistant" && !f.content.trim() ? i.slice(0, -1) : i;
-    }), K.info("Generation stopped");
-  }, U = async (i, f, _) => {
-    var q;
-    if (!i || a) return;
-    const d = c;
-    p(c);
-    const { position: Z, currentHTML: j } = Se((c == null ? void 0 : c._id) || "", w);
-    if (c && !j) {
-      K.error("Something went wrong. Please try again.");
-      return;
-    }
-    const F = {
-      id: Date.now().toString(),
-      role: "user",
-      content: Te({
-        userInput: f || i,
-        language: b,
-        currentHtml: c ? j : ""
-      }),
-      userMessage: i
-    }, $ = { id: Date.now().toString(), role: "assistant", content: "" };
-    l((T) => [...T, F, $]), h(!0);
-    const z = new AbortController();
-    u(z);
-    try {
-      const T = {
-        messages: [...n, F].map((g) => ({
-          role: g.role,
-          content: g.content
-        }))
-      };
-      _ && (T.image = _);
-      const A = await fetch("/chai/api/chat", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(T),
-        signal: z.signal
-      });
-      if (!A.ok)
-        throw new Error("Failed to get AI response");
-      const I = (q = A.body) == null ? void 0 : q.getReader(), ee = new TextDecoder();
-      let R = "";
-      if (!I) throw new Error("Response body is not readable");
-      const E = Y(d ? d == null ? void 0 : d._id : "canvas");
-      for (; ; ) {
-        const { done: g, value: L } = await I.read();
-        if (g) {
-          E && !d && E.remove();
-          break;
-        }
-        const P = ee.decode(L, { stream: !0 });
-        R += P, E && (E.innerHTML = R, E.scrollIntoView({ behavior: "smooth", block: "start" })), l(
-          (G) => G.map((D) => D.id === $.id ? { ...D, content: R } : D)
-        );
-      }
-      const te = Ce(R), re = de(te), ne = ue(re, (g) => {
-        const L = B(g, "styles_attrs.data-block-type");
-        if (L && !X.includes(L)) {
-          const P = B(g, "styles_attrs.data-block-id");
-          return { ...J(w, { _id: P }), _parent: g == null ? void 0 : g._parent };
-        }
-        return g;
-      });
-      d != null && d._id && v([d == null ? void 0 : d._id]), s([...ne], d == null ? void 0 : d._parent, d ? Z : -1);
-    } catch (T) {
-      if (T.name !== "AbortError") {
-        const A = {
-          id: (Date.now() + 1).toString(),
-          role: "assistant",
-          content: "Sorry, I encountered an error. Please try again."
-        };
-        l((I) => [...I, A]);
-      }
-    } finally {
-      e(""), h(!1), p(null), u(null);
-    }
-  }, H = () => {
-    l([]), e(""), p(null), u(null), h(!1);
-  };
-  return /* @__PURE__ */ m(V, { children: [
-    a && /* @__PURE__ */ r("div", { className: "fixed inset-0 left-0 top-0 z-40 flex h-screen w-screen flex-col items-center justify-center bg-transparent" }),
-    /* @__PURE__ */ m("div", { className: "flex h-full w-full flex-col bg-white", children: [
-      /* @__PURE__ */ m("div", { className: "flex w-full items-center justify-between", children: [
-        /* @__PURE__ */ r("p", { className: "text-xs text-gray-500", children: "Your conversation will not be saved" }),
-        (n == null ? void 0 : n.length) > 0 && /* @__PURE__ */ r(me, { variant: "outline", size: "icon", onClick: H, className: "h-6 w-6", children: /* @__PURE__ */ r(he, {}) })
-      ] }),
-      /* @__PURE__ */ m("div", { className: "flex-1 space-y-3 overflow-y-auto py-4", children: [
-        n.length === 0 && /* @__PURE__ */ r("div", { className: "flex-1 space-y-3 overflow-y-auto py-4", children: /* @__PURE__ */ m("div", { className: "mx-auto mt-8 text-center text-gray-500", children: [
-          /* @__PURE__ */ r(fe, { size: 48, className: "mx-auto mb-4 text-gray-300" }),
-          /* @__PURE__ */ r("p", { className: "mx-auto max-w-[75%] text-sm", children: "Start a conversation with the AI assistant to generate and update your sections" })
-        ] }) }),
-        n.map(
-          (i, f) => i.role !== "system" && /* @__PURE__ */ r(
-            Ie,
-            {
-              message: i,
-              isUser: i.role === "user",
-              isLoading: i.role === "assistant" && a && f === n.length - 1
-            },
-            f
-          )
-        ),
-        /* @__PURE__ */ r("div", { ref: y })
-      ] }),
-      /* @__PURE__ */ r("div", { className: "border-gray-200 pb-2", children: /* @__PURE__ */ r(
-        Re,
-        {
-          input: t,
-          setInput: e,
-          onSend: U,
-          onStop: M,
-          isLoading: a,
-          currentBlock: c || S,
-          disabled: (t == null ? void 0 : t.length) === 0
-        }
-      ) })
-    ] })
-  ] });
-};
-export {
-  je as default
-};