@chaibuilder/pages 0.15.21 → 0.15.22

package/dist/ai-panel-content-BXnMSm-N.js

@@ -0,0 +1,614 @@
+import { jsxs as d, Fragment as K, jsx as r } from "react/jsx-runtime";
+import { mergeClasses as ne, useAddBlock as oe, useRemoveBlocks as ae, useSelectedBlock as se, useBlocksStore as ie, useLanguages as le, getBlocksFromHTML as ce } from "@chaibuilder/sdk";
+import { Button as de } from "@chaibuilder/sdk/ui";
+import { find as Q, get as P, map as ue } from "lodash-es";
+import { ChevronsUpDown as me, Plus as pe, Bot as ge, CheckCircle as he, X as fe, Paperclip as be, Square as ye, Send as xe, Loader as Y } from "lucide-react";
+import { useState as N, useRef as D, useEffect as X } from "react";
+import { toast as $ } from "sonner";
+import { L as ve } from "./index-D2g32O6h.js";
+const J = [
+  "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 we(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 Te(t) {
+  if (!t) return "";
+  const e = we(t);
+  return e.length === 0 || !e.includes("<") || !e.includes(">") ? "" : e;
+}
+const Ne = (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}"]`);
+  return l || null;
+}, Se = (t, e) => {
+  var x;
+  const n = Ne(t);
+  if (!n) return { position: 0, currentHTML: "" };
+  n.style.opacity = "0.4";
+  const l = ((x = n == null ? void 0 : n.parentNode) == null ? void 0 : x.childNodes) || [], a = Array.from(l).indexOf(n), p = n.outerHTML, u = new DOMParser().parseFromString(p, "text/html");
+  return u.querySelectorAll("[data-block-id]").forEach((s) => {
+    const v = s.getAttribute("data-block-id"), c = Q(e, { _id: v }), S = c == null ? void 0 : c._type;
+    if (J.includes(S)) {
+      const m = JSON.stringify(c);
+      if (m != null && m.includes("{{") && (m != null && m.includes("}}"))) {
+        const w = Object.keys(c).filter((k) => {
+          const o = c[k], f = typeof o == "string" ? o : JSON.stringify(o);
+          return f.includes("{{") && f.includes("}}");
+        });
+        w.length > 0 && (s.setAttribute("data-binding-key", w[0]), s.innerHTML = P(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 V() {
+  return `You are an expert HTML/CSS developer specializing in Tailwind CSS and shadcn/ui design patterns.
+
+Create pure HTML code only. Make it fully responsive using Tailwind CSS v3 classes exclusively - no custom CSS or classes allowed. Implement container queries (@container) where appropriate for enhanced responsive behavior.
+
+### CRITICAL REQUIREMENTS:
+1. Return ONLY the HTML code without any markdown formatting, code blocks, or explanations
+2. Use ONLY Tailwind CSS v3+ utility classes - absolutely no custom CSS or classes
+3. Use shadcn/ui design system theming and styling patterns (neutral colors, proper spacing, modern aesthetics)
+4. Apply semantic HTML structure with proper accessibility attributes (ARIA labels, alt texts, proper heading hierarchy)
+5. Add 'chai-name' attributes to parent containers only - use concise, descriptive labels that clearly indicate content purpose (e.g., "Navigation", "Hero Section", "Footer", "Product Grid", "Testimonials"). These help identify sections during editing and AI-assisted modifications.
+6. Ensure mobile-first responsive design approach
+7. Implement container queries using @container classes where appropriate for enhanced responsive behavior
+8. Do NOT include <!DOCTYPE>, <html>, <head>, or <body> tags - only the content HTML
+9. Use proper contrast ratios for accessibility
+10. Keep the code clean, well-structured, and semantic
+11. Think about UI randomly. Do not generate the same layout every time.
+12. For accordion style ui, use html details and summary tags. eg: accordions, mobile menu etc.
+13. If UI generated based on provided image, make sure to make it responsive for all screens.
+14. In Tailwindcss, '@container' is not valid class. Use tailwindcss classes only 
+
+### HTML Tags (EXTREMELY IMPORTANT):
+- For mobile menu (<details><summary>) visible only on smaller screen:
+  * Hamburger icon in summary (proper SVG with width/height)
+  * Menu overlay example: 'absolute right-1 mt-2 min-w-64 bg-card border border-border rounded-lg shadow-lg z-50 p-4'
+  * Vertical menu items example: 'block py-2 px-4 hover:bg-accent rounded-md transition-colors'
+  * Proper spacing and touch targets (min 44px height)
+- For accordion, faq style ui, use html details and summary tags.
+- For nested menu, use html details and summary tags with dropdown style menu items.
+- For SVG, always add tailwind class with width and height. eg: 'w-6 h-6'
+- For summary add list-none where not needed, like mobile-menu summary.
+- For input tags, add bg-background if want to make it look like shadcn/ui input.
+
+## THEME RULES (MANDATORY - SHADCN + TAILWIND ONLY) [EXTREMELY IMPORTANT]
+  - MANDATORY: Use ONLY ShadCN semantic tokens + Tailwind utilities for ALL colors.
+  * COLOR TOKENS (Light Mode Reference):
+    - bg-background (#ffffff) + text-foreground (#0a0a0a) - Default page
+    - bg-card (#ffffff) + text-card-foreground (#0a0a0a) - Elevated containers
+    - bg-primary (#171717) + text-primary-foreground (#fafafa) - Primary actions
+    - bg-secondary (#f5f5f5) + text-secondary-foreground (#171717) - Secondary actions
+    - bg-muted (#f5f5f5) + text-muted-foreground (#737373) - Subdued elements
+    - bg-accent (#f5f5f5) + text-accent-foreground (#171717) - Hover/focus states
+    - bg-destructive (#e7000b) + text-destructive-foreground (#ffffff) - Errors/warnings
+    - border-border (#e5e5e5), border-input (#e5e5e5) - Borders
+    - ring-ring (#a1a1a1) - Focus rings
+
+  * CONTRAST RULES (CRITICAL):
+    - ALWAYS pair background with correct foreground token
+    - bg-background → text-foreground (NOT text-card-foreground)
+    - bg-card → text-card-foreground (NOT text-foreground)
+    - bg-primary → text-primary-foreground (NOT text-foreground)
+    - bg-accent → text-accent-foreground
+    - NEVER use same token family for bg and text (e.g., bg-primary + text-primary)
+
+  * HOVER STATE RULES:
+    - Primary buttons: bg-primary hover:bg-primary/90 text-primary-foreground (NO hover text change)
+    - Card hovers: hover:bg-accent hover:text-accent-foreground transition-colors
+    - Link hovers: text-muted-foreground hover:text-foreground transition-colors
+    - Nav links: text-foreground/80 hover:text-foreground transition-colors
+    - NEVER use hover:text-primary-foreground on bg-primary (already same color)
+    - Hover text must be visibly different and contrast well
+
+  * USAGE EXAMPLES:
+    ✓ bg-background text-foreground
+    ✓ bg-card text-card-foreground border-border
+    ✓ bg-primary text-primary-foreground hover:bg-primary/90
+    ✓ bg-accent text-accent-foreground
+    ✓ text-muted-foreground hover:text-foreground transition-colors
+
+  * STRICTLY AVOID:
+    ✗ bg-muted text-muted (low contrast)
+    ✗ bg-primary hover:text-primary-foreground (redundant, no visible change)
+    ✗ Arbitrary colors (bg-blue-500, text-red-600, etc.)
+    ✗ Same token for bg and text (bg-foreground text-foreground)
+
+# MOBILE-FIRST APPROACH:
+- Mobile-first design with proper breakpoints (sm:640px, md:768px, lg:1024px, xl:1280px)
+- Smooth responsive transitions between breakpoints
+- MD breakpoint (768px-1023px) needs special attention:
+  * Reduce grid columns gracefully (lg:4 → md:2 → sm:1)
+  * Adjust padding/spacing for tablet view
+  * Test navigation menu behavior at md breakpoint
+  * Ensure cards don't break layout at md size
+
+IMAGE USAGE RULES:
+- VERY IMPORTANT*: Do not use broken or non available images
+- Use royalty-free or non-copyrighted images from Unsplash or picsum photos
+- Choose images that are relevant to the content context
+- Always include descriptive alt text for accessibility
+- Use appropriate image dimensions (e.g., w=1200 for hero images, w=800 for cards, w=400 for thumbnails)
+
+OUTPUT
+- The final output should be clean, semantic HTML that works across all devices and screen sizes.
+- Return the complete updated HTML (not just modified parts)
+- Focus only on the user's request without adding extra features or elements or sections
+- Do not add any comments in the code
+- Keep the output simple, minimal and precisely targeted to the request
+- NO EXPLANATION - JUST HTML!`.trim();
+}
+function Ee({
+  userInput: t,
+  language: e = "en",
+  currentHtml: n
+}) {
+  const l = ve[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"
+  }
+], Ce = [
+  {
+    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"
+  }
+], Ae = ({ onSelect: t, currentBlock: e, selectedImage: n }) => {
+  const [l, a] = N(!1), p = e ? Ce : ke;
+  return /* @__PURE__ */ d(K, { children: [
+    /* @__PURE__ */ d(
+      "div",
+      {
+        onClick: () => a(!l),
+        className: ne(
+          "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(me, { 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: p.map((y, 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"} ${y.label}`, y.prompt), a(!1);
+        },
+        children: /* @__PURE__ */ d("span", { className: "truncate whitespace-nowrap", children: [
+          e ? null : /* @__PURE__ */ r("span", { className: "font-thin text-muted-foreground", children: "Add New" }),
+          " ",
+          y.label
+        ] })
+      },
+      u
+    )) })
+  ] });
+}, Me = ({ 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__ */ d("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(Y, { 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__ */ d("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(Y, { 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(Me, { 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__ */ d("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(he, { className: "h-3 w-3" }),
+      " Completed"
+    ] })
+  }
+), Le = ({
+  input: t,
+  setInput: e,
+  onSend: n,
+  onStop: l,
+  isLoading: a,
+  disabled: p,
+  currentBlock: y
+}) => {
+  const u = D(null), x = D(null), [s, v] = N(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");
+  }, m = (o) => {
+    var T;
+    const f = (T = o.target.files) == null ? void 0 : T[0];
+    if (f && f.type.startsWith("image/")) {
+      const C = new FileReader();
+      C.onload = (L) => {
+        var i, g;
+        const R = (i = L.target) == null ? void 0 : i.result;
+        v(R), e("Generate UI based on given image "), (g = u.current) == null || g.focus();
+      }, C.readAsDataURL(f);
+    }
+    o.target.value = "";
+  }, w = () => {
+    var o;
+    (o = x.current) == null || o.click();
+  }, k = () => {
+    n(t == null ? void 0 : t.trim(), void 0, s || void 0), v(null);
+  };
+  return X(() => {
+    S();
+  }, [t]), /* @__PURE__ */ d("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(
+          Ae,
+          {
+            currentBlock: y,
+            selectedImage: s,
+            onSelect: (o, f) => {
+              var T;
+              e(f + " "), (T = u.current) == null || T.focus();
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ d("div", { className: "rounded-lg border border-gray-200 bg-white", children: [
+      s && /* @__PURE__ */ d("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(fe, { 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__ */ d("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(be, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ r(
+          "input",
+          {
+            disabled: a,
+            ref: x,
+            type: "file",
+            accept: "image/*",
+            onChange: m,
+            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() || p,
+            className: `rounded-md bg-blue-500 p-1.5 text-white transition-colors hover:bg-blue-600 ${!t.trim() || p ? "cursor-not-allowed opacity-50" : ""}`,
+            children: /* @__PURE__ */ r(xe, { size: 16 })
+          }
+        )
+      ] })
+    ] })
+  ] });
+}, je = () => {
+  const [t, e] = N(""), [n, l] = N([{ role: "system", content: V(), id: "system" }]), [a, p] = N(!1), [y, u] = N(null), x = D(null), { addPredefinedBlock: s } = oe(), v = ae(), c = se(), [S, m] = N(null), [w] = ie(), { selectedLang: k, fallbackLang: o } = le(), f = k || o, T = () => {
+    var i;
+    (i = x.current) == null || i.scrollIntoView({ behavior: "smooth" });
+  };
+  X(() => {
+    T();
+  }, [n, a]);
+  const C = () => {
+    y && (y.abort(), u(null)), p(!1), e(""), m(null), l((i) => {
+      const g = i[i.length - 1];
+      return g && g.role === "assistant" && !g.content.trim() ? i.slice(0, -1) : i;
+    }), $.info("Generation stopped");
+  }, L = async (i, g, F) => {
+    var q;
+    if (!i || a) return;
+    const b = c;
+    m(c);
+    const { position: W, currentHTML: B } = Se((c == null ? void 0 : c._id) || "", w);
+    if (c && !B) {
+      $.error("Something went wrong. Please try again.");
+      return;
+    }
+    const j = {
+      id: Date.now().toString(),
+      role: "user",
+      content: Ee({
+        userInput: g || i,
+        language: f,
+        currentHtml: c ? B : ""
+      }),
+      userMessage: i
+    }, _ = { id: Date.now().toString(), role: "assistant", content: "" };
+    l((E) => [...E, j, _]), p(!0);
+    const G = new AbortController();
+    u(G);
+    try {
+      const E = {
+        messages: [...n, j].map((h) => ({
+          role: h.role,
+          content: h.content
+        }))
+      };
+      F && (E.image = F);
+      const A = await fetch("/chai/api/chat", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(E),
+        signal: G.signal
+      });
+      if (!A.ok)
+        throw new Error("Failed to get AI response");
+      const M = (q = A.body) == null ? void 0 : q.getReader(), Z = new TextDecoder();
+      let U = "";
+      if (!M) throw new Error("Response body is not readable");
+      for (; ; ) {
+        const { done: h, value: I } = await M.read();
+        if (h) break;
+        const O = Z.decode(I, { stream: !0 });
+        U += O, l(
+          (z) => z.map((H) => H.id === _.id ? { ...H, content: U } : H)
+        );
+      }
+      const ee = Te(U), te = ce(ee), re = ue(te, (h) => {
+        const I = P(h, "styles_attrs.data-block-type");
+        if (I && !J.includes(I)) {
+          const O = P(h, "styles_attrs.data-block-id");
+          return { ...Q(w, { _id: O }), _parent: h == null ? void 0 : h._parent };
+        }
+        return h;
+      });
+      b != null && b._id && v([b == null ? void 0 : b._id]), s([...re], b == null ? void 0 : b._parent, b ? W : -1);
+    } catch (E) {
+      if (E.name !== "AbortError") {
+        const A = {
+          id: (Date.now() + 1).toString(),
+          role: "assistant",
+          content: "Sorry, I encountered an error. Please try again."
+        };
+        l((M) => [...M, A]);
+      }
+    } finally {
+      e(""), p(!1), m(null), u(null);
+    }
+  }, R = () => {
+    l([{ role: "system", content: V(), id: "system" }]), e(""), m(null), u(null), p(!1);
+  };
+  return /* @__PURE__ */ d(K, { 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__ */ d("div", { className: "flex h-full w-full flex-col bg-white", children: [
+      /* @__PURE__ */ d("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) > 1 && /* @__PURE__ */ r(de, { variant: "outline", size: "icon", onClick: R, className: "h-6 w-6", children: /* @__PURE__ */ r(pe, {}) })
+      ] }),
+      /* @__PURE__ */ d("div", { className: "flex-1 space-y-3 overflow-y-auto py-4", children: [
+        n.length === 1 && /* @__PURE__ */ r("div", { className: "flex-1 space-y-3 overflow-y-auto py-4", children: /* @__PURE__ */ d("div", { className: "mx-auto mt-8 text-center text-gray-500", children: [
+          /* @__PURE__ */ r(ge, { 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, g) => i.role !== "system" && /* @__PURE__ */ r(
+            Ie,
+            {
+              message: i,
+              isUser: i.role === "user",
+              isLoading: i.role === "assistant" && a && g === n.length - 1
+            },
+            g
+          )
+        ),
+        /* @__PURE__ */ r("div", { ref: x })
+      ] }),
+      /* @__PURE__ */ r("div", { className: "border-gray-200 pb-2", children: /* @__PURE__ */ r(
+        Le,
+        {
+          input: t,
+          setInput: e,
+          onSend: L,
+          onStop: C,
+          isLoading: a,
+          currentBlock: c || S,
+          disabled: (t == null ? void 0 : t.length) === 0
+        }
+      ) })
+    ] })
+  ] });
+};
+export {
+  je as default
+};