@wealthx/shadcn 1.5.23 → 1.5.25

package/src/components/ui/ai-conversations.tsx

@@ -1,2213 +0,0 @@
-import React, { useState } from "react";
-import { useEditor, EditorContent } from "@tiptap/react";
-import StarterKit from "@tiptap/starter-kit";
-import TiptapUnderline from "@tiptap/extension-underline";
-import TiptapLink from "@tiptap/extension-link";
-import ReactMarkdown from "react-markdown";
-import rehypeRaw from "rehype-raw";
-import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
-import {
-  Archive,
-  ArrowLeft,
-  Bold,
-  Bot,
-  Briefcase,
-  Calendar,
-  CheckCircle2,
-  ChevronLeft,
-  ChevronRight,
-  ChevronDown,
-  Flag,
-  HelpCircle,
-  Italic,
-  Link2,
-  Lock,
-  Mail,
-  MapPin,
-  MessageSquare,
-  MoreHorizontal,
-  Navigation,
-  Paperclip,
-  Phone,
-  PhoneCall,
-  Plus,
-  Search,
-  Send,
-  Underline,
-  UserCheck,
-  UserPlus,
-  Video,
-} from "lucide-react";
-import { cn, getInitials } from "@/lib/utils";
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-import { Badge } from "@/components/ui/badge";
-import { Button, buttonVariants } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Separator } from "@/components/ui/separator";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
-import { Textarea } from "@/components/ui/textarea";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-
-/**
- * AI Conversations — WealthX Backoffice
- *
- * 3-panel inbox for managing AI + advisor conversations from website chatbot leads.
- *
- * Component hierarchy:
- *   Atom     → ConversationStatusChip
- *   Molecule → ConversationListItem, ChatBubble
- *   Organism → ConversationList, ChatThread, ChatComposer, AICollectedDataSection, LeadInfoPanel
- *   Template → ConversationsPage
- */
-
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
-export type AiConvStatus =
-  | "ai-active"
-  | "manual"
-  | "needs-attention"
-  | "closed";
-
-export type AiConvMessageRole = "bot" | "visitor" | "advisor" | "system";
-
-export type AiConvFieldConfidence = "confirmed" | "estimated";
-
-export type AiConvFilterTab =
-  | "all"
-  | "open"
-  | "ai-active"
-  | "needs-attention"
-  | "closed";
-
-export type AiConvMode = "ai" | "manual";
-
-export type AiConvChannel = "chat" | "email";
-
-export type AiConvChannelFilter = "all" | AiConvChannel;
-
-export type AiConvMeetingType = "video" | "phone" | "in-person";
-
-export interface AiConvContact {
-  id: string;
-  name: string;
-  email?: string;
-  phone?: string;
-}
-
-export interface AiConvAdvisor {
-  id: string;
-  name: string;
-  initials: string;
-  role?: string;
-}
-
-export interface AiConvListItemData {
-  id: string;
-  contact: AiConvContact;
-  status: AiConvStatus;
-  lastMessage: string;
-  lastMessageRole?: AiConvMessageRole;
-  timestamp: string;
-  unreadCount?: number;
-  /** Assigned advisor display name. */
-  assignedTo?: string;
-  /**
-   * Conversation topic tag — e.g. "Buy a Home", "Refinance", "Investment".
-   * Shown as a small secondary badge so the broker can categorise conversations
-   * at a glance without opening each thread.
-   */
-  topic?: string;
-  /** Channel this conversation is using — "chat" (default) or "email". */
-  channel?: AiConvChannel;
-}
-
-export interface AiConvMessage {
-  id: string;
-  role: AiConvMessageRole;
-  content: string;
-  timestamp?: string;
-  /** Display name shown above the bubble. */
-  senderName?: string;
-}
-
-export interface AiConvDataField {
-  label: string;
-  value: string;
-  confidence: AiConvFieldConfidence;
-}
-
-export interface AiConvAppointmentData {
-  datetime: string;
-  meetingType: AiConvMeetingType;
-  /** Meeting link (video), phone number (phone), or address (in-person). */
-  meetingDetail?: string;
-  status: "requested" | "confirmed" | "pending" | "cancelled";
-}
-
-// ---------------------------------------------------------------------------
-// Internal helpers & shared constants
-// ---------------------------------------------------------------------------
-
-function displayContactName(name: string): string {
-  return name.trim() || "Website User";
-}
-
-/** Shared fixed height for all three panel top-bar sections so bottom dividers align. */
-const PANEL_HEADER_HEIGHT = "h-[94px]";
-
-const APPOINTMENT_STATUS_LABEL: Record<
-  AiConvAppointmentData["status"],
-  string
-> = {
-  requested: "Lead requested",
-  confirmed: "Confirmed",
-  pending: "Pending confirmation",
-  cancelled: "Cancelled",
-};
-
-// ---------------------------------------------------------------------------
-// ConversationStatusChip
-// ---------------------------------------------------------------------------
-
-type BadgeVariant = "success" | "default" | "warning" | "secondary";
-
-const STATUS_CONFIG: Record<
-  AiConvStatus,
-  { label: string; variant: BadgeVariant; dotClass: string }
-> = {
-  "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",
-  },
-};
-
-export interface ConversationStatusChipProps {
-  status: AiConvStatus;
-  showDot?: boolean;
-  className?: string;
-}
-
-export function ConversationStatusChip({
-  status,
-  showDot = false,
-  className,
-}: ConversationStatusChipProps) {
-  const { label, variant, dotClass } = STATUS_CONFIG[status];
-  return (
-    <Badge variant={variant} className={className}>
-      {showDot && (
-        <span className={cn("size-1.5 shrink-0 rounded-full", dotClass)} />
-      )}
-      {label}
-    </Badge>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// ContactAvatar — internal
-// ---------------------------------------------------------------------------
-
-interface ContactAvatarProps {
-  name: string;
-  size?: "sm" | "md" | "lg";
-  className?: string;
-}
-
-function ContactAvatar({ name, size = "md", className }: ContactAvatarProps) {
-  const avatarSize = size === "sm" ? "sm" : size === "lg" ? "lg" : "default";
-  return (
-    <Avatar size={avatarSize} className={className}>
-      <AvatarFallback className="font-semibold">
-        {getInitials(name)}
-      </AvatarFallback>
-    </Avatar>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// ConversationListItem
-// ---------------------------------------------------------------------------
-
-export interface ConversationListItemProps {
-  data: AiConvListItemData;
-  isActive?: boolean;
-  onClick?: (id: string) => void;
-  onRead?: (id: string) => void;
-}
-
-export function ConversationListItem({
-  data,
-  isActive,
-  onClick,
-  onRead,
-}: ConversationListItemProps) {
-  return (
-    <button
-      type="button"
-      onClick={() => {
-        onClick?.(data.id);
-        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",
-      )}
-    >
-      <ContactAvatar name={data.contact.name} />
-      <div className="min-w-0 flex-1">
-        {/* Row 1 — name + icons + timestamp */}
-        <div className="mb-1 flex items-center justify-between gap-2">
-          <span className="truncate text-sm font-semibold text-foreground">
-            {displayContactName(data.contact.name)}
-          </span>
-          <div className="flex shrink-0 items-center gap-1">
-            {data.status === "needs-attention" && (
-              <Flag className="size-3 text-warning-text" />
-            )}
-            {data.channel === "email" ? (
-              <Mail className="size-3 text-muted-foreground" />
-            ) : (
-              <MessageSquare className="size-3 text-muted-foreground" />
-            )}
-            <span className="whitespace-nowrap text-xs text-muted-foreground">
-              {data.timestamp}
-            </span>
-          </div>
-        </div>
-        {/* Row 2 — status chip + assigned advisor + unread badge */}
-        <div className="mb-1.5 flex items-center justify-between gap-2">
-          <div className="flex min-w-0 items-center gap-1.5">
-            <ConversationStatusChip status={data.status} showDot />
-            {data.assignedTo && (
-              <span className="truncate text-xs text-muted-foreground">
-                → {data.assignedTo}
-              </span>
-            )}
-          </div>
-          {data.unreadCount ? (
-            <Badge
-              variant="default"
-              className="size-4 shrink-0 justify-center px-0 text-[10px]"
-            >
-              {data.unreadCount}
-            </Badge>
-          ) : null}
-        </div>
-        {/* Row 3 — last message preview */}
-        <p className="line-clamp-2 text-sm leading-relaxed text-muted-foreground">
-          {data.lastMessageRole === "bot" ? (
-            <span className="font-medium text-foreground/60">AI: </span>
-          ) : data.lastMessageRole === "advisor" ? (
-            <span className="font-medium text-foreground/60">You: </span>
-          ) : data.lastMessageRole === "visitor" ? (
-            <span className="font-medium text-foreground/60">
-              {displayContactName(data.contact.name).split(" ")[0]}:{" "}
-            </span>
-          ) : null}
-          {data.lastMessage}
-        </p>
-      </div>
-    </button>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// ConversationList
-// ---------------------------------------------------------------------------
-
-function filterConversations(
-  conversations: AiConvListItemData[],
-  query: string,
-  filter: AiConvFilterTab,
-  channelFilter: AiConvChannelFilter,
-): AiConvListItemData[] {
-  const q = query.toLowerCase();
-  return conversations.filter((c) => {
-    const matchesFilter =
-      filter === "all" ||
-      (filter === "open" ? c.status !== "closed" : c.status === filter);
-    const matchesChannel =
-      channelFilter === "all" || (c.channel ?? "chat") === channelFilter;
-    const matchesSearch =
-      !q ||
-      c.contact.name.toLowerCase().includes(q) ||
-      c.lastMessage.toLowerCase().includes(q);
-    return matchesFilter && matchesChannel && matchesSearch;
-  });
-}
-
-const FILTER_TABS: { id: AiConvFilterTab; label: string }[] = [
-  { id: "all", label: "All" },
-  { id: "open", label: "Open" },
-  { id: "ai-active", label: "AI Active" },
-  { id: "needs-attention", label: "Urgent" },
-  { id: "closed", label: "Archived" },
-];
-
-export interface ConversationListProps {
-  conversations: AiConvListItemData[];
-  activeId?: string;
-  searchQuery?: string;
-  activeFilter?: AiConvFilterTab;
-  channelFilter?: AiConvChannelFilter;
-  hasMore?: boolean;
-  isLoadingMore?: boolean;
-  onSearchChange?: (v: string) => void;
-  onFilterChange?: (f: AiConvFilterTab) => void;
-  onChannelFilterChange?: (f: AiConvChannelFilter) => void;
-  onSelect?: (id: string) => void;
-  onRead?: (id: string) => void;
-  onLoadMore?: () => void;
-  className?: string;
-}
-
-export function ConversationList({
-  conversations,
-  activeId,
-  searchQuery = "",
-  activeFilter = "all",
-  channelFilter: channelFilterProp = "all",
-  hasMore,
-  isLoadingMore,
-  onSearchChange,
-  onFilterChange,
-  onChannelFilterChange,
-  onSelect,
-  onRead,
-  onLoadMore,
-  className,
-}: ConversationListProps) {
-  const [channelFilter, setChannelFilter] =
-    useState<AiConvChannelFilter>(channelFilterProp);
-
-  function handleChannelFilterChange(vals: string[]) {
-    const v = vals[0] as AiConvChannelFilter | undefined;
-    if (v) {
-      setChannelFilter(v);
-      onChannelFilterChange?.(v);
-    }
-  }
-
-  return (
-    <div
-      className={cn(
-        "flex flex-col border-r border-border bg-background",
-        className,
-      )}
-    >
-      <div className={cn(PANEL_HEADER_HEIGHT, "flex shrink-0 flex-col")}>
-        <div className="flex shrink-0 items-center gap-2 border-b border-border px-3 py-2.5">
-          <div className="relative flex-1">
-            <Search className="absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
-            <Input
-              value={searchQuery}
-              onChange={(e) => onSearchChange?.(e.target.value)}
-              placeholder="Search conversations..."
-              className="h-8 pl-8 text-sm"
-            />
-          </div>
-          <ToggleGroup
-            type="single"
-            variant="outline"
-            size="sm"
-            spacing={0}
-            value={[channelFilter]}
-            onValueChange={handleChannelFilterChange}
-            className="shrink-0"
-          >
-            <ToggleGroupItem value="all" aria-label="All channels">
-              All
-            </ToggleGroupItem>
-            <ToggleGroupItem value="chat" aria-label="Chat">
-              <MessageSquare className="size-3.5" />
-            </ToggleGroupItem>
-            <ToggleGroupItem value="email" aria-label="Email">
-              <Mail className="size-3.5" />
-            </ToggleGroupItem>
-          </ToggleGroup>
-        </div>
-
-        <div className="flex flex-1 items-center border-b border-border">
-          <Tabs
-            value={activeFilter}
-            onValueChange={(v) => v && onFilterChange?.(v as AiConvFilterTab)}
-            className="w-full"
-          >
-            <TabsList
-              variant="line"
-              className="w-full justify-start gap-0 h-auto"
-            >
-              {FILTER_TABS.map((tab) => (
-                <TabsTrigger
-                  key={tab.id}
-                  value={tab.id}
-                  className="flex-none px-3 py-2 text-xs"
-                >
-                  {tab.label}
-                </TabsTrigger>
-              ))}
-            </TabsList>
-          </Tabs>
-        </div>
-      </div>
-
-      {/* List */}
-      <div className="flex-1 overflow-y-auto" tabIndex={0}>
-        {(() => {
-          const filtered = filterConversations(
-            conversations,
-            searchQuery,
-            activeFilter,
-            channelFilter,
-          );
-          return filtered.length === 0 ? (
-            <div className="flex flex-col items-center justify-center gap-2 p-8 text-muted-foreground">
-              <MessageSquare className="size-8 opacity-30" />
-              <p className="text-sm">No conversations</p>
-              {searchQuery && (
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => onSearchChange?.("")}
-                >
-                  Clear search
-                </Button>
-              )}
-              {!searchQuery && activeFilter !== "all" && (
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => onFilterChange?.("all")}
-                >
-                  Clear filter
-                </Button>
-              )}
-            </div>
-          ) : (
-            <>
-              {filtered.map((item) => (
-                <ConversationListItem
-                  key={item.id}
-                  data={item}
-                  isActive={activeId === item.id}
-                  onClick={onSelect}
-                  onRead={onRead}
-                />
-              ))}
-              {hasMore && (
-                <div className="border-t border-border p-3">
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    className="w-full"
-                    disabled={isLoadingMore}
-                    onClick={onLoadMore}
-                  >
-                    {isLoadingMore ? "Loading..." : "Load more"}
-                  </Button>
-                </div>
-              )}
-            </>
-          );
-        })()}
-      </div>
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// ChatBubble
-// ---------------------------------------------------------------------------
-
-export interface ChatBubbleProps {
-  message: AiConvMessage;
-  className?: string;
-}
-
-function BubbleAvatar({
-  role,
-  senderName,
-}: {
-  role: AiConvMessageRole;
-  senderName?: string;
-}) {
-  if (role === "bot") {
-    return (
-      <Avatar size="sm">
-        <AvatarFallback className="border border-border bg-muted">
-          <Bot className="size-3.5 text-muted-foreground" />
-        </AvatarFallback>
-      </Avatar>
-    );
-  }
-  if (role === "advisor") {
-    return (
-      <Avatar size="sm">
-        <AvatarFallback className="font-semibold">
-          {getInitials(senderName ?? "Advisor")}
-        </AvatarFallback>
-      </Avatar>
-    );
-  }
-  return (
-    <Avatar size="sm">
-      <AvatarFallback>{getInitials(senderName ?? "?")}</AvatarFallback>
-    </Avatar>
-  );
-}
-
-export function ChatBubble({ message, className }: ChatBubbleProps) {
-  const { role, content, timestamp, senderName } = message;
-
-  if (role === "system") {
-    return (
-      <div className={cn("my-2 flex items-center gap-3 px-2", className)}>
-        <Separator className="flex-1" />
-        <span className="shrink-0 text-caption text-muted-foreground">
-          {content}
-        </span>
-        <Separator className="flex-1" />
-      </div>
-    );
-  }
-
-  const isAdvisor = role === "advisor";
-  const isBot = role === "bot";
-  const isVisitor = role === "visitor";
-
-  const displayName = isBot
-    ? "AI Assistant"
-    : isAdvisor
-      ? (senderName ?? "Advisor")
-      : (senderName ?? "Lead");
-
-  return (
-    <div
-      className={cn(
-        "flex gap-2.5",
-        isAdvisor ? "flex-row-reverse" : "flex-row",
-        className,
-      )}
-    >
-      <BubbleAvatar role={role} senderName={senderName} />
-
-      {/* Bubble + label */}
-      <div
-        className={cn(
-          "flex max-w-[70%] flex-col gap-1",
-          isAdvisor && "items-end",
-        )}
-      >
-        {/* Sender label — always shown for context */}
-        <span className="text-caption text-muted-foreground">
-          {displayName}
-        </span>
-
-        {/* Bubble */}
-        <div
-          className={cn(
-            "px-3 py-2 text-sm leading-relaxed break-words [&_a]:underline [&_p]:m-0",
-            isBot && "border border-border bg-muted/60 text-foreground [&_a]:text-primary",
-            isVisitor && "border border-border bg-background text-foreground [&_a]:text-primary",
-            isAdvisor && "bg-primary text-primary-foreground [&_a]:text-primary-foreground",
-          )}
-        >
-          <ReactMarkdown rehypePlugins={[rehypeRaw, [rehypeSanitize, defaultSchema]]}>
-            {content}
-          </ReactMarkdown>
-        </div>
-
-        {timestamp && (
-          <span className="text-caption text-muted-foreground">
-            {timestamp}
-          </span>
-        )}
-      </div>
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// ChatComposer
-// ---------------------------------------------------------------------------
-
-export interface AiConvEmailPayload {
-  content: string;
-  to: string;
-  cc: string;
-  subject: string;
-}
-
-export interface ChatComposerProps {
-  mode: AiConvMode;
-  /** Active reply channel. Defaults to "chat". */
-  channel?: AiConvChannel;
-  onChannelChange?: (channel: AiConvChannel) => void;
-  /**
-   * When true, the Email tab is shown in the composer. Defaults to false —
-   * consumers must opt in once their tenant's email integration is wired up.
-   */
-  isEmailIntegrated?: boolean;
-  /** Lead's email address — pre-fills the To field in email compose. */
-  contactEmail?: string;
-  inputValue?: string;
-  onInputChange?: (v: string) => void;
-  /** Fired when the user sends a chat message. */
-  onSend?: (content: string) => void;
-  /** Fired when the user sends an email. */
-  onSendEmail?: (payload: AiConvEmailPayload) => void;
-  onTakeOver?: () => void;
-  onLetAiHandle?: () => void;
-  className?: string;
-}
-
-function ComposerToolbarButton({
-  label,
-  icon: Icon,
-  pressed,
-  onToggle,
-}: {
-  label: string;
-  icon: React.ElementType;
-  pressed?: boolean;
-  onToggle?: () => void;
-}) {
-  return (
-    <button
-      type="button"
-      aria-label={label}
-      aria-pressed={pressed}
-      onClick={onToggle}
-      className={cn(
-        "flex size-7 items-center justify-center transition-colors",
-        pressed
-          ? "bg-foreground text-background"
-          : "text-muted-foreground hover:bg-muted hover:text-foreground",
-      )}
-    >
-      <Icon className="size-3.5" />
-    </button>
-  );
-}
-
-function ComposerLinkPopover({ editor }: { editor: ReturnType<typeof useEditor> }) {
-  const [open, setOpen] = React.useState(false);
-  const [url, setUrl] = React.useState("");
-
-  const handleApply = () => {
-    if (url.trim()) {
-      editor?.chain().focus().setLink({ href: url.trim() }).run();
-    }
-    setOpen(false);
-    setUrl("");
-  };
-
-  return (
-    <Popover
-      open={open}
-      onOpenChange={(newOpen) => {
-        if (newOpen && editor?.isActive("link")) {
-          editor.chain().focus().unsetLink().run();
-          return;
-        }
-        if (newOpen) setUrl("");
-        setOpen(newOpen);
-      }}
-    >
-      <PopoverTrigger
-        aria-label="Insert link"
-        className={cn(
-          "flex size-7 items-center justify-center transition-colors",
-          editor?.isActive("link")
-            ? "bg-foreground text-background"
-            : "text-muted-foreground hover:bg-muted hover:text-foreground",
-        )}
-      >
-        <Link2 className="size-3.5" />
-      </PopoverTrigger>
-      <PopoverContent className="w-72 p-2" align="start">
-        <div className="flex items-center gap-1.5">
-          <input
-            type="url"
-            value={url}
-            onChange={(e) => setUrl(e.target.value)}
-            onKeyDown={(e) => e.key === "Enter" && handleApply()}
-            placeholder="https://"
-            className="min-w-0 flex-1 border border-border bg-transparent px-2 py-1.5 text-sm text-foreground outline-none placeholder:text-muted-foreground focus:border-primary"
-            autoFocus
-          />
-          <Button size="sm" className="h-8 px-3" onClick={handleApply}>
-            Apply
-          </Button>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-function ComposerEmailFieldRow({
-  label,
-  children,
-}: {
-  label: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <div className="flex items-center gap-3 border-b border-border px-4 py-2.5">
-      <span className="w-14 shrink-0 text-sm text-muted-foreground">
-        {label}
-      </span>
-      {children}
-    </div>
-  );
-}
-
-export function ChatComposer({
-  mode,
-  channel: channelProp = "chat",
-  onChannelChange,
-  isEmailIntegrated = false,
-  contactEmail = "",
-  inputValue = "",
-  onInputChange,
-  onSend,
-  onSendEmail,
-  onTakeOver,
-  onLetAiHandle,
-  className,
-}: ChatComposerProps) {
-  // Semi-controlled: owns channel state for uncontrolled usage, notifies parent on change.
-  // Force chat when email isn't integrated so the panel never lands on a hidden tab.
-  const [channel, setChannel] = React.useState<AiConvChannel>(
-    isEmailIntegrated ? channelProp : "chat",
-  );
-  const [emailTo, setEmailTo] = React.useState(contactEmail);
-  const [emailCc, setEmailCc] = React.useState("");
-  const [showCc, setShowCc] = React.useState(false);
-  const [emailSubject, setEmailSubject] = React.useState("");
-
-  const [, forceUpdate] = React.useReducer((x: number) => x + 1, 0);
-
-  const editor = useEditor({
-    extensions: [
-      StarterKit,
-      TiptapUnderline,
-      TiptapLink.configure({ openOnClick: false }),
-    ],
-    content: "",
-    onTransaction: () => forceUpdate(),
-    editorProps: {
-      attributes: {
-        class:
-          "min-h-[150px] px-4 py-3 text-base text-foreground outline-none prose prose-sm max-w-none [&_p]:m-0 [&_a]:text-primary [&_a]:underline [&_a]:cursor-pointer",
-      },
-    },
-  });
-
-  const handleChannelChange = (c: AiConvChannel) => {
-    setChannel(c);
-    onChannelChange?.(c);
-  };
-
-  return (
-    <div
-      className={cn(
-        "flex flex-col border-t border-border bg-background",
-        className,
-      )}
-    >
-      {isEmailIntegrated && (
-        <div className="border-b border-border px-3 py-2">
-          <Tabs
-            value={channel}
-            onValueChange={(v) => v && handleChannelChange(v as AiConvChannel)}
-          >
-            <TabsList variant="default" className="w-full">
-              <TabsTrigger value="chat" className="flex-1 gap-1.5">
-                <MessageSquare className="size-3.5" />
-                Chat
-              </TabsTrigger>
-              <TabsTrigger value="email" className="flex-1 gap-1.5">
-                <Mail className="size-3.5" />
-                Email
-              </TabsTrigger>
-            </TabsList>
-          </Tabs>
-        </div>
-      )}
-
-      {mode === "ai" ? (
-        <div className="flex items-center gap-2 bg-muted/30 px-4 py-2.5 text-[12px] text-muted-foreground">
-          <Bot className="size-3.5 shrink-0 text-muted-foreground" />
-          <span>AI is handling this conversation.</span>
-          <Button
-            variant="link"
-            size="sm"
-            className="h-auto p-0 text-[12px] font-medium text-foreground"
-            onClick={onTakeOver}
-          >
-            Take Over
-          </Button>
-          <span>to reply directly.</span>
-        </div>
-      ) : (
-        /* Email panel stays in normal flow to anchor container height;
-           chat panel is an absolute overlay so both tabs share identical dimensions */
-        <div className="relative">
-          <div
-            className={cn(
-              "flex flex-col",
-              channel !== "email" && "invisible pointer-events-none",
-            )}
-            aria-hidden={channel !== "email"}
-          >
-            <ComposerEmailFieldRow label="To">
-              <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"
-              />
-              <button
-                type="button"
-                onClick={() => setShowCc((v) => !v)}
-                className="flex shrink-0 items-center gap-0.5 text-sm text-muted-foreground hover:text-foreground"
-              >
-                CC
-                <ChevronDown className="size-3.5" />
-              </button>
-            </ComposerEmailFieldRow>
-            {showCc && (
-              <ComposerEmailFieldRow label="CC">
-                <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"
-                />
-              </ComposerEmailFieldRow>
-            )}
-            <ComposerEmailFieldRow label="Subject">
-              <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"
-              />
-            </ComposerEmailFieldRow>
-            <EditorContent editor={editor} />
-            <div className="flex items-center justify-between border-t border-border px-3 py-2">
-              <div className="flex items-center gap-0.5">
-                <ComposerToolbarButton
-                  label="Bold"
-                  icon={Bold}
-                  pressed={editor?.isActive("bold")}
-                  onToggle={() => editor?.chain().focus().toggleBold().run()}
-                />
-                <ComposerToolbarButton
-                  label="Italic"
-                  icon={Italic}
-                  pressed={editor?.isActive("italic")}
-                  onToggle={() => editor?.chain().focus().toggleItalic().run()}
-                />
-                <ComposerToolbarButton
-                  label="Underline"
-                  icon={Underline}
-                  pressed={editor?.isActive("underline")}
-                  onToggle={() =>
-                    editor?.chain().focus().toggleUnderline().run()
-                  }
-                />
-                <Separator orientation="vertical" className="mx-1.5 h-4" />
-                <ComposerLinkPopover editor={editor} />
-                <ComposerToolbarButton label="Attach file" icon={Paperclip} />
-              </div>
-              <Button
-                size="sm"
-                onClick={() => {
-                  const html = editor?.getHTML() ?? "";
-                  onSendEmail?.({
-                    content: html,
-                    to: emailTo,
-                    cc: emailCc,
-                    subject: emailSubject,
-                  });
-                  editor?.commands.clearContent();
-                }}
-                disabled={!editor || editor.isEmpty || !emailTo.trim()}
-              >
-                <Send className="mr-1.5 size-3.5" />
-                Send Email
-              </Button>
-            </div>
-          </div>
-
-          {/* Chat compose — absolute overlay, fills exact same height as email panel */}
-          {channel === "chat" && (
-            <div className="absolute inset-0 flex flex-col gap-3 p-4">
-              <Textarea
-                value={inputValue}
-                onChange={(e) => onInputChange?.(e.target.value)}
-                placeholder="Reply to lead..."
-                className="min-h-0 flex-1 resize-none text-base"
-              />
-              <div className="flex items-center justify-between">
-                <Button variant="outline" size="sm" onClick={onLetAiHandle}>
-                  <Bot className="mr-1.5 size-3.5" />
-                  Let AI Handle
-                </Button>
-                <Button
-                  size="sm"
-                  onClick={() => onSend?.(inputValue)}
-                  disabled={!inputValue.trim()}
-                >
-                  <Send className="mr-1.5 size-3.5" />
-                  Send
-                </Button>
-              </div>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// ChatThread
-// ---------------------------------------------------------------------------
-
-export interface ChatThreadProps {
-  contact: AiConvContact;
-  status: AiConvStatus;
-  mode: AiConvMode;
-  messages: AiConvMessage[];
-  isAiTyping?: boolean;
-  /** Active reply channel — "chat" (default) or "email". */
-  channel?: AiConvChannel;
-  onChannelChange?: (channel: AiConvChannel) => void;
-  /**
-   * When true, the Email tab is shown in the composer. Defaults to false.
-   */
-  isEmailIntegrated?: boolean;
-  inputValue?: string;
-  onInputChange?: (v: string) => void;
-  /** Fired when the user sends a chat message. */
-  onSend?: (content: string) => void;
-  /** Fired when the user sends an email. */
-  onSendEmail?: (payload: AiConvEmailPayload) => void;
-  onTakeOver?: () => void;
-  onLetAiHandle?: () => void;
-  onReopen?: () => void;
-  onMarkUrgent?: () => void;
-  onUnmarkUrgent?: () => void;
-  onArchive?: () => void;
-  onAssignToAdvisor?: () => void;
-  /** True when older messages can be loaded (e.g. paginated history). */
-  hasMoreMessages?: boolean;
-  /** True while a `onLoadMoreMessages` request is in-flight. */
-  isLoadingMoreMessages?: boolean;
-  /** Fired when the consumer should fetch older messages. */
-  onLoadMoreMessages?: () => void;
-  /** Mobile only — back to conversation list. */
-  onBack?: () => void;
-  /** Mobile only — show lead info panel. */
-  onShowLeadInfo?: () => void;
-  className?: string;
-}
-
-export function ChatThread({
-  contact,
-  status,
-  mode,
-  messages,
-  isAiTyping = false,
-  channel,
-  onChannelChange,
-  isEmailIntegrated,
-  inputValue,
-  onInputChange,
-  onSend,
-  onSendEmail,
-  onTakeOver,
-  onLetAiHandle,
-  onReopen,
-  onMarkUrgent,
-  onUnmarkUrgent,
-  onArchive,
-  onAssignToAdvisor,
-  hasMoreMessages,
-  isLoadingMoreMessages,
-  onLoadMoreMessages,
-  onBack,
-  onShowLeadInfo,
-  className,
-}: ChatThreadProps) {
-  const aiIsHandling = mode === "ai";
-  const isClosed = status === "closed";
-
-  const scrollRef = React.useRef<HTMLDivElement>(null);
-  // Captures scrollHeight just before older messages are prepended, so we can
-  // restore the user's visible scroll offset once the new nodes render.
-  const preLoadScrollHeightRef = React.useRef<number | null>(null);
-
-  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
-    if (!hasMoreMessages || isLoadingMoreMessages || !onLoadMoreMessages) {
-      return;
-    }
-    if (e.currentTarget.scrollTop <= 80) {
-      preLoadScrollHeightRef.current = e.currentTarget.scrollHeight;
-      onLoadMoreMessages();
-    }
-  };
-
-  // Tracks the last "tail" message id so we can tell an append (new message,
-  // tail changed) apart from a prepend (older history loaded, tail unchanged).
-  const prevLastMessageIdRef = React.useRef<string | undefined>(undefined);
-  const prevContactIdRef = React.useRef<string>(contact.id);
-
-  React.useLayoutEffect(() => {
-    const el = scrollRef.current;
-    if (!el) return;
-
-    // Prepend (older messages just loaded) — restore scroll so the user
-    // stays anchored to the message they were reading.
-    if (preLoadScrollHeightRef.current !== null) {
-      el.scrollTop = el.scrollHeight - preLoadScrollHeightRef.current;
-      preLoadScrollHeightRef.current = null;
-      prevLastMessageIdRef.current = messages[messages.length - 1]?.id;
-      prevContactIdRef.current = contact.id;
-      return;
-    }
-
-    const currentLastId = messages[messages.length - 1]?.id;
-    const contactChanged = prevContactIdRef.current !== contact.id;
-    const tailChanged = prevLastMessageIdRef.current !== currentLastId;
-
-    // Opening a conversation or appending a new message (sent, received,
-    // or system) — pin to the bottom.
-    if (contactChanged || tailChanged) {
-      el.scrollTop = el.scrollHeight;
-    }
-
-    prevLastMessageIdRef.current = currentLastId;
-    prevContactIdRef.current = contact.id;
-  }, [contact.id, messages]);
-
-  // Typing indicator adds DOM height — keep the view pinned to bottom.
-  React.useLayoutEffect(() => {
-    if (!isAiTyping) return;
-    const el = scrollRef.current;
-    if (el) el.scrollTop = el.scrollHeight;
-  }, [isAiTyping]);
-
-  return (
-    <div className={cn("flex flex-col bg-background", className)}>
-      {/* Header */}
-      <div
-        className={cn(
-          PANEL_HEADER_HEIGHT,
-          "flex items-center gap-3 border-b border-border px-4",
-        )}
-      >
-        {/* Mobile back button */}
-        {onBack && (
-          <Button
-            variant="ghost"
-            size="icon"
-            className="size-8 shrink-0 md:hidden"
-            onClick={onBack}
-            aria-label="Back to conversations"
-          >
-            <ArrowLeft className="size-4" />
-          </Button>
-        )}
-
-        <ContactAvatar name={contact.name} size="md" />
-
-        <div className="min-w-0 flex-1">
-          <div className="flex items-center gap-2">
-            <span className="text-sm font-semibold text-foreground">
-              {displayContactName(contact.name)}
-            </span>
-            <ConversationStatusChip status={status} showDot />
-          </div>
-          {contact.email && (
-            <p className="text-sm text-muted-foreground">{contact.email}</p>
-          )}
-        </div>
-
-        <div className="flex shrink-0 items-center gap-2">
-          {/* Action buttons — desktop only (mobile: already in bottom bar) */}
-          <div className="hidden items-center gap-2 md:flex">
-            {isClosed && (
-              <Button variant="outline" size="sm" onClick={onReopen}>
-                Reopen
-              </Button>
-            )}
-            {!isClosed && aiIsHandling && (
-              <Button size="sm" onClick={onTakeOver}>
-                Take Over
-              </Button>
-            )}
-            {!isClosed && !aiIsHandling && (
-              <Button variant="outline" size="sm" onClick={onLetAiHandle}>
-                <Bot className="mr-1.5 size-3.5" />
-                Let AI Handle
-              </Button>
-            )}
-          </div>
-
-          {/* More actions dropdown */}
-          <DropdownMenu>
-            <DropdownMenuTrigger
-              className={cn(
-                buttonVariants({ variant: "ghost", size: "icon" }),
-                "size-8",
-              )}
-              aria-label="More actions"
-            >
-              <MoreHorizontal className="size-4" />
-            </DropdownMenuTrigger>
-            <DropdownMenuContent>
-              {/* Lead Info — mobile only */}
-              {onShowLeadInfo && (
-                <>
-                  <DropdownMenuItem
-                    className="md:hidden"
-                    onClick={onShowLeadInfo}
-                  >
-                    <ChevronRight className="mr-2 size-4" />
-                    Lead Info
-                  </DropdownMenuItem>
-                  <DropdownMenuSeparator className="md:hidden" />
-                </>
-              )}
-              {status === "needs-attention" ? (
-                <DropdownMenuItem onClick={onUnmarkUrgent}>
-                  <Flag className="mr-2 size-4" />
-                  Unmark Urgent
-                </DropdownMenuItem>
-              ) : (
-                <DropdownMenuItem onClick={onMarkUrgent}>
-                  <Flag className="mr-2 size-4" />
-                  Mark as Urgent
-                </DropdownMenuItem>
-              )}
-              <DropdownMenuItem onClick={onAssignToAdvisor}>
-                <UserCheck className="mr-2 size-4" />
-                Assign to advisor
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem onClick={onArchive}>
-                <Archive className="mr-2 size-4" />
-                Archive
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      </div>
-
-      {/* Messages */}
-      <div
-        ref={scrollRef}
-        onScroll={handleScroll}
-        className="flex flex-1 flex-col gap-4 overflow-y-auto p-4"
-        tabIndex={0}
-      >
-        {isLoadingMoreMessages && (
-          <div className="flex justify-center py-1 text-caption text-muted-foreground">
-            Loading older messages...
-          </div>
-        )}
-        {messages.length === 0 ? (
-          <div className="flex flex-1 flex-col items-center justify-center gap-2 text-muted-foreground">
-            <MessageSquare className="size-8 opacity-30" />
-            <p className="text-sm">No messages yet</p>
-          </div>
-        ) : (
-          messages.map((msg) => <ChatBubble key={msg.id} message={msg} />)
-        )}
-
-        {/* AI typing indicator */}
-        {isAiTyping && !isClosed && (
-          <div className="flex gap-2.5">
-            <BubbleAvatar role="bot" />
-            <div className="flex flex-col gap-1">
-              <span className="text-caption text-muted-foreground">
-                AI Assistant
-              </span>
-              <div className="flex items-center gap-1 border border-border bg-muted/60 px-3 py-2.5">
-                <span className="size-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:0ms]" />
-                <span className="size-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:150ms]" />
-                <span className="size-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:300ms]" />
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* Composer / locked banner */}
-      {isClosed ? (
-        <div className="flex items-center gap-3 border-t border-border bg-muted/30 px-4 py-3 text-sm text-muted-foreground">
-          <Lock className="size-3.5 shrink-0" />
-          <span>This conversation is closed.</span>
-          <Button
-            variant="outline"
-            size="sm"
-            className="ml-auto"
-            onClick={onReopen}
-          >
-            Reopen
-          </Button>
-        </div>
-      ) : (
-        <ChatComposer
-          mode={mode}
-          channel={channel}
-          onChannelChange={onChannelChange}
-          isEmailIntegrated={isEmailIntegrated}
-          contactEmail={contact.email}
-          inputValue={inputValue}
-          onInputChange={onInputChange}
-          onSend={onSend}
-          onSendEmail={onSendEmail}
-          onTakeOver={onTakeOver}
-          onLetAiHandle={onLetAiHandle}
-        />
-      )}
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// AICollectedDataSection
-// ---------------------------------------------------------------------------
-
-export interface AICollectedDataSectionProps {
-  fields: AiConvDataField[];
-  className?: string;
-}
-
-export function AICollectedDataSection({
-  fields,
-  className,
-}: AICollectedDataSectionProps) {
-  return (
-    <div className={cn("flex flex-col", className)}>
-      {fields.map((field, i) => (
-        <div
-          key={i}
-          className="flex items-center justify-between gap-2 border-b border-border/40 py-1.5 last:border-b-0"
-        >
-          <span className="shrink-0 text-sm text-muted-foreground">
-            {field.label}
-          </span>
-          <div className="flex items-center gap-1.5">
-            <span className="text-right text-sm font-medium text-foreground">
-              {field.value}
-            </span>
-            {field.confidence === "confirmed" ? (
-              <CheckCircle2 className="size-3 shrink-0 text-success-text" />
-            ) : (
-              <HelpCircle className="size-3 shrink-0 text-warning-text" />
-            )}
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// LeadInfoPanel
-// ---------------------------------------------------------------------------
-
-const MEETING_ICON: Record<AiConvMeetingType, React.ElementType> = {
-  video: Video,
-  phone: Phone,
-  "in-person": MapPin,
-};
-
-const MEETING_LABEL: Record<AiConvMeetingType, string> = {
-  video: "Video Call",
-  phone: "Phone Call",
-  "in-person": "In Person",
-};
-
-const MEETING_DETAIL_ICON: Record<AiConvMeetingType, React.ElementType> = {
-  video: Link2,
-  phone: PhoneCall,
-  "in-person": Navigation,
-};
-
-interface AppointmentSectionProps {
-  appointment: AiConvAppointmentData;
-  contactId: string;
-  isAnonymous: boolean;
-  onApproveAppointment?: () => void;
-  onDeclineAppointment?: () => void;
-  onRescheduleAppointment?: (contactId: string) => void;
-}
-
-function MeetingDetailRow({
-  meetingType,
-  detail,
-}: {
-  meetingType: AiConvMeetingType;
-  detail: string;
-}) {
-  const DetailIcon = MEETING_DETAIL_ICON[meetingType];
-  const isLink = detail.startsWith("http");
-  return (
-    <div className="flex items-center gap-2">
-      <DetailIcon className="size-4 shrink-0 text-muted-foreground" />
-      {isLink ? (
-        <a
-          href={detail}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-sm text-primary underline underline-offset-2 break-all hover:text-primary/80"
-        >
-          {detail}
-        </a>
-      ) : (
-        <span className="text-sm text-muted-foreground break-all">
-          {detail}
-        </span>
-      )}
-    </div>
-  );
-}
-
-function AppointmentSection({
-  appointment,
-  contactId,
-  isAnonymous,
-  onApproveAppointment,
-  onDeclineAppointment,
-  onRescheduleAppointment,
-}: AppointmentSectionProps) {
-  const AppointmentIcon = MEETING_ICON[appointment.meetingType];
-  const canReschedule = !isAnonymous && !!onRescheduleAppointment;
-
-  return (
-    <div className="flex flex-col gap-2">
-      <div className="flex items-center gap-2">
-        <Calendar className="size-3.5 shrink-0 text-muted-foreground" />
-        <span className="text-sm font-medium text-foreground">
-          {appointment.datetime}
-        </span>
-      </div>
-      <div className="flex items-center gap-2">
-        <AppointmentIcon className="size-4 shrink-0 text-muted-foreground" />
-        <span className="text-sm text-muted-foreground">
-          {MEETING_LABEL[appointment.meetingType]}
-        </span>
-      </div>
-      {appointment.meetingDetail && (
-        <MeetingDetailRow
-          meetingType={appointment.meetingType}
-          detail={appointment.meetingDetail}
-        />
-      )}
-      <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",
-        })}
-      >
-        {APPOINTMENT_STATUS_LABEL[appointment.status]}
-      </span>
-
-      {appointment.status === "requested" && (
-        <div className="flex gap-2 pt-1">
-          <Button size="sm" className="flex-1" onClick={onApproveAppointment}>
-            Approve
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            className="flex-1"
-            onClick={onDeclineAppointment}
-          >
-            Decline
-          </Button>
-          {canReschedule && (
-            <Button
-              variant="ghost"
-              size="sm"
-              className="flex-1"
-              onClick={() => onRescheduleAppointment!(contactId)}
-            >
-              Reschedule
-            </Button>
-          )}
-        </div>
-      )}
-
-      {(appointment.status === "confirmed" ||
-        appointment.status === "cancelled") &&
-        canReschedule && (
-          <Button
-            variant="outline"
-            size="sm"
-            className="mt-1 w-full justify-start"
-            onClick={() => onRescheduleAppointment!(contactId)}
-          >
-            Reschedule
-          </Button>
-        )}
-    </div>
-  );
-}
-
-function PanelSectionHeader({ children }: { children: React.ReactNode }) {
-  return (
-    <p className="mb-2.5 text-overline text-muted-foreground">{children}</p>
-  );
-}
-
-function PanelSection({
-  children,
-  last = false,
-}: {
-  children: React.ReactNode;
-  last?: boolean;
-}) {
-  return (
-    <div className={cn("px-4 py-4", !last && "border-b border-border")}>
-      {children}
-    </div>
-  );
-}
-
-export interface LeadInfoPanelProps {
-  contact: AiConvContact;
-  firstSeen?: string;
-  source?: string;
-  /** Conversation topic tag — e.g. "Buy a Home", "Refinance", "Investment". */
-  topic?: string;
-  aiFields?: AiConvDataField[];
-  appointment?: AiConvAppointmentData;
-  internalNotes?: string;
-  notesSaveStatus?: "idle" | "saving" | "saved";
-  isCollapsed?: boolean;
-  /** True when this lead's contact info already exists in the system. Disables Add to Contacts. */
-  isKnownContact?: boolean;
-  onAddToContacts?: () => void;
-  onCreateOpportunity?: () => void;
-  onBookAppointment?: () => void;
-  onApproveAppointment?: () => void;
-  onDeclineAppointment?: () => void;
-  onRescheduleAppointment?: (contactId: string) => void;
-  onNotesChange?: (v: string) => void;
-  onToggleCollapse?: () => void;
-  /** Mobile only — back to chat thread. */
-  onBack?: () => void;
-  className?: string;
-}
-
-export function LeadInfoPanel({
-  contact,
-  firstSeen,
-  source = "Website Chatbot",
-  topic,
-  aiFields = [],
-  appointment,
-  internalNotes = "",
-  notesSaveStatus = "idle",
-  isCollapsed = false,
-  isKnownContact = false,
-  onAddToContacts,
-  onCreateOpportunity,
-  onBookAppointment,
-  onApproveAppointment,
-  onDeclineAppointment,
-  onRescheduleAppointment,
-  onNotesChange,
-  onToggleCollapse,
-  onBack,
-  className,
-}: LeadInfoPanelProps) {
-  const isAnonymous = !contact.name.trim();
-  const addToContactsDisabled = isAnonymous || isKnownContact;
-
-  return (
-    <div className={cn("flex flex-col bg-background", className)}>
-      {/* Panel header */}
-      <div
-        className={cn(
-          PANEL_HEADER_HEIGHT,
-          "flex items-center justify-between border-b border-border px-4",
-        )}
-      >
-        {/* Mobile back button */}
-        {onBack && (
-          <Button
-            variant="ghost"
-            size="icon"
-            className="size-8 shrink-0 md:hidden"
-            onClick={onBack}
-            aria-label="Back to conversation"
-          >
-            <ArrowLeft className="size-4" />
-          </Button>
-        )}
-        <span className="text-sm font-semibold text-foreground">Lead Info</span>
-        {onToggleCollapse && (
-          <Tooltip>
-            <TooltipTrigger
-              render={
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="size-7"
-                  onClick={onToggleCollapse}
-                  aria-label={isCollapsed ? "Expand panel" : "Collapse panel"}
-                >
-                  <ChevronRight
-                    className={cn(
-                      "size-4 transition-transform duration-150",
-                      isCollapsed && "-rotate-180",
-                    )}
-                  />
-                </Button>
-              }
-            />
-            <TooltipContent>
-              {isCollapsed ? "Expand panel" : "Collapse panel"}
-            </TooltipContent>
-          </Tooltip>
-        )}
-      </div>
-
-      {!isCollapsed && (
-        <div className="flex-1 overflow-y-auto" tabIndex={0}>
-          <PanelSection>
-            <PanelSectionHeader>Contact</PanelSectionHeader>
-            <div className="flex items-center gap-3">
-              <ContactAvatar name={contact.name} size="lg" />
-              <div className="min-w-0 flex-1">
-                <p className="truncate text-sm font-semibold text-foreground">
-                  {displayContactName(contact.name)}
-                </p>
-                <p className="text-sm text-muted-foreground">{source}</p>
-                {topic && (
-                  <Badge variant="secondary" className="mt-1 text-xs">
-                    {topic}
-                  </Badge>
-                )}
-              </div>
-            </div>
-            {(contact.email || contact.phone || firstSeen) && (
-              <div className="mt-3 flex flex-col gap-1.5">
-                {contact.email && (
-                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                    <Mail className="size-4 shrink-0" />
-                    <a
-                      href={`mailto:${contact.email}`}
-                      className="truncate hover:underline"
-                    >
-                      {contact.email}
-                    </a>
-                  </div>
-                )}
-                {contact.phone && (
-                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                    <PhoneCall className="size-4 shrink-0" />
-                    <a
-                      href={`tel:${contact.phone}`}
-                      className="hover:underline"
-                    >
-                      {contact.phone}
-                    </a>
-                  </div>
-                )}
-                {firstSeen && (
-                  <p className="text-sm text-muted-foreground">
-                    First seen: {firstSeen}
-                  </p>
-                )}
-              </div>
-            )}
-          </PanelSection>
-
-          <PanelSection>
-            <PanelSectionHeader>AI-Collected Data</PanelSectionHeader>
-            {aiFields.length > 0 ? (
-              <>
-                <AICollectedDataSection fields={aiFields} />
-                <div className="mt-2.5 flex items-center gap-3 text-xs text-muted-foreground">
-                  <span className="flex items-center gap-1">
-                    <CheckCircle2 className="size-3 text-success-text" />
-                    confirmed
-                  </span>
-                  <span className="flex items-center gap-1">
-                    <HelpCircle className="size-3 text-warning-text" />
-                    estimated
-                  </span>
-                </div>
-              </>
-            ) : (
-              <p className="text-sm text-muted-foreground">
-                AI is still gathering information...
-              </p>
-            )}
-          </PanelSection>
-
-          <PanelSection>
-            <PanelSectionHeader>Appointment</PanelSectionHeader>
-            {appointment ? (
-              <AppointmentSection
-                appointment={appointment}
-                contactId={contact.id}
-                isAnonymous={isAnonymous}
-                onApproveAppointment={onApproveAppointment}
-                onDeclineAppointment={onDeclineAppointment}
-                onRescheduleAppointment={onRescheduleAppointment}
-              />
-            ) : (
-              <Button
-                variant="outline"
-                size="sm"
-                className="w-full justify-start"
-                disabled={isAnonymous}
-                onClick={onBookAppointment}
-              >
-                <Plus className="mr-1.5 size-3.5" />
-                Book Appointment
-              </Button>
-            )}
-          </PanelSection>
-
-          <PanelSection>
-            <PanelSectionHeader>CRM Actions</PanelSectionHeader>
-            <div className="flex flex-col gap-2">
-              <Tooltip>
-                <TooltipTrigger
-                  render={
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      className="w-full justify-start"
-                      disabled={addToContactsDisabled}
-                      onClick={onAddToContacts}
-                    >
-                      <UserPlus className="mr-1.5 size-3.5" />
-                      Add to Contacts
-                    </Button>
-                  }
-                />
-                {isKnownContact && (
-                  <TooltipContent>Already in contacts</TooltipContent>
-                )}
-              </Tooltip>
-              <Button
-                variant="outline"
-                size="sm"
-                className="w-full justify-start"
-                disabled={isAnonymous}
-                onClick={onCreateOpportunity}
-              >
-                <Briefcase className="mr-1.5 size-3.5" />
-                Add to CRM
-              </Button>
-            </div>
-          </PanelSection>
-
-          <PanelSection last>
-            <div className="mb-2.5 flex items-center justify-between">
-              <p className="text-overline text-muted-foreground">
-                Internal Notes
-              </p>
-              {notesSaveStatus === "saving" && (
-                <span className="text-xs text-muted-foreground">Saving...</span>
-              )}
-              {notesSaveStatus === "saved" && (
-                <span className="flex items-center gap-1 text-xs text-success-text">
-                  <CheckCircle2 className="size-3" />
-                  Saved
-                </span>
-              )}
-            </div>
-            <Textarea
-              value={internalNotes}
-              onChange={(e) => onNotesChange?.(e.target.value)}
-              placeholder="Private notes — not visible to lead..."
-              rows={4}
-              className="resize-none text-sm"
-            />
-          </PanelSection>
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// ConversationsPage
-// ---------------------------------------------------------------------------
-
-export interface ConversationsPageProps {
-  conversations: AiConvListItemData[];
-  activeConversationId?: string;
-  /** Contact for the currently-selected conversation. */
-  contact?: AiConvContact;
-  status?: AiConvStatus;
-  mode?: AiConvMode;
-  messages?: AiConvMessage[];
-  aiFields?: AiConvDataField[];
-  appointment?: AiConvAppointmentData;
-  /** When the lead first contacted via the chatbot. */
-  leadFirstSeen?: string;
-  /** Traffic source label (e.g. "Website Chatbot"). */
-  leadSource?: string;
-  /** Conversation topic tag — e.g. "Buy a Home", "Refinance", "Investment". */
-  leadTopic?: string;
-  searchQuery?: string;
-  activeFilter?: AiConvFilterTab;
-  /** Filter conversation list by channel type. */
-  channelFilter?: AiConvChannelFilter;
-  /** Active reply channel — "chat" (default) or "email". */
-  channel?: AiConvChannel;
-  onChannelChange?: (channel: AiConvChannel) => void;
-  /**
-   * When true, the Email tab is shown in the composer. Defaults to false.
-   */
-  isEmailIntegrated?: boolean;
-  inputValue?: string;
-  internalNotes?: string;
-  showLeadPanel?: boolean;
-  hasMore?: boolean;
-  isLoadingMore?: boolean;
-  /** True when older messages can be loaded for the active conversation. */
-  hasMoreMessages?: boolean;
-  /** True while a `onLoadMoreMessages` request is in-flight. */
-  isLoadingMoreMessages?: boolean;
-  /** Fired when the consumer should fetch older messages for the active conversation. */
-  onLoadMoreMessages?: () => void;
-  onSelectConversation?: (id: string) => void;
-  onRead?: (id: string) => void;
-  onSearchChange?: (v: string) => void;
-  onFilterChange?: (f: AiConvFilterTab) => void;
-  onChannelFilterChange?: (f: AiConvChannelFilter) => void;
-  onInputChange?: (v: string) => void;
-  /** Fired when the user sends a chat message. */
-  onSend?: (content: string) => void;
-  /** Fired when the user sends an email. */
-  onSendEmail?: (payload: AiConvEmailPayload) => void;
-  onTakeOver?: () => void;
-  onLetAiHandle?: () => void;
-  onReopen?: () => void;
-  onMarkUrgent?: () => void;
-  onUnmarkUrgent?: () => void;
-  onArchive?: () => void;
-  onAssignToAdvisor?: () => void;
-  /** True when this lead is already a contact in the system. Disables Add to Contacts. */
-  isKnownContact?: boolean;
-  onAddToContacts?: () => void;
-  onCreateOpportunity?: () => void;
-  onBookAppointment?: () => void;
-  onApproveAppointment?: () => void;
-  onDeclineAppointment?: () => void;
-  onRescheduleAppointment?: (contactId: string) => void;
-  onNotesChange?: (v: string) => void;
-  onToggleLeadPanel?: () => void;
-  onLoadMore?: () => void;
-  isAiTyping?: boolean;
-  notesSaveStatus?: "idle" | "saving" | "saved";
-  className?: string;
-}
-
-export function ConversationsPage({
-  conversations,
-  activeConversationId,
-  contact,
-  status = "ai-active",
-  mode = "ai",
-  messages = [],
-  aiFields = [],
-  appointment,
-  leadFirstSeen,
-  leadSource,
-  leadTopic,
-  searchQuery,
-  activeFilter,
-  channelFilter,
-  onChannelFilterChange,
-  channel,
-  onChannelChange,
-  isEmailIntegrated,
-  inputValue,
-  internalNotes,
-  showLeadPanel = true,
-  hasMore,
-  isLoadingMore,
-  hasMoreMessages,
-  isLoadingMoreMessages,
-  onLoadMoreMessages,
-  isAiTyping,
-  notesSaveStatus,
-  onSelectConversation,
-  onRead,
-  onSearchChange,
-  onFilterChange,
-  onInputChange,
-  onSend,
-  onSendEmail,
-  onTakeOver,
-  onLetAiHandle,
-  onReopen,
-  onMarkUrgent,
-  onUnmarkUrgent,
-  onArchive,
-  onAssignToAdvisor,
-  isKnownContact,
-  onAddToContacts,
-  onCreateOpportunity,
-  onBookAppointment,
-  onApproveAppointment,
-  onDeclineAppointment,
-  onRescheduleAppointment,
-  onNotesChange,
-  onToggleLeadPanel,
-  onLoadMore,
-  className,
-}: ConversationsPageProps) {
-  // Mobile panel state — "list" | "chat" | "lead"
-  const [mobilePanel, setMobilePanel] = useState<"list" | "chat" | "lead">(
-    "list",
-  );
-
-  const handleSelectConversation = (id: string) => {
-    onSelectConversation?.(id);
-    setMobilePanel("chat");
-  };
-
-  const handleToggleLeadPanel = () => {
-    onToggleLeadPanel?.();
-    // When expanding lead panel → go to lead on mobile; collapsing → back to chat
-    setMobilePanel(showLeadPanel ? "chat" : "lead");
-  };
-
-  return (
-    <TooltipProvider>
-      <div
-        className={cn("flex h-full overflow-hidden bg-background", className)}
-      >
-        {/* Left — Conversation List */}
-        <ConversationList
-          conversations={conversations}
-          activeId={activeConversationId}
-          searchQuery={searchQuery}
-          activeFilter={activeFilter}
-          channelFilter={channelFilter}
-          hasMore={hasMore}
-          isLoadingMore={isLoadingMore}
-          onSearchChange={onSearchChange}
-          onFilterChange={onFilterChange}
-          onChannelFilterChange={onChannelFilterChange}
-          onSelect={handleSelectConversation}
-          onRead={onRead}
-          onLoadMore={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",
-          )}
-        />
-
-        {/* Center — Chat Thread */}
-        {contact ? (
-          <ChatThread
-            key={contact.id}
-            contact={contact}
-            status={status}
-            mode={mode}
-            messages={messages}
-            isAiTyping={isAiTyping}
-            channel={channel}
-            onChannelChange={onChannelChange}
-            isEmailIntegrated={isEmailIntegrated}
-            inputValue={inputValue}
-            onInputChange={onInputChange}
-            onSend={onSend}
-            onSendEmail={onSendEmail}
-            onTakeOver={onTakeOver}
-            onLetAiHandle={onLetAiHandle}
-            onReopen={onReopen}
-            onMarkUrgent={onMarkUrgent}
-            onUnmarkUrgent={onUnmarkUrgent}
-            onArchive={onArchive}
-            onAssignToAdvisor={onAssignToAdvisor}
-            hasMoreMessages={hasMoreMessages}
-            isLoadingMoreMessages={isLoadingMoreMessages}
-            onLoadMoreMessages={onLoadMoreMessages}
-            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",
-            )}
-          />
-        ) : (
-          <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",
-            )}
-          >
-            <div className="flex flex-col items-center gap-2 text-muted-foreground">
-              <MessageSquare className="size-10 opacity-30" />
-              <p className="text-sm">Select a conversation</p>
-            </div>
-          </div>
-        )}
-
-        {/* Right — Lead Info Panel */}
-        {contact && (
-          <>
-            {/* Desktop: always in DOM, width-animated. Mobile: show/hide by mobilePanel. */}
-            <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",
-              )}
-            >
-              <LeadInfoPanel
-                contact={contact}
-                firstSeen={leadFirstSeen}
-                source={leadSource}
-                topic={leadTopic}
-                aiFields={aiFields}
-                appointment={appointment}
-                internalNotes={internalNotes}
-                notesSaveStatus={notesSaveStatus}
-                isKnownContact={isKnownContact}
-                onAddToContacts={onAddToContacts}
-                onCreateOpportunity={onCreateOpportunity}
-                onBookAppointment={onBookAppointment}
-                onApproveAppointment={onApproveAppointment}
-                onDeclineAppointment={onDeclineAppointment}
-                onRescheduleAppointment={onRescheduleAppointment}
-                onNotesChange={onNotesChange}
-                onToggleCollapse={handleToggleLeadPanel}
-                onBack={() => setMobilePanel("chat")}
-                className="flex h-full w-full flex-col border-l border-border md:w-[320px]"
-              />
-            </div>
-
-            {/* Collapsed expand button — desktop only, shown when panel is closed */}
-            {!showLeadPanel && onToggleLeadPanel && (
-              <div className="hidden shrink-0 items-start border-l border-border pt-[29px] md:flex">
-                <Tooltip>
-                  <TooltipTrigger
-                    render={
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="size-8"
-                        aria-label="Show lead info"
-                        onClick={handleToggleLeadPanel}
-                      >
-                        <ChevronLeft className="size-4" />
-                      </Button>
-                    }
-                  />
-                  <TooltipContent>Show lead info</TooltipContent>
-                </Tooltip>
-              </div>
-            )}
-          </>
-        )}
-      </div>
-    </TooltipProvider>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// AiConvAssignAdvisorDialog
-// ---------------------------------------------------------------------------
-
-export interface AiConvAssignAdvisorDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  advisors: AiConvAdvisor[];
-  /** Currently selected advisor id */
-  value: string;
-  onValueChange: (id: string) => void;
-  onConfirm: () => void;
-}
-
-export function AiConvAssignAdvisorDialog({
-  open,
-  onOpenChange,
-  advisors,
-  value,
-  onValueChange,
-  onConfirm,
-}: AiConvAssignAdvisorDialogProps) {
-  const [search, setSearch] = useState("");
-  const [roleFilter, setRoleFilter] = useState("");
-
-  const roles = Array.from(
-    new Set(advisors.map((a) => a.role).filter(Boolean)),
-  ) as string[];
-
-  const filtered = advisors.filter(
-    (a) =>
-      a.name.toLowerCase().includes(search.toLowerCase()) &&
-      (!roleFilter || a.role === roleFilter),
-  );
-
-  const handleOpenChange = (v: boolean) => {
-    onOpenChange(v);
-    if (!v) {
-      setSearch("");
-      setRoleFilter("");
-    }
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Assign to advisor</DialogTitle>
-          <DialogDescription>
-            Choose an advisor to handle this conversation.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="flex flex-col gap-0">
-          {/* Role filter */}
-          {roles.length > 0 && (
-            <div className="pb-3">
-              <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);
-                }}
-              >
-                <ToggleGroupItem value="__all__">All</ToggleGroupItem>
-                {roles.map((role) => (
-                  <ToggleGroupItem key={role} value={role}>
-                    {role}
-                  </ToggleGroupItem>
-                ))}
-              </ToggleGroup>
-            </div>
-          )}
-          {/* Search */}
-          <div className="flex items-center gap-2 border border-input px-3">
-            <Search className="size-4 shrink-0 text-muted-foreground" />
-            <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"
-            />
-          </div>
-          {/* List */}
-          <div className="max-h-52 overflow-y-auto border border-t-0 border-input">
-            {filtered.length === 0 ? (
-              <p className="py-6 text-center text-sm text-muted-foreground">
-                No advisors found.
-              </p>
-            ) : (
-              filtered.map((advisor) => (
-                <button
-                  key={advisor.id}
-                  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",
-                  )}
-                >
-                  <Avatar size="sm">
-                    <AvatarFallback className="font-semibold">
-                      {advisor.initials}
-                    </AvatarFallback>
-                  </Avatar>
-                  <div className="min-w-0 flex-1">
-                    <p className="truncate text-sm">{advisor.name}</p>
-                    {advisor.role && (
-                      <p className="truncate text-xs text-muted-foreground">
-                        {advisor.role}
-                      </p>
-                    )}
-                  </div>
-                </button>
-              ))
-            )}
-          </div>
-        </div>
-        <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
-            Cancel
-          </Button>
-          <Button onClick={onConfirm}>Assign</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}