@apteva/apteva-kit 0.1.15 → 0.1.17

package/dist/index.js

@@ -1062,6 +1062,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
   const [fileError, setFileError] = _react.useState.call(void 0, null);
   const textareaRef = _react.useRef.call(void 0, null);
   const fileInputRef = _react.useRef.call(void 0, null);
+  const menuButtonRef = _react.useRef.call(void 0, null);
   const handleKeyDown = (e) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
@@ -1139,39 +1140,6 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-4 h-4 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", 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.jsx.call(void 0, "span", { children: fileError })
     ] }) }),
-    showMenu && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "fixed inset-0 z-10", onClick: () => setShowMenu(false) }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "absolute bottom-full left-4 mb-2 bg-gray-800 dark:bg-gray-700 rounded-xl shadow-lg overflow-hidden z-20 min-w-[240px]", children: [
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-          "button",
-          {
-            onClick: () => {
-              _optionalChain([fileInputRef, 'access', _19 => _19.current, 'optionalAccess', _20 => _20.click, 'call', _21 => _21()]);
-              setShowMenu(false);
-            },
-            className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left",
-            children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10.5 3.5L5.5 8.5C4.67157 9.32843 4.67157 10.6716 5.5 11.5C6.32843 12.3284 7.67157 12.3284 8.5 11.5L14.5 5.5C15.8807 4.11929 15.8807 1.88071 14.5 0.5C13.1193 -0.880711 10.8807 -0.880711 9.5 0.5L3.5 6.5C1.56846 8.43154 1.56846 11.5685 3.5 13.5C5.43154 15.4315 8.56846 15.4315 10.5 13.5L15.5 8.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(2, 3)" }) }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "!text-sm font-medium", children: "Add photos & files" })
-            ]
-          }
-        ),
-        onSwitchMode && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-          "button",
-          {
-            onClick: () => {
-              onSwitchMode();
-              setShowMenu(false);
-            },
-            className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left border-t border-gray-700 dark:border-gray-600",
-            children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "!text-sm font-medium", children: "Switch to command mode" })
-            ]
-          }
-        )
-      ] })
-    ] }),
     pendingFiles.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mb-2 flex flex-wrap gap-2", children: pendingFiles.map((pf, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "div",
       {
@@ -1195,16 +1163,62 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
       },
       index
     )) }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative border-2 border-gray-300 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-900 transition-all duration-300 flex items-center px-3 py-2 gap-3", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        "button",
-        {
-          onClick: () => setShowMenu(!showMenu),
-          className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-gray-700 dark:!text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800",
-          title: "More options",
-          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10 5v10M5 10h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
-        }
-      ),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-composer relative border-2 border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 transition-all duration-300 flex items-center px-3 py-2 gap-3", children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative flex-shrink-0", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "button",
+          {
+            ref: menuButtonRef,
+            onClick: () => setShowMenu(!showMenu),
+            className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all !text-gray-700 dark:!text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800",
+            title: "More options",
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10 5v10M5 10h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+          }
+        ),
+        showMenu && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "fixed inset-0 z-[9998]", onClick: () => setShowMenu(false) }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            "div",
+            {
+              className: "fixed bg-gray-800 dark:bg-gray-700 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
+              style: {
+                left: _nullishCoalesce(_optionalChain([menuButtonRef, 'access', _19 => _19.current, 'optionalAccess', _20 => _20.getBoundingClientRect, 'call', _21 => _21(), 'access', _22 => _22.left]), () => ( 0)),
+                top: (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _23 => _23.current, 'optionalAccess', _24 => _24.getBoundingClientRect, 'call', _25 => _25(), 'access', _26 => _26.bottom]), () => ( 0))) + 8
+              },
+              children: [
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                  "button",
+                  {
+                    onClick: () => {
+                      _optionalChain([fileInputRef, 'access', _27 => _27.current, 'optionalAccess', _28 => _28.click, 'call', _29 => _29()]);
+                      setShowMenu(false);
+                    },
+                    className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left",
+                    children: [
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10.5 3.5L5.5 8.5C4.67157 9.32843 4.67157 10.6716 5.5 11.5C6.32843 12.3284 7.67157 12.3284 8.5 11.5L14.5 5.5C15.8807 4.11929 15.8807 1.88071 14.5 0.5C13.1193 -0.880711 10.8807 -0.880711 9.5 0.5L3.5 6.5C1.56846 8.43154 1.56846 11.5685 3.5 13.5C5.43154 15.4315 8.56846 15.4315 10.5 13.5L15.5 8.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(2, 3)" }) }),
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "!text-sm font-medium", children: "Add photos & files" })
+                    ]
+                  }
+                ),
+                onSwitchMode && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                  "button",
+                  {
+                    onClick: () => {
+                      onSwitchMode();
+                      setShowMenu(false);
+                    },
+                    className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left border-t border-gray-700 dark:border-gray-600",
+                    children: [
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-4.5 h-4.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }),
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "!text-sm font-medium", children: "Switch to command mode" })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ] }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "textarea",
         {
@@ -1286,8 +1300,8 @@ function CommandComposer({
     }
   };
   const handleNewCommand = () => {
-    _optionalChain([onReset, 'optionalCall', _22 => _22()]);
-    _optionalChain([inputRef, 'access', _23 => _23.current, 'optionalAccess', _24 => _24.focus, 'call', _25 => _25()]);
+    _optionalChain([onReset, 'optionalCall', _30 => _30()]);
+    _optionalChain([inputRef, 'access', _31 => _31.current, 'optionalAccess', _32 => _32.focus, 'call', _33 => _33()]);
   };
   const handleInputChange = (value) => {
     setInput(value);
@@ -1370,76 +1384,11 @@ function CommandComposer({
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-3 h-3 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", 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.jsx.call(void 0, "span", { children: fileError })
     ] }) }),
-    showMenu && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "fixed inset-0 z-[9998]", onClick: () => setShowMenu(false) }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-        "div",
-        {
-          className: "fixed bg-gray-800 dark:bg-gray-700 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
-          style: {
-            bottom: "auto",
-            left: _nullishCoalesce(_optionalChain([menuButtonRef, 'access', _26 => _26.current, 'optionalAccess', _27 => _27.getBoundingClientRect, 'call', _28 => _28(), 'access', _29 => _29.left]), () => ( 0)),
-            top: (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _30 => _30.current, 'optionalAccess', _31 => _31.getBoundingClientRect, 'call', _32 => _32(), 'access', _33 => _33.top]), () => ( 0))) - 8,
-            transform: "translateY(-100%)"
-          },
-          children: [
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-              "button",
-              {
-                onClick: () => {
-                  _optionalChain([fileInputRef, 'access', _34 => _34.current, 'optionalAccess', _35 => _35.click, 'call', _36 => _36()]);
-                  setShowMenu(false);
-                },
-                className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left",
-                children: [
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10.5 3.5L5.5 8.5C4.67157 9.32843 4.67157 10.6716 5.5 11.5C6.32843 12.3284 7.67157 12.3284 8.5 11.5L14.5 5.5C15.8807 4.11929 15.8807 1.88071 14.5 0.5C13.1193 -0.880711 10.8807 -0.880711 9.5 0.5L3.5 6.5C1.56846 8.43154 1.56846 11.5685 3.5 13.5C5.43154 15.4315 8.56846 15.4315 10.5 13.5L15.5 8.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(2, 3)" }) }),
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "!text-sm font-medium", children: "Add photos & files" })
-                ]
-              }
-            ),
-            onExpand && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-              "button",
-              {
-                onClick: () => {
-                  onExpand();
-                  setShowMenu(false);
-                },
-                className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left border-t border-gray-700 dark:border-gray-600",
-                children: [
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-4.5 h-4.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" }) }),
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "!text-sm font-medium", children: "Expand to chat" })
-                ]
-              }
-            )
-          ]
-        }
-      )
-    ] }),
-    pendingFiles.length > 0 && state === "idle" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mb-2 flex flex-wrap gap-2", children: pendingFiles.map((pf, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      "div",
-      {
-        className: "relative group flex items-center gap-2 px-2 py-1.5 bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg",
-        children: [
-          pf.preview ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: pf.preview, alt: pf.file.name, className: "w-6 h-6 object-cover rounded" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-6 h-6 flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded !text-gray-500 dark:!text-gray-400", children: getFileIcon(pf.file.type) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-xs font-medium !text-gray-700 dark:!text-gray-300 truncate max-w-[100px]", children: pf.file.name }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            "button",
-            {
-              onClick: () => removeFile(index),
-              className: "w-4 h-4 bg-gray-500 hover:bg-red-500 text-white rounded-full flex items-center justify-center",
-              title: "Remove file",
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-2.5 h-2.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
-            }
-          )
-        ]
-      },
-      index
-    )) }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "div",
       {
         className: cn(
-          "flex items-center gap-2 px-3 py-2 border-2 rounded-2xl bg-white dark:bg-gray-900 transition-all duration-200",
+          "apteva-composer flex items-center gap-2 px-3 py-2 border-2 bg-white dark:bg-gray-900 transition-all duration-200",
           state === "idle" && "border-gray-200 dark:border-gray-700",
           state === "loading" && "border-blue-400 dark:border-blue-500",
           state === "plan-pending" && "border-amber-400 dark:border-amber-500",
@@ -1447,18 +1396,85 @@ function CommandComposer({
           state === "error" && "border-red-400 dark:border-red-500"
         ),
         children: [
-          state === "idle" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            "button",
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "w-8 h-8 flex items-center justify-center flex-shrink-0", children: [
+            state === "idle" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative", children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "button",
+                {
+                  ref: menuButtonRef,
+                  onClick: () => setShowMenu(!showMenu),
+                  className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all !text-gray-500 dark:!text-gray-400 hover:!text-gray-700 dark:hover:!text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800",
+                  title: "More options",
+                  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10 5v10M5 10h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                }
+              ),
+              showMenu && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "fixed inset-0 z-[9998]", onClick: () => setShowMenu(false) }),
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                  "div",
+                  {
+                    className: "fixed bg-gray-800 dark:bg-gray-700 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
+                    style: {
+                      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', _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-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left",
+                          children: [
+                            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10.5 3.5L5.5 8.5C4.67157 9.32843 4.67157 10.6716 5.5 11.5C6.32843 12.3284 7.67157 12.3284 8.5 11.5L14.5 5.5C15.8807 4.11929 15.8807 1.88071 14.5 0.5C13.1193 -0.880711 10.8807 -0.880711 9.5 0.5L3.5 6.5C1.56846 8.43154 1.56846 11.5685 3.5 13.5C5.43154 15.4315 8.56846 15.4315 10.5 13.5L15.5 8.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(2, 3)" }) }),
+                            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "!text-sm font-medium", children: "Add photos & files" })
+                          ]
+                        }
+                      ),
+                      onExpand && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                        "button",
+                        {
+                          onClick: () => {
+                            onExpand();
+                            setShowMenu(false);
+                          },
+                          className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left border-t border-gray-700 dark:border-gray-600",
+                          children: [
+                            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-4.5 h-4.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" }) }),
+                            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "!text-sm font-medium", children: "Expand to chat" })
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] })
+            ] }),
+            state === "loading" && !toolName && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-4 h-4 border-2 border-blue-200 border-t-blue-500 rounded-full animate-spin" }),
+            state === "loading" && toolName && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-2 h-2 rounded-full bg-blue-500 animate-pulse" })
+          ] }),
+          pendingFiles.length > 0 && state === "idle" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center gap-1 flex-shrink-0", children: pendingFiles.map((pf, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            "div",
             {
-              ref: menuButtonRef,
-              onClick: () => setShowMenu(!showMenu),
-              className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-gray-500 dark:!text-gray-400 hover:!text-gray-700 dark:hover:!text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800",
-              title: "More options",
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10 5v10M5 10h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
-            }
-          ),
-          state === "loading" && !toolName && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-4 h-4 border-2 border-blue-200 border-t-blue-500 rounded-full animate-spin flex-shrink-0" }),
-          state === "loading" && toolName && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-2 h-2 rounded-full bg-blue-500 animate-pulse flex-shrink-0" }),
+              className: "relative group flex items-center justify-center w-6 h-6 bg-gray-100 dark:bg-gray-800 rounded overflow-hidden",
+              title: pf.file.name,
+              children: [
+                pf.preview ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: pf.preview, alt: pf.file.name, className: "w-6 h-6 object-cover" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-xs !text-gray-500 dark:!text-gray-400", children: getFileIcon(pf.file.type) }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "button",
+                  {
+                    onClick: () => removeFile(index),
+                    className: "absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-opacity",
+                    title: "Remove",
+                    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-3 h-3 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                  }
+                )
+              ]
+            },
+            index
+          )) }),
           state === "idle" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "textarea",
             {
@@ -1466,7 +1482,7 @@ function CommandComposer({
               value: input,
               onChange: (e) => handleInputChange(e.target.value),
               onKeyDown: handleKeyDown,
-              placeholder,
+              placeholder: pendingFiles.length > 0 ? "Add a message..." : placeholder,
               disabled,
               rows: 1,
               className: cn(
@@ -1494,25 +1510,24 @@ function CommandComposer({
               ] }) : displayContent
             }
           ),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1 flex-shrink-0", children: [
-            state === "plan-pending" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                "button",
-                {
-                  onClick: onApprove,
-                  className: "px-2 py-1 bg-amber-500 text-white rounded-lg hover:bg-amber-600 transition-colors text-xs font-medium",
-                  children: "Approve"
-                }
-              ),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                "button",
-                {
-                  onClick: onReject,
-                  className: "px-2 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors text-xs font-medium",
-                  children: "Modify"
-                }
-              )
-            ] }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-8 h-8 flex items-center justify-center flex-shrink-0", children: state === "plan-pending" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                onClick: onApprove,
+                className: "px-2 py-1 bg-amber-500 text-white rounded-lg hover:bg-amber-600 transition-colors text-xs font-medium",
+                children: "Approve"
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                onClick: onReject,
+                className: "px-2 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors text-xs font-medium",
+                children: "Modify"
+              }
+            )
+          ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
             (state === "success" || state === "error") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "button",
               {
@@ -1537,32 +1552,10 @@ function CommandComposer({
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 12h14M12 5l7 7-7 7" }) })
               }
             )
-          ] })
+          ] }) })
         ]
       }
     ),
-    state === "success" && _optionalChain([response, 'optionalAccess', _37 => _37.includes, 'call', _38 => _38("weather")]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mt-3 p-3 bg-gradient-to-r from-blue-50 to-cyan-50 dark:from-blue-900/20 dark:to-cyan-900/20 border border-blue-200 dark:border-blue-800 rounded-xl", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-3xl", children: "\u2600\uFE0F" }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-sm font-medium text-gray-900 dark:text-white", children: "Paris, France" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Sunny, 22\xB0C" })
-      ] }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { className: "px-3 py-1 text-xs bg-blue-500 text-white rounded-lg hover:bg-blue-600", children: "Details" })
-    ] }) }),
-    state === "success" && _optionalChain([response, 'optionalAccess', _39 => _39.includes, 'call', _40 => _40("trip")]) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mt-3 p-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: "https://images.unsplash.com/photo-1502602898657-3e91760cbb34?w=400&h=150&fit=crop", alt: "Paris", className: "w-full h-24 object-cover rounded-lg mb-2" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-sm font-medium text-gray-900 dark:text-white", children: "Paris Weekend Getaway" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-xs text-gray-500 dark:text-gray-400 mb-2", children: "3 days \xB7 $850" }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { className: "flex-1 px-2 py-1 text-xs bg-blue-500 text-white rounded-lg hover:bg-blue-600", children: "Book" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { className: "flex-1 px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600", children: "Details" })
-      ] })
-    ] }),
-    state === "success" && _optionalChain([response, 'optionalAccess', _41 => _41.includes, 'call', _42 => _42("task")]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mt-3 border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden", children: ["Review PR #123", "Update documentation", "Fix login bug"].map((task, i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: `flex items-center gap-2 px-3 py-2 ${i > 0 ? "border-t border-gray-100 dark:border-gray-800" : ""}`, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: `w-2 h-2 rounded-full ${i === 0 ? "bg-green-500" : i === 1 ? "bg-yellow-500" : "bg-red-500"}` }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "flex-1 text-sm text-gray-700 dark:text-gray-300", children: task }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { className: "text-xs text-blue-500 hover:text-blue-600", children: "View" })
-    ] }, i)) }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "input",
       {
@@ -1662,7 +1655,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', _43 => _43.body, 'optionalAccess', _44 => _44.getReader, 'call', _45 => _45()]);
+      const reader = _optionalChain([response, 'access', _45 => _45.body, 'optionalAccess', _46 => _46.getReader, 'call', _47 => _47()]);
       if (!reader) {
         throw new Error("Response body is not readable");
       }
@@ -1680,7 +1673,7 @@ var AptevaClient = class {
           if (line.startsWith("data: ")) {
             const data = line.slice(6);
             if (data === "[DONE]") {
-              _optionalChain([onComplete, 'optionalCall', _46 => _46(threadId)]);
+              _optionalChain([onComplete, 'optionalCall', _48 => _48(threadId)]);
               return;
             }
             try {
@@ -1695,10 +1688,10 @@ var AptevaClient = class {
           }
         }
       }
-      _optionalChain([onComplete, 'optionalCall', _47 => _47(threadId)]);
+      _optionalChain([onComplete, 'optionalCall', _49 => _49(threadId)]);
     } catch (error) {
       const err = error instanceof Error ? error : new Error("Unknown error");
-      _optionalChain([onError, 'optionalCall', _48 => _48(err)]);
+      _optionalChain([onError, 'optionalCall', _50 => _50(err)]);
       throw err;
     }
   }
@@ -1775,6 +1768,7 @@ function Chat({
   onFileUpload,
   onComplete,
   onError,
+  onToolResult,
   // UI
   placeholder,
   showHeader = true,
@@ -1807,7 +1801,7 @@ function Chat({
   }, [apiUrl, apiKey]);
   _react.useEffect.call(void 0, () => {
     if (threadId) {
-      _optionalChain([onThreadChange, 'optionalCall', _49 => _49(threadId)]);
+      _optionalChain([onThreadChange, 'optionalCall', _51 => _51(threadId)]);
     }
   }, [threadId, onThreadChange]);
   _react.useEffect.call(void 0, () => {
@@ -1825,7 +1819,7 @@ function Chat({
   }, [showSettingsMenu]);
   const handleModeChange = (newMode) => {
     setMode(newMode);
-    _optionalChain([onModeChange, 'optionalCall', _50 => _50(newMode)]);
+    _optionalChain([onModeChange, 'optionalCall', _52 => _52(newMode)]);
     if (newMode === "command") {
       setCommandState("idle");
       setCommandResult(null);
@@ -1845,7 +1839,7 @@ function Chat({
       metadata: hasFiles ? { attachments: fileNames } : void 0
     };
     setMessages((prev) => [...prev, userMessage]);
-    _optionalChain([onMessageSent, 'optionalCall', _51 => _51(userMessage)]);
+    _optionalChain([onMessageSent, 'optionalCall', _53 => _53(userMessage)]);
     setIsLoading(true);
     try {
       const messagePayload = await buildMessageWithAttachments(text, files);
@@ -1910,7 +1904,7 @@ function Chat({
                   responseThreadId = chunk.thread_id;
                   if (!currentThreadId) {
                     setCurrentThreadId(chunk.thread_id);
-                    _optionalChain([onThreadChange, 'optionalCall', _52 => _52(chunk.thread_id)]);
+                    _optionalChain([onThreadChange, 'optionalCall', _54 => _54(chunk.thread_id)]);
                   }
                 }
                 break;
@@ -1942,6 +1936,7 @@ function Chat({
                   const toolSegment = contentSegments.find((s) => s.type === "tool" && s.id === chunk.tool_id);
                   if (toolSegment) {
                     toolSegment.result = chunk.content;
+                    _optionalChain([onToolResult, 'optionalCall', _55 => _55(toolSegment.name, chunk.content)]);
                   }
                   updateMessage();
                 }
@@ -1983,7 +1978,7 @@ function Chat({
             });
             if (threadId2 && threadId2 !== currentThreadId) {
               setCurrentThreadId(threadId2);
-              _optionalChain([onThreadChange, 'optionalCall', _53 => _53(threadId2)]);
+              _optionalChain([onThreadChange, 'optionalCall', _56 => _56(threadId2)]);
             }
             setIsLoading(false);
           },
@@ -2003,7 +1998,7 @@ function Chat({
               return [...prev, errorMessage];
             });
             setIsLoading(false);
-            _optionalChain([onError, 'optionalCall', _54 => _54(error)]);
+            _optionalChain([onError, 'optionalCall', _57 => _57(error)]);
           }
         );
       }
@@ -2016,7 +2011,7 @@ function Chat({
         metadata: { error: true }
       };
       setMessages((prev) => [...prev, errorMessage]);
-      _optionalChain([onError, 'optionalCall', _55 => _55(error instanceof Error ? error : new Error("Unknown error"))]);
+      _optionalChain([onError, 'optionalCall', _58 => _58(error instanceof Error ? error : new Error("Unknown error"))]);
     } finally {
       setIsLoading(false);
     }
@@ -2061,7 +2056,7 @@ ${planningInstruction}` : planningInstruction;
           const error = err instanceof Error ? err : new Error("Failed to generate plan");
           setCommandError(error);
           setCommandState("error");
-          _optionalChain([onError, 'optionalCall', _56 => _56(error)]);
+          _optionalChain([onError, 'optionalCall', _59 => _59(error)]);
         }
       }
       return;
@@ -2094,12 +2089,12 @@ ${planningInstruction}` : planningInstruction;
               setCommandResult(result);
               setCommandState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _57 => _57(result)]);
+              _optionalChain([onComplete, 'optionalCall', _60 => _60(result)]);
             },
             (error) => {
               setCommandError(error);
               setCommandState("error");
-              _optionalChain([onError, 'optionalCall', _58 => _58(error)]);
+              _optionalChain([onError, 'optionalCall', _61 => _61(error)]);
             }
           );
         } else {
@@ -2112,7 +2107,7 @@ ${planningInstruction}` : planningInstruction;
           setCommandResult(result);
           setCommandState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _59 => _59(result)]);
+          _optionalChain([onComplete, 'optionalCall', _62 => _62(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.`;
@@ -2122,6 +2117,7 @@ ${commandInstruction}` : commandInstruction;
         const messagePayload = files && files.length > 0 ? await buildMessageWithAttachments(currentCommand, files) : currentCommand;
         if (enableStreaming) {
           let accumulatedContent = "";
+          let lastToolName = "";
           await aptevaClient.chatStream(
             {
               agent_id: agentId,
@@ -2138,15 +2134,17 @@ ${commandInstruction}` : commandInstruction;
                 const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);
                 setProgress(estimatedProgress);
               } else if (chunk.type === "tool_call" && chunk.tool_name) {
+                lastToolName = chunk.tool_name;
                 setCurrentToolName(chunk.tool_name);
                 accumulatedContent = "";
                 setStreamedContent("");
               } else if (chunk.type === "tool_result") {
+                _optionalChain([onToolResult, 'optionalCall', _63 => _63(lastToolName, chunk.content)]);
                 setCurrentToolName(null);
               } else if (chunk.type === "thread_id" && chunk.thread_id) {
                 if (!currentThreadId) {
                   setCurrentThreadId(chunk.thread_id);
-                  _optionalChain([onThreadChange, 'optionalCall', _60 => _60(chunk.thread_id)]);
+                  _optionalChain([onThreadChange, 'optionalCall', _64 => _64(chunk.thread_id)]);
                 }
               }
             },
@@ -2159,12 +2157,12 @@ ${commandInstruction}` : commandInstruction;
               setCommandResult(result);
               setCommandState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _61 => _61(result)]);
+              _optionalChain([onComplete, 'optionalCall', _65 => _65(result)]);
             },
             (error) => {
               setCommandError(error);
               setCommandState("error");
-              _optionalChain([onError, 'optionalCall', _62 => _62(error)]);
+              _optionalChain([onError, 'optionalCall', _66 => _66(error)]);
             }
           );
         } else {
@@ -2184,14 +2182,14 @@ ${commandInstruction}` : commandInstruction;
           setCommandResult(result);
           setCommandState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _63 => _63(result)]);
+          _optionalChain([onComplete, 'optionalCall', _67 => _67(result)]);
         }
       }
     } catch (err) {
       const error = err instanceof Error ? err : new Error("Unknown error");
       setCommandError(error);
       setCommandState("error");
-      _optionalChain([onError, 'optionalCall', _64 => _64(error)]);
+      _optionalChain([onError, 'optionalCall', _68 => _68(error)]);
     }
   };
   const resetCommand = () => {
@@ -2257,8 +2255,8 @@ ${planToExecute}`;
           executeCommand(text, files);
         },
         state: commandState,
-        response: _optionalChain([commandResult, 'optionalAccess', _65 => _65.data, 'optionalAccess', _66 => _66.summary]) || _optionalChain([commandResult, 'optionalAccess', _67 => _67.message]),
-        error: _optionalChain([commandError, 'optionalAccess', _68 => _68.message]),
+        response: _optionalChain([commandResult, 'optionalAccess', _69 => _69.data, 'optionalAccess', _70 => _70.summary]) || _optionalChain([commandResult, 'optionalAccess', _71 => _71.message]),
+        error: _optionalChain([commandError, 'optionalAccess', _72 => _72.message]),
         plan,
         streamedContent,
         toolName: currentToolName,
@@ -2278,6 +2276,9 @@ ${planToExecute}`;
           .animate-pulse-border {
             animation: pulse-border 2s ease-in-out infinite;
           }
+          .apteva-composer {
+            border-radius: var(--apteva-border-radius, 1rem) !important;
+          }
         `
     } })
   ] });
@@ -2422,13 +2423,13 @@ ${planningInstruction}` : planningInstruction;
             const error2 = err instanceof Error ? err : new Error("Failed to generate plan");
             setError(error2);
             setState("error");
-            _optionalChain([onError, 'optionalCall', _69 => _69(error2)]);
+            _optionalChain([onError, 'optionalCall', _73 => _73(error2)]);
           });
         } catch (err) {
           const error2 = err instanceof Error ? err : new Error("Failed to generate plan");
           setError(error2);
           setState("error");
-          _optionalChain([onError, 'optionalCall', _70 => _70(error2)]);
+          _optionalChain([onError, 'optionalCall', _74 => _74(error2)]);
         }
       }
       return;
@@ -2439,7 +2440,7 @@ ${planningInstruction}` : planningInstruction;
     setStreamedContent("");
     setCommand("");
     setUploadedFiles([]);
-    _optionalChain([onStart, 'optionalCall', _71 => _71()]);
+    _optionalChain([onStart, 'optionalCall', _75 => _75()]);
     try {
       if (useMock) {
         if (enableStreaming) {
@@ -2450,16 +2451,16 @@ ${planningInstruction}` : planningInstruction;
               if (chunk.type === "token" && chunk.content) {
                 accumulatedContent += chunk.content;
                 setStreamedContent(accumulatedContent);
-                _optionalChain([onChunk, 'optionalCall', _72 => _72(chunk.content)]);
+                _optionalChain([onChunk, 'optionalCall', _76 => _76(chunk.content)]);
                 const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);
                 setProgress(estimatedProgress);
-                _optionalChain([onProgress, 'optionalCall', _73 => _73(estimatedProgress)]);
+                _optionalChain([onProgress, 'optionalCall', _77 => _77(estimatedProgress)]);
               } else if (chunk.type === "widget" && chunk.widget) {
                 const widget = chunk.widget;
                 setResult((prev) => ({
                   success: true,
-                  data: _optionalChain([prev, 'optionalAccess', _74 => _74.data]) || {},
-                  widgets: [..._optionalChain([prev, 'optionalAccess', _75 => _75.widgets]) || [], widget],
+                  data: _optionalChain([prev, 'optionalAccess', _78 => _78.data]) || {},
+                  widgets: [..._optionalChain([prev, 'optionalAccess', _79 => _79.widgets]) || [], widget],
                   message: accumulatedContent || "Command executed successfully"
                 }));
               }
@@ -2479,19 +2480,19 @@ ${planningInstruction}` : planningInstruction;
               setResult(result2);
               setState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _76 => _76(result2)]);
+              _optionalChain([onComplete, 'optionalCall', _80 => _80(result2)]);
             },
             (error2) => {
               setError(error2);
               setState("error");
-              _optionalChain([onError, 'optionalCall', _77 => _77(error2)]);
+              _optionalChain([onError, 'optionalCall', _81 => _81(error2)]);
             }
           );
         } else {
           const progressInterval = setInterval(() => {
             setProgress((prev) => {
               const next = Math.min(prev + 10, 90);
-              _optionalChain([onProgress, 'optionalCall', _78 => _78(next)]);
+              _optionalChain([onProgress, 'optionalCall', _82 => _82(next)]);
               return next;
             });
           }, 200);
@@ -2515,7 +2516,7 @@ ${planningInstruction}` : planningInstruction;
           setResult(result2);
           setState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _79 => _79(result2)]);
+          _optionalChain([onComplete, 'optionalCall', _83 => _83(result2)]);
         }
       } else {
         if (enableStreaming) {
@@ -2561,16 +2562,16 @@ ${commandInstruction}` : commandInstruction;
               if (chunk.type === "token" && chunk.content) {
                 accumulatedContent += chunk.content;
                 setStreamedContent(accumulatedContent);
-                _optionalChain([onChunk, 'optionalCall', _80 => _80(chunk.content)]);
+                _optionalChain([onChunk, 'optionalCall', _84 => _84(chunk.content)]);
                 const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);
                 setProgress(estimatedProgress);
-                _optionalChain([onProgress, 'optionalCall', _81 => _81(estimatedProgress)]);
+                _optionalChain([onProgress, 'optionalCall', _85 => _85(estimatedProgress)]);
               } else if (chunk.type === "widget" && chunk.widget) {
                 const widget = chunk.widget;
                 setResult((prev) => ({
                   success: true,
-                  data: _optionalChain([prev, 'optionalAccess', _82 => _82.data]) || {},
-                  widgets: [..._optionalChain([prev, 'optionalAccess', _83 => _83.widgets]) || [], widget],
+                  data: _optionalChain([prev, 'optionalAccess', _86 => _86.data]) || {},
+                  widgets: [..._optionalChain([prev, 'optionalAccess', _87 => _87.widgets]) || [], widget],
                   message: accumulatedContent || "Command executed successfully"
                 }));
               }
@@ -2590,20 +2591,20 @@ ${commandInstruction}` : commandInstruction;
               setResult(result2);
               setState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _84 => _84(result2)]);
+              _optionalChain([onComplete, 'optionalCall', _88 => _88(result2)]);
             },
             (error2) => {
               const err = error2 instanceof Error ? error2 : new Error("Unknown error");
               setError(err);
               setState("error");
-              _optionalChain([onError, 'optionalCall', _85 => _85(err)]);
+              _optionalChain([onError, 'optionalCall', _89 => _89(err)]);
             }
           );
         } else {
           const progressInterval = setInterval(() => {
             setProgress((prev) => {
               const next = Math.min(prev + 10, 90);
-              _optionalChain([onProgress, 'optionalCall', _86 => _86(next)]);
+              _optionalChain([onProgress, 'optionalCall', _90 => _90(next)]);
               return next;
             });
           }, 200);
@@ -2659,14 +2660,14 @@ ${commandInstruction}` : commandInstruction;
           setResult(result2);
           setState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _87 => _87(result2)]);
+          _optionalChain([onComplete, 'optionalCall', _91 => _91(result2)]);
         }
       }
     } catch (err) {
       const error2 = err instanceof Error ? err : new Error("Unknown error");
       setError(error2);
       setState("error");
-      _optionalChain([onError, 'optionalCall', _88 => _88(error2)]);
+      _optionalChain([onError, 'optionalCall', _92 => _92(error2)]);
     }
   };
   const resetCommand = () => {
@@ -2699,14 +2700,14 @@ ${planToExecute}`;
   };
   const handleFileSelect = async (e) => {
     if (e.target.files && e.target.files.length > 0) {
-      _optionalChain([onFileUpload, 'optionalCall', _89 => _89(e.target.files)]);
+      _optionalChain([onFileUpload, 'optionalCall', _93 => _93(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', _90 => _90.target, 'optionalAccess', _91 => _91.result])) {
+            if (_optionalChain([event, 'access', _94 => _94.target, 'optionalAccess', _95 => _95.result])) {
               const fullDataUrl = event.target.result;
               const base64Data = fullDataUrl.split(",")[1];
               if (file.type.startsWith("image/")) {
@@ -2800,7 +2801,7 @@ ${planToExecute}`;
               enableFileUpload && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 "button",
                 {
-                  onClick: () => _optionalChain([fileInputRef, 'access', _92 => _92.current, 'optionalAccess', _93 => _93.click, 'call', _94 => _94()]),
+                  onClick: () => _optionalChain([fileInputRef, 'access', _96 => _96.current, 'optionalAccess', _97 => _97.click, 'call', _98 => _98()]),
                   className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-gray-500 dark:!text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-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)" }) })
@@ -3019,7 +3020,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', _95 => _95.message]) })
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: _optionalChain([error, 'optionalAccess', _99 => _99.message]) })
               ] })
             ] }) }),
             allowInput && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -3047,7 +3048,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', _96 => _96.data, 'optionalAccess', _97 => _97.summary]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-gray-700 dark:text-gray-300 text-sm leading-relaxed whitespace-pre-line", children: result.data.summary }),
+            _optionalChain([result, 'access', _100 => _100.data, 'optionalAccess', _101 => _101.summary]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-gray-700 dark:text-gray-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,
               {
@@ -3098,7 +3099,7 @@ ${planToExecute}`;
             enableFileUpload && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "button",
               {
-                onClick: () => _optionalChain([fileInputRef, 'access', _98 => _98.current, 'optionalAccess', _99 => _99.click, 'call', _100 => _100()]),
+                onClick: () => _optionalChain([fileInputRef, 'access', _102 => _102.current, 'optionalAccess', _103 => _103.click, 'call', _104 => _104()]),
                 className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-gray-500 dark:!text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-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)" }) })
@@ -3284,25 +3285,25 @@ function Prompt({
     const newValue = e.target.value;
     if (!maxLength || newValue.length <= maxLength) {
       setValue(newValue);
-      _optionalChain([onChange, 'optionalCall', _101 => _101(newValue)]);
+      _optionalChain([onChange, 'optionalCall', _105 => _105(newValue)]);
     }
   };
   const handleSubmit = async () => {
     if (value.length < minLength) return;
-    _optionalChain([onSubmit, 'optionalCall', _102 => _102(value)]);
+    _optionalChain([onSubmit, 'optionalCall', _106 => _106(value)]);
     setIsLoading(true);
     try {
       if (useMock) {
         await new Promise((resolve) => setTimeout(resolve, 1500));
         const mockResult = `Enhanced version: ${value} [AI-generated content]`;
-        _optionalChain([onResult, 'optionalCall', _103 => _103(mockResult)]);
+        _optionalChain([onResult, 'optionalCall', _107 => _107(mockResult)]);
         setValue("");
       } else {
         const response = await aptevaClient.chat({
           agent_id: agentId,
           message: value
         });
-        _optionalChain([onResult, 'optionalCall', _104 => _104(response.message)]);
+        _optionalChain([onResult, 'optionalCall', _108 => _108(response.message)]);
         setValue("");
       }
     } catch (error) {
@@ -3397,7 +3398,7 @@ function Stream({
   }, [autoStart]);
   const startStreaming = async () => {
     setIsStreaming(true);
-    _optionalChain([onStart, 'optionalCall', _105 => _105()]);
+    _optionalChain([onStart, 'optionalCall', _109 => _109()]);
     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.";
@@ -3405,13 +3406,13 @@ function Stream({
           mockText,
           (chunk) => {
             setText((prev) => prev + chunk);
-            _optionalChain([onChunk, 'optionalCall', _106 => _106(chunk)]);
+            _optionalChain([onChunk, 'optionalCall', _110 => _110(chunk)]);
           },
           typingSpeed
         );
         setIsComplete(true);
         setIsStreaming(false);
-        _optionalChain([onComplete, 'optionalCall', _107 => _107(text + mockText)]);
+        _optionalChain([onComplete, 'optionalCall', _111 => _111(text + mockText)]);
       } else {
         let accumulatedText = "";
         await aptevaClient.chatStream(
@@ -3424,24 +3425,24 @@ function Stream({
             if (chunk.type === "token" && chunk.content) {
               accumulatedText += chunk.content;
               setText(accumulatedText);
-              _optionalChain([onChunk, 'optionalCall', _108 => _108(chunk.content)]);
+              _optionalChain([onChunk, 'optionalCall', _112 => _112(chunk.content)]);
             }
           },
           () => {
             setIsComplete(true);
             setIsStreaming(false);
-            _optionalChain([onComplete, 'optionalCall', _109 => _109(accumulatedText)]);
+            _optionalChain([onComplete, 'optionalCall', _113 => _113(accumulatedText)]);
           },
           (error) => {
             const err = error instanceof Error ? error : new Error("Streaming error");
-            _optionalChain([onError, 'optionalCall', _110 => _110(err)]);
+            _optionalChain([onError, 'optionalCall', _114 => _114(err)]);
             setIsStreaming(false);
           }
         );
       }
     } catch (error) {
       const err = error instanceof Error ? error : new Error("Streaming error");
-      _optionalChain([onError, 'optionalCall', _111 => _111(err)]);
+      _optionalChain([onError, 'optionalCall', _115 => _115(err)]);
       setIsStreaming(false);
     }
   };
@@ -3533,7 +3534,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', _112 => _112.preview, 'optionalAccess', _113 => _113.toLowerCase, 'call', _114 => _114(), 'access', _115 => _115.includes, 'call', _116 => _116(searchQuery.toLowerCase())])
+    (thread) => thread.title.toLowerCase().includes(searchQuery.toLowerCase()) || _optionalChain([thread, 'access', _116 => _116.preview, 'optionalAccess', _117 => _117.toLowerCase, 'call', _118 => _118(), 'access', _119 => _119.includes, 'call', _120 => _120(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: [
@@ -3555,8 +3556,8 @@ function ThreadList({
           {
             thread,
             isActive: thread.id === currentThreadId,
-            onSelect: () => _optionalChain([onThreadSelect, 'optionalCall', _117 => _117(thread.id)]),
-            onDelete: () => _optionalChain([onThreadDelete, 'optionalCall', _118 => _118(thread.id)])
+            onSelect: () => _optionalChain([onThreadSelect, 'optionalCall', _121 => _121(thread.id)]),
+            onDelete: () => _optionalChain([onThreadDelete, 'optionalCall', _122 => _122(thread.id)])
           },
           thread.id
         ))
@@ -3618,7 +3619,7 @@ function Threads({
       threads.slice(0, 5).map((thread) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "button",
         {
-          onClick: () => _optionalChain([onThreadSelect, 'optionalCall', _119 => _119(thread.id)]),
+          onClick: () => _optionalChain([onThreadSelect, 'optionalCall', _123 => _123(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-gray-600 hover:text-gray-900"