@apteva/apteva-kit 0.1.3 → 0.1.7

package/dist/index.js

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); 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 _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";
 
 // src/components/Chat/Chat.tsx
-var _react = require('react');
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
 
 // src/components/Chat/MessageList.tsx
 
@@ -190,14 +190,14 @@ function generateMockStreamingResponse(text, onChunk, typingSpeed = 30) {
 var _jsxruntime = require('react/jsx-runtime');
 function Card({ widget, onAction }) {
   const { title, description, image, footer } = widget.props;
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-widget-card", children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-900 overflow-hidden", children: [
     image && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: image, alt: title, className: "w-full h-48 object-cover" }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "p-4", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: title }),
-      description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-gray-600 dark:text-gray-400 mt-2", children: description })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "!text-lg font-semibold !text-gray-900 dark:!text-white", children: title }),
+      description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "!text-gray-600 dark:!text-gray-400 mt-2", children: description })
     ] }),
     (footer || widget.actions && widget.actions.length > 0) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "border-t border-gray-200 dark:border-gray-700 p-4 flex justify-between items-center", children: [
-      footer && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-sm text-gray-600 dark:text-gray-400", children: footer }),
+      footer && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "!text-sm !text-gray-600 dark:!text-gray-400", children: footer }),
       widget.actions && widget.actions.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex gap-2", children: widget.actions.map((action, idx) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "button",
         {
@@ -207,7 +207,7 @@ function Card({ widget, onAction }) {
             widgetId: widget.id,
             timestamp: /* @__PURE__ */ new Date()
           })]),
-          className: "apteva-widget-button",
+          className: "px-3 py-1.5 !text-sm rounded-lg font-medium transition-colors bg-blue-500 !text-white hover:bg-blue-600",
           children: action.label
         },
         idx
@@ -220,28 +220,35 @@ function Card({ widget, onAction }) {
 
 function List({ widget, onAction }) {
   const { items } = widget.props;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-widget-list", children: items.map((item) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center p-4 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors", children: [
-    item.image && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: item.image, alt: item.title, className: "w-16 h-16 rounded object-cover" }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1 ml-4", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h4", { className: "font-semibold text-gray-900 dark:text-white", children: item.title }),
-      item.subtitle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm text-gray-600 dark:text-gray-400", children: item.subtitle }),
-      item.description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-xs text-gray-500 dark:text-gray-500 mt-1", children: item.description })
-    ] }),
-    widget.actions && widget.actions.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex gap-2", children: widget.actions.map((action, idx) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      "button",
-      {
-        onClick: () => _optionalChain([onAction, 'optionalCall', _2 => _2({
-          type: action.type,
-          payload: item.metadata || item,
-          widgetId: widget.id,
-          timestamp: /* @__PURE__ */ new Date()
-        })]),
-        className: "px-3 py-1.5 text-sm rounded-lg font-medium transition-colors bg-apteva-500 text-white hover:bg-apteva-600",
-        children: action.label
-      },
-      idx
-    )) })
-  ] }, item.id)) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-900 overflow-hidden", children: items.map((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: `flex items-center p-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors ${index !== items.length - 1 ? "border-b border-gray-200 dark:border-gray-700" : ""}`,
+      children: [
+        item.image && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: item.image, alt: item.title, className: "w-16 h-16 rounded object-cover" }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: `flex-1 ${item.image ? "ml-4" : ""}`, children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h4", { className: "font-semibold !text-gray-900 dark:!text-white", children: item.title }),
+          item.subtitle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "!text-sm !text-gray-600 dark:!text-gray-400", children: item.subtitle }),
+          item.description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "!text-xs !text-gray-500 dark:!text-gray-500 mt-1", children: item.description })
+        ] }),
+        widget.actions && widget.actions.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex gap-2", children: widget.actions.map((action, idx) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "button",
+          {
+            onClick: () => _optionalChain([onAction, 'optionalCall', _2 => _2({
+              type: action.type,
+              payload: item.metadata || item,
+              widgetId: widget.id,
+              timestamp: /* @__PURE__ */ new Date()
+            })]),
+            className: "px-3 py-1.5 !text-sm rounded-lg font-medium transition-colors bg-blue-500 !text-white hover:bg-blue-600",
+            children: action.label
+          },
+          idx
+        )) })
+      ]
+    },
+    item.id
+  )) });
 }
 
 // src/components/Widgets/widget-library/Button.tsx
@@ -249,10 +256,10 @@ function List({ widget, onAction }) {
 function Button({ widget, onAction }) {
   const { label, variant = "primary", disabled = false } = widget.props;
   const variantClasses = {
-    primary: "bg-apteva-500 text-white hover:bg-apteva-600",
-    secondary: "bg-gray-500 text-white hover:bg-gray-600",
-    outline: "border-2 border-apteva-500 text-apteva-500 hover:bg-apteva-50",
-    ghost: "text-apteva-500 hover:bg-apteva-50"
+    primary: "bg-blue-500 !text-white hover:bg-blue-600",
+    secondary: "bg-gray-500 !text-white hover:bg-gray-600",
+    outline: "border-2 border-blue-500 !text-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900",
+    ghost: "!text-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900"
   };
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "button",
@@ -326,11 +333,20 @@ function Widgets({
 
 function Message({ message, onAction }) {
   const isUser = message.role === "user";
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn("apteva-message", isUser ? "apteva-message-user" : "apteva-message-assistant"), children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "whitespace-pre-wrap", children: message.content }),
-    message.widgets && message.widgets.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mt-4", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Widgets, { widgets: message.widgets, onAction, layout: "stack" }) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-xs opacity-70 mt-2", children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
-  ] });
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      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"
+      ),
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "whitespace-pre-wrap !text-sm leading-relaxed", children: message.content }),
+        message.widgets && message.widgets.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn(isUser ? "mt-3" : "mt-2"), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Widgets, { widgets: message.widgets, onAction, layout: "stack" }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("!text-xs opacity-70", isUser ? "mt-1.5 !text-gray-500 dark:!text-gray-400" : "mt-1 !text-gray-500 dark:!text-gray-400"), suppressHydrationWarning: true, children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
+      ]
+    }
+  );
 }
 
 // src/components/Chat/MessageList.tsx
@@ -342,7 +358,7 @@ function MessageList({ messages, onAction }) {
       listRef.current.scrollTop = listRef.current.scrollHeight;
     }
   }, [messages]);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: listRef, className: "apteva-message-list", children: messages.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center justify-center h-full text-gray-500", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "text-center space-y-2", children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: listRef, className: "flex-1 overflow-y-auto px-4 py-4 space-y-3", 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)) });
@@ -351,9 +367,11 @@ function MessageList({ messages, onAction }) {
 // src/components/Chat/Composer.tsx
 
 
-function Composer({ onSendMessage, placeholder = "Type a message...", disabled = false }) {
+function Composer({ onSendMessage, placeholder = "Type a message...", disabled = false, onFileUpload }) {
   const [text, setText] = _react.useState.call(void 0, "");
+  const [showMenu, setShowMenu] = _react.useState.call(void 0, false);
   const textareaRef = _react.useRef.call(void 0, null);
+  const fileInputRef = _react.useRef.call(void 0, null);
   const handleKeyDown = (e) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
@@ -374,8 +392,37 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
     e.target.style.height = "auto";
     e.target.style.height = `${e.target.scrollHeight}px`;
   };
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-composer", children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex gap-2", children: [
+  const handleFileSelect = (e) => {
+    if (e.target.files && e.target.files.length > 0) {
+      _optionalChain([onFileUpload, 'optionalCall', _7 => _7(e.target.files)]);
+      setShowMenu(false);
+    }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "px-4 py-3 bg-white dark:bg-gray-900 relative", children: [
+    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', _8 => _8.current, 'optionalAccess', _9 => _9.click, 'call', _10 => _10()]),
+          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: "relative border-2 border-gray-300 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-900 transition-all duration-300 flex items-center px-3 py-2 gap-3", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          onClick: () => setShowMenu(!showMenu),
+          className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-gray-700 dark:!text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800",
+          title: "More options",
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10 5v10M5 10h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+        }
+      ),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "textarea",
         {
@@ -385,9 +432,9 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
           onKeyDown: handleKeyDown,
           placeholder,
           disabled,
-          className: "apteva-composer-input",
+          className: "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 py-1 disabled:opacity-50 disabled:cursor-not-allowed",
           rows: 1,
-          style: { maxHeight: "200px" }
+          style: { maxHeight: "120px" }
         }
       ),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -395,12 +442,23 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
         {
           onClick: handleSend,
           disabled: !text.trim() || disabled,
-          className: "px-6 py-2 bg-apteva-500 text-white rounded-lg hover:bg-apteva-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium",
-          children: "Send"
+          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" }) })
         }
       )
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-xs text-gray-500 mt-2", children: "Press Enter to send, Shift+Enter for new line" })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        multiple: true,
+        onChange: handleFileSelect,
+        className: "hidden",
+        accept: "image/*,application/pdf,.doc,.docx,.txt"
+      }
+    )
   ] });
 }
 
@@ -413,6 +471,7 @@ function Chat({
   onThreadChange,
   onMessageSent,
   onAction,
+  onFileUpload,
   placeholder = "Type a message...",
   showHeader = true,
   headerTitle = "Chat",
@@ -423,7 +482,7 @@ function Chat({
   _react.useEffect.call(void 0, () => {
     if (threadId) {
       console.log("Loading thread:", threadId);
-      _optionalChain([onThreadChange, 'optionalCall', _7 => _7(threadId)]);
+      _optionalChain([onThreadChange, 'optionalCall', _11 => _11(threadId)]);
     }
   }, [threadId, onThreadChange]);
   const handleSendMessage = async (text) => {
@@ -434,7 +493,7 @@ function Chat({
       timestamp: /* @__PURE__ */ new Date()
     };
     setMessages((prev) => [...prev, userMessage]);
-    _optionalChain([onMessageSent, 'optionalCall', _8 => _8(userMessage)]);
+    _optionalChain([onMessageSent, 'optionalCall', _12 => _12(userMessage)]);
     setIsLoading(true);
     try {
       const response = await generateMockResponse(1e3);
@@ -445,17 +504,17 @@ function Chat({
       setIsLoading(false);
     }
   };
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn("apteva-chat-container", className), children: [
-    showHeader && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "border-b border-gray-200 dark:border-gray-700 px-4 py-3", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: headerTitle }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn("flex flex-col h-full bg-white dark:bg-gray-900", className), children: [
+    showHeader && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "px-4 py-3 bg-white dark:bg-gray-900", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "!text-lg font-semibold !text-gray-900 dark:!text-white", children: headerTitle }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "!text-xs !text-gray-500 dark:!text-gray-400", children: [
         "Agent: ",
         agentId
       ] })
     ] }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MessageList, { messages, onAction }),
-    isLoading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-4 py-2 text-sm text-gray-500 italic", children: "AI is thinking..." }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Composer, { onSendMessage: handleSendMessage, placeholder, disabled: isLoading })
+    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 })
   ] });
 }
 
@@ -476,6 +535,7 @@ function Command({
   onChunk,
   onComplete,
   onError,
+  onFileUpload,
   loadingText = "Processing...",
   showProgress = true,
   enableStreaming = false,
@@ -488,6 +548,7 @@ function Command({
   const [progress, setProgress] = _react.useState.call(void 0, 0);
   const [command, setCommand] = _react.useState.call(void 0, initialCommand || "");
   const [streamedContent, setStreamedContent] = _react.useState.call(void 0, "");
+  const fileInputRef = _react2.default.useRef(null);
   _react.useEffect.call(void 0, () => {
     if (autoExecute && state === "idle" && command) {
       executeCommand();
@@ -499,11 +560,13 @@ function Command({
       setState("error");
       return;
     }
+    const currentCommand = command;
     setState("loading");
     setError(null);
     setProgress(0);
     setStreamedContent("");
-    _optionalChain([onStart, 'optionalCall', _9 => _9()]);
+    setCommand("");
+    _optionalChain([onStart, 'optionalCall', _13 => _13()]);
     try {
       if (enableStreaming) {
         const mockStreamChunks = [
@@ -519,14 +582,14 @@ function Command({
           await new Promise((resolve) => setTimeout(resolve, 600 + Math.random() * 400));
           const chunk = mockStreamChunks[i];
           setStreamedContent(chunk);
-          _optionalChain([onChunk, 'optionalCall', _10 => _10(chunk)]);
+          _optionalChain([onChunk, 'optionalCall', _14 => _14(chunk)]);
           setProgress(Math.round((i + 1) / mockStreamChunks.length * 100));
-          _optionalChain([onProgress, 'optionalCall', _11 => _11(Math.round((i + 1) / mockStreamChunks.length * 100))]);
+          _optionalChain([onProgress, 'optionalCall', _15 => _15(Math.round((i + 1) / mockStreamChunks.length * 100))]);
         }
         const mockResult = {
           success: true,
           data: {
-            summary: `Successfully processed: "${command}"`,
+            summary: `Successfully processed: "${currentCommand}"`,
             agentId,
             context,
             timestamp: (/* @__PURE__ */ new Date()).toISOString()
@@ -536,12 +599,12 @@ function Command({
         setResult(mockResult);
         setState("success");
         setProgress(100);
-        _optionalChain([onComplete, 'optionalCall', _12 => _12(mockResult)]);
+        _optionalChain([onComplete, 'optionalCall', _16 => _16(mockResult)]);
       } else {
         const progressInterval = setInterval(() => {
           setProgress((prev) => {
             const next = Math.min(prev + 10, 90);
-            _optionalChain([onProgress, 'optionalCall', _13 => _13(next)]);
+            _optionalChain([onProgress, 'optionalCall', _17 => _17(next)]);
             return next;
           });
         }, 200);
@@ -550,7 +613,7 @@ function Command({
         const mockResult = {
           success: true,
           data: {
-            summary: `Command "${command}" executed successfully`,
+            summary: `Command "${currentCommand}" executed successfully`,
             agentId,
             context,
             timestamp: (/* @__PURE__ */ new Date()).toISOString()
@@ -560,13 +623,13 @@ function Command({
         setResult(mockResult);
         setState("success");
         setProgress(100);
-        _optionalChain([onComplete, 'optionalCall', _14 => _14(mockResult)]);
+        _optionalChain([onComplete, 'optionalCall', _18 => _18(mockResult)]);
       }
     } catch (err) {
       const error2 = err instanceof Error ? err : new Error("Unknown error");
       setError(error2);
       setState("error");
-      _optionalChain([onError, 'optionalCall', _15 => _15(error2)]);
+      _optionalChain([onError, 'optionalCall', _19 => _19(error2)]);
     }
   };
   const resetCommand = () => {
@@ -576,6 +639,11 @@ function Command({
     setProgress(0);
     setCommand("");
   };
+  const handleFileSelect = (e) => {
+    if (e.target.files && e.target.files.length > 0) {
+      _optionalChain([onFileUpload, 'optionalCall', _20 => _20(e.target.files)]);
+    }
+  };
   const isCompact = variant === "compact";
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "div",
@@ -609,6 +677,15 @@ function Command({
             }
           ),
           state === "idle" && allowInput && isCompact && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                onClick: () => _optionalChain([fileInputRef, 'access', _21 => _21.current, 'optionalAccess', _22 => _22.click, 'call', _23 => _23()]),
+                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)" }) })
+              }
+            ),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "input",
               {
@@ -641,7 +718,7 @@ function Command({
                   !command.trim() && "border-gray-200 dark:border-gray-700 !text-gray-400 dark:!text-gray-600"
                 ),
                 title: "Execute",
-                children: "\u2191"
+                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" }) })
               }
             )
           ] }),
@@ -679,7 +756,7 @@ function Command({
                   "!text-lg",
                   "opacity-30 cursor-not-allowed"
                 ),
-                children: "\u2191"
+                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" }) })
               }
             )
           ] }),
@@ -688,7 +765,7 @@ function Command({
               /* @__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', _16 => _16.message]) })
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: _optionalChain([error, 'optionalAccess', _24 => _24.message]) })
               ] })
             ] }) }),
             allowInput && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -716,59 +793,96 @@ function Command({
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-green-700 dark:text-green-300 text-sm", children: result.message || "Command executed successfully" })
               ] })
             ] }),
-            _optionalChain([result, 'access', _17 => _17.data, 'optionalAccess', _18 => _18.summary]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-gray-700 dark:text-gray-300 text-sm leading-relaxed", children: result.data.summary })
+            _optionalChain([result, 'access', _25 => _25.data, 'optionalAccess', _26 => _26.summary]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-gray-700 dark:text-gray-300 text-sm leading-relaxed", children: result.data.summary })
           ] }) }),
           state === "success" && result && isCompact && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1 flex items-center gap-2 py-1", children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-4 h-4 text-green-600 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: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-green-700 dark:text-green-300 text-sm truncate", children: resultRenderer ? resultRenderer(result.data) : result.message || "Command executed successfully" })
-            ] }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+              "div",
+              {
+                className: "flex-1 flex items-center gap-2 py-1 cursor-text",
+                onClick: () => {
+                  setState("idle");
+                  setResult(null);
+                },
+                children: [
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-4 h-4 text-green-600 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: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-green-700 dark:text-green-300 text-sm truncate", children: resultRenderer ? resultRenderer(result.data) : result.message || "Command executed successfully" })
+                ]
+              }
+            ),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "button",
               {
-                disabled: true,
+                onClick: () => {
+                  setState("idle");
+                  setResult(null);
+                },
                 className: cn(
                   "w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0",
-                  "border border-gray-200 dark:border-gray-700",
+                  "border border-gray-300 dark:border-gray-600",
                   "bg-white dark:bg-gray-800",
-                  "!text-gray-400 dark:!text-gray-600",
-                  "!text-lg",
-                  "opacity-30 cursor-not-allowed"
+                  "!text-gray-700 dark:!text-gray-300",
+                  "hover:bg-gray-50 dark:hover:bg-gray-700",
+                  "!text-lg"
                 ),
-                children: "\u2191"
+                title: "New command",
+                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" }) })
               }
             )
           ] })
         ] }),
-        !isCompact && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "p-3 flex items-center justify-end gap-2", children: [
-          (state === "success" || state === "error") && allowInput && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        !isCompact && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "p-3 flex items-center justify-between gap-2", children: [
+          state === "idle" && allowInput && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "button",
             {
-              onClick: resetCommand,
-              className: "px-3 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors",
-              children: "Reset"
+              onClick: () => _optionalChain([fileInputRef, 'access', _27 => _27.current, 'optionalAccess', _28 => _28.click, 'call', _29 => _29()]),
+              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)" }) })
             }
           ),
-          (state === "idle" || state === "error") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            "button",
-            {
-              onClick: executeCommand,
-              disabled: !command.trim(),
-              className: cn(
-                "w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all",
-                "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",
-                !command.trim() && "border-gray-200 dark:border-gray-700 !text-gray-400 dark:!text-gray-600"
-              ),
-              title: state === "error" ? "Retry" : "Execute",
-              children: state === "error" ? "\u21BB" : "\u2191"
-            }
-          )
+          !(state === "idle" && allowInput) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
+            (state === "success" || state === "error") && allowInput && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                onClick: resetCommand,
+                className: "px-3 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors",
+                children: "Reset"
+              }
+            ),
+            (state === "idle" || state === "error") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                onClick: executeCommand,
+                disabled: !command.trim(),
+                className: cn(
+                  "w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all",
+                  "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",
+                  !command.trim() && "border-gray-200 dark:border-gray-700 !text-gray-400 dark:!text-gray-600"
+                ),
+                title: state === "error" ? "Retry" : "Execute",
+                children: state === "error" ? /* @__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: "M13 8C13 10.7614 10.7614 13 8 13C5.23858 13 3 10.7614 3 8C3 5.23858 5.23858 3 8 3C9.65685 3 11.1257 3.82818 12 5.09091M12 3V5.09091M12 5.09091H9.81818", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) : /* @__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" }) })
+              }
+            )
+          ] })
         ] }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            multiple: true,
+            onChange: handleFileSelect,
+            className: "hidden",
+            accept: "image/*,application/pdf,.doc,.docx,.txt"
+          }
+        ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "style", { dangerouslySetInnerHTML: {
           __html: `
           @keyframes pulse-border {
@@ -814,17 +928,17 @@ function Prompt({
     const newValue = e.target.value;
     if (!maxLength || newValue.length <= maxLength) {
       setValue(newValue);
-      _optionalChain([onChange, 'optionalCall', _19 => _19(newValue)]);
+      _optionalChain([onChange, 'optionalCall', _30 => _30(newValue)]);
     }
   };
   const handleSubmit = async () => {
     if (value.length < minLength) return;
-    _optionalChain([onSubmit, 'optionalCall', _20 => _20(value)]);
+    _optionalChain([onSubmit, 'optionalCall', _31 => _31(value)]);
     setIsLoading(true);
     try {
       await new Promise((resolve) => setTimeout(resolve, 1500));
       const mockResult = `Enhanced version: ${value} [AI-generated content]`;
-      _optionalChain([onResult, 'optionalCall', _21 => _21(mockResult)]);
+      _optionalChain([onResult, 'optionalCall', _32 => _32(mockResult)]);
       setValue("");
     } catch (error) {
       console.error("Error processing prompt:", error);
@@ -917,23 +1031,23 @@ function Stream({
   }, [autoStart]);
   const startStreaming = async () => {
     setIsStreaming(true);
-    _optionalChain([onStart, 'optionalCall', _22 => _22()]);
+    _optionalChain([onStart, 'optionalCall', _33 => _33()]);
     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.";
     try {
       await generateMockStreamingResponse(
         mockText,
         (chunk) => {
           setText((prev) => prev + chunk);
-          _optionalChain([onChunk, 'optionalCall', _23 => _23(chunk)]);
+          _optionalChain([onChunk, 'optionalCall', _34 => _34(chunk)]);
         },
         typingSpeed
       );
       setIsComplete(true);
       setIsStreaming(false);
-      _optionalChain([onComplete, 'optionalCall', _24 => _24(text + mockText)]);
+      _optionalChain([onComplete, 'optionalCall', _35 => _35(text + mockText)]);
     } catch (error) {
       const err = error instanceof Error ? error : new Error("Streaming error");
-      _optionalChain([onError, 'optionalCall', _25 => _25(err)]);
+      _optionalChain([onError, 'optionalCall', _36 => _36(err)]);
       setIsStreaming(false);
     }
   };
@@ -1025,7 +1139,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', _26 => _26.preview, 'optionalAccess', _27 => _27.toLowerCase, 'call', _28 => _28(), 'access', _29 => _29.includes, 'call', _30 => _30(searchQuery.toLowerCase())])
+    (thread) => thread.title.toLowerCase().includes(searchQuery.toLowerCase()) || _optionalChain([thread, 'access', _37 => _37.preview, 'optionalAccess', _38 => _38.toLowerCase, 'call', _39 => _39(), 'access', _40 => _40.includes, 'call', _41 => _41(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: [
@@ -1047,8 +1161,8 @@ function ThreadList({
           {
             thread,
             isActive: thread.id === currentThreadId,
-            onSelect: () => _optionalChain([onThreadSelect, 'optionalCall', _31 => _31(thread.id)]),
-            onDelete: () => _optionalChain([onThreadDelete, 'optionalCall', _32 => _32(thread.id)])
+            onSelect: () => _optionalChain([onThreadSelect, 'optionalCall', _42 => _42(thread.id)]),
+            onDelete: () => _optionalChain([onThreadDelete, 'optionalCall', _43 => _43(thread.id)])
           },
           thread.id
         ))
@@ -1110,7 +1224,7 @@ function Threads({
       threads.slice(0, 5).map((thread) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "button",
         {
-          onClick: () => _optionalChain([onThreadSelect, 'optionalCall', _33 => _33(thread.id)]),
+          onClick: () => _optionalChain([onThreadSelect, 'optionalCall', _44 => _44(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"