@handled-ai/design-system 0.18.58 → 0.19.0-rc.1

package/dist/components/conversation-panel.js

@@ -0,0 +1,636 @@
+"use client"
+
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  ChevronDown,
+  ChevronUp,
+  CornerUpLeft,
+  CheckCheck,
+  MailOpen,
+  Reply,
+  ReplyAll,
+  Eye,
+  Send,
+  Lock,
+  Pause,
+  GitMerge,
+  Check,
+  X
+} from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { getInitials } from "../lib/user-display.js";
+import { BRAND_ICONS } from "../lib/icons.js";
+import { htmlToTextSnippet, sanitizeHtml } from "../internal/safe-html.js";
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
+import { Button } from "./button.js";
+import { Switch } from "./switch.js";
+import { Textarea } from "./textarea.js";
+import { RichTextToolbar } from "./rich-text-toolbar.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter
+} from "./dialog.js";
+const PROSE = cn(
+  "text-sm leading-[1.62] text-foreground/90 break-words",
+  "[&_p]:my-2 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0",
+  "[&_a]:text-[#1a73e8] [&_a]:underline-offset-2 hover:[&_a]:underline",
+  "[&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5",
+  "[&_img]:max-w-full [&_img]:h-auto"
+);
+function escapeHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function textToHtml(text) {
+  return text.split(/\n{2,}/).map((p) => p.trim()).filter(Boolean).map((p) => `<p>${escapeHtml(p).replace(/\n/g, "<br>")}</p>`).join("");
+}
+function GmailMark({ size = 14 }) {
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: BRAND_ICONS.gmail.icon,
+        alt: "Gmail",
+        width: size,
+        height: size,
+        style: { width: size, height: size, objectFit: "contain", display: "block" }
+      }
+    )
+  );
+}
+function PersonAvatar({ person, size = "sm" }) {
+  return /* @__PURE__ */ jsxs(Avatar, { size, children: [
+    person.avatarUrl ? /* @__PURE__ */ jsx(AvatarImage, { src: person.avatarUrl, alt: person.name }) : null,
+    /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-muted text-muted-foreground text-[10px] font-medium uppercase", children: getInitials({ name: person.name, email: person.email }) })
+  ] });
+}
+function firstName(name) {
+  return name.split(" ")[0] || name;
+}
+const STATUS_PILL = {
+  responded: { label: "New reply", cls: "bg-status-active-bg text-status-active-fg border-status-active-border" },
+  awaiting: { label: "Awaiting", cls: "bg-status-pending-bg text-status-pending-fg border-status-pending-border" },
+  viewing: { label: "Viewing", cls: "bg-muted text-muted-foreground border-border" }
+};
+const STATUS_DOT = {
+  responded: "bg-status-active-fg",
+  awaiting: "bg-status-pending-fg",
+  viewing: "bg-muted-foreground/50"
+};
+function effectiveStatus(t) {
+  return t.canReply === false ? "viewing" : t.status;
+}
+function MessageView({
+  message,
+  expanded,
+  onToggle,
+  me
+}) {
+  var _a, _b, _c;
+  const [quoteOpen, setQuoteOpen] = React.useState(false);
+  const snippet = (_b = (_a = message.body) == null ? void 0 : _a.split("\n").find(Boolean)) != null ? _b : message.bodyHtml ? htmlToTextSnippet(message.bodyHtml, 140) : "";
+  if (!expanded) {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "data-slot": "conv-message-collapsed",
+        onClick: onToggle,
+        className: "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left hover:bg-muted/40",
+        children: [
+          /* @__PURE__ */ jsx(PersonAvatar, { person: message.from }),
+          /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground min-w-0 flex-1 truncate text-[13px]", children: [
+            /* @__PURE__ */ jsx("b", { className: "text-foreground", children: firstName(message.from.name) }),
+            " \xB7 ",
+            snippet
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60 shrink-0 text-xs", children: (_c = message.ago) != null ? _c : message.date }),
+          /* @__PURE__ */ jsx(ChevronDown, { size: 13, className: "text-muted-foreground shrink-0" })
+        ]
+      }
+    );
+  }
+  const toLabel = me && message.to.email === me.email ? "me" : firstName(message.to.name);
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "conv-message", className: "rounded-md border border-border bg-background", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onToggle,
+        className: "flex w-full items-start gap-2 px-3 py-2 text-left",
+        children: [
+          /* @__PURE__ */ jsx(PersonAvatar, { person: message.from, size: "default" }),
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxs("span", { className: "flex flex-wrap items-baseline gap-x-1.5", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold", children: message.from.name }),
+              /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground/60 truncate text-xs", children: [
+                "<",
+                message.from.email,
+                ">"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground block text-xs", children: [
+              "to ",
+              /* @__PURE__ */ jsx("b", { children: toLabel })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-2", children: [
+            message.receipt ? /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground inline-flex items-center gap-1 text-[11px]", children: [
+              message.receipt.kind === "new" ? /* @__PURE__ */ jsx(CornerUpLeft, { size: 11 }) : message.receipt.kind === "read" ? /* @__PURE__ */ jsx(CheckCheck, { size: 11 }) : /* @__PURE__ */ jsx(MailOpen, { size: 11 }),
+              message.receipt.label
+            ] }) : null,
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60 text-xs", children: message.date }),
+            /* @__PURE__ */ jsx(ChevronUp, { size: 13, className: "text-muted-foreground" })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "px-3 pb-3", children: [
+      message.bodyHtml ? /* @__PURE__ */ jsx("div", { className: PROSE, dangerouslySetInnerHTML: { __html: sanitizeHtml(message.bodyHtml) } }) : /* @__PURE__ */ jsx("div", { className: cn(PROSE, "whitespace-pre-line"), children: message.body }),
+      message.quoted ? /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setQuoteOpen((v) => !v),
+            className: "text-muted-foreground hover:bg-muted rounded px-1.5 text-xs leading-5",
+            title: quoteOpen ? "Hide quoted text" : "Show quoted text",
+            children: "\u2022\u2022\u2022"
+          }
+        ),
+        quoteOpen ? /* @__PURE__ */ jsxs("div", { className: "border-border text-muted-foreground mt-1 border-l-2 pl-3 text-[13px]", children: [
+          /* @__PURE__ */ jsx("p", { className: "mb-1", dangerouslySetInnerHTML: { __html: sanitizeHtml(message.quoted.attr) } }),
+          /* @__PURE__ */ jsx("div", { className: PROSE, dangerouslySetInnerHTML: { __html: sanitizeHtml(message.quoted.html) } })
+        ] }) : null
+      ] }) : null
+    ] })
+  ] });
+}
+function ReplyComposer({
+  thread,
+  me,
+  replyAll,
+  tenantName,
+  onClose,
+  onSend,
+  onDraft
+}) {
+  var _a, _b;
+  const [body, setBody] = React.useState((_a = thread.draft) != null ? _a : "");
+  const [sig, setSig] = React.useState(true);
+  const [preview, setPreview] = React.useState(false);
+  const [sending, setSending] = React.useState(false);
+  const [sendError, setSendError] = React.useState(null);
+  const ccList = replyAll ? (_b = thread.cc) != null ? _b : [] : [];
+  const subject = /^re:/i.test(thread.subject) ? thread.subject : `Re: ${thread.subject}`;
+  const previewHtml = textToHtml(body) + (sig && thread.signature ? textToHtml(thread.signature) : "");
+  const handleSend = async () => {
+    setSending(true);
+    setSendError(null);
+    try {
+      await onSend(body, sig);
+      setPreview(false);
+    } catch (error) {
+      setSendError(error instanceof Error ? error.message : "Could not send this reply. Please try again.");
+    } finally {
+      setSending(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "conv-reply", className: "border-border bg-muted/20 rounded-md border p-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-2", children: [
+      me ? /* @__PURE__ */ jsx(PersonAvatar, { person: me }) : null,
+      /* @__PURE__ */ jsx("span", { className: "flex-1 text-[13px] font-medium", children: replyAll ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        "Reply all",
+        " ",
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground font-normal", children: [
+          "\xB7 ",
+          1 + ccList.length,
+          " recipients"
+        ] })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        "Reply to ",
+        /* @__PURE__ */ jsx("b", { children: firstName(thread.contact.name) })
+      ] }) }),
+      /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground inline-flex items-center gap-1 text-[11px]", children: [
+        /* @__PURE__ */ jsx(GitMerge, { size: 11 }),
+        " Same thread"
+      ] }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, title: "Discard reply", className: "text-muted-foreground hover:text-foreground", children: /* @__PURE__ */ jsx(X, { size: 15 }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "border-border mb-2 space-y-1 border-b pb-2 text-[13px]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground w-12 shrink-0 text-[11px] font-medium", children: "To" }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: thread.contact.name }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60 truncate text-xs", children: thread.contact.email })
+      ] }),
+      replyAll && ccList.length ? /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground w-12 shrink-0 text-[11px] font-medium", children: "Cc" }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: ccList.map((c) => c.name).join(", ") })
+      ] }) : null,
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground w-12 shrink-0 text-[11px] font-medium", children: "Subject" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: subject }),
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground/60 ml-auto inline-flex items-center gap-1 text-[11px]", children: [
+          /* @__PURE__ */ jsx(Lock, { size: 10 }),
+          " on thread"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        value: body,
+        onChange: (e) => setBody(e.target.value),
+        placeholder: "Write your reply\u2026",
+        className: "min-h-28 resize-y text-sm",
+        onKeyDown: (e) => {
+          if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+            e.preventDefault();
+            setPreview(true);
+          }
+        }
+      }
+    ),
+    sig && thread.signature ? /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground mt-2 whitespace-pre-line border-l-2 border-border pl-3 text-[13px]", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60 mr-1", children: "--" }),
+      thread.signature
+    ] }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsx(RichTextToolbar, {}),
+      /* @__PURE__ */ jsxs("label", { className: "text-muted-foreground ml-auto inline-flex cursor-pointer items-center gap-1.5 text-[12px]", children: [
+        /* @__PURE__ */ jsx(Switch, { checked: sig, onCheckedChange: setSig, "aria-label": "Toggle signature" }),
+        "Signature"
+      ] }),
+      /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "sm", disabled: sending, onClick: () => setPreview(true), children: [
+        /* @__PURE__ */ jsx(Eye, { size: 14 }),
+        " Preview"
+      ] }),
+      /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", disabled: sending, onClick: () => setPreview(true), children: [
+        /* @__PURE__ */ jsx(Send, { size: 14 }),
+        " Send"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Dialog, { open: preview, onOpenChange: (open) => {
+      if (!sending) setPreview(open);
+    }, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-xl", children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-1.5 text-[15px]", children: [
+          /* @__PURE__ */ jsx(Eye, { size: 15 }),
+          " Preview: this is exactly what sends"
+        ] }),
+        /* @__PURE__ */ jsxs(DialogDescription, { children: [
+          "Stays on the ",
+          subject.replace(/^Re:\s*/i, ""),
+          " thread. Gmail keeps it threaded."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "border-border space-y-1 rounded-md border p-3 text-[13px]", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "To " }),
+          /* @__PURE__ */ jsx("b", { children: thread.contact.name }),
+          " ",
+          /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground/60", children: [
+            "<",
+            thread.contact.email,
+            ">"
+          ] })
+        ] }),
+        replyAll && ccList.length ? /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground", children: [
+          "Cc ",
+          ccList.map((c) => c.name).join(", ")
+        ] }) : null,
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Subject " }),
+          subject
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: cn(PROSE, "max-h-72 overflow-auto"), dangerouslySetInnerHTML: { __html: previewHtml } }),
+      sendError ? /* @__PURE__ */ jsx("p", { role: "alert", className: "text-destructive text-sm", children: sendError }) : null,
+      /* @__PURE__ */ jsxs(DialogFooter, { className: "sm:justify-between", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            disabled: sending,
+            onClick: () => {
+              setPreview(false);
+              onDraft(body, sig);
+            },
+            className: "text-muted-foreground hover:text-foreground inline-flex items-center gap-1.5 text-[13px] disabled:pointer-events-none disabled:opacity-50",
+            children: [
+              /* @__PURE__ */ jsx(GmailMark, { size: 14 }),
+              " Open draft in Gmail"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", disabled: sending, onClick: () => setPreview(false), children: "Keep editing" }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              disabled: sending,
+              onClick: handleSend,
+              children: [
+                /* @__PURE__ */ jsx(Send, { size: 14 }),
+                " ",
+                sending ? "Sending..." : "Send now"
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] }) }),
+    tenantName ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground/70 mt-2 text-[11px]", children: "Sends via Gmail \xB7 playbooks stay stopped." }) : null
+  ] });
+}
+function ThreadBody({
+  thread,
+  me,
+  tenantName,
+  onSendReply,
+  onCreateGmailDraft,
+  onOpenInGmail
+}) {
+  const canReply = thread.canReply !== false;
+  const hasCc = !!(thread.cc && thread.cc.length);
+  const [mode, setMode] = React.useState("idle");
+  const [replyAll, setReplyAll] = React.useState(false);
+  const [expanded, setExpanded] = React.useState(() => {
+    const o = {};
+    thread.messages.forEach((m, i) => {
+      o[m.id] = i === thread.messages.length - 1;
+    });
+    return o;
+  });
+  const toggle = (id) => setExpanded((e) => __spreadProps(__spreadValues({}, e), { [id]: !e[id] }));
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "conv-thread-body", className: "space-y-2", children: [
+    canReply && thread.paused ? /* @__PURE__ */ jsxs("div", { className: "border-status-pending-border bg-status-pending-bg text-status-pending-fg flex items-start gap-2 rounded-md border p-2.5 text-[12px]", children: [
+      /* @__PURE__ */ jsx(Pause, { size: 13, className: "mt-0.5 shrink-0" }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsx("b", { children: "Follow-up actions stopped." }),
+        " Your ",
+        thread.paused.playbook,
+        " next steps won\u2019t send automatically while this conversation is live. Continue it in ",
+        tenantName != null ? tenantName : "the app",
+        " or Gmail."
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: thread.messages.map((m) => /* @__PURE__ */ jsx(MessageView, { message: m, expanded: !!expanded[m.id], onToggle: () => toggle(m.id), me }, m.id)) }),
+    !canReply ? /* @__PURE__ */ jsxs("div", { className: "border-border bg-muted/30 text-muted-foreground flex items-start gap-2 rounded-md border p-2.5 text-[12px]", children: [
+      /* @__PURE__ */ jsx(Eye, { size: 14, className: "mt-0.5 shrink-0" }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsx("b", { children: "Viewing only." }),
+        " You\u2019re not a participant on this thread, so replying is disabled here."
+      ] })
+    ] }) : null,
+    canReply && mode === "idle" ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", onClick: () => {
+        setReplyAll(false);
+        setMode("replying");
+      }, children: [
+        /* @__PURE__ */ jsx(Reply, { size: 15 }),
+        " Reply"
+      ] }),
+      hasCc ? /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => {
+        setReplyAll(true);
+        setMode("replying");
+      }, children: [
+        /* @__PURE__ */ jsx(ReplyAll, { size: 14 }),
+        " Reply all"
+      ] }) : null,
+      /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onOpenInGmail == null ? void 0 : onOpenInGmail(thread.threadId), children: [
+        /* @__PURE__ */ jsx(GmailMark, { size: 14 }),
+        " Open in Gmail"
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground/70 ml-auto inline-flex items-center gap-1 text-[11px]", children: [
+        /* @__PURE__ */ jsx(GitMerge, { size: 12 }),
+        " Stays on this thread"
+      ] })
+    ] }) : null,
+    canReply && mode === "replying" ? /* @__PURE__ */ jsx(
+      ReplyComposer,
+      {
+        thread,
+        me,
+        replyAll,
+        tenantName,
+        onClose: () => setMode("idle"),
+        onSend: async (body, includeSignature) => {
+          await (onSendReply == null ? void 0 : onSendReply({ threadId: thread.threadId, body, includeSignature, replyAll }));
+          setMode("sent");
+        },
+        onDraft: (body, includeSignature) => {
+          onCreateGmailDraft == null ? void 0 : onCreateGmailDraft({ threadId: thread.threadId, body, includeSignature, replyAll });
+          setMode("draft");
+        }
+      }
+    ) : null,
+    canReply && mode === "sent" ? /* @__PURE__ */ jsxs("div", { className: "border-status-active-border bg-status-active-bg flex items-center gap-2 rounded-md border p-3 text-[13px]", children: [
+      /* @__PURE__ */ jsx(Check, { size: 16, className: "text-status-active-fg shrink-0" }),
+      /* @__PURE__ */ jsxs("span", { className: "flex-1", children: [
+        /* @__PURE__ */ jsx("b", { children: replyAll ? "Reply all sent" : "Reply sent" }),
+        " \xB7 added to the thread. Delivered to",
+        " ",
+        /* @__PURE__ */ jsx("b", { children: thread.contact.name }),
+        ". This action stays ",
+        /* @__PURE__ */ jsx("b", { children: "Pending" }),
+        "; playbooks remain stopped."
+      ] }),
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setMode("idle"), children: "Done" })
+    ] }) : null,
+    canReply && mode === "draft" ? /* @__PURE__ */ jsxs("div", { className: "border-border bg-muted/30 flex items-center gap-2 rounded-md border p-3 text-[13px]", children: [
+      /* @__PURE__ */ jsx(GmailMark, { size: 16 }),
+      /* @__PURE__ */ jsxs("span", { className: "flex-1", children: [
+        /* @__PURE__ */ jsx("b", { children: "Draft saved to Gmail." }),
+        " Waiting on the ",
+        /* @__PURE__ */ jsxs("b", { children: [
+          "Re: ",
+          thread.subject
+        ] }),
+        " thread; open it there to finish. Nothing was sent."
+      ] }),
+      /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onOpenInGmail == null ? void 0 : onOpenInGmail(thread.threadId), children: [
+        /* @__PURE__ */ jsx(GmailMark, { size: 14 }),
+        " Open in Gmail"
+      ] }),
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setMode("idle"), children: "Done" })
+    ] }) : null
+  ] });
+}
+function ThreadRow({
+  thread,
+  open,
+  onToggleOpen,
+  me,
+  tenantName,
+  onSendReply,
+  onCreateGmailDraft,
+  onOpenInGmail
+}) {
+  var _a, _b;
+  const status = effectiveStatus(thread);
+  const last = thread.messages[thread.messages.length - 1];
+  const who = (last == null ? void 0 : last.direction) === "inbound" ? firstName(last.from.name) : "You";
+  const lastSnippet = (_b = (_a = last == null ? void 0 : last.body) == null ? void 0 : _a.split("\n").find(Boolean)) != null ? _b : (last == null ? void 0 : last.bodyHtml) ? htmlToTextSnippet(last.bodyHtml, 120) : "";
+  const pill = STATUS_PILL[status];
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "conv-thread", "data-open": open ? "true" : void 0, className: "border-border border-b last:border-b-0", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onToggleOpen,
+        "aria-expanded": open,
+        className: "flex w-full items-center gap-2.5 px-3 py-2.5 text-left hover:bg-muted/30",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: cn("size-2 shrink-0 rounded-full", STATUS_DOT[status]), "aria-hidden": true }),
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "truncate text-[13px] font-semibold", children: thread.subject }),
+              /* @__PURE__ */ jsx("span", { className: cn("shrink-0 rounded border px-1.5 text-[10px] font-medium leading-4", pill.cls), children: pill.label })
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground block truncate text-xs", children: [
+              /* @__PURE__ */ jsx("b", { className: "text-foreground/80", children: thread.contact.name }),
+              " \xB7 ",
+              who,
+              ": ",
+              lastSnippet
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60 shrink-0 text-xs", children: thread.lastWhen }),
+          open ? /* @__PURE__ */ jsx(ChevronUp, { size: 15, className: "text-muted-foreground shrink-0" }) : /* @__PURE__ */ jsx(ChevronDown, { size: 15, className: "text-muted-foreground shrink-0" })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsx("div", { className: "px-3 pb-3", children: /* @__PURE__ */ jsx(
+      ThreadBody,
+      {
+        thread,
+        me,
+        tenantName,
+        onSendReply,
+        onCreateGmailDraft,
+        onOpenInGmail
+      }
+    ) }) : null
+  ] });
+}
+function ConversationPanel({
+  threads,
+  me,
+  tenantName,
+  onSendReply,
+  onCreateGmailDraft,
+  onOpenInGmail,
+  defaultOpenThreadId,
+  className
+}) {
+  const responded = threads.filter((t) => t.status === "responded" && t.canReply !== false).length;
+  const awaiting = threads.filter((t) => effectiveStatus(t) === "awaiting").length;
+  const anyPaused = threads.some((t) => t.paused);
+  const [hubOpen, setHubOpen] = React.useState(true);
+  const [openId, setOpenId] = React.useState(() => {
+    if (defaultOpenThreadId) return defaultOpenThreadId;
+    const firstResponded = threads.find((t) => t.status === "responded" && t.canReply !== false);
+    return firstResponded ? firstResponded.threadId : null;
+  });
+  if (!threads.length) return null;
+  const badge = responded > 0 ? { label: "Email response detected", dot: "bg-status-active-fg", ring: "bg-status-active-fg/30" } : awaiting > 0 ? { label: "Awaiting response", dot: "bg-status-pending-fg", ring: "bg-status-pending-fg/30" } : { label: "Conversations", dot: "bg-muted-foreground/50", ring: "bg-muted-foreground/20" };
+  const headTitle = responded > 0 ? `${responded} ${responded === 1 ? "reply needs" : "replies need"} your response` : awaiting > 0 ? `Awaiting response on ${awaiting} ${awaiting === 1 ? "thread" : "threads"}` : `${threads.length} email ${threads.length === 1 ? "thread" : "threads"}`;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "data-slot": "conversation-panel",
+      "data-responded": responded > 0 ? "true" : void 0,
+      className: cn("border-border bg-background overflow-hidden rounded-xl border", className),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setHubOpen((v) => !v),
+            "aria-expanded": hubOpen,
+            className: "flex w-full items-center gap-3 px-3 py-2.5 text-left",
+            children: [
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  "data-slot": "conversation-badge",
+                  className: cn(
+                    "inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[11px] font-semibold",
+                    responded > 0 ? "bg-status-active-bg text-status-active-fg" : awaiting > 0 ? "bg-status-pending-bg text-status-pending-fg" : "bg-muted text-muted-foreground"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxs("span", { className: "relative inline-flex size-2", children: [
+                      /* @__PURE__ */ jsx("span", { className: cn("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", badge.ring) }),
+                      /* @__PURE__ */ jsx("span", { className: cn("relative inline-flex size-2 rounded-full", badge.dot) })
+                    ] }),
+                    badge.label
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("span", { className: "block truncate text-[13px] font-semibold", children: headTitle }),
+                /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground block truncate text-xs", children: [
+                  threads.length,
+                  " ",
+                  threads.length === 1 ? "thread" : "threads",
+                  " on this action",
+                  anyPaused ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    " \xB7 ",
+                    /* @__PURE__ */ jsx("b", { children: "playbook stopped" })
+                  ] }) : null
+                ] })
+              ] }),
+              hubOpen ? /* @__PURE__ */ jsx(ChevronUp, { size: 16, className: "text-muted-foreground shrink-0" }) : /* @__PURE__ */ jsx(ChevronDown, { size: 16, className: "text-muted-foreground shrink-0" })
+            ]
+          }
+        ),
+        hubOpen ? /* @__PURE__ */ jsx("div", { className: "border-border border-t", children: threads.map((t) => /* @__PURE__ */ jsx(
+          ThreadRow,
+          {
+            thread: t,
+            open: openId === t.threadId,
+            onToggleOpen: () => setOpenId((cur) => cur === t.threadId ? null : t.threadId),
+            me,
+            tenantName,
+            onSendReply,
+            onCreateGmailDraft,
+            onOpenInGmail
+          },
+          t.threadId
+        )) }) : null
+      ]
+    }
+  );
+}
+export {
+  ConversationPanel
+};
+//# sourceMappingURL=conversation-panel.js.map