@wealthx/shadcn 1.5.36 → 1.5.38

package/dist/components/ui/ai-conversations/index.js

@@ -72,7 +72,7 @@ __export(ai_conversations_exports, {
 });
 module.exports = __toCommonJS(ai_conversations_exports);
 var import_react5 = require("react");
-var import_lucide_react8 = require("lucide-react");
+var import_lucide_react9 = require("lucide-react");
 
 // src/lib/utils.ts
 var import_clsx = require("clsx");
@@ -1047,7 +1047,7 @@ var import_react4 = require("@tiptap/react");
 var import_starter_kit = __toESM(require("@tiptap/starter-kit"));
 var import_extension_underline = __toESM(require("@tiptap/extension-underline"));
 var import_extension_link = __toESM(require("@tiptap/extension-link"));
-var import_lucide_react6 = require("lucide-react");
+var import_lucide_react7 = require("lucide-react");
 
 // src/components/ui/dropdown-menu.tsx
 var import_lucide_react4 = require("lucide-react");
@@ -1194,6 +1194,10 @@ function Separator(_a2) {
   );
 }
 
+// src/components/ui/chat-input-area.tsx
+var React5 = __toESM(require("react"));
+var import_lucide_react5 = require("lucide-react");
+
 // src/components/ui/textarea.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function Textarea(_a2) {
@@ -1211,12 +1215,189 @@ function Textarea(_a2) {
   );
 }
 
+// src/components/ui/chat-input-area.tsx
+var import_jsx_runtime17 = 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 = React5.useRef(null);
+  const fileInputRef = React5.useRef(null);
+  const imageInputRef = React5.useRef(null);
+  React5.useEffect(() => {
+    if (autoFocus) {
+      setTimeout(() => {
+        var _a2;
+        return (_a2 = textareaRef.current) == null ? void 0 : _a2.focus();
+      }, 50);
+    }
+  }, [autoFocus]);
+  const handleSend = React5.useCallback(() => {
+    const text = value.trim();
+    if (!text || disabled) return;
+    onSend(text);
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+    }
+  }, [value, disabled, onSend]);
+  const handleKeyDown = React5.useCallback(
+    (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSend();
+      }
+    },
+    [handleSend]
+  );
+  const handleTextareaChange = React5.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 = React5.useCallback(
+    (e) => {
+      var _a2;
+      if ((_a2 = e.target.files) == null ? void 0 : _a2.length) {
+        onAttachFile == null ? void 0 : onAttachFile(e.target.files);
+        e.target.value = "";
+      }
+    },
+    [onAttachFile]
+  );
+  const handleImageChange = React5.useCallback(
+    (e) => {
+      var _a2;
+      if ((_a2 = e.target.files) == null ? void 0 : _a2.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_runtime17.jsxs)(
+    "div",
+    {
+      "data-slot": "chat-input-area",
+      className: cn("flex flex-col gap-1.5", className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "border border-border bg-background flex flex-col focus-within:ring-1 focus-within:ring-ring", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.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_runtime17.jsxs)("div", { className: "flex items-center justify-between px-2 pb-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center gap-0.5", children: [
+              showFileButton && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon-sm",
+                    type: "button",
+                    title: "Attach file",
+                    "aria-label": "Attach file",
+                    disabled,
+                    onClick: () => {
+                      var _a2;
+                      return (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react5.Paperclip, { className: "size-3.5", "aria-hidden": "true" })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  "input",
+                  {
+                    ref: fileInputRef,
+                    type: "file",
+                    multiple: true,
+                    className: "sr-only",
+                    tabIndex: -1,
+                    onChange: handleFileChange
+                  }
+                )
+              ] }),
+              showImageButton && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon-sm",
+                    type: "button",
+                    title: "Upload image",
+                    "aria-label": "Upload image",
+                    disabled,
+                    onClick: () => {
+                      var _a2;
+                      return (_a2 = imageInputRef.current) == null ? void 0 : _a2.click();
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react5.ImagePlus, { className: "size-3.5", "aria-hidden": "true" })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  "input",
+                  {
+                    ref: imageInputRef,
+                    type: "file",
+                    multiple: true,
+                    accept: "image/*",
+                    className: "sr-only",
+                    tabIndex: -1,
+                    onChange: handleImageChange
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              Button,
+              {
+                size: "icon-sm",
+                type: "button",
+                "aria-label": "Send message",
+                disabled: !value.trim() || disabled,
+                onClick: handleSend,
+                children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react5.Send, { className: "size-3.5", "aria-hidden": "true" })
+              }
+            )
+          ] })
+        ] }),
+        hint !== false && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-xs text-muted-foreground", children: hint })
+      ]
+    }
+  );
+}
+
 // src/components/ui/ai-conversations/bubble.tsx
 var import_react_markdown = __toESM(require("react-markdown"));
 var import_rehype_raw = __toESM(require("rehype-raw"));
 var import_rehype_sanitize = __toESM(require("rehype-sanitize"));
-var import_lucide_react5 = require("lucide-react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_lucide_react6 = require("lucide-react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var _a;
 var EMAIL_SANITIZE_SCHEMA = __spreadProps(__spreadValues({}, import_rehype_sanitize.defaultSchema), {
   strip: ["script", "style", "head", ...(_a = import_rehype_sanitize.defaultSchema.strip) != null ? _a : []]
@@ -1226,21 +1407,21 @@ function BubbleAvatar2({
   senderName
 }) {
   if (role === "bot") {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Avatar, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AvatarFallback, { className: "border border-border bg-muted", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react5.Bot, { className: "size-3.5 text-muted-foreground" }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Avatar, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AvatarFallback, { className: "border border-border bg-muted", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.Bot, { className: "size-3.5 text-muted-foreground" }) }) });
   }
   if (role === "advisor") {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Avatar, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AvatarFallback, { className: "font-semibold", children: getInitials(senderName != null ? senderName : "Advisor") }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Avatar, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AvatarFallback, { className: "font-semibold", children: getInitials(senderName != null ? senderName : "Advisor") }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Avatar, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AvatarFallback, { children: getInitials(senderName != null ? senderName : "?") }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Avatar, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AvatarFallback, { children: getInitials(senderName != null ? senderName : "?") }) });
 }
 function SystemDivider({
   content,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cn("my-2 flex items-center gap-3 px-2", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Separator, { className: "flex-1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "shrink-0 text-caption text-muted-foreground", children: content }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Separator, { className: "flex-1" })
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: cn("my-2 flex items-center gap-3 px-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Separator, { className: "flex-1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "shrink-0 text-caption text-muted-foreground", children: content }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Separator, { className: "flex-1" })
   ] });
 }
 function ChatMessageBubble({
@@ -1252,7 +1433,7 @@ function ChatMessageBubble({
   const isBot = role === "bot";
   const isVisitor = role === "visitor";
   const displayName = isBot ? "AI Assistant" : isAdvisor ? senderName != null ? senderName : "Advisor" : senderName != null ? senderName : "Lead";
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "div",
     {
       className: cn(
@@ -1261,8 +1442,8 @@ function ChatMessageBubble({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BubbleAvatar2, { role, senderName }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BubbleAvatar2, { role, senderName }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
           "div",
           {
             className: cn(
@@ -1270,8 +1451,8 @@ function ChatMessageBubble({
               isAdvisor && "items-end"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-caption text-muted-foreground", children: displayName }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-caption text-muted-foreground", children: displayName }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 "div",
                 {
                   className: cn(
@@ -1280,7 +1461,7 @@ function ChatMessageBubble({
                     isVisitor && "border border-border bg-background text-foreground [&_a]:text-primary",
                     isAdvisor && "bg-primary text-primary-foreground [&_a]:text-primary-foreground"
                   ),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                     import_react_markdown.default,
                     {
                       rehypePlugins: [import_rehype_raw.default, [import_rehype_sanitize.default, import_rehype_sanitize.defaultSchema]],
@@ -1289,7 +1470,7 @@ function ChatMessageBubble({
                   )
                 }
               ),
-              timestamp && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-caption text-muted-foreground", children: timestamp })
+              timestamp && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-caption text-muted-foreground", children: timestamp })
             ]
           }
         )
@@ -1305,7 +1486,7 @@ function EmailMessageBubble({
   const isAdvisor = role === "advisor";
   const isBot = role === "bot";
   const displayName = isBot ? "AI Assistant" : isAdvisor ? senderName != null ? senderName : "Advisor" : senderName != null ? senderName : "Lead";
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "div",
     {
       className: cn(
@@ -1314,8 +1495,8 @@ function EmailMessageBubble({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BubbleAvatar2, { role, senderName }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BubbleAvatar2, { role, senderName }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
           "div",
           {
             className: cn(
@@ -1323,8 +1504,8 @@ function EmailMessageBubble({
               isAdvisor && "items-end"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-caption text-muted-foreground", children: displayName }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-caption text-muted-foreground", children: displayName }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
                 "div",
                 {
                   className: cn(
@@ -1345,12 +1526,12 @@ function EmailMessageBubble({
                     isAdvisor && "bg-muted/30"
                   ),
                   children: [
-                    subject && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "mb-2.5 border-b border-border pb-2", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-xs font-medium text-muted-foreground", children: "Subject:" }),
+                    subject && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "mb-2.5 border-b border-border pb-2", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-xs font-medium text-muted-foreground", children: "Subject:" }),
                       " ",
-                      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-sm font-semibold text-foreground", children: subject })
+                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-sm font-semibold text-foreground", children: subject })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                       import_react_markdown.default,
                       {
                         rehypePlugins: [import_rehype_raw.default, [import_rehype_sanitize.default, EMAIL_SANITIZE_SCHEMA]],
@@ -1360,7 +1541,7 @@ function EmailMessageBubble({
                   ]
                 }
               ),
-              timestamp && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-caption text-muted-foreground", children: timestamp })
+              timestamp && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-caption text-muted-foreground", children: timestamp })
             ]
           }
         )
@@ -1370,23 +1551,23 @@ function EmailMessageBubble({
 }
 function ChatBubble({ message, channel, className }) {
   if (message.role === "system") {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SystemDivider, { content: message.content, className });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SystemDivider, { content: message.content, className });
   }
   if (channel === "email") {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(EmailMessageBubble, { message, className });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(EmailMessageBubble, { message, className });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChatMessageBubble, { message, className });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChatMessageBubble, { message, className });
 }
 
 // src/components/ui/ai-conversations/thread.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function ComposerToolbarButton({
   label,
   icon: Icon,
   pressed,
   onToggle
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "button",
     {
       type: "button",
@@ -1397,7 +1578,7 @@ function ComposerToolbarButton({
         "flex size-7 items-center justify-center transition-colors",
         pressed ? "bg-foreground text-background" : "text-muted-foreground hover:bg-muted hover:text-foreground"
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { className: "size-3.5" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { className: "size-3.5" })
     }
   );
 }
@@ -1413,7 +1594,7 @@ function ComposerLinkPopover({
     setOpen(false);
     setUrl("");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     Popover,
     {
       open,
@@ -1426,7 +1607,7 @@ function ComposerLinkPopover({
         setOpen(newOpen);
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           PopoverTrigger,
           {
             "aria-label": "Insert link",
@@ -1434,11 +1615,11 @@ function ComposerLinkPopover({
               "flex size-7 items-center justify-center transition-colors",
               (editor == null ? void 0 : editor.isActive("link")) ? "bg-foreground text-background" : "text-muted-foreground hover:bg-muted hover:text-foreground"
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.Link2, { className: "size-3.5" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.Link2, { className: "size-3.5" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PopoverContent, { className: "w-72 p-2", align: "start", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PopoverContent, { className: "w-72 p-2", align: "start", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "input",
             {
               type: "url",
@@ -1450,7 +1631,7 @@ function ComposerLinkPopover({
               autoFocus: true
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { size: "sm", className: "h-8 px-3", onClick: handleApply, children: "Apply" })
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { size: "sm", className: "h-8 px-3", onClick: handleApply, children: "Apply" })
         ] }) })
       ]
     }
@@ -1460,8 +1641,8 @@ function ComposerEmailFieldRow({
   label,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-3 border-b border-border px-4 py-2.5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "w-14 shrink-0 text-sm text-muted-foreground", children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-3 border-b border-border px-4 py-2.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "w-14 shrink-0 text-sm text-muted-foreground", children: label }),
     children
   ] });
 }
@@ -1477,6 +1658,8 @@ function ChatComposer({
   onSendEmail,
   onTakeOver,
   onLetAiHandle,
+  onAttachFile,
+  onAttachImage,
   emailReplySubject,
   className
 }) {
@@ -1526,7 +1709,7 @@ function ChatComposer({
       setEmailSubject(emailReplySubject ? `Re: ${emailReplySubject}` : "");
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
     {
       className: cn(
@@ -1534,27 +1717,27 @@ function ChatComposer({
         className
       ),
       children: [
-        isEmailIntegrated && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "border-b border-border px-3 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        isEmailIntegrated && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "border-b border-border px-3 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           Tabs,
           {
             value: channel,
             onValueChange: (v) => v && handleChannelChange(v),
-            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(TabsList, { variant: "default", className: "w-full", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(TabsTrigger, { value: "chat", className: "flex-1 gap-1.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.MessageSquare, { className: "size-3.5" }),
+            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(TabsList, { variant: "default", className: "w-full", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(TabsTrigger, { value: "chat", className: "flex-1 gap-1.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.MessageSquare, { className: "size-3.5" }),
                 "Chat"
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(TabsTrigger, { value: "email", className: "flex-1 gap-1.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.Mail, { className: "size-3.5" }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(TabsTrigger, { value: "email", className: "flex-1 gap-1.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.Mail, { className: "size-3.5" }),
                 "Email"
               ] })
             ] })
           }
         ) }),
-        mode === "ai" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-2 bg-muted/30 px-4 py-2.5 text-[12px] text-muted-foreground", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.Bot, { className: "size-3.5 shrink-0 text-muted-foreground" }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: "AI is handling this conversation." }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        mode === "ai" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2 bg-muted/30 px-4 py-2.5 text-[12px] text-muted-foreground", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.Bot, { className: "size-3.5 shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "AI is handling this conversation." }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             Button,
             {
               variant: "link",
@@ -1564,12 +1747,12 @@ function ChatComposer({
               children: "Take Over"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: "to reply directly." })
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "to reply directly." })
         ] }) : (
           /* Email panel stays in normal flow to anchor container height;
              chat panel is an absolute overlay so both tabs share identical dimensions */
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "relative", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "relative", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
               "div",
               {
                 className: cn(
@@ -1578,8 +1761,8 @@ function ChatComposer({
                 ),
                 "aria-hidden": channel !== "email",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(ComposerEmailFieldRow, { label: "To", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(ComposerEmailFieldRow, { label: "To", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                       "input",
                       {
                         type: "email",
@@ -1589,7 +1772,7 @@ function ChatComposer({
                         className: "min-w-0 flex-1 bg-transparent text-base text-foreground outline-none placeholder:text-muted-foreground"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
                       "button",
                       {
                         type: "button",
@@ -1597,12 +1780,12 @@ function ChatComposer({
                         className: "flex shrink-0 items-center gap-0.5 text-sm text-muted-foreground hover:text-foreground",
                         children: [
                           "CC",
-                          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.ChevronDown, { className: "size-3.5" })
+                          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.ChevronDown, { className: "size-3.5" })
                         ]
                       }
                     )
                   ] }),
-                  showCc && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ComposerEmailFieldRow, { label: "CC", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                  showCc && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ComposerEmailFieldRow, { label: "CC", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                     "input",
                     {
                       type: "email",
@@ -1612,7 +1795,7 @@ function ChatComposer({
                       className: "min-w-0 flex-1 bg-transparent text-base text-foreground outline-none placeholder:text-muted-foreground"
                     }
                   ) }),
-                  emailMode !== "reply" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ComposerEmailFieldRow, { label: "Subject", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                  emailMode !== "reply" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ComposerEmailFieldRow, { label: "Subject", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                     "input",
                     {
                       type: "text",
@@ -1622,11 +1805,11 @@ function ChatComposer({
                       className: "min-w-0 flex-1 bg-transparent text-base text-foreground outline-none placeholder:text-muted-foreground"
                     }
                   ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react4.EditorContent, { editor }),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center justify-between border-t border-border px-3 py-2", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-0.5", children: [
-                      emailReplySubject && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react4.EditorContent, { editor }),
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between border-t border-border px-3 py-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-0.5", children: [
+                      emailReplySubject && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
                           ToggleGroup,
                           {
                             type: "single",
@@ -1640,45 +1823,45 @@ function ChatComposer({
                             },
                             className: "mr-1.5",
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToggleGroupItem, { value: "reply", children: "Reply" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToggleGroupItem, { value: "new", children: "New email" })
+                              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ToggleGroupItem, { value: "reply", children: "Reply" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ToggleGroupItem, { value: "new", children: "New email" })
                             ]
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Separator, { orientation: "vertical", className: "mr-1.5 h-4" })
+                        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Separator, { orientation: "vertical", className: "mr-1.5 h-4" })
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                         ComposerToolbarButton,
                         {
                           label: "Bold",
-                          icon: import_lucide_react6.Bold,
+                          icon: import_lucide_react7.Bold,
                           pressed: editor == null ? void 0 : editor.isActive("bold"),
                           onToggle: () => editor == null ? void 0 : editor.chain().focus().toggleBold().run()
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                         ComposerToolbarButton,
                         {
                           label: "Italic",
-                          icon: import_lucide_react6.Italic,
+                          icon: import_lucide_react7.Italic,
                           pressed: editor == null ? void 0 : editor.isActive("italic"),
                           onToggle: () => editor == null ? void 0 : editor.chain().focus().toggleItalic().run()
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                         ComposerToolbarButton,
                         {
                           label: "Underline",
-                          icon: import_lucide_react6.Underline,
+                          icon: import_lucide_react7.Underline,
                           pressed: editor == null ? void 0 : editor.isActive("underline"),
                           onToggle: () => editor == null ? void 0 : editor.chain().focus().toggleUnderline().run()
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Separator, { orientation: "vertical", className: "mx-1.5 h-4" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ComposerLinkPopover, { editor }),
-                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ComposerToolbarButton, { label: "Attach file", icon: import_lucide_react6.Paperclip })
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Separator, { orientation: "vertical", className: "mx-1.5 h-4" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ComposerLinkPopover, { editor }),
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ComposerToolbarButton, { label: "Attach file", icon: import_lucide_react7.Paperclip })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
                       Button,
                       {
                         size: "sm",
@@ -1696,7 +1879,7 @@ function ChatComposer({
                         },
                         disabled: !editor || editor.isEmpty || !emailTo.trim(),
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.Send, { className: "mr-1.5 size-3.5" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.Send, { className: "mr-1.5 size-3.5" }),
                           "Send Email"
                         ]
                       }
@@ -1705,35 +1888,32 @@ function ChatComposer({
                 ]
               }
             ),
-            channel === "chat" && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "absolute inset-0 flex flex-col gap-3 p-4", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                Textarea,
+            channel === "chat" && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "absolute inset-0 flex flex-col gap-3 p-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                ChatInputArea,
                 {
                   value: inputValue,
-                  onChange: (e) => onInputChange == null ? void 0 : onInputChange(e.target.value),
-                  placeholder: "Reply to lead...",
-                  className: "min-h-0 flex-1 resize-none text-base"
+                  onChange: (v) => onInputChange == null ? void 0 : onInputChange(v),
+                  onSend: (text) => onSend == null ? void 0 : onSend(text),
+                  onAttachFile,
+                  onAttachImage,
+                  placeholder: "Reply to lead\u2026",
+                  hint: false
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center justify-between", children: [
-                initialChannelRef.current !== "email" && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Button, { variant: "outline", size: "sm", onClick: onLetAiHandle, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.Bot, { className: "mr-1.5 size-3.5" }),
-                  "Let AI Handle"
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-                  Button,
-                  {
-                    size: "sm",
-                    className: "ml-auto",
-                    onClick: () => onSend == null ? void 0 : onSend(inputValue),
-                    disabled: !inputValue.trim(),
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.Send, { className: "mr-1.5 size-3.5" }),
-                      "Send"
-                    ]
-                  }
-                )
-              ] })
+              initialChannelRef.current !== "email" && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                Button,
+                {
+                  variant: "outline",
+                  size: "sm",
+                  className: "self-start",
+                  onClick: onLetAiHandle,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.Bot, { className: "mr-1.5 size-3.5" }),
+                    "Let AI Handle"
+                  ]
+                }
+              )
             ] })
           ] })
         )
@@ -1756,6 +1936,8 @@ function ChatThread({
   onSendEmail,
   onTakeOver,
   onLetAiHandle,
+  onAttachFile,
+  onAttachImage,
   emailReplySubject,
   onReopen,
   onMarkUrgent,
@@ -1809,8 +1991,8 @@ function ChatThread({
     const el = scrollRef.current;
     if (el) el.scrollTop = el.scrollHeight;
   }, [isAiTyping]);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: cn("flex flex-col bg-background", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: cn("flex flex-col bg-background", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       "div",
       {
         className: cn(
@@ -1818,7 +2000,7 @@ function ChatThread({
           "flex items-center gap-3 border-b border-border px-4"
         ),
         children: [
-          onBack && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          onBack && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             Button,
             {
               variant: "ghost",
@@ -1826,28 +2008,28 @@ function ChatThread({
               className: "size-8 shrink-0 md:hidden",
               onClick: onBack,
               "aria-label": "Back to conversations",
-              children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.ArrowLeft, { className: "size-4" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.ArrowLeft, { className: "size-4" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ContactAvatar, { name: contact.name, size: "md" }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-sm font-semibold text-foreground", children: displayContactName(contact.name) }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ConversationStatusChip, { status, showDot: true })
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ContactAvatar, { name: contact.name, size: "md" }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-sm font-semibold text-foreground", children: displayContactName(contact.name) }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ConversationStatusChip, { status, showDot: true })
             ] }),
-            contact.email && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-sm text-muted-foreground", children: contact.email })
+            contact.email && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm text-muted-foreground", children: contact.email })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex shrink-0 items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "hidden items-center gap-2 md:flex", children: [
-              isClosed && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { variant: "outline", size: "sm", onClick: onReopen, children: "Reopen" }),
-              !isClosed && aiIsHandling && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { size: "sm", onClick: onTakeOver, children: "Take Over" }),
-              !isClosed && !aiIsHandling && channel !== "email" && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Button, { variant: "outline", size: "sm", onClick: onLetAiHandle, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.Bot, { className: "mr-1.5 size-3.5" }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex shrink-0 items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "hidden items-center gap-2 md:flex", children: [
+              isClosed && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { variant: "outline", size: "sm", onClick: onReopen, children: "Reopen" }),
+              !isClosed && aiIsHandling && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { size: "sm", onClick: onTakeOver, children: "Take Over" }),
+              !isClosed && !aiIsHandling && channel !== "email" && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Button, { variant: "outline", size: "sm", onClick: onLetAiHandle, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.Bot, { className: "mr-1.5 size-3.5" }),
                 "Let AI Handle"
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(DropdownMenu, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(DropdownMenu, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 DropdownMenuTrigger,
                 {
                   className: cn(
@@ -1855,38 +2037,38 @@ function ChatThread({
                     "size-8"
                   ),
                   "aria-label": "More actions",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.MoreHorizontal, { className: "size-4" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.MoreHorizontal, { className: "size-4" })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(DropdownMenuContent, { children: [
-                onShowLeadInfo && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(DropdownMenuContent, { children: [
+                onShowLeadInfo && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
                     DropdownMenuItem,
                     {
                       className: "md:hidden",
                       onClick: onShowLeadInfo,
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.ChevronRight, { className: "mr-2 size-4" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.ChevronRight, { className: "mr-2 size-4" }),
                         "Lead Info"
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DropdownMenuSeparator, { className: "md:hidden" })
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DropdownMenuSeparator, { className: "md:hidden" })
                 ] }),
-                status === "needs-attention" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(DropdownMenuItem, { onClick: onUnmarkUrgent, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.Flag, { className: "mr-2 size-4" }),
+                status === "needs-attention" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(DropdownMenuItem, { onClick: onUnmarkUrgent, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.Flag, { className: "mr-2 size-4" }),
                   "Unmark Urgent"
-                ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(DropdownMenuItem, { onClick: onMarkUrgent, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.Flag, { className: "mr-2 size-4" }),
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(DropdownMenuItem, { onClick: onMarkUrgent, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.Flag, { className: "mr-2 size-4" }),
                   "Mark as Urgent"
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(DropdownMenuItem, { onClick: onAssignToAdvisor, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.UserCheck, { className: "mr-2 size-4" }),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(DropdownMenuItem, { onClick: onAssignToAdvisor, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.UserCheck, { className: "mr-2 size-4" }),
                   "Assign to advisor"
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DropdownMenuSeparator, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(DropdownMenuItem, { onClick: onArchive, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.Archive, { className: "mr-2 size-4" }),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DropdownMenuSeparator, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(DropdownMenuItem, { onClick: onArchive, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.Archive, { className: "mr-2 size-4" }),
                   "Archive"
                 ] })
               ] })
@@ -1895,7 +2077,7 @@ function ChatThread({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       "div",
       {
         ref: scrollRef,
@@ -1903,29 +2085,29 @@ function ChatThread({
         className: "flex flex-1 flex-col gap-4 overflow-y-auto p-4",
         tabIndex: 0,
         children: [
-          isLoadingMoreMessages && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex justify-center py-1 text-caption text-muted-foreground", children: "Loading older messages..." }),
-          messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-1 flex-col items-center justify-center gap-2 text-muted-foreground", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.MessageSquare, { className: "size-8 opacity-30" }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-sm", children: "No messages yet" })
-          ] }) : messages.map((msg) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChatBubble, { message: msg, channel }, msg.id)),
-          isAiTyping && !isClosed && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex gap-2.5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BubbleAvatar, { role: "bot" }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col gap-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-caption text-muted-foreground", children: "AI Assistant" }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-1 border border-border bg-muted/60 px-3 py-2.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "size-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:0ms]" }),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "size-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:150ms]" }),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "size-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:300ms]" })
+          isLoadingMoreMessages && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex justify-center py-1 text-caption text-muted-foreground", children: "Loading older messages..." }),
+          messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-1 flex-col items-center justify-center gap-2 text-muted-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.MessageSquare, { className: "size-8 opacity-30" }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm", children: "No messages yet" })
+          ] }) : messages.map((msg) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChatBubble, { message: msg, channel }, msg.id)),
+          isAiTyping && !isClosed && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex gap-2.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(BubbleAvatar, { role: "bot" }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-caption text-muted-foreground", children: "AI Assistant" }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-1 border border-border bg-muted/60 px-3 py-2.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "size-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:0ms]" }),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "size-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:150ms]" }),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "size-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:300ms]" })
               ] })
             ] })
           ] })
         ]
       }
     ),
-    isClosed ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-3 border-t border-border bg-muted/30 px-4 py-3 text-sm text-muted-foreground", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.Lock, { className: "size-3.5 shrink-0" }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: "This conversation is closed." }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    isClosed ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-3 border-t border-border bg-muted/30 px-4 py-3 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.Lock, { className: "size-3.5 shrink-0" }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "This conversation is closed." }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         Button,
         {
           variant: "outline",
@@ -1935,7 +2117,7 @@ function ChatThread({
           children: "Reopen"
         }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       ChatComposer,
       {
         mode,
@@ -1949,6 +2131,8 @@ function ChatThread({
         onSendEmail,
         onTakeOver,
         onLetAiHandle,
+        onAttachFile,
+        onAttachImage,
         emailReplySubject
       }
     )
@@ -1956,21 +2140,21 @@ function ChatThread({
 }
 
 // src/components/ui/ai-conversations/lead-panel.tsx
-var import_lucide_react7 = require("lucide-react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_lucide_react8 = require("lucide-react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function AICollectedDataSection({
   fields,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("flex flex-col", className), children: fields.map((field, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn("flex flex-col", className), children: fields.map((field, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "div",
     {
       className: "flex items-center justify-between gap-2 border-b border-border/40 py-1.5 last:border-b-0",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "shrink-0 text-sm text-muted-foreground", children: field.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-right text-sm font-medium text-foreground", children: field.value }),
-          field.confidence === "confirmed" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.CheckCircle2, { className: "size-3 shrink-0 text-success-text" }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.HelpCircle, { className: "size-3 shrink-0 text-warning-text" })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "shrink-0 text-sm text-muted-foreground", children: field.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-right text-sm font-medium text-foreground", children: field.value }),
+          field.confidence === "confirmed" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.CheckCircle2, { className: "size-3 shrink-0 text-success-text" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.HelpCircle, { className: "size-3 shrink-0 text-warning-text" })
         ] })
       ]
     },
@@ -1984,9 +2168,9 @@ var APPOINTMENT_STATUS_LABEL = {
   cancelled: "Cancelled"
 };
 var MEETING_ICON = {
-  video: import_lucide_react7.Video,
-  phone: import_lucide_react7.Phone,
-  "in-person": import_lucide_react7.MapPin
+  video: import_lucide_react8.Video,
+  phone: import_lucide_react8.Phone,
+  "in-person": import_lucide_react8.MapPin
 };
 var MEETING_LABEL = {
   video: "Video Call",
@@ -1994,9 +2178,9 @@ var MEETING_LABEL = {
   "in-person": "In Person"
 };
 var MEETING_DETAIL_ICON = {
-  video: import_lucide_react7.Link2,
-  phone: import_lucide_react7.PhoneCall,
-  "in-person": import_lucide_react7.Navigation
+  video: import_lucide_react8.Link2,
+  phone: import_lucide_react8.PhoneCall,
+  "in-person": import_lucide_react8.Navigation
 };
 function MeetingDetailRow({
   meetingType,
@@ -2004,9 +2188,9 @@ function MeetingDetailRow({
 }) {
   const DetailIcon = MEETING_DETAIL_ICON[meetingType];
   const isLink = detail.startsWith("http");
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DetailIcon, { className: "size-4 shrink-0 text-muted-foreground" }),
-    isLink ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DetailIcon, { className: "size-4 shrink-0 text-muted-foreground" }),
+    isLink ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "a",
       {
         href: detail,
@@ -2015,7 +2199,7 @@ function MeetingDetailRow({
         className: "text-sm text-primary underline underline-offset-2 break-all hover:text-primary/80",
         children: detail
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-sm text-muted-foreground break-all", children: detail })
+    ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-sm text-muted-foreground break-all", children: detail })
   ] });
 }
 function AppointmentSection({
@@ -2028,23 +2212,23 @@ function AppointmentSection({
 }) {
   const AppointmentIcon = MEETING_ICON[appointment.meetingType];
   const canReschedule = !isAnonymous && !!onRescheduleAppointment;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.Calendar, { className: "size-3.5 shrink-0 text-muted-foreground" }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-sm font-medium text-foreground", children: appointment.datetime })
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.Calendar, { className: "size-3.5 shrink-0 text-muted-foreground" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-sm font-medium text-foreground", children: appointment.datetime })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AppointmentIcon, { className: "size-4 shrink-0 text-muted-foreground" }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-sm text-muted-foreground", children: MEETING_LABEL[appointment.meetingType] })
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AppointmentIcon, { className: "size-4 shrink-0 text-muted-foreground" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-sm text-muted-foreground", children: MEETING_LABEL[appointment.meetingType] })
     ] }),
-    appointment.meetingDetail && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    appointment.meetingDetail && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       MeetingDetailRow,
       {
         meetingType: appointment.meetingType,
         detail: appointment.meetingDetail
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "span",
       {
         className: cn("text-sm font-medium", {
@@ -2056,9 +2240,9 @@ function AppointmentSection({
         children: APPOINTMENT_STATUS_LABEL[appointment.status]
       }
     ),
-    appointment.status === "requested" && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex gap-2 pt-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { size: "sm", className: "flex-1", onClick: onApproveAppointment, children: "Approve" }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    appointment.status === "requested" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex gap-2 pt-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { size: "sm", className: "flex-1", onClick: onApproveAppointment, children: "Approve" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         Button,
         {
           variant: "outline",
@@ -2068,7 +2252,7 @@ function AppointmentSection({
           children: "Decline"
         }
       ),
-      canReschedule && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      canReschedule && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         Button,
         {
           variant: "ghost",
@@ -2079,7 +2263,7 @@ function AppointmentSection({
         }
       )
     ] }),
-    (appointment.status === "confirmed" || appointment.status === "cancelled") && canReschedule && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    (appointment.status === "confirmed" || appointment.status === "cancelled") && canReschedule && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       Button,
       {
         variant: "outline",
@@ -2092,13 +2276,13 @@ function AppointmentSection({
   ] });
 }
 function PanelSectionHeader({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "mb-2.5 text-overline text-muted-foreground", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "mb-2.5 text-overline text-muted-foreground", children });
 }
 function PanelSection({
   children,
   last = false
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("px-4 py-4", !last && "border-b border-border"), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn("px-4 py-4", !last && "border-b border-border"), children });
 }
 function LeadInfoPanel({
   contact,
@@ -2124,8 +2308,8 @@ function LeadInfoPanel({
 }) {
   const isAnonymous = !contact.name.trim();
   const addToContactsDisabled = isAnonymous || isKnownContact;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: cn("flex flex-col bg-background", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn("flex flex-col bg-background", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "div",
       {
         className: cn(
@@ -2133,7 +2317,7 @@ function LeadInfoPanel({
           "flex items-center justify-between border-b border-border px-4"
         ),
         children: [
-          onBack && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          onBack && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             Button,
             {
               variant: "ghost",
@@ -2141,15 +2325,15 @@ function LeadInfoPanel({
               className: "size-8 shrink-0 md:hidden",
               onClick: onBack,
               "aria-label": "Back to conversation",
-              children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.ArrowLeft, { className: "size-4" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.ArrowLeft, { className: "size-4" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-sm font-semibold text-foreground", children: "Lead Info" }),
-          onToggleCollapse && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Tooltip, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-sm font-semibold text-foreground", children: "Lead Info" }),
+          onToggleCollapse && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Tooltip, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               TooltipTrigger,
               {
-                render: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                render: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                   Button,
                   {
                     variant: "ghost",
@@ -2157,8 +2341,8 @@ function LeadInfoPanel({
                     className: "size-7",
                     onClick: onToggleCollapse,
                     "aria-label": isCollapsed ? "Expand panel" : "Collapse panel",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                      import_lucide_react7.ChevronRight,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                      import_lucide_react8.ChevronRight,
                       {
                         className: cn(
                           "size-4 transition-transform duration-150",
@@ -2170,26 +2354,26 @@ function LeadInfoPanel({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TooltipContent, { children: isCollapsed ? "Expand panel" : "Collapse panel" })
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TooltipContent, { children: isCollapsed ? "Expand panel" : "Collapse panel" })
           ] })
         ]
       }
     ),
-    !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex-1 overflow-y-auto", tabIndex: 0, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(PanelSection, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PanelSectionHeader, { children: "Contact" }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ContactAvatar, { name: contact.name, size: "lg" }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "truncate text-sm font-semibold text-foreground", children: displayContactName(contact.name) }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm text-muted-foreground", children: source }),
-            topic && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Badge, { variant: "secondary", className: "mt-1 text-xs", children: topic })
+    !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex-1 overflow-y-auto", tabIndex: 0, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(PanelSection, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PanelSectionHeader, { children: "Contact" }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ContactAvatar, { name: contact.name, size: "lg" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "truncate text-sm font-semibold text-foreground", children: displayContactName(contact.name) }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm text-muted-foreground", children: source }),
+            topic && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Badge, { variant: "secondary", className: "mt-1 text-xs", children: topic })
           ] })
         ] }),
-        (contact.email || contact.phone || firstSeen) && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "mt-3 flex flex-col gap-1.5", children: [
-          contact.email && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.Mail, { className: "size-4 shrink-0" }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        (contact.email || contact.phone || firstSeen) && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "mt-3 flex flex-col gap-1.5", children: [
+          contact.email && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.Mail, { className: "size-4 shrink-0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "a",
               {
                 href: `mailto:${contact.email}`,
@@ -2198,9 +2382,9 @@ function LeadInfoPanel({
               }
             )
           ] }),
-          contact.phone && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.PhoneCall, { className: "size-4 shrink-0" }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          contact.phone && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.PhoneCall, { className: "size-4 shrink-0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "a",
               {
                 href: `tel:${contact.phone}`,
@@ -2209,31 +2393,31 @@ function LeadInfoPanel({
               }
             )
           ] }),
-          firstSeen && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("p", { className: "text-sm text-muted-foreground", children: [
+          firstSeen && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("p", { className: "text-sm text-muted-foreground", children: [
             "First seen: ",
             firstSeen
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(PanelSection, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PanelSectionHeader, { children: "AI-Collected Data" }),
-        aiFields.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AICollectedDataSection, { fields: aiFields }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "mt-2.5 flex items-center gap-3 text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.CheckCircle2, { className: "size-3 text-success-text" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(PanelSection, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PanelSectionHeader, { children: "AI-Collected Data" }),
+        aiFields.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AICollectedDataSection, { fields: aiFields }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "mt-2.5 flex items-center gap-3 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.CheckCircle2, { className: "size-3 text-success-text" }),
               "confirmed"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.HelpCircle, { className: "size-3 text-warning-text" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.HelpCircle, { className: "size-3 text-warning-text" }),
               "estimated"
             ] })
           ] })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm text-muted-foreground", children: "AI is still gathering information..." })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm text-muted-foreground", children: "AI is still gathering information..." })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(PanelSection, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PanelSectionHeader, { children: "Appointment" }),
-        appointment ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(PanelSection, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PanelSectionHeader, { children: "Appointment" }),
+        appointment ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           AppointmentSection,
           {
             appointment,
@@ -2243,7 +2427,7 @@ function LeadInfoPanel({
             onDeclineAppointment,
             onRescheduleAppointment
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
           Button,
           {
             variant: "outline",
@@ -2252,20 +2436,20 @@ function LeadInfoPanel({
             disabled: isAnonymous,
             onClick: onBookAppointment,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.Plus, { className: "mr-1.5 size-3.5" }),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.Plus, { className: "mr-1.5 size-3.5" }),
               "Book Appointment"
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(PanelSection, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PanelSectionHeader, { children: "CRM Actions" }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Tooltip, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(PanelSection, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PanelSectionHeader, { children: "CRM Actions" }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Tooltip, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               TooltipTrigger,
               {
-                render: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                render: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                   Button,
                   {
                     variant: "outline",
@@ -2274,16 +2458,16 @@ function LeadInfoPanel({
                     disabled: addToContactsDisabled,
                     onClick: onAddToContacts,
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.UserPlus, { className: "mr-1.5 size-3.5" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.UserPlus, { className: "mr-1.5 size-3.5" }),
                       "Add to Contacts"
                     ]
                   }
                 )
               }
             ),
-            isKnownContact && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TooltipContent, { children: "Already in contacts" })
+            isKnownContact && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TooltipContent, { children: "Already in contacts" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
             Button,
             {
               variant: "outline",
@@ -2292,23 +2476,23 @@ function LeadInfoPanel({
               disabled: isAnonymous,
               onClick: onCreateOpportunity,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.Briefcase, { className: "mr-1.5 size-3.5" }),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.Briefcase, { className: "mr-1.5 size-3.5" }),
                 "Add to CRM"
               ]
             }
           )
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(PanelSection, { last: true, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "mb-2.5 flex items-center justify-between", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-overline text-muted-foreground", children: "Internal Notes" }),
-          notesSaveStatus === "saving" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-xs text-muted-foreground", children: "Saving..." }),
-          notesSaveStatus === "saved" && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "flex items-center gap-1 text-xs text-success-text", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.CheckCircle2, { className: "size-3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(PanelSection, { last: true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "mb-2.5 flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-overline text-muted-foreground", children: "Internal Notes" }),
+          notesSaveStatus === "saving" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-xs text-muted-foreground", children: "Saving..." }),
+          notesSaveStatus === "saved" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "flex items-center gap-1 text-xs text-success-text", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.CheckCircle2, { className: "size-3" }),
             "Saved"
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           Textarea,
           {
             value: internalNotes,
@@ -2324,7 +2508,7 @@ function LeadInfoPanel({
 }
 
 // src/components/ui/ai-conversations/index.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function ConversationsPage({
   conversations,
   activeConversationId,
@@ -2363,6 +2547,8 @@ function ConversationsPage({
   onSendEmail,
   onTakeOver,
   onLetAiHandle,
+  onAttachFile,
+  onAttachImage,
   emailReplySubject,
   onReopen,
   onMarkUrgent,
@@ -2392,12 +2578,12 @@ function ConversationsPage({
     onToggleLeadPanel == null ? void 0 : onToggleLeadPanel();
     setMobilePanel(showLeadPanel ? "chat" : "lead");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "div",
     {
       className: cn("flex h-full overflow-hidden bg-background", className),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           ConversationList,
           {
             conversations,
@@ -2419,7 +2605,7 @@ function ConversationsPage({
             )
           }
         ),
-        contact ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        contact ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           ChatThread,
           {
             contact,
@@ -2436,6 +2622,8 @@ function ConversationsPage({
             onSendEmail,
             onTakeOver,
             onLetAiHandle,
+            onAttachFile,
+            onAttachImage,
             emailReplySubject,
             onReopen,
             onMarkUrgent,
@@ -2453,21 +2641,21 @@ function ConversationsPage({
             )
           },
           contact.id
-        ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "div",
           {
             className: cn(
               "min-w-0 flex-1 items-center justify-center border-r border-border bg-muted/10",
               mobilePanel === "chat" ? "flex md:flex" : "hidden md:flex"
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col items-center gap-2 text-muted-foreground", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.MessageSquare, { className: "size-10 opacity-30" }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm", children: "Select a conversation" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col items-center gap-2 text-muted-foreground", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.MessageSquare, { className: "size-10 opacity-30" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-sm", children: "Select a conversation" })
             ] })
           }
         ),
-        contact && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        contact && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "div",
             {
               className: cn(
@@ -2475,7 +2663,7 @@ function ConversationsPage({
                 "md:block md:shrink-0 md:overflow-hidden md:transition-[width] md:duration-200 md:ease-in-out",
                 showLeadPanel ? "md:w-[320px]" : "md:w-0"
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 LeadInfoPanel,
                 {
                   contact,
@@ -2501,11 +2689,11 @@ function ConversationsPage({
               )
             }
           ),
-          !showLeadPanel && onToggleLeadPanel && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "hidden shrink-0 items-start border-l border-border pt-[29px] md:flex", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Tooltip, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          !showLeadPanel && onToggleLeadPanel && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "hidden shrink-0 items-start border-l border-border pt-[29px] md:flex", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Tooltip, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               TooltipTrigger,
               {
-                render: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                render: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   Button,
                   {
                     variant: "ghost",
@@ -2513,12 +2701,12 @@ function ConversationsPage({
                     className: "size-8",
                     "aria-label": "Show lead info",
                     onClick: handleToggleLeadPanel,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.ChevronLeft, { className: "size-4" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.ChevronLeft, { className: "size-4" })
                   }
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TooltipContent, { children: "Show lead info" })
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TooltipContent, { children: "Show lead info" })
           ] }) })
         ] })
       ]
@@ -2548,13 +2736,13 @@ function AiConvAssignAdvisorDialog({
       setRoleFilter("");
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DialogContent, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DialogHeader, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DialogTitle, { children: "Assign to advisor" }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DialogDescription, { children: "Choose an advisor to handle this conversation." })
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DialogContent, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DialogHeader, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DialogTitle, { children: "Assign to advisor" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DialogDescription, { children: "Choose an advisor to handle this conversation." })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col gap-0", children: [
-      roles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col gap-0", children: [
+      roles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
         ToggleGroup,
         {
           type: "single",
@@ -2567,14 +2755,14 @@ function AiConvAssignAdvisorDialog({
             setRoleFilter(!v || v === "__all__" ? "" : v);
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ToggleGroupItem, { value: "__all__", children: "All" }),
-            roles.map((role) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ToggleGroupItem, { value: role, children: role }, role))
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ToggleGroupItem, { value: "__all__", children: "All" }),
+            roles.map((role) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ToggleGroupItem, { value: role, children: role }, role))
           ]
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2 border border-input px-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.Search, { className: "size-4 shrink-0 text-muted-foreground" }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-2 border border-input px-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.Search, { className: "size-4 shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "input",
           {
             type: "text",
@@ -2585,7 +2773,7 @@ function AiConvAssignAdvisorDialog({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "max-h-52 overflow-y-auto border border-t-0 border-input", children: filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "py-6 text-center text-sm text-muted-foreground", children: "No advisors found." }) : filtered.map((advisor) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "max-h-52 overflow-y-auto border border-t-0 border-input", children: filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "py-6 text-center text-sm text-muted-foreground", children: "No advisors found." }) : filtered.map((advisor) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
         "button",
         {
           type: "button",
@@ -2595,19 +2783,19 @@ function AiConvAssignAdvisorDialog({
             value === advisor.id && "bg-muted font-medium"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Avatar, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AvatarFallback, { className: "font-semibold", children: advisor.initials }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "truncate text-sm", children: advisor.name }),
-              advisor.role && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "truncate text-xs text-muted-foreground", children: advisor.role })
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Avatar, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AvatarFallback, { className: "font-semibold", children: advisor.initials }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "truncate text-sm", children: advisor.name }),
+              advisor.role && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "truncate text-xs text-muted-foreground", children: advisor.role })
             ] })
           ]
         },
         advisor.id
       )) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DialogFooter, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { onClick: onConfirm, children: "Assign" })
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DialogFooter, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { onClick: onConfirm, children: "Assign" })
     ] })
   ] }) });
 }