@wealthx/shadcn 1.3.2 → 1.3.3

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

@@ -0,0 +1,1690 @@
+import React, { 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 { 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 { 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 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;
+}
+
+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;
+  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" />
+            )}
+            <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,
+): AiConvListItemData[] {
+  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;
+  });
+}
+
+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;
+  hasMore?: boolean;
+  isLoadingMore?: boolean;
+  onSearchChange?: (v: string) => void;
+  onFilterChange?: (f: AiConvFilterTab) => void;
+  onSelect?: (id: string) => void;
+  onRead?: (id: string) => void;
+  onLoadMore?: () => void;
+  className?: string;
+}
+
+export function ConversationList({
+  conversations,
+  activeId,
+  searchQuery = "",
+  activeFilter = "all",
+  hasMore,
+  isLoadingMore,
+  onSearchChange,
+  onFilterChange,
+  onSelect,
+  onRead,
+  onLoadMore,
+  className,
+}: ConversationListProps) {
+  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")}>
+        {/* Search */}
+        <div className="border-b border-border p-3 shrink-0">
+          <div className="relative">
+            <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>
+        </div>
+
+        {/* Filter tabs */}
+        <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,
+          );
+          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",
+            isBot && "border border-border bg-muted/60 text-foreground",
+            isVisitor && "border border-border bg-background text-foreground",
+            isAdvisor && "bg-primary text-primary-foreground",
+          )}
+        >
+          {content}
+        </div>
+
+        {timestamp && (
+          <span className="text-caption text-muted-foreground">
+            {timestamp}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ChatComposer
+// ---------------------------------------------------------------------------
+
+export interface ChatComposerProps {
+  mode: AiConvMode;
+  inputValue?: string;
+  onInputChange?: (v: string) => void;
+  onSend?: (v: string) => void;
+  onTakeOver?: () => void;
+  onLetAiHandle?: () => void;
+  className?: string;
+}
+
+export function ChatComposer({
+  mode,
+  inputValue = "",
+  onInputChange,
+  onSend,
+  onTakeOver,
+  onLetAiHandle,
+  className,
+}: ChatComposerProps) {
+  // AI mode — informational banner only; primary Take Over button is in the thread header
+  if (mode === "ai") {
+    return (
+      <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,
+        )}
+      >
+        <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>
+    );
+  }
+
+  // Manual mode — full composer
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-2 border-t border-border bg-background p-3",
+        className,
+      )}
+    >
+      <Textarea
+        value={inputValue}
+        onChange={(e) => onInputChange?.(e.target.value)}
+        placeholder="Reply to lead..."
+        rows={3}
+        className="resize-none text-sm"
+      />
+      <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>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ChatThread
+// ---------------------------------------------------------------------------
+
+export interface ChatThreadProps {
+  contact: AiConvContact;
+  status: AiConvStatus;
+  mode: AiConvMode;
+  messages: AiConvMessage[];
+  isAiTyping?: boolean;
+  inputValue?: string;
+  onInputChange?: (v: string) => void;
+  onSend?: (v: string) => void;
+  onTakeOver?: () => void;
+  onLetAiHandle?: () => void;
+  onReopen?: () => void;
+  onMarkUrgent?: () => void;
+  onUnmarkUrgent?: () => void;
+  onArchive?: () => void;
+  onAssignToAdvisor?: () => 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,
+  inputValue,
+  onInputChange,
+  onSend,
+  onTakeOver,
+  onLetAiHandle,
+  onReopen,
+  onMarkUrgent,
+  onUnmarkUrgent,
+  onArchive,
+  onAssignToAdvisor,
+  onBack,
+  onShowLeadInfo,
+  className,
+}: ChatThreadProps) {
+  const aiIsHandling = mode === "ai";
+  const isClosed = status === "closed";
+
+  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
+        className="flex flex-1 flex-col gap-4 overflow-y-auto p-4"
+        tabIndex={0}
+      >
+        {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}
+          inputValue={inputValue}
+          onInputChange={onInputChange}
+          onSend={onSend}
+          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",
+};
+
+interface AppointmentSectionProps {
+  appointment: AiConvAppointmentData;
+  contactId: string;
+  isAnonymous: boolean;
+  onApproveAppointment?: () => void;
+  onDeclineAppointment?: () => void;
+  onRescheduleAppointment?: (contactId: string) => void;
+}
+
+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>
+      <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;
+  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",
+  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>
+              </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;
+  searchQuery?: string;
+  activeFilter?: AiConvFilterTab;
+  inputValue?: string;
+  internalNotes?: string;
+  showLeadPanel?: boolean;
+  hasMore?: boolean;
+  isLoadingMore?: boolean;
+  onSelectConversation?: (id: string) => void;
+  onRead?: (id: string) => void;
+  onSearchChange?: (v: string) => void;
+  onFilterChange?: (f: AiConvFilterTab) => void;
+  onInputChange?: (v: string) => void;
+  onSend?: (v: string) => 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,
+  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,
+}: 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}
+          hasMore={hasMore}
+          isLoadingMore={isLoadingMore}
+          onSearchChange={onSearchChange}
+          onFilterChange={onFilterChange}
+          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
+            contact={contact}
+            status={status}
+            mode={mode}
+            messages={messages}
+            isAiTyping={isAiTyping}
+            inputValue={inputValue}
+            onInputChange={onInputChange}
+            onSend={onSend}
+            onTakeOver={onTakeOver}
+            onLetAiHandle={onLetAiHandle}
+            onReopen={onReopen}
+            onMarkUrgent={onMarkUrgent}
+            onUnmarkUrgent={onUnmarkUrgent}
+            onArchive={onArchive}
+            onAssignToAdvisor={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",
+            )}
+          />
+        ) : (
+          <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}
+                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 align="top">
+        <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>
+  );
+}