@chaibuilder/sdk 1.2.71 → 1.2.73

package/dist/{index-ymKNEhC1.js → index-pjWMG6LC.js}

@@ -18,7 +18,7 @@ import { S as SLOT_KEY, I as I18N_KEY, a as STYLES_KEY, R as ROOT_TEMP_KEY, O as
 import { useHotkeys } from "react-hotkeys-hook";
 import { flip as flip$2 } from "@floating-ui/dom";
 import { useFloating as useFloating$1, shift, getOverflowAncestors, autoUpdate, size, offset, limitShift, flip as flip$3, inline, arrow } from "@floating-ui/react-dom";
-import { ArrowUpIcon, PlusIcon, CopyIcon as CopyIcon$1, TrashIcon, DragHandleDots2Icon, BoxModelIcon, BoxIcon, DragHandleHorizontalIcon, ViewHorizontalIcon, BorderAllIcon, BorderTopIcon, TableIcon, DropdownMenuIcon, RadiobuttonIcon, InputIcon, ButtonIcon, CheckboxIcon, GroupIcon, SpaceBetweenVerticallyIcon, ColumnsIcon, RowsIcon, TextIcon, SketchLogoIcon, DividerHorizontalIcon, CodeIcon, CursorTextIcon, VideoIcon, Link1Icon, HeadingIcon, ImageIcon, CardStackPlusIcon, CardStackIcon, ScissorsIcon, TriangleRightIcon, Cross2Icon, EyeOpenIcon, EyeClosedIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, FontItalicIcon, UnderlineIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross1Icon, InfoCircledIcon, MinusIcon, TriangleDownIcon, RowSpacingIcon, CrossCircledIcon, CaretDownIcon, CaretSortIcon, CheckIcon, CaretRightIcon, MixerHorizontalIcon, ResetIcon, SunIcon, DotsVerticalIcon, MobileIcon, LaptopIcon, DesktopIcon, EraserIcon, ZoomInIcon } from "@radix-ui/react-icons";
+import { ArrowUpIcon, PlusIcon, CopyIcon as CopyIcon$1, TrashIcon, DragHandleDots2Icon, BoxModelIcon, BoxIcon, DragHandleHorizontalIcon, ViewHorizontalIcon, BorderAllIcon, BorderTopIcon, TableIcon, DropdownMenuIcon, RadiobuttonIcon, InputIcon, ButtonIcon, CheckboxIcon, GroupIcon, SpaceBetweenVerticallyIcon, ColumnsIcon, RowsIcon, TextIcon, SketchLogoIcon, DividerHorizontalIcon, CodeIcon, CursorTextIcon, VideoIcon, Link1Icon, HeadingIcon, ImageIcon, CardStackPlusIcon, CardStackIcon, ScissorsIcon, TriangleRightIcon, Cross2Icon, EyeOpenIcon, EyeClosedIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, FontItalicIcon, UnderlineIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross1Icon, InfoCircledIcon, MinusIcon, TriangleDownIcon, RowSpacingIcon, CrossCircledIcon, CaretDownIcon, CaretRightIcon, CheckIcon, ResetIcon, SunIcon, DotsVerticalIcon, MobileIcon, LaptopIcon, DesktopIcon, EraserIcon, ZoomInIcon, MixerHorizontalIcon, LightningBoltIcon } from "@radix-ui/react-icons";
 import { useFeature, FlagsProvider } from "flagged";
 import typography$1 from "@tailwindcss/typography";
 import forms from "@tailwindcss/forms";
@@ -32,7 +32,7 @@ import { Resizable } from "re-resizable";
 import validator from "@rjsf/validator-ajv8";
 import Form from "@rjsf/core";
 import { Tree } from "react-arborist";
-import { DatabaseIcon, PlusIcon as PlusIcon$1, EditIcon, TrashIcon as TrashIcon$1, Check, Loader as Loader$1, SparklesIcon, SmileIcon, ShuffleIcon, Edit2, X, ChevronDown, Layers, PaintBucketIcon } from "lucide-react";
+import { DatabaseIcon, PlusIcon as PlusIcon$1, EditIcon, TrashIcon as TrashIcon$1, Check, Loader as Loader$1, SparklesIcon, SmileIcon, ShuffleIcon, ChevronDown, Edit2, X, Layers, PaintBucketIcon } from "lucide-react";
 import { parse as parse$1, stringify as stringify$3 } from "himalaya";
 import IconPicker, { IconPickerItem } from "react-icons-picker";
 import Autosuggest from "react-autosuggest";
@@ -41,7 +41,6 @@ import clsx from "clsx";
 import i18n from "i18next";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { motion } from "framer-motion";
-import { isEmpty as isEmpty$1, each as each$1 } from "lodash";
 const canAcceptChildBlock = (r, n) => {
   if (!r)
     return !0;
@@ -3576,7 +3575,7 @@ let ErrorBoundary$2 = class extends React__default.Component {
     ] }) : this.props.children;
   }
 };
-const CodeEditor$1 = React__default.lazy(() => import("./CodeEditor-aLPRKFR0.js")), CanvasArea = () => {
+const CodeEditor$1 = React__default.lazy(() => import("./CodeEditor-YW3qlWKm.js")), CanvasArea = () => {
   const [r] = useCodeEditor();
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-full w-full flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex h-full flex-col overflow-hidden bg-gray-100/40 px-2", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-full" }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary$2, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(StaticCanvas$1, {}) }) }),
@@ -3991,10 +3990,17 @@ const Node = memo(({ node: r, style: n, dragHandle: o }) => {
     const O = k.getBoundingClientRect(), T = c.getBoundingClientRect();
     O.top >= T.top && O.left >= T.left && O.bottom <= T.bottom && O.right <= T.right || (j.documentElement.scrollTop = k.offsetTop - T.top);
   };
-  return p === ROOT_TEMP_KEY ? /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { onClick: () => i(ROOT_TEMP_KEY), className: "mb-10 w-full rounded bg-gray-100 p-1 hover:bg-gray-200", children: [
-    "+ ",
-    l("add_block")
-  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(BlockContextMenu, { id: p, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  return p === ROOT_TEMP_KEY ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "button",
+    {
+      onClick: () => i(ROOT_TEMP_KEY),
+      className: "mb-10 mt-5 w-full rounded bg-gray-100 p-1 hover:bg-gray-200",
+      children: [
+        "+ ",
+        l("add_block")
+      ]
+    }
+  ) : /* @__PURE__ */ jsxRuntimeExports.jsx(BlockContextMenu, { id: p, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
       onClick: A,
@@ -4013,7 +4019,7 @@ const Node = memo(({ node: r, style: n, dragHandle: o }) => {
         R.preventDefault(), C(p, "no");
       },
       className: cn(
-        "group flex !h-fit w-full items-center justify-between space-x-px !rounded py-px outline-none",
+        "group flex !h-full w-full items-center justify-between space-x-px !rounded py-px outline-none",
         g ? "bg-blue-500 text-white" : "text-gray-600 hover:bg-gray-200 dark:hover:bg-gray-800",
         h && canAcceptChildBlock(m._type, "Icon") ? "bg-green-200" : "",
         b && "opacity-20"
@@ -4052,12 +4058,12 @@ const Node = memo(({ node: r, style: n, dragHandle: o }) => {
               TooltipTrigger,
               {
                 onClick: () => i(p),
-                className: "cursor-pointer rounded bg-transparent hover:bg-white hover:text-blue-500",
+                className: "cursor-pointer rounded bg-transparent hover:bg-white hover:text-black",
                 asChild: !0,
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon$1, { size: "14" })
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon$1, { size: "18" })
               }
             ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "z-[9999]", children: l("Add block") })
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate", children: l("Add block") })
           ] }) : null,
           a.map((R) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip$1, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -4068,7 +4074,7 @@ const Node = memo(({ node: r, style: n, dragHandle: o }) => {
                 children: React__default.createElement(R.item, { blockId: p })
               }
             ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "z-[9999]", children: R.tooltip })
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate", children: R.tooltip })
           ] }))
         ] })
       ]
@@ -4172,7 +4178,7 @@ const Node = memo(({ node: r, style: n, dragHandle: o }) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { onClick: () => setOpen(ROOT_TEMP_KEY), variant: "default", size: "sm", children: t("add_block") })
-  ] }) }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("-mx-1 -mt-1 flex h-full select-none flex-col space-y-1"), onClick: () => clearSelection(), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+  ] }) }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("flex h-full select-none flex-col space-y-1"), onClick: () => clearSelection(), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       id: "outline-view",
@@ -4190,7 +4196,7 @@ const Node = memo(({ node: r, style: n, dragHandle: o }) => {
           onRename,
           openByDefault: !1,
           onMove,
-          rowHeight: 20,
+          rowHeight: 25,
           data: [...filteredTreeData],
           renderCursor: DefaultCursor,
           onSelect,
@@ -4954,7 +4960,7 @@ const ViewData = ({ data: r, fullView: n }) => {
       }
     )
   ] });
-}, UnsplashImages = React__default.lazy(() => import("./UnsplashImages-MGBAHsZC.js")), UploadImages = React__default.lazy(() => import("./UploadImages-4keVl9aw.js")), ImagesPanel = ({
+}, UnsplashImages = React__default.lazy(() => import("./UnsplashImages-gWlRHso5.js")), UploadImages = React__default.lazy(() => import("./UploadImages-hwW7jgSV.js")), ImagesPanel = ({
   isModalView: r = !1,
   onSelect: n = () => {
   }
@@ -6627,53 +6633,50 @@ function BlockStyling() {
     ] })
   ] });
 }
+const ChaiSelect = ({
+  defaultValue: r = "",
+  onValueChange: n,
+  options: o,
+  placeholder: a = "Select",
+  className: i = ""
+}) => {
+  const [l, c] = useState$1(r), u = (d) => {
+    const p = d.target.value;
+    c(p), n(p);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("relative inline-block w-full", i), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "select",
+    {
+      className: "focus:shadow-outline w-full appearance-none rounded border border-gray-300 bg-white px-4 py-1 pr-8 text-sm leading-tight shadow hover:border-gray-400 focus:outline-none",
+      value: l,
+      onChange: u,
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", disabled: !0, children: a }),
+        o.map((d) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: d.value, children: d.label }, d.value))
+      ]
+    }
+  ) });
+}, ChaiSelect$1 = ChaiSelect;
 function UILibrariesSelect({
   uiLibraries: r,
   library: n,
   setLibrary: o
 }) {
-  var c;
-  const [a, i] = React.useState(!1), { t: l } = useTranslation();
-  return n ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Popover$1, { open: a, onOpenChange: i, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(PopoverTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-y-1", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-bold text-gray-500", children: l("choose_library") }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        Button$1,
-        {
-          variant: "outline",
-          size: "sm",
-          role: "combobox",
-          "aria-expanded": a,
-          className: "w-[200px] justify-between",
-          children: [
-            l(n ? (c = r.find((u) => u.uuid === n)) == null ? void 0 : c.name : "choose_library"),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(CaretSortIcon, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
-          ]
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(PopoverContent, { className: "w-[200px] p-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Command, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CommandList, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(CommandEmpty, { children: l("no_library_found") }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(CommandGroup, { children: r.map((u) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        CommandItem,
-        {
-          value: u.uuid,
-          onSelect: (d) => {
-            o(d), i(!1);
-          },
-          children: [
-            u.name,
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              CheckIcon,
-              {
-                className: cn("ml-auto h-4 w-4", n === u.uuid ? "opacity-100" : "opacity-0")
-              }
-            )
-          ]
-        },
-        u.uuid
-      )) })
-    ] }) }) })
+  const { t: a } = useTranslation();
+  return n ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs font-bold text-gray-500", children: a("choose_library") }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ChaiSelect$1,
+      {
+        className: "mt-1",
+        options: r.map((i) => ({
+          value: i.uuid,
+          label: i.name
+        })),
+        defaultValue: n,
+        onValueChange: (i) => o(i)
+      }
+    )
   ] }) : null;
 }
 const BlockCard = ({
@@ -6693,7 +6696,7 @@ const BlockCard = ({
       i(!0);
       const E = await l(o, r);
       let A = first(d);
-      x(first(E)) && (A = null), isEmpty(E) || u(syncBlocksWithDefaults(E), A), n();
+      isEmpty(E) || u(syncBlocksWithDefaults(E), A), n();
     },
     [r]
   ), S = async (w) => {
@@ -6754,7 +6757,10 @@ const BlockCard = ({
       h.current && m(S);
     }, 300);
   };
-  return u ? /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-full w-full" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative flex h-full max-h-full flex-col overflow-hidden bg-background", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full pt-2", children: [
+  return u ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-4 grid h-full w-full grid-cols-12 gap-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-3 h-full" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-9 h-full" })
+  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative flex h-full max-h-full flex-col overflow-hidden bg-background", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full pt-2", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full w-52 flex-col gap-1 px-1", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(UILibrariesSelect, { library: l == null ? void 0 : l.uuid, setLibrary: n, uiLibraries: o }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2 flex flex-col", children: [
@@ -6899,7 +6905,7 @@ const BlockCard = ({
   multiple_choice: "Multiple Choice",
   textarea: "Textarea",
   rows: "Rows"
-}, ai_assistant = "AI Assistant", close_preview = "Close Preview", saved = "Saved", unsaved = "Unsaved", saving = "Saving...", page_is_empty = "This page is empty.", Theme = "Theme", Outline = "Outline", clipboard_not_supported = "Not supported", please_use_chrome_firefox_or_safari = "Please use Chrome, Firefox or Safari", classes_copied_to_clipboard = "Classes copied to clipboard", download_complete = "Download complete", copied = "Copied", enter_classes_separated_by_space = "Enter classes separated by space", copy_classes_to_clipboard = "Copy classes to clipboard", classes = "Classes", ask_ai = "Ask AI", edit_with_ai = "Edit with AI", generating_please_wait = "Generating... Please wait", stop$1 = "Stop", eg_this_page_is_about_an_ai_assistant_app_called_chai_studio_it_allows_users_to_create_beautiful_webpages_and_edit_content_with_ai = "E.g.: This page is about an AI assistant app called Chai Studio. It allows users to create beautiful webpages and edit content with AI.", ask_ai_to_edit_styles = "Ask AI to edit styles", ask_ai_to_edit_content = "Ask AI to edit content", ai_context = "AI Context", please_select_a_block_to_ask_ai = "Select a block to ask AI", edit = "Edit", tell_about_this_page_eg_this_page_is_about = "Describe this page. E.g.: This page is about...", tag = "Tag", value = "Value", background_image = "Background Image", enter_image_url = "Enter image URL", replace_image = "Replace image", choose_image = "Choose image", images = "Images", typography = "Typography", background = "Background", library = "Library", blocks = "Blocks", basic = "Basic", media = "Media", advanced = "Advanced", form = "Form", choose_icon_or_enter_svg = "Choose an icon or enter SVG", groups = "Groups", ui_libraries = "UI Libraries", accordions = "Accordions", buttons = "Buttons", layouts = "Layouts", choose_library = "Choose library", no_library_found = "No library found.", faq = "FAQ", hero = "Hero", features = "Features", footer = "Footer", navbar = "Navbar", icons = "Icons", testimonials = "Testimonials", blog = "Blog", ai_quick_prompts = {
+}, ai_assistant = "AI Assistant", close_preview = "Close Preview", saved = "Saved", unsaved = "Unsaved", saving = "Saving...", page_is_empty = "This page is empty.", Theme = "Theme", Outline = "Outline", clipboard_not_supported = "Not supported", please_use_chrome_firefox_or_safari = "Please use Chrome, Firefox or Safari", classes_copied_to_clipboard = "Classes copied to clipboard", download_complete = "Download complete", copied = "Copied", enter_classes_separated_by_space = "Enter classes separated by space", copy_classes_to_clipboard = "Copy classes to clipboard", classes = "Classes", ask_ai = "Ask AI", edit_with_ai = "Edit with AI", generating_please_wait = "Generating... Please wait", stop$1 = "Stop", eg_this_page_is_about_an_ai_assistant_app_called_chai_studio_it_allows_users_to_create_beautiful_webpages_and_edit_content_with_ai = "E.g.: This page is about an AI assistant app called Chai Studio. It allows users to create beautiful webpages and edit content with AI.", ask_ai_to_edit_styles = "Ask AI to edit styles", ask_ai_to_edit_content = "Ask AI to edit content", ai_context = "AI Context", please_select_a_block_to_ask_ai = "Select a block to edit with AI", please_select_a_block_to_edit = "Please select a block to edit", edit = "Edit", tell_about_this_page_eg_this_page_is_about = "Describe this page. E.g.: This page is about...", tag = "Tag", value = "Value", background_image = "Background Image", enter_image_url = "Enter image URL", replace_image = "Replace image", choose_image = "Choose image", images = "Images", typography = "Typography", background = "Background", library = "Library", blocks = "Blocks", basic = "Basic", media = "Media", advanced = "Advanced", form = "Form", choose_icon_or_enter_svg = "Choose an icon or enter SVG", groups = "Groups", ui_libraries = "UI Libraries", accordions = "Accordions", buttons = "Buttons", layouts = "Layouts", choose_library = "Choose library", no_library_found = "No library found.", faq = "FAQ", hero = "Hero", features = "Features", footer = "Footer", navbar = "Navbar", icons = "Icons", testimonials = "Testimonials", blog = "Blog", ai_quick_prompts = {
   improve_writing: "Improve writing",
   replace_placeholder_content: "Replace placeholder content",
   fix_grammar: "Fix grammar",
@@ -6907,7 +6913,12 @@ const BlockCard = ({
   make_shorter: "Make shorter",
   add_emojis: "Add emojis",
   randomize: "Randomize"
-}, lngEn = {
+}, sidebar = {
+  outline: "Outline",
+  edit_block: "Edit Block",
+  ai_assistant: "AI Assistant",
+  theme: "Theme"
+}, remove_context = "Remove context", yes_delete = "Yes, Delete", ai_context_updated = "AI Context Updated", you_can_now_ask_ai_to_edit_your_content = "You can now ask AI to edit your content.", lngEn = {
   add_block,
   enter_paste_tailwind_html,
   click_to_add_block,
@@ -7168,6 +7179,7 @@ const BlockCard = ({
   ask_ai_to_edit_content,
   ai_context,
   please_select_a_block_to_ask_ai,
+  please_select_a_block_to_edit,
   edit,
   tell_about_this_page_eg_this_page_is_about,
   tag,
@@ -7201,7 +7213,12 @@ const BlockCard = ({
   icons,
   testimonials,
   blog,
-  ai_quick_prompts
+  ai_quick_prompts,
+  sidebar,
+  remove_context,
+  yes_delete,
+  ai_context_updated,
+  you_can_now_ask_ai_to_edit_your_content
 };
 i18n.use(initReactI18next).init({
   // the translations
@@ -7386,76 +7403,85 @@ function QuickPrompts({ onClick: r }) {
   ) }) });
 }
 const AIUserPrompt = ({ blockId: r }) => {
-  const { t: n } = useTranslation(), { askAi: o, loading: a, error: i } = useAskAi(), [l, c] = useState$1(""), u = useRef$1(null);
+  const { t: n } = useTranslation(), { askAi: o, loading: a, error: i } = useAskAi(), [l, c] = useState$1(""), [u, d] = useState$1(!0), p = useRef$1(null);
   useEffect$1(() => {
-    var p;
-    (p = u.current) == null || p.focus();
+    var g;
+    (g = p.current) == null || g.focus();
   }, []);
-  const d = () => {
+  const m = () => {
     i || c("");
   };
-  return r ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-4", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("h2", { className: "mb-2 text-xs font-semibold leading-none tracking-tight text-gray-500", children: [
-      n("ask_ai"),
-      " (GPT-4o mini)"
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Textarea,
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
       {
-        ref: u,
-        value: l,
-        onChange: (p) => c(p.target.value),
-        placeholder: n("ask_ai_to_edit_content"),
-        className: "w-full border border-gray-400 focus:border-0",
-        rows: 3,
-        onKeyDown: (p) => {
-          p.key === "Enter" && (p.preventDefault(), o("content", r, l, d));
-        }
+        onClick: () => d(!u),
+        className: "flex cursor-default items-center justify-between border-b border-gray-300 py-2 text-sm font-bold text-gray-600 hover:bg-gray-50",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: n("ask_ai") }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "h-4 w-4 text-gray-500 " + (u ? "rotate-180" : "") }) })
+        ]
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "my-2 flex items-center gap-2", children: [
-      a ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Button$1,
+    u && r ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Textarea,
         {
-          disabled: l.trim().length < 5 || a,
-          onClick: () => o("content", r, l, d),
-          variant: "default",
-          className: "w-fit",
-          size: "sm",
-          children: a ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Loader$1, { className: "h-5 w-5 animate-spin" }),
-            n("generating_please_wait")
-          ] }) : n("edit_with_ai")
+          ref: p,
+          value: l,
+          onChange: (g) => c(g.target.value),
+          placeholder: n("ask_ai_to_edit_content"),
+          className: "w-full border border-gray-400 focus:border-0",
+          rows: 3,
+          onKeyDown: (g) => {
+            g.key === "Enter" && (g.preventDefault(), o("content", r, l, m));
+          }
         }
       ),
-      a ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(Skeleton, { className: "flex w-full items-center space-x-1 px-4 py-1 pl-2", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(FaSpinner, { className: "h-4 w-4 animate-spin text-gray-500" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs", children: n("generating_please_wait") })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { variant: "destructive", onClick: () => stop(), className: "hidden w-fit", size: "sm", children: n("Stop") })
-      ] }) : null
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-w-full", children: i && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "break-words rounded border border-red-500 bg-red-100 p-1 text-xs text-red-500", children: i.message }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(QuickPrompts, { onClick: (p) => o("content", r, p, d) })
-  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 rounded-xl p-4", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(SparklesIcon, { className: "mx-auto text-3xl" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { children: n("please_select_a_block_to_ask_ai") })
-  ] }) });
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "my-2 flex items-center gap-2", children: [
+        a ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Button$1,
+          {
+            disabled: l.trim().length < 5 || a,
+            onClick: () => o("content", r, l, m),
+            variant: "default",
+            className: "w-fit",
+            size: "sm",
+            children: a ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Loader$1, { className: "h-5 w-5 animate-spin" }),
+              n("generating_please_wait")
+            ] }) : n("edit_with_ai")
+          }
+        ),
+        a ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(Skeleton, { className: "flex w-full items-center space-x-1 px-4 py-1 pl-2", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(FaSpinner, { className: "h-4 w-4 animate-spin text-gray-500" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs", children: n("generating_please_wait") })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { variant: "destructive", onClick: () => stop(), className: "hidden w-fit", size: "sm", children: n("Stop") })
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-w-full", children: i && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "break-words rounded border border-red-500 bg-red-100 p-1 text-xs text-red-500", children: i.message }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(QuickPrompts, { onClick: (g) => o("content", r, g, m) })
+    ] }) : u ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 rounded-xl p-4", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(SparklesIcon, { className: "mx-auto text-3xl" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { children: n("please_select_a_block_to_ask_ai") })
+    ] }) }) : null
+  ] });
 }, AISetContext = () => {
-  const { t: r } = useTranslation(), n = useBuilderProp("aiContext", ""), [o, a] = useState$1(n), i = useRef$1(null), l = useBuilderProp("saveAiContextCallback", noop$1), [c, u] = useState$1(!1), [d, p] = useState$1(null), [m, g] = useState$1(!1), { toast: h } = useToast(), b = useRef$1(null);
+  const { t: r } = useTranslation(), n = useBuilderProp("aiContext", ""), [o, a] = useState$1(n), i = useRef$1(null), l = useBuilderProp("saveAiContextCallback", noop$1), [c, u] = useState$1(!1), [d, p] = useState$1(null), [, m] = useState$1(!1), { toast: g } = useToast(), h = useRef$1(null);
   useEffect$1(() => {
     n && a(n);
   }, [n]);
-  const x = async () => {
+  const b = async () => {
     try {
-      u(!0), p(null), await l(o), h({
+      u(!0), p(null), await l(o), g({
         title: r("ai_context_updated"),
         description: r("you_can_now_ask_ai_to_edit_your_content"),
         variant: "default"
-      }), b.current.click();
-    } catch (v) {
-      p(v);
+      }), h.current.click();
+    } catch (x) {
+      p(x);
     } finally {
       u(!1);
     }
@@ -7463,33 +7489,25 @@ const AIUserPrompt = ({ blockId: r }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Accordion,
     {
-      onValueChange: (v) => {
-        g(v !== "");
+      onValueChange: (x) => {
+        m(x !== "");
       },
       type: "single",
       collapsible: !0,
-      className: "rounded-md border bg-gray-100 px-2",
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionItem, { value: "set-context", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionTrigger, { ref: b, hideArrow: !0, className: "py-1 hover:no-underline", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-full items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-semibold", children: r("ai_context") }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(Button$1, { variant: "default", size: "sm", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: r(m ? "cancel" : "edit") }),
-            "  ",
-            m ? /* @__PURE__ */ jsxRuntimeExports.jsx(Cross2Icon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(EditIcon, { className: "h-4 w-4" })
-          ] })
-        ] }) }),
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionItem, { value: "set-context", className: "border-none", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionTrigger, { ref: h, className: "border-b py-2 text-gray-600 hover:no-underline", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full items-center justify-between", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-bold", children: r("ai_context") }) }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionContent, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             Textarea,
             {
               ref: i,
               value: o,
-              onChange: (v) => a(v.target.value),
+              onChange: (x) => a(x.target.value),
               placeholder: r("tell_about_this_page_eg_this_page_is_about"),
               className: "w-full border border-gray-400 bg-background focus:border",
               rows: 10,
-              onKeyDown: (v) => {
-                v.key === "Enter" && (v.preventDefault(), x());
+              onKeyDown: (x) => {
+                x.key === "Enter" && (x.preventDefault(), b());
               }
             }
           ),
@@ -7501,7 +7519,7 @@ const AIUserPrompt = ({ blockId: r }) => {
               Button$1,
               {
                 disabled: o.trim().length < 5,
-                onClick: () => x(),
+                onClick: () => b(),
                 variant: "default",
                 className: "w-fit",
                 size: "sm",
@@ -7518,7 +7536,10 @@ const AIUserPrompt = ({ blockId: r }) => {
               ] }) : r("delete") }) }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs(AlertDialogContent, { children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsxs(AlertDialogHeader, { children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDialogTitle, { children: r("remove_context?") }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs(AlertDialogTitle, { children: [
+                    r("remove_context"),
+                    " ?"
+                  ] }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDialogDescription, {})
                 ] }),
                 /* @__PURE__ */ jsxRuntimeExports.jsxs(AlertDialogFooter, { children: [
@@ -7527,9 +7548,9 @@ const AIUserPrompt = ({ blockId: r }) => {
                     AlertDialogAction,
                     {
                       onClick: () => {
-                        a(""), x();
+                        a(""), b();
                       },
-                      children: "Yes, Delete"
+                      children: r("yes_delete")
                     }
                   )
                 ] })
@@ -7543,7 +7564,7 @@ const AIUserPrompt = ({ blockId: r }) => {
   );
 }, AskAI = () => {
   const [r] = useSelectedBlockIds();
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute inset-0 z-50 h-full w-full bg-background p-2", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(AISetContext, {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx(AIUserPrompt, { blockId: first(r) })
   ] });
@@ -33642,31 +33663,7 @@ const FEATURE_TOGGLES = {
     const i = first(r);
     isString$1(i) && (a = [i, ...getParentNodeIds(n, i)]), o(a);
   }, [r, n, o]);
-}, SettingsPanel = () => {
-  const r = useSelectedBlock(), { t: n } = useTranslation(), [o, a] = useState$1(!0);
-  return isNull(r) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 rounded-xl p-4", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(MixerHorizontalIcon, { className: "mx-auto text-3xl" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { children: n("please_select_a_block_to_ask_ai") })
-  ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary$2, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex w-full flex-col px-2 pr-4", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(BlockSettings, {}),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyling, {}),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "div",
-      {
-        onClick: () => a(!o),
-        className: "flex cursor-default items-center justify-between border-b border-gray-300 py-2 text-sm font-bold hover:bg-gray-50",
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: n("Attributes") }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "h-4 w-4 text-gray-500 " + (o ? "rotate-180" : "") }) })
-        ]
-      }
-    ),
-    o && /* @__PURE__ */ jsxRuntimeExports.jsx(BlockAttributesEditor, {}),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("br", {})
-  ] }) });
-}, SettingsPanel$1 = SettingsPanel, UndoRedo = () => {
+}, UndoRedo = () => {
   const { hasUndo: r, hasRedo: n, undo: o, redo: a } = useUndoManager();
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { disabled: !r(), size: "sm", onClick: o, className: "rounded-full", variant: "ghost", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ResetIcon, {}) }),
@@ -33827,25 +33824,6 @@ const TabletIcon = ({ landscape: r = !1 }) => /* @__PURE__ */ jsxRuntimeExports.
       ] })
     ] })
   ] }) });
-}, AiAssistant = () => {
-  const [r, n] = useAtom$1(aiAssistantActiveAtom), o = useBuilderProp("askAiCallBack", null), { t: a } = useTranslation();
-  return o ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(Label, { htmlFor: "ai-assistant", className: "flex items-center gap-x-1 text-sm text-yellow-600", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(SparklesIcon, { className: "w-4" }),
-      a("ai_assistant")
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Switch,
-      {
-        className: "scale-90",
-        checked: r,
-        onCheckedChange: (i) => {
-          n(i);
-        },
-        id: "ai-assitantt"
-      }
-    )
-  ] }) : null;
 }, CanvasTopBar = () => {
   const r = useBuilderProp("darkMode", !0), [n] = useCanvasZoom();
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-10 items-center justify-between border-b bg-background/70 px-2", children: [
@@ -33867,35 +33845,61 @@ const TabletIcon = ({ landscape: r = !1 }) => /* @__PURE__ */ jsxRuntimeExports.
       /* @__PURE__ */ jsxRuntimeExports.jsx(Separator, { orientation: "vertical" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(UndoRedo, {})
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full items-center space-x-2", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(ClearCanvas, {}),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Separator, { orientation: "vertical" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(AiAssistant, {})
-    ] })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-full items-center space-x-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ClearCanvas, {}) })
   ] });
 }, AddBlocksDialog = () => {
   const { t: r } = useTranslation(), [n, o] = useAddBlocksModal();
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDialog, { open: !isEmpty$1(n), onOpenChange: () => n ? o("") : "", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(AlertDialogContent, { className: "max-h-[80vh] max-w-5xl overflow-hidden", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDialog, { open: !isEmpty(n), onOpenChange: () => n ? o("") : "", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(AlertDialogContent, { className: "max-h-[80vh] max-w-5xl overflow-hidden", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDialogHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDialogTitle, { children: r("add_block") }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "no-scrollbar h-[500px] max-h-full overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx(AddBlocksPanel$1, { showHeading: !1 }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDialogFooter, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDialogCancel, { children: r("Close") }) })
   ] }) });
-}, TopBar = lazy(() => import("./Topbar-0kMZdGSR.js")), menuItems = [
-  { icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Layers, { size: 20 }), label: "Outline", component: Outline$1 },
-  { icon: /* @__PURE__ */ jsxRuntimeExports.jsx(PaintBucketIcon, { size: 20 }), label: "Theme", component: () => /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeOptions, { showHeading: !1 }) }
+}, SettingsPanel = () => {
+  const r = useSelectedBlock(), { t: n } = useTranslation(), [o, a] = useState$1(!0);
+  return isNull(r) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 rounded-xl p-4", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(MixerHorizontalIcon, { className: "mx-auto text-3xl" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { children: n("please_select_a_block_to_edit") })
+  ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary$2, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex w-full flex-col", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(BlockSettings, {}),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyling, {}),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        onClick: () => a(!o),
+        className: "flex cursor-default items-center justify-between border-b border-gray-300 py-2 text-sm font-bold hover:bg-gray-50",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: n("Attributes") }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "h-4 w-4 text-gray-500 " + (o ? "rotate-180" : "") }) })
+        ]
+      }
+    ),
+    o && /* @__PURE__ */ jsxRuntimeExports.jsx(BlockAttributesEditor, {}),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("br", {})
+  ] }) });
+}, SettingsPanel$1 = SettingsPanel, TopBar = lazy(() => import("./Topbar-AxOo012V.js")), menuItems = [
+  { icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Layers, { size: 20 }), label: "sidebar.outline", component: Outline$1 },
+  { icon: /* @__PURE__ */ jsxRuntimeExports.jsx(EditIcon, { size: 16 }), label: "sidebar.edit_block", component: SettingsPanel$1 },
+  { icon: /* @__PURE__ */ jsxRuntimeExports.jsx(LightningBoltIcon, { className: "size-5" }), label: "sidebar.ai_assistant", component: AskAI },
+  {
+    icon: /* @__PURE__ */ jsxRuntimeExports.jsx(PaintBucketIcon, { size: 20 }),
+    label: "sidebar.theme",
+    component: () => /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeOptions, { showHeading: !1 })
+  }
 ], useAutoSave = () => {
   const { savePage: r } = useSavePage(), n = useBuilderProp("autoSaveSupport", !0), o = useBuilderProp("autoSaveInterval", 60);
   useIntervalEffect(() => {
     n && r();
   }, o * 1e3);
 }, RootLayout = () => {
-  const [r] = useAtom$1(aiAssistantActiveAtom), n = (c) => {
-    c.preventDefault();
+  const r = useBuilderProp("sideBarComponents.top", []), n = (u) => {
+    u.preventDefault();
   };
   useAtom$1(selectedLibraryAtom), useKeyEventWatcher(), useExpandTree(), useAutoSave();
-  const [o, a] = useState$1(0), i = (c) => {
-    a(o === c ? null : c);
-  }, { t: l } = useTranslation();
+  const [o, a] = useState$1(0), i = (u) => {
+    a(o === u ? null : u);
+  }, { t: l } = useTranslation(), c = [...menuItems, ...r];
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-screen w-screen bg-background text-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(TooltipProvider, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
@@ -33905,36 +33909,35 @@ const TabletIcon = ({ landscape: r = !1 }) => /* @__PURE__ */ jsxRuntimeExports.
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-14 w-screen shrink-0 border-b border-border", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(TopBar, {}) }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("main", { className: "relative flex h-full flex-1 flex-row", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-12 flex-col items-center border-r py-2", children: menuItems.map((c, u) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-12 flex-col items-center border-r py-2", children: c.map((u, d) => /* @__PURE__ */ jsxRuntimeExports.jsx(
               "button",
               {
-                className: `mb-4 rounded-lg p-2 text-gray-500 transition-colors ${o === u ? "bg-primary text-white" : "hover:bg-primary hover:text-white"}`,
-                onClick: () => i(u),
-                children: c.icon
+                className: `mb-2 rounded-lg p-2 text-gray-500 transition-colors ${o === d ? "bg-primary text-white" : "hover:bg-primary hover:text-white"}`,
+                onClick: () => i(d),
+                children: u.icon
               },
-              u
+              d
             )) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               motion.div,
               {
                 className: "h-full max-h-full overflow-hidden border-r border-border",
-                initial: { width: 250 },
-                animate: { width: o !== null ? 250 : 0 },
+                initial: { width: 280 },
+                animate: { width: o !== null ? 280 : 0 },
                 transition: { duration: 0.3, ease: "easeInOut" },
-                children: o !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea$1, { className: "h-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col p-2", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "h-10 text-base font-bold", children: l(menuItems[o].label) }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: React__default.createElement(menuItems[o].component, {}) }) })
+                children: o !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea$1, { className: "no-scrollbar h-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col p-2", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("h2", { className: "-mt-1 flex h-10 items-center space-x-1 text-base font-bold", children: [
+                    c[o].icon,
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: l(c[o].label) })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 pr-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: React__default.createElement(c[o].component, {}) }) })
                 ] }) })
               }
             ),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-full flex-1 bg-slate-800/20", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(CanvasTopBar, {}),
               /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CanvasArea$1, {}) })
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative flex h-[100%] w-[280px] min-w-[280px] border-l border-border pb-10", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(ScrollArea$1, { className: "h-full w-full overflow-y-auto", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsPanel$1, {}) }),
-              r ? /* @__PURE__ */ jsxRuntimeExports.jsx(AskAI, {}) : null
-            ] }) })
+            ] })
           ] })
         ]
       }
@@ -33980,7 +33983,7 @@ const TabletIcon = ({ landscape: r = !1 }) => /* @__PURE__ */ jsxRuntimeExports.
   }, [r.locale]), useEffect$1(() => {
     setDebugLogs(r.showDebugLogs);
   }, [r.showDebugLogs]), useEffect$1(() => {
-    r.translations && each$1(r.translations, (c, u) => {
+    r.translations && each(r.translations, (c, u) => {
       i18n.addResourceBundle(u, "translation", c, !0, !0);
     });
   }, [r.translations]), useEffect$1(() => {
@@ -33999,62 +34002,63 @@ const TabletIcon = ({ landscape: r = !1 }) => /* @__PURE__ */ jsxRuntimeExports.
   ] }) });
 };
 export {
-  useAllBlocks as $,
+  useSelectedBlocksDisplayChild as $,
   AddBlocksPanel$1 as A,
   BlockSettings as B,
-  CanvasArea$1 as C,
+  ChaiSelect$1 as C,
   DarkMode as D,
-  useCurrentPage as E,
+  useCopyToClipboard as E,
   FaCheck as F,
-  useCutBlockIds as G,
-  useDarkMode as H,
+  useCurrentPage as G,
+  useCutBlockIds as H,
   ImportHTML$1 as I,
-  useDuplicateBlocks as J,
-  useGetPageData as K,
-  useHiddenBlockIds as L,
-  useHighlightBlockId as M,
-  usePasteBlocks as N,
+  useDarkMode as J,
+  useDuplicateBlocks as K,
+  useGetPageData as L,
+  useHiddenBlockIds as M,
+  useHighlightBlockId as N,
   Outline$1 as O,
-  useBrandingOptions as P,
-  useRemoveBlocks as Q,
-  useRemoveClassesFromBlocks as R,
-  useSelectedBlockCurrentClasses as S,
+  usePasteBlocks as P,
+  useBrandingOptions as Q,
+  useRemoveBlocks as R,
+  useRemoveClassesFromBlocks as S,
   ThemeOptions as T,
   UILibraries as U,
-  useSelectedBlockAllClasses as V,
-  useSelectedBlock as W,
-  useStylingBreakpoint as X,
-  useUILibraryBlocks as Y,
-  useStylingState as Z,
-  useSelectedBlocksDisplayChild as _,
+  useSelectedBlockCurrentClasses as V,
+  useSelectedBlockAllClasses as W,
+  useSelectedBlock as X,
+  useStylingBreakpoint as Y,
+  useUILibraryBlocks as Z,
+  useStylingState as _,
   useSelectedBlockIds as a,
-  useActivePanel as a0,
-  useAddBlockParent as a1,
-  useSelectedBreakpoints as a2,
-  useSelectedStylingBlocks as a3,
+  useAllBlocks as a0,
+  useActivePanel as a1,
+  useAddBlockParent as a2,
+  useSelectedBreakpoints as a3,
+  useSelectedStylingBlocks as a4,
   useUpdateBlocksProps as b,
   useUpdateBlocksPropsRealtime as c,
   useBuilderProp as d,
   useSavePage as e,
   usePreviewMode as f,
-  BlockStyling as g,
-  AISetContext as h,
-  AIUserPrompt as i,
-  BlockAttributesEditor as j,
-  ChaiBuilderEditor as k,
-  Breakpoints as l,
-  UndoRedo as m,
-  getBlocksFromHTML as n,
-  useBlocksStore as o,
-  useUndoManager as p,
-  useBuilderReset as q,
-  useReadOnlyMode as r,
-  useActiveModal as s,
-  useAddBlock as t,
+  CanvasArea$1 as g,
+  BlockStyling as h,
+  AISetContext as i,
+  AIUserPrompt as j,
+  BlockAttributesEditor as k,
+  ChaiBuilderEditor as l,
+  Breakpoints as m,
+  UndoRedo as n,
+  getBlocksFromHTML as o,
+  useBlocksStore as p,
+  useUndoManager as q,
+  useBuilderReset as r,
+  useReadOnlyMode as s,
+  useActiveModal as t,
   useCodeEditor as u,
-  useAddClassesToBlocks as v,
-  useCanvasWidth as w,
-  useCanvasZoom as x,
-  useCopyBlockIds as y,
-  useCopyToClipboard as z
+  useAddBlock as v,
+  useAddClassesToBlocks as w,
+  useCanvasWidth as x,
+  useCanvasZoom as y,
+  useCopyBlockIds as z
 };