@handled-ai/design-system 0.10.0 → 0.11.1

package/src/components/suggested-actions.tsx

@@ -18,7 +18,6 @@ import {
   ThumbsUp,
   ThumbsDown,
   Check,
-  RefreshCw,
   ArrowLeft,
   Mail,
   Phone,
@@ -31,21 +30,8 @@ import {
   Globe,
 } from "lucide-react"
 import { Button } from "./button"
-
-// ---------------------------------------------------------------------------
-// Brand Icons (image-based from registry)
-// ---------------------------------------------------------------------------
-
-function BrandIcon({ src, alt, className }: { src: string; alt: string; className?: string }) {
-  return (
-    <img
-      src={src}
-      alt={alt}
-      className={`${className ?? ""} object-contain`}
-      draggable={false}
-    />
-  )
-}
+import { DraftFeedbackInline } from "./draft-feedback-inline"
+import { AccountContactsPopover, BrandIcon } from "./account-contacts-popover"
 
 export interface SuggestedActionsIconMap {
   gmail?: string
@@ -248,186 +234,6 @@ function AiEditPanel({ onApply }: { onApply?: (pills: string[], description: str
   )
 }
 
-// ---------------------------------------------------------------------------
-// DraftFeedbackInline
-// ---------------------------------------------------------------------------
-
-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,
-}: {
-  onRegenerateRequest?: (pills: string[], detail: string) => void
-  onSubmitFeedback?: (type: "up" | "down", pills: string[], detail: string) => void
-  onDiscardRequest?: (pills: string[], detail: string) => void
-}) {
-  const [thumbState, setThumbState] = React.useState<"up" | "down" | null>(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>
-  )
-}
-
 // ---------------------------------------------------------------------------
 // EditorToolbar
 // ---------------------------------------------------------------------------
@@ -696,173 +502,6 @@ function ContactCard({
   )
 }
 
-// ---------------------------------------------------------------------------
-// AccountContactsPopover
-// ---------------------------------------------------------------------------
-
-function AccountContactsPopover({
-  contacts,
-  onSelect,
-  onSelectTo,
-  onSelectCc,
-  onSelectBcc,
-  onViewAll,
-  onOpenRecentActivity,
-  trigger,
-  iconMap,
-}: {
-  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
-}) {
-  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>
-  )
-}
-
 // ---------------------------------------------------------------------------
 // EmailHeader (Notion Mail style)
 // ---------------------------------------------------------------------------

package/src/index.ts

@@ -77,6 +77,10 @@ export * from "./components/status-badge"
 export * from "./components/step-timeline"
 export * from "./components/sticky-action-bar"
 export * from "./components/styled-bar-list"
+export { DraftFeedbackInline } from "./components/draft-feedback-inline"
+export type { DraftFeedbackInlineProps } from "./components/draft-feedback-inline"
+export { AccountContactsPopover, BrandIcon } from "./components/account-contacts-popover"
+export type { AccountContactsPopoverProps } from "./components/account-contacts-popover"
 export * from "./components/suggested-actions"
 export * from "./components/switch"
 export * from "./components/table"

package/src/prototype/prototype-config.ts

@@ -48,6 +48,12 @@ export interface SignalScoreData {
   onDismissFeedback?: (reasons: string[], detail: string, subReason?: string) => void
   initialScoreFeedback?: { type: "up" | "down"; pills: string[]; detail: string } | null
   initialFactorFeedback?: Record<string, { type: "up" | "down"; detail: string }>
+  /** AI-generated signal brief text. When present, rendered in a dedicated section. */
+  signalBrief?: string
+  /** Compact label for time-remaining chip (e.g., "13 days left"). */
+  timeChipLabel?: string
+  /** Expanded detail for time chip popover (e.g., "Day 2 of 14 · Event detected on May 1"). */
+  timeChipDetail?: string
 }
 
 // ---------------------------------------------------------------------------

package/src/prototype/prototype-inbox-view.tsx

@@ -18,6 +18,7 @@ import {
   Columns2,
   Square,
   Tag,
+  Sparkles,
 } from "lucide-react"
 
 import {
@@ -238,6 +239,11 @@ export function DetailView({
             <div className="inline-flex items-center gap-1 rounded-md bg-muted px-2.5 py-1 text-xs font-medium text-muted-foreground">
               {item.tag1}
             </div>
+            {signalData.timeChipLabel && (
+              <Badge variant="outline" title={signalData.timeChipDetail ?? undefined}>
+                {signalData.timeChipLabel}
+              </Badge>
+            )}
             <button
               type="button"
               onClick={onOpenEntityPanel}
@@ -300,9 +306,16 @@ export function DetailView({
                     {briefIntro}
                   </p>
                 ) : null}
-                <p className="text-sm text-foreground/90 leading-relaxed mb-4">
-                  {signalData.whyNow}
-                </p>
+                {signalData.signalBrief ? (
+                  <div className="flex items-start gap-2 text-sm text-foreground/90 leading-relaxed mb-4">
+                    <Sparkles className="h-4 w-4 mt-0.5 shrink-0 text-primary" />
+                    <span>{signalData.signalBrief}</span>
+                  </div>
+                ) : (
+                  <p className="text-sm text-foreground/90 leading-relaxed mb-4">
+                    {signalData.whyNow}
+                  </p>
+                )}
 
                 <ScoreFeedback.Root
                   onSubmitFeedback={(type, pills, detail) => (signalData.onScoreFeedback ?? onScoreFeedback)?.(type, pills, detail)}