@apteva/apteva-kit 0.1.11 → 0.1.14

package/dist/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -417,6 +417,87 @@ function generateMockCommandStream(command, onChunk, onComplete, onError, typing
   }, typingSpeed);
 }
 
+// src/utils/file-utils.ts
+function fileToBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result;
+      const base64 = result.split(",")[1];
+      resolve(base64);
+    };
+    reader.onerror = () => reject(new Error("Failed to read file"));
+    reader.readAsDataURL(file);
+  });
+}
+function getContentBlockType(mimeType) {
+  if (mimeType.startsWith("image/")) {
+    return "image";
+  }
+  return "document";
+}
+function isSupportedFileType(file) {
+  const supportedTypes = [
+    // Images
+    "image/jpeg",
+    "image/png",
+    "image/gif",
+    "image/webp",
+    // Documents
+    "application/pdf",
+    "text/plain",
+    "application/msword",
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+  ];
+  return supportedTypes.includes(file.type);
+}
+async function fileToContentBlock(file) {
+  const base64 = await fileToBase64(file);
+  const blockType = getContentBlockType(file.type);
+  return {
+    type: blockType,
+    source: {
+      type: "base64",
+      media_type: file.type,
+      data: base64
+    }
+  };
+}
+async function filesToContentBlocks(files) {
+  const fileArray = Array.from(files);
+  const blocks = await Promise.all(
+    fileArray.map((file) => fileToContentBlock(file))
+  );
+  return blocks;
+}
+async function buildMessageWithAttachments(text, files) {
+  if (!files || files.length === 0) {
+    return text;
+  }
+  const blocks = [];
+  if (text.trim()) {
+    blocks.push({ type: "text", text: text.trim() });
+  }
+  const fileBlocks = await filesToContentBlocks(files);
+  blocks.push(...fileBlocks);
+  return blocks;
+}
+function formatFileSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+var MAX_FILE_SIZE = 10 * 1024 * 1024;
+function validateFile(file) {
+  if (!isSupportedFileType(file)) {
+    return { valid: false, error: `Unsupported file type: ${file.type}` };
+  }
+  if (file.size > MAX_FILE_SIZE) {
+    return { valid: false, error: `File too large: ${formatFileSize(file.size)} (max ${formatFileSize(MAX_FILE_SIZE)})` };
+  }
+  return { valid: true };
+}
+
 // src/components/Widgets/Widgets.tsx
 
 
@@ -514,6 +595,53 @@ function Button({ widget, onAction }) {
   );
 }
 
+// src/components/Widgets/widget-library/ButtonGroup.tsx
+
+function ButtonGroup({ widget, onAction }) {
+  const { layout = "horizontal", buttons } = widget.props;
+  const variantClasses = {
+    primary: "bg-blue-500 !text-white hover:bg-blue-600",
+    secondary: "bg-gray-200 dark:bg-gray-700 !text-gray-800 dark:!text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600",
+    outline: "border border-gray-300 dark:border-gray-600 !text-gray-700 dark:!text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800"
+  };
+  const getActionForButton = (buttonId) => {
+    return _optionalChain([widget, 'access', _7 => _7.actions, 'optionalAccess', _8 => _8.find, 'call', _9 => _9((action) => _optionalChain([action, 'access', _10 => _10.payload, 'optionalAccess', _11 => _11.buttonId]) === buttonId)]) || _optionalChain([widget, 'access', _12 => _12.actions, 'optionalAccess', _13 => _13[0]]);
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: cn(
+        "flex gap-2",
+        layout === "vertical" ? "flex-col" : "flex-row flex-wrap"
+      ),
+      children: buttons.map((button) => {
+        const action = getActionForButton(button.id);
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "button",
+          {
+            onClick: () => {
+              if (action) {
+                _optionalChain([onAction, 'optionalCall', _14 => _14({
+                  type: action.type,
+                  payload: { ...action.payload, buttonId: button.id },
+                  widgetId: widget.id,
+                  timestamp: /* @__PURE__ */ new Date()
+                })]);
+              }
+            },
+            className: cn(
+              "px-4 py-2 rounded-lg font-medium transition-colors text-sm",
+              variantClasses[button.variant || "secondary"]
+            ),
+            children: button.label
+          },
+          button.id
+        );
+      })
+    }
+  );
+}
+
 // src/components/Widgets/WidgetRenderer.tsx
 
 function WidgetRenderer({ widget, onAction }) {
@@ -524,6 +652,8 @@ function WidgetRenderer({ widget, onAction }) {
       return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, List, { widget, onAction });
     case "button":
       return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { widget, onAction });
+    case "button_group":
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ButtonGroup, { widget, onAction });
     default:
       return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "p-4 border border-yellow-300 bg-yellow-50 rounded-lg", children: [
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-sm text-yellow-800", children: [
@@ -548,7 +678,7 @@ function Widgets({
 }) {
   _react.useEffect.call(void 0, () => {
     widgets.forEach((widget) => {
-      _optionalChain([onWidgetMount, 'optionalCall', _7 => _7(widget.id)]);
+      _optionalChain([onWidgetMount, 'optionalCall', _15 => _15(widget.id)]);
     });
   }, [widgets, onWidgetMount]);
   const layoutClasses = {
@@ -647,6 +777,33 @@ function parseMarkdown(content) {
       );
       continue;
     }
+    const tableMatch = line.match(/^\|(.+)\|$/);
+    if (tableMatch && i + 1 < lines.length) {
+      const separatorLine = lines[i + 1];
+      const separatorMatch = separatorLine.match(/^\|[\s:-]+\|$/);
+      if (separatorMatch) {
+        const headerCells = line.split("|").filter((cell) => cell.trim() !== "").map((cell) => cell.trim());
+        i += 2;
+        const bodyRows = [];
+        while (i < lines.length) {
+          const rowMatch = lines[i].match(/^\|(.+)\|$/);
+          if (rowMatch) {
+            const cells = lines[i].split("|").filter((cell) => cell.trim() !== "").map((cell) => cell.trim());
+            bodyRows.push(cells);
+            i++;
+          } else {
+            break;
+          }
+        }
+        result.push(
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-md-table-wrapper", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "table", { className: "apteva-md-table", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "thead", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: headerCells.map((cell, idx) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { className: "apteva-md-th", children: parseInlineMarkdown(cell, `th${key}${idx}`) }, `th${idx}`)) }) }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { children: bodyRows.map((row, rowIdx) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: row.map((cell, cellIdx) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { className: "apteva-md-td", children: parseInlineMarkdown(cell, `td${key}${rowIdx}${cellIdx}`) }, `td${cellIdx}`)) }, `tr${rowIdx}`)) })
+          ] }) }, `table-wrapper${key++}`)
+        );
+        continue;
+      }
+    }
     if (line === "") {
       result.push(/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "br", {}, `br${key++}`));
     } else {
@@ -668,14 +825,14 @@ function MarkdownContent({ content, className = "" }) {
 // 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" })
+  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" })
   ] });
 }
 
@@ -683,7 +840,7 @@ function ToolCall({ name, status }) {
 
 function Message({ message, onAction }) {
   const isUser = message.role === "user";
-  const contentSegments = _optionalChain([message, 'access', _8 => _8.metadata, 'optionalAccess', _9 => _9.content_segments]);
+  const contentSegments = _optionalChain([message, 'access', _16 => _16.metadata, 'optionalAccess', _17 => _17.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 });
@@ -711,7 +868,7 @@ function Message({ message, onAction }) {
     {
       className: cn(
         "max-w-[80%]",
-        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"
+        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"
       ),
       children: [
         renderContent(),
@@ -722,27 +879,187 @@ function Message({ message, onAction }) {
   );
 }
 
+// src/components/Chat/WelcomeScreen.tsx
+
+var DefaultIcon = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-12 h-12 sm:w-16 sm:h-16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "path",
+  {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 1.5,
+    d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+  }
+) });
+var ArrowIcon = () => /* @__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: "M13 7l5 5m0 0l-5 5m5-5H6" }) });
+function WelcomeScreen({
+  title,
+  subtitle,
+  icon,
+  prompts,
+  variant = "centered",
+  onPromptClick
+}) {
+  const normalizedPrompts = (prompts || []).map(
+    (p) => typeof p === "string" ? { text: p } : p
+  );
+  const hasPrompts = normalizedPrompts.length > 0;
+  const hasHeader = title || subtitle || icon;
+  if (!hasHeader && !hasPrompts) {
+    return /* @__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: "flex justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DefaultIcon, {}) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm", children: "No messages yet. Start a conversation!" })
+    ] }) });
+  }
+  if (variant === "minimal") {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col h-full px-4 py-4", children: [
+      hasHeader && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mb-4", children: [
+        title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "text-lg font-semibold !text-gray-900 dark:!text-white", children: title }),
+        subtitle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm !text-gray-500 dark:!text-gray-400 mt-1", children: subtitle })
+      ] }),
+      hasPrompts && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 space-y-2", children: normalizedPrompts.map((prompt, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          onClick: () => onPromptClick(prompt.text),
+          className: cn(
+            "w-full text-left px-4 py-3 rounded-xl",
+            "bg-gray-50 dark:bg-gray-800/50",
+            "border border-gray-200 dark:border-gray-700",
+            "hover:bg-gray-100 dark:hover:bg-gray-800",
+            "hover:border-gray-300 dark:hover:border-gray-600",
+            "transition-all duration-200",
+            "group"
+          ),
+          children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-shrink-0 !text-gray-400 dark:!text-gray-500 group-hover:!text-blue-500 dark:group-hover:!text-blue-400 transition-colors", children: prompt.icon || /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ArrowIcon, {}) }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm font-medium !text-gray-900 dark:!text-white truncate", children: prompt.text }),
+              prompt.description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-xs !text-gray-500 dark:!text-gray-400 mt-0.5 truncate", children: prompt.description })
+            ] })
+          ] })
+        },
+        index
+      )) })
+    ] });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col items-center justify-center h-full px-4 py-6 sm:py-8", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "text-center mb-6 sm:mb-8 max-w-md", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mb-4 !text-gray-400 dark:!text-gray-500 flex justify-center", children: icon || /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DefaultIcon, {}) }),
+      title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h1", { className: "text-xl sm:text-2xl font-semibold !text-gray-900 dark:!text-white mb-2", children: title }),
+      subtitle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm sm:text-base !text-gray-500 dark:!text-gray-400", children: subtitle })
+    ] }),
+    hasPrompts && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "w-full max-w-2xl", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "sm:hidden space-y-2", children: normalizedPrompts.map((prompt, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          onClick: () => onPromptClick(prompt.text),
+          className: cn(
+            "w-full text-left px-4 py-3 rounded-xl",
+            "bg-white dark:bg-gray-800",
+            "border border-gray-200 dark:border-gray-700",
+            "hover:bg-gray-50 dark:hover:bg-gray-700",
+            "hover:border-blue-300 dark:hover:border-blue-600",
+            "active:scale-[0.98]",
+            "transition-all duration-200",
+            "shadow-sm hover:shadow",
+            "group"
+          ),
+          children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-shrink-0 w-8 h-8 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center !text-gray-500 dark:!text-gray-400 group-hover:bg-blue-100 dark:group-hover:bg-blue-900/30 group-hover:!text-blue-600 dark:group-hover:!text-blue-400 transition-colors", children: prompt.icon || /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ArrowIcon, {}) }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm font-medium !text-gray-900 dark:!text-white", children: prompt.text }),
+              prompt.description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-xs !text-gray-500 dark:!text-gray-400 mt-0.5 line-clamp-1", children: prompt.description })
+            ] }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "svg",
+              {
+                className: "w-4 h-4 !text-gray-400 group-hover:!text-blue-500 transition-colors flex-shrink-0",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M9 5l7 7-7 7"
+                  }
+                )
+              }
+            )
+          ] })
+        },
+        index
+      )) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "hidden sm:grid sm:grid-cols-2 gap-3", children: normalizedPrompts.map((prompt, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          onClick: () => onPromptClick(prompt.text),
+          className: cn(
+            "text-left p-4 rounded-xl",
+            "bg-white dark:bg-gray-800",
+            "border border-gray-200 dark:border-gray-700",
+            "hover:bg-gray-50 dark:hover:bg-gray-700",
+            "hover:border-blue-300 dark:hover:border-blue-600",
+            "hover:shadow-md",
+            "active:scale-[0.98]",
+            "transition-all duration-200",
+            "group"
+          ),
+          children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-shrink-0 w-9 h-9 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center !text-gray-500 dark:!text-gray-400 group-hover:bg-blue-100 dark:group-hover:bg-blue-900/30 group-hover:!text-blue-600 dark:group-hover:!text-blue-400 transition-colors", children: prompt.icon || /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ArrowIcon, {}) }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm font-medium !text-gray-900 dark:!text-white leading-snug", children: prompt.text }),
+              prompt.description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-xs !text-gray-500 dark:!text-gray-400 mt-1 line-clamp-2", children: prompt.description })
+            ] })
+          ] })
+        },
+        index
+      )) })
+    ] })
+  ] });
+}
+
 // src/components/Chat/MessageList.tsx
 
-function MessageList({ messages, onAction }) {
+function MessageList({
+  messages,
+  onAction,
+  welcomeTitle,
+  welcomeSubtitle,
+  welcomeIcon,
+  suggestedPrompts,
+  welcomeVariant,
+  onPromptClick
+}) {
   const listRef = _react.useRef.call(void 0, null);
   _react.useEffect.call(void 0, () => {
     if (listRef.current) {
       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 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)) });
+  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, 
+    WelcomeScreen,
+    {
+      title: welcomeTitle,
+      subtitle: welcomeSubtitle,
+      icon: welcomeIcon,
+      prompts: suggestedPrompts,
+      variant: welcomeVariant,
+      onPromptClick: onPromptClick || (() => {
+      })
+    }
+  ) : messages.map((message) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Message, { message, onAction }, message.id)) });
 }
 
 // src/components/Chat/Composer.tsx
 
 
-function Composer({ onSendMessage, placeholder = "Type a message...", disabled = false, onFileUpload }) {
+function Composer({ onSendMessage, placeholder = "Type a message...", disabled = false, onFileUpload, onSwitchMode }) {
   const [text, setText] = _react.useState.call(void 0, "");
   const [showMenu, setShowMenu] = _react.useState.call(void 0, false);
+  const [pendingFiles, setPendingFiles] = _react.useState.call(void 0, []);
+  const [fileError, setFileError] = _react.useState.call(void 0, null);
   const textareaRef = _react.useRef.call(void 0, null);
   const fileInputRef = _react.useRef.call(void 0, null);
   const handleKeyDown = (e) => {
@@ -752,9 +1069,14 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
     }
   };
   const handleSend = () => {
-    if (text.trim() && !disabled) {
-      onSendMessage(text.trim());
+    const hasText = text.trim();
+    const hasFiles = pendingFiles.length > 0;
+    if ((hasText || hasFiles) && !disabled) {
+      const filesToSend = pendingFiles.map((pf) => pf.file);
+      onSendMessage(text.trim(), filesToSend.length > 0 ? filesToSend : void 0);
       setText("");
+      setPendingFiles([]);
+      setFileError(null);
       if (textareaRef.current) {
         textareaRef.current.style.height = "auto";
       }
@@ -767,25 +1089,112 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
   };
   const handleFileSelect = (e) => {
     if (e.target.files && e.target.files.length > 0) {
-      _optionalChain([onFileUpload, 'optionalCall', _10 => _10(e.target.files)]);
+      const files = Array.from(e.target.files);
+      const validFiles = [];
+      const errors = [];
+      files.forEach((file) => {
+        const validation = validateFile(file);
+        if (validation.valid) {
+          const pending = { file };
+          if (file.type.startsWith("image/")) {
+            pending.preview = URL.createObjectURL(file);
+          }
+          validFiles.push(pending);
+        } else {
+          errors.push(validation.error || "Invalid file");
+        }
+      });
+      if (validFiles.length > 0) {
+        setPendingFiles((prev) => [...prev, ...validFiles]);
+      }
+      if (errors.length > 0) {
+        setFileError(errors.join(", "));
+        setTimeout(() => setFileError(null), 5e3);
+      }
+      _optionalChain([onFileUpload, 'optionalCall', _18 => _18(e.target.files)]);
       setShowMenu(false);
+      e.target.value = "";
     }
   };
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "px-4 py-3 bg-white dark:bg-gray-900 relative", children: [
+  const removeFile = (index) => {
+    setPendingFiles((prev) => {
+      const file = prev[index];
+      if (file.preview) {
+        URL.revokeObjectURL(file.preview);
+      }
+      return prev.filter((_, i) => i !== index);
+    });
+  };
+  const getFileIcon = (mimeType) => {
+    if (mimeType.startsWith("image/")) {
+      return /* @__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: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) });
+    }
+    if (mimeType === "application/pdf") {
+      return /* @__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: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) });
+    }
+    return /* @__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: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) });
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "px-4 py-3 relative", children: [
+    fileError && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "absolute bottom-full left-4 right-4 mb-2 p-3 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg z-20", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2 !text-red-700 dark:!text-red-300 text-sm", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-4 h-4 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: fileError })
+    ] }) }),
     showMenu && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "fixed inset-0 z-10", onClick: () => setShowMenu(false) }),
-      /* @__PURE__ */ _jsxruntime.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', _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)" }) }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "!text-sm font-medium", children: "Add photos & files" })
-          ]
-        }
-      ) })
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "absolute bottom-full left-4 mb-2 bg-gray-800 dark:bg-gray-700 rounded-xl shadow-lg overflow-hidden z-20 min-w-[240px]", children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "button",
+          {
+            onClick: () => {
+              _optionalChain([fileInputRef, 'access', _19 => _19.current, 'optionalAccess', _20 => _20.click, 'call', _21 => _21()]);
+              setShowMenu(false);
+            },
+            className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left",
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10.5 3.5L5.5 8.5C4.67157 9.32843 4.67157 10.6716 5.5 11.5C6.32843 12.3284 7.67157 12.3284 8.5 11.5L14.5 5.5C15.8807 4.11929 15.8807 1.88071 14.5 0.5C13.1193 -0.880711 10.8807 -0.880711 9.5 0.5L3.5 6.5C1.56846 8.43154 1.56846 11.5685 3.5 13.5C5.43154 15.4315 8.56846 15.4315 10.5 13.5L15.5 8.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(2, 3)" }) }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "!text-sm font-medium", children: "Add photos & files" })
+            ]
+          }
+        ),
+        onSwitchMode && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "button",
+          {
+            onClick: () => {
+              onSwitchMode();
+              setShowMenu(false);
+            },
+            className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left border-t border-gray-700 dark:border-gray-600",
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "!text-sm font-medium", children: "Switch to command mode" })
+            ]
+          }
+        )
+      ] })
     ] }),
+    pendingFiles.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mb-2 flex flex-wrap gap-2", children: pendingFiles.map((pf, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        className: "relative group flex items-center gap-2 px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg",
+        children: [
+          pf.preview ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: pf.preview, alt: pf.file.name, className: "w-8 h-8 object-cover rounded" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-8 h-8 flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded !text-gray-500 dark:!text-gray-400", children: getFileIcon(pf.file.type) }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col min-w-0", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-xs font-medium !text-gray-700 dark:!text-gray-300 truncate max-w-[120px]", children: pf.file.name }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-xs !text-gray-500 dark:!text-gray-400", children: formatFileSize(pf.file.size) })
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "button",
+            {
+              onClick: () => removeFile(index),
+              className: "absolute -top-1.5 -right-1.5 w-5 h-5 bg-gray-500 hover:bg-red-500 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity",
+              title: "Remove file",
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+            }
+          )
+        ]
+      },
+      index
+    )) }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative border-2 border-gray-300 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-900 transition-all duration-300 flex items-center px-3 py-2 gap-3", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "button",
@@ -814,7 +1223,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
         "button",
         {
           onClick: handleSend,
-          disabled: !text.trim() || disabled,
+          disabled: !text.trim() && pendingFiles.length === 0 || disabled,
           className: "w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 !text-gray-700 dark:!text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-30 disabled:cursor-not-allowed !text-lg",
           title: "Send message",
           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 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
@@ -835,8 +1244,341 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
   ] });
 }
 
+// src/components/Chat/CommandComposer.tsx
+
+
+function CommandComposer({
+  onExecute,
+  state,
+  response,
+  error,
+  plan,
+  streamedContent,
+  toolName,
+  onApprove,
+  onReject,
+  onReset,
+  onExpand,
+  placeholder = "Enter your command...",
+  disabled = false
+}) {
+  const [input, setInput] = _react.useState.call(void 0, "");
+  const [pendingFiles, setPendingFiles] = _react.useState.call(void 0, []);
+  const [fileError, setFileError] = _react.useState.call(void 0, null);
+  const [showMenu, setShowMenu] = _react.useState.call(void 0, false);
+  const inputRef = _react.useRef.call(void 0, null);
+  const fileInputRef = _react.useRef.call(void 0, null);
+  const menuButtonRef = _react.useRef.call(void 0, null);
+  const handleSubmit = () => {
+    const hasText = input.trim();
+    const hasFiles = pendingFiles.length > 0;
+    if ((hasText || hasFiles) && !disabled && state === "idle") {
+      const filesToSend = pendingFiles.map((pf) => pf.file);
+      onExecute(input.trim(), filesToSend.length > 0 ? filesToSend : void 0);
+      setInput("");
+      setPendingFiles([]);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+  const handleNewCommand = () => {
+    _optionalChain([onReset, 'optionalCall', _22 => _22()]);
+    _optionalChain([inputRef, 'access', _23 => _23.current, 'optionalAccess', _24 => _24.focus, 'call', _25 => _25()]);
+  };
+  const handleInputChange = (value) => {
+    setInput(value);
+    if (inputRef.current) {
+      inputRef.current.style.height = "auto";
+      inputRef.current.style.height = `${Math.min(inputRef.current.scrollHeight, 120)}px`;
+    }
+  };
+  const handleFileSelect = (e) => {
+    if (e.target.files && e.target.files.length > 0) {
+      const files = Array.from(e.target.files);
+      const validFiles = [];
+      const errors = [];
+      files.forEach((file) => {
+        const validation = validateFile(file);
+        if (validation.valid) {
+          const pending = { file };
+          if (file.type.startsWith("image/")) {
+            pending.preview = URL.createObjectURL(file);
+          }
+          validFiles.push(pending);
+        } else {
+          errors.push(validation.error || "Invalid file");
+        }
+      });
+      if (validFiles.length > 0) {
+        setPendingFiles((prev) => [...prev, ...validFiles]);
+      }
+      if (errors.length > 0) {
+        setFileError(errors.join(", "));
+        setTimeout(() => setFileError(null), 5e3);
+      }
+      setShowMenu(false);
+      e.target.value = "";
+    }
+  };
+  const removeFile = (index) => {
+    setPendingFiles((prev) => {
+      const file = prev[index];
+      if (file.preview) {
+        URL.revokeObjectURL(file.preview);
+      }
+      return prev.filter((_, i) => i !== index);
+    });
+  };
+  const getFileIcon = (mimeType) => {
+    if (mimeType.startsWith("image/")) {
+      return /* @__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: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) });
+    }
+    if (mimeType === "application/pdf") {
+      return /* @__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: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) });
+    }
+    return /* @__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: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) });
+  };
+  const getDisplayContent = () => {
+    if (state === "loading") {
+      if (toolName) {
+        return { text: toolName, isToolCall: true };
+      }
+      if (streamedContent) {
+        return { text: streamedContent, isToolCall: false };
+      }
+      return { text: "Processing...", isToolCall: false };
+    }
+    if (state === "success" && response) {
+      return { text: response, isToolCall: false };
+    }
+    if (state === "error" && error) {
+      return { text: error, isToolCall: false };
+    }
+    if (state === "plan-pending" && plan) {
+      return { text: plan, isToolCall: false };
+    }
+    return { text: "", isToolCall: false };
+  };
+  const isShowingResult = state !== "idle";
+  const { text: displayContent, isToolCall } = getDisplayContent();
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "w-full relative", children: [
+    fileError && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "absolute -top-12 left-0 right-0 mx-3 p-2 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg z-30", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2 !text-red-700 dark:!text-red-300 text-xs", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-3 h-3 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: fileError })
+    ] }) }),
+    showMenu && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "fixed inset-0 z-[9998]", onClick: () => setShowMenu(false) }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        "div",
+        {
+          className: "fixed bg-gray-800 dark:bg-gray-700 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
+          style: {
+            bottom: "auto",
+            left: _nullishCoalesce(_optionalChain([menuButtonRef, 'access', _26 => _26.current, 'optionalAccess', _27 => _27.getBoundingClientRect, 'call', _28 => _28(), 'access', _29 => _29.left]), () => ( 0)),
+            top: (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _30 => _30.current, 'optionalAccess', _31 => _31.getBoundingClientRect, 'call', _32 => _32(), 'access', _33 => _33.top]), () => ( 0))) - 8,
+            transform: "translateY(-100%)"
+          },
+          children: [
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+              "button",
+              {
+                onClick: () => {
+                  _optionalChain([fileInputRef, 'access', _34 => _34.current, 'optionalAccess', _35 => _35.click, 'call', _36 => _36()]);
+                  setShowMenu(false);
+                },
+                className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left",
+                children: [
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10.5 3.5L5.5 8.5C4.67157 9.32843 4.67157 10.6716 5.5 11.5C6.32843 12.3284 7.67157 12.3284 8.5 11.5L14.5 5.5C15.8807 4.11929 15.8807 1.88071 14.5 0.5C13.1193 -0.880711 10.8807 -0.880711 9.5 0.5L3.5 6.5C1.56846 8.43154 1.56846 11.5685 3.5 13.5C5.43154 15.4315 8.56846 15.4315 10.5 13.5L15.5 8.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(2, 3)" }) }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "!text-sm font-medium", children: "Add photos & files" })
+                ]
+              }
+            ),
+            onExpand && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+              "button",
+              {
+                onClick: () => {
+                  onExpand();
+                  setShowMenu(false);
+                },
+                className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left border-t border-gray-700 dark:border-gray-600",
+                children: [
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-4.5 h-4.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" }) }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "!text-sm font-medium", children: "Expand to chat" })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    pendingFiles.length > 0 && state === "idle" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mb-2 flex flex-wrap gap-2", children: pendingFiles.map((pf, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        className: "relative group flex items-center gap-2 px-2 py-1.5 bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg",
+        children: [
+          pf.preview ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: pf.preview, alt: pf.file.name, className: "w-6 h-6 object-cover rounded" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-6 h-6 flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded !text-gray-500 dark:!text-gray-400", children: getFileIcon(pf.file.type) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-xs font-medium !text-gray-700 dark:!text-gray-300 truncate max-w-[100px]", children: pf.file.name }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "button",
+            {
+              onClick: () => removeFile(index),
+              className: "w-4 h-4 bg-gray-500 hover:bg-red-500 text-white rounded-full flex items-center justify-center",
+              title: "Remove file",
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-2.5 h-2.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+            }
+          )
+        ]
+      },
+      index
+    )) }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-2 px-3 py-2 border-2 rounded-2xl bg-white dark:bg-gray-900 transition-all duration-200",
+          state === "idle" && "border-gray-200 dark:border-gray-700",
+          state === "loading" && "border-blue-400 dark:border-blue-500",
+          state === "plan-pending" && "border-amber-400 dark:border-amber-500",
+          state === "success" && "border-green-400 dark:border-green-500",
+          state === "error" && "border-red-400 dark:border-red-500"
+        ),
+        children: [
+          state === "idle" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "button",
+            {
+              ref: menuButtonRef,
+              onClick: () => setShowMenu(!showMenu),
+              className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-gray-500 dark:!text-gray-400 hover:!text-gray-700 dark:hover:!text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800",
+              title: "More options",
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10 5v10M5 10h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+            }
+          ),
+          state === "loading" && !toolName && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-4 h-4 border-2 border-blue-200 border-t-blue-500 rounded-full animate-spin flex-shrink-0" }),
+          state === "loading" && toolName && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-2 h-2 rounded-full bg-blue-500 animate-pulse flex-shrink-0" }),
+          state === "idle" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "textarea",
+            {
+              ref: inputRef,
+              value: input,
+              onChange: (e) => handleInputChange(e.target.value),
+              onKeyDown: handleKeyDown,
+              placeholder,
+              disabled,
+              rows: 1,
+              className: cn(
+                "flex-1 resize-none bg-transparent border-none focus:outline-none",
+                "!text-gray-900 dark:!text-gray-100 placeholder-gray-400 dark:placeholder-gray-500",
+                "text-sm leading-relaxed py-1",
+                "disabled:opacity-50"
+              ),
+              style: { minHeight: "24px", maxHeight: "120px" }
+            }
+          ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "div",
+            {
+              className: cn(
+                "flex-1 text-sm py-1 truncate flex items-center gap-2",
+                state === "loading" && !isToolCall && "!text-gray-600 dark:!text-gray-400",
+                state === "loading" && isToolCall && "!text-blue-600 dark:!text-blue-400",
+                state === "success" && "!text-gray-900 dark:!text-gray-100",
+                state === "error" && "!text-red-600 dark:!text-red-400",
+                state === "plan-pending" && "!text-amber-700 dark:!text-amber-300"
+              ),
+              children: isToolCall ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-mono", children: displayContent }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-gray-400 dark:text-gray-500", children: "Running..." })
+              ] }) : displayContent
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1 flex-shrink-0", children: [
+            state === "plan-pending" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "button",
+                {
+                  onClick: onApprove,
+                  className: "px-2 py-1 bg-amber-500 text-white rounded-lg hover:bg-amber-600 transition-colors text-xs font-medium",
+                  children: "Approve"
+                }
+              ),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "button",
+                {
+                  onClick: onReject,
+                  className: "px-2 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors text-xs font-medium",
+                  children: "Modify"
+                }
+              )
+            ] }),
+            (state === "success" || state === "error") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                onClick: handleNewCommand,
+                className: "w-8 h-8 rounded-lg flex items-center justify-center !text-gray-400 hover:!text-gray-600 dark:hover:!text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",
+                title: "New command",
+                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" }) })
+              }
+            ),
+            state === "idle" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                onClick: handleSubmit,
+                disabled: !input.trim() && pendingFiles.length === 0 || disabled,
+                className: cn(
+                  "w-8 h-8 rounded-lg flex items-center justify-center transition-all",
+                  "border border-gray-200 dark:border-gray-700",
+                  "disabled:opacity-30 disabled:cursor-not-allowed",
+                  input.trim() || pendingFiles.length > 0 ? "bg-gray-900 dark:bg-white !text-white dark:!text-gray-900 border-gray-900 dark:border-white" : "bg-white dark:bg-gray-800 !text-gray-400"
+                ),
+                title: "Execute command",
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 12h14M12 5l7 7-7 7" }) })
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    state === "success" && _optionalChain([response, 'optionalAccess', _37 => _37.includes, 'call', _38 => _38("weather")]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mt-3 p-3 bg-gradient-to-r from-blue-50 to-cyan-50 dark:from-blue-900/20 dark:to-cyan-900/20 border border-blue-200 dark:border-blue-800 rounded-xl", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-3xl", children: "\u2600\uFE0F" }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-sm font-medium text-gray-900 dark:text-white", children: "Paris, France" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Sunny, 22\xB0C" })
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { className: "px-3 py-1 text-xs bg-blue-500 text-white rounded-lg hover:bg-blue-600", children: "Details" })
+    ] }) }),
+    state === "success" && _optionalChain([response, 'optionalAccess', _39 => _39.includes, 'call', _40 => _40("trip")]) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mt-3 p-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: "https://images.unsplash.com/photo-1502602898657-3e91760cbb34?w=400&h=150&fit=crop", alt: "Paris", className: "w-full h-24 object-cover rounded-lg mb-2" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-sm font-medium text-gray-900 dark:text-white", children: "Paris Weekend Getaway" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-xs text-gray-500 dark:text-gray-400 mb-2", children: "3 days \xB7 $850" }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { className: "flex-1 px-2 py-1 text-xs bg-blue-500 text-white rounded-lg hover:bg-blue-600", children: "Book" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { className: "flex-1 px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600", children: "Details" })
+      ] })
+    ] }),
+    state === "success" && _optionalChain([response, 'optionalAccess', _41 => _41.includes, 'call', _42 => _42("task")]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mt-3 border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden", children: ["Review PR #123", "Update documentation", "Fix login bug"].map((task, i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: `flex items-center gap-2 px-3 py-2 ${i > 0 ? "border-t border-gray-100 dark:border-gray-800" : ""}`, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: `w-2 h-2 rounded-full ${i === 0 ? "bg-green-500" : i === 1 ? "bg-yellow-500" : "bg-red-500"}` }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "flex-1 text-sm text-gray-700 dark:text-gray-300", children: task }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { className: "text-xs text-blue-500 hover:text-blue-600", children: "View" })
+    ] }, i)) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        multiple: true,
+        onChange: handleFileSelect,
+        className: "hidden",
+        accept: "image/*,application/pdf,.doc,.docx,.txt"
+      }
+    )
+  ] });
+}
+
 // src/lib/apteva-client.ts
-var DEFAULT_API_URL = "http://localhost:3000/agents";
+var DEFAULT_API_URL = "http://91.99.200.48:3000/agents";
 var DEFAULT_API_KEY = "agt_894abd5966bc9f1e9f8f17f2a6f6b5e0";
 var AptevaClient = class {
   constructor() {
@@ -920,7 +1662,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', _14 => _14.body, 'optionalAccess', _15 => _15.getReader, 'call', _16 => _16()]);
+      const reader = _optionalChain([response, 'access', _43 => _43.body, 'optionalAccess', _44 => _44.getReader, 'call', _45 => _45()]);
       if (!reader) {
         throw new Error("Response body is not readable");
       }
@@ -938,7 +1680,7 @@ var AptevaClient = class {
           if (line.startsWith("data: ")) {
             const data = line.slice(6);
             if (data === "[DONE]") {
-              _optionalChain([onComplete, 'optionalCall', _17 => _17(threadId)]);
+              _optionalChain([onComplete, 'optionalCall', _46 => _46(threadId)]);
               return;
             }
             try {
@@ -953,10 +1695,10 @@ var AptevaClient = class {
           }
         }
       }
-      _optionalChain([onComplete, 'optionalCall', _18 => _18(threadId)]);
+      _optionalChain([onComplete, 'optionalCall', _47 => _47(threadId)]);
     } catch (error) {
       const err = error instanceof Error ? error : new Error("Unknown error");
-      _optionalChain([onError, 'optionalCall', _19 => _19(err)]);
+      _optionalChain([onError, 'optionalCall', _48 => _48(err)]);
       throw err;
     }
   }
@@ -1009,11 +1751,32 @@ function Chat({
   apiUrl,
   apiKey,
   useMock = false,
+  // Mode switching
+  initialMode = "chat",
+  showModeToggle = false,
+  onModeChange,
+  // Command mode options
+  commandVariant = "default",
+  planMode = false,
+  onPlanModeChange,
+  enableStreaming = true,
+  showProgress = true,
+  loadingText = "Processing...",
+  // Welcome screen
+  welcomeTitle,
+  welcomeSubtitle,
+  welcomeIcon,
+  suggestedPrompts,
+  welcomeVariant,
+  // Events
   onThreadChange,
   onMessageSent,
   onAction,
   onFileUpload,
-  placeholder = "Type a message...",
+  onComplete,
+  onError,
+  // UI
+  placeholder,
   showHeader = true,
   headerTitle = "Chat",
   className
@@ -1021,6 +1784,19 @@ function Chat({
   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);
+  const [mode, setMode] = _react.useState.call(void 0, initialMode);
+  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);
+  const [progress, setProgress] = _react.useState.call(void 0, 0);
+  const [commandInput, setCommandInput] = _react.useState.call(void 0, "");
+  const [streamedContent, setStreamedContent] = _react.useState.call(void 0, "");
+  const [currentToolName, setCurrentToolName] = _react.useState.call(void 0, null);
+  const [plan, setPlan] = _react.useState.call(void 0, "");
+  const [pendingCommand, setPendingCommand] = _react.useState.call(void 0, "");
+  const [internalPlanMode, setInternalPlanMode] = _react.useState.call(void 0, planMode);
+  const [showSettingsMenu, setShowSettingsMenu] = _react.useState.call(void 0, false);
+  const fileInputRef = _react.useRef.call(void 0, null);
   _react.useEffect.call(void 0, () => {
     if (apiUrl || apiKey) {
       aptevaClient.configure({
@@ -1031,21 +1807,48 @@ function Chat({
   }, [apiUrl, apiKey]);
   _react.useEffect.call(void 0, () => {
     if (threadId) {
-      console.log("Loading thread:", threadId);
-      _optionalChain([onThreadChange, 'optionalCall', _20 => _20(threadId)]);
+      _optionalChain([onThreadChange, 'optionalCall', _49 => _49(threadId)]);
     }
   }, [threadId, onThreadChange]);
-  const handleSendMessage = async (text) => {
+  _react.useEffect.call(void 0, () => {
+    setInternalPlanMode(planMode);
+  }, [planMode]);
+  _react.useEffect.call(void 0, () => {
+    const handleClickOutside = (event) => {
+      const target = event.target;
+      if (showSettingsMenu && !target.closest(".settings-menu-container")) {
+        setShowSettingsMenu(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [showSettingsMenu]);
+  const handleModeChange = (newMode) => {
+    setMode(newMode);
+    _optionalChain([onModeChange, 'optionalCall', _50 => _50(newMode)]);
+    if (newMode === "command") {
+      setCommandState("idle");
+      setCommandResult(null);
+      setCommandError(null);
+    }
+  };
+  const defaultPlaceholder = mode === "chat" ? "Type a message..." : "Enter your command...";
+  const handleSendMessage = async (text, files) => {
+    const hasFiles = files && files.length > 0;
+    const fileNames = hasFiles ? files.map((f) => f.name) : [];
+    const displayContent = hasFiles ? `${text}${text ? "\n" : ""}[Attached: ${fileNames.join(", ")}]` : text;
     const userMessage = {
       id: `msg-${Date.now()}`,
       role: "user",
-      content: text,
-      timestamp: /* @__PURE__ */ new Date()
+      content: displayContent,
+      timestamp: /* @__PURE__ */ new Date(),
+      metadata: hasFiles ? { attachments: fileNames } : void 0
     };
     setMessages((prev) => [...prev, userMessage]);
-    _optionalChain([onMessageSent, 'optionalCall', _21 => _21(userMessage)]);
+    _optionalChain([onMessageSent, 'optionalCall', _51 => _51(userMessage)]);
     setIsLoading(true);
     try {
+      const messagePayload = await buildMessageWithAttachments(text, files);
       if (useMock) {
         const response = await generateMockResponse(1e3);
         setMessages((prev) => [...prev, response]);
@@ -1074,10 +1877,7 @@ function Chat({
                   ...lastMessage,
                   content: currentTextBuffer,
                   widgets: accumulatedWidgets.length > 0 ? accumulatedWidgets : void 0,
-                  metadata: {
-                    ...lastMessage.metadata,
-                    content_segments: segments
-                  }
+                  metadata: { ...lastMessage.metadata, content_segments: segments }
                 }
               ];
             } else {
@@ -1089,9 +1889,7 @@ function Chat({
                   content: currentTextBuffer,
                   widgets: accumulatedWidgets.length > 0 ? accumulatedWidgets : void 0,
                   timestamp: /* @__PURE__ */ new Date(),
-                  metadata: {
-                    content_segments: segments
-                  }
+                  metadata: { content_segments: segments }
                 }
               ];
             }
@@ -1100,21 +1898,19 @@ function Chat({
         await aptevaClient.chatStream(
           {
             agent_id: agentId,
-            message: text,
+            message: messagePayload,
             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)]);
+                    _optionalChain([onThreadChange, 'optionalCall', _52 => _52(chunk.thread_id)]);
                   }
                 }
                 break;
@@ -1131,11 +1927,7 @@ function Chat({
                     contentSegments.push({ type: "text", content: currentTextBuffer });
                     currentTextBuffer = "";
                   }
-                  contentSegments.push({
-                    type: "tool",
-                    id: chunk.tool_id,
-                    name: chunk.tool_name
-                  });
+                  contentSegments.push({ type: "tool", id: chunk.tool_id, name: chunk.tool_name });
                   toolInputBuffer = "";
                   updateMessage();
                 }
@@ -1145,14 +1937,9 @@ function Chat({
                   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
-                  );
+                  const toolSegment = contentSegments.find((s) => s.type === "tool" && s.id === chunk.tool_id);
                   if (toolSegment) {
                     toolSegment.result = chunk.content;
                   }
@@ -1165,14 +1952,8 @@ function Chat({
                   updateMessage();
                 }
                 break;
-              case "stop":
-                break;
-              case "complete":
-                break;
               case "error":
                 throw new Error(chunk.message || "Stream error");
-              default:
-                break;
             }
           },
           (threadId2) => {
@@ -1194,10 +1975,7 @@ function Chat({
                     id: `msg-${Date.now()}`,
                     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 }
                   }
                 ];
               }
@@ -1205,7 +1983,7 @@ function Chat({
             });
             if (threadId2 && threadId2 !== currentThreadId) {
               setCurrentThreadId(threadId2);
-              _optionalChain([onThreadChange, 'optionalCall', _23 => _23(threadId2)]);
+              _optionalChain([onThreadChange, 'optionalCall', _53 => _53(threadId2)]);
             }
             setIsLoading(false);
           },
@@ -1225,11 +2003,11 @@ function Chat({
               return [...prev, errorMessage];
             });
             setIsLoading(false);
+            _optionalChain([onError, 'optionalCall', _54 => _54(error)]);
           }
         );
       }
     } catch (error) {
-      console.error("Chat error:", error);
       const errorMessage = {
         id: `msg-${Date.now()}-error`,
         role: "assistant",
@@ -1238,18 +2016,277 @@ function Chat({
         metadata: { error: true }
       };
       setMessages((prev) => [...prev, errorMessage]);
+      _optionalChain([onError, 'optionalCall', _55 => _55(error instanceof Error ? error : new Error("Unknown 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.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 })
+  const executeCommand = async (commandOverride, files) => {
+    const currentCommand = commandOverride || commandInput;
+    if (!currentCommand.trim() && (!files || files.length === 0)) {
+      setCommandError(new Error("Please enter a command"));
+      setCommandState("error");
+      return;
+    }
+    if (internalPlanMode && commandState !== "plan-pending") {
+      setCommandState("loading");
+      setCommandError(null);
+      setCommandInput("");
+      if (useMock) {
+        setTimeout(() => {
+          const mockPlan = `1. Analyze the request: "${currentCommand}"
+2. Process the data
+3. Generate response
+4. Return results`;
+          setPlan(mockPlan);
+          setPendingCommand(currentCommand);
+          setCommandState("plan-pending");
+        }, 800);
+      } else {
+        try {
+          const planningInstruction = `CRITICAL PLANNING MODE: You are ONLY creating a plan. Write a numbered list of steps describing what WOULD be done. DO NOT execute anything.`;
+          const systemMessage = context ? `${context}
+
+${planningInstruction}` : planningInstruction;
+          const response = await aptevaClient.chat({
+            agent_id: agentId,
+            message: currentCommand,
+            stream: false,
+            system: systemMessage
+          });
+          setPlan(response.message);
+          setPendingCommand(currentCommand);
+          setCommandState("plan-pending");
+        } catch (err) {
+          const error = err instanceof Error ? err : new Error("Failed to generate plan");
+          setCommandError(error);
+          setCommandState("error");
+          _optionalChain([onError, 'optionalCall', _56 => _56(error)]);
+        }
+      }
+      return;
+    }
+    setCommandState("loading");
+    setCommandError(null);
+    setProgress(0);
+    setStreamedContent("");
+    setCommandInput("");
+    try {
+      if (useMock) {
+        if (enableStreaming) {
+          let accumulatedContent = "";
+          generateMockCommandStream(
+            currentCommand,
+            (chunk) => {
+              if (chunk.type === "token" && chunk.content) {
+                accumulatedContent += chunk.content;
+                setStreamedContent(accumulatedContent);
+                const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);
+                setProgress(estimatedProgress);
+              }
+            },
+            (threadId2) => {
+              const result = {
+                success: true,
+                data: { summary: accumulatedContent, thread_id: threadId2 },
+                message: accumulatedContent || "Command executed successfully"
+              };
+              setCommandResult(result);
+              setCommandState("success");
+              setProgress(100);
+              _optionalChain([onComplete, 'optionalCall', _57 => _57(result)]);
+            },
+            (error) => {
+              setCommandError(error);
+              setCommandState("error");
+              _optionalChain([onError, 'optionalCall', _58 => _58(error)]);
+            }
+          );
+        } else {
+          await new Promise((resolve) => setTimeout(resolve, 1500));
+          const result = {
+            success: true,
+            data: { summary: `Executed: ${currentCommand}` },
+            message: `Command executed successfully`
+          };
+          setCommandResult(result);
+          setCommandState("success");
+          setProgress(100);
+          _optionalChain([onComplete, 'optionalCall', _59 => _59(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.`;
+        const systemMessage = context ? `${context}
+
+${commandInstruction}` : commandInstruction;
+        const messagePayload = files && files.length > 0 ? await buildMessageWithAttachments(currentCommand, files) : currentCommand;
+        if (enableStreaming) {
+          let accumulatedContent = "";
+          await aptevaClient.chatStream(
+            {
+              agent_id: agentId,
+              message: messagePayload,
+              stream: true,
+              ...currentThreadId && { thread_id: currentThreadId },
+              system: systemMessage
+            },
+            (chunk) => {
+              if ((chunk.type === "token" || chunk.type === "content") && chunk.content) {
+                accumulatedContent += chunk.content;
+                setStreamedContent(accumulatedContent);
+                setCurrentToolName(null);
+                const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);
+                setProgress(estimatedProgress);
+              } else if (chunk.type === "tool_call" && chunk.tool_name) {
+                setCurrentToolName(chunk.tool_name);
+                accumulatedContent = "";
+                setStreamedContent("");
+              } else if (chunk.type === "tool_result") {
+                setCurrentToolName(null);
+              } else if (chunk.type === "thread_id" && chunk.thread_id) {
+                if (!currentThreadId) {
+                  setCurrentThreadId(chunk.thread_id);
+                  _optionalChain([onThreadChange, 'optionalCall', _60 => _60(chunk.thread_id)]);
+                }
+              }
+            },
+            (threadId2) => {
+              const result = {
+                success: true,
+                data: { summary: accumulatedContent, thread_id: threadId2 },
+                message: accumulatedContent || "Command executed successfully"
+              };
+              setCommandResult(result);
+              setCommandState("success");
+              setProgress(100);
+              _optionalChain([onComplete, 'optionalCall', _61 => _61(result)]);
+            },
+            (error) => {
+              setCommandError(error);
+              setCommandState("error");
+              _optionalChain([onError, 'optionalCall', _62 => _62(error)]);
+            }
+          );
+        } else {
+          const response = await aptevaClient.chat({
+            agent_id: agentId,
+            message: messagePayload,
+            stream: false,
+            ...currentThreadId && { thread_id: currentThreadId },
+            system: systemMessage
+          });
+          const result = {
+            success: true,
+            data: { summary: response.message, thread_id: response.thread_id },
+            widgets: response.widgets,
+            message: response.message
+          };
+          setCommandResult(result);
+          setCommandState("success");
+          setProgress(100);
+          _optionalChain([onComplete, 'optionalCall', _63 => _63(result)]);
+        }
+      }
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error("Unknown error");
+      setCommandError(error);
+      setCommandState("error");
+      _optionalChain([onError, 'optionalCall', _64 => _64(error)]);
+    }
+  };
+  const resetCommand = () => {
+    setCommandState("idle");
+    setCommandResult(null);
+    setCommandError(null);
+    setProgress(0);
+    setCommandInput("");
+    setPlan("");
+    setPendingCommand("");
+    setStreamedContent("");
+    setCurrentToolName(null);
+  };
+  const approvePlan = () => {
+    const planToExecute = plan;
+    setPlan("");
+    setPendingCommand("");
+    const executionMessage = `Execute this plan now:
+
+${planToExecute}`;
+    executeCommand(executionMessage);
+  };
+  const rejectPlan = () => {
+    setCommandInput(pendingCommand);
+    setPlan("");
+    setPendingCommand("");
+    setCommandState("idle");
+  };
+  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 }) }),
+    mode === "chat" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        MessageList,
+        {
+          messages,
+          onAction,
+          welcomeTitle,
+          welcomeSubtitle,
+          welcomeIcon,
+          suggestedPrompts,
+          welcomeVariant,
+          onPromptClick: (prompt) => handleSendMessage(prompt)
+        }
+      ),
+      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: placeholder || defaultPlaceholder,
+          disabled: isLoading,
+          onFileUpload,
+          onSwitchMode: showModeToggle ? () => handleModeChange("command") : void 0
+        }
+      )
+    ] }),
+    mode === "command" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 flex flex-col items-center justify-center p-4", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      CommandComposer,
+      {
+        onExecute: (text, files) => {
+          setCommandInput(text);
+          executeCommand(text, files);
+        },
+        state: commandState,
+        response: _optionalChain([commandResult, 'optionalAccess', _65 => _65.data, 'optionalAccess', _66 => _66.summary]) || _optionalChain([commandResult, 'optionalAccess', _67 => _67.message]),
+        error: _optionalChain([commandError, 'optionalAccess', _68 => _68.message]),
+        plan,
+        streamedContent,
+        toolName: currentToolName,
+        onApprove: approvePlan,
+        onReject: rejectPlan,
+        onReset: resetCommand,
+        onExpand: showModeToggle ? () => handleModeChange("chat") : void 0,
+        placeholder: placeholder || "Enter your command..."
+      }
+    ) }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "style", { dangerouslySetInnerHTML: {
+      __html: `
+          @keyframes pulse-border {
+            0%, 100% { border-color: rgb(59, 130, 246); }
+            50% { border-color: rgb(147, 197, 253); }
+          }
+          .animate-pulse-border {
+            animation: pulse-border 2s ease-in-out infinite;
+          }
+        `
+    } })
   ] });
 }
 
+// src/components/Chat/CommandOutput.tsx
+
+
+
 // src/components/Command/Command.tsx
 
 
@@ -1385,13 +2422,13 @@ ${planningInstruction}` : planningInstruction;
             const error2 = err instanceof Error ? err : new Error("Failed to generate plan");
             setError(error2);
             setState("error");
-            _optionalChain([onError, 'optionalCall', _24 => _24(error2)]);
+            _optionalChain([onError, 'optionalCall', _69 => _69(error2)]);
           });
         } catch (err) {
           const error2 = err instanceof Error ? err : new Error("Failed to generate plan");
           setError(error2);
           setState("error");
-          _optionalChain([onError, 'optionalCall', _25 => _25(error2)]);
+          _optionalChain([onError, 'optionalCall', _70 => _70(error2)]);
         }
       }
       return;
@@ -1402,7 +2439,7 @@ ${planningInstruction}` : planningInstruction;
     setStreamedContent("");
     setCommand("");
     setUploadedFiles([]);
-    _optionalChain([onStart, 'optionalCall', _26 => _26()]);
+    _optionalChain([onStart, 'optionalCall', _71 => _71()]);
     try {
       if (useMock) {
         if (enableStreaming) {
@@ -1413,16 +2450,16 @@ ${planningInstruction}` : planningInstruction;
               if (chunk.type === "token" && chunk.content) {
                 accumulatedContent += chunk.content;
                 setStreamedContent(accumulatedContent);
-                _optionalChain([onChunk, 'optionalCall', _27 => _27(chunk.content)]);
+                _optionalChain([onChunk, 'optionalCall', _72 => _72(chunk.content)]);
                 const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);
                 setProgress(estimatedProgress);
-                _optionalChain([onProgress, 'optionalCall', _28 => _28(estimatedProgress)]);
+                _optionalChain([onProgress, 'optionalCall', _73 => _73(estimatedProgress)]);
               } else if (chunk.type === "widget" && chunk.widget) {
                 const widget = chunk.widget;
                 setResult((prev) => ({
                   success: true,
-                  data: _optionalChain([prev, 'optionalAccess', _29 => _29.data]) || {},
-                  widgets: [..._optionalChain([prev, 'optionalAccess', _30 => _30.widgets]) || [], widget],
+                  data: _optionalChain([prev, 'optionalAccess', _74 => _74.data]) || {},
+                  widgets: [..._optionalChain([prev, 'optionalAccess', _75 => _75.widgets]) || [], widget],
                   message: accumulatedContent || "Command executed successfully"
                 }));
               }
@@ -1442,19 +2479,19 @@ ${planningInstruction}` : planningInstruction;
               setResult(result2);
               setState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _31 => _31(result2)]);
+              _optionalChain([onComplete, 'optionalCall', _76 => _76(result2)]);
             },
             (error2) => {
               setError(error2);
               setState("error");
-              _optionalChain([onError, 'optionalCall', _32 => _32(error2)]);
+              _optionalChain([onError, 'optionalCall', _77 => _77(error2)]);
             }
           );
         } else {
           const progressInterval = setInterval(() => {
             setProgress((prev) => {
               const next = Math.min(prev + 10, 90);
-              _optionalChain([onProgress, 'optionalCall', _33 => _33(next)]);
+              _optionalChain([onProgress, 'optionalCall', _78 => _78(next)]);
               return next;
             });
           }, 200);
@@ -1478,7 +2515,7 @@ ${planningInstruction}` : planningInstruction;
           setResult(result2);
           setState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _34 => _34(result2)]);
+          _optionalChain([onComplete, 'optionalCall', _79 => _79(result2)]);
         }
       } else {
         if (enableStreaming) {
@@ -1524,16 +2561,16 @@ ${commandInstruction}` : commandInstruction;
               if (chunk.type === "token" && chunk.content) {
                 accumulatedContent += chunk.content;
                 setStreamedContent(accumulatedContent);
-                _optionalChain([onChunk, 'optionalCall', _35 => _35(chunk.content)]);
+                _optionalChain([onChunk, 'optionalCall', _80 => _80(chunk.content)]);
                 const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);
                 setProgress(estimatedProgress);
-                _optionalChain([onProgress, 'optionalCall', _36 => _36(estimatedProgress)]);
+                _optionalChain([onProgress, 'optionalCall', _81 => _81(estimatedProgress)]);
               } else if (chunk.type === "widget" && chunk.widget) {
                 const widget = chunk.widget;
                 setResult((prev) => ({
                   success: true,
-                  data: _optionalChain([prev, 'optionalAccess', _37 => _37.data]) || {},
-                  widgets: [..._optionalChain([prev, 'optionalAccess', _38 => _38.widgets]) || [], widget],
+                  data: _optionalChain([prev, 'optionalAccess', _82 => _82.data]) || {},
+                  widgets: [..._optionalChain([prev, 'optionalAccess', _83 => _83.widgets]) || [], widget],
                   message: accumulatedContent || "Command executed successfully"
                 }));
               }
@@ -1553,20 +2590,20 @@ ${commandInstruction}` : commandInstruction;
               setResult(result2);
               setState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _39 => _39(result2)]);
+              _optionalChain([onComplete, 'optionalCall', _84 => _84(result2)]);
             },
             (error2) => {
               const err = error2 instanceof Error ? error2 : new Error("Unknown error");
               setError(err);
               setState("error");
-              _optionalChain([onError, 'optionalCall', _40 => _40(err)]);
+              _optionalChain([onError, 'optionalCall', _85 => _85(err)]);
             }
           );
         } else {
           const progressInterval = setInterval(() => {
             setProgress((prev) => {
               const next = Math.min(prev + 10, 90);
-              _optionalChain([onProgress, 'optionalCall', _41 => _41(next)]);
+              _optionalChain([onProgress, 'optionalCall', _86 => _86(next)]);
               return next;
             });
           }, 200);
@@ -1622,14 +2659,14 @@ ${commandInstruction}` : commandInstruction;
           setResult(result2);
           setState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _42 => _42(result2)]);
+          _optionalChain([onComplete, 'optionalCall', _87 => _87(result2)]);
         }
       }
     } catch (err) {
       const error2 = err instanceof Error ? err : new Error("Unknown error");
       setError(error2);
       setState("error");
-      _optionalChain([onError, 'optionalCall', _43 => _43(error2)]);
+      _optionalChain([onError, 'optionalCall', _88 => _88(error2)]);
     }
   };
   const resetCommand = () => {
@@ -1662,14 +2699,14 @@ ${planToExecute}`;
   };
   const handleFileSelect = async (e) => {
     if (e.target.files && e.target.files.length > 0) {
-      _optionalChain([onFileUpload, 'optionalCall', _44 => _44(e.target.files)]);
+      _optionalChain([onFileUpload, 'optionalCall', _89 => _89(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', _45 => _45.target, 'optionalAccess', _46 => _46.result])) {
+            if (_optionalChain([event, 'access', _90 => _90.target, 'optionalAccess', _91 => _91.result])) {
               const fullDataUrl = event.target.result;
               const base64Data = fullDataUrl.split(",")[1];
               if (file.type.startsWith("image/")) {
@@ -1763,7 +2800,7 @@ ${planToExecute}`;
               enableFileUpload && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 "button",
                 {
-                  onClick: () => _optionalChain([fileInputRef, 'access', _47 => _47.current, 'optionalAccess', _48 => _48.click, 'call', _49 => _49()]),
+                  onClick: () => _optionalChain([fileInputRef, 'access', _92 => _92.current, 'optionalAccess', _93 => _93.click, 'call', _94 => _94()]),
                   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)" }) })
@@ -1982,7 +3019,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', _50 => _50.message]) })
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: _optionalChain([error, 'optionalAccess', _95 => _95.message]) })
               ] })
             ] }) }),
             allowInput && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -2010,7 +3047,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', _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 }),
+            _optionalChain([result, 'access', _96 => _96.data, 'optionalAccess', _97 => _97.summary]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-gray-700 dark:text-gray-300 text-sm leading-relaxed whitespace-pre-line", children: result.data.summary }),
             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,
               {
@@ -2061,7 +3098,7 @@ ${planToExecute}`;
             enableFileUpload && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "button",
               {
-                onClick: () => _optionalChain([fileInputRef, 'access', _53 => _53.current, 'optionalAccess', _54 => _54.click, 'call', _55 => _55()]),
+                onClick: () => _optionalChain([fileInputRef, 'access', _98 => _98.current, 'optionalAccess', _99 => _99.click, 'call', _100 => _100()]),
                 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)" }) })
@@ -2247,25 +3284,25 @@ function Prompt({
     const newValue = e.target.value;
     if (!maxLength || newValue.length <= maxLength) {
       setValue(newValue);
-      _optionalChain([onChange, 'optionalCall', _56 => _56(newValue)]);
+      _optionalChain([onChange, 'optionalCall', _101 => _101(newValue)]);
     }
   };
   const handleSubmit = async () => {
     if (value.length < minLength) return;
-    _optionalChain([onSubmit, 'optionalCall', _57 => _57(value)]);
+    _optionalChain([onSubmit, 'optionalCall', _102 => _102(value)]);
     setIsLoading(true);
     try {
       if (useMock) {
         await new Promise((resolve) => setTimeout(resolve, 1500));
         const mockResult = `Enhanced version: ${value} [AI-generated content]`;
-        _optionalChain([onResult, 'optionalCall', _58 => _58(mockResult)]);
+        _optionalChain([onResult, 'optionalCall', _103 => _103(mockResult)]);
         setValue("");
       } else {
         const response = await aptevaClient.chat({
           agent_id: agentId,
           message: value
         });
-        _optionalChain([onResult, 'optionalCall', _59 => _59(response.message)]);
+        _optionalChain([onResult, 'optionalCall', _104 => _104(response.message)]);
         setValue("");
       }
     } catch (error) {
@@ -2360,7 +3397,7 @@ function Stream({
   }, [autoStart]);
   const startStreaming = async () => {
     setIsStreaming(true);
-    _optionalChain([onStart, 'optionalCall', _60 => _60()]);
+    _optionalChain([onStart, 'optionalCall', _105 => _105()]);
     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.";
@@ -2368,13 +3405,13 @@ function Stream({
           mockText,
           (chunk) => {
             setText((prev) => prev + chunk);
-            _optionalChain([onChunk, 'optionalCall', _61 => _61(chunk)]);
+            _optionalChain([onChunk, 'optionalCall', _106 => _106(chunk)]);
           },
           typingSpeed
         );
         setIsComplete(true);
         setIsStreaming(false);
-        _optionalChain([onComplete, 'optionalCall', _62 => _62(text + mockText)]);
+        _optionalChain([onComplete, 'optionalCall', _107 => _107(text + mockText)]);
       } else {
         let accumulatedText = "";
         await aptevaClient.chatStream(
@@ -2387,24 +3424,24 @@ function Stream({
             if (chunk.type === "token" && chunk.content) {
               accumulatedText += chunk.content;
               setText(accumulatedText);
-              _optionalChain([onChunk, 'optionalCall', _63 => _63(chunk.content)]);
+              _optionalChain([onChunk, 'optionalCall', _108 => _108(chunk.content)]);
             }
           },
           () => {
             setIsComplete(true);
             setIsStreaming(false);
-            _optionalChain([onComplete, 'optionalCall', _64 => _64(accumulatedText)]);
+            _optionalChain([onComplete, 'optionalCall', _109 => _109(accumulatedText)]);
           },
           (error) => {
             const err = error instanceof Error ? error : new Error("Streaming error");
-            _optionalChain([onError, 'optionalCall', _65 => _65(err)]);
+            _optionalChain([onError, 'optionalCall', _110 => _110(err)]);
             setIsStreaming(false);
           }
         );
       }
     } catch (error) {
       const err = error instanceof Error ? error : new Error("Streaming error");
-      _optionalChain([onError, 'optionalCall', _66 => _66(err)]);
+      _optionalChain([onError, 'optionalCall', _111 => _111(err)]);
       setIsStreaming(false);
     }
   };
@@ -2496,7 +3533,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', _67 => _67.preview, 'optionalAccess', _68 => _68.toLowerCase, 'call', _69 => _69(), 'access', _70 => _70.includes, 'call', _71 => _71(searchQuery.toLowerCase())])
+    (thread) => thread.title.toLowerCase().includes(searchQuery.toLowerCase()) || _optionalChain([thread, 'access', _112 => _112.preview, 'optionalAccess', _113 => _113.toLowerCase, 'call', _114 => _114(), 'access', _115 => _115.includes, 'call', _116 => _116(searchQuery.toLowerCase())])
   );
   const groupedThreads = groupBy === "date" ? groupThreadsByDate(filteredThreads) : { All: filteredThreads };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col h-full", children: [
@@ -2518,14 +3555,14 @@ function ThreadList({
           {
             thread,
             isActive: thread.id === currentThreadId,
-            onSelect: () => _optionalChain([onThreadSelect, 'optionalCall', _72 => _72(thread.id)]),
-            onDelete: () => _optionalChain([onThreadDelete, 'optionalCall', _73 => _73(thread.id)])
+            onSelect: () => _optionalChain([onThreadSelect, 'optionalCall', _117 => _117(thread.id)]),
+            onDelete: () => _optionalChain([onThreadDelete, 'optionalCall', _118 => _118(thread.id)])
           },
           thread.id
         ))
       ] }, group)),
       filteredThreads.length === 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "p-8 text-center text-gray-500", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-4xl mb-2", children: "\u{1F4AC}" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-10 h-10 mx-auto mb-2 opacity-50", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" }) }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: "No conversations found" })
       ] })
     ] })
@@ -2581,7 +3618,7 @@ function Threads({
       threads.slice(0, 5).map((thread) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "button",
         {
-          onClick: () => _optionalChain([onThreadSelect, 'optionalCall', _74 => _74(thread.id)]),
+          onClick: () => _optionalChain([onThreadSelect, 'optionalCall', _119 => _119(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"