@apteva/apteva-kit 0.1.58 → 0.1.60

package/dist/index.js

@@ -913,6 +913,125 @@ function Table({ widget, onAction }) {
   ] }) }) });
 }
 
+// src/components/Widgets/widget-library/Form.tsx
+
+
+function Form({ widget, onAction }) {
+  const { title, fields } = widget.props;
+  const [formData, setFormData] = _react.useState.call(void 0, () => {
+    const initial = {};
+    fields.forEach((field) => {
+      initial[field.name] = _nullishCoalesce(field.defaultValue, () => ( (field.type === "checkbox" ? false : "")));
+    });
+    return initial;
+  });
+  const handleChange = (name, value) => {
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (_optionalChain([widget, 'access', _18 => _18.actions, 'optionalAccess', _19 => _19[0]]) && onAction) {
+      onAction({
+        type: widget.actions[0].type,
+        payload: { ...widget.actions[0].payload, formData },
+        widgetId: widget.id,
+        timestamp: /* @__PURE__ */ new Date()
+      });
+    }
+  };
+  const renderField = (field) => {
+    const baseInputClass = cn(
+      "w-full px-3 py-2 rounded-lg border transition-colors",
+      "border-neutral-300 dark:border-neutral-600",
+      "bg-white 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"
+    );
+    switch (field.type) {
+      case "text":
+      case "password":
+      case "number":
+      case "date":
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "input",
+          {
+            type: field.type,
+            name: field.name,
+            value: formData[field.name] || "",
+            onChange: (e) => handleChange(field.name, field.type === "number" ? Number(e.target.value) : e.target.value),
+            placeholder: field.placeholder,
+            required: field.required,
+            className: baseInputClass
+          }
+        );
+      case "textarea":
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "textarea",
+          {
+            name: field.name,
+            value: formData[field.name] || "",
+            onChange: (e) => handleChange(field.name, e.target.value),
+            placeholder: field.placeholder,
+            required: field.required,
+            rows: 3,
+            className: baseInputClass
+          }
+        );
+      case "select":
+        return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "select",
+          {
+            name: field.name,
+            value: formData[field.name] || "",
+            onChange: (e) => handleChange(field.name, e.target.value),
+            required: field.required,
+            className: baseInputClass,
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: "", children: field.placeholder || "Select..." }),
+              _optionalChain([field, 'access', _20 => _20.options, 'optionalAccess', _21 => _21.map, 'call', _22 => _22((opt) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: opt.value, children: opt.label }, opt.value))])
+            ]
+          }
+        );
+      case "checkbox":
+        return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { className: "flex items-center gap-2 cursor-pointer", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "input",
+            {
+              type: "checkbox",
+              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"
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-neutral-700 dark:text-neutral-300", children: field.label })
+        ] });
+      default:
+        return null;
+    }
+  };
+  const submitAction = _optionalChain([widget, 'access', _23 => _23.actions, 'optionalAccess', _24 => _24.find, 'call', _25 => _25((a) => a.type === "submit")]) || _optionalChain([widget, 'access', _26 => _26.actions, 'optionalAccess', _27 => _27[0]]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { onSubmit: handleSubmit, className: "apteva-form rounded-lg border border-neutral-200 dark:border-neutral-700 p-4 bg-white dark:bg-neutral-800", children: [
+    title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "text-base font-semibold text-neutral-900 dark:text-neutral-100 mb-4", children: title }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "space-y-4", children: fields.map((field) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: field.type === "checkbox" ? "" : "space-y-1", children: [
+      field.type !== "checkbox" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { className: "block text-sm font-medium text-neutral-700 dark:text-neutral-300", children: [
+        field.label,
+        field.required && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-red-500 ml-1", children: "*" })
+      ] }),
+      renderField(field)
+    ] }, field.name)) }),
+    submitAction && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mt-4", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "button",
+      {
+        type: "submit",
+        className: "px-4 py-2 rounded-lg font-medium transition-colors bg-blue-500 text-white hover:bg-blue-600",
+        children: submitAction.label || "Submit"
+      }
+    ) })
+  ] });
+}
+
 // src/components/Widgets/WidgetRenderer.tsx
 
 function WidgetRenderer({ widget, onAction }) {
@@ -928,6 +1047,8 @@ function WidgetRenderer({ widget, onAction }) {
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ButtonGroup, { widget, onAction });
       case "table":
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Table, { widget, onAction });
+      case "form":
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Form, { widget, onAction });
       default:
         return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "p-4 border border-yellow-300 bg-yellow-50 rounded-lg", children: [
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-sm text-yellow-800", children: [
@@ -954,7 +1075,7 @@ function Widgets({
 }) {
   _react.useEffect.call(void 0, () => {
     widgets.forEach((widget) => {
-      _optionalChain([onWidgetMount, 'optionalCall', _18 => _18(widget.id)]);
+      _optionalChain([onWidgetMount, 'optionalCall', _28 => _28(widget.id)]);
     });
   }, [widgets, onWidgetMount]);
   const layoutClasses = {
@@ -1257,8 +1378,8 @@ function ToolCall({ name, status }) {
 
 function Message({ message, onAction, enableWidgets, onWidgetRender }) {
   const isUser = message.role === "user";
-  const contentSegments = _optionalChain([message, 'access', _19 => _19.metadata, 'optionalAccess', _20 => _20.content_segments]);
-  const isStreaming = _optionalChain([message, 'access', _21 => _21.metadata, 'optionalAccess', _22 => _22.isStreaming]) === true;
+  const contentSegments = _optionalChain([message, 'access', _29 => _29.metadata, 'optionalAccess', _30 => _30.content_segments]);
+  const isStreaming = _optionalChain([message, 'access', _31 => _31.metadata, 'optionalAccess', _32 => _32.isStreaming]) === true;
   const hasContent = message.content || contentSegments && contentSegments.length > 0;
   const reportedWidgetsRef = _react.useRef.call(void 0, /* @__PURE__ */ new Set());
   const parsedWidgets = _react.useMemo.call(void 0, () => {
@@ -1698,7 +1819,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
         setFileError(errors.join(", "));
         setTimeout(() => setFileError(null), 5e3);
       }
-      _optionalChain([onFileUpload, 'optionalCall', _23 => _23(e.target.files)]);
+      _optionalChain([onFileUpload, 'optionalCall', _33 => _33(e.target.files)]);
       setShowMenu(false);
       e.target.value = "";
     }
@@ -1768,15 +1889,15 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
             {
               className: "apteva-composer-menu fixed bg-neutral-800 dark:bg-neutral-800 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
               style: {
-                left: _nullishCoalesce(_optionalChain([menuButtonRef, 'access', _24 => _24.current, 'optionalAccess', _25 => _25.getBoundingClientRect, 'call', _26 => _26(), 'access', _27 => _27.left]), () => ( 0)),
-                top: (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _28 => _28.current, 'optionalAccess', _29 => _29.getBoundingClientRect, 'call', _30 => _30(), 'access', _31 => _31.bottom]), () => ( 0))) + 8
+                left: _nullishCoalesce(_optionalChain([menuButtonRef, 'access', _34 => _34.current, 'optionalAccess', _35 => _35.getBoundingClientRect, 'call', _36 => _36(), 'access', _37 => _37.left]), () => ( 0)),
+                top: (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _38 => _38.current, 'optionalAccess', _39 => _39.getBoundingClientRect, 'call', _40 => _40(), 'access', _41 => _41.bottom]), () => ( 0))) + 8
               },
               children: [
                 /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
                   "button",
                   {
                     onClick: () => {
-                      _optionalChain([fileInputRef, 'access', _32 => _32.current, 'optionalAccess', _33 => _33.click, 'call', _34 => _34()]);
+                      _optionalChain([fileInputRef, 'access', _42 => _42.current, 'optionalAccess', _43 => _43.click, 'call', _44 => _44()]);
                       setShowMenu(false);
                     },
                     className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-neutral-700 dark:hover:bg-neutral-700 transition-colors !text-white text-left",
@@ -1895,8 +2016,8 @@ function CommandComposer({
     }
   };
   const handleNewCommand = () => {
-    _optionalChain([onReset, 'optionalCall', _35 => _35()]);
-    _optionalChain([inputRef, 'access', _36 => _36.current, 'optionalAccess', _37 => _37.focus, 'call', _38 => _38()]);
+    _optionalChain([onReset, 'optionalCall', _45 => _45()]);
+    _optionalChain([inputRef, 'access', _46 => _46.current, 'optionalAccess', _47 => _47.focus, 'call', _48 => _48()]);
   };
   const handleInputChange = (value) => {
     setInput(value);
@@ -2010,15 +2131,15 @@ function CommandComposer({
                   {
                     className: "apteva-composer-menu fixed bg-neutral-800 dark:bg-neutral-800 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
                     style: {
-                      left: _nullishCoalesce(_optionalChain([menuButtonRef, 'access', _39 => _39.current, 'optionalAccess', _40 => _40.getBoundingClientRect, 'call', _41 => _41(), 'access', _42 => _42.left]), () => ( 0)),
-                      top: (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _43 => _43.current, 'optionalAccess', _44 => _44.getBoundingClientRect, 'call', _45 => _45(), 'access', _46 => _46.bottom]), () => ( 0))) + 8
+                      left: _nullishCoalesce(_optionalChain([menuButtonRef, 'access', _49 => _49.current, 'optionalAccess', _50 => _50.getBoundingClientRect, 'call', _51 => _51(), 'access', _52 => _52.left]), () => ( 0)),
+                      top: (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _53 => _53.current, 'optionalAccess', _54 => _54.getBoundingClientRect, 'call', _55 => _55(), 'access', _56 => _56.bottom]), () => ( 0))) + 8
                     },
                     children: [
                       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
                         "button",
                         {
                           onClick: () => {
-                            _optionalChain([fileInputRef, 'access', _47 => _47.current, 'optionalAccess', _48 => _48.click, 'call', _49 => _49()]);
+                            _optionalChain([fileInputRef, 'access', _57 => _57.current, 'optionalAccess', _58 => _58.click, 'call', _59 => _59()]);
                             setShowMenu(false);
                           },
                           className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-neutral-700 dark:hover:bg-neutral-700 transition-colors !text-white text-left",
@@ -2259,7 +2380,7 @@ var AptevaClient = class {
         const error = await response.json().catch(() => ({ error: "Request failed" }));
         throw new Error(error.error || `Request failed with status ${response.status}`);
       }
-      const reader = _optionalChain([response, 'access', _50 => _50.body, 'optionalAccess', _51 => _51.getReader, 'call', _52 => _52()]);
+      const reader = _optionalChain([response, 'access', _60 => _60.body, 'optionalAccess', _61 => _61.getReader, 'call', _62 => _62()]);
       if (!reader) {
         throw new Error("Response body is not readable");
       }
@@ -2277,7 +2398,7 @@ var AptevaClient = class {
           if (line.startsWith("data: ")) {
             const data = line.slice(6);
             if (data === "[DONE]") {
-              _optionalChain([onComplete, 'optionalCall', _53 => _53(threadId)]);
+              _optionalChain([onComplete, 'optionalCall', _63 => _63(threadId)]);
               return;
             }
             try {
@@ -2292,10 +2413,10 @@ var AptevaClient = class {
           }
         }
       }
-      _optionalChain([onComplete, 'optionalCall', _54 => _54(threadId)]);
+      _optionalChain([onComplete, 'optionalCall', _64 => _64(threadId)]);
     } catch (error) {
       const err = error instanceof Error ? error : new Error("Unknown error");
-      _optionalChain([onError, 'optionalCall', _55 => _55(err)]);
+      _optionalChain([onError, 'optionalCall', _65 => _65(err)]);
       throw err;
     }
   }
@@ -2455,7 +2576,7 @@ ${widgetContext}` : widgetContext;
   }, [apiUrl, apiKey]);
   _react.useEffect.call(void 0, () => {
     if (threadId) {
-      _optionalChain([onThreadChange, 'optionalCall', _56 => _56(threadId)]);
+      _optionalChain([onThreadChange, 'optionalCall', _66 => _66(threadId)]);
     }
   }, [threadId, onThreadChange]);
   _react.useEffect.call(void 0, () => {
@@ -2473,7 +2594,7 @@ ${widgetContext}` : widgetContext;
   }, [showSettingsMenu]);
   const handleModeChange = (newMode) => {
     setMode(newMode);
-    _optionalChain([onModeChange, 'optionalCall', _57 => _57(newMode)]);
+    _optionalChain([onModeChange, 'optionalCall', _67 => _67(newMode)]);
     if (newMode === "command") {
       setCommandState("idle");
       setCommandResult(null);
@@ -2494,7 +2615,7 @@ ${widgetContext}` : widgetContext;
         metadata: hasFiles ? { attachments: fileNames } : void 0
       };
       setMessages((prev) => [...prev, userMessage]);
-      _optionalChain([onMessageSent, 'optionalCall', _58 => _58(userMessage)]);
+      _optionalChain([onMessageSent, 'optionalCall', _68 => _68(userMessage)]);
     }
     setIsLoading(true);
     try {
@@ -2561,7 +2682,7 @@ ${widgetContext}` : widgetContext;
                   responseThreadId = chunk.thread_id;
                   if (!currentThreadId) {
                     setCurrentThreadId(chunk.thread_id);
-                    _optionalChain([onThreadChange, 'optionalCall', _59 => _59(chunk.thread_id)]);
+                    _optionalChain([onThreadChange, 'optionalCall', _69 => _69(chunk.thread_id)]);
                   }
                 }
                 break;
@@ -2586,7 +2707,7 @@ ${widgetContext}` : widgetContext;
                   contentSegments.push({ type: "tool", id: chunk.tool_id, name: chunk.tool_name });
                   toolInputBuffer = "";
                   setChatToolName(chunk.tool_name);
-                  _optionalChain([onToolCall, 'optionalCall', _60 => _60(chunk.tool_name, chunk.tool_id)]);
+                  _optionalChain([onToolCall, 'optionalCall', _70 => _70(chunk.tool_name, chunk.tool_id)]);
                   updateMessage();
                 }
                 break;
@@ -2600,7 +2721,7 @@ ${widgetContext}` : widgetContext;
                   const toolSegment = contentSegments.find((s) => s.type === "tool" && s.id === chunk.tool_id);
                   if (toolSegment) {
                     toolSegment.result = chunk.content;
-                    _optionalChain([onToolResult, 'optionalCall', _61 => _61(toolSegment.name, chunk.content)]);
+                    _optionalChain([onToolResult, 'optionalCall', _71 => _71(toolSegment.name, chunk.content)]);
                   }
                   setChatToolName(null);
                   updateMessage();
@@ -2643,7 +2764,7 @@ ${widgetContext}` : widgetContext;
             });
             if (threadId2 && threadId2 !== currentThreadId) {
               setCurrentThreadId(threadId2);
-              _optionalChain([onThreadChange, 'optionalCall', _62 => _62(threadId2)]);
+              _optionalChain([onThreadChange, 'optionalCall', _72 => _72(threadId2)]);
             }
             setIsLoading(false);
             setCurrentRequestId(null);
@@ -2667,7 +2788,7 @@ ${widgetContext}` : widgetContext;
             setIsLoading(false);
             setCurrentRequestId(null);
             setChatToolName(null);
-            _optionalChain([onError, 'optionalCall', _63 => _63(error)]);
+            _optionalChain([onError, 'optionalCall', _73 => _73(error)]);
           }
         );
       }
@@ -2680,7 +2801,7 @@ ${widgetContext}` : widgetContext;
         metadata: { error: true }
       };
       setMessages((prev) => [...prev, errorMessage]);
-      _optionalChain([onError, 'optionalCall', _64 => _64(error instanceof Error ? error : new Error("Unknown error"))]);
+      _optionalChain([onError, 'optionalCall', _74 => _74(error instanceof Error ? error : new Error("Unknown error"))]);
     } finally {
       setIsLoading(false);
     }
@@ -2726,7 +2847,7 @@ ${planningInstruction}` : planningInstruction;
           const error = err instanceof Error ? err : new Error("Failed to generate plan");
           setCommandError(error);
           setCommandState("error");
-          _optionalChain([onError, 'optionalCall', _65 => _65(error)]);
+          _optionalChain([onError, 'optionalCall', _75 => _75(error)]);
         }
       }
       return;
@@ -2759,12 +2880,12 @@ ${planningInstruction}` : planningInstruction;
               setCommandResult(result);
               setCommandState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _66 => _66(result)]);
+              _optionalChain([onComplete, 'optionalCall', _76 => _76(result)]);
             },
             (error) => {
               setCommandError(error);
               setCommandState("error");
-              _optionalChain([onError, 'optionalCall', _67 => _67(error)]);
+              _optionalChain([onError, 'optionalCall', _77 => _77(error)]);
             }
           );
         } else {
@@ -2777,7 +2898,7 @@ ${planningInstruction}` : planningInstruction;
           setCommandResult(result);
           setCommandState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _68 => _68(result)]);
+          _optionalChain([onComplete, 'optionalCall', _78 => _78(result)]);
         }
       } else {
         const commandInstruction = `CRITICAL COMMAND MODE: Maximum 10 words per response. Execute the command immediately. Make reasonable assumptions based on context. Use sensible defaults for missing details. DO NOT ask questions unless something is truly impossible without user input (e.g., missing required password). State what you're doing or the result. Examples: "Analyzing customer data from last quarter..." or "Created 5 new database entries successfully" or "Search complete: found 12 matching results". NO greetings, NO filler words, NO clarification requests. Action/result only.`;
@@ -2806,16 +2927,16 @@ ${commandInstruction}` : commandInstruction;
               } else if (chunk.type === "tool_call" && chunk.tool_name) {
                 lastToolName = chunk.tool_name;
                 setCurrentToolName(chunk.tool_name);
-                _optionalChain([onToolCall, 'optionalCall', _69 => _69(chunk.tool_name, chunk.tool_id || "")]);
+                _optionalChain([onToolCall, 'optionalCall', _79 => _79(chunk.tool_name, chunk.tool_id || "")]);
                 accumulatedContent = "";
                 setStreamedContent("");
               } else if (chunk.type === "tool_result") {
-                _optionalChain([onToolResult, 'optionalCall', _70 => _70(lastToolName, chunk.content)]);
+                _optionalChain([onToolResult, 'optionalCall', _80 => _80(lastToolName, chunk.content)]);
                 setCurrentToolName(null);
               } else if (chunk.type === "thread_id" && chunk.thread_id) {
                 if (!currentThreadId) {
                   setCurrentThreadId(chunk.thread_id);
-                  _optionalChain([onThreadChange, 'optionalCall', _71 => _71(chunk.thread_id)]);
+                  _optionalChain([onThreadChange, 'optionalCall', _81 => _81(chunk.thread_id)]);
                 }
               } else if (chunk.type === "request_id" && chunk.request_id) {
                 setCurrentRequestId(chunk.request_id);
@@ -2831,13 +2952,13 @@ ${commandInstruction}` : commandInstruction;
               setCommandState("success");
               setProgress(100);
               setCurrentRequestId(null);
-              _optionalChain([onComplete, 'optionalCall', _72 => _72(result)]);
+              _optionalChain([onComplete, 'optionalCall', _82 => _82(result)]);
             },
             (error) => {
               setCommandError(error);
               setCommandState("error");
               setCurrentRequestId(null);
-              _optionalChain([onError, 'optionalCall', _73 => _73(error)]);
+              _optionalChain([onError, 'optionalCall', _83 => _83(error)]);
             }
           );
         } else {
@@ -2857,14 +2978,14 @@ ${commandInstruction}` : commandInstruction;
           setCommandResult(result);
           setCommandState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _74 => _74(result)]);
+          _optionalChain([onComplete, 'optionalCall', _84 => _84(result)]);
         }
       }
     } catch (err) {
       const error = err instanceof Error ? err : new Error("Unknown error");
       setCommandError(error);
       setCommandState("error");
-      _optionalChain([onError, 'optionalCall', _75 => _75(error)]);
+      _optionalChain([onError, 'optionalCall', _85 => _85(error)]);
     }
   };
   const resetCommand = () => {
@@ -2956,8 +3077,8 @@ ${planToExecute}`;
           executeCommand(text, files);
         },
         state: commandState,
-        response: _optionalChain([commandResult, 'optionalAccess', _76 => _76.data, 'optionalAccess', _77 => _77.summary]) || _optionalChain([commandResult, 'optionalAccess', _78 => _78.message]),
-        error: _optionalChain([commandError, 'optionalAccess', _79 => _79.message]),
+        response: _optionalChain([commandResult, 'optionalAccess', _86 => _86.data, 'optionalAccess', _87 => _87.summary]) || _optionalChain([commandResult, 'optionalAccess', _88 => _88.message]),
+        error: _optionalChain([commandError, 'optionalAccess', _89 => _89.message]),
         plan,
         streamedContent,
         toolName: currentToolName,
@@ -3125,13 +3246,13 @@ ${planningInstruction}` : planningInstruction;
             const error2 = err instanceof Error ? err : new Error("Failed to generate plan");
             setError(error2);
             setState("error");
-            _optionalChain([onError, 'optionalCall', _80 => _80(error2)]);
+            _optionalChain([onError, 'optionalCall', _90 => _90(error2)]);
           });
         } catch (err) {
           const error2 = err instanceof Error ? err : new Error("Failed to generate plan");
           setError(error2);
           setState("error");
-          _optionalChain([onError, 'optionalCall', _81 => _81(error2)]);
+          _optionalChain([onError, 'optionalCall', _91 => _91(error2)]);
         }
       }
       return;
@@ -3142,7 +3263,7 @@ ${planningInstruction}` : planningInstruction;
     setStreamedContent("");
     setCommand("");
     setUploadedFiles([]);
-    _optionalChain([onStart, 'optionalCall', _82 => _82()]);
+    _optionalChain([onStart, 'optionalCall', _92 => _92()]);
     try {
       if (useMock) {
         if (enableStreaming) {
@@ -3153,16 +3274,16 @@ ${planningInstruction}` : planningInstruction;
               if (chunk.type === "token" && chunk.content) {
                 accumulatedContent += chunk.content;
                 setStreamedContent(accumulatedContent);
-                _optionalChain([onChunk, 'optionalCall', _83 => _83(chunk.content)]);
+                _optionalChain([onChunk, 'optionalCall', _93 => _93(chunk.content)]);
                 const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);
                 setProgress(estimatedProgress);
-                _optionalChain([onProgress, 'optionalCall', _84 => _84(estimatedProgress)]);
+                _optionalChain([onProgress, 'optionalCall', _94 => _94(estimatedProgress)]);
               } else if (chunk.type === "widget" && chunk.widget) {
                 const widget = chunk.widget;
                 setResult((prev) => ({
                   success: true,
-                  data: _optionalChain([prev, 'optionalAccess', _85 => _85.data]) || {},
-                  widgets: [..._optionalChain([prev, 'optionalAccess', _86 => _86.widgets]) || [], widget],
+                  data: _optionalChain([prev, 'optionalAccess', _95 => _95.data]) || {},
+                  widgets: [..._optionalChain([prev, 'optionalAccess', _96 => _96.widgets]) || [], widget],
                   message: accumulatedContent || "Command executed successfully"
                 }));
               }
@@ -3182,19 +3303,19 @@ ${planningInstruction}` : planningInstruction;
               setResult(result2);
               setState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _87 => _87(result2)]);
+              _optionalChain([onComplete, 'optionalCall', _97 => _97(result2)]);
             },
             (error2) => {
               setError(error2);
               setState("error");
-              _optionalChain([onError, 'optionalCall', _88 => _88(error2)]);
+              _optionalChain([onError, 'optionalCall', _98 => _98(error2)]);
             }
           );
         } else {
           const progressInterval = setInterval(() => {
             setProgress((prev) => {
               const next = Math.min(prev + 10, 90);
-              _optionalChain([onProgress, 'optionalCall', _89 => _89(next)]);
+              _optionalChain([onProgress, 'optionalCall', _99 => _99(next)]);
               return next;
             });
           }, 200);
@@ -3218,7 +3339,7 @@ ${planningInstruction}` : planningInstruction;
           setResult(result2);
           setState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _90 => _90(result2)]);
+          _optionalChain([onComplete, 'optionalCall', _100 => _100(result2)]);
         }
       } else {
         if (enableStreaming) {
@@ -3264,16 +3385,16 @@ ${commandInstruction}` : commandInstruction;
               if (chunk.type === "token" && chunk.content) {
                 accumulatedContent += chunk.content;
                 setStreamedContent(accumulatedContent);
-                _optionalChain([onChunk, 'optionalCall', _91 => _91(chunk.content)]);
+                _optionalChain([onChunk, 'optionalCall', _101 => _101(chunk.content)]);
                 const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);
                 setProgress(estimatedProgress);
-                _optionalChain([onProgress, 'optionalCall', _92 => _92(estimatedProgress)]);
+                _optionalChain([onProgress, 'optionalCall', _102 => _102(estimatedProgress)]);
               } else if (chunk.type === "widget" && chunk.widget) {
                 const widget = chunk.widget;
                 setResult((prev) => ({
                   success: true,
-                  data: _optionalChain([prev, 'optionalAccess', _93 => _93.data]) || {},
-                  widgets: [..._optionalChain([prev, 'optionalAccess', _94 => _94.widgets]) || [], widget],
+                  data: _optionalChain([prev, 'optionalAccess', _103 => _103.data]) || {},
+                  widgets: [..._optionalChain([prev, 'optionalAccess', _104 => _104.widgets]) || [], widget],
                   message: accumulatedContent || "Command executed successfully"
                 }));
               }
@@ -3293,20 +3414,20 @@ ${commandInstruction}` : commandInstruction;
               setResult(result2);
               setState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _95 => _95(result2)]);
+              _optionalChain([onComplete, 'optionalCall', _105 => _105(result2)]);
             },
             (error2) => {
               const err = error2 instanceof Error ? error2 : new Error("Unknown error");
               setError(err);
               setState("error");
-              _optionalChain([onError, 'optionalCall', _96 => _96(err)]);
+              _optionalChain([onError, 'optionalCall', _106 => _106(err)]);
             }
           );
         } else {
           const progressInterval = setInterval(() => {
             setProgress((prev) => {
               const next = Math.min(prev + 10, 90);
-              _optionalChain([onProgress, 'optionalCall', _97 => _97(next)]);
+              _optionalChain([onProgress, 'optionalCall', _107 => _107(next)]);
               return next;
             });
           }, 200);
@@ -3362,14 +3483,14 @@ ${commandInstruction}` : commandInstruction;
           setResult(result2);
           setState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _98 => _98(result2)]);
+          _optionalChain([onComplete, 'optionalCall', _108 => _108(result2)]);
         }
       }
     } catch (err) {
       const error2 = err instanceof Error ? err : new Error("Unknown error");
       setError(error2);
       setState("error");
-      _optionalChain([onError, 'optionalCall', _99 => _99(error2)]);
+      _optionalChain([onError, 'optionalCall', _109 => _109(error2)]);
     }
   };
   const resetCommand = () => {
@@ -3402,14 +3523,14 @@ ${planToExecute}`;
   };
   const handleFileSelect = async (e) => {
     if (e.target.files && e.target.files.length > 0) {
-      _optionalChain([onFileUpload, 'optionalCall', _100 => _100(e.target.files)]);
+      _optionalChain([onFileUpload, 'optionalCall', _110 => _110(e.target.files)]);
       const files = [];
       for (let i = 0; i < e.target.files.length; i++) {
         const file = e.target.files[i];
         const reader = new FileReader();
         await new Promise((resolve) => {
           reader.onload = (event) => {
-            if (_optionalChain([event, 'access', _101 => _101.target, 'optionalAccess', _102 => _102.result])) {
+            if (_optionalChain([event, 'access', _111 => _111.target, 'optionalAccess', _112 => _112.result])) {
               const fullDataUrl = event.target.result;
               const base64Data = fullDataUrl.split(",")[1];
               if (file.type.startsWith("image/")) {
@@ -3503,7 +3624,7 @@ ${planToExecute}`;
               enableFileUpload && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 "button",
                 {
-                  onClick: () => _optionalChain([fileInputRef, 'access', _103 => _103.current, 'optionalAccess', _104 => _104.click, 'call', _105 => _105()]),
+                  onClick: () => _optionalChain([fileInputRef, 'access', _113 => _113.current, 'optionalAccess', _114 => _114.click, 'call', _115 => _115()]),
                   className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-neutral-500 dark:!text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800",
                   title: "Attach file",
                   children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M8.4 2.8L4.4 6.8C3.736 7.464 3.736 8.536 4.4 9.2C5.064 9.864 6.136 9.864 6.8 9.2L11.6 4.4C12.704 3.296 12.704 1.504 11.6 0.4C10.496 -0.704 8.704 -0.704 7.6 0.4L2.8 5.2C1.256 6.744 1.256 9.256 2.8 10.8C4.344 12.344 6.856 12.344 8.4 10.8L12.4 6.8", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(1.6, 2.4)" }) })
@@ -3722,7 +3843,7 @@ ${planToExecute}`;
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-5 h-5 text-red-600 mt-0.5 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
               /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "text-sm font-semibold text-red-800 dark:text-red-400", children: "Error" }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: _optionalChain([error, 'optionalAccess', _106 => _106.message]) })
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: _optionalChain([error, 'optionalAccess', _116 => _116.message]) })
               ] })
             ] }) }),
             allowInput && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -3750,7 +3871,7 @@ ${planToExecute}`;
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-green-700 dark:text-green-300 text-sm", children: "Command executed successfully" })
               ] })
             ] }),
-            _optionalChain([result, 'access', _107 => _107.data, 'optionalAccess', _108 => _108.summary]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-neutral-700 dark:text-neutral-300 text-sm leading-relaxed whitespace-pre-line", children: result.data.summary }),
+            _optionalChain([result, 'access', _117 => _117.data, 'optionalAccess', _118 => _118.summary]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-neutral-700 dark:text-neutral-300 text-sm leading-relaxed whitespace-pre-line", children: result.data.summary }),
             result.widgets && result.widgets.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "space-y-3", children: result.widgets.map((widget) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               WidgetRenderer,
               {
@@ -3801,7 +3922,7 @@ ${planToExecute}`;
             enableFileUpload && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "button",
               {
-                onClick: () => _optionalChain([fileInputRef, 'access', _109 => _109.current, 'optionalAccess', _110 => _110.click, 'call', _111 => _111()]),
+                onClick: () => _optionalChain([fileInputRef, 'access', _119 => _119.current, 'optionalAccess', _120 => _120.click, 'call', _121 => _121()]),
                 className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-neutral-500 dark:!text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800",
                 title: "Attach file",
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M8.4 2.8L4.4 6.8C3.736 7.464 3.736 8.536 4.4 9.2C5.064 9.864 6.136 9.864 6.8 9.2L11.6 4.4C12.704 3.296 12.704 1.504 11.6 0.4C10.496 -0.704 8.704 -0.704 7.6 0.4L2.8 5.2C1.256 6.744 1.256 9.256 2.8 10.8C4.344 12.344 6.856 12.344 8.4 10.8L12.4 6.8", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(1.6, 2.4)" }) })
@@ -3987,25 +4108,25 @@ function Prompt({
     const newValue = e.target.value;
     if (!maxLength || newValue.length <= maxLength) {
       setValue(newValue);
-      _optionalChain([onChange, 'optionalCall', _112 => _112(newValue)]);
+      _optionalChain([onChange, 'optionalCall', _122 => _122(newValue)]);
     }
   };
   const handleSubmit = async () => {
     if (value.length < minLength) return;
-    _optionalChain([onSubmit, 'optionalCall', _113 => _113(value)]);
+    _optionalChain([onSubmit, 'optionalCall', _123 => _123(value)]);
     setIsLoading(true);
     try {
       if (useMock) {
         await new Promise((resolve) => setTimeout(resolve, 1500));
         const mockResult = `Enhanced version: ${value} [AI-generated content]`;
-        _optionalChain([onResult, 'optionalCall', _114 => _114(mockResult)]);
+        _optionalChain([onResult, 'optionalCall', _124 => _124(mockResult)]);
         setValue("");
       } else {
         const response = await aptevaClient.chat({
           agent_id: agentId,
           message: value
         });
-        _optionalChain([onResult, 'optionalCall', _115 => _115(response.message)]);
+        _optionalChain([onResult, 'optionalCall', _125 => _125(response.message)]);
         setValue("");
       }
     } catch (error) {
@@ -4100,7 +4221,7 @@ function Stream({
   }, [autoStart]);
   const startStreaming = async () => {
     setIsStreaming(true);
-    _optionalChain([onStart, 'optionalCall', _116 => _116()]);
+    _optionalChain([onStart, 'optionalCall', _126 => _126()]);
     try {
       if (useMock) {
         const mockText = "This is a simulated streaming response from the AI agent. In a real implementation, this would stream data from your backend API. The text appears word by word to simulate the streaming effect. You can customize the typing speed and styling based on your needs.";
@@ -4108,13 +4229,13 @@ function Stream({
           mockText,
           (chunk) => {
             setText((prev) => prev + chunk);
-            _optionalChain([onChunk, 'optionalCall', _117 => _117(chunk)]);
+            _optionalChain([onChunk, 'optionalCall', _127 => _127(chunk)]);
           },
           typingSpeed
         );
         setIsComplete(true);
         setIsStreaming(false);
-        _optionalChain([onComplete, 'optionalCall', _118 => _118(text + mockText)]);
+        _optionalChain([onComplete, 'optionalCall', _128 => _128(text + mockText)]);
       } else {
         let accumulatedText = "";
         await aptevaClient.chatStream(
@@ -4127,24 +4248,24 @@ function Stream({
             if (chunk.type === "token" && chunk.content) {
               accumulatedText += chunk.content;
               setText(accumulatedText);
-              _optionalChain([onChunk, 'optionalCall', _119 => _119(chunk.content)]);
+              _optionalChain([onChunk, 'optionalCall', _129 => _129(chunk.content)]);
             }
           },
           () => {
             setIsComplete(true);
             setIsStreaming(false);
-            _optionalChain([onComplete, 'optionalCall', _120 => _120(accumulatedText)]);
+            _optionalChain([onComplete, 'optionalCall', _130 => _130(accumulatedText)]);
           },
           (error) => {
             const err = error instanceof Error ? error : new Error("Streaming error");
-            _optionalChain([onError, 'optionalCall', _121 => _121(err)]);
+            _optionalChain([onError, 'optionalCall', _131 => _131(err)]);
             setIsStreaming(false);
           }
         );
       }
     } catch (error) {
       const err = error instanceof Error ? error : new Error("Streaming error");
-      _optionalChain([onError, 'optionalCall', _122 => _122(err)]);
+      _optionalChain([onError, 'optionalCall', _132 => _132(err)]);
       setIsStreaming(false);
     }
   };
@@ -4236,7 +4357,7 @@ function ThreadList({
 }) {
   const [searchQuery, setSearchQuery] = _react.useState.call(void 0, "");
   const filteredThreads = threads.filter(
-    (thread) => thread.title.toLowerCase().includes(searchQuery.toLowerCase()) || _optionalChain([thread, 'access', _123 => _123.preview, 'optionalAccess', _124 => _124.toLowerCase, 'call', _125 => _125(), 'access', _126 => _126.includes, 'call', _127 => _127(searchQuery.toLowerCase())])
+    (thread) => thread.title.toLowerCase().includes(searchQuery.toLowerCase()) || _optionalChain([thread, 'access', _133 => _133.preview, 'optionalAccess', _134 => _134.toLowerCase, 'call', _135 => _135(), 'access', _136 => _136.includes, 'call', _137 => _137(searchQuery.toLowerCase())])
   );
   const groupedThreads = groupBy === "date" ? groupThreadsByDate(filteredThreads) : { All: filteredThreads };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col h-full", children: [
@@ -4258,8 +4379,8 @@ function ThreadList({
           {
             thread,
             isActive: thread.id === currentThreadId,
-            onSelect: () => _optionalChain([onThreadSelect, 'optionalCall', _128 => _128(thread.id)]),
-            onDelete: () => _optionalChain([onThreadDelete, 'optionalCall', _129 => _129(thread.id)])
+            onSelect: () => _optionalChain([onThreadSelect, 'optionalCall', _138 => _138(thread.id)]),
+            onDelete: () => _optionalChain([onThreadDelete, 'optionalCall', _139 => _139(thread.id)])
           },
           thread.id
         ))
@@ -4321,7 +4442,7 @@ function Threads({
       threads.slice(0, 5).map((thread) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "button",
         {
-          onClick: () => _optionalChain([onThreadSelect, 'optionalCall', _130 => _130(thread.id)]),
+          onClick: () => _optionalChain([onThreadSelect, 'optionalCall', _140 => _140(thread.id)]),
           className: cn(
             "px-4 py-2 whitespace-nowrap font-medium transition-colors",
             thread.id === currentThreadId ? "border-b-2 border-apteva-500 text-apteva-500" : "text-neutral-600 hover:text-neutral-900"