@handled-ai/design-system 0.10.0 → 0.11.1

package/src/components/account-contacts-popover.tsx

@@ -0,0 +1,192 @@
+"use client"
+
+import * as React from "react"
+import {
+  Clock,
+  ExternalLink,
+} from "lucide-react"
+import type { SuggestedContact, SuggestedActionsIconMap } from "./suggested-actions"
+
+// ---------------------------------------------------------------------------
+// BrandIcon
+// ---------------------------------------------------------------------------
+
+export function BrandIcon({ src, alt, className }: { src: string; alt: string; className?: string }) {
+  return (
+    <img
+      src={src}
+      alt={alt}
+      className={`${className ?? ""} object-contain`}
+      draggable={false}
+    />
+  )
+}
+
+// ---------------------------------------------------------------------------
+// AccountContactsPopover
+// ---------------------------------------------------------------------------
+
+export interface AccountContactsPopoverProps {
+  contacts: SuggestedContact[]
+  onSelect: (contact: SuggestedContact) => void
+  onSelectTo?: (contact: SuggestedContact) => void
+  onSelectCc?: (contact: SuggestedContact) => void
+  onSelectBcc?: (contact: SuggestedContact) => void
+  onViewAll?: () => void
+  onOpenRecentActivity?: () => void
+  trigger: React.ReactNode
+  iconMap?: SuggestedActionsIconMap
+}
+
+export function AccountContactsPopover({
+  contacts,
+  onSelect,
+  onSelectTo,
+  onSelectCc,
+  onSelectBcc,
+  onViewAll,
+  onOpenRecentActivity,
+  trigger,
+  iconMap,
+}: AccountContactsPopoverProps) {
+  const [open, setOpen] = React.useState(false)
+  const triggerRef = React.useRef<HTMLDivElement>(null)
+  const [popoverStyle, setPopoverStyle] = React.useState<React.CSSProperties>({})
+
+  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 (
+    <div>
+      <div ref={triggerRef} onClick={() => setOpen(!open)}>{trigger}</div>
+      {open && (
+        <>
+          <div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
+          <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">
+            <div className="px-3 py-1.5 text-[11px] font-medium text-muted-foreground/60 uppercase tracking-wide">
+              Account Contacts
+            </div>
+            <div className="max-h-48 overflow-y-auto">
+              {contacts.map((c, i) => (
+                <div
+                  key={i}
+                  role="button"
+                  onClick={() => { (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"
+                >
+                  <div className="w-7 h-7 rounded-full bg-muted flex items-center justify-center text-[10px] font-medium text-muted-foreground shrink-0">
+                    {c.name.split(" ").map((n) => n[0]).join("")}
+                  </div>
+                  <div className="flex-1 min-w-0 overflow-hidden">
+                    <div className="truncate text-sm font-medium text-foreground">{c.name}</div>
+                    <div className="truncate text-xs text-muted-foreground leading-tight">
+                      {c.role} · {c.email ?? c.emails?.[0] ?? c.phone ?? c.phones?.[0] ?? ""}
+                    </div>
+                    {c.lastActivity && (
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          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"
+                      >
+                        <Clock className="w-3 h-3 shrink-0" />
+                        <span className="shrink-0 font-medium">Last activity</span>
+                        <span className="shrink-0 text-muted-foreground/60">·</span>
+                        <span className="shrink-0">{c.lastActivity.date}</span>
+                        <span className="shrink-0 text-muted-foreground/60">·</span>
+                        <span className="truncate capitalize">{c.lastActivity.type}</span>
+                      </button>
+                    )}
+                  </div>
+                  <div className="ml-2 flex items-center gap-1.5 shrink-0">
+                    {onSelectTo && (
+                      <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"
+                      >
+                        To
+                      </button>
+                    )}
+                    {onSelectCc && (
+                      <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"
+                      >
+                        Cc
+                      </button>
+                    )}
+                    {onSelectBcc && (
+                      <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"
+                      >
+                        Bcc
+                      </button>
+                    )}
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        if (c.salesforceUrl) {
+                          window.open(c.salesforceUrl, "_blank", "noopener,noreferrer")
+                        } else {
+                          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`}
+                    >
+                      {iconMap?.salesforce ? (
+                        <BrandIcon src={iconMap.salesforce} alt="Salesforce" className="w-3.5 h-3.5" />
+                      ) : (
+                        <ExternalLink className="w-3.5 h-3.5 text-muted-foreground" />
+                      )}
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+            {onViewAll && (
+              <>
+                <div className="h-px bg-border mx-3 my-1" />
+                <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"
+                >
+                  <ExternalLink className="w-3 h-3" />
+                  View all contacts
+                </button>
+              </>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  )
+}

package/src/components/draft-feedback-inline.tsx

@@ -0,0 +1,193 @@
+"use client"
+
+import * as React from "react"
+import {
+  ThumbsUp,
+  ThumbsDown,
+  Check,
+  RefreshCw,
+} from "lucide-react"
+
+// ---------------------------------------------------------------------------
+// DraftFeedbackInline
+// ---------------------------------------------------------------------------
+
+const positivePills = ["Tone", "Personalization", "Length", "CTA", "Other"]
+const negativePills = ["Too formal", "Too casual", "Too long", "Missing context", "Wrong angle", "Factual error", "Other"]
+
+export interface DraftFeedbackInlineProps {
+  initialDirection?: 'up' | 'down' | null
+  onRegenerateRequest?: (pills: string[], detail: string) => void
+  onSubmitFeedback?: (type: "up" | "down", pills: string[], detail: string) => void
+  onDiscardRequest?: (pills: string[], detail: string) => void
+}
+
+export function DraftFeedbackInline({
+  initialDirection,
+  onRegenerateRequest,
+  onSubmitFeedback,
+  onDiscardRequest,
+}: DraftFeedbackInlineProps) {
+  const [thumbState, setThumbState] = React.useState<"up" | "down" | null>(initialDirection ?? null)
+  const [selectedPills, setSelectedPills] = React.useState<string[]>([])
+  const [detailText, setDetailText] = React.useState("")
+  const [noted, setNoted] = React.useState(false)
+  const [regenerated, setRegenerated] = React.useState(false)
+
+  const togglePill = React.useCallback((pill: string) => {
+    setSelectedPills((prev) => (prev.includes(pill) ? prev.filter((p) => p !== pill) : [...prev, pill]))
+  }, [])
+
+  const handleSubmit = React.useCallback(() => {
+    if (!thumbState) return
+    onSubmitFeedback?.(thumbState, selectedPills, detailText)
+    setNoted(true)
+    setTimeout(() => {
+      setThumbState(null)
+      setSelectedPills([])
+      setDetailText("")
+      setNoted(false)
+    }, 3000)
+  }, [thumbState, selectedPills, detailText, onSubmitFeedback])
+
+  const handleRegenerate = React.useCallback(() => {
+    if (!thumbState) return
+    onRegenerateRequest?.(selectedPills, detailText)
+    setRegenerated(true)
+    setTimeout(() => {
+      setThumbState(null)
+      setSelectedPills([])
+      setDetailText("")
+      setRegenerated(false)
+    }, 3000)
+  }, [thumbState, selectedPills, detailText, onRegenerateRequest])
+
+  const handleDiscard = React.useCallback(() => {
+    if (!thumbState) return
+    onDiscardRequest?.(selectedPills, detailText)
+  }, [thumbState, selectedPills, detailText, onDiscardRequest])
+
+  if (noted) {
+    return (
+      <div className="flex items-center gap-1.5 py-1 animate-in fade-in slide-in-from-top-1 duration-200">
+        <Check className="w-3.5 h-3.5 text-emerald-500" />
+        <span className="text-xs text-muted-foreground">Feedback recorded</span>
+      </div>
+    )
+  }
+
+  if (regenerated) {
+    return (
+      <div className="py-2 animate-in fade-in slide-in-from-top-1 duration-200">
+        <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">
+          <RefreshCw className="w-3 h-3 text-indigo-500 animate-spin" />
+          <span className="text-xs font-medium text-indigo-600 dark:text-indigo-400">Regenerating draft...</span>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-0">
+      <div className="flex items-center justify-between">
+        <span className="text-sm text-foreground font-medium">How&apos;s this draft?</span>
+        <div className="flex gap-1">
+          <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"
+            }`}
+          >
+            <ThumbsUp className="w-4 h-4" fill={thumbState === "up" ? "currentColor" : "none"} />
+          </button>
+          <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"
+            }`}
+          >
+            <ThumbsDown className="w-4 h-4" fill={thumbState === "down" ? "currentColor" : "none"} />
+          </button>
+        </div>
+      </div>
+
+      {thumbState && (
+        <div className="pt-3 space-y-3 animate-in fade-in slide-in-from-top-2 duration-200">
+          <div>
+            <span className="text-xs text-muted-foreground mb-2 block font-medium">
+              {thumbState === "up" ? "What worked well?" : "What needs improvement?"}
+            </span>
+            <div className="flex flex-wrap gap-1.5">
+              {(thumbState === "up" ? positivePills : negativePills).map((pill) => (
+                <button
+                  key={pill}
+                  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"
+                  }`}
+                >
+                  {pill}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <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]"
+          />
+
+          <div className="flex items-center gap-2 pt-1">
+            {thumbState === "down" ? (
+              <>
+                <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"
+                  }`}
+                >
+                  <RefreshCw className="w-3 h-3" />
+                  Regenerate draft
+                </button>
+                <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"
+                >
+                  Discard draft
+                </button>
+              </>
+            ) : (
+              <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"
+              >
+                Submit feedback
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}