@apteva/apteva-kit 0.1.110 → 0.1.111

package/dist/index.mjs

@@ -4,13 +4,13 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/components/Chat/Chat.tsx
-import { useState as useState9, useEffect as useEffect7, useRef as useRef9, useMemo as useMemo2, useCallback as useCallback2, forwardRef, useImperativeHandle } from "react";
+import { useState as useState9, useEffect as useEffect8, useRef as useRef9, useMemo as useMemo2, useCallback as useCallback3, forwardRef, useImperativeHandle } from "react";
 
 // src/components/Chat/MessageList.tsx
-import { useEffect as useEffect6, useRef as useRef6 } from "react";
+import { useEffect as useEffect7, useRef as useRef6 } from "react";
 
 // src/components/Chat/Message.tsx
-import { useEffect as useEffect5, useRef as useRef5, useMemo } from "react";
+import { useEffect as useEffect6, useRef as useRef5, useMemo } from "react";
 
 // src/utils/cn.ts
 import { clsx } from "clsx";
@@ -1139,7 +1139,7 @@ function convertApiMessages(apiMessages) {
 }
 
 // src/components/Widgets/Widgets.tsx
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect5 } from "react";
 
 // src/components/Widgets/widget-library/Card.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -1438,8 +1438,219 @@ function Table({ widget, onAction }) {
 }
 
 // src/components/Widgets/widget-library/Form.tsx
-import { useState as useState3, useRef as useRef3 } from "react";
+import { useState as useState3, useRef as useRef3, useEffect as useEffect3, useCallback } from "react";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function CustomSelect({
+  name,
+  value,
+  options,
+  placeholder,
+  required,
+  onChange
+}) {
+  const [open, setOpen] = useState3(false);
+  const ref = useRef3(null);
+  const selected = options?.find((o) => o.value === value);
+  useEffect3(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+  return /* @__PURE__ */ jsxs4("div", { ref, className: "apteva-select relative", children: [
+    /* @__PURE__ */ jsxs4(
+      "select",
+      {
+        name,
+        value,
+        required,
+        onChange: () => {
+        },
+        tabIndex: -1,
+        className: "absolute inset-0 opacity-0 pointer-events-none",
+        "aria-hidden": true,
+        children: [
+          /* @__PURE__ */ jsx6("option", { value: "" }),
+          options?.map((o) => /* @__PURE__ */ jsx6("option", { value: o.value, children: o.label }, o.value))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen(!open),
+        className: "apteva-select-trigger w-full flex items-center justify-between px-3 py-2 rounded-lg border transition-colors text-left",
+        children: [
+          /* @__PURE__ */ jsx6("span", { className: selected ? "apteva-select-value" : "apteva-select-placeholder", children: selected ? selected.label : placeholder || "Select..." }),
+          /* @__PURE__ */ jsx6(
+            "svg",
+            {
+              className: `apteva-select-chevron w-4 h-4 flex-shrink-0 transition-transform ${open ? "rotate-180" : ""}`,
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsx6("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx6("div", { className: "apteva-select-dropdown absolute z-50 w-full mt-1 rounded-lg border shadow-lg overflow-hidden", children: /* @__PURE__ */ jsxs4("div", { className: "max-h-48 overflow-y-auto py-1", children: [
+      options?.map((opt) => /* @__PURE__ */ jsx6(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            onChange(opt.value);
+            setOpen(false);
+          },
+          className: `apteva-select-option w-full text-left px-3 py-2 text-sm transition-colors ${opt.value === value ? "apteva-select-option-active" : ""}`,
+          children: opt.label
+        },
+        opt.value
+      )),
+      (!options || options.length === 0) && /* @__PURE__ */ jsx6("div", { className: "px-3 py-2 text-sm apteva-select-placeholder", children: "No options" })
+    ] }) })
+  ] });
+}
+function CustomDatePicker({
+  name,
+  value,
+  placeholder,
+  required,
+  onChange
+}) {
+  const [open, setOpen] = useState3(false);
+  const ref = useRef3(null);
+  const parseDate = (v) => {
+    if (v) {
+      const [y, m, d] = v.split("-").map(Number);
+      return { year: y, month: m - 1, day: d };
+    }
+    const now = /* @__PURE__ */ new Date();
+    return { year: now.getFullYear(), month: now.getMonth(), day: 0 };
+  };
+  const parsed = parseDate(value);
+  const [viewYear, setViewYear] = useState3(parsed.year);
+  const [viewMonth, setViewMonth] = useState3(parsed.month);
+  useEffect3(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+  useEffect3(() => {
+    if (value) {
+      const p = parseDate(value);
+      setViewYear(p.year);
+      setViewMonth(p.month);
+    }
+  }, [value]);
+  const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
+  const firstDayOfWeek = new Date(viewYear, viewMonth, 1).getDay();
+  const startOffset = (firstDayOfWeek + 6) % 7;
+  const prevMonth = () => {
+    if (viewMonth === 0) {
+      setViewMonth(11);
+      setViewYear(viewYear - 1);
+    } else setViewMonth(viewMonth - 1);
+  };
+  const nextMonth = () => {
+    if (viewMonth === 11) {
+      setViewMonth(0);
+      setViewYear(viewYear + 1);
+    } else setViewMonth(viewMonth + 1);
+  };
+  const selectDay = (day) => {
+    const m = String(viewMonth + 1).padStart(2, "0");
+    const d = String(day).padStart(2, "0");
+    onChange(`${viewYear}-${m}-${d}`);
+    setOpen(false);
+  };
+  const formatDisplay = (v) => {
+    if (!v) return "";
+    const [y, m, d] = v.split("-");
+    return `${d}/${m}/${y}`;
+  };
+  const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+  const dayLabels = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+  const isSelected = (day) => {
+    if (!value) return false;
+    const p = parseDate(value);
+    return p.year === viewYear && p.month === viewMonth && p.day === day;
+  };
+  const isToday = (day) => {
+    const now = /* @__PURE__ */ new Date();
+    return now.getFullYear() === viewYear && now.getMonth() === viewMonth && now.getDate() === day;
+  };
+  return /* @__PURE__ */ jsxs4("div", { ref, className: "apteva-datepicker relative", children: [
+    /* @__PURE__ */ jsx6(
+      "input",
+      {
+        type: "text",
+        name,
+        value,
+        required,
+        onChange: () => {
+        },
+        tabIndex: -1,
+        className: "absolute inset-0 opacity-0 pointer-events-none",
+        "aria-hidden": true
+      }
+    ),
+    /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen(!open),
+        className: "apteva-datepicker-trigger w-full flex items-center justify-between px-3 py-2 rounded-lg border transition-colors text-left",
+        children: [
+          /* @__PURE__ */ jsx6("span", { className: value ? "apteva-datepicker-value" : "apteva-select-placeholder", children: value ? formatDisplay(value) : placeholder || "Select date..." }),
+          /* @__PURE__ */ jsx6("svg", { className: "apteva-select-chevron w-4 h-4 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs4("div", { className: "apteva-datepicker-dropdown absolute z-50 mt-1 rounded-lg border shadow-lg overflow-hidden", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "apteva-datepicker-header flex items-center justify-between px-3 py-2", children: [
+        /* @__PURE__ */ jsx6("button", { type: "button", onClick: prevMonth, className: "apteva-datepicker-nav p-1 rounded transition-colors", children: /* @__PURE__ */ jsx6("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }),
+        /* @__PURE__ */ jsxs4("span", { className: "apteva-datepicker-title text-sm font-semibold", children: [
+          monthNames[viewMonth],
+          " ",
+          viewYear
+        ] }),
+        /* @__PURE__ */ jsx6("button", { type: "button", onClick: nextMonth, className: "apteva-datepicker-nav p-1 rounded transition-colors", children: /* @__PURE__ */ jsx6("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }) })
+      ] }),
+      /* @__PURE__ */ jsx6("div", { className: "grid grid-cols-7 px-2", children: dayLabels.map((d) => /* @__PURE__ */ jsx6("div", { className: "apteva-datepicker-daylabel text-center text-xs font-medium py-1", children: d }, d)) }),
+      /* @__PURE__ */ jsxs4("div", { className: "grid grid-cols-7 px-2 pb-2", children: [
+        Array.from({ length: startOffset }).map((_, i) => /* @__PURE__ */ jsx6("div", {}, `empty-${i}`)),
+        Array.from({ length: daysInMonth }).map((_, i) => {
+          const day = i + 1;
+          const sel = isSelected(day);
+          const today = isToday(day);
+          return /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              onClick: () => selectDay(day),
+              className: [
+                "apteva-datepicker-day text-center text-sm py-1 rounded transition-colors",
+                sel ? "apteva-datepicker-day-selected" : "",
+                today && !sel ? "apteva-datepicker-day-today" : ""
+              ].join(" "),
+              children: day
+            },
+            day
+          );
+        })
+      ] })
+    ] })
+  ] });
+}
 function Form({ widget, onAction }) {
   const { title, fields } = widget.props;
   const fileInputRefs = useRef3({});
@@ -1454,9 +1665,9 @@ function Form({ widget, onAction }) {
     });
     return initial;
   });
-  const handleChange = (name, value) => {
+  const handleChange = useCallback((name, value) => {
     setFormData((prev) => ({ ...prev, [name]: value }));
-  };
+  }, []);
   const handleSubmit = (e) => {
     e.preventDefault();
     if (widget.actions?.[0] && onAction) {
@@ -1469,12 +1680,11 @@ function Form({ widget, onAction }) {
     }
   };
   const renderField = (field) => {
-    const baseInputClass = "w-full px-3 py-2 rounded-lg border transition-colors border-neutral-200 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-800 !text-neutral-900 dark:!text-neutral-100 placeholder-neutral-400 dark:placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent";
+    const baseInputClass = "apteva-input w-full px-3 py-2 rounded-lg border transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent";
     switch (field.type) {
       case "text":
       case "password":
       case "number":
-      case "date":
         return /* @__PURE__ */ jsx6(
           "input",
           {
@@ -1487,6 +1697,17 @@ function Form({ widget, onAction }) {
             className: baseInputClass
           }
         );
+      case "date":
+        return /* @__PURE__ */ jsx6(
+          CustomDatePicker,
+          {
+            name: field.name,
+            value: formData[field.name] || "",
+            placeholder: field.placeholder,
+            required: field.required,
+            onChange: (v) => handleChange(field.name, v)
+          }
+        );
       case "textarea":
         return /* @__PURE__ */ jsx6(
           "textarea",
@@ -1501,22 +1722,19 @@ function Form({ widget, onAction }) {
           }
         );
       case "select":
-        return /* @__PURE__ */ jsxs4(
-          "select",
+        return /* @__PURE__ */ jsx6(
+          CustomSelect,
           {
             name: field.name,
             value: formData[field.name] || "",
-            onChange: (e) => handleChange(field.name, e.target.value),
+            options: field.options,
+            placeholder: field.placeholder,
             required: field.required,
-            className: baseInputClass,
-            children: [
-              /* @__PURE__ */ jsx6("option", { value: "", children: field.placeholder || "Select..." }),
-              field.options?.map((opt) => /* @__PURE__ */ jsx6("option", { value: opt.value, children: opt.label }, opt.value))
-            ]
+            onChange: (v) => handleChange(field.name, v)
           }
         );
       case "checkbox":
-        return /* @__PURE__ */ jsxs4("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+        return /* @__PURE__ */ jsxs4("label", { className: "apteva-checkbox flex items-center gap-2 cursor-pointer", children: [
           /* @__PURE__ */ jsx6(
             "input",
             {
@@ -1524,10 +1742,10 @@ function Form({ widget, onAction }) {
               name: field.name,
               checked: formData[field.name] || false,
               onChange: (e) => handleChange(field.name, e.target.checked),
-              className: "w-4 h-4 rounded border-neutral-300 dark:border-neutral-600 text-blue-500 focus:ring-blue-500"
+              className: "w-4 h-4 rounded"
             }
           ),
-          /* @__PURE__ */ jsx6("span", { className: "!text-neutral-700 dark:!text-neutral-300", children: field.label })
+          /* @__PURE__ */ jsx6("span", { children: field.label })
         ] });
       case "file": {
         const files = formData[field.name] || [];
@@ -1561,18 +1779,18 @@ function Form({ widget, onAction }) {
             {
               type: "button",
               onClick: () => fileInputRefs.current[field.name]?.click(),
-              className: "apteva-file-drop w-full px-3 py-3 rounded-lg border-2 border-dashed transition-colors cursor-pointer border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-800 !text-neutral-500 dark:!text-neutral-400 hover:border-blue-400 hover:!text-blue-500 !text-sm",
+              className: "apteva-file-drop w-full px-3 py-3 rounded-lg border-2 border-dashed transition-colors cursor-pointer !text-sm",
               children: field.placeholder || "Click to add files"
             }
           ),
           files.length > 0 && /* @__PURE__ */ jsx6("ul", { className: "space-y-1", children: files.map((file, idx) => /* @__PURE__ */ jsxs4(
             "li",
             {
-              className: "apteva-file-item-row flex items-center justify-between px-2 py-1.5 rounded-lg bg-neutral-50 dark:bg-neutral-800 !text-sm",
+              className: "apteva-file-item-row flex items-center justify-between px-2 py-1.5 rounded-lg !text-sm",
               children: [
-                /* @__PURE__ */ jsxs4("span", { className: "!text-neutral-700 dark:!text-neutral-300 truncate mr-2", children: [
+                /* @__PURE__ */ jsxs4("span", { className: "truncate mr-2", children: [
                   file.name,
-                  /* @__PURE__ */ jsxs4("span", { className: "!text-neutral-400 ml-1", children: [
+                  /* @__PURE__ */ jsxs4("span", { className: "ml-1", style: { opacity: 0.6 }, children: [
                     "(",
                     (file.size / 1024).toFixed(0),
                     " KB)"
@@ -1583,7 +1801,7 @@ function Form({ widget, onAction }) {
                   {
                     type: "button",
                     onClick: () => handleChange(field.name, files.filter((_, i) => i !== idx)),
-                    className: "apteva-file-remove-btn !text-neutral-400 hover:!text-red-500 transition-colors flex-shrink-0",
+                    className: "apteva-file-remove-btn transition-colors flex-shrink-0",
                     children: "\u2715"
                   }
                 )
@@ -1598,13 +1816,13 @@ function Form({ widget, onAction }) {
     }
   };
   const submitAction = widget.actions?.find((a) => a.type === "submit") || widget.actions?.[0];
-  return /* @__PURE__ */ jsxs4("form", { onSubmit: handleSubmit, className: "border border-neutral-200 dark:border-neutral-700 rounded-xl bg-white dark:bg-neutral-900 overflow-hidden", children: [
+  return /* @__PURE__ */ jsxs4("form", { onSubmit: handleSubmit, className: "border rounded-xl overflow-hidden", children: [
     /* @__PURE__ */ jsxs4("div", { className: "p-4", children: [
-      title && /* @__PURE__ */ jsx6("h3", { className: "!text-lg font-semibold !text-neutral-900 dark:!text-white mb-4", children: title }),
+      title && /* @__PURE__ */ jsx6("h3", { className: "!text-lg font-semibold mb-4", children: title }),
       /* @__PURE__ */ jsx6("div", { className: "space-y-3", children: fields.map((field) => /* @__PURE__ */ jsxs4("div", { className: field.type === "checkbox" ? "" : "space-y-1", children: [
-        field.type !== "checkbox" && /* @__PURE__ */ jsxs4("label", { className: "block !text-sm font-medium !text-neutral-600 dark:!text-neutral-400", children: [
+        field.type !== "checkbox" && /* @__PURE__ */ jsxs4("label", { className: "apteva-field-label block !text-sm font-medium", children: [
           field.label,
-          field.required && /* @__PURE__ */ jsx6("span", { className: "text-red-500 ml-1", children: "*" })
+          field.required && /* @__PURE__ */ jsx6("span", { style: { color: "var(--aw-danger)" }, className: "ml-1", children: "*" })
         ] }),
         renderField(field)
       ] }, field.name)) })
@@ -1613,7 +1831,7 @@ function Form({ widget, onAction }) {
       "button",
       {
         type: "submit",
-        className: "px-3 py-1.5 !text-sm rounded-lg font-medium transition-colors bg-blue-500 !text-white hover:bg-blue-600",
+        className: "px-3 py-1.5 !text-sm rounded-lg font-medium transition-colors",
         children: submitAction.label || "Submit"
       }
     ) })
@@ -1983,7 +2201,7 @@ function Spacer({ widget }) {
 }
 
 // src/components/Widgets/widget-library/LiveView.tsx
-import { useState as useState4, useCallback, useRef as useRef4, useEffect as useEffect3 } from "react";
+import { useState as useState4, useCallback as useCallback2, useRef as useRef4, useEffect as useEffect4 } from "react";
 import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 function LiveView({ widget }) {
   const { src, title, height, aspectRatio = "16/9", allowFullscreen = true, sandbox, allow, refreshInterval, showToolbar = true } = widget.props;
@@ -1991,18 +2209,18 @@ function LiveView({ widget }) {
   const [isLoading, setIsLoading] = useState4(true);
   const [hasError, setHasError] = useState4(false);
   const [refreshKey, setRefreshKey] = useState4(0);
-  const handleRefresh = useCallback(() => {
+  const handleRefresh = useCallback2(() => {
     setIsLoading(true);
     setHasError(false);
     setRefreshKey((k) => k + 1);
   }, []);
-  const handleFullscreen = useCallback(() => {
+  const handleFullscreen = useCallback2(() => {
     iframeRef.current?.requestFullscreen?.();
   }, []);
-  const handleOpenExternal = useCallback(() => {
+  const handleOpenExternal = useCallback2(() => {
     window.open(src, "_blank", "noopener,noreferrer");
   }, [src]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!refreshInterval || refreshInterval <= 0) return;
     const interval = setInterval(handleRefresh, refreshInterval * 1e3);
     return () => clearInterval(interval);
@@ -2150,7 +2368,7 @@ function Widgets({
   columns = 3,
   className
 }) {
-  useEffect4(() => {
+  useEffect5(() => {
     widgets.forEach((widget) => {
       onWidgetMount?.(widget.id);
     });
@@ -2574,7 +2792,7 @@ function Message({ message, onAction, enableWidgets, onWidgetRender, persistentW
     const parsed = parseWidgetsFromText(message.content);
     return parsed.segments.filter((seg) => seg.type === "widget" && !!seg.widget).map((seg) => seg.widget);
   }, [enableWidgets, isUser, message.content]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (onWidgetRender && message.widgets) {
       for (const widget of message.widgets) {
         if (!reportedWidgetsRef.current.has(widget.id)) {
@@ -2584,7 +2802,7 @@ function Message({ message, onAction, enableWidgets, onWidgetRender, persistentW
       }
     }
   }, [message.widgets, onWidgetRender]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (onWidgetRender && parsedWidgets.length > 0) {
       for (const widget of parsedWidgets) {
         if (!reportedWidgetsRef.current.has(widget.id)) {
@@ -3038,7 +3256,7 @@ function MessageList({
       isNearBottomRef.current = scrollHeight - scrollTop - clientHeight < 100;
     }
   };
-  useEffect6(() => {
+  useEffect7(() => {
     if (listRef.current && isNearBottomRef.current) {
       const currentScrollHeight = listRef.current.scrollHeight;
       if (currentScrollHeight !== lastScrollHeightRef.current) {
@@ -3893,7 +4111,7 @@ var Chat = forwardRef(function Chat2({
   const [showSettingsMenu, setShowSettingsMenu] = useState9(false);
   const fileInputRef = useRef9(null);
   const [persistentWidgets, setPersistentWidgets] = useState9(/* @__PURE__ */ new Map());
-  const updatePersistentWidgets = useCallback2((msgs) => {
+  const updatePersistentWidgets = useCallback3((msgs) => {
     setPersistentWidgets((prev) => {
       const next = new Map(prev);
       let changed = false;
@@ -3911,7 +4129,7 @@ var Chat = forwardRef(function Chat2({
       return changed ? next : prev;
     });
   }, []);
-  useEffect7(() => {
+  useEffect8(() => {
     updatePersistentWidgets(messages);
   }, [messages, updatePersistentWidgets]);
   const persistentWidgetList = useMemo2(() => Array.from(persistentWidgets.values()), [persistentWidgets]);
@@ -3937,7 +4155,7 @@ var Chat = forwardRef(function Chat2({
     return context ? `${context}
 ${widgetContext}` : widgetContext;
   }, [context, enableWidgets, availableWidgets, compactWidgetContext]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (apiUrl || apiKey) {
       aptevaClient.configure({
         ...apiUrl && { apiUrl },
@@ -3945,15 +4163,15 @@ ${widgetContext}` : widgetContext;
       });
     }
   }, [apiUrl, apiKey]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (threadId) {
       onThreadChange?.(threadId);
     }
   }, [threadId, onThreadChange]);
-  useEffect7(() => {
+  useEffect8(() => {
     setInternalPlanMode(planMode);
   }, [planMode]);
-  useEffect7(() => {
+  useEffect8(() => {
     const handleClickOutside = (event) => {
       const target = event.target;
       if (showSettingsMenu && !target.closest(".settings-menu-container")) {
@@ -3973,7 +4191,7 @@ ${widgetContext}` : widgetContext;
     }
   };
   const defaultPlaceholder = mode === "chat" ? "Type a message..." : "Enter your command...";
-  const handleWidgetAction = useCallback2((action) => {
+  const handleWidgetAction = useCallback3((action) => {
     onAction?.(action);
     if (action.type === "submit" && action.payload?.formData) {
       const formData = action.payload.formData;
@@ -4574,7 +4792,7 @@ import { useState as useState10 } from "react";
 import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
 
 // src/components/Command/Command.tsx
-import React, { useState as useState11, useEffect as useEffect8 } from "react";
+import React, { useState as useState11, useEffect as useEffect9 } from "react";
 import { Fragment as Fragment7, jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
 function Command({
   agentId,
@@ -4615,15 +4833,15 @@ function Command({
   const [showSettingsMenu, setShowSettingsMenu] = useState11(false);
   const [internalPlanMode, setInternalPlanMode] = useState11(planMode);
   const fileInputRef = React.useRef(null);
-  useEffect8(() => {
+  useEffect9(() => {
     if (autoExecute && state === "idle" && command) {
       executeCommand();
     }
   }, [autoExecute]);
-  useEffect8(() => {
+  useEffect9(() => {
     setInternalPlanMode(planMode);
   }, [planMode]);
-  useEffect8(() => {
+  useEffect9(() => {
     const handleClickOutside = (event) => {
       const target = event.target;
       if (showSettingsMenu && !target.closest(".settings-menu-container")) {
@@ -5656,7 +5874,7 @@ function Prompt({
 }
 
 // src/components/Stream/Stream.tsx
-import { useState as useState13, useEffect as useEffect9 } from "react";
+import { useState as useState13, useEffect as useEffect10 } from "react";
 import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
 function Stream({
   agentId,
@@ -5676,7 +5894,7 @@ function Stream({
   const [text, setText] = useState13("");
   const [isStreaming, setIsStreaming] = useState13(false);
   const [isComplete, setIsComplete] = useState13(false);
-  useEffect9(() => {
+  useEffect10(() => {
     if (autoStart && !isStreaming && !isComplete) {
       startStreaming();
     }
@@ -5947,7 +6165,7 @@ function Threads({
 }
 
 // src/components/AutoInterface/AutoInterface.tsx
-import { useState as useState16, useRef as useRef10, useCallback as useCallback3, useEffect as useEffect10 } from "react";
+import { useState as useState16, useRef as useRef10, useCallback as useCallback4, useEffect as useEffect11 } from "react";
 
 // src/components/AutoInterface/LayoutRenderer.tsx
 import { useState as useState15 } from "react";
@@ -6225,11 +6443,11 @@ function AutoInterface({
     generateInterfaceContext(),
     context || ""
   ].filter(Boolean).join("\n\n");
-  const updateInterface = useCallback3((newSpec) => {
+  const updateInterface = useCallback4((newSpec) => {
     setInterfaceSpec(newSpec);
     onInterfaceChange?.(newSpec);
   }, [onInterfaceChange]);
-  const handleAction = useCallback3((action) => {
+  const handleAction = useCallback4((action) => {
     onAction?.(action);
     if (chatRef.current) {
       chatRef.current.sendMessage(
@@ -6237,7 +6455,7 @@ function AutoInterface({
       );
     }
   }, [onAction]);
-  const handleMessageComplete = useCallback3((result) => {
+  const handleMessageComplete = useCallback4((result) => {
     if (!result?.data) return;
     const text = typeof result.data === "string" ? result.data : result.data.message || "";
     console.log("[AutoInterface] Chat message complete, text (" + text.length + " chars):", text.substring(0, 300));
@@ -6258,7 +6476,7 @@ function AutoInterface({
     }
     setIsGenerating(false);
   }, [interfaceSpec, updateInterface]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!initialPrompt || initialInterface || useMock) return;
     if (!apiUrl) return;
     let cancelled = false;
@@ -6383,29 +6601,29 @@ function getThemeScript() {
 }
 
 // src/hooks/useInterfaceState.ts
-import { useState as useState17, useCallback as useCallback4 } from "react";
+import { useState as useState17, useCallback as useCallback5 } from "react";
 function useInterfaceState(initialSpec) {
   const [spec, setSpec] = useState17(initialSpec || null);
   const [isStreaming, setIsStreaming] = useState17(false);
-  const setInterface = useCallback4((newSpec) => {
+  const setInterface = useCallback5((newSpec) => {
     setSpec(newSpec);
   }, []);
-  const clearInterface = useCallback4(() => {
+  const clearInterface = useCallback5(() => {
     setSpec(null);
   }, []);
-  const applyInterfaceUpdate = useCallback4((update) => {
+  const applyInterfaceUpdate = useCallback5((update) => {
     setSpec((prev) => {
       if (!prev) return prev;
       return applyUpdate(prev, update);
     });
   }, []);
-  const applyInterfaceUpdates = useCallback4((updates) => {
+  const applyInterfaceUpdates = useCallback5((updates) => {
     setSpec((prev) => {
       if (!prev) return prev;
       return applyUpdates(prev, updates);
     });
   }, []);
-  const getNode = useCallback4((id) => {
+  const getNode = useCallback5((id) => {
     if (!spec) return null;
     return findNode(spec.root, id);
   }, [spec]);
@@ -6422,7 +6640,7 @@ function useInterfaceState(initialSpec) {
 }
 
 // src/hooks/useInterfaceAI.ts
-import { useCallback as useCallback5, useRef as useRef11 } from "react";
+import { useCallback as useCallback6, useRef as useRef11 } from "react";
 function useInterfaceAI({
   agentId,
   apiUrl,
@@ -6442,7 +6660,7 @@ function useInterfaceAI({
       ...apiKey && { apiKey }
     });
   }
-  const sendMessage = useCallback5(async (message) => {
+  const sendMessage = useCallback6(async (message) => {
     accumulatedTextRef.current = "";
     onStreamStart?.();
     const systemPrompt = [