@wealthx/shadcn 1.3.2 → 1.3.4

package/dist/chunk-OLKMCXAR.mjs

@@ -0,0 +1,1219 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "./chunk-UALR6JGV.mjs";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "./chunk-RSUIPKGX.mjs";
+import {
+  ToggleGroup,
+  ToggleGroupItem
+} from "./chunk-OWFQSXVD.mjs";
+import {
+  Avatar,
+  AvatarFallback
+} from "./chunk-H6NQTIF4.mjs";
+import {
+  Textarea
+} from "./chunk-BS75ICOO.mjs";
+import {
+  Badge
+} from "./chunk-WL6WVV47.mjs";
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger
+} from "./chunk-WE4YKBDE.mjs";
+import {
+  Separator
+} from "./chunk-2GIYVERS.mjs";
+import {
+  Input
+} from "./chunk-LBTHZSBT.mjs";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "./chunk-P2N2PEFY.mjs";
+import {
+  Button,
+  buttonVariants
+} from "./chunk-NOOEKOWY.mjs";
+import {
+  cn,
+  getInitials
+} from "./chunk-AFML43VJ.mjs";
+
+// src/components/ui/ai-conversations.tsx
+import { useState } from "react";
+import {
+  Archive,
+  ArrowLeft,
+  Bot,
+  Briefcase,
+  Calendar,
+  CheckCircle2,
+  ChevronLeft,
+  ChevronRight,
+  Flag,
+  HelpCircle,
+  Lock,
+  Mail,
+  MapPin,
+  MessageSquare,
+  MoreHorizontal,
+  Phone,
+  PhoneCall,
+  Plus,
+  Search,
+  Send,
+  UserCheck,
+  UserPlus,
+  Video
+} from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function displayContactName(name) {
+  return name.trim() || "Website User";
+}
+var PANEL_HEADER_HEIGHT = "h-[94px]";
+var APPOINTMENT_STATUS_LABEL = {
+  requested: "Lead requested",
+  confirmed: "Confirmed",
+  pending: "Pending confirmation",
+  cancelled: "Cancelled"
+};
+var STATUS_CONFIG = {
+  "ai-active": {
+    label: "AI Active",
+    variant: "success",
+    dotClass: "bg-success"
+  },
+  manual: {
+    label: "Manual",
+    variant: "default",
+    dotClass: "bg-primary"
+  },
+  "needs-attention": {
+    label: "Needs Attention",
+    variant: "warning",
+    dotClass: "bg-warning"
+  },
+  closed: {
+    label: "Closed",
+    variant: "secondary",
+    dotClass: "bg-muted-foreground/50"
+  }
+};
+function ConversationStatusChip({
+  status,
+  showDot = false,
+  className
+}) {
+  const { label, variant, dotClass } = STATUS_CONFIG[status];
+  return /* @__PURE__ */ jsxs(Badge, { variant, className, children: [
+    showDot && /* @__PURE__ */ jsx("span", { className: cn("size-1.5 shrink-0 rounded-full", dotClass) }),
+    label
+  ] });
+}
+function ContactAvatar({ name, size = "md", className }) {
+  const avatarSize = size === "sm" ? "sm" : size === "lg" ? "lg" : "default";
+  return /* @__PURE__ */ jsx(Avatar, { size: avatarSize, className, children: /* @__PURE__ */ jsx(AvatarFallback, { className: "font-semibold", children: getInitials(name) }) });
+}
+function ConversationListItem({
+  data,
+  isActive,
+  onClick,
+  onRead
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        onClick == null ? void 0 : onClick(data.id);
+        onRead == null ? void 0 : onRead(data.id);
+      },
+      className: cn(
+        "w-full flex items-start gap-3 px-3 py-3 text-left transition-colors",
+        "border-b border-border last:border-b-0",
+        isActive ? "bg-muted" : "hover:bg-muted/40"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(ContactAvatar, { name: data.contact.name }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between gap-2", children: [
+            /* @__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" }),
+              /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap text-xs text-muted-foreground", children: data.timestamp })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mb-1.5 flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx(ConversationStatusChip, { status: data.status, showDot: true }),
+              data.assignedTo && /* @__PURE__ */ jsxs("span", { className: "truncate text-xs text-muted-foreground", children: [
+                "\u2192 ",
+                data.assignedTo
+              ] })
+            ] }),
+            data.unreadCount ? /* @__PURE__ */ jsx(
+              Badge,
+              {
+                variant: "default",
+                className: "size-4 shrink-0 justify-center px-0 text-[10px]",
+                children: data.unreadCount
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsxs("p", { className: "line-clamp-2 text-sm leading-relaxed text-muted-foreground", children: [
+            data.lastMessageRole === "bot" ? /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground/60", children: "AI: " }) : data.lastMessageRole === "advisor" ? /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground/60", children: "You: " }) : data.lastMessageRole === "visitor" ? /* @__PURE__ */ jsxs("span", { className: "font-medium text-foreground/60", children: [
+              displayContactName(data.contact.name).split(" ")[0],
+              ":",
+              " "
+            ] }) : null,
+            data.lastMessage
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function filterConversations(conversations, query, filter) {
+  const q = query.toLowerCase();
+  return conversations.filter((c) => {
+    const matchesFilter = filter === "all" || (filter === "open" ? c.status !== "closed" : c.status === filter);
+    const matchesSearch = !q || c.contact.name.toLowerCase().includes(q) || c.lastMessage.toLowerCase().includes(q);
+    return matchesFilter && matchesSearch;
+  });
+}
+var FILTER_TABS = [
+  { id: "all", label: "All" },
+  { id: "open", label: "Open" },
+  { id: "ai-active", label: "AI Active" },
+  { id: "needs-attention", label: "Urgent" },
+  { id: "closed", label: "Archived" }
+];
+function ConversationList({
+  conversations,
+  activeId,
+  searchQuery = "",
+  activeFilter = "all",
+  hasMore,
+  isLoadingMore,
+  onSearchChange,
+  onFilterChange,
+  onSelect,
+  onRead,
+  onLoadMore,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col border-r border-border bg-background",
+        className
+      ),
+      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,
+              {
+                value: searchQuery,
+                onChange: (e) => onSearchChange == null ? void 0 : onSearchChange(e.target.value),
+                placeholder: "Search conversations...",
+                className: "h-8 pl-8 text-sm"
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center border-b border-border", children: /* @__PURE__ */ jsx(
+            Tabs,
+            {
+              value: activeFilter,
+              onValueChange: (v) => v && (onFilterChange == null ? void 0 : onFilterChange(v)),
+              className: "w-full",
+              children: /* @__PURE__ */ jsx(
+                TabsList,
+                {
+                  variant: "line",
+                  className: "w-full justify-start gap-0 h-auto",
+                  children: FILTER_TABS.map((tab) => /* @__PURE__ */ jsx(
+                    TabsTrigger,
+                    {
+                      value: tab.id,
+                      className: "flex-none px-3 py-2 text-xs",
+                      children: tab.label
+                    },
+                    tab.id
+                  ))
+                }
+              )
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", tabIndex: 0, children: (() => {
+          const filtered = filterConversations(
+            conversations,
+            searchQuery,
+            activeFilter
+          );
+          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" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No conversations" }),
+            searchQuery && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                onClick: () => onSearchChange == null ? void 0 : onSearchChange(""),
+                children: "Clear search"
+              }
+            ),
+            !searchQuery && activeFilter !== "all" && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                onClick: () => onFilterChange == null ? void 0 : onFilterChange("all"),
+                children: "Clear filter"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            filtered.map((item) => /* @__PURE__ */ jsx(
+              ConversationListItem,
+              {
+                data: item,
+                isActive: activeId === item.id,
+                onClick: onSelect,
+                onRead
+              },
+              item.id
+            )),
+            hasMore && /* @__PURE__ */ jsx("div", { className: "border-t border-border p-3", children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                className: "w-full",
+                disabled: isLoadingMore,
+                onClick: onLoadMore,
+                children: isLoadingMore ? "Loading..." : "Load more"
+              }
+            ) })
+          ] });
+        })() })
+      ]
+    }
+  );
+}
+function BubbleAvatar({
+  role,
+  senderName
+}) {
+  if (role === "bot") {
+    return /* @__PURE__ */ jsx(Avatar, { size: "sm", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "border border-border bg-muted", children: /* @__PURE__ */ jsx(Bot, { className: "size-3.5 text-muted-foreground" }) }) });
+  }
+  if (role === "advisor") {
+    return /* @__PURE__ */ jsx(Avatar, { size: "sm", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "font-semibold", children: getInitials(senderName != null ? senderName : "Advisor") }) });
+  }
+  return /* @__PURE__ */ jsx(Avatar, { size: "sm", children: /* @__PURE__ */ jsx(AvatarFallback, { children: getInitials(senderName != null ? senderName : "?") }) });
+}
+function ChatBubble({ message, className }) {
+  const { role, content, timestamp, senderName } = message;
+  if (role === "system") {
+    return /* @__PURE__ */ jsxs("div", { className: cn("my-2 flex items-center gap-3 px-2", className), children: [
+      /* @__PURE__ */ jsx(Separator, { className: "flex-1" }),
+      /* @__PURE__ */ jsx("span", { className: "shrink-0 text-caption text-muted-foreground", children: content }),
+      /* @__PURE__ */ jsx(Separator, { className: "flex-1" })
+    ] });
+  }
+  const isAdvisor = role === "advisor";
+  const isBot = role === "bot";
+  const isVisitor = role === "visitor";
+  const displayName = isBot ? "AI Assistant" : isAdvisor ? senderName != null ? senderName : "Advisor" : senderName != null ? senderName : "Lead";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex gap-2.5",
+        isAdvisor ? "flex-row-reverse" : "flex-row",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(BubbleAvatar, { role, senderName }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex max-w-[70%] flex-col gap-1",
+              isAdvisor && "items-end"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "text-caption text-muted-foreground", children: displayName }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "px-3 py-2 text-sm leading-relaxed",
+                    isBot && "border border-border bg-muted/60 text-foreground",
+                    isVisitor && "border border-border bg-background text-foreground",
+                    isAdvisor && "bg-primary text-primary-foreground"
+                  ),
+                  children: content
+                }
+              ),
+              timestamp && /* @__PURE__ */ jsx("span", { className: "text-caption text-muted-foreground", children: timestamp })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function ChatComposer({
+  mode,
+  inputValue = "",
+  onInputChange,
+  onSend,
+  onTakeOver,
+  onLetAiHandle,
+  className
+}) {
+  if (mode === "ai") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        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
+        ),
+        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." })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-2 border-t border-border bg-background p-3",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            value: inputValue,
+            onChange: (e) => onInputChange == null ? void 0 : onInputChange(e.target.value),
+            placeholder: "Reply to lead...",
+            rows: 3,
+            className: "resize-none text-sm"
+          }
+        ),
+        /* @__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"
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function ChatThread({
+  contact,
+  status,
+  mode,
+  messages,
+  isAiTyping = false,
+  inputValue,
+  onInputChange,
+  onSend,
+  onTakeOver,
+  onLetAiHandle,
+  onReopen,
+  onMarkUrgent,
+  onUnmarkUrgent,
+  onArchive,
+  onAssignToAdvisor,
+  onBack,
+  onShowLeadInfo,
+  className
+}) {
+  const aiIsHandling = mode === "ai";
+  const isClosed = status === "closed";
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col bg-background", className), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          PANEL_HEADER_HEIGHT,
+          "flex items-center gap-3 border-b border-border px-4"
+        ),
+        children: [
+          onBack && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "size-8 shrink-0 md:hidden",
+              onClick: onBack,
+              "aria-label": "Back to conversations",
+              children: /* @__PURE__ */ jsx(ArrowLeft, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(ContactAvatar, { name: contact.name, size: "md" }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", children: displayContactName(contact.name) }),
+              /* @__PURE__ */ jsx(ConversationStatusChip, { status, showDot: true })
+            ] }),
+            contact.email && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: contact.email })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "hidden items-center gap-2 md:flex", children: [
+              isClosed && /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: onReopen, children: "Reopen" }),
+              !isClosed && aiIsHandling && /* @__PURE__ */ jsx(Button, { size: "sm", onClick: onTakeOver, children: "Take Over" }),
+              !isClosed && !aiIsHandling && /* @__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(DropdownMenu, { children: [
+              /* @__PURE__ */ jsx(
+                DropdownMenuTrigger,
+                {
+                  className: cn(
+                    buttonVariants({ variant: "ghost", size: "icon" }),
+                    "size-8"
+                  ),
+                  "aria-label": "More actions",
+                  children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ jsxs(DropdownMenuContent, { children: [
+                onShowLeadInfo && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsxs(
+                    DropdownMenuItem,
+                    {
+                      className: "md:hidden",
+                      onClick: onShowLeadInfo,
+                      children: [
+                        /* @__PURE__ */ jsx(ChevronRight, { className: "mr-2 size-4" }),
+                        "Lead Info"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(DropdownMenuSeparator, { className: "md:hidden" })
+                ] }),
+                status === "needs-attention" ? /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: onUnmarkUrgent, children: [
+                  /* @__PURE__ */ jsx(Flag, { className: "mr-2 size-4" }),
+                  "Unmark Urgent"
+                ] }) : /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: onMarkUrgent, children: [
+                  /* @__PURE__ */ jsx(Flag, { className: "mr-2 size-4" }),
+                  "Mark as Urgent"
+                ] }),
+                /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: onAssignToAdvisor, children: [
+                  /* @__PURE__ */ jsx(UserCheck, { className: "mr-2 size-4" }),
+                  "Assign to advisor"
+                ] }),
+                /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+                /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: onArchive, children: [
+                  /* @__PURE__ */ jsx(Archive, { className: "mr-2 size-4" }),
+                  "Archive"
+                ] })
+              ] })
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex flex-1 flex-col gap-4 overflow-y-auto p-4",
+        tabIndex: 0,
+        children: [
+          messages.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-2 text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(MessageSquare, { className: "size-8 opacity-30" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No messages yet" })
+          ] }) : messages.map((msg) => /* @__PURE__ */ jsx(ChatBubble, { message: msg }, msg.id)),
+          isAiTyping && !isClosed && /* @__PURE__ */ jsxs("div", { className: "flex gap-2.5", children: [
+            /* @__PURE__ */ jsx(BubbleAvatar, { role: "bot" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-caption text-muted-foreground", children: "AI Assistant" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 border border-border bg-muted/60 px-3 py-2.5", children: [
+                /* @__PURE__ */ jsx("span", { className: "size-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:0ms]" }),
+                /* @__PURE__ */ jsx("span", { className: "size-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:150ms]" }),
+                /* @__PURE__ */ jsx("span", { className: "size-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:300ms]" })
+              ] })
+            ] })
+          ] })
+        ]
+      }
+    ),
+    isClosed ? /* @__PURE__ */ 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__ */ jsx(Lock, { className: "size-3.5 shrink-0" }),
+      /* @__PURE__ */ jsx("span", { children: "This conversation is closed." }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          className: "ml-auto",
+          onClick: onReopen,
+          children: "Reopen"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx(
+      ChatComposer,
+      {
+        mode,
+        inputValue,
+        onInputChange,
+        onSend,
+        onTakeOver,
+        onLetAiHandle
+      }
+    )
+  ] });
+}
+function AICollectedDataSection({
+  fields,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col", className), children: fields.map((field, i) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex items-center justify-between gap-2 border-b border-border/40 py-1.5 last:border-b-0",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "shrink-0 text-sm text-muted-foreground", children: field.label }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-right text-sm font-medium text-foreground", children: field.value }),
+          field.confidence === "confirmed" ? /* @__PURE__ */ jsx(CheckCircle2, { className: "size-3 shrink-0 text-success-text" }) : /* @__PURE__ */ jsx(HelpCircle, { className: "size-3 shrink-0 text-warning-text" })
+        ] })
+      ]
+    },
+    i
+  )) });
+}
+var MEETING_ICON = {
+  video: Video,
+  phone: Phone,
+  "in-person": MapPin
+};
+var MEETING_LABEL = {
+  video: "Video Call",
+  phone: "Phone Call",
+  "in-person": "In Person"
+};
+function AppointmentSection({
+  appointment,
+  contactId,
+  isAnonymous,
+  onApproveAppointment,
+  onDeclineAppointment,
+  onRescheduleAppointment
+}) {
+  const AppointmentIcon = MEETING_ICON[appointment.meetingType];
+  const canReschedule = !isAnonymous && !!onRescheduleAppointment;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Calendar, { className: "size-3.5 shrink-0 text-muted-foreground" }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: appointment.datetime })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(AppointmentIcon, { className: "size-4 shrink-0 text-muted-foreground" }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: MEETING_LABEL[appointment.meetingType] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn("text-sm font-medium", {
+          "text-warning-text": appointment.status === "requested",
+          "text-success-text": appointment.status === "confirmed",
+          "text-muted-foreground": appointment.status === "pending",
+          "text-destructive line-through": appointment.status === "cancelled"
+        }),
+        children: APPOINTMENT_STATUS_LABEL[appointment.status]
+      }
+    ),
+    appointment.status === "requested" && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 pt-1", children: [
+      /* @__PURE__ */ jsx(Button, { size: "sm", className: "flex-1", onClick: onApproveAppointment, children: "Approve" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          className: "flex-1",
+          onClick: onDeclineAppointment,
+          children: "Decline"
+        }
+      ),
+      canReschedule && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          className: "flex-1",
+          onClick: () => onRescheduleAppointment(contactId),
+          children: "Reschedule"
+        }
+      )
+    ] }),
+    (appointment.status === "confirmed" || appointment.status === "cancelled") && canReschedule && /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        className: "mt-1 w-full justify-start",
+        onClick: () => onRescheduleAppointment(contactId),
+        children: "Reschedule"
+      }
+    )
+  ] });
+}
+function PanelSectionHeader({ children }) {
+  return /* @__PURE__ */ jsx("p", { className: "mb-2.5 text-overline text-muted-foreground", children });
+}
+function PanelSection({
+  children,
+  last = false
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("px-4 py-4", !last && "border-b border-border"), children });
+}
+function LeadInfoPanel({
+  contact,
+  firstSeen,
+  source = "Website Chatbot",
+  aiFields = [],
+  appointment,
+  internalNotes = "",
+  notesSaveStatus = "idle",
+  isCollapsed = false,
+  isKnownContact = false,
+  onAddToContacts,
+  onCreateOpportunity,
+  onBookAppointment,
+  onApproveAppointment,
+  onDeclineAppointment,
+  onRescheduleAppointment,
+  onNotesChange,
+  onToggleCollapse,
+  onBack,
+  className
+}) {
+  const isAnonymous = !contact.name.trim();
+  const addToContactsDisabled = isAnonymous || isKnownContact;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col bg-background", className), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          PANEL_HEADER_HEIGHT,
+          "flex items-center justify-between border-b border-border px-4"
+        ),
+        children: [
+          onBack && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "size-8 shrink-0 md:hidden",
+              onClick: onBack,
+              "aria-label": "Back to conversation",
+              children: /* @__PURE__ */ jsx(ArrowLeft, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", children: "Lead Info" }),
+          onToggleCollapse && /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(
+              TooltipTrigger,
+              {
+                render: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "size-7",
+                    onClick: onToggleCollapse,
+                    "aria-label": isCollapsed ? "Expand panel" : "Collapse panel",
+                    children: /* @__PURE__ */ jsx(
+                      ChevronRight,
+                      {
+                        className: cn(
+                          "size-4 transition-transform duration-150",
+                          isCollapsed && "-rotate-180"
+                        )
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(TooltipContent, { children: isCollapsed ? "Expand panel" : "Collapse panel" })
+          ] })
+        ]
+      }
+    ),
+    !isCollapsed && /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto", tabIndex: 0, children: [
+      /* @__PURE__ */ jsxs(PanelSection, { children: [
+        /* @__PURE__ */ jsx(PanelSectionHeader, { children: "Contact" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__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 })
+          ] })
+        ] }),
+        (contact.email || contact.phone || firstSeen) && /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-col gap-1.5", children: [
+          contact.email && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Mail, { className: "size-4 shrink-0" }),
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: `mailto:${contact.email}`,
+                className: "truncate hover:underline",
+                children: contact.email
+              }
+            )
+          ] }),
+          contact.phone && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(PhoneCall, { className: "size-4 shrink-0" }),
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: `tel:${contact.phone}`,
+                className: "hover:underline",
+                children: contact.phone
+              }
+            )
+          ] }),
+          firstSeen && /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+            "First seen: ",
+            firstSeen
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(PanelSection, { children: [
+        /* @__PURE__ */ jsx(PanelSectionHeader, { children: "AI-Collected Data" }),
+        aiFields.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(AICollectedDataSection, { fields: aiFields }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-2.5 flex items-center gap-3 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(CheckCircle2, { className: "size-3 text-success-text" }),
+              "confirmed"
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(HelpCircle, { className: "size-3 text-warning-text" }),
+              "estimated"
+            ] })
+          ] })
+        ] }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "AI is still gathering information..." })
+      ] }),
+      /* @__PURE__ */ jsxs(PanelSection, { children: [
+        /* @__PURE__ */ jsx(PanelSectionHeader, { children: "Appointment" }),
+        appointment ? /* @__PURE__ */ jsx(
+          AppointmentSection,
+          {
+            appointment,
+            contactId: contact.id,
+            isAnonymous,
+            onApproveAppointment,
+            onDeclineAppointment,
+            onRescheduleAppointment
+          }
+        ) : /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            className: "w-full justify-start",
+            disabled: isAnonymous,
+            onClick: onBookAppointment,
+            children: [
+              /* @__PURE__ */ jsx(Plus, { className: "mr-1.5 size-3.5" }),
+              "Book Appointment"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(PanelSection, { children: [
+        /* @__PURE__ */ jsx(PanelSectionHeader, { children: "CRM Actions" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(
+              TooltipTrigger,
+              {
+                render: /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "sm",
+                    className: "w-full justify-start",
+                    disabled: addToContactsDisabled,
+                    onClick: onAddToContacts,
+                    children: [
+                      /* @__PURE__ */ jsx(UserPlus, { className: "mr-1.5 size-3.5" }),
+                      "Add to Contacts"
+                    ]
+                  }
+                )
+              }
+            ),
+            isKnownContact && /* @__PURE__ */ jsx(TooltipContent, { children: "Already in contacts" })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              className: "w-full justify-start",
+              disabled: isAnonymous,
+              onClick: onCreateOpportunity,
+              children: [
+                /* @__PURE__ */ jsx(Briefcase, { className: "mr-1.5 size-3.5" }),
+                "Add to CRM"
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(PanelSection, { last: true, children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-2.5 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-overline text-muted-foreground", children: "Internal Notes" }),
+          notesSaveStatus === "saving" && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Saving..." }),
+          notesSaveStatus === "saved" && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-xs text-success-text", children: [
+            /* @__PURE__ */ jsx(CheckCircle2, { className: "size-3" }),
+            "Saved"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            value: internalNotes,
+            onChange: (e) => onNotesChange == null ? void 0 : onNotesChange(e.target.value),
+            placeholder: "Private notes \u2014 not visible to lead...",
+            rows: 4,
+            className: "resize-none text-sm"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function ConversationsPage({
+  conversations,
+  activeConversationId,
+  contact,
+  status = "ai-active",
+  mode = "ai",
+  messages = [],
+  aiFields = [],
+  appointment,
+  leadFirstSeen,
+  leadSource,
+  searchQuery,
+  activeFilter,
+  inputValue,
+  internalNotes,
+  showLeadPanel = true,
+  hasMore,
+  isLoadingMore,
+  isAiTyping,
+  notesSaveStatus,
+  onSelectConversation,
+  onRead,
+  onSearchChange,
+  onFilterChange,
+  onInputChange,
+  onSend,
+  onTakeOver,
+  onLetAiHandle,
+  onReopen,
+  onMarkUrgent,
+  onUnmarkUrgent,
+  onArchive,
+  onAssignToAdvisor,
+  isKnownContact,
+  onAddToContacts,
+  onCreateOpportunity,
+  onBookAppointment,
+  onApproveAppointment,
+  onDeclineAppointment,
+  onRescheduleAppointment,
+  onNotesChange,
+  onToggleLeadPanel,
+  onLoadMore,
+  className
+}) {
+  const [mobilePanel, setMobilePanel] = useState(
+    "list"
+  );
+  const handleSelectConversation = (id) => {
+    onSelectConversation == null ? void 0 : onSelectConversation(id);
+    setMobilePanel("chat");
+  };
+  const handleToggleLeadPanel = () => {
+    onToggleLeadPanel == null ? void 0 : onToggleLeadPanel();
+    setMobilePanel(showLeadPanel ? "chat" : "lead");
+  };
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex h-full overflow-hidden bg-background", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          ConversationList,
+          {
+            conversations,
+            activeId: activeConversationId,
+            searchQuery,
+            activeFilter,
+            hasMore,
+            isLoadingMore,
+            onSearchChange,
+            onFilterChange,
+            onSelect: handleSelectConversation,
+            onRead,
+            onLoadMore,
+            className: cn(
+              "shrink-0 md:w-[320px]",
+              // Mobile: full width, visible only on list panel
+              mobilePanel === "list" ? "flex w-full md:flex" : "hidden md:flex"
+            )
+          }
+        ),
+        contact ? /* @__PURE__ */ jsx(
+          ChatThread,
+          {
+            contact,
+            status,
+            mode,
+            messages,
+            isAiTyping,
+            inputValue,
+            onInputChange,
+            onSend,
+            onTakeOver,
+            onLetAiHandle,
+            onReopen,
+            onMarkUrgent,
+            onUnmarkUrgent,
+            onArchive,
+            onAssignToAdvisor,
+            onBack: () => setMobilePanel("list"),
+            onShowLeadInfo: () => setMobilePanel("lead"),
+            className: cn(
+              "min-w-0 flex-1 border-r border-border",
+              mobilePanel === "chat" ? "flex flex-col md:flex" : "hidden md:flex"
+            )
+          }
+        ) : /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-col items-center gap-2 text-muted-foreground", children: [
+              /* @__PURE__ */ jsx(MessageSquare, { className: "size-10 opacity-30" }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm", children: "Select a conversation" })
+            ] })
+          }
+        ),
+        contact && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                // Mobile: full-width, instant show/hide based on mobilePanel
+                mobilePanel === "lead" ? "flex w-full shrink-0 flex-col" : "hidden",
+                // Desktop: always rendered, animate width open/close
+                "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__ */ jsx(
+                LeadInfoPanel,
+                {
+                  contact,
+                  firstSeen: leadFirstSeen,
+                  source: leadSource,
+                  aiFields,
+                  appointment,
+                  internalNotes,
+                  notesSaveStatus,
+                  isKnownContact,
+                  onAddToContacts,
+                  onCreateOpportunity,
+                  onBookAppointment,
+                  onApproveAppointment,
+                  onDeclineAppointment,
+                  onRescheduleAppointment,
+                  onNotesChange,
+                  onToggleCollapse: handleToggleLeadPanel,
+                  onBack: () => setMobilePanel("chat"),
+                  className: "flex h-full w-full flex-col border-l border-border md:w-[320px]"
+                }
+              )
+            }
+          ),
+          !showLeadPanel && onToggleLeadPanel && /* @__PURE__ */ jsx("div", { className: "hidden shrink-0 items-start border-l border-border pt-[29px] md:flex", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(
+              TooltipTrigger,
+              {
+                render: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "size-8",
+                    "aria-label": "Show lead info",
+                    onClick: handleToggleLeadPanel,
+                    children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(TooltipContent, { children: "Show lead info" })
+          ] }) })
+        ] })
+      ]
+    }
+  ) });
+}
+function AiConvAssignAdvisorDialog({
+  open,
+  onOpenChange,
+  advisors,
+  value,
+  onValueChange,
+  onConfirm
+}) {
+  const [search, setSearch] = useState("");
+  const [roleFilter, setRoleFilter] = useState("");
+  const roles = Array.from(
+    new Set(advisors.map((a) => a.role).filter(Boolean))
+  );
+  const filtered = advisors.filter(
+    (a) => a.name.toLowerCase().includes(search.toLowerCase()) && (!roleFilter || a.role === roleFilter)
+  );
+  const handleOpenChange = (v) => {
+    onOpenChange(v);
+    if (!v) {
+      setSearch("");
+      setRoleFilter("");
+    }
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { align: "top", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "Assign to advisor" }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: "Choose an advisor to handle this conversation." })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0", children: [
+      roles.length > 0 && /* @__PURE__ */ jsx("div", { className: "pb-3", children: /* @__PURE__ */ jsxs(
+        ToggleGroup,
+        {
+          type: "single",
+          variant: "outline",
+          spacing: 1.5,
+          size: "sm",
+          value: roleFilter ? [roleFilter] : ["__all__"],
+          onValueChange: (values) => {
+            const v = values[0];
+            setRoleFilter(!v || v === "__all__" ? "" : v);
+          },
+          children: [
+            /* @__PURE__ */ jsx(ToggleGroupItem, { value: "__all__", children: "All" }),
+            roles.map((role) => /* @__PURE__ */ jsx(ToggleGroupItem, { value: role, children: role }, role))
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border border-input px-3", children: [
+        /* @__PURE__ */ jsx(Search, { className: "size-4 shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            placeholder: "Search advisors...",
+            value: search,
+            onChange: (e) => setSearch(e.target.value),
+            className: "h-9 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "max-h-52 overflow-y-auto border border-t-0 border-input", children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: "py-6 text-center text-sm text-muted-foreground", children: "No advisors found." }) : filtered.map((advisor) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => onValueChange(advisor.id),
+          className: cn(
+            "flex w-full items-center gap-3 px-3 py-2.5 text-left text-sm transition-colors hover:bg-muted",
+            value === advisor.id && "bg-muted font-medium"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(Avatar, { size: "sm", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "font-semibold", children: advisor.initials }) }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("p", { className: "truncate text-sm", children: advisor.name }),
+              advisor.role && /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-muted-foreground", children: advisor.role })
+            ] })
+          ]
+        },
+        advisor.id
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button, { onClick: onConfirm, children: "Assign" })
+    ] })
+  ] }) });
+}
+
+export {
+  ConversationStatusChip,
+  ConversationListItem,
+  ConversationList,
+  ChatBubble,
+  ChatComposer,
+  ChatThread,
+  AICollectedDataSection,
+  LeadInfoPanel,
+  ConversationsPage,
+  AiConvAssignAdvisorDialog
+};