@apteva/apteva-kit 0.1.18 → 0.1.23

package/dist/index.js

@@ -9,6 +9,9 @@ var _react = require('react'); var _react2 = _interopRequireDefault(_react);
 // src/components/Chat/MessageList.tsx
 
 
+// src/components/Chat/Message.tsx
+
+
 // src/utils/cn.ts
 var _clsx = require('clsx');
 var _tailwindmerge = require('tailwind-merge');
@@ -499,6 +502,15 @@ function validateFile(file) {
 }
 
 // src/utils/widget-parser.ts
+function simpleHash(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash;
+  }
+  return Math.abs(hash).toString(36);
+}
 function findMatchingBracket(text, startIndex) {
   let depth = 0;
   let inString = false;
@@ -583,7 +595,7 @@ function parseWidgetsFromText(text) {
     try {
       const trimmedJson = jsonContent.trim();
       const props = JSON.parse(trimmedJson);
-      const widgetId = `widget-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+      const widgetId = `widget-${widgetType}-${simpleHash(trimmedJson)}`;
       segments.push({
         type: "widget",
         widget: {
@@ -1079,17 +1091,71 @@ function WidgetSkeleton({ type, className }) {
 
 // src/components/Chat/MarkdownContent.tsx
 
+function isImageUrl(url) {
+  const imageExtensions = /\.(jpg|jpeg|png|gif|webp|svg|bmp|ico)(\?.*)?$/i;
+  return imageExtensions.test(url);
+}
 function parseInlineMarkdown(text, keyPrefix = "") {
   const result = [];
-  const boldRegex = /(\*\*|__)(.+?)\1/g;
+  const inlineRegex = /!\[([^\]]*)\]\(([^)]+)\)|\[([^\]]+)\]\(([^)]+)\)|(\*\*|__)(.+?)\5|`([^`]+)`/g;
   let lastIndex = 0;
   let match;
   let key = 0;
-  while ((match = boldRegex.exec(text)) !== null) {
+  while ((match = inlineRegex.exec(text)) !== null) {
     if (match.index > lastIndex) {
       result.push(text.slice(lastIndex, match.index));
     }
-    result.push(/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: match[2] }, `${keyPrefix}b${key++}`));
+    if (match[1] !== void 0 || match[2] !== void 0) {
+      const alt = match[1] || "";
+      const src = match[2];
+      result.push(
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "img",
+          {
+            src,
+            alt,
+            className: "apteva-md-img"
+          },
+          `${keyPrefix}img${key++}`
+        )
+      );
+    } else if (match[3] !== void 0 || match[4] !== void 0) {
+      const linkText = match[3];
+      const href = match[4];
+      if (isImageUrl(href)) {
+        result.push(
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "img",
+            {
+              src: href,
+              alt: linkText,
+              className: "apteva-md-img"
+            },
+            `${keyPrefix}img${key++}`
+          )
+        );
+      } else {
+        result.push(
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "a",
+            {
+              href,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "apteva-md-link",
+              children: linkText
+            },
+            `${keyPrefix}a${key++}`
+          )
+        );
+      }
+    } else if (match[5] !== void 0) {
+      result.push(/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: match[6] }, `${keyPrefix}b${key++}`));
+    } else if (match[7] !== void 0) {
+      result.push(
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "code", { className: "apteva-md-inline-code", children: match[7] }, `${keyPrefix}code${key++}`)
+      );
+    }
     lastIndex = match.index + match[0].length;
   }
   if (lastIndex < text.length) {
@@ -1163,7 +1229,7 @@ function parseMarkdown(content) {
     const tableMatch = line.match(/^\|(.+)\|$/);
     if (tableMatch && i + 1 < lines.length) {
       const separatorLine = lines[i + 1];
-      const separatorMatch = separatorLine.match(/^\|[\s:-]+\|$/);
+      const separatorMatch = separatorLine.match(/^\|([\s:-]+\|)+$/);
       if (separatorMatch) {
         const headerCells = line.split("|").filter((cell) => cell.trim() !== "").map((cell) => cell.trim());
         i += 2;
@@ -1208,22 +1274,72 @@ function MarkdownContent({ content, className = "" }) {
 // src/components/Chat/ToolCall.tsx
 
 function ToolCall({ name, status }) {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-tool-call", children: [
-    status === "running" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-tool-call-dot apteva-tool-call-dot-running" }),
-    status === "completed" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-tool-call-dot apteva-tool-call-dot-completed" }),
-    status === "error" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-tool-call-dot apteva-tool-call-dot-error" }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "apteva-tool-call-name", children: name }),
-    status === "running" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "apteva-tool-call-status", children: "Running..." }),
-    status === "completed" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "apteva-tool-call-status apteva-tool-call-status-completed", children: "Completed" }),
-    status === "error" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "apteva-tool-call-status apteva-tool-call-status-error", children: "Error" })
+  if (status === "running") {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2 px-3 py-2 rounded-xl bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700 !text-blue-700 dark:!text-blue-300 text-sm", children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { className: "w-4 h-4 animate-spin", fill: "none", viewBox: "0 0 24 24", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { children: [
+        "Calling ",
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: name }),
+        "..."
+      ] })
+    ] });
+  }
+  if (status === "completed") {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2 px-3 py-2 rounded-xl bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-700 !text-green-700 dark:!text-green-300 text-sm", 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 13l4 4L19 7" }) }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { children: [
+        "Tool completed: ",
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: name })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2 px-3 py-2 rounded-xl bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-700 !text-red-700 dark:!text-red-300 text-sm", 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: "M6 18L18 6M6 6l12 12" }) }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { children: [
+      "Tool failed: ",
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: name })
+    ] })
   ] });
 }
 
 // src/components/Chat/Message.tsx
 
-function Message({ message, onAction, enableWidgets }) {
+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 hasContent = message.content || contentSegments && contentSegments.length > 0;
+  const reportedWidgetsRef = _react.useRef.call(void 0, /* @__PURE__ */ new Set());
+  const parsedWidgets = _react.useMemo.call(void 0, () => {
+    if (!enableWidgets || isUser || !message.content) {
+      return [];
+    }
+    const parsed = parseWidgetsFromText(message.content);
+    return parsed.segments.filter((seg) => seg.type === "widget" && !!seg.widget).map((seg) => seg.widget);
+  }, [enableWidgets, isUser, message.content]);
+  _react.useEffect.call(void 0, () => {
+    if (onWidgetRender && message.widgets) {
+      for (const widget of message.widgets) {
+        if (!reportedWidgetsRef.current.has(widget.id)) {
+          reportedWidgetsRef.current.add(widget.id);
+          onWidgetRender(widget);
+        }
+      }
+    }
+  }, [message.widgets, onWidgetRender]);
+  _react.useEffect.call(void 0, () => {
+    if (onWidgetRender && parsedWidgets.length > 0) {
+      for (const widget of parsedWidgets) {
+        if (!reportedWidgetsRef.current.has(widget.id)) {
+          reportedWidgetsRef.current.add(widget.id);
+          onWidgetRender(widget);
+        }
+      }
+    }
+  }, [parsedWidgets, onWidgetRender]);
   const renderTextContent = (text) => {
     if (!enableWidgets || isUser) {
       return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MarkdownContent, { content: text });
@@ -1249,6 +1365,13 @@ function Message({ message, onAction, enableWidgets }) {
     if (isUser) {
       return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "whitespace-pre-wrap !text-sm leading-relaxed", children: message.content });
     }
+    if (isStreaming && !hasContent) {
+      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-typing-indicator !text-gray-400", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {}),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {}),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {})
+      ] });
+    }
     if (contentSegments && contentSegments.length > 0) {
       return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: contentSegments.map((segment, index) => {
         if (segment.type === "text") {
@@ -1271,13 +1394,13 @@ function Message({ message, onAction, enableWidgets }) {
     "div",
     {
       className: cn(
-        "max-w-[80%]",
-        isUser ? "px-4 py-2.5 rounded-xl bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 !text-gray-900 dark:!text-gray-100 ml-auto" : "!text-gray-900 dark:!text-gray-100"
+        "max-w-[80%] px-4 py-2.5 rounded-2xl",
+        isUser ? "bg-blue-600 !text-white rounded-br-md" : "bg-gray-100 dark:bg-gray-800 !text-gray-900 dark:!text-gray-100 rounded-bl-md"
       ),
       children: [
         renderContent(),
         message.widgets && message.widgets.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn(isUser ? "mt-3" : "mt-2"), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Widgets, { widgets: message.widgets, onAction, layout: "stack" }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("!text-xs opacity-70", isUser ? "mt-1.5 !text-gray-500 dark:!text-gray-400" : "mt-1 !text-gray-500 dark:!text-gray-400"), suppressHydrationWarning: true, children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("!text-xs mt-1.5", isUser ? "!text-blue-200" : "!text-gray-500 dark:!text-gray-400"), suppressHydrationWarning: true, children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
       ]
     }
   );
@@ -1435,7 +1558,8 @@ function MessageList({
   suggestedPrompts,
   welcomeVariant,
   onPromptClick,
-  enableWidgets
+  enableWidgets,
+  onWidgetRender
 }) {
   const listRef = _react.useRef.call(void 0, null);
   _react.useEffect.call(void 0, () => {
@@ -1454,7 +1578,7 @@ function MessageList({
       onPromptClick: onPromptClick || (() => {
       })
     }
-  ) : messages.map((message) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Message, { message, onAction, enableWidgets }, message.id)) });
+  ) : messages.map((message) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: `flex ${message.role === "user" ? "justify-end" : "justify-start"}`, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Message, { message, onAction, enableWidgets, onWidgetRender }) }, message.id)) });
 }
 
 // src/components/Chat/Composer.tsx
@@ -1517,7 +1641,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
         setFileError(errors.join(", "));
         setTimeout(() => setFileError(null), 5e3);
       }
-      _optionalChain([onFileUpload, 'optionalCall', _21 => _21(e.target.files)]);
+      _optionalChain([onFileUpload, 'optionalCall', _23 => _23(e.target.files)]);
       setShowMenu(false);
       e.target.value = "";
     }
@@ -1587,15 +1711,15 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
             {
               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', _22 => _22.current, 'optionalAccess', _23 => _23.getBoundingClientRect, 'call', _24 => _24(), 'access', _25 => _25.left]), () => ( 0)),
-                top: (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _26 => _26.current, 'optionalAccess', _27 => _27.getBoundingClientRect, 'call', _28 => _28(), 'access', _29 => _29.bottom]), () => ( 0))) + 8
+                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
               },
               children: [
                 /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
                   "button",
                   {
                     onClick: () => {
-                      _optionalChain([fileInputRef, 'access', _30 => _30.current, 'optionalAccess', _31 => _31.click, 'call', _32 => _32()]);
+                      _optionalChain([fileInputRef, 'access', _32 => _32.current, 'optionalAccess', _33 => _33.click, 'call', _34 => _34()]);
                       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",
@@ -1714,8 +1838,8 @@ function CommandComposer({
     }
   };
   const handleNewCommand = () => {
-    _optionalChain([onReset, 'optionalCall', _33 => _33()]);
-    _optionalChain([inputRef, 'access', _34 => _34.current, 'optionalAccess', _35 => _35.focus, 'call', _36 => _36()]);
+    _optionalChain([onReset, 'optionalCall', _35 => _35()]);
+    _optionalChain([inputRef, 'access', _36 => _36.current, 'optionalAccess', _37 => _37.focus, 'call', _38 => _38()]);
   };
   const handleInputChange = (value) => {
     setInput(value);
@@ -1829,15 +1953,15 @@ function CommandComposer({
                   {
                     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', _37 => _37.current, 'optionalAccess', _38 => _38.getBoundingClientRect, 'call', _39 => _39(), 'access', _40 => _40.left]), () => ( 0)),
-                      top: (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _41 => _41.current, 'optionalAccess', _42 => _42.getBoundingClientRect, 'call', _43 => _43(), 'access', _44 => _44.bottom]), () => ( 0))) + 8
+                      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
                     },
                     children: [
                       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
                         "button",
                         {
                           onClick: () => {
-                            _optionalChain([fileInputRef, 'access', _45 => _45.current, 'optionalAccess', _46 => _46.click, 'call', _47 => _47()]);
+                            _optionalChain([fileInputRef, 'access', _47 => _47.current, 'optionalAccess', _48 => _48.click, 'call', _49 => _49()]);
                             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",
@@ -2078,7 +2202,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', _48 => _48.body, 'optionalAccess', _49 => _49.getReader, 'call', _50 => _50()]);
+      const reader = _optionalChain([response, 'access', _50 => _50.body, 'optionalAccess', _51 => _51.getReader, 'call', _52 => _52()]);
       if (!reader) {
         throw new Error("Response body is not readable");
       }
@@ -2096,7 +2220,7 @@ var AptevaClient = class {
           if (line.startsWith("data: ")) {
             const data = line.slice(6);
             if (data === "[DONE]") {
-              _optionalChain([onComplete, 'optionalCall', _51 => _51(threadId)]);
+              _optionalChain([onComplete, 'optionalCall', _53 => _53(threadId)]);
               return;
             }
             try {
@@ -2111,10 +2235,10 @@ var AptevaClient = class {
           }
         }
       }
-      _optionalChain([onComplete, 'optionalCall', _52 => _52(threadId)]);
+      _optionalChain([onComplete, 'optionalCall', _54 => _54(threadId)]);
     } catch (error) {
       const err = error instanceof Error ? error : new Error("Unknown error");
-      _optionalChain([onError, 'optionalCall', _53 => _53(err)]);
+      _optionalChain([onError, 'optionalCall', _55 => _55(err)]);
       throw err;
     }
   }
@@ -2228,6 +2352,7 @@ function Chat({
   const [isLoading, setIsLoading] = _react.useState.call(void 0, false);
   const [currentThreadId, setCurrentThreadId] = _react.useState.call(void 0, threadId || null);
   const [mode, setMode] = _react.useState.call(void 0, initialMode);
+  const [chatToolName, setChatToolName] = _react.useState.call(void 0, null);
   const [commandState, setCommandState] = _react.useState.call(void 0, "idle");
   const [commandResult, setCommandResult] = _react.useState.call(void 0, null);
   const [commandError, setCommandError] = _react.useState.call(void 0, null);
@@ -2257,7 +2382,7 @@ ${widgetContext}` : widgetContext;
   }, [apiUrl, apiKey]);
   _react.useEffect.call(void 0, () => {
     if (threadId) {
-      _optionalChain([onThreadChange, 'optionalCall', _54 => _54(threadId)]);
+      _optionalChain([onThreadChange, 'optionalCall', _56 => _56(threadId)]);
     }
   }, [threadId, onThreadChange]);
   _react.useEffect.call(void 0, () => {
@@ -2275,7 +2400,7 @@ ${widgetContext}` : widgetContext;
   }, [showSettingsMenu]);
   const handleModeChange = (newMode) => {
     setMode(newMode);
-    _optionalChain([onModeChange, 'optionalCall', _55 => _55(newMode)]);
+    _optionalChain([onModeChange, 'optionalCall', _57 => _57(newMode)]);
     if (newMode === "command") {
       setCommandState("idle");
       setCommandResult(null);
@@ -2295,7 +2420,7 @@ ${widgetContext}` : widgetContext;
       metadata: hasFiles ? { attachments: fileNames } : void 0
     };
     setMessages((prev) => [...prev, userMessage]);
-    _optionalChain([onMessageSent, 'optionalCall', _56 => _56(userMessage)]);
+    _optionalChain([onMessageSent, 'optionalCall', _58 => _58(userMessage)]);
     setIsLoading(true);
     try {
       const messagePayload = await buildMessageWithAttachments(text, files);
@@ -2308,6 +2433,7 @@ ${widgetContext}` : widgetContext;
         let accumulatedWidgets = [];
         let responseThreadId = currentThreadId;
         let toolInputBuffer = "";
+        const streamingMessageId = `msg-${Date.now()}`;
         const updateMessage = () => {
           const segments = [...contentSegments];
           if (currentTextBuffer) {
@@ -2327,19 +2453,19 @@ ${widgetContext}` : widgetContext;
                   ...lastMessage,
                   content: currentTextBuffer,
                   widgets: accumulatedWidgets.length > 0 ? accumulatedWidgets : void 0,
-                  metadata: { ...lastMessage.metadata, content_segments: segments }
+                  metadata: { ...lastMessage.metadata, content_segments: segments, isStreaming: true }
                 }
               ];
             } else {
               return [
                 ...prev,
                 {
-                  id: `msg-${Date.now()}-streaming`,
+                  id: streamingMessageId,
                   role: "assistant",
                   content: currentTextBuffer,
                   widgets: accumulatedWidgets.length > 0 ? accumulatedWidgets : void 0,
                   timestamp: /* @__PURE__ */ new Date(),
-                  metadata: { content_segments: segments }
+                  metadata: { content_segments: segments, isStreaming: true }
                 }
               ];
             }
@@ -2360,7 +2486,7 @@ ${widgetContext}` : widgetContext;
                   responseThreadId = chunk.thread_id;
                   if (!currentThreadId) {
                     setCurrentThreadId(chunk.thread_id);
-                    _optionalChain([onThreadChange, 'optionalCall', _57 => _57(chunk.thread_id)]);
+                    _optionalChain([onThreadChange, 'optionalCall', _59 => _59(chunk.thread_id)]);
                   }
                 }
                 break;
@@ -2384,6 +2510,7 @@ ${widgetContext}` : widgetContext;
                   }
                   contentSegments.push({ type: "tool", id: chunk.tool_id, name: chunk.tool_name });
                   toolInputBuffer = "";
+                  setChatToolName(chunk.tool_name);
                   updateMessage();
                 }
                 break;
@@ -2397,8 +2524,9 @@ ${widgetContext}` : widgetContext;
                   const toolSegment = contentSegments.find((s) => s.type === "tool" && s.id === chunk.tool_id);
                   if (toolSegment) {
                     toolSegment.result = chunk.content;
-                    _optionalChain([onToolResult, 'optionalCall', _58 => _58(toolSegment.name, chunk.content)]);
+                    _optionalChain([onToolResult, 'optionalCall', _60 => _60(toolSegment.name, chunk.content)]);
                   }
+                  setChatToolName(null);
                   updateMessage();
                 }
                 break;
@@ -2428,10 +2556,10 @@ ${widgetContext}` : widgetContext;
                   ...prev.slice(0, -1),
                   {
                     ...lastMessage,
-                    id: `msg-${Date.now()}`,
+                    // Keep the same ID to avoid React remounting the component
                     content: currentTextBuffer || "Response received",
                     widgets: accumulatedWidgets.length > 0 ? accumulatedWidgets : void 0,
-                    metadata: { thread_id: threadId2, content_segments: contentSegments }
+                    metadata: { thread_id: threadId2, content_segments: contentSegments, isStreaming: false }
                   }
                 ];
               }
@@ -2439,10 +2567,11 @@ ${widgetContext}` : widgetContext;
             });
             if (threadId2 && threadId2 !== currentThreadId) {
               setCurrentThreadId(threadId2);
-              _optionalChain([onThreadChange, 'optionalCall', _59 => _59(threadId2)]);
+              _optionalChain([onThreadChange, 'optionalCall', _61 => _61(threadId2)]);
             }
             setIsLoading(false);
             setCurrentRequestId(null);
+            setChatToolName(null);
           },
           (error) => {
             const errorMessage = {
@@ -2461,7 +2590,8 @@ ${widgetContext}` : widgetContext;
             });
             setIsLoading(false);
             setCurrentRequestId(null);
-            _optionalChain([onError, 'optionalCall', _60 => _60(error)]);
+            setChatToolName(null);
+            _optionalChain([onError, 'optionalCall', _62 => _62(error)]);
           }
         );
       }
@@ -2474,7 +2604,7 @@ ${widgetContext}` : widgetContext;
         metadata: { error: true }
       };
       setMessages((prev) => [...prev, errorMessage]);
-      _optionalChain([onError, 'optionalCall', _61 => _61(error instanceof Error ? error : new Error("Unknown error"))]);
+      _optionalChain([onError, 'optionalCall', _63 => _63(error instanceof Error ? error : new Error("Unknown error"))]);
     } finally {
       setIsLoading(false);
     }
@@ -2519,7 +2649,7 @@ ${planningInstruction}` : planningInstruction;
           const error = err instanceof Error ? err : new Error("Failed to generate plan");
           setCommandError(error);
           setCommandState("error");
-          _optionalChain([onError, 'optionalCall', _62 => _62(error)]);
+          _optionalChain([onError, 'optionalCall', _64 => _64(error)]);
         }
       }
       return;
@@ -2552,12 +2682,12 @@ ${planningInstruction}` : planningInstruction;
               setCommandResult(result);
               setCommandState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _63 => _63(result)]);
+              _optionalChain([onComplete, 'optionalCall', _65 => _65(result)]);
             },
             (error) => {
               setCommandError(error);
               setCommandState("error");
-              _optionalChain([onError, 'optionalCall', _64 => _64(error)]);
+              _optionalChain([onError, 'optionalCall', _66 => _66(error)]);
             }
           );
         } else {
@@ -2570,7 +2700,7 @@ ${planningInstruction}` : planningInstruction;
           setCommandResult(result);
           setCommandState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _65 => _65(result)]);
+          _optionalChain([onComplete, 'optionalCall', _67 => _67(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.`;
@@ -2602,12 +2732,12 @@ ${commandInstruction}` : commandInstruction;
                 accumulatedContent = "";
                 setStreamedContent("");
               } else if (chunk.type === "tool_result") {
-                _optionalChain([onToolResult, 'optionalCall', _66 => _66(lastToolName, chunk.content)]);
+                _optionalChain([onToolResult, 'optionalCall', _68 => _68(lastToolName, chunk.content)]);
                 setCurrentToolName(null);
               } else if (chunk.type === "thread_id" && chunk.thread_id) {
                 if (!currentThreadId) {
                   setCurrentThreadId(chunk.thread_id);
-                  _optionalChain([onThreadChange, 'optionalCall', _67 => _67(chunk.thread_id)]);
+                  _optionalChain([onThreadChange, 'optionalCall', _69 => _69(chunk.thread_id)]);
                 }
               } else if (chunk.type === "request_id" && chunk.request_id) {
                 setCurrentRequestId(chunk.request_id);
@@ -2623,13 +2753,13 @@ ${commandInstruction}` : commandInstruction;
               setCommandState("success");
               setProgress(100);
               setCurrentRequestId(null);
-              _optionalChain([onComplete, 'optionalCall', _68 => _68(result)]);
+              _optionalChain([onComplete, 'optionalCall', _70 => _70(result)]);
             },
             (error) => {
               setCommandError(error);
               setCommandState("error");
               setCurrentRequestId(null);
-              _optionalChain([onError, 'optionalCall', _69 => _69(error)]);
+              _optionalChain([onError, 'optionalCall', _71 => _71(error)]);
             }
           );
         } else {
@@ -2649,14 +2779,14 @@ ${commandInstruction}` : commandInstruction;
           setCommandResult(result);
           setCommandState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _70 => _70(result)]);
+          _optionalChain([onComplete, 'optionalCall', _72 => _72(result)]);
         }
       }
     } catch (err) {
       const error = err instanceof Error ? err : new Error("Unknown error");
       setCommandError(error);
       setCommandState("error");
-      _optionalChain([onError, 'optionalCall', _71 => _71(error)]);
+      _optionalChain([onError, 'optionalCall', _73 => _73(error)]);
     }
   };
   const resetCommand = () => {
@@ -2704,7 +2834,13 @@ ${planToExecute}`;
   };
   const isCompact = commandVariant === "compact";
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn("flex flex-col h-full", className), children: [
-    showHeader && mode === "chat" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-4 py-3 flex items-center justify-between", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "!text-lg font-semibold !text-gray-900 dark:!text-white", children: headerTitle }) }),
+    showHeader && mode === "chat" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-chat-header px-4 py-3 flex items-center justify-between", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-chat-title", children: headerTitle }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn(
+        "apteva-chat-status",
+        isLoading ? chatToolName ? "apteva-chat-status-tool" : "apteva-chat-status-thinking" : "apteva-chat-status-ready"
+      ), children: isLoading ? chatToolName ? `Using ${chatToolName}...` : "Thinking..." : "Ready" })
+    ] }) }),
     mode === "chat" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         MessageList,
@@ -2717,10 +2853,10 @@ ${planToExecute}`;
           suggestedPrompts,
           welcomeVariant,
           onPromptClick: (prompt) => handleSendMessage(prompt),
-          enableWidgets
+          enableWidgets,
+          onWidgetRender
         }
       ),
-      isLoading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-4 py-2 !text-sm !text-gray-500 dark:!text-gray-400 italic", children: "AI is thinking..." }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         Composer,
         {
@@ -2742,8 +2878,8 @@ ${planToExecute}`;
           executeCommand(text, files);
         },
         state: commandState,
-        response: _optionalChain([commandResult, 'optionalAccess', _72 => _72.data, 'optionalAccess', _73 => _73.summary]) || _optionalChain([commandResult, 'optionalAccess', _74 => _74.message]),
-        error: _optionalChain([commandError, 'optionalAccess', _75 => _75.message]),
+        response: _optionalChain([commandResult, 'optionalAccess', _74 => _74.data, 'optionalAccess', _75 => _75.summary]) || _optionalChain([commandResult, 'optionalAccess', _76 => _76.message]),
+        error: _optionalChain([commandError, 'optionalAccess', _77 => _77.message]),
         plan,
         streamedContent,
         toolName: currentToolName,
@@ -2911,13 +3047,13 @@ ${planningInstruction}` : planningInstruction;
             const error2 = err instanceof Error ? err : new Error("Failed to generate plan");
             setError(error2);
             setState("error");
-            _optionalChain([onError, 'optionalCall', _76 => _76(error2)]);
+            _optionalChain([onError, 'optionalCall', _78 => _78(error2)]);
           });
         } catch (err) {
           const error2 = err instanceof Error ? err : new Error("Failed to generate plan");
           setError(error2);
           setState("error");
-          _optionalChain([onError, 'optionalCall', _77 => _77(error2)]);
+          _optionalChain([onError, 'optionalCall', _79 => _79(error2)]);
         }
       }
       return;
@@ -2928,7 +3064,7 @@ ${planningInstruction}` : planningInstruction;
     setStreamedContent("");
     setCommand("");
     setUploadedFiles([]);
-    _optionalChain([onStart, 'optionalCall', _78 => _78()]);
+    _optionalChain([onStart, 'optionalCall', _80 => _80()]);
     try {
       if (useMock) {
         if (enableStreaming) {
@@ -2939,16 +3075,16 @@ ${planningInstruction}` : planningInstruction;
               if (chunk.type === "token" && chunk.content) {
                 accumulatedContent += chunk.content;
                 setStreamedContent(accumulatedContent);
-                _optionalChain([onChunk, 'optionalCall', _79 => _79(chunk.content)]);
+                _optionalChain([onChunk, 'optionalCall', _81 => _81(chunk.content)]);
                 const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);
                 setProgress(estimatedProgress);
-                _optionalChain([onProgress, 'optionalCall', _80 => _80(estimatedProgress)]);
+                _optionalChain([onProgress, 'optionalCall', _82 => _82(estimatedProgress)]);
               } else if (chunk.type === "widget" && chunk.widget) {
                 const widget = chunk.widget;
                 setResult((prev) => ({
                   success: true,
-                  data: _optionalChain([prev, 'optionalAccess', _81 => _81.data]) || {},
-                  widgets: [..._optionalChain([prev, 'optionalAccess', _82 => _82.widgets]) || [], widget],
+                  data: _optionalChain([prev, 'optionalAccess', _83 => _83.data]) || {},
+                  widgets: [..._optionalChain([prev, 'optionalAccess', _84 => _84.widgets]) || [], widget],
                   message: accumulatedContent || "Command executed successfully"
                 }));
               }
@@ -2968,19 +3104,19 @@ ${planningInstruction}` : planningInstruction;
               setResult(result2);
               setState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _83 => _83(result2)]);
+              _optionalChain([onComplete, 'optionalCall', _85 => _85(result2)]);
             },
             (error2) => {
               setError(error2);
               setState("error");
-              _optionalChain([onError, 'optionalCall', _84 => _84(error2)]);
+              _optionalChain([onError, 'optionalCall', _86 => _86(error2)]);
             }
           );
         } else {
           const progressInterval = setInterval(() => {
             setProgress((prev) => {
               const next = Math.min(prev + 10, 90);
-              _optionalChain([onProgress, 'optionalCall', _85 => _85(next)]);
+              _optionalChain([onProgress, 'optionalCall', _87 => _87(next)]);
               return next;
             });
           }, 200);
@@ -3004,7 +3140,7 @@ ${planningInstruction}` : planningInstruction;
           setResult(result2);
           setState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _86 => _86(result2)]);
+          _optionalChain([onComplete, 'optionalCall', _88 => _88(result2)]);
         }
       } else {
         if (enableStreaming) {
@@ -3050,16 +3186,16 @@ ${commandInstruction}` : commandInstruction;
               if (chunk.type === "token" && chunk.content) {
                 accumulatedContent += chunk.content;
                 setStreamedContent(accumulatedContent);
-                _optionalChain([onChunk, 'optionalCall', _87 => _87(chunk.content)]);
+                _optionalChain([onChunk, 'optionalCall', _89 => _89(chunk.content)]);
                 const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);
                 setProgress(estimatedProgress);
-                _optionalChain([onProgress, 'optionalCall', _88 => _88(estimatedProgress)]);
+                _optionalChain([onProgress, 'optionalCall', _90 => _90(estimatedProgress)]);
               } else if (chunk.type === "widget" && chunk.widget) {
                 const widget = chunk.widget;
                 setResult((prev) => ({
                   success: true,
-                  data: _optionalChain([prev, 'optionalAccess', _89 => _89.data]) || {},
-                  widgets: [..._optionalChain([prev, 'optionalAccess', _90 => _90.widgets]) || [], widget],
+                  data: _optionalChain([prev, 'optionalAccess', _91 => _91.data]) || {},
+                  widgets: [..._optionalChain([prev, 'optionalAccess', _92 => _92.widgets]) || [], widget],
                   message: accumulatedContent || "Command executed successfully"
                 }));
               }
@@ -3079,20 +3215,20 @@ ${commandInstruction}` : commandInstruction;
               setResult(result2);
               setState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _91 => _91(result2)]);
+              _optionalChain([onComplete, 'optionalCall', _93 => _93(result2)]);
             },
             (error2) => {
               const err = error2 instanceof Error ? error2 : new Error("Unknown error");
               setError(err);
               setState("error");
-              _optionalChain([onError, 'optionalCall', _92 => _92(err)]);
+              _optionalChain([onError, 'optionalCall', _94 => _94(err)]);
             }
           );
         } else {
           const progressInterval = setInterval(() => {
             setProgress((prev) => {
               const next = Math.min(prev + 10, 90);
-              _optionalChain([onProgress, 'optionalCall', _93 => _93(next)]);
+              _optionalChain([onProgress, 'optionalCall', _95 => _95(next)]);
               return next;
             });
           }, 200);
@@ -3148,14 +3284,14 @@ ${commandInstruction}` : commandInstruction;
           setResult(result2);
           setState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _94 => _94(result2)]);
+          _optionalChain([onComplete, 'optionalCall', _96 => _96(result2)]);
         }
       }
     } catch (err) {
       const error2 = err instanceof Error ? err : new Error("Unknown error");
       setError(error2);
       setState("error");
-      _optionalChain([onError, 'optionalCall', _95 => _95(error2)]);
+      _optionalChain([onError, 'optionalCall', _97 => _97(error2)]);
     }
   };
   const resetCommand = () => {
@@ -3188,14 +3324,14 @@ ${planToExecute}`;
   };
   const handleFileSelect = async (e) => {
     if (e.target.files && e.target.files.length > 0) {
-      _optionalChain([onFileUpload, 'optionalCall', _96 => _96(e.target.files)]);
+      _optionalChain([onFileUpload, 'optionalCall', _98 => _98(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', _97 => _97.target, 'optionalAccess', _98 => _98.result])) {
+            if (_optionalChain([event, 'access', _99 => _99.target, 'optionalAccess', _100 => _100.result])) {
               const fullDataUrl = event.target.result;
               const base64Data = fullDataUrl.split(",")[1];
               if (file.type.startsWith("image/")) {
@@ -3289,7 +3425,7 @@ ${planToExecute}`;
               enableFileUpload && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 "button",
                 {
-                  onClick: () => _optionalChain([fileInputRef, 'access', _99 => _99.current, 'optionalAccess', _100 => _100.click, 'call', _101 => _101()]),
+                  onClick: () => _optionalChain([fileInputRef, 'access', _101 => _101.current, 'optionalAccess', _102 => _102.click, 'call', _103 => _103()]),
                   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)" }) })
@@ -3508,7 +3644,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', _102 => _102.message]) })
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: _optionalChain([error, 'optionalAccess', _104 => _104.message]) })
               ] })
             ] }) }),
             allowInput && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -3536,7 +3672,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', _103 => _103.data, 'optionalAccess', _104 => _104.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', _105 => _105.data, 'optionalAccess', _106 => _106.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,
               {
@@ -3587,7 +3723,7 @@ ${planToExecute}`;
             enableFileUpload && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "button",
               {
-                onClick: () => _optionalChain([fileInputRef, 'access', _105 => _105.current, 'optionalAccess', _106 => _106.click, 'call', _107 => _107()]),
+                onClick: () => _optionalChain([fileInputRef, 'access', _107 => _107.current, 'optionalAccess', _108 => _108.click, 'call', _109 => _109()]),
                 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)" }) })
@@ -3773,25 +3909,25 @@ function Prompt({
     const newValue = e.target.value;
     if (!maxLength || newValue.length <= maxLength) {
       setValue(newValue);
-      _optionalChain([onChange, 'optionalCall', _108 => _108(newValue)]);
+      _optionalChain([onChange, 'optionalCall', _110 => _110(newValue)]);
     }
   };
   const handleSubmit = async () => {
     if (value.length < minLength) return;
-    _optionalChain([onSubmit, 'optionalCall', _109 => _109(value)]);
+    _optionalChain([onSubmit, 'optionalCall', _111 => _111(value)]);
     setIsLoading(true);
     try {
       if (useMock) {
         await new Promise((resolve) => setTimeout(resolve, 1500));
         const mockResult = `Enhanced version: ${value} [AI-generated content]`;
-        _optionalChain([onResult, 'optionalCall', _110 => _110(mockResult)]);
+        _optionalChain([onResult, 'optionalCall', _112 => _112(mockResult)]);
         setValue("");
       } else {
         const response = await aptevaClient.chat({
           agent_id: agentId,
           message: value
         });
-        _optionalChain([onResult, 'optionalCall', _111 => _111(response.message)]);
+        _optionalChain([onResult, 'optionalCall', _113 => _113(response.message)]);
         setValue("");
       }
     } catch (error) {
@@ -3886,7 +4022,7 @@ function Stream({
   }, [autoStart]);
   const startStreaming = async () => {
     setIsStreaming(true);
-    _optionalChain([onStart, 'optionalCall', _112 => _112()]);
+    _optionalChain([onStart, 'optionalCall', _114 => _114()]);
     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.";
@@ -3894,13 +4030,13 @@ function Stream({
           mockText,
           (chunk) => {
             setText((prev) => prev + chunk);
-            _optionalChain([onChunk, 'optionalCall', _113 => _113(chunk)]);
+            _optionalChain([onChunk, 'optionalCall', _115 => _115(chunk)]);
           },
           typingSpeed
         );
         setIsComplete(true);
         setIsStreaming(false);
-        _optionalChain([onComplete, 'optionalCall', _114 => _114(text + mockText)]);
+        _optionalChain([onComplete, 'optionalCall', _116 => _116(text + mockText)]);
       } else {
         let accumulatedText = "";
         await aptevaClient.chatStream(
@@ -3913,24 +4049,24 @@ function Stream({
             if (chunk.type === "token" && chunk.content) {
               accumulatedText += chunk.content;
               setText(accumulatedText);
-              _optionalChain([onChunk, 'optionalCall', _115 => _115(chunk.content)]);
+              _optionalChain([onChunk, 'optionalCall', _117 => _117(chunk.content)]);
             }
           },
           () => {
             setIsComplete(true);
             setIsStreaming(false);
-            _optionalChain([onComplete, 'optionalCall', _116 => _116(accumulatedText)]);
+            _optionalChain([onComplete, 'optionalCall', _118 => _118(accumulatedText)]);
           },
           (error) => {
             const err = error instanceof Error ? error : new Error("Streaming error");
-            _optionalChain([onError, 'optionalCall', _117 => _117(err)]);
+            _optionalChain([onError, 'optionalCall', _119 => _119(err)]);
             setIsStreaming(false);
           }
         );
       }
     } catch (error) {
       const err = error instanceof Error ? error : new Error("Streaming error");
-      _optionalChain([onError, 'optionalCall', _118 => _118(err)]);
+      _optionalChain([onError, 'optionalCall', _120 => _120(err)]);
       setIsStreaming(false);
     }
   };
@@ -4022,7 +4158,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', _119 => _119.preview, 'optionalAccess', _120 => _120.toLowerCase, 'call', _121 => _121(), 'access', _122 => _122.includes, 'call', _123 => _123(searchQuery.toLowerCase())])
+    (thread) => thread.title.toLowerCase().includes(searchQuery.toLowerCase()) || _optionalChain([thread, 'access', _121 => _121.preview, 'optionalAccess', _122 => _122.toLowerCase, 'call', _123 => _123(), 'access', _124 => _124.includes, 'call', _125 => _125(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: [
@@ -4044,8 +4180,8 @@ function ThreadList({
           {
             thread,
             isActive: thread.id === currentThreadId,
-            onSelect: () => _optionalChain([onThreadSelect, 'optionalCall', _124 => _124(thread.id)]),
-            onDelete: () => _optionalChain([onThreadDelete, 'optionalCall', _125 => _125(thread.id)])
+            onSelect: () => _optionalChain([onThreadSelect, 'optionalCall', _126 => _126(thread.id)]),
+            onDelete: () => _optionalChain([onThreadDelete, 'optionalCall', _127 => _127(thread.id)])
           },
           thread.id
         ))
@@ -4107,7 +4243,7 @@ function Threads({
       threads.slice(0, 5).map((thread) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "button",
         {
-          onClick: () => _optionalChain([onThreadSelect, 'optionalCall', _126 => _126(thread.id)]),
+          onClick: () => _optionalChain([onThreadSelect, 'optionalCall', _128 => _128(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"