@wealthx/shadcn 1.5.24 → 1.5.25

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

@@ -0,0 +1,919 @@
+import React 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,
+  ChevronDown,
+  ChevronRight,
+  Flag,
+  Italic,
+  Link2,
+  Lock,
+  Mail,
+  MessageSquare,
+  MoreHorizontal,
+  Paperclip,
+  Send,
+  Underline,
+  UserCheck,
+} from "lucide-react";
+import { cn, getInitials } from "@/lib/utils";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Button, buttonVariants } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+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 type {
+  AiConvChannel,
+  AiConvContact,
+  AiConvMessage,
+  AiConvMessageRole,
+  AiConvMode,
+  AiConvStatus,
+} from "./types";
+import {
+  ContactAvatar,
+  displayContactName,
+  PANEL_HEADER_HEIGHT,
+} from "./helpers.tsx";
+import { ConversationStatusChip } from "./list";
+
+// ---------------------------------------------------------------------------
+// ChatBubble
+// ---------------------------------------------------------------------------
+
+export interface ChatBubbleProps {
+  message: AiConvMessage;
+  /** Channel the conversation is using — affects rendering style for email. */
+  channel?: AiConvChannel;
+  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, channel, className }: ChatBubbleProps) {
+  const { role, content, timestamp, senderName, subject } = message;
+  const isEmail = channel === "email";
+
+  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 flex-col gap-1",
+          isEmail ? "max-w-[85%] w-full" : "max-w-[70%]",
+          isAdvisor && "items-end",
+        )}
+      >
+        <span className="text-caption text-muted-foreground">
+          {displayName}
+        </span>
+
+        <div
+          className={cn(
+            "text-sm leading-relaxed break-words",
+            !isEmail && "px-3 py-2 [&_p]:m-0 [&_a]:underline",
+            isEmail && [
+              "border border-border bg-background px-4 py-3 w-full",
+              "[&_p]:mb-2 [&_p:last-child]:mb-0",
+              "[&_ul]:mb-2 [&_ul]:list-disc [&_ul]:pl-4",
+              "[&_ol]:mb-2 [&_ol]:list-decimal [&_ol]:pl-4",
+              "[&_li]:mb-0.5",
+              "[&_h1]:mb-2 [&_h1]:text-sm [&_h1]:font-bold",
+              "[&_h2]:mb-1.5 [&_h2]:text-sm [&_h2]:font-semibold",
+              "[&_h3]:mb-1 [&_h3]:text-sm [&_h3]:font-medium",
+              "[&_strong]:font-semibold [&_em]:italic",
+              "[&_a]:underline [&_a]:text-primary",
+              "[&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground [&_blockquote]:italic",
+              "[&_hr]:my-3 [&_hr]:border-border",
+            ],
+            !isEmail &&
+              isBot &&
+              "border border-border bg-muted/60 text-foreground [&_a]:text-primary",
+            !isEmail &&
+              isVisitor &&
+              "border border-border bg-background text-foreground [&_a]:text-primary",
+            !isEmail &&
+              isAdvisor &&
+              "bg-primary text-primary-foreground [&_a]:text-primary-foreground",
+            isEmail && isAdvisor && "bg-muted/30",
+          )}
+        >
+          {isEmail && subject && (
+            <div className="mb-2.5 border-b border-border pb-2">
+              <span className="text-xs font-medium text-muted-foreground">
+                Subject:
+              </span>{" "}
+              <span className="text-sm font-semibold text-foreground">
+                {subject}
+              </span>
+            </div>
+          )}
+          <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;
+  /** Pre-fills the Subject field with "Re: [emailReplySubject]" for email threads. */
+  emailReplySubject?: string;
+  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,
+  emailReplySubject,
+  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(
+    emailReplySubject ? `Re: ${emailReplySubject}` : "",
+  );
+  const [emailMode, setEmailMode] = React.useState<"reply" | "new">(
+    emailReplySubject ? "reply" : "new",
+  );
+
+  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);
+  };
+
+  const handleNewEmail = () => {
+    setEmailSubject("");
+    setEmailCc("");
+    setShowCc(false);
+    editor?.commands.clearContent();
+  };
+
+  const handleEmailModeChange = (mode: "reply" | "new") => {
+    setEmailMode(mode);
+    if (mode === "new") {
+      handleNewEmail();
+    } else {
+      setEmailSubject(emailReplySubject ? `Re: ${emailReplySubject}` : "");
+    }
+  };
+
+  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">
+                {emailReplySubject && (
+                  <>
+                    <ToggleGroup
+                      type="single"
+                      variant="outline"
+                      size="sm"
+                      spacing={0}
+                      value={[emailMode]}
+                      onValueChange={(values) => {
+                        const v = values[0] as "reply" | "new" | undefined;
+                        if (v) handleEmailModeChange(v);
+                      }}
+                      className="mr-1.5"
+                    >
+                      <ToggleGroupItem value="reply">Reply</ToggleGroupItem>
+                      <ToggleGroupItem value="new">New email</ToggleGroupItem>
+                    </ToggleGroup>
+                    <Separator orientation="vertical" className="mr-1.5 h-4" />
+                  </>
+                )}
+                <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>
+              <div className="flex items-center gap-2">
+                {onLetAiHandle && (
+                  <Button variant="outline" size="sm" onClick={onLetAiHandle}>
+                    <Bot className="mr-1.5 size-3.5" />
+                    Let AI Handle
+                  </Button>
+                )}
+                <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>
+          </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;
+  /** Pre-fills the email Subject field with "Re: [emailReplySubject]" for reply threads. */
+  emailReplySubject?: string;
+  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,
+  emailReplySubject,
+  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",
+        )}
+      >
+        {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">
+          <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>
+
+          <DropdownMenu>
+            <DropdownMenuTrigger
+              className={cn(
+                buttonVariants({ variant: "ghost", size: "icon" }),
+                "size-8",
+              )}
+              aria-label="More actions"
+            >
+              <MoreHorizontal className="size-4" />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              {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} channel={channel} />
+          ))
+        )}
+
+        {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}
+          emailReplySubject={emailReplySubject}
+        />
+      )}
+    </div>
+  );
+}