@wealthx/shadcn 1.5.6 → 1.5.8

package/dist/{chunk-JTG5R5YV.mjs → chunk-54TRNCID.mjs}

@@ -4,13 +4,13 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger
-} from "./chunk-HNDTLT5X.mjs";
+} from "./chunk-H5DTKPJ2.mjs";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger
-} from "./chunk-6SR4K5T5.mjs";
+} from "./chunk-3S6KVFF5.mjs";
 import {
   Tabs,
   TabsList,
@@ -29,7 +29,7 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle
-} from "./chunk-NCUH54IZ.mjs";
+} from "./chunk-LI2CTS5O.mjs";
 import {
   Avatar,
   AvatarFallback
@@ -54,28 +54,34 @@ import {
 } from "./chunk-AFML43VJ.mjs";
 
 // src/components/ui/ai-conversations.tsx
-import { useState } from "react";
+import React, { useState } from "react";
 import {
   Archive,
   ArrowLeft,
+  Bold,
   Bot,
   Briefcase,
   Calendar,
   CheckCircle2,
   ChevronLeft,
   ChevronRight,
+  ChevronDown,
   Flag,
   HelpCircle,
+  Italic,
+  Link2,
   Lock,
   Mail,
   MapPin,
   MessageSquare,
   MoreHorizontal,
+  Paperclip,
   Phone,
   PhoneCall,
   Plus,
   Search,
   Send,
+  Underline,
   UserCheck,
   UserPlus,
   Video
@@ -154,6 +160,7 @@ function ConversationListItem({
             /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-foreground", children: displayContactName(data.contact.name) }),
             /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
               data.status === "needs-attention" && /* @__PURE__ */ jsx(Flag, { className: "size-3 text-warning-text" }),
+              data.channel === "email" ? /* @__PURE__ */ jsx(Mail, { className: "size-3 text-muted-foreground" }) : /* @__PURE__ */ jsx(MessageSquare, { className: "size-3 text-muted-foreground" }),
               /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap text-xs text-muted-foreground", children: data.timestamp })
             ] })
           ] }),
@@ -187,12 +194,14 @@ function ConversationListItem({
     }
   );
 }
-function filterConversations(conversations, query, filter) {
+function filterConversations(conversations, query, filter, channelFilter) {
   const q = query.toLowerCase();
   return conversations.filter((c) => {
+    var _a;
     const matchesFilter = filter === "all" || (filter === "open" ? c.status !== "closed" : c.status === filter);
+    const matchesChannel = channelFilter === "all" || ((_a = c.channel) != null ? _a : "chat") === channelFilter;
     const matchesSearch = !q || c.contact.name.toLowerCase().includes(q) || c.lastMessage.toLowerCase().includes(q);
-    return matchesFilter && matchesSearch;
+    return matchesFilter && matchesChannel && matchesSearch;
   });
 }
 var FILTER_TABS = [
@@ -207,15 +216,25 @@ function ConversationList({
   activeId,
   searchQuery = "",
   activeFilter = "all",
+  channelFilter: channelFilterProp = "all",
   hasMore,
   isLoadingMore,
   onSearchChange,
   onFilterChange,
+  onChannelFilterChange,
   onSelect,
   onRead,
   onLoadMore,
   className
 }) {
+  const [channelFilter, setChannelFilter] = useState(channelFilterProp);
+  function handleChannelFilterChange(vals) {
+    const v = vals[0];
+    if (v) {
+      setChannelFilter(v);
+      onChannelFilterChange == null ? void 0 : onChannelFilterChange(v);
+    }
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -225,18 +244,37 @@ function ConversationList({
       ),
       children: [
         /* @__PURE__ */ jsxs("div", { className: cn(PANEL_HEADER_HEIGHT, "flex shrink-0 flex-col"), children: [
-          /* @__PURE__ */ jsx("div", { className: "border-b border-border p-3 shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-            /* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" }),
-            /* @__PURE__ */ jsx(
-              Input,
+          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2 border-b border-border px-3 py-2.5", children: [
+            /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+              /* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  value: searchQuery,
+                  onChange: (e) => onSearchChange == null ? void 0 : onSearchChange(e.target.value),
+                  placeholder: "Search conversations...",
+                  className: "h-8 pl-8 text-sm"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(
+              ToggleGroup,
               {
-                value: searchQuery,
-                onChange: (e) => onSearchChange == null ? void 0 : onSearchChange(e.target.value),
-                placeholder: "Search conversations...",
-                className: "h-8 pl-8 text-sm"
+                type: "single",
+                variant: "outline",
+                size: "sm",
+                spacing: 0,
+                value: [channelFilter],
+                onValueChange: handleChannelFilterChange,
+                className: "shrink-0",
+                children: [
+                  /* @__PURE__ */ jsx(ToggleGroupItem, { value: "all", "aria-label": "All channels", children: "All" }),
+                  /* @__PURE__ */ jsx(ToggleGroupItem, { value: "chat", "aria-label": "Chat", children: /* @__PURE__ */ jsx(MessageSquare, { className: "size-3.5" }) }),
+                  /* @__PURE__ */ jsx(ToggleGroupItem, { value: "email", "aria-label": "Email", children: /* @__PURE__ */ jsx(Mail, { className: "size-3.5" }) })
+                ]
               }
             )
-          ] }) }),
+          ] }),
           /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center border-b border-border", children: /* @__PURE__ */ jsx(
             Tabs,
             {
@@ -266,7 +304,8 @@ function ConversationList({
           const filtered = filterConversations(
             conversations,
             searchQuery,
-            activeFilter
+            activeFilter,
+            channelFilter
           );
           return filtered.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2 p-8 text-muted-foreground", children: [
             /* @__PURE__ */ jsx(MessageSquare, { className: "size-8 opacity-30" }),
@@ -383,6 +422,9 @@ function ChatBubble({ message, className }) {
 }
 function ChatComposer({
   mode,
+  channel: channelProp = "chat",
+  onChannelChange,
+  contactEmail = "",
   inputValue = "",
   onInputChange,
   onSend,
@@ -390,68 +432,234 @@ function ChatComposer({
   onLetAiHandle,
   className
 }) {
-  if (mode === "ai") {
-    return /* @__PURE__ */ jsxs(
-      "div",
+  const [channel, setChannel] = React.useState(channelProp);
+  const [emailTo, setEmailTo] = React.useState(contactEmail);
+  const [emailCc, setEmailCc] = React.useState("");
+  const [showCc, setShowCc] = React.useState(false);
+  const [emailSubject, setEmailSubject] = React.useState("");
+  const [bold, setBold] = React.useState(false);
+  const [italic, setItalic] = React.useState(false);
+  const [underline, setUnderline] = React.useState(false);
+  const handleChannelChange = (c) => {
+    setChannel(c);
+    onChannelChange == null ? void 0 : onChannelChange(c);
+  };
+  function ToolbarButton({
+    label,
+    icon: Icon,
+    pressed,
+    onToggle
+  }) {
+    return /* @__PURE__ */ jsx(
+      "button",
       {
+        type: "button",
+        "aria-label": label,
+        "aria-pressed": pressed,
+        onClick: onToggle,
         className: cn(
-          "flex items-center gap-2 border-t border-border bg-muted/30 px-4 py-2.5 text-[12px] text-muted-foreground",
-          className
+          "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__ */ jsx(Bot, { className: "size-3.5 shrink-0 text-muted-foreground" }),
-          /* @__PURE__ */ jsx("span", { children: "AI is handling this conversation." }),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "link",
-              size: "sm",
-              className: "h-auto p-0 text-[12px] font-medium text-foreground",
-              onClick: onTakeOver,
-              children: "Take Over"
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { children: "to reply directly." })
-        ]
+        children: /* @__PURE__ */ jsx(Icon, { className: "size-3.5" })
       }
     );
   }
+  function EmailFieldRow({
+    label,
+    children
+  }) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-b border-border px-4 py-2.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "w-14 shrink-0 text-sm text-muted-foreground", children: label }),
+      children
+    ] });
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        "flex flex-col gap-2 border-t border-border bg-background p-3",
+        "flex flex-col border-t border-border bg-background",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx(
-          Textarea,
+        /* @__PURE__ */ jsx("div", { className: "border-b border-border px-3 py-2", children: /* @__PURE__ */ jsx(
+          Tabs,
           {
-            value: inputValue,
-            onChange: (e) => onInputChange == null ? void 0 : onInputChange(e.target.value),
-            placeholder: "Reply to lead...",
-            rows: 3,
-            className: "resize-none text-sm"
+            value: channel,
+            onValueChange: (v) => v && handleChannelChange(v),
+            children: /* @__PURE__ */ jsxs(TabsList, { variant: "default", className: "w-full", children: [
+              /* @__PURE__ */ jsxs(TabsTrigger, { value: "chat", className: "flex-1 gap-1.5", children: [
+                /* @__PURE__ */ jsx(MessageSquare, { className: "size-3.5" }),
+                "Chat"
+              ] }),
+              /* @__PURE__ */ jsxs(TabsTrigger, { value: "email", className: "flex-1 gap-1.5", children: [
+                /* @__PURE__ */ jsx(Mail, { className: "size-3.5" }),
+                "Email"
+              ] })
+            ] })
           }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: onLetAiHandle, children: [
-            /* @__PURE__ */ jsx(Bot, { className: "mr-1.5 size-3.5" }),
-            "Let AI Handle"
-          ] }),
-          /* @__PURE__ */ jsxs(
+        ) }),
+        mode === "ai" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 bg-muted/30 px-4 py-2.5 text-[12px] text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(Bot, { className: "size-3.5 shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ jsx("span", { children: "AI is handling this conversation." }),
+          /* @__PURE__ */ jsx(
             Button,
             {
+              variant: "link",
               size: "sm",
-              onClick: () => onSend == null ? void 0 : onSend(inputValue),
-              disabled: !inputValue.trim(),
-              children: [
-                /* @__PURE__ */ jsx(Send, { className: "mr-1.5 size-3.5" }),
-                "Send"
-              ]
+              className: "h-auto p-0 text-[12px] font-medium text-foreground",
+              onClick: onTakeOver,
+              children: "Take Over"
             }
-          )
-        ] })
+          ),
+          /* @__PURE__ */ 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__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col",
+                  channel !== "email" && "invisible pointer-events-none"
+                ),
+                "aria-hidden": channel !== "email",
+                children: [
+                  /* @__PURE__ */ jsxs(EmailFieldRow, { label: "To", children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "email",
+                        value: emailTo,
+                        onChange: (e) => setEmailTo(e.target.value),
+                        placeholder: "Recipient email",
+                        className: "min-w-0 flex-1 bg-transparent text-base text-foreground outline-none placeholder:text-muted-foreground"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setShowCc((v) => !v),
+                        className: "flex shrink-0 items-center gap-0.5 text-sm text-muted-foreground hover:text-foreground",
+                        children: [
+                          "CC",
+                          /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5" })
+                        ]
+                      }
+                    )
+                  ] }),
+                  showCc && /* @__PURE__ */ jsx(EmailFieldRow, { label: "CC", children: /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "email",
+                      value: emailCc,
+                      onChange: (e) => setEmailCc(e.target.value),
+                      placeholder: "CC email",
+                      className: "min-w-0 flex-1 bg-transparent text-base text-foreground outline-none placeholder:text-muted-foreground"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(EmailFieldRow, { label: "Subject", children: /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "text",
+                      value: emailSubject,
+                      onChange: (e) => setEmailSubject(e.target.value),
+                      placeholder: "Email subject",
+                      className: "min-w-0 flex-1 bg-transparent text-base text-foreground outline-none placeholder:text-muted-foreground"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(
+                    Textarea,
+                    {
+                      value: inputValue,
+                      onChange: (e) => onInputChange == null ? void 0 : onInputChange(e.target.value),
+                      placeholder: "Write your email...",
+                      rows: 6,
+                      className: "resize-y border-0 px-4 py-3 text-base shadow-none focus-visible:ring-0"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-t border-border px-3 py-2", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
+                      /* @__PURE__ */ jsx(
+                        ToolbarButton,
+                        {
+                          label: "Bold",
+                          icon: Bold,
+                          pressed: bold,
+                          onToggle: () => setBold((v) => !v)
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        ToolbarButton,
+                        {
+                          label: "Italic",
+                          icon: Italic,
+                          pressed: italic,
+                          onToggle: () => setItalic((v) => !v)
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        ToolbarButton,
+                        {
+                          label: "Underline",
+                          icon: Underline,
+                          pressed: underline,
+                          onToggle: () => setUnderline((v) => !v)
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "mx-1.5 h-4" }),
+                      /* @__PURE__ */ jsx(ToolbarButton, { label: "Link", icon: Link2 }),
+                      /* @__PURE__ */ jsx(ToolbarButton, { label: "Attach file", icon: Paperclip })
+                    ] }),
+                    /* @__PURE__ */ jsxs(
+                      Button,
+                      {
+                        size: "sm",
+                        onClick: () => onSend == null ? void 0 : onSend(inputValue),
+                        disabled: !inputValue.trim() || !emailTo.trim(),
+                        children: [
+                          /* @__PURE__ */ jsx(Send, { className: "mr-1.5 size-3.5" }),
+                          "Send Email"
+                        ]
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
+            channel === "chat" && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col gap-3 p-4", children: [
+              /* @__PURE__ */ jsx(
+                Textarea,
+                {
+                  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"
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: onLetAiHandle, children: [
+                  /* @__PURE__ */ jsx(Bot, { className: "mr-1.5 size-3.5" }),
+                  "Let AI Handle"
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    size: "sm",
+                    onClick: () => onSend == null ? void 0 : onSend(inputValue),
+                    disabled: !inputValue.trim(),
+                    children: [
+                      /* @__PURE__ */ jsx(Send, { className: "mr-1.5 size-3.5" }),
+                      "Send"
+                    ]
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        )
       ]
     }
   );
@@ -462,6 +670,8 @@ function ChatThread({
   mode,
   messages,
   isAiTyping = false,
+  channel,
+  onChannelChange,
   inputValue,
   onInputChange,
   onSend,
@@ -605,6 +815,9 @@ function ChatThread({
       ChatComposer,
       {
         mode,
+        channel,
+        onChannelChange,
+        contactEmail: contact.email,
         inputValue,
         onInputChange,
         onSend,
@@ -722,6 +935,7 @@ function LeadInfoPanel({
   contact,
   firstSeen,
   source = "Website Chatbot",
+  topic,
   aiFields = [],
   appointment,
   internalNotes = "",
@@ -799,7 +1013,8 @@ function LeadInfoPanel({
           /* @__PURE__ */ jsx(ContactAvatar, { name: contact.name, size: "lg" }),
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
             /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-semibold text-foreground", children: displayContactName(contact.name) }),
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: source })
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: source }),
+            topic && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "mt-1 text-xs", children: topic })
           ] })
         ] }),
         (contact.email || contact.phone || firstSeen) && /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-col gap-1.5", children: [
@@ -949,8 +1164,13 @@ function ConversationsPage({
   appointment,
   leadFirstSeen,
   leadSource,
+  leadTopic,
   searchQuery,
   activeFilter,
+  channelFilter,
+  onChannelFilterChange,
+  channel,
+  onChannelChange,
   inputValue,
   internalNotes,
   showLeadPanel = true,
@@ -1006,10 +1226,12 @@ function ConversationsPage({
             activeId: activeConversationId,
             searchQuery,
             activeFilter,
+            channelFilter,
             hasMore,
             isLoadingMore,
             onSearchChange,
             onFilterChange,
+            onChannelFilterChange,
             onSelect: handleSelectConversation,
             onRead,
             onLoadMore,
@@ -1028,6 +1250,8 @@ function ConversationsPage({
             mode,
             messages,
             isAiTyping,
+            channel,
+            onChannelChange,
             inputValue,
             onInputChange,
             onSend,
@@ -1044,7 +1268,8 @@ function ConversationsPage({
               "min-w-0 flex-1 border-r border-border",
               mobilePanel === "chat" ? "flex flex-col md:flex" : "hidden md:flex"
             )
-          }
+          },
+          contact.id
         ) : /* @__PURE__ */ jsx(
           "div",
           {
@@ -1075,6 +1300,7 @@ function ConversationsPage({
                   contact,
                   firstSeen: leadFirstSeen,
                   source: leadSource,
+                  topic: leadTopic,
                   aiFields,
                   appointment,
                   internalNotes,

package/dist/{chunk-KCKYGQVQ.mjs → chunk-5DAQU3B6.mjs}

@@ -10,7 +10,7 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle
-} from "./chunk-BD3DWDT4.mjs";
+} from "./chunk-CEYEK3TI.mjs";
 
 // src/components/ui/delete-contact-component.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/{chunk-CKPEFZNH.mjs → chunk-5LZZYODG.mjs}

@@ -17,14 +17,14 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue
-} from "./chunk-TAX3KL66.mjs";
+} from "./chunk-USOVLDGS.mjs";
 import {
   Dialog,
   DialogContent,
   DialogFooter,
   DialogHeader,
   DialogTitle
-} from "./chunk-NCUH54IZ.mjs";
+} from "./chunk-LI2CTS5O.mjs";
 import {
   Label
 } from "./chunk-P7CEBZM6.mjs";

package/dist/{chunk-2A53WPEC.mjs → chunk-5YVJSKFH.mjs}

@@ -7,7 +7,7 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue
-} from "./chunk-TAX3KL66.mjs";
+} from "./chunk-USOVLDGS.mjs";
 import {
   Spinner
 } from "./chunk-JVMXMFBB.mjs";
@@ -17,7 +17,7 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle
-} from "./chunk-NCUH54IZ.mjs";
+} from "./chunk-LI2CTS5O.mjs";
 import {
   Label
 } from "./chunk-P7CEBZM6.mjs";

package/dist/{chunk-JUBUN65Q.mjs → chunk-5YWUGE6F.mjs}

@@ -3,7 +3,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger
-} from "./chunk-HNDTLT5X.mjs";
+} from "./chunk-H5DTKPJ2.mjs";
 import {
   cn
 } from "./chunk-AFML43VJ.mjs";