@apteva/apteva-kit 0.1.3 → 0.1.7

package/dist/index.mjs

@@ -190,14 +190,14 @@ import { useEffect } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Card({ widget, onAction }) {
   const { title, description, image, footer } = widget.props;
-  return /* @__PURE__ */ jsxs("div", { className: "apteva-widget-card", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-900 overflow-hidden", children: [
     image && /* @__PURE__ */ jsx("img", { src: image, alt: title, className: "w-full h-48 object-cover" }),
     /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: title }),
-      description && /* @__PURE__ */ jsx("p", { className: "text-gray-600 dark:text-gray-400 mt-2", children: description })
+      /* @__PURE__ */ jsx("h3", { className: "!text-lg font-semibold !text-gray-900 dark:!text-white", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "!text-gray-600 dark:!text-gray-400 mt-2", children: description })
     ] }),
     (footer || widget.actions && widget.actions.length > 0) && /* @__PURE__ */ jsxs("div", { className: "border-t border-gray-200 dark:border-gray-700 p-4 flex justify-between items-center", children: [
-      footer && /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: footer }),
+      footer && /* @__PURE__ */ jsx("span", { className: "!text-sm !text-gray-600 dark:!text-gray-400", children: footer }),
       widget.actions && widget.actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: widget.actions.map((action, idx) => /* @__PURE__ */ jsx(
         "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 }) {
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function List({ widget, onAction }) {
   const { items } = widget.props;
-  return /* @__PURE__ */ jsx2("div", { className: "apteva-widget-list", children: items.map((item) => /* @__PURE__ */ jsxs2("div", { className: "flex items-center p-4 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors", children: [
-    item.image && /* @__PURE__ */ jsx2("img", { src: item.image, alt: item.title, className: "w-16 h-16 rounded object-cover" }),
-    /* @__PURE__ */ jsxs2("div", { className: "flex-1 ml-4", children: [
-      /* @__PURE__ */ jsx2("h4", { className: "font-semibold text-gray-900 dark:text-white", children: item.title }),
-      item.subtitle && /* @__PURE__ */ jsx2("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: item.subtitle }),
-      item.description && /* @__PURE__ */ jsx2("p", { className: "text-xs text-gray-500 dark:text-gray-500 mt-1", children: item.description })
-    ] }),
-    widget.actions && widget.actions.length > 0 && /* @__PURE__ */ jsx2("div", { className: "flex gap-2", children: widget.actions.map((action, idx) => /* @__PURE__ */ jsx2(
-      "button",
-      {
-        onClick: () => onAction?.({
-          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__ */ jsx2("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__ */ jsxs2(
+    "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__ */ jsx2("img", { src: item.image, alt: item.title, className: "w-16 h-16 rounded object-cover" }),
+        /* @__PURE__ */ jsxs2("div", { className: `flex-1 ${item.image ? "ml-4" : ""}`, children: [
+          /* @__PURE__ */ jsx2("h4", { className: "font-semibold !text-gray-900 dark:!text-white", children: item.title }),
+          item.subtitle && /* @__PURE__ */ jsx2("p", { className: "!text-sm !text-gray-600 dark:!text-gray-400", children: item.subtitle }),
+          item.description && /* @__PURE__ */ jsx2("p", { className: "!text-xs !text-gray-500 dark:!text-gray-500 mt-1", children: item.description })
+        ] }),
+        widget.actions && widget.actions.length > 0 && /* @__PURE__ */ jsx2("div", { className: "flex gap-2", children: widget.actions.map((action, idx) => /* @__PURE__ */ jsx2(
+          "button",
+          {
+            onClick: () => onAction?.({
+              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 @@ import { jsx as jsx3 } from "react/jsx-runtime";
 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__ */ jsx3(
     "button",
@@ -326,11 +333,20 @@ function Widgets({
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function Message({ message, onAction }) {
   const isUser = message.role === "user";
-  return /* @__PURE__ */ jsxs4("div", { className: cn("apteva-message", isUser ? "apteva-message-user" : "apteva-message-assistant"), children: [
-    /* @__PURE__ */ jsx6("div", { className: "whitespace-pre-wrap", children: message.content }),
-    message.widgets && message.widgets.length > 0 && /* @__PURE__ */ jsx6("div", { className: "mt-4", children: /* @__PURE__ */ jsx6(Widgets, { widgets: message.widgets, onAction, layout: "stack" }) }),
-    /* @__PURE__ */ jsx6("div", { className: "text-xs opacity-70 mt-2", children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
-  ] });
+  return /* @__PURE__ */ jsxs4(
+    "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__ */ jsx6("div", { className: "whitespace-pre-wrap !text-sm leading-relaxed", children: message.content }),
+        message.widgets && message.widgets.length > 0 && /* @__PURE__ */ jsx6("div", { className: cn(isUser ? "mt-3" : "mt-2"), children: /* @__PURE__ */ jsx6(Widgets, { widgets: message.widgets, onAction, layout: "stack" }) }),
+        /* @__PURE__ */ jsx6("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__ */ jsx7("div", { ref: listRef, className: "apteva-message-list", children: messages.length === 0 ? /* @__PURE__ */ jsx7("div", { className: "flex items-center justify-center h-full text-gray-500", children: /* @__PURE__ */ jsxs5("div", { className: "text-center space-y-2", children: [
+  return /* @__PURE__ */ jsx7("div", { ref: listRef, className: "flex-1 overflow-y-auto px-4 py-4 space-y-3", children: messages.length === 0 ? /* @__PURE__ */ jsx7("div", { className: "flex items-center justify-center h-full !text-gray-500 dark:!text-gray-400", children: /* @__PURE__ */ jsxs5("div", { className: "text-center space-y-2", children: [
     /* @__PURE__ */ jsx7("div", { className: "text-4xl", children: "\u{1F4AC}" }),
     /* @__PURE__ */ jsx7("p", { children: "No messages yet. Start a conversation!" })
   ] }) }) : messages.map((message) => /* @__PURE__ */ jsx7(Message, { message, onAction }, message.id)) });
@@ -350,10 +366,12 @@ function MessageList({ messages, onAction }) {
 
 // src/components/Chat/Composer.tsx
 import { useState, useRef as useRef2 } from "react";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-function Composer({ onSendMessage, placeholder = "Type a message...", disabled = false }) {
+import { Fragment, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function Composer({ onSendMessage, placeholder = "Type a message...", disabled = false, onFileUpload }) {
   const [text, setText] = useState("");
+  const [showMenu, setShowMenu] = useState(false);
   const textareaRef = useRef2(null);
+  const fileInputRef = useRef2(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__ */ jsxs6("div", { className: "apteva-composer", children: [
-    /* @__PURE__ */ jsxs6("div", { className: "flex gap-2", children: [
+  const handleFileSelect = (e) => {
+    if (e.target.files && e.target.files.length > 0) {
+      onFileUpload?.(e.target.files);
+      setShowMenu(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs6("div", { className: "px-4 py-3 bg-white dark:bg-gray-900 relative", children: [
+    showMenu && /* @__PURE__ */ jsxs6(Fragment, { children: [
+      /* @__PURE__ */ jsx8("div", { className: "fixed inset-0 z-10", onClick: () => setShowMenu(false) }),
+      /* @__PURE__ */ jsx8("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__ */ jsxs6(
+        "button",
+        {
+          onClick: () => fileInputRef.current?.click(),
+          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__ */ jsx8("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx8("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__ */ jsx8("span", { className: "!text-sm font-medium", children: "Add photos & files" })
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs6("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__ */ jsx8(
+        "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__ */ jsx8("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx8("path", { d: "M10 5v10M5 10h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+        }
+      ),
       /* @__PURE__ */ jsx8(
         "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__ */ jsx8(
@@ -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__ */ jsx8("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx8("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
         }
       )
     ] }),
-    /* @__PURE__ */ jsx8("div", { className: "text-xs text-gray-500 mt-2", children: "Press Enter to send, Shift+Enter for new line" })
+    /* @__PURE__ */ jsx8(
+      "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",
@@ -445,23 +504,23 @@ function Chat({
       setIsLoading(false);
     }
   };
-  return /* @__PURE__ */ jsxs7("div", { className: cn("apteva-chat-container", className), children: [
-    showHeader && /* @__PURE__ */ jsxs7("div", { className: "border-b border-gray-200 dark:border-gray-700 px-4 py-3", children: [
-      /* @__PURE__ */ jsx9("h2", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: headerTitle }),
-      /* @__PURE__ */ jsxs7("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
+  return /* @__PURE__ */ jsxs7("div", { className: cn("flex flex-col h-full bg-white dark:bg-gray-900", className), children: [
+    showHeader && /* @__PURE__ */ jsxs7("div", { className: "px-4 py-3 bg-white dark:bg-gray-900", children: [
+      /* @__PURE__ */ jsx9("h2", { className: "!text-lg font-semibold !text-gray-900 dark:!text-white", children: headerTitle }),
+      /* @__PURE__ */ jsxs7("p", { className: "!text-xs !text-gray-500 dark:!text-gray-400", children: [
         "Agent: ",
         agentId
       ] })
     ] }),
     /* @__PURE__ */ jsx9(MessageList, { messages, onAction }),
-    isLoading && /* @__PURE__ */ jsx9("div", { className: "px-4 py-2 text-sm text-gray-500 italic", children: "AI is thinking..." }),
-    /* @__PURE__ */ jsx9(Composer, { onSendMessage: handleSendMessage, placeholder, disabled: isLoading })
+    isLoading && /* @__PURE__ */ jsx9("div", { className: "px-4 py-2 !text-sm !text-gray-500 dark:!text-gray-400 italic", children: "AI is thinking..." }),
+    /* @__PURE__ */ jsx9(Composer, { onSendMessage: handleSendMessage, placeholder, disabled: isLoading, onFileUpload })
   ] });
 }
 
 // src/components/Command/Command.tsx
-import { useState as useState3, useEffect as useEffect4 } from "react";
-import { Fragment, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import React, { useState as useState3, useEffect as useEffect4 } from "react";
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 function Command({
   agentId,
   command: initialCommand,
@@ -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] = useState3(0);
   const [command, setCommand] = useState3(initialCommand || "");
   const [streamedContent, setStreamedContent] = useState3("");
+  const fileInputRef = React.useRef(null);
   useEffect4(() => {
     if (autoExecute && state === "idle" && command) {
       executeCommand();
@@ -499,10 +560,12 @@ function Command({
       setState("error");
       return;
     }
+    const currentCommand = command;
     setState("loading");
     setError(null);
     setProgress(0);
     setStreamedContent("");
+    setCommand("");
     onStart?.();
     try {
       if (enableStreaming) {
@@ -526,7 +589,7 @@ function Command({
         const mockResult = {
           success: true,
           data: {
-            summary: `Successfully processed: "${command}"`,
+            summary: `Successfully processed: "${currentCommand}"`,
             agentId,
             context,
             timestamp: (/* @__PURE__ */ new Date()).toISOString()
@@ -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()
@@ -576,6 +639,11 @@ function Command({
     setProgress(0);
     setCommand("");
   };
+  const handleFileSelect = (e) => {
+    if (e.target.files && e.target.files.length > 0) {
+      onFileUpload?.(e.target.files);
+    }
+  };
   const isCompact = variant === "compact";
   return /* @__PURE__ */ jsxs8(
     "div",
@@ -608,7 +676,16 @@ function Command({
               rows: 6
             }
           ),
-          state === "idle" && allowInput && isCompact && /* @__PURE__ */ jsxs8(Fragment, { children: [
+          state === "idle" && allowInput && isCompact && /* @__PURE__ */ jsxs8(Fragment2, { children: [
+            /* @__PURE__ */ jsx10(
+              "button",
+              {
+                onClick: () => fileInputRef.current?.click(),
+                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__ */ jsx10("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx10("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__ */ jsx10(
               "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__ */ jsx10("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx10("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
               }
             )
           ] }),
@@ -662,7 +739,7 @@ function Command({
               ] })
             ] })
           ] }),
-          state === "loading" && isCompact && /* @__PURE__ */ jsxs8(Fragment, { children: [
+          state === "loading" && isCompact && /* @__PURE__ */ jsxs8(Fragment2, { children: [
             /* @__PURE__ */ jsxs8("div", { className: "flex-1 flex items-center gap-3 py-1", children: [
               /* @__PURE__ */ jsx10("div", { className: "w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin" }),
               /* @__PURE__ */ jsx10("div", { className: "text-gray-600 dark:text-gray-400 text-sm truncate", children: enableStreaming && streamedContent ? streamedContent : loadingText })
@@ -679,7 +756,7 @@ function Command({
                   "!text-lg",
                   "opacity-30 cursor-not-allowed"
                 ),
-                children: "\u2191"
+                children: /* @__PURE__ */ jsx10("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx10("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
               }
             )
           ] }),
@@ -718,57 +795,94 @@ function Command({
             ] }),
             result.data?.summary && /* @__PURE__ */ jsx10("div", { className: "text-gray-700 dark:text-gray-300 text-sm leading-relaxed", children: result.data.summary })
           ] }) }),
-          state === "success" && result && isCompact && /* @__PURE__ */ jsxs8(Fragment, { children: [
-            /* @__PURE__ */ jsxs8("div", { className: "flex-1 flex items-center gap-2 py-1", children: [
-              /* @__PURE__ */ jsx10("svg", { className: "w-4 h-4 text-green-600 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx10("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__ */ jsx10("div", { className: "text-green-700 dark:text-green-300 text-sm truncate", children: resultRenderer ? resultRenderer(result.data) : result.message || "Command executed successfully" })
-            ] }),
+          state === "success" && result && isCompact && /* @__PURE__ */ jsxs8(Fragment2, { children: [
+            /* @__PURE__ */ jsxs8(
+              "div",
+              {
+                className: "flex-1 flex items-center gap-2 py-1 cursor-text",
+                onClick: () => {
+                  setState("idle");
+                  setResult(null);
+                },
+                children: [
+                  /* @__PURE__ */ jsx10("svg", { className: "w-4 h-4 text-green-600 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx10("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__ */ jsx10("div", { className: "text-green-700 dark:text-green-300 text-sm truncate", children: resultRenderer ? resultRenderer(result.data) : result.message || "Command executed successfully" })
+                ]
+              }
+            ),
             /* @__PURE__ */ jsx10(
               "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__ */ jsx10("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx10("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
               }
             )
           ] })
         ] }),
-        !isCompact && /* @__PURE__ */ jsxs8("div", { className: "p-3 flex items-center justify-end gap-2", children: [
-          (state === "success" || state === "error") && allowInput && /* @__PURE__ */ jsx10(
+        !isCompact && /* @__PURE__ */ jsxs8("div", { className: "p-3 flex items-center justify-between gap-2", children: [
+          state === "idle" && allowInput && /* @__PURE__ */ jsx10(
             "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: () => fileInputRef.current?.click(),
+              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__ */ jsx10("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx10("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__ */ jsx10(
-            "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__ */ jsx10("div", {}),
+          /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
+            (state === "success" || state === "error") && allowInput && /* @__PURE__ */ jsx10(
+              "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__ */ jsx10(
+              "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__ */ jsx10("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx10("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__ */ jsx10("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx10("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+              }
+            )
+          ] })
         ] }),
+        /* @__PURE__ */ jsx10(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            multiple: true,
+            onChange: handleFileSelect,
+            className: "hidden",
+            accept: "image/*,application/pdf,.doc,.docx,.txt"
+          }
+        ),
         /* @__PURE__ */ jsx10("style", { dangerouslySetInnerHTML: {
           __html: `
           @keyframes pulse-border {