@handled-ai/design-system 0.8.0 → 0.9.0

package/dist/components/suggested-actions.js

@@ -0,0 +1,1538 @@
+"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,
+  Clock,
+  MessageSquare,
+  Undo2,
+  Redo2,
+  Bold,
+  Italic,
+  Underline,
+  AlignLeft,
+  List,
+  Trash,
+  Sparkles,
+  ThumbsUp,
+  ThumbsDown,
+  Check,
+  RefreshCw,
+  ArrowLeft,
+  Mail,
+  Phone,
+  X,
+  Users,
+  ExternalLink,
+  Copy,
+  PenLine,
+  ClipboardList,
+  Globe
+} from "lucide-react";
+import { Button } from "./button.js";
+function BrandIcon({ src, alt, className }) {
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt,
+      className: `${className != null ? className : ""} object-contain`,
+      draggable: false
+    }
+  );
+}
+function getActionTypeIcon(type, className, iconMap) {
+  switch (type) {
+    case "email":
+      return (iconMap == null ? void 0 : iconMap.gmail) ? /* @__PURE__ */ jsx(BrandIcon, { src: iconMap.gmail, alt: "Gmail", className }) : /* @__PURE__ */ jsx(Mail, { className });
+    case "slack":
+      return (iconMap == null ? void 0 : iconMap.slack) ? /* @__PURE__ */ jsx(BrandIcon, { src: iconMap.slack, alt: "Slack", className }) : /* @__PURE__ */ jsx(MessageSquare, { className });
+    case "ticket":
+      return (iconMap == null ? void 0 : iconMap.zendesk) ? /* @__PURE__ */ jsx(BrandIcon, { src: iconMap.zendesk, alt: "Zendesk", className }) : /* @__PURE__ */ jsx(MessageSquare, { className });
+    case "call":
+      return /* @__PURE__ */ jsx(Phone, { className });
+    case "manual":
+      return /* @__PURE__ */ jsx(ClipboardList, { className });
+    case "browser":
+      return /* @__PURE__ */ jsx(Globe, { className });
+    default:
+      return /* @__PURE__ */ jsx(Mail, { className });
+  }
+}
+const aiEditPills = ["Shorten it", "Make sound more like me", "Make longer", "Other"];
+function AiEditPanel({ onApply }) {
+  const [selectedPills, setSelectedPills] = React.useState([]);
+  const [description, setDescription] = React.useState("");
+  const [applying, setApplying] = React.useState(false);
+  const togglePill = React.useCallback((pill) => {
+    setSelectedPills((prev) => prev.includes(pill) ? prev.filter((p) => p !== pill) : [...prev, pill]);
+  }, []);
+  const handleApply = React.useCallback(() => {
+    if (selectedPills.length === 0 && description.trim().length === 0) return;
+    setApplying(true);
+    onApply == null ? void 0 : onApply(selectedPills, description);
+    setTimeout(() => {
+      setApplying(false);
+      setSelectedPills([]);
+      setDescription("");
+    }, 2e3);
+  }, [selectedPills, description, onApply]);
+  const hasInput = selectedPills.length > 0 || description.trim().length > 0;
+  return /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-2.5 animate-in fade-in slide-in-from-top-2 duration-200", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: aiEditPills.map((pill) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => togglePill(pill),
+        className: `px-2.5 py-1 rounded-full text-[11px] font-medium border transition-colors ${selectedPills.includes(pill) ? "bg-indigo-100 text-indigo-700 border-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-300 dark:border-indigo-800" : "bg-background text-muted-foreground border-border hover:bg-muted/50 hover:text-foreground"}`,
+        children: pill
+      },
+      pill
+    )) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: "flex-1 px-3 py-2 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-1 focus:ring-indigo-500 transition-colors placeholder:text-muted-foreground/50",
+          placeholder: "Describe changes...",
+          value: description,
+          onChange: (e) => setDescription(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && hasInput) handleApply();
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleApply,
+          disabled: !hasInput || applying,
+          className: `px-4 h-9 rounded-md text-xs font-semibold transition-colors flex items-center gap-1.5 shrink-0 ${hasInput && !applying ? "bg-foreground text-background hover:bg-foreground/90" : "bg-muted text-muted-foreground cursor-not-allowed"}`,
+          children: applying ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Sparkles, { className: "w-3 h-3 animate-pulse" }),
+            "Applying..."
+          ] }) : "Apply"
+        }
+      )
+    ] })
+  ] });
+}
+const positivePills = ["Tone", "Personalization", "Length", "CTA", "Other"];
+const negativePills = ["Too formal", "Too casual", "Too long", "Missing context", "Wrong angle", "Factual error", "Other"];
+function DraftFeedbackInline({
+  onRegenerateRequest,
+  onSubmitFeedback,
+  onDiscardRequest
+}) {
+  const [thumbState, setThumbState] = React.useState(null);
+  const [selectedPills, setSelectedPills] = React.useState([]);
+  const [detailText, setDetailText] = React.useState("");
+  const [noted, setNoted] = React.useState(false);
+  const [regenerated, setRegenerated] = React.useState(false);
+  const togglePill = React.useCallback((pill) => {
+    setSelectedPills((prev) => prev.includes(pill) ? prev.filter((p) => p !== pill) : [...prev, pill]);
+  }, []);
+  const handleSubmit = React.useCallback(() => {
+    if (!thumbState) return;
+    onSubmitFeedback == null ? void 0 : onSubmitFeedback(thumbState, selectedPills, detailText);
+    setNoted(true);
+    setTimeout(() => {
+      setThumbState(null);
+      setSelectedPills([]);
+      setDetailText("");
+      setNoted(false);
+    }, 3e3);
+  }, [thumbState, selectedPills, detailText, onSubmitFeedback]);
+  const handleRegenerate = React.useCallback(() => {
+    if (!thumbState) return;
+    onRegenerateRequest == null ? void 0 : onRegenerateRequest(selectedPills, detailText);
+    setRegenerated(true);
+    setTimeout(() => {
+      setThumbState(null);
+      setSelectedPills([]);
+      setDetailText("");
+      setRegenerated(false);
+    }, 3e3);
+  }, [thumbState, selectedPills, detailText, onRegenerateRequest]);
+  const handleDiscard = React.useCallback(() => {
+    if (!thumbState) return;
+    onDiscardRequest == null ? void 0 : onDiscardRequest(selectedPills, detailText);
+  }, [thumbState, selectedPills, detailText, onDiscardRequest]);
+  if (noted) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 py-1 animate-in fade-in slide-in-from-top-1 duration-200", children: [
+      /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 text-emerald-500" }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Feedback recorded" })
+    ] });
+  }
+  if (regenerated) {
+    return /* @__PURE__ */ jsx("div", { className: "py-2 animate-in fade-in slide-in-from-top-1 duration-200", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 rounded-md bg-indigo-50 dark:bg-indigo-950/30 border border-indigo-200 dark:border-indigo-800", children: [
+      /* @__PURE__ */ jsx(RefreshCw, { className: "w-3 h-3 text-indigo-500 animate-spin" }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-indigo-600 dark:text-indigo-400", children: "Regenerating draft..." })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground font-medium", children: "How's this draft?" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              setThumbState(thumbState === "up" ? null : "up");
+              setSelectedPills([]);
+              setDetailText("");
+            },
+            className: `p-1.5 rounded transition-colors ${thumbState === "up" ? "bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400" : "hover:bg-muted text-muted-foreground hover:text-foreground"}`,
+            children: /* @__PURE__ */ jsx(ThumbsUp, { className: "w-4 h-4", fill: thumbState === "up" ? "currentColor" : "none" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              setThumbState(thumbState === "down" ? null : "down");
+              setSelectedPills([]);
+              setDetailText("");
+            },
+            className: `p-1.5 rounded transition-colors ${thumbState === "down" ? "bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400" : "hover:bg-muted text-muted-foreground hover:text-foreground"}`,
+            children: /* @__PURE__ */ jsx(ThumbsDown, { className: "w-4 h-4", fill: thumbState === "down" ? "currentColor" : "none" })
+          }
+        )
+      ] })
+    ] }),
+    thumbState && /* @__PURE__ */ jsxs("div", { className: "pt-3 space-y-3 animate-in fade-in slide-in-from-top-2 duration-200", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground mb-2 block font-medium", children: thumbState === "up" ? "What worked well?" : "What needs improvement?" }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: (thumbState === "up" ? positivePills : negativePills).map((pill) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => togglePill(pill),
+            className: `px-2.5 py-1 rounded-full text-[11px] font-medium border transition-colors ${selectedPills.includes(pill) ? thumbState === "up" ? "bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300 dark:border-emerald-800" : "bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800" : "bg-background text-muted-foreground border-border hover:bg-muted/50 hover:text-foreground"}`,
+            children: pill
+          },
+          pill
+        )) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          value: detailText,
+          onChange: (e) => setDetailText(e.target.value),
+          placeholder: thumbState === "up" ? "Add specific praise (optional)..." : "Provide specific instructions (optional)...",
+          className: "w-full text-xs bg-background border border-border rounded-md px-2.5 py-2 text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-indigo-500/50 focus:border-indigo-500/50 resize-none min-h-[60px]"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 pt-1", children: thumbState === "down" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: handleRegenerate,
+            disabled: selectedPills.length === 0 && detailText.length === 0,
+            className: `flex-1 py-1.5 rounded-md text-xs font-semibold transition-colors flex items-center justify-center gap-1.5 ${selectedPills.length > 0 || detailText.length > 0 ? "bg-foreground text-background hover:bg-foreground/90" : "bg-muted text-muted-foreground cursor-not-allowed"}`,
+            children: [
+              /* @__PURE__ */ jsx(RefreshCw, { className: "w-3 h-3" }),
+              "Regenerate draft"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleDiscard,
+            className: "flex-1 py-1.5 rounded-md text-xs font-medium transition-colors border bg-background text-foreground border-border hover:bg-muted/50 flex items-center justify-center gap-1.5",
+            children: "Discard draft"
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleSubmit,
+          className: "flex-1 py-1.5 rounded-md text-xs font-semibold transition-colors bg-foreground text-background hover:bg-foreground/90 border-transparent",
+          children: "Submit feedback"
+        }
+      ) })
+    ] })
+  ] });
+}
+function EditorToolbar() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 px-4 py-2 border-t border-border bg-muted/5 flex-wrap", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center mr-2 gap-1 shrink-0", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-7 w-7 text-muted-foreground hover:text-foreground", children: /* @__PURE__ */ jsx(Undo2, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-7 w-7 text-muted-foreground hover:text-foreground", children: /* @__PURE__ */ jsx(Redo2, { className: "h-4 w-4" }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-border mx-1 shrink-0" }),
+    /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", className: "h-7 text-xs font-medium text-muted-foreground gap-1 px-2 hover:text-foreground shrink-0", children: [
+      "Sans Serif ",
+      /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-border mx-1 shrink-0" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-7 w-7 text-muted-foreground hover:text-foreground", children: /* @__PURE__ */ jsx(Bold, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-7 w-7 text-muted-foreground hover:text-foreground", children: /* @__PURE__ */ jsx(Italic, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-7 w-7 text-muted-foreground hover:text-foreground", children: /* @__PURE__ */ jsx(Underline, { className: "h-4 w-4" }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-border mx-1 shrink-0" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-7 w-7 text-muted-foreground hover:text-foreground", children: /* @__PURE__ */ jsx(AlignLeft, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-7 w-7 text-muted-foreground hover:text-foreground", children: /* @__PURE__ */ jsx(List, { className: "h-4 w-4" }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+    /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-7 w-7 text-muted-foreground hover:text-red-600 hover:bg-red-50 shrink-0 ml-auto", children: /* @__PURE__ */ jsx(Trash, { className: "h-4 w-4" }) })
+  ] });
+}
+function FollowUpToggle({
+  checked,
+  onCheckedChange,
+  days
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-foreground", children: [
+      /* @__PURE__ */ jsx(Clock, { className: "w-4 h-4 text-muted-foreground" }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        "Auto-draft follow-up in ",
+        days,
+        "d if no response"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        role: "switch",
+        "aria-checked": checked,
+        onClick: () => onCheckedChange(!checked),
+        className: `relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors ${checked ? "bg-foreground" : "bg-muted"}`,
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `pointer-events-none block h-4 w-4 rounded-full bg-background shadow-sm transition-transform ${checked ? "translate-x-4" : "translate-x-0"}`
+          }
+        )
+      }
+    )
+  ] });
+}
+function ContactCard({
+  contact,
+  onConfirm,
+  onRemove,
+  onSwap,
+  variant = "primary",
+  showPhone = false
+}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
+  const [selectedEmail, setSelectedEmail] = React.useState(
+    (_c = (_b = contact.email) != null ? _b : (_a = contact.emails) == null ? void 0 : _a[0]) != null ? _c : ""
+  );
+  const [selectedPhone, setSelectedPhone] = React.useState(
+    (_f = (_e = contact.phone) != null ? _e : (_d = contact.phones) == null ? void 0 : _d[0]) != null ? _f : ""
+  );
+  const [showEmailPicker, setShowEmailPicker] = React.useState(false);
+  const [showPhonePicker, setShowPhonePicker] = React.useState(false);
+  const hasMultipleEmails = ((_h = (_g = contact.emails) == null ? void 0 : _g.length) != null ? _h : 0) > 1;
+  const hasMultiplePhones = ((_j = (_i = contact.phones) == null ? void 0 : _i.length) != null ? _j : 0) > 1;
+  const initials = contact.name.split(" ").map((n) => n[0]).join("");
+  if (variant === "alternative") {
+    const detail = showPhone ? (_m = (_l = contact.phone) != null ? _l : (_k = contact.phones) == null ? void 0 : _k[0]) != null ? _m : "" : (_p = (_o = contact.email) != null ? _o : (_n = contact.emails) == null ? void 0 : _n[0]) != null ? _p : "";
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: onSwap,
+        className: "flex items-center gap-3 w-full px-3 py-2 text-left hover:bg-muted/50 rounded-md transition-colors group",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-muted flex items-center justify-center text-[10px] font-medium text-muted-foreground shrink-0", children: initials }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-sm text-foreground", children: contact.name }),
+            /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground truncate", children: [
+              contact.role,
+              detail ? ` \xB7 ${detail}` : ""
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity", children: "Select" })
+        ]
+      }
+    );
+  }
+  if (variant === "secondary") {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-2.5 py-1.5 bg-muted/40 rounded-md text-sm group", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-foreground text-xs", children: contact.name }),
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs truncate", children: (_q = contact.email) != null ? _q : selectedEmail }),
+      onRemove && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onRemove,
+          className: "ml-auto text-muted-foreground hover:text-foreground transition-colors opacity-0 group-hover:opacity-100",
+          children: /* @__PURE__ */ jsx(X, { className: "w-3 h-3" })
+        }
+      )
+    ] });
+  }
+  const needsConfirmation = !contact.confirmed && !!onConfirm;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `flex flex-wrap items-start gap-3 rounded-md ${needsConfirmation ? "border border-emerald-200/70 bg-emerald-50/40 p-2.5" : ""}`,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "w-8 h-8 rounded-full bg-muted flex items-center justify-center text-xs font-medium text-muted-foreground shrink-0 mt-0.5", children: initials }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: contact.name }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: contact.role }),
+            contact.confirmed && /* @__PURE__ */ jsx("span", { className: "inline-flex h-4 w-4 items-center justify-center rounded-full bg-emerald-100 text-emerald-700", children: /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5 mt-0.5", children: showPhone ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: selectedPhone }),
+            hasMultiplePhones && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setShowPhonePicker(!showPhonePicker),
+                  className: "text-xs text-muted-foreground hover:text-foreground transition-colors",
+                  children: /* @__PURE__ */ jsx(ChevronDown, { className: "w-3 h-3" })
+                }
+              ),
+              showPhonePicker && /* @__PURE__ */ jsx("div", { className: "absolute top-full left-0 mt-1 bg-background border border-border rounded-md shadow-lg z-10 py-1 min-w-[180px]", children: contact.phones.map((p) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => {
+                    setSelectedPhone(p);
+                    setShowPhonePicker(false);
+                  },
+                  className: `w-full text-left px-3 py-1.5 text-xs hover:bg-muted/50 transition-colors ${p === selectedPhone ? "text-foreground font-medium" : "text-muted-foreground"}`,
+                  children: p
+                },
+                p
+              )) })
+            ] })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: selectedEmail }),
+            hasMultipleEmails && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setShowEmailPicker(!showEmailPicker),
+                  className: "text-xs text-muted-foreground hover:text-foreground transition-colors",
+                  children: /* @__PURE__ */ jsx(ChevronDown, { className: "w-3 h-3" })
+                }
+              ),
+              showEmailPicker && /* @__PURE__ */ jsx("div", { className: "absolute top-full left-0 mt-1 bg-background border border-border rounded-md shadow-lg z-10 py-1 min-w-[220px]", children: contact.emails.map((e) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => {
+                    setSelectedEmail(e);
+                    setShowEmailPicker(false);
+                  },
+                  className: `w-full text-left px-3 py-1.5 text-xs hover:bg-muted/50 transition-colors ${e === selectedEmail ? "text-foreground font-medium" : "text-muted-foreground"}`,
+                  children: e
+                },
+                e
+              )) })
+            ] })
+          ] }) })
+        ] }),
+        (onRemove || !contact.confirmed && onConfirm) && /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-1.5 shrink-0 self-center", children: [
+          !contact.confirmed && onConfirm && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onConfirm,
+              className: "h-7 rounded-md border border-emerald-700 bg-emerald-700 px-2.5 text-xs font-semibold text-white hover:bg-emerald-600 hover:border-emerald-600 transition-colors",
+              children: "Confirm recipient"
+            }
+          ),
+          onRemove && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onRemove,
+              className: "h-7 w-7 inline-flex items-center justify-center rounded-md border border-border bg-background text-muted-foreground hover:text-foreground hover:bg-muted/40 transition-colors",
+              "aria-label": "Remove contact",
+              children: /* @__PURE__ */ jsx(X, { className: "w-3.5 h-3.5" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function AccountContactsPopover({
+  contacts,
+  onSelect,
+  onSelectTo,
+  onSelectCc,
+  onSelectBcc,
+  onViewAll,
+  onOpenRecentActivity,
+  trigger,
+  iconMap
+}) {
+  const [open, setOpen] = React.useState(false);
+  const triggerRef = React.useRef(null);
+  const [popoverStyle, setPopoverStyle] = React.useState({});
+  React.useEffect(() => {
+    if (open && triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      const popoverWidth = Math.min(448, window.innerWidth - 32);
+      let left = rect.right - popoverWidth;
+      if (left < 16) left = 16;
+      if (left + popoverWidth > window.innerWidth - 16) left = window.innerWidth - 16 - popoverWidth;
+      setPopoverStyle({ position: "fixed", top: rect.bottom + 4, left });
+    }
+  }, [open]);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { ref: triggerRef, onClick: () => setOpen(!open), children: trigger }),
+    open && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-40", onClick: () => setOpen(false) }),
+      /* @__PURE__ */ jsxs("div", { style: popoverStyle, className: "fixed bg-background border border-border rounded-lg shadow-xl z-50 w-[28rem] max-w-[calc(100vw-2rem)] py-2 animate-in fade-in slide-in-from-top-1 duration-150", children: [
+        /* @__PURE__ */ jsx("div", { className: "px-3 py-1.5 text-[11px] font-medium text-muted-foreground/60 uppercase tracking-wide", children: "Account Contacts" }),
+        /* @__PURE__ */ jsx("div", { className: "max-h-48 overflow-y-auto", children: contacts.map((c, i) => {
+          var _a, _b, _c, _d, _e, _f;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "button",
+              onClick: () => {
+                (onSelectTo != null ? onSelectTo : onSelect)(c);
+                setOpen(false);
+              },
+              className: "flex items-center gap-3 w-full px-3 py-2 text-left hover:bg-muted/50 transition-colors cursor-pointer",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-muted flex items-center justify-center text-[10px] font-medium text-muted-foreground shrink-0", children: c.name.split(" ").map((n) => n[0]).join("") }),
+                /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 overflow-hidden", children: [
+                  /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium text-foreground", children: c.name }),
+                  /* @__PURE__ */ jsxs("div", { className: "truncate text-xs text-muted-foreground leading-tight", children: [
+                    c.role,
+                    " \xB7 ",
+                    (_f = (_e = (_c = (_b = c.email) != null ? _b : (_a = c.emails) == null ? void 0 : _a[0]) != null ? _c : c.phone) != null ? _e : (_d = c.phones) == null ? void 0 : _d[0]) != null ? _f : ""
+                  ] }),
+                  c.lastActivity && /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        onOpenRecentActivity == null ? void 0 : onOpenRecentActivity();
+                        setOpen(false);
+                      },
+                      className: "mt-1.5 flex max-w-full items-center gap-1.5 overflow-hidden rounded-md border border-border/70 bg-muted/30 px-2 py-1 text-[11px] text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors",
+                      children: [
+                        /* @__PURE__ */ jsx(Clock, { className: "w-3 h-3 shrink-0" }),
+                        /* @__PURE__ */ jsx("span", { className: "shrink-0 font-medium", children: "Last activity" }),
+                        /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground/60", children: "\xB7" }),
+                        /* @__PURE__ */ jsx("span", { className: "shrink-0", children: c.lastActivity.date }),
+                        /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground/60", children: "\xB7" }),
+                        /* @__PURE__ */ jsx("span", { className: "truncate capitalize", children: c.lastActivity.type })
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "ml-2 flex items-center gap-1.5 shrink-0", children: [
+                  onSelectTo && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        onSelectTo(c);
+                        setOpen(false);
+                      },
+                      className: "h-6 rounded border border-border bg-background px-1.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted/40",
+                      children: "To"
+                    }
+                  ),
+                  onSelectCc && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        onSelectCc(c);
+                        setOpen(false);
+                      },
+                      className: "h-6 rounded border border-border bg-background px-1.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted/40",
+                      children: "Cc"
+                    }
+                  ),
+                  onSelectBcc && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        onSelectBcc(c);
+                        setOpen(false);
+                      },
+                      className: "h-6 rounded border border-border bg-background px-1.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted/40",
+                      children: "Bcc"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        if (c.salesforceUrl) {
+                          window.open(c.salesforceUrl, "_blank", "noopener,noreferrer");
+                        } else {
+                          onViewAll == null ? void 0 : onViewAll();
+                        }
+                      },
+                      className: "h-7 w-7 inline-flex items-center justify-center rounded-md border border-border bg-background hover:bg-muted/40 transition-colors shrink-0",
+                      "aria-label": `Open ${c.name} in Salesforce`,
+                      children: (iconMap == null ? void 0 : iconMap.salesforce) ? /* @__PURE__ */ jsx(BrandIcon, { src: iconMap.salesforce, alt: "Salesforce", className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsx(ExternalLink, { className: "w-3.5 h-3.5 text-muted-foreground" })
+                    }
+                  )
+                ] })
+              ]
+            },
+            i
+          );
+        }) }),
+        onViewAll && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "h-px bg-border mx-3 my-1" }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => {
+                onViewAll();
+                setOpen(false);
+              },
+              className: "flex items-center gap-2 w-full px-3 py-2 text-left text-xs text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors",
+              children: [
+                /* @__PURE__ */ jsx(ExternalLink, { className: "w-3 h-3" }),
+                "View all contacts"
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function EmailHeader({
+  fromName,
+  fromEmail,
+  toContacts,
+  ccContacts,
+  initialSubject = "",
+  accountContacts,
+  bccContacts,
+  onAddToContact,
+  onRemoveToContact,
+  onConfirmToContact,
+  onUpdateToContact,
+  onCcAdd,
+  onCcRemove,
+  onBccAdd,
+  onBccRemove,
+  onOpenAccountDetails,
+  onOpenRecentActivity,
+  iconMap,
+  showSubject = false,
+  accountDetailsLabel = "Account details"
+}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+  const hasUnconfirmedTo = toContacts.some((c) => !c.confirmed);
+  const [expandedToIndex, setExpandedToIndex] = React.useState(null);
+  const [showCcBcc, setShowCcBcc] = React.useState(
+    !!(((_a = ccContacts == null ? void 0 : ccContacts.length) != null ? _a : 0) > 0 || ((_b = bccContacts == null ? void 0 : bccContacts.length) != null ? _b : 0) > 0)
+  );
+  const [manualTo, setManualTo] = React.useState("");
+  const [manualCc, setManualCc] = React.useState("");
+  const [manualBcc, setManualBcc] = React.useState("");
+  const [subject, setSubject] = React.useState(initialSubject);
+  React.useEffect(() => {
+    var _a2, _b2;
+    if (((_a2 = ccContacts == null ? void 0 : ccContacts.length) != null ? _a2 : 0) > 0 || ((_b2 = bccContacts == null ? void 0 : bccContacts.length) != null ? _b2 : 0) > 0) {
+      setShowCcBcc(true);
+    }
+  }, [ccContacts, bccContacts]);
+  return /* @__PURE__ */ jsxs("div", { className: "mx-4 mt-3 rounded-md border border-border/60 bg-muted/[0.16] text-sm", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-2 border-b border-border/30", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground w-10 shrink-0", children: "From" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1.5 min-w-0", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground", children: fromName }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground truncate", children: fromEmail })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: `flex items-start gap-3 px-4 py-2 border-b border-border/30 ${hasUnconfirmedTo ? "bg-amber-50/35" : ""}`, children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground w-10 shrink-0 mt-1.5", children: "To" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [
+          toContacts.map((contact, index) => {
+            var _a2, _b2, _c2;
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                onClick: () => setExpandedToIndex((prev) => prev === index ? null : index),
+                className: `inline-flex max-w-[300px] cursor-pointer items-start gap-2 rounded-md border px-2 py-1 text-xs ${contact.confirmed ? "border-border/80 bg-background text-foreground" : "border-amber-300 bg-amber-50 text-amber-800"}`,
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                      /* @__PURE__ */ jsx("span", { className: "font-medium leading-none", children: contact.name }),
+                      contact.confirmed && /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-emerald-600" })
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { className: "mt-0.5 truncate text-muted-foreground", children: (_c2 = (_b2 = contact.email) != null ? _b2 : (_a2 = contact.emails) == null ? void 0 : _a2[0]) != null ? _c2 : "no email" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-1", children: [
+                    !contact.confirmed && /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          onConfirmToContact == null ? void 0 : onConfirmToContact(index);
+                        },
+                        className: "h-6 rounded px-1.5 text-[10px] font-semibold hover:bg-amber-100",
+                        children: "Confirm"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          onRemoveToContact == null ? void 0 : onRemoveToContact(index);
+                          setExpandedToIndex((prev) => prev === index ? null : prev);
+                        },
+                        className: "rounded p-0.5 text-muted-foreground hover:text-foreground hover:bg-muted/40",
+                        "aria-label": "Remove recipient",
+                        children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+                      }
+                    )
+                  ] })
+                ]
+              },
+              `${contact.name}-${index}`
+            );
+          }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value: manualTo,
+              onChange: (e) => setManualTo(e.target.value),
+              placeholder: toContacts.length ? "Add recipient..." : "Type a name or email...",
+              className: "min-w-[140px] flex-1 text-sm bg-transparent border-none focus:outline-none focus:ring-0 placeholder:text-muted-foreground/40 py-1",
+              onKeyDown: (e) => {
+                if (e.key === "Enter" && manualTo.trim()) {
+                  onAddToContact == null ? void 0 : onAddToContact({ name: manualTo.trim(), role: "", email: manualTo.trim(), confirmed: true });
+                  setManualTo("");
+                }
+              }
+            }
+          )
+        ] }),
+        expandedToIndex !== null && toContacts[expandedToIndex] && /* @__PURE__ */ jsxs("div", { className: "mt-2 rounded-md border border-border bg-background px-3 py-2 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "font-medium text-foreground text-sm", children: toContacts[expandedToIndex].name }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  const contact = toContacts[expandedToIndex];
+                  if (contact.salesforceUrl) {
+                    window.open(contact.salesforceUrl, "_blank", "noopener,noreferrer");
+                  } else {
+                    onOpenAccountDetails == null ? void 0 : onOpenAccountDetails();
+                  }
+                },
+                className: "h-7 w-7 inline-flex items-center justify-center rounded-md border border-border bg-background hover:bg-muted/40 transition-colors shrink-0",
+                "aria-label": "Open in Salesforce",
+                children: (iconMap == null ? void 0 : iconMap.salesforce) ? /* @__PURE__ */ jsx(BrandIcon, { src: iconMap.salesforce, alt: "Salesforce", className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsx(ExternalLink, { className: "w-3.5 h-3.5 text-muted-foreground" })
+              }
+            )
+          ] }),
+          toContacts[expandedToIndex].role && /* @__PURE__ */ jsx("div", { className: "mt-1", children: toContacts[expandedToIndex].role }),
+          ((_d = (_c = toContacts[expandedToIndex].emails) == null ? void 0 : _c.length) != null ? _d : 0) > 0 ? /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-[11px] text-muted-foreground/70 mb-1", children: "Send using" }),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                className: "h-8 rounded-md border border-border bg-background px-2 text-xs text-foreground",
+                value: (_g = (_f = toContacts[expandedToIndex].email) != null ? _f : (_e = toContacts[expandedToIndex].emails) == null ? void 0 : _e[0]) != null ? _g : "",
+                onChange: (e) => onUpdateToContact == null ? void 0 : onUpdateToContact(expandedToIndex, __spreadProps(__spreadValues({}, toContacts[expandedToIndex]), {
+                  email: e.target.value
+                })),
+                children: (_h = toContacts[expandedToIndex].emails) == null ? void 0 : _h.map((emailOption) => /* @__PURE__ */ jsx("option", { value: emailOption, children: emailOption }, emailOption))
+              }
+            )
+          ] }) : toContacts[expandedToIndex].email ? /* @__PURE__ */ jsx("div", { className: "mt-1", children: toContacts[expandedToIndex].email }) : null,
+          ((_j = (_i = toContacts[expandedToIndex].phones) == null ? void 0 : _i.length) != null ? _j : 0) > 0 ? /* @__PURE__ */ jsx("div", { className: "mt-1", children: (_k = toContacts[expandedToIndex].phones) == null ? void 0 : _k.join(" \xB7 ") }) : toContacts[expandedToIndex].phone ? /* @__PURE__ */ jsx("div", { className: "mt-1", children: toContacts[expandedToIndex].phone }) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center flex-wrap gap-1.5 mt-1.5", children: [
+          accountContacts && accountContacts.length > 0 && /* @__PURE__ */ jsx(
+            AccountContactsPopover,
+            {
+              contacts: accountContacts,
+              onSelect: (c) => onAddToContact == null ? void 0 : onAddToContact(__spreadProps(__spreadValues({}, c), { confirmed: true })),
+              onSelectTo: (c) => onAddToContact == null ? void 0 : onAddToContact(__spreadProps(__spreadValues({}, c), { confirmed: true })),
+              onSelectCc: (c) => onCcAdd == null ? void 0 : onCcAdd(__spreadProps(__spreadValues({}, c), { confirmed: true })),
+              onSelectBcc: (c) => onBccAdd == null ? void 0 : onBccAdd(__spreadProps(__spreadValues({}, c), { confirmed: true })),
+              onViewAll: onOpenAccountDetails,
+              onOpenRecentActivity,
+              iconMap,
+              trigger: /* @__PURE__ */ jsx("button", { className: "h-7 rounded-md border border-border bg-background px-2 text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted/40 transition-colors", children: "Contacts" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onOpenAccountDetails,
+              className: "h-7 rounded-md border border-border bg-background px-2 text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted/40 transition-colors",
+              children: accountDetailsLabel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setShowCcBcc(true),
+              className: "h-7 rounded-md border border-border bg-background px-2 text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted/40 transition-colors",
+              children: "Add Cc/Bcc"
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    showCcBcc && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 px-4 py-2 border-b border-border/30 animate-in fade-in slide-in-from-top-1 duration-150", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground w-10 shrink-0 mt-1.5", children: "Cc" }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1.5", children: [
+        ccContacts == null ? void 0 : ccContacts.map((c, i) => /* @__PURE__ */ jsx(ContactCard, { contact: c, variant: "secondary", onRemove: () => onCcRemove == null ? void 0 : onCcRemove(i) }, i)),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value: manualCc,
+              onChange: (e) => setManualCc(e.target.value),
+              placeholder: "Add Cc...",
+              className: "text-sm bg-transparent border-none focus:outline-none focus:ring-0 placeholder:text-muted-foreground/40 py-1 w-28",
+              onKeyDown: (e) => {
+                if (e.key === "Enter" && manualCc.trim()) {
+                  onCcAdd == null ? void 0 : onCcAdd({ name: manualCc.trim(), role: "", email: manualCc.trim(), confirmed: true });
+                  setManualCc("");
+                }
+              }
+            }
+          ),
+          accountContacts && accountContacts.length > 0 && /* @__PURE__ */ jsx(
+            AccountContactsPopover,
+            {
+              contacts: accountContacts,
+              onSelect: (c) => onCcAdd == null ? void 0 : onCcAdd(c),
+              onViewAll: onOpenAccountDetails,
+              onOpenRecentActivity,
+              iconMap,
+              trigger: /* @__PURE__ */ jsx("button", { className: "text-xs text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ jsx(Users, { className: "w-3 h-3" }) })
+            }
+          )
+        ] })
+      ] }) })
+    ] }),
+    showCcBcc && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 px-4 py-2 border-b border-border/30 animate-in fade-in slide-in-from-top-1 duration-150", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground w-10 shrink-0 mt-1.5", children: "Bcc" }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1.5", children: [
+        bccContacts == null ? void 0 : bccContacts.map((c, i) => /* @__PURE__ */ jsx(ContactCard, { contact: c, variant: "secondary", onRemove: () => onBccRemove == null ? void 0 : onBccRemove(i) }, `${c.name}-${i}`)),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value: manualBcc,
+              onChange: (e) => setManualBcc(e.target.value),
+              placeholder: "Add Bcc...",
+              className: "text-sm bg-transparent border-none focus:outline-none focus:ring-0 placeholder:text-muted-foreground/40 py-1 w-28",
+              onKeyDown: (e) => {
+                if (e.key === "Enter" && manualBcc.trim()) {
+                  onBccAdd == null ? void 0 : onBccAdd({ name: manualBcc.trim(), role: "", email: manualBcc.trim(), confirmed: true });
+                  setManualBcc("");
+                }
+              }
+            }
+          ),
+          accountContacts && accountContacts.length > 0 && /* @__PURE__ */ jsx(
+            AccountContactsPopover,
+            {
+              contacts: accountContacts,
+              onSelect: (c) => onBccAdd == null ? void 0 : onBccAdd(c),
+              onViewAll: onOpenAccountDetails,
+              onOpenRecentActivity,
+              iconMap,
+              trigger: /* @__PURE__ */ jsx("button", { className: "text-xs text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ jsx(Users, { className: "w-3 h-3" }) })
+            }
+          )
+        ] })
+      ] }) })
+    ] }),
+    showSubject && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-2 border-b border-border/30", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground w-10 shrink-0", children: "Subj" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: subject,
+          onChange: (e) => setSubject(e.target.value),
+          placeholder: "Subject...",
+          className: "flex-1 text-sm bg-transparent border-none focus:outline-none focus:ring-0 placeholder:text-muted-foreground/40 py-1 font-medium"
+        }
+      )
+    ] })
+  ] });
+}
+function SignatureBlock({
+  signature,
+  enabled,
+  onToggle
+}) {
+  if (!enabled) {
+    return /* @__PURE__ */ jsx("div", { className: "px-3 py-2 border-t border-border/30", children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: onToggle,
+        className: "text-xs text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1.5",
+        children: [
+          /* @__PURE__ */ jsx(PenLine, { className: "w-3 h-3" }),
+          "Add signature"
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 border-t border-border/30 bg-background/40", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground/60", children: "--" }),
+      /* @__PURE__ */ jsx("button", { onClick: onToggle, className: "text-xs text-muted-foreground hover:text-foreground transition-colors", children: "Remove" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground/70 whitespace-pre-line leading-relaxed", children: signature })
+  ] });
+}
+function SuggestedActionCard({
+  action,
+  onDismiss,
+  onSend,
+  onSaveDraft,
+  accountContacts,
+  signature,
+  onDuplicate,
+  onOpenAccountDetails,
+  onOpenRecentActivity,
+  onMarkComplete,
+  onDispatchAgent,
+  iconMap,
+  sendLabel,
+  accountDetailsLabel,
+  dismissLabel = "Dismiss"
+}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G;
+  const isCall = action.type === "call";
+  const [expanded, setExpanded] = React.useState(action.type === "email" || isCall);
+  const [content, setContent] = React.useState(
+    isCall ? (_b = (_a = action.callMeta) == null ? void 0 : _a.talkTrack) != null ? _b : "" : (_d = (_c = action.content) == null ? void 0 : _c.replace(/<\/p>/gi, "\n\n").replace(/<br\s*\/?>/gi, "\n").replace(/<[^>]+>/g, "").replace(/\n\s*\n/g, "\n\n")) != null ? _d : ""
+  );
+  const [showAiEdit, setShowAiEdit] = React.useState(false);
+  const [feedbackOpen, setFeedbackOpen] = React.useState(false);
+  const [followUpEnabled, setFollowUpEnabled] = React.useState((_f = (_e = action.followUp) == null ? void 0 : _e.enabled) != null ? _f : false);
+  const [threadExpanded, setThreadExpanded] = React.useState(false);
+  const [expandedMessageId, setExpandedMessageId] = React.useState(null);
+  const [replyingToMessageId, setReplyingToMessageId] = React.useState(null);
+  const [ticketPriority, setTicketPriority] = React.useState((_h = (_g = action.ticket) == null ? void 0 : _g.priority) != null ? _h : "Medium");
+  const [ticketType, setTicketType] = React.useState((_j = (_i = action.ticket) == null ? void 0 : _i.type) != null ? _j : "Support Request");
+  const [ticketSubject, setTicketSubject] = React.useState((_l = (_k = action.ticket) == null ? void 0 : _k.subject) != null ? _l : "");
+  const [ticketDescription, setTicketDescription] = React.useState(
+    (_o = (_n = (_m = action.ticket) == null ? void 0 : _m.description) == null ? void 0 : _n.replace(/<\/p>/gi, "\n\n").replace(/<br\s*\/?>/gi, "\n").replace(/<[^>]+>/g, "").trim()) != null ? _o : ""
+  );
+  const [toContacts, setToContacts] = React.useState(((_p = action.emailMeta) == null ? void 0 : _p.to) ? [action.emailMeta.to] : []);
+  const [ccContacts, setCcContacts] = React.useState((_r = (_q = action.emailMeta) == null ? void 0 : _q.cc) != null ? _r : []);
+  const [bccContacts, setBccContacts] = React.useState(
+    ((_s = action.emailMeta) == null ? void 0 : _s.bcc) ? [{ name: action.emailMeta.bcc, role: "", email: action.emailMeta.bcc, confirmed: true }] : []
+  );
+  const [callContact, setCallContact] = React.useState((_t = action.callMeta) == null ? void 0 : _t.contact);
+  const [signatureEnabled, setSignatureEnabled] = React.useState(true);
+  const isNewEmail = action.type === "email" && !action.replyTo;
+  const isThreadReply = action.type === "email" && !!action.replyTo;
+  const canSend = isCall ? (_u = callContact == null ? void 0 : callContact.confirmed) != null ? _u : false : action.type === "email" ? toContacts.length > 0 && toContacts.every((contact) => contact.confirmed) : true;
+  const openInLabel = action.type === "email" ? "Open draft" : action.type === "ticket" ? "Open in Zendesk" : action.type === "slack" ? "Open in Slack" : "Open in App";
+  const addUniqueContact = React.useCallback((prev, contact) => {
+    var _a2, _b2, _c2;
+    const nextKey = `${contact.name}-${(_c2 = (_b2 = contact.email) != null ? _b2 : (_a2 = contact.emails) == null ? void 0 : _a2[0]) != null ? _c2 : ""}`;
+    if (prev.some((item) => {
+      var _a3, _b3, _c3;
+      return `${item.name}-${(_c3 = (_b3 = item.email) != null ? _b3 : (_a3 = item.emails) == null ? void 0 : _a3[0]) != null ? _c3 : ""}` === nextKey;
+    })) {
+      return prev;
+    }
+    return [...prev, contact];
+  }, []);
+  if (!expanded) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onClick: () => setExpanded(true),
+        className: "p-4 flex items-center justify-between cursor-pointer hover:bg-muted/30 transition-colors",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-7 h-7 shrink-0", children: getActionTypeIcon(action.type, "w-5 h-5", iconMap) }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground", children: action.label }),
+              ((_v = action.followUp) == null ? void 0 : _v.enabled) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground mt-1", children: [
+                /* @__PURE__ */ jsx(Clock, { className: "w-3.5 h-3.5" }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  "Follow-up in ",
+                  action.followUp.days,
+                  "d"
+                ] })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(ChevronDown, { className: "w-5 h-5 text-muted-foreground shrink-0" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "animate-in fade-in zoom-in-95 duration-200", children: [
+    /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 flex items-center justify-between bg-background border-b border-border/40", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-7 h-7 shrink-0", children: getActionTypeIcon(action.type, "w-5 h-5", iconMap) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: action.label }),
+          isThreadReply && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-md border border-border/80 bg-muted/50 px-2 py-0.5 text-[11px] font-medium text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Undo2, { className: "h-3 w-3" }),
+            "Reply"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setFeedbackOpen(!feedbackOpen),
+            className: `p-1.5 rounded transition-colors ${feedbackOpen ? "bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400" : "hover:bg-muted text-muted-foreground hover:text-foreground"}`,
+            children: /* @__PURE__ */ jsx(ThumbsUp, { className: "w-3.5 h-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setFeedbackOpen(!feedbackOpen),
+            className: "p-1.5 rounded transition-colors hover:bg-muted text-muted-foreground hover:text-foreground",
+            children: /* @__PURE__ */ jsx(ThumbsDown, { className: "w-3.5 h-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-border/40 mx-0.5" }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "4:15 PM" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setExpanded(false),
+            className: "text-muted-foreground hover:text-foreground hover:bg-muted/50 p-2 rounded transition-colors",
+            "aria-label": "Collapse",
+            children: /* @__PURE__ */ jsx(ChevronUp, { className: "w-4 h-4" })
+          }
+        )
+      ] })
+    ] }),
+    feedbackOpen && /* @__PURE__ */ jsx("div", { className: "px-5 py-3 border-b border-border/40 animate-in fade-in slide-in-from-top-2 duration-200", children: /* @__PURE__ */ jsx(
+      DraftFeedbackInline,
+      {
+        onRegenerateRequest: (pills, detail) => console.log("Regenerate:", pills, detail),
+        onSubmitFeedback: (type, pills, detail) => console.log("Feedback:", type, pills, detail),
+        onDiscardRequest: (pills, detail) => {
+          console.log("Discard:", pills, detail);
+          onDismiss == null ? void 0 : onDismiss(action.id);
+        }
+      }
+    ) }),
+    isThreadReply && action.replyTo && /* @__PURE__ */ jsxs("div", { className: "border-b border-border/40", children: [
+      action.threadMessages && action.threadMessages.length > 1 && /* @__PURE__ */ jsx("div", { className: "px-5 py-2 border-b border-border/40", children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => setThreadExpanded(!threadExpanded),
+          className: "text-xs text-muted-foreground hover:text-foreground transition-colors",
+          children: [
+            action.threadMessages.length,
+            " messages in this thread",
+            /* @__PURE__ */ jsx("span", { className: "mx-1.5", children: "\xB7" }),
+            /* @__PURE__ */ jsx("span", { className: "underline", children: threadExpanded ? "Hide thread" : "View thread" })
+          ]
+        }
+      ) }),
+      threadExpanded && action.threadMessages && action.threadMessages.length > 1 ? /* @__PURE__ */ jsx("div", { className: "bg-muted/20", children: action.threadMessages.map((msg, idx) => {
+        const isExpMsg = expandedMessageId === msg.id;
+        const isReplyingTo = !replyingToMessageId ? idx === action.threadMessages.length - 1 : replyingToMessageId === msg.id;
+        const isLast = idx === action.threadMessages.length - 1;
+        return /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "px-5 py-3 hover:bg-muted/30 cursor-pointer transition-colors group relative",
+              onClick: () => setExpandedMessageId(isExpMsg ? null : msg.id),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-start mb-1", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-foreground", children: msg.from }),
+                    isReplyingTo && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground flex items-center gap-1", children: [
+                      /* @__PURE__ */ jsx(ArrowLeft, { className: "w-3 h-3" }),
+                      "Replying to this"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: msg.time }),
+                    !isReplyingTo && !isExpMsg && /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          setReplyingToMessageId(msg.id);
+                        },
+                        className: "text-xs text-muted-foreground hover:text-foreground underline opacity-0 group-hover:opacity-100 transition-opacity",
+                        children: "Reply to this"
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: `text-sm text-muted-foreground leading-relaxed ${isExpMsg ? "" : "line-clamp-2"}`, children: isExpMsg ? msg.content : msg.preview }),
+                isExpMsg && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      setExpandedMessageId(null);
+                    },
+                    className: "text-xs text-muted-foreground hover:text-foreground underline mt-2",
+                    children: "Collapse"
+                  }
+                )
+              ]
+            }
+          ),
+          !isLast && /* @__PURE__ */ jsx("div", { className: "h-px bg-border/40 mx-5" })
+        ] }, msg.id);
+      }) }) : /* @__PURE__ */ jsxs("div", { className: "px-5 py-3 bg-muted/30", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-start mb-2", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-xs font-semibold text-foreground", children: [
+            action.replyTo.from,
+            " to Me"
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: action.replyTo.time })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground leading-relaxed line-clamp-3", children: action.replyTo.content })
+      ] })
+    ] }),
+    action.type === "slack" && action.replyTo && /* @__PURE__ */ jsx("div", { className: "border-b border-border/40", children: /* @__PURE__ */ jsxs("div", { className: "px-5 py-3 bg-muted/30", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-start mb-2", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-xs font-semibold text-foreground", children: [
+          action.replyTo.from,
+          " to Me"
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: action.replyTo.time })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground leading-relaxed line-clamp-3", children: action.replyTo.content })
+    ] }) }),
+    action.type === "email" && action.emailMeta && /* @__PURE__ */ jsxs("div", { children: [
+      isThreadReply && /* @__PURE__ */ jsxs("div", { className: "mx-4 mt-3 flex items-center gap-1.5 rounded-md border border-border/60 bg-muted/[0.16] px-3 py-1.5 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(Undo2, { className: "h-3 w-3" }),
+        "Replying in existing thread"
+      ] }),
+      /* @__PURE__ */ jsx(
+        EmailHeader,
+        {
+          fromName: action.emailMeta.from,
+          fromEmail: action.emailMeta.fromEmail,
+          toContacts,
+          ccContacts,
+          initialSubject: action.emailMeta.subject,
+          accountContacts,
+          bccContacts,
+          onAddToContact: (c) => setToContacts((prev) => addUniqueContact(prev, c)),
+          onRemoveToContact: (index) => setToContacts((prev) => prev.filter((_, idx) => idx !== index)),
+          onConfirmToContact: (index) => setToContacts(
+            (prev) => prev.map((contact, idx) => idx === index ? __spreadProps(__spreadValues({}, contact), { confirmed: true }) : contact)
+          ),
+          onUpdateToContact: (index, updatedContact) => setToContacts(
+            (prev) => prev.map((contact, idx) => idx === index ? updatedContact : contact)
+          ),
+          onCcAdd: (c) => setCcContacts((prev) => addUniqueContact(prev, c)),
+          onCcRemove: (i) => setCcContacts((prev) => prev.filter((_, idx) => idx !== i)),
+          onBccAdd: (c) => setBccContacts((prev) => addUniqueContact(prev, c)),
+          onBccRemove: (i) => setBccContacts((prev) => prev.filter((_, idx) => idx !== i)),
+          onOpenAccountDetails,
+          onOpenRecentActivity,
+          iconMap,
+          showSubject: isNewEmail,
+          accountDetailsLabel
+        }
+      )
+    ] }),
+    isCall && /* @__PURE__ */ jsx("div", { className: "mx-4 mt-3 rounded-md border border-border/60 bg-muted/[0.16] px-3 py-2.5", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground w-10 shrink-0 mt-1.5", children: "To" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+        callContact ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1.5", children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `inline-flex max-w-[300px] items-start gap-2 rounded-md border px-2 py-1 text-xs ${callContact.confirmed ? "border-border/80 bg-background text-foreground" : "border-amber-300 bg-amber-50 text-amber-800"}`,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-medium leading-none", children: callContact.name }),
+                  callContact.confirmed && /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-emerald-600" })
+                ] }),
+                callContact.role && /* @__PURE__ */ jsx("div", { className: "mt-0.5 truncate text-muted-foreground", children: callContact.role }),
+                (callContact.phone || ((_w = callContact.phones) == null ? void 0 : _w[0])) && /* @__PURE__ */ jsx("div", { className: "mt-0.5 truncate text-muted-foreground", children: (_y = callContact.phone) != null ? _y : (_x = callContact.phones) == null ? void 0 : _x[0] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-1", children: [
+                !callContact.confirmed && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      setCallContact(__spreadProps(__spreadValues({}, callContact), { confirmed: true }));
+                    },
+                    className: "h-6 rounded px-1.5 text-[10px] font-semibold hover:bg-amber-100",
+                    children: "Confirm"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      setCallContact(void 0);
+                    },
+                    className: "rounded p-0.5 text-muted-foreground hover:text-foreground hover:bg-muted/40",
+                    "aria-label": "Remove recipient",
+                    children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+                  }
+                )
+              ] })
+            ]
+          }
+        ) }) : /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "No contact selected." }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center flex-wrap gap-1.5 mt-1.5", children: [
+          accountContacts && accountContacts.length > 0 && /* @__PURE__ */ jsx(
+            AccountContactsPopover,
+            {
+              contacts: accountContacts,
+              onSelect: (c) => setCallContact(__spreadProps(__spreadValues({}, c), { confirmed: true })),
+              onViewAll: onOpenAccountDetails,
+              onOpenRecentActivity,
+              iconMap,
+              trigger: /* @__PURE__ */ jsx("button", { className: "h-7 rounded-md border border-border bg-background px-2 text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted/40 transition-colors", children: "Contacts" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onOpenAccountDetails,
+              className: "h-7 rounded-md border border-border bg-background px-2 text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted/40 transition-colors",
+              children: accountDetailsLabel != null ? accountDetailsLabel : "Account details"
+            }
+          )
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { children: action.type === "ticket" ? /* @__PURE__ */ jsxs("div", { className: "p-5 space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide", children: "Priority" }),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              className: "w-full px-3 py-2 text-sm bg-background border border-border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-primary/20",
+              value: ticketPriority,
+              onChange: (e) => setTicketPriority(e.target.value),
+              children: [
+                /* @__PURE__ */ jsx("option", { children: "High" }),
+                /* @__PURE__ */ jsx("option", { children: "Medium" }),
+                /* @__PURE__ */ jsx("option", { children: "Low" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide", children: "Type" }),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              className: "w-full px-3 py-2 text-sm bg-background border border-border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-primary/20",
+              value: ticketType,
+              onChange: (e) => setTicketType(e.target.value),
+              children: [
+                /* @__PURE__ */ jsx("option", { children: "Churn Risk" }),
+                /* @__PURE__ */ jsx("option", { children: "Support Request" }),
+                /* @__PURE__ */ jsx("option", { children: "Feature Request" })
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide", children: "Subject" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: "w-full px-3 py-2 text-sm bg-background border border-border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-primary/20",
+            value: ticketSubject,
+            onChange: (e) => setTicketSubject(e.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide", children: "Description" }),
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            className: "w-full min-h-[100px] px-3 py-2 text-sm bg-background border border-border rounded-md shadow-sm resize-none focus:outline-none focus:ring-1 focus:ring-primary/20",
+            value: ticketDescription,
+            onChange: (e) => setTicketDescription(e.target.value)
+          }
+        )
+      ] })
+    ] }) : isCall ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsx("div", { className: "px-4 pt-3 pb-3", children: /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border/60 bg-muted/[0.16] overflow-hidden", children: [
+        /* @__PURE__ */ jsx("div", { className: "px-3 pt-2 pb-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground/70", children: "Talk track" }),
+        /* @__PURE__ */ jsx("div", { className: "px-3 pb-3", children: /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            className: "w-full min-h-[280px] text-sm leading-relaxed bg-transparent border-none resize-none focus:ring-0 focus:outline-none placeholder:text-muted-foreground/50 p-0 overflow-y-auto",
+            value: content,
+            onChange: (e) => setContent(e.target.value),
+            placeholder: "Edit talk track..."
+          }
+        ) })
+      ] }) }),
+      /* @__PURE__ */ jsx(EditorToolbar, {})
+    ] }) : action.type === "manual" ? /* @__PURE__ */ jsx("div", { className: "p-5 space-y-4", children: /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border/60 bg-muted/[0.16] overflow-hidden", children: [
+      /* @__PURE__ */ jsx("div", { className: "px-3 pt-2 pb-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground/70", children: "Task description" }),
+      /* @__PURE__ */ jsx("div", { className: "px-3 pb-3", children: /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-foreground whitespace-pre-wrap", children: (_B = (_A = (_z = action.manualMeta) == null ? void 0 : _z.taskDescription) != null ? _A : action.content) != null ? _B : "" }) })
+    ] }) }) : action.type === "browser" ? /* @__PURE__ */ jsx("div", { className: "p-5 space-y-4", children: /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border/60 bg-muted/[0.16] overflow-hidden", children: [
+      /* @__PURE__ */ jsx("div", { className: "px-3 pt-2 pb-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground/70", children: "Browser automation" }),
+      /* @__PURE__ */ jsxs("div", { className: "px-3 pb-3 space-y-2", children: [
+        ((_C = action.browserMeta) == null ? void 0 : _C.url) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(Globe, { className: "w-3.5 h-3.5 shrink-0" }),
+          /* @__PURE__ */ jsx("a", { href: action.browserMeta.url, target: "_blank", rel: "noopener noreferrer", className: "text-primary underline underline-offset-2 truncate", children: action.browserMeta.url })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-foreground whitespace-pre-wrap", children: (_F = (_E = (_D = action.browserMeta) == null ? void 0 : _D.actionDescription) != null ? _E : action.content) != null ? _F : "" })
+      ] })
+    ] }) }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsx("div", { className: "px-4 pt-3 pb-3", children: /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border/60 bg-muted/[0.16] overflow-hidden", children: [
+        /* @__PURE__ */ jsx("div", { className: "px-3 pt-2 pb-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground/70", children: "Draft" }),
+        /* @__PURE__ */ jsx("div", { className: "px-3 pb-3", children: /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            className: "w-full min-h-[280px] text-sm leading-relaxed bg-transparent border-none resize-none focus:ring-0 focus:outline-none placeholder:text-muted-foreground/50 p-0 overflow-y-auto",
+            value: content,
+            onChange: (e) => setContent(e.target.value),
+            placeholder: "Write your message..."
+          }
+        ) }),
+        action.type === "email" && signature && /* @__PURE__ */ jsx(SignatureBlock, { signature, enabled: signatureEnabled, onToggle: () => setSignatureEnabled(!signatureEnabled) })
+      ] }) }),
+      /* @__PURE__ */ jsx(EditorToolbar, {})
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "bg-muted/10 border-t border-border/60", children: /* @__PURE__ */ jsxs("div", { className: "px-5 py-4", children: [
+      showAiEdit && /* @__PURE__ */ jsx(AiEditPanel, { onApply: (pills, desc) => console.log("AI Edit:", pills, desc) }),
+      action.followUp && /* @__PURE__ */ jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsx(FollowUpToggle, { checked: followUpEnabled, onCheckedChange: setFollowUpEnabled, days: action.followUp.days }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 overflow-x-auto no-scrollbar", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              className: `h-9 text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted/50 ${showAiEdit ? "bg-muted/50 text-foreground" : ""}`,
+              onClick: () => setShowAiEdit(!showAiEdit),
+              children: "AI Edit"
+            }
+          ),
+          !isCall && action.type !== "email" && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              className: "h-9 text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted/50",
+              onClick: () => onSaveDraft == null ? void 0 : onSaveDraft(action.id),
+              children: "Draft"
+            }
+          ),
+          !isCall && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", className: "h-9 text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted/50 whitespace-nowrap", children: openInLabel }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              className: "h-9 text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted/50",
+              onClick: () => onDismiss == null ? void 0 : onDismiss(action.id),
+              children: dismissLabel
+            }
+          ),
+          action.type === "email" && onDuplicate && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              className: "h-9 text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted/50 whitespace-nowrap",
+              onClick: () => onDuplicate(action.id),
+              children: [
+                /* @__PURE__ */ jsx(Copy, { className: "w-3 h-3 mr-1.5" }),
+                "Copy"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pl-2 shrink-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-border/60" }),
+          isCall ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            ((_G = action.callMeta) == null ? void 0 : _G.allowDispatchAgent) && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                className: "h-9 text-xs font-medium shadow-none",
+                onClick: () => onDispatchAgent == null ? void 0 : onDispatchAgent(action.id, content),
+                disabled: !canSend,
+                children: "Dispatch agent"
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                size: "sm",
+                className: `px-5 h-9 text-xs font-semibold shadow-sm ${canSend ? "bg-foreground text-background hover:bg-foreground/90" : "bg-muted text-muted-foreground cursor-not-allowed"}`,
+                onClick: () => canSend && (onMarkComplete == null ? void 0 : onMarkComplete(action.id)),
+                disabled: !canSend,
+                children: [
+                  /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 mr-1.5" }),
+                  "Mark complete"
+                ]
+              }
+            )
+          ] }) : action.type === "manual" ? /* @__PURE__ */ jsxs(
+            Button,
+            {
+              size: "sm",
+              className: "px-5 h-9 text-xs font-semibold shadow-sm bg-foreground text-background hover:bg-foreground/90",
+              onClick: () => onMarkComplete == null ? void 0 : onMarkComplete(action.id),
+              children: [
+                /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 mr-1.5" }),
+                "Mark complete"
+              ]
+            }
+          ) : action.type === "browser" ? /* @__PURE__ */ jsxs(
+            Button,
+            {
+              size: "sm",
+              className: "px-5 h-9 text-xs font-semibold shadow-sm bg-foreground text-background hover:bg-foreground/90",
+              onClick: () => onSend == null ? void 0 : onSend(action.id),
+              children: [
+                /* @__PURE__ */ jsx(Globe, { className: "w-3.5 h-3.5 mr-1.5" }),
+                sendLabel != null ? sendLabel : "Run"
+              ]
+            }
+          ) : /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              className: `px-6 h-9 text-xs font-semibold shadow-sm ${canSend ? "bg-foreground text-background hover:bg-foreground/90" : "bg-muted text-muted-foreground cursor-not-allowed"}`,
+              onClick: () => canSend && (onSend == null ? void 0 : onSend(action.id)),
+              disabled: !canSend,
+              children: sendLabel != null ? sendLabel : "Send"
+            }
+          )
+        ] })
+      ] })
+    ] }) })
+  ] });
+}
+function SuggestedActions({
+  actions,
+  title = "Suggested Actions",
+  onDismiss,
+  onSend,
+  onSaveDraft,
+  accountContacts,
+  signature,
+  onDuplicate,
+  onOpenAccountDetails,
+  onOpenRecentActivity,
+  onMarkComplete,
+  onDispatchAgent,
+  iconMap,
+  sendLabel,
+  accountDetailsLabel,
+  dismissLabel
+}) {
+  const [dismissedIds, setDismissedIds] = React.useState(/* @__PURE__ */ new Set());
+  const handleDismiss = React.useCallback(
+    (id) => {
+      setDismissedIds((prev) => /* @__PURE__ */ new Set([...prev, id]));
+      onDismiss == null ? void 0 : onDismiss(id);
+    },
+    [onDismiss]
+  );
+  const visibleActions = actions.filter((a) => a.status !== "dismissed" && !dismissedIds.has(a.id));
+  return /* @__PURE__ */ jsxs("div", { className: "py-6 border-t border-border", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-[11px] font-bold text-muted-foreground/70 uppercase tracking-wider", children: title }),
+      /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-muted-foreground", children: [
+        visibleActions.length,
+        " actions"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-4", children: visibleActions.map((action) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "group bg-background border border-border rounded-md overflow-hidden shadow-sm hover:shadow-md transition-all duration-200",
+        children: /* @__PURE__ */ jsx(
+          SuggestedActionCard,
+          {
+            action,
+            onDismiss: handleDismiss,
+            onSend,
+            onSaveDraft,
+            accountContacts,
+            signature,
+            onDuplicate,
+            onOpenAccountDetails,
+            onOpenRecentActivity,
+            onMarkComplete,
+            onDispatchAgent,
+            iconMap,
+            sendLabel,
+            accountDetailsLabel,
+            dismissLabel
+          }
+        )
+      },
+      action.id
+    )) })
+  ] });
+}
+export {
+  SuggestedActions
+};
+//# sourceMappingURL=suggested-actions.js.map