@handled-ai/design-system 0.10.0 → 0.11.1

package/dist/components/suggested-actions.js

@@ -39,7 +39,6 @@ import {
   ThumbsUp,
   ThumbsDown,
   Check,
-  RefreshCw,
   ArrowLeft,
   Mail,
   Phone,
@@ -52,17 +51,8 @@ import {
   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
-    }
-  );
-}
+import { DraftFeedbackInline } from "./draft-feedback-inline.js";
+import { AccountContactsPopover, BrandIcon } from "./account-contacts-popover.js";
 function getActionTypeIcon(type, className, iconMap) {
   switch (type) {
     case "email":
@@ -138,143 +128,6 @@ function AiEditPanel({ onApply }) {
     ] })
   ] });
 }
-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: [
@@ -473,161 +326,6 @@ function ContactCard({
     }
   );
 }
-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,