@wealthx/shadcn 1.5.37 → 1.5.38

package/dist/components/ui/ai-assistant-drawer.js

@@ -62,8 +62,8 @@ __export(ai_assistant_drawer_exports, {
   AiAssistantDrawer: () => AiAssistantDrawer
 });
 module.exports = __toCommonJS(ai_assistant_drawer_exports);
-var React3 = __toESM(require("react"));
-var import_lucide_react4 = require("lucide-react");
+var React4 = __toESM(require("react"));
+var import_lucide_react5 = require("lucide-react");
 
 // src/lib/utils.ts
 var import_clsx = require("clsx");
@@ -367,10 +367,208 @@ function Badge(_a) {
   );
 }
 
-// src/components/ui/spinner.tsx
-var import_class_variance_authority3 = require("class-variance-authority");
+// src/components/ui/chat-input-area.tsx
+var React3 = __toESM(require("react"));
 var import_lucide_react3 = require("lucide-react");
+
+// src/components/ui/textarea.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
+function Textarea(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "textarea",
+    __spreadValues({
+      className: cn(
+        // WealthX: removed shadow-xs (flat panels), added font-sans
+        "flex field-sizing-content min-h-16 w-full border border-input bg-transparent px-3 py-2 text-body-medium font-sans transition-[color,box-shadow] outline-none placeholder:font-normal placeholder:text-muted-foreground focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/20 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        className
+      ),
+      "data-slot": "textarea"
+    }, props)
+  );
+}
+
+// src/components/ui/chat-input-area.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var DEFAULT_HINT = "Enter to send \xB7 Shift+Enter for new line";
+function ChatInputArea({
+  value,
+  onChange,
+  onSend,
+  onAttachFile,
+  onAttachImage,
+  disabled = false,
+  placeholder = "Type your message\u2026",
+  hint = DEFAULT_HINT,
+  maxHeight = 160,
+  autoFocus = false,
+  className
+}) {
+  const textareaRef = React3.useRef(null);
+  const fileInputRef = React3.useRef(null);
+  const imageInputRef = React3.useRef(null);
+  React3.useEffect(() => {
+    if (autoFocus) {
+      setTimeout(() => {
+        var _a;
+        return (_a = textareaRef.current) == null ? void 0 : _a.focus();
+      }, 50);
+    }
+  }, [autoFocus]);
+  const handleSend = React3.useCallback(() => {
+    const text = value.trim();
+    if (!text || disabled) return;
+    onSend(text);
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+    }
+  }, [value, disabled, onSend]);
+  const handleKeyDown = React3.useCallback(
+    (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSend();
+      }
+    },
+    [handleSend]
+  );
+  const handleTextareaChange = React3.useCallback(
+    (e) => {
+      onChange(e.target.value);
+      const el = e.target;
+      el.style.height = "auto";
+      el.style.height = `${Math.min(el.scrollHeight, maxHeight)}px`;
+    },
+    [onChange, maxHeight]
+  );
+  const handleFileChange = React3.useCallback(
+    (e) => {
+      var _a;
+      if ((_a = e.target.files) == null ? void 0 : _a.length) {
+        onAttachFile == null ? void 0 : onAttachFile(e.target.files);
+        e.target.value = "";
+      }
+    },
+    [onAttachFile]
+  );
+  const handleImageChange = React3.useCallback(
+    (e) => {
+      var _a;
+      if ((_a = e.target.files) == null ? void 0 : _a.length) {
+        onAttachImage == null ? void 0 : onAttachImage(e.target.files);
+        e.target.value = "";
+      }
+    },
+    [onAttachImage]
+  );
+  const showFileButton = typeof onAttachFile === "function";
+  const showImageButton = typeof onAttachImage === "function";
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      "data-slot": "chat-input-area",
+      className: cn("flex flex-col gap-1.5", className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "border border-border bg-background flex flex-col focus-within:ring-1 focus-within:ring-ring", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            Textarea,
+            {
+              ref: textareaRef,
+              value,
+              onChange: handleTextareaChange,
+              onKeyDown: handleKeyDown,
+              placeholder,
+              disabled,
+              rows: 3,
+              className: "resize-none text-sm border-0 shadow-none focus-visible:ring-0 px-3 pt-3 pb-1 min-h-[72px]",
+              "aria-label": placeholder
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center justify-between px-2 pb-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-0.5", children: [
+              showFileButton && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon-sm",
+                    type: "button",
+                    title: "Attach file",
+                    "aria-label": "Attach file",
+                    disabled,
+                    onClick: () => {
+                      var _a;
+                      return (_a = fileInputRef.current) == null ? void 0 : _a.click();
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.Paperclip, { className: "size-3.5", "aria-hidden": "true" })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  "input",
+                  {
+                    ref: fileInputRef,
+                    type: "file",
+                    multiple: true,
+                    className: "sr-only",
+                    tabIndex: -1,
+                    onChange: handleFileChange
+                  }
+                )
+              ] }),
+              showImageButton && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon-sm",
+                    type: "button",
+                    title: "Upload image",
+                    "aria-label": "Upload image",
+                    disabled,
+                    onClick: () => {
+                      var _a;
+                      return (_a = imageInputRef.current) == null ? void 0 : _a.click();
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.ImagePlus, { className: "size-3.5", "aria-hidden": "true" })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  "input",
+                  {
+                    ref: imageInputRef,
+                    type: "file",
+                    multiple: true,
+                    accept: "image/*",
+                    className: "sr-only",
+                    tabIndex: -1,
+                    onChange: handleImageChange
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              Button,
+              {
+                size: "icon-sm",
+                type: "button",
+                "aria-label": "Send message",
+                disabled: !value.trim() || disabled,
+                onClick: handleSend,
+                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.Send, { className: "size-3.5", "aria-hidden": "true" })
+              }
+            )
+          ] })
+        ] }),
+        hint !== false && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-xs text-muted-foreground", children: hint })
+      ]
+    }
+  );
+}
+
+// src/components/ui/spinner.tsx
+var import_class_variance_authority3 = require("class-variance-authority");
+var import_lucide_react4 = require("lucide-react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var spinnerVariants = (0, import_class_variance_authority3.cva)("animate-spin shrink-0", {
   variants: {
     size: {
@@ -386,8 +584,8 @@ var spinnerVariants = (0, import_class_variance_authority3.cva)("animate-spin sh
 });
 function Spinner(_a) {
   var _b = _a, { className, size } = _b, props = __objRest(_b, ["className", "size"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_lucide_react3.LoaderCircle,
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_lucide_react4.LoaderCircle,
     __spreadValues({
       "aria-hidden": "true",
       className: cn(spinnerVariants({ size }), className),
@@ -396,27 +594,10 @@ function Spinner(_a) {
   );
 }
 
-// src/components/ui/textarea.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-function Textarea(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    "textarea",
-    __spreadValues({
-      className: cn(
-        // WealthX: removed shadow-xs (flat panels), added font-sans
-        "flex field-sizing-content min-h-16 w-full border border-input bg-transparent px-3 py-2 text-body-medium font-sans transition-[color,box-shadow] outline-none placeholder:font-normal placeholder:text-muted-foreground focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/20 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
-        className
-      ),
-      "data-slot": "textarea"
-    }, props)
-  );
-}
-
 // src/components/ui/ai-assistant-drawer.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function AiTypingIndicator() {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "flex items-center gap-1 py-1", "aria-label": "AI is thinking", children: [0, 150, 300].map((delay) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "flex items-center gap-1 py-1", "aria-label": "AI is thinking", children: [0, 150, 300].map((delay) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "span",
     {
       className: "size-1.5 rounded-full bg-current animate-bounce",
@@ -429,11 +610,11 @@ function AiTypingIndicator() {
 function AiChatBubble({ message }) {
   const isUser = message.role === "user";
   const isEmpty = !message.content.trim();
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "div",
     {
       className: cn("flex w-full", isUser ? "justify-end" : "justify-start"),
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
         "div",
         {
           className: cn(
@@ -442,8 +623,8 @@ function AiChatBubble({ message }) {
             message.isErrored && "bg-destructive/10 text-destructive"
           ),
           children: [
-            isEmpty && message.isStreaming ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AiTypingIndicator, {}) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "whitespace-pre-wrap break-words leading-relaxed", children: message.content }),
-            message.isErrored && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "mt-1 text-xs opacity-70", children: "Failed to send. Please try again." })
+            isEmpty && message.isStreaming ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AiTypingIndicator, {}) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "whitespace-pre-wrap break-words leading-relaxed", children: message.content }),
+            message.isErrored && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "mt-1 text-xs opacity-70", children: "Failed to send. Please try again." })
           ]
         }
       )
@@ -454,7 +635,7 @@ function AiTaskCard({
   suggestion,
   onSelect
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     Button,
     {
       type: "button",
@@ -462,8 +643,8 @@ function AiTaskCard({
       onClick: () => onSelect(suggestion.title),
       className: "h-auto w-full flex-col items-start gap-1 border border-border bg-background p-3 text-left hover:bg-muted/50",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-sm font-medium text-foreground", children: suggestion.title }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-xs text-muted-foreground", children: suggestion.description })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-sm font-medium text-foreground", children: suggestion.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-xs text-muted-foreground", children: suggestion.description })
       ]
     }
   );
@@ -499,47 +680,34 @@ function AiAssistantDrawer({
   isStreaming = false,
   isLoading = false,
   onSendMessage,
+  onAttachFile,
+  onAttachImage,
   onReset,
   className
 }) {
   var _a;
-  const [inputValue, setInputValue] = React3.useState("");
-  const messagesEndRef = React3.useRef(null);
-  const textareaRef = React3.useRef(null);
+  const [inputValue, setInputValue] = React4.useState("");
+  const messagesEndRef = React4.useRef(null);
   const suggestions = taskSuggestions != null ? taskSuggestions : DEFAULT_SUGGESTIONS;
   const hasMessages = messages.length > 0;
-  const canSend = inputValue.trim().length > 0 && !isStreaming && !isLoading;
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!messagesEndRef.current) return;
     messagesEndRef.current.scrollIntoView({
       behavior: "smooth",
       block: "nearest"
     });
   }, [messages.length]);
-  React3.useEffect(() => {
-    const el = textareaRef.current;
-    if (!el) return;
-    el.style.height = "auto";
-    el.style.height = `${Math.min(el.scrollHeight, 120)}px`;
-  }, [inputValue]);
-  const handleSend = React3.useCallback(() => {
-    const text = inputValue.trim();
-    if (!text || !canSend) return;
-    onSendMessage == null ? void 0 : onSendMessage(text);
-    setInputValue("");
-  }, [inputValue, canSend, onSendMessage]);
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      handleSend();
-    }
-  };
+  const handleSend = React4.useCallback(
+    (text) => {
+      onSendMessage == null ? void 0 : onSendMessage(text);
+      setInputValue("");
+    },
+    [onSendMessage]
+  );
   const handleSuggestionSelect = (text) => {
-    var _a2;
     setInputValue(text);
-    (_a2 = textareaRef.current) == null ? void 0 : _a2.focus();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Sheet, { open, onOpenChange: (o) => !o && onClose(), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Sheet, { open, onOpenChange: (o) => !o && onClose(), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     SheetContent,
     {
       side: "right",
@@ -547,16 +715,16 @@ function AiAssistantDrawer({
       className: cn("w-[480px] max-w-full gap-0 p-0", className),
       "data-slot": "ai-assistant-drawer",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-between border-b border-border px-4 py-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-full bg-primary", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react4.Bot, { className: "size-4 text-primary-foreground" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-sm font-semibold text-foreground", children: "AI Assistant" }),
-              opportunityName && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-xs text-muted-foreground", children: opportunityName })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between border-b border-border px-4 py-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-full bg-primary", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react5.Bot, { className: "size-4 text-primary-foreground" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-sm font-semibold text-foreground", children: "AI Assistant" }),
+              opportunityName && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-xs text-muted-foreground", children: opportunityName })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-1", children: [
-            onReset && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-1", children: [
+            onReset && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
               Button,
               {
                 variant: "ghost",
@@ -566,12 +734,12 @@ function AiAssistantDrawer({
                 title: "Reset conversation",
                 disabled: isLoading,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react4.RotateCcw, { className: "size-4" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "sr-only", children: "Reset conversation" })
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react5.RotateCcw, { className: "size-4" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "sr-only", children: "Reset conversation" })
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
               Button,
               {
                 variant: "ghost",
@@ -580,25 +748,25 @@ function AiAssistantDrawer({
                 onClick: onClose,
                 title: "Close",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react4.X, { className: "size-4" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "sr-only", children: "Close" })
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react5.X, { className: "size-4" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "sr-only", children: "Close" })
                 ]
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex flex-1 flex-col overflow-y-auto", children: isLoading ? (
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex flex-1 flex-col overflow-y-auto", children: isLoading ? (
           /* Loading state */
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex flex-1 items-center justify-center py-20", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col items-center gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Spinner, { size: "lg", className: "text-muted-foreground" }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-sm text-muted-foreground", children: "Initialising\u2026" })
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex flex-1 items-center justify-center py-20", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col items-center gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Spinner, { size: "lg", className: "text-muted-foreground" }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm text-muted-foreground", children: "Initialising\u2026" })
           ] }) })
         ) : !hasMessages ? (
           /* Empty / welcome state */
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-6 p-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-3 border border-border bg-muted/30 p-4", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Badge, { variant: "outline", className: "w-fit gap-1.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col gap-6 p-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col gap-3 border border-border bg-muted/30 p-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Badge, { variant: "outline", className: "w-fit gap-1.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "span",
                   {
                     className: "size-1.5 rounded-full bg-primary",
@@ -607,12 +775,12 @@ function AiAssistantDrawer({
                 ),
                 "AI Chat for Brokers"
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-sm text-muted-foreground", children: "A safe and secure way to chat about insights that run your business and utilise AI. All chats stay within your environment, all closed off and compliant." }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm text-muted-foreground", children: "A safe and secure way to chat about insights that run your business and utilise AI. All chats stay within your environment, all closed off and compliant." }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex gap-2", children: [
                 { emoji: "\u{1F916}", label: "Smart" },
                 { emoji: "\u26A1", label: "Fast" },
                 { emoji: "\u{1F512}", label: "Secure" }
-              ].map(({ emoji, label }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+              ].map(({ emoji, label }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                 "span",
                 {
                   className: "border border-border px-2.5 py-1 text-xs text-foreground",
@@ -625,9 +793,9 @@ function AiAssistantDrawer({
                 label
               )) })
             ] }),
-            suggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-xs font-medium text-muted-foreground", children: "Suggested tasks" }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "grid grid-cols-2 gap-2", children: suggestions.map((s) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            suggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-xs font-medium text-muted-foreground", children: "Suggested tasks" }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "grid grid-cols-2 gap-2", children: suggestions.map((s) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 AiTaskCard,
                 {
                   suggestion: s,
@@ -639,44 +807,24 @@ function AiAssistantDrawer({
           ] })
         ) : (
           /* Message list */
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-3 p-4", children: [
-            messages.map((msg) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AiChatBubble, { message: msg }, msg.id)),
-            isStreaming && ((_a = messages[messages.length - 1]) == null ? void 0 : _a.role) === "user" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "bg-muted px-3 py-2 text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AiTypingIndicator, {}) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: messagesEndRef })
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col gap-3 p-4", children: [
+            messages.map((msg) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AiChatBubble, { message: msg }, msg.id)),
+            isStreaming && ((_a = messages[messages.length - 1]) == null ? void 0 : _a.role) === "user" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "bg-muted px-3 py-2 text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AiTypingIndicator, {}) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: messagesEndRef })
           ] })
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "border-t border-border p-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-end gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              Textarea,
-              {
-                ref: textareaRef,
-                value: inputValue,
-                onChange: (e) => setInputValue(e.target.value),
-                onKeyDown: handleKeyDown,
-                placeholder: "Ask me anything\u2026 (Enter to send, Shift+Enter for new line)",
-                rows: 1,
-                disabled: isLoading,
-                className: "min-h-0 flex-1 resize-none overflow-hidden py-2 text-sm"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-              Button,
-              {
-                size: "icon",
-                onClick: handleSend,
-                disabled: !canSend,
-                className: "shrink-0",
-                title: "Send",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react4.Send, { className: "size-4" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "sr-only", children: "Send message" })
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "mt-1.5 text-[10px] text-muted-foreground", children: "Enter to send \xB7 Shift+Enter for new line" })
-        ] })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "border-t border-border p-3", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          ChatInputArea,
+          {
+            value: inputValue,
+            onChange: setInputValue,
+            onSend: handleSend,
+            onAttachFile,
+            onAttachImage,
+            disabled: isLoading || isStreaming,
+            placeholder: "Ask me anything\u2026"
+          }
+        ) })
       ]
     }
   ) });

package/dist/components/ui/ai-assistant-drawer.mjs

@@ -1,6 +1,7 @@
 import {
   AiAssistantDrawer
-} from "../../chunk-734FOOJC.mjs";
+} from "../../chunk-B5PSUONN.mjs";
+import "../../chunk-EFHPSKVF.mjs";
 import "../../chunk-H3PTREG6.mjs";
 import "../../chunk-BS75ICOO.mjs";
 import "../../chunk-JVMXMFBB.mjs";