@apteva/apteva-kit 0.1.9 → 0.1.11

package/dist/index.js

@@ -564,10 +564,148 @@ function Widgets({
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn(layoutClasses[layout], spacingClasses[spacing], className), children: widgets.map((widget) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WidgetRenderer, { widget, onAction }, widget.id)) });
 }
 
+// src/components/Chat/MarkdownContent.tsx
+
+function parseInlineMarkdown(text, keyPrefix = "") {
+  const result = [];
+  const boldRegex = /(\*\*|__)(.+?)\1/g;
+  let lastIndex = 0;
+  let match;
+  let key = 0;
+  while ((match = boldRegex.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++}`));
+    lastIndex = match.index + match[0].length;
+  }
+  if (lastIndex < text.length) {
+    result.push(text.slice(lastIndex));
+  }
+  return result.length > 0 ? result : [text];
+}
+function parseMarkdown(content) {
+  const lines = content.split("\n");
+  const result = [];
+  let key = 0;
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+    const h2Match = line.match(/^##\s+(.*)$/);
+    if (h2Match) {
+      result.push(
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "apteva-md-h2", children: parseInlineMarkdown(h2Match[1], `${key}`) }, `h2${key++}`)
+      );
+      i++;
+      continue;
+    }
+    const h3Match = line.match(/^###\s+(.*)$/);
+    if (h3Match) {
+      result.push(
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "apteva-md-h3", children: parseInlineMarkdown(h3Match[1], `${key}`) }, `h3${key++}`)
+      );
+      i++;
+      continue;
+    }
+    const ulMatch = line.match(/^(\s*)([-*+])\s+(.*)$/);
+    if (ulMatch) {
+      const listItems = [];
+      const indent = ulMatch[1].length;
+      while (i < lines.length) {
+        const itemMatch = lines[i].match(/^(\s*)([-*+])\s+(.*)$/);
+        if (itemMatch && itemMatch[1].length === indent) {
+          listItems.push(
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { className: "apteva-md-li", children: parseInlineMarkdown(itemMatch[3], `${key}`) }, `li${key++}`)
+          );
+          i++;
+        } else {
+          break;
+        }
+      }
+      result.push(
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { className: "apteva-md-ul", children: listItems }, `ul${key++}`)
+      );
+      continue;
+    }
+    const olMatch = line.match(/^(\s*)(\d+)\.\s+(.*)$/);
+    if (olMatch) {
+      const listItems = [];
+      const indent = olMatch[1].length;
+      while (i < lines.length) {
+        const itemMatch = lines[i].match(/^(\s*)(\d+)\.\s+(.*)$/);
+        if (itemMatch && itemMatch[1].length === indent) {
+          listItems.push(
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { className: "apteva-md-li", children: parseInlineMarkdown(itemMatch[3], `${key}`) }, `li${key++}`)
+          );
+          i++;
+        } else {
+          break;
+        }
+      }
+      result.push(
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ol", { className: "apteva-md-ol", children: listItems }, `ol${key++}`)
+      );
+      continue;
+    }
+    if (line === "") {
+      result.push(/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "br", {}, `br${key++}`));
+    } else {
+      result.push(
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { children: [
+          parseInlineMarkdown(line, `${key}`),
+          i < lines.length - 1 ? "\n" : ""
+        ] }, `p${key++}`)
+      );
+    }
+    i++;
+  }
+  return result;
+}
+function MarkdownContent({ content, className = "" }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: `apteva-md ${className}`, children: parseMarkdown(content) });
+}
+
+// src/components/Chat/ToolCall.tsx
+
+function ToolCall({ name, status }) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2 py-2 px-3 my-2 rounded-lg bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-sm", children: [
+    status === "running" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-2 h-2 rounded-full bg-blue-500 animate-pulse" }),
+    status === "completed" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-2 h-2 rounded-full bg-green-500" }),
+    status === "error" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-2 h-2 rounded-full bg-red-500" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-gray-700 dark:text-gray-300 font-mono", children: name }),
+    status === "running" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-gray-500 dark:text-gray-400 ml-auto", children: "Running..." }),
+    status === "completed" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-green-600 dark:text-green-400 ml-auto", children: "Completed" }),
+    status === "error" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-red-600 dark:text-red-400 ml-auto", children: "Error" })
+  ] });
+}
+
 // src/components/Chat/Message.tsx
 
 function Message({ message, onAction }) {
   const isUser = message.role === "user";
+  const contentSegments = _optionalChain([message, 'access', _8 => _8.metadata, 'optionalAccess', _9 => _9.content_segments]);
+  const renderContent = () => {
+    if (isUser) {
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "whitespace-pre-wrap !text-sm leading-relaxed", children: message.content });
+    }
+    if (contentSegments && contentSegments.length > 0) {
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: contentSegments.map((segment, index) => {
+        if (segment.type === "text") {
+          return segment.content ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MarkdownContent, { content: segment.content }, `text-${index}`) : null;
+        } else if (segment.type === "tool") {
+          return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "my-2", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            ToolCall,
+            {
+              name: segment.name,
+              status: segment.result !== void 0 ? "completed" : "running"
+            }
+          ) }, segment.id);
+        }
+        return null;
+      }) });
+    }
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MarkdownContent, { content: message.content });
+  };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "div",
     {
@@ -576,7 +714,7 @@ function Message({ message, onAction }) {
         isUser ? "px-4 py-2.5 rounded-xl bg-gray-100 dark:bg-gray-800 !text-gray-900 dark:!text-gray-100 ml-auto" : "!text-gray-900 dark:!text-gray-100"
       ),
       children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "whitespace-pre-wrap !text-sm leading-relaxed", children: message.content }),
+        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" }) })
       ]
@@ -593,7 +731,7 @@ function MessageList({ messages, onAction }) {
       listRef.current.scrollTop = listRef.current.scrollHeight;
     }
   }, [messages]);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: listRef, className: "flex-1 overflow-y-auto px-4 py-4 space-y-3", children: messages.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center justify-center h-full !text-gray-500 dark:!text-gray-400", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "text-center space-y-2", children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: listRef, className: "flex-1 overflow-y-auto px-4 py-4 space-y-3 apteva-scrollbar-hidden", children: messages.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center justify-center h-full !text-gray-500 dark:!text-gray-400", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "text-center space-y-2", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-4xl", children: "\u{1F4AC}" }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: "No messages yet. Start a conversation!" })
   ] }) }) : messages.map((message) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Message, { message, onAction }, message.id)) });
@@ -629,7 +767,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
   };
   const handleFileSelect = (e) => {
     if (e.target.files && e.target.files.length > 0) {
-      _optionalChain([onFileUpload, 'optionalCall', _8 => _8(e.target.files)]);
+      _optionalChain([onFileUpload, 'optionalCall', _10 => _10(e.target.files)]);
       setShowMenu(false);
     }
   };
@@ -639,7 +777,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
       /* @__PURE__ */ _jsxruntime.jsx.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', _9 => _9.current, 'optionalAccess', _10 => _10.click, 'call', _11 => _11()]),
+          onClick: () => _optionalChain([fileInputRef, 'access', _11 => _11.current, 'optionalAccess', _12 => _12.click, 'call', _13 => _13()]),
           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)" }) }),
@@ -697,66 +835,6 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
   ] });
 }
 
-// src/components/Chat/Chat.tsx
-
-function Chat({
-  agentId,
-  threadId,
-  initialMessages = [],
-  context,
-  onThreadChange,
-  onMessageSent,
-  onAction,
-  onFileUpload,
-  placeholder = "Type a message...",
-  showHeader = true,
-  headerTitle = "Chat",
-  className
-}) {
-  const [messages, setMessages] = _react.useState.call(void 0, initialMessages.length > 0 ? initialMessages : mockMessages);
-  const [isLoading, setIsLoading] = _react.useState.call(void 0, false);
-  _react.useEffect.call(void 0, () => {
-    if (threadId) {
-      console.log("Loading thread:", threadId);
-      _optionalChain([onThreadChange, 'optionalCall', _12 => _12(threadId)]);
-    }
-  }, [threadId, onThreadChange]);
-  const handleSendMessage = async (text) => {
-    const userMessage = {
-      id: `msg-${Date.now()}`,
-      role: "user",
-      content: text,
-      timestamp: /* @__PURE__ */ new Date()
-    };
-    setMessages((prev) => [...prev, userMessage]);
-    _optionalChain([onMessageSent, 'optionalCall', _13 => _13(userMessage)]);
-    setIsLoading(true);
-    try {
-      const response = await generateMockResponse(1e3);
-      setMessages((prev) => [...prev, response]);
-    } catch (error) {
-      console.error("Error generating response:", error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn("flex flex-col h-full bg-white dark:bg-gray-900", className), children: [
-    showHeader && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "px-4 py-3 bg-white dark:bg-gray-900", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "!text-lg font-semibold !text-gray-900 dark:!text-white", children: headerTitle }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "!text-xs !text-gray-500 dark:!text-gray-400", children: [
-        "Agent: ",
-        agentId
-      ] })
-    ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MessageList, { messages, onAction }),
-    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, { onSendMessage: handleSendMessage, placeholder, disabled: isLoading, onFileUpload })
-  ] });
-}
-
-// src/components/Command/Command.tsx
-
-
 // src/lib/apteva-client.ts
 var DEFAULT_API_URL = "http://localhost:3000/agents";
 var DEFAULT_API_KEY = "agt_894abd5966bc9f1e9f8f17f2a6f6b5e0";
@@ -868,15 +946,9 @@ var AptevaClient = class {
               if (chunk.thread_id) {
                 threadId = chunk.thread_id;
               }
-              if (chunk.type === "token" && chunk.content) {
-                onChunk({ type: "token", content: chunk.content });
-              } else if (chunk.type === "widget" && chunk.widget) {
-                onChunk({ type: "widget", widget: chunk.widget });
-              } else if (chunk.type === "complete") {
-                onChunk({ type: "complete", thread_id: threadId });
-              }
+              onChunk(chunk);
             } catch (e) {
-              console.warn("Failed to parse SSE data:", data);
+              console.warn("[AptevaClient] Failed to parse SSE data:", data);
             }
           }
         }
@@ -927,8 +999,260 @@ var AptevaClient = class {
 };
 var aptevaClient = new AptevaClient();
 
+// src/components/Chat/Chat.tsx
+
+function Chat({
+  agentId,
+  threadId,
+  initialMessages = [],
+  context,
+  apiUrl,
+  apiKey,
+  useMock = false,
+  onThreadChange,
+  onMessageSent,
+  onAction,
+  onFileUpload,
+  placeholder = "Type a message...",
+  showHeader = true,
+  headerTitle = "Chat",
+  className
+}) {
+  const [messages, setMessages] = _react.useState.call(void 0, initialMessages);
+  const [isLoading, setIsLoading] = _react.useState.call(void 0, false);
+  const [currentThreadId, setCurrentThreadId] = _react.useState.call(void 0, threadId || null);
+  _react.useEffect.call(void 0, () => {
+    if (apiUrl || apiKey) {
+      aptevaClient.configure({
+        ...apiUrl && { apiUrl },
+        ...apiKey && { apiKey }
+      });
+    }
+  }, [apiUrl, apiKey]);
+  _react.useEffect.call(void 0, () => {
+    if (threadId) {
+      console.log("Loading thread:", threadId);
+      _optionalChain([onThreadChange, 'optionalCall', _20 => _20(threadId)]);
+    }
+  }, [threadId, onThreadChange]);
+  const handleSendMessage = async (text) => {
+    const userMessage = {
+      id: `msg-${Date.now()}`,
+      role: "user",
+      content: text,
+      timestamp: /* @__PURE__ */ new Date()
+    };
+    setMessages((prev) => [...prev, userMessage]);
+    _optionalChain([onMessageSent, 'optionalCall', _21 => _21(userMessage)]);
+    setIsLoading(true);
+    try {
+      if (useMock) {
+        const response = await generateMockResponse(1e3);
+        setMessages((prev) => [...prev, response]);
+      } else {
+        let contentSegments = [];
+        let currentTextBuffer = "";
+        let accumulatedWidgets = [];
+        let responseThreadId = currentThreadId;
+        let toolInputBuffer = "";
+        const updateMessage = () => {
+          const segments = [...contentSegments];
+          if (currentTextBuffer) {
+            const lastSegment = segments[segments.length - 1];
+            if (lastSegment && lastSegment.type === "text") {
+              lastSegment.content = currentTextBuffer;
+            } else {
+              segments.push({ type: "text", content: currentTextBuffer });
+            }
+          }
+          setMessages((prev) => {
+            const lastMessage = prev[prev.length - 1];
+            if (lastMessage && lastMessage.role === "assistant") {
+              return [
+                ...prev.slice(0, -1),
+                {
+                  ...lastMessage,
+                  content: currentTextBuffer,
+                  widgets: accumulatedWidgets.length > 0 ? accumulatedWidgets : void 0,
+                  metadata: {
+                    ...lastMessage.metadata,
+                    content_segments: segments
+                  }
+                }
+              ];
+            } else {
+              return [
+                ...prev,
+                {
+                  id: `msg-${Date.now()}-streaming`,
+                  role: "assistant",
+                  content: currentTextBuffer,
+                  widgets: accumulatedWidgets.length > 0 ? accumulatedWidgets : void 0,
+                  timestamp: /* @__PURE__ */ new Date(),
+                  metadata: {
+                    content_segments: segments
+                  }
+                }
+              ];
+            }
+          });
+        };
+        await aptevaClient.chatStream(
+          {
+            agent_id: agentId,
+            message: text,
+            stream: true,
+            ...currentThreadId && { thread_id: currentThreadId },
+            ...context && { system: context }
+          },
+          (chunk) => {
+            switch (chunk.type) {
+              case "start":
+                break;
+              case "thread_id":
+                if (chunk.thread_id) {
+                  responseThreadId = chunk.thread_id;
+                  if (!currentThreadId) {
+                    setCurrentThreadId(chunk.thread_id);
+                    _optionalChain([onThreadChange, 'optionalCall', _22 => _22(chunk.thread_id)]);
+                  }
+                }
+                break;
+              case "content":
+              case "token":
+                if (chunk.content) {
+                  currentTextBuffer += chunk.content;
+                  updateMessage();
+                }
+                break;
+              case "tool_call":
+                if (chunk.tool_id && chunk.tool_name) {
+                  if (currentTextBuffer) {
+                    contentSegments.push({ type: "text", content: currentTextBuffer });
+                    currentTextBuffer = "";
+                  }
+                  contentSegments.push({
+                    type: "tool",
+                    id: chunk.tool_id,
+                    name: chunk.tool_name
+                  });
+                  toolInputBuffer = "";
+                  updateMessage();
+                }
+                break;
+              case "tool_input_delta":
+                if (chunk.tool_id && chunk.content) {
+                  toolInputBuffer += chunk.content;
+                }
+                break;
+              case "tool_use":
+                toolInputBuffer = "";
+                break;
+              case "tool_result":
+                if (chunk.tool_id) {
+                  const toolSegment = contentSegments.find(
+                    (s) => s.type === "tool" && s.id === chunk.tool_id
+                  );
+                  if (toolSegment) {
+                    toolSegment.result = chunk.content;
+                  }
+                  updateMessage();
+                }
+                break;
+              case "widget":
+                if (chunk.widget) {
+                  accumulatedWidgets.push(chunk.widget);
+                  updateMessage();
+                }
+                break;
+              case "stop":
+                break;
+              case "complete":
+                break;
+              case "error":
+                throw new Error(chunk.message || "Stream error");
+              default:
+                break;
+            }
+          },
+          (threadId2) => {
+            if (currentTextBuffer) {
+              const lastSegment = contentSegments[contentSegments.length - 1];
+              if (lastSegment && lastSegment.type === "text") {
+                lastSegment.content = currentTextBuffer;
+              } else {
+                contentSegments.push({ type: "text", content: currentTextBuffer });
+              }
+            }
+            setMessages((prev) => {
+              const lastMessage = prev[prev.length - 1];
+              if (lastMessage && lastMessage.role === "assistant") {
+                return [
+                  ...prev.slice(0, -1),
+                  {
+                    ...lastMessage,
+                    id: `msg-${Date.now()}`,
+                    content: currentTextBuffer || "Response received",
+                    widgets: accumulatedWidgets.length > 0 ? accumulatedWidgets : void 0,
+                    metadata: {
+                      thread_id: threadId2,
+                      content_segments: contentSegments
+                    }
+                  }
+                ];
+              }
+              return prev;
+            });
+            if (threadId2 && threadId2 !== currentThreadId) {
+              setCurrentThreadId(threadId2);
+              _optionalChain([onThreadChange, 'optionalCall', _23 => _23(threadId2)]);
+            }
+            setIsLoading(false);
+          },
+          (error) => {
+            const errorMessage = {
+              id: `msg-${Date.now()}-error`,
+              role: "assistant",
+              content: `Error: ${error.message}`,
+              timestamp: /* @__PURE__ */ new Date(),
+              metadata: { error: true }
+            };
+            setMessages((prev) => {
+              const lastMessage = prev[prev.length - 1];
+              if (lastMessage && lastMessage.id.includes("streaming")) {
+                return [...prev.slice(0, -1), errorMessage];
+              }
+              return [...prev, errorMessage];
+            });
+            setIsLoading(false);
+          }
+        );
+      }
+    } catch (error) {
+      console.error("Chat error:", error);
+      const errorMessage = {
+        id: `msg-${Date.now()}-error`,
+        role: "assistant",
+        content: error instanceof Error ? `Error: ${error.message}` : "An error occurred",
+        timestamp: /* @__PURE__ */ new Date(),
+        metadata: { error: true }
+      };
+      setMessages((prev) => [...prev, errorMessage]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn("flex flex-col h-full bg-white dark:bg-gray-900", className), children: [
+    showHeader && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-4 py-3 bg-white dark:bg-gray-900", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "!text-lg font-semibold !text-gray-900 dark:!text-white", children: headerTitle }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MessageList, { messages, onAction }),
+    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, { onSendMessage: handleSendMessage, placeholder, disabled: isLoading, onFileUpload })
+  ] });
+}
+
 // src/components/Command/Command.tsx
 
+
 function Command({
   agentId,
   command: initialCommand,
@@ -1061,13 +1385,13 @@ ${planningInstruction}` : planningInstruction;
             const error2 = err instanceof Error ? err : new Error("Failed to generate plan");
             setError(error2);
             setState("error");
-            _optionalChain([onError, 'optionalCall', _20 => _20(error2)]);
+            _optionalChain([onError, 'optionalCall', _24 => _24(error2)]);
           });
         } catch (err) {
           const error2 = err instanceof Error ? err : new Error("Failed to generate plan");
           setError(error2);
           setState("error");
-          _optionalChain([onError, 'optionalCall', _21 => _21(error2)]);
+          _optionalChain([onError, 'optionalCall', _25 => _25(error2)]);
         }
       }
       return;
@@ -1078,7 +1402,7 @@ ${planningInstruction}` : planningInstruction;
     setStreamedContent("");
     setCommand("");
     setUploadedFiles([]);
-    _optionalChain([onStart, 'optionalCall', _22 => _22()]);
+    _optionalChain([onStart, 'optionalCall', _26 => _26()]);
     try {
       if (useMock) {
         if (enableStreaming) {
@@ -1089,16 +1413,16 @@ ${planningInstruction}` : planningInstruction;
               if (chunk.type === "token" && chunk.content) {
                 accumulatedContent += chunk.content;
                 setStreamedContent(accumulatedContent);
-                _optionalChain([onChunk, 'optionalCall', _23 => _23(chunk.content)]);
+                _optionalChain([onChunk, 'optionalCall', _27 => _27(chunk.content)]);
                 const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);
                 setProgress(estimatedProgress);
-                _optionalChain([onProgress, 'optionalCall', _24 => _24(estimatedProgress)]);
+                _optionalChain([onProgress, 'optionalCall', _28 => _28(estimatedProgress)]);
               } else if (chunk.type === "widget" && chunk.widget) {
                 const widget = chunk.widget;
                 setResult((prev) => ({
                   success: true,
-                  data: _optionalChain([prev, 'optionalAccess', _25 => _25.data]) || {},
-                  widgets: [..._optionalChain([prev, 'optionalAccess', _26 => _26.widgets]) || [], widget],
+                  data: _optionalChain([prev, 'optionalAccess', _29 => _29.data]) || {},
+                  widgets: [..._optionalChain([prev, 'optionalAccess', _30 => _30.widgets]) || [], widget],
                   message: accumulatedContent || "Command executed successfully"
                 }));
               }
@@ -1118,19 +1442,19 @@ ${planningInstruction}` : planningInstruction;
               setResult(result2);
               setState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _27 => _27(result2)]);
+              _optionalChain([onComplete, 'optionalCall', _31 => _31(result2)]);
             },
             (error2) => {
               setError(error2);
               setState("error");
-              _optionalChain([onError, 'optionalCall', _28 => _28(error2)]);
+              _optionalChain([onError, 'optionalCall', _32 => _32(error2)]);
             }
           );
         } else {
           const progressInterval = setInterval(() => {
             setProgress((prev) => {
               const next = Math.min(prev + 10, 90);
-              _optionalChain([onProgress, 'optionalCall', _29 => _29(next)]);
+              _optionalChain([onProgress, 'optionalCall', _33 => _33(next)]);
               return next;
             });
           }, 200);
@@ -1154,7 +1478,7 @@ ${planningInstruction}` : planningInstruction;
           setResult(result2);
           setState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _30 => _30(result2)]);
+          _optionalChain([onComplete, 'optionalCall', _34 => _34(result2)]);
         }
       } else {
         if (enableStreaming) {
@@ -1200,16 +1524,16 @@ ${commandInstruction}` : commandInstruction;
               if (chunk.type === "token" && chunk.content) {
                 accumulatedContent += chunk.content;
                 setStreamedContent(accumulatedContent);
-                _optionalChain([onChunk, 'optionalCall', _31 => _31(chunk.content)]);
+                _optionalChain([onChunk, 'optionalCall', _35 => _35(chunk.content)]);
                 const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);
                 setProgress(estimatedProgress);
-                _optionalChain([onProgress, 'optionalCall', _32 => _32(estimatedProgress)]);
+                _optionalChain([onProgress, 'optionalCall', _36 => _36(estimatedProgress)]);
               } else if (chunk.type === "widget" && chunk.widget) {
                 const widget = chunk.widget;
                 setResult((prev) => ({
                   success: true,
-                  data: _optionalChain([prev, 'optionalAccess', _33 => _33.data]) || {},
-                  widgets: [..._optionalChain([prev, 'optionalAccess', _34 => _34.widgets]) || [], widget],
+                  data: _optionalChain([prev, 'optionalAccess', _37 => _37.data]) || {},
+                  widgets: [..._optionalChain([prev, 'optionalAccess', _38 => _38.widgets]) || [], widget],
                   message: accumulatedContent || "Command executed successfully"
                 }));
               }
@@ -1229,20 +1553,20 @@ ${commandInstruction}` : commandInstruction;
               setResult(result2);
               setState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _35 => _35(result2)]);
+              _optionalChain([onComplete, 'optionalCall', _39 => _39(result2)]);
             },
             (error2) => {
               const err = error2 instanceof Error ? error2 : new Error("Unknown error");
               setError(err);
               setState("error");
-              _optionalChain([onError, 'optionalCall', _36 => _36(err)]);
+              _optionalChain([onError, 'optionalCall', _40 => _40(err)]);
             }
           );
         } else {
           const progressInterval = setInterval(() => {
             setProgress((prev) => {
               const next = Math.min(prev + 10, 90);
-              _optionalChain([onProgress, 'optionalCall', _37 => _37(next)]);
+              _optionalChain([onProgress, 'optionalCall', _41 => _41(next)]);
               return next;
             });
           }, 200);
@@ -1298,14 +1622,14 @@ ${commandInstruction}` : commandInstruction;
           setResult(result2);
           setState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _38 => _38(result2)]);
+          _optionalChain([onComplete, 'optionalCall', _42 => _42(result2)]);
         }
       }
     } catch (err) {
       const error2 = err instanceof Error ? err : new Error("Unknown error");
       setError(error2);
       setState("error");
-      _optionalChain([onError, 'optionalCall', _39 => _39(error2)]);
+      _optionalChain([onError, 'optionalCall', _43 => _43(error2)]);
     }
   };
   const resetCommand = () => {
@@ -1338,14 +1662,14 @@ ${planToExecute}`;
   };
   const handleFileSelect = async (e) => {
     if (e.target.files && e.target.files.length > 0) {
-      _optionalChain([onFileUpload, 'optionalCall', _40 => _40(e.target.files)]);
+      _optionalChain([onFileUpload, 'optionalCall', _44 => _44(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', _41 => _41.target, 'optionalAccess', _42 => _42.result])) {
+            if (_optionalChain([event, 'access', _45 => _45.target, 'optionalAccess', _46 => _46.result])) {
               const fullDataUrl = event.target.result;
               const base64Data = fullDataUrl.split(",")[1];
               if (file.type.startsWith("image/")) {
@@ -1439,7 +1763,7 @@ ${planToExecute}`;
               enableFileUpload && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 "button",
                 {
-                  onClick: () => _optionalChain([fileInputRef, 'access', _43 => _43.current, 'optionalAccess', _44 => _44.click, 'call', _45 => _45()]),
+                  onClick: () => _optionalChain([fileInputRef, 'access', _47 => _47.current, 'optionalAccess', _48 => _48.click, 'call', _49 => _49()]),
                   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)" }) })
@@ -1658,7 +1982,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', _46 => _46.message]) })
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: _optionalChain([error, 'optionalAccess', _50 => _50.message]) })
               ] })
             ] }) }),
             allowInput && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -1686,7 +2010,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', _47 => _47.data, 'optionalAccess', _48 => _48.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', _51 => _51.data, 'optionalAccess', _52 => _52.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,
               {
@@ -1737,7 +2061,7 @@ ${planToExecute}`;
             enableFileUpload && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "button",
               {
-                onClick: () => _optionalChain([fileInputRef, 'access', _49 => _49.current, 'optionalAccess', _50 => _50.click, 'call', _51 => _51()]),
+                onClick: () => _optionalChain([fileInputRef, 'access', _53 => _53.current, 'optionalAccess', _54 => _54.click, 'call', _55 => _55()]),
                 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)" }) })
@@ -1923,25 +2247,25 @@ function Prompt({
     const newValue = e.target.value;
     if (!maxLength || newValue.length <= maxLength) {
       setValue(newValue);
-      _optionalChain([onChange, 'optionalCall', _52 => _52(newValue)]);
+      _optionalChain([onChange, 'optionalCall', _56 => _56(newValue)]);
     }
   };
   const handleSubmit = async () => {
     if (value.length < minLength) return;
-    _optionalChain([onSubmit, 'optionalCall', _53 => _53(value)]);
+    _optionalChain([onSubmit, 'optionalCall', _57 => _57(value)]);
     setIsLoading(true);
     try {
       if (useMock) {
         await new Promise((resolve) => setTimeout(resolve, 1500));
         const mockResult = `Enhanced version: ${value} [AI-generated content]`;
-        _optionalChain([onResult, 'optionalCall', _54 => _54(mockResult)]);
+        _optionalChain([onResult, 'optionalCall', _58 => _58(mockResult)]);
         setValue("");
       } else {
         const response = await aptevaClient.chat({
           agent_id: agentId,
           message: value
         });
-        _optionalChain([onResult, 'optionalCall', _55 => _55(response.message)]);
+        _optionalChain([onResult, 'optionalCall', _59 => _59(response.message)]);
         setValue("");
       }
     } catch (error) {
@@ -2036,7 +2360,7 @@ function Stream({
   }, [autoStart]);
   const startStreaming = async () => {
     setIsStreaming(true);
-    _optionalChain([onStart, 'optionalCall', _56 => _56()]);
+    _optionalChain([onStart, 'optionalCall', _60 => _60()]);
     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.";
@@ -2044,13 +2368,13 @@ function Stream({
           mockText,
           (chunk) => {
             setText((prev) => prev + chunk);
-            _optionalChain([onChunk, 'optionalCall', _57 => _57(chunk)]);
+            _optionalChain([onChunk, 'optionalCall', _61 => _61(chunk)]);
           },
           typingSpeed
         );
         setIsComplete(true);
         setIsStreaming(false);
-        _optionalChain([onComplete, 'optionalCall', _58 => _58(text + mockText)]);
+        _optionalChain([onComplete, 'optionalCall', _62 => _62(text + mockText)]);
       } else {
         let accumulatedText = "";
         await aptevaClient.chatStream(
@@ -2063,24 +2387,24 @@ function Stream({
             if (chunk.type === "token" && chunk.content) {
               accumulatedText += chunk.content;
               setText(accumulatedText);
-              _optionalChain([onChunk, 'optionalCall', _59 => _59(chunk.content)]);
+              _optionalChain([onChunk, 'optionalCall', _63 => _63(chunk.content)]);
             }
           },
           () => {
             setIsComplete(true);
             setIsStreaming(false);
-            _optionalChain([onComplete, 'optionalCall', _60 => _60(accumulatedText)]);
+            _optionalChain([onComplete, 'optionalCall', _64 => _64(accumulatedText)]);
           },
           (error) => {
             const err = error instanceof Error ? error : new Error("Streaming error");
-            _optionalChain([onError, 'optionalCall', _61 => _61(err)]);
+            _optionalChain([onError, 'optionalCall', _65 => _65(err)]);
             setIsStreaming(false);
           }
         );
       }
     } catch (error) {
       const err = error instanceof Error ? error : new Error("Streaming error");
-      _optionalChain([onError, 'optionalCall', _62 => _62(err)]);
+      _optionalChain([onError, 'optionalCall', _66 => _66(err)]);
       setIsStreaming(false);
     }
   };
@@ -2172,7 +2496,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', _63 => _63.preview, 'optionalAccess', _64 => _64.toLowerCase, 'call', _65 => _65(), 'access', _66 => _66.includes, 'call', _67 => _67(searchQuery.toLowerCase())])
+    (thread) => thread.title.toLowerCase().includes(searchQuery.toLowerCase()) || _optionalChain([thread, 'access', _67 => _67.preview, 'optionalAccess', _68 => _68.toLowerCase, 'call', _69 => _69(), 'access', _70 => _70.includes, 'call', _71 => _71(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: [
@@ -2194,8 +2518,8 @@ function ThreadList({
           {
             thread,
             isActive: thread.id === currentThreadId,
-            onSelect: () => _optionalChain([onThreadSelect, 'optionalCall', _68 => _68(thread.id)]),
-            onDelete: () => _optionalChain([onThreadDelete, 'optionalCall', _69 => _69(thread.id)])
+            onSelect: () => _optionalChain([onThreadSelect, 'optionalCall', _72 => _72(thread.id)]),
+            onDelete: () => _optionalChain([onThreadDelete, 'optionalCall', _73 => _73(thread.id)])
           },
           thread.id
         ))
@@ -2257,7 +2581,7 @@ function Threads({
       threads.slice(0, 5).map((thread) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "button",
         {
-          onClick: () => _optionalChain([onThreadSelect, 'optionalCall', _70 => _70(thread.id)]),
+          onClick: () => _optionalChain([onThreadSelect, 'optionalCall', _74 => _74(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"