@handled-ai/design-system 0.9.20 → 0.9.21

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

@@ -3,13 +3,65 @@
 import * as React from "react"
 import { Check, CirclePlus, ExternalLink, Lock, ThumbsDown } from "lucide-react"
 
-const dismissReasons = [
-  "Bad timing",
-  "Inaccurate data",
-  "Wrong account",
-  "Already handled",
-  "Not actionable",
-  "Other",
+interface DismissReasonNode {
+  label: string
+  subOptions?: string[]
+}
+
+const dismissReasonTree: DismissReasonNode[] = [
+  {
+    label: "Not relevant for this account",
+    subOptions: [
+      "Business as usual for this account",
+      "Account in maintenance mode",
+      "Wrong contact for this signal",
+      "Other",
+    ],
+  },
+  {
+    label: "Bad timing",
+    subOptions: [
+      "Too early in the relationship",
+      "Too soon after last outreach",
+      "Wrong time of year for this account",
+      "Other",
+    ],
+  },
+  {
+    label: "Inaccurate data",
+    subOptions: [
+      "Wrong amount or number",
+      "Stale data",
+      "Account info wrong",
+      "Other",
+    ],
+  },
+  {
+    label: "Wrong account",
+    subOptions: [
+      "Different account meant",
+      "Account not in scope",
+      "Other",
+    ],
+  },
+  {
+    label: "Already handled",
+    subOptions: [
+      "Already in conversation",
+      "Already an open Opportunity",
+      "Already escalated",
+      "Other",
+    ],
+  },
+  {
+    label: "Not actionable",
+    subOptions: [
+      "No clear next step",
+      "Outside our remit",
+      "Other",
+    ],
+  },
+  { label: "Other" },
 ]
 
 const approveReasons = [
@@ -53,7 +105,7 @@ interface SignalApprovalContextValue {
   approve: () => void
   submitApproveFeedback: (reasons: string[], detail: string) => void
   skipApproveFeedback: () => void
-  dismiss: (reasons: string[], detail: string) => void
+  dismiss: (reasons: string[], detail: string, subReason?: string) => void
   requestApproval: () => void
   requestDismiss: () => void
   cancel: () => void
@@ -78,7 +130,7 @@ interface RootProps {
   hideApproveButton?: boolean
   onApprove?: () => void
   onApproveFeedback?: (reasons: string[], detail: string) => void
-  onDismiss?: (reasons: string[], detail: string) => void
+  onDismiss?: (reasons: string[], detail: string, subReason?: string) => void
 }
 
 function Root({ children, companyName, opportunityUrl, scheduledTime, initialApprovalState, labels: labelOverrides, hideApproveButton, onApprove, onApproveFeedback, onDismiss }: RootProps) {
@@ -115,9 +167,9 @@ function Root({ children, companyName, opportunityUrl, scheduledTime, initialApp
   }, [])
 
   const dismiss = React.useCallback(
-    (reasons: string[], detail: string) => {
+    (reasons: string[], detail: string, subReason?: string) => {
       setApprovalState("dismissed")
-      onDismiss?.(reasons, detail)
+      onDismiss?.(reasons, detail, subReason)
     },
     [onDismiss]
   )
@@ -134,11 +186,13 @@ function Root({ children, companyName, opportunityUrl, scheduledTime, initialApp
 function SubmittedFeedback({
   reasons,
   detail,
+  subReason,
   variant,
   onEdit,
 }: {
   reasons: string[]
   detail: string
+  subReason?: string
   variant: "approve" | "dismiss"
   onEdit: () => void
 }) {
@@ -164,6 +218,13 @@ function SubmittedFeedback({
               {r}
             </span>
           ))}
+          {subReason && (
+            <span
+              className={`rounded-full border px-2 py-0.5 text-[10px] font-medium transition-colors group-hover:opacity-80 ${pillClass}`}
+            >
+              {subReason}
+            </span>
+          )}
         </div>
       )}
       {detail && (
@@ -176,15 +237,41 @@ function SubmittedFeedback({
 function Actions() {
   const { approvalState, companyName, opportunityUrl, scheduledTime, labels, hideApproveButton, approve, submitApproveFeedback, skipApproveFeedback, dismiss, requestApproval, requestDismiss, cancel } =
     useSignalApproval()
+  const [selectedTopReason, setSelectedTopReason] = React.useState<string | null>(null)
+  const [selectedSubReason, setSelectedSubReason] = React.useState<string | null>(null)
   const [selectedReasons, setSelectedReasons] = React.useState<string[]>([])
   const [detailText, setDetailText] = React.useState("")
-  const [submittedFeedback, setSubmittedFeedback] = React.useState<{ reasons: string[]; detail: string } | null>(null)
+  const [submittedFeedback, setSubmittedFeedback] = React.useState<{ reasons: string[]; detail: string; subReason?: string } | null>(null)
   const [isEditing, setIsEditing] = React.useState(false)
 
-  const otherSelected = selectedReasons.includes("Other")
-  const canSubmitDismiss = selectedReasons.length > 0 && (!otherSelected || detailText.trim().length > 0)
+  const topNode = dismissReasonTree.find((n) => n.label === selectedTopReason)
+  const hasSubOptions = !!(topNode?.subOptions && topNode.subOptions.length > 0)
+  const isTopOther = selectedTopReason === "Other" && !hasSubOptions
+  const isSubOther = selectedSubReason === "Other"
+  const needsText = isTopOther || isSubOther
+  const canSubmitDismiss =
+    selectedTopReason !== null &&
+    (!hasSubOptions || selectedSubReason !== null) &&
+    (!needsText || detailText.trim().length > 0)
+
   const canSubmitApprove = selectedReasons.length > 0 || detailText.trim().length > 0
 
+  const selectTopReason = (label: string) => {
+    if (selectedTopReason === label) {
+      setSelectedTopReason(null)
+      setSelectedSubReason(null)
+      setDetailText("")
+    } else {
+      setSelectedTopReason(label)
+      setSelectedSubReason(null)
+      setDetailText("")
+    }
+  }
+
+  const selectSubReason = (label: string) => {
+    setSelectedSubReason(selectedSubReason === label ? null : label)
+  }
+
   const toggleReason = (reason: string) => {
     setSelectedReasons((prev) =>
       prev.includes(reason) ? prev.filter((r) => r !== reason) : [...prev, reason]
@@ -193,6 +280,8 @@ function Actions() {
 
   const startEditing = () => {
     if (submittedFeedback) {
+      setSelectedTopReason(submittedFeedback.reasons[0] ?? null)
+      setSelectedSubReason(submittedFeedback.subReason ?? null)
       setSelectedReasons([...submittedFeedback.reasons])
       setDetailText(submittedFeedback.detail)
     }
@@ -200,11 +289,12 @@ function Actions() {
   }
 
   const handleDismissSubmit = () => {
-    if (!canSubmitDismiss) return
-    const fb = { reasons: [...selectedReasons], detail: detailText.trim() }
+    if (!canSubmitDismiss || !selectedTopReason) return
+    const fb = { reasons: [selectedTopReason], detail: detailText.trim(), subReason: selectedSubReason ?? undefined }
     setSubmittedFeedback(fb)
-    dismiss(selectedReasons, detailText.trim())
-    setSelectedReasons([])
+    dismiss([selectedTopReason], detailText.trim(), selectedSubReason ?? undefined)
+    setSelectedTopReason(null)
+    setSelectedSubReason(null)
     setDetailText("")
     setIsEditing(false)
   }
@@ -219,6 +309,8 @@ function Actions() {
   }
 
   const handleEditCancel = () => {
+    setSelectedTopReason(null)
+    setSelectedSubReason(null)
     setSelectedReasons([])
     setDetailText("")
     setIsEditing(false)
@@ -226,6 +318,8 @@ function Actions() {
 
   const handleCancel = () => {
     cancel()
+    setSelectedTopReason(null)
+    setSelectedSubReason(null)
     setSelectedReasons([])
     setDetailText("")
   }
@@ -404,20 +498,37 @@ function Actions() {
           </div>
           <p className="text-xs font-medium text-muted-foreground">Edit your feedback</p>
           <div className="flex flex-wrap gap-1.5">
-            {dismissReasons.map((reason) => {
-              const selected = selectedReasons.includes(reason)
+            {dismissReasonTree.map((node) => {
+              const selected = selectedTopReason === node.label
               return (
-                <button key={reason} type="button" onClick={() => toggleReason(reason)}
+                <button key={node.label} type="button" onClick={() => selectTopReason(node.label)}
                   className={`rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors ${
                     selected ? "border-red-200 bg-red-100 text-red-700" : "border-border bg-background text-muted-foreground hover:bg-muted/50 hover:text-foreground"
-                  }`}>{reason}</button>
+                  }`}>{node.label}</button>
               )
             })}
           </div>
-          <input type="text" value={detailText} onChange={(e) => setDetailText(e.target.value)}
-            onKeyDown={(e) => { if (e.key === "Enter" && canSubmitDismiss) handleDismissSubmit() }}
-            placeholder={otherSelected ? "Please describe (required)" : "Provide additional feedback..."}
-            className="h-7 w-full rounded-md border border-border bg-muted/20 px-2.5 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring" />
+          {topNode?.subOptions && (
+            <div className="ml-3 border-l-2 border-muted pl-3">
+              <div className="flex flex-wrap gap-1.5">
+                {topNode.subOptions.map((sub) => {
+                  const selected = selectedSubReason === sub
+                  return (
+                    <button key={sub} type="button" onClick={() => selectSubReason(sub)}
+                      className={`rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors ${
+                        selected ? "border-red-200 bg-red-100 text-red-700" : "border-border bg-background text-muted-foreground hover:bg-muted/50 hover:text-foreground"
+                      }`}>{sub}</button>
+                  )
+                })}
+              </div>
+            </div>
+          )}
+          {selectedTopReason && (
+            <input type="text" value={detailText} onChange={(e) => setDetailText(e.target.value)}
+              onKeyDown={(e) => { if (e.key === "Enter" && canSubmitDismiss) handleDismissSubmit() }}
+              placeholder={needsText ? "Please describe (required)" : "Add context (optional)"}
+              className="h-7 w-full rounded-md border border-border bg-muted/20 px-2.5 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring" />
+          )}
           <div className="flex items-center gap-2">
             <button type="button" onClick={handleDismissSubmit} disabled={!canSubmitDismiss}
               className={`inline-flex h-7 items-center gap-1.5 rounded-md px-3 text-xs font-semibold transition-colors ${canSubmitDismiss ? "bg-foreground text-background hover:bg-foreground/90" : "cursor-not-allowed bg-muted text-muted-foreground"}`}>
@@ -442,6 +553,7 @@ function Actions() {
           <SubmittedFeedback
             reasons={submittedFeedback.reasons}
             detail={submittedFeedback.detail}
+            subReason={submittedFeedback.subReason}
             variant="dismiss"
             onEdit={startEditing}
           />
@@ -484,26 +596,50 @@ function Actions() {
       <div className="space-y-3">
         <p className="text-xs font-medium text-muted-foreground">{labels.dismissPrompt}</p>
         <div className="flex flex-wrap gap-1.5">
-          {dismissReasons.map((reason) => {
-            const selected = selectedReasons.includes(reason)
+          {dismissReasonTree.map((node) => {
+            const selected = selectedTopReason === node.label
             return (
               <button
-                key={reason}
+                key={node.label}
                 type="button"
-                onClick={() => toggleReason(reason)}
+                onClick={() => selectTopReason(node.label)}
                 className={`rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors ${
                   selected
                     ? "border-red-200 bg-red-100 text-red-700"
                     : "border-border bg-background text-muted-foreground hover:bg-muted/50 hover:text-foreground"
                 }`}
               >
-                {reason}
+                {node.label}
               </button>
             )
           })}
         </div>
 
-        {(selectedReasons.length > 0 || otherSelected) && (
+        {topNode?.subOptions && (
+          <div className="ml-3 border-l-2 border-muted pl-3">
+            <div className="flex flex-wrap gap-1.5">
+              {topNode.subOptions.map((sub) => {
+                const selected = selectedSubReason === sub
+                return (
+                  <button
+                    key={sub}
+                    type="button"
+                    onClick={() => selectSubReason(sub)}
+                    className={`rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors ${
+                      selected
+                        ? "border-red-200 bg-red-100 text-red-700"
+                        : "border-border bg-background text-muted-foreground hover:bg-muted/50 hover:text-foreground"
+                    }`}
+                  >
+                    {sub}
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+        )}
+
+        {selectedTopReason && (
           <input
             type="text"
             value={detailText}
@@ -511,7 +647,7 @@ function Actions() {
             onKeyDown={(e) => {
               if (e.key === "Enter" && canSubmitDismiss) handleDismissSubmit()
             }}
-            placeholder={otherSelected ? "Please describe (required)" : "Provide additional feedback..."}
+            placeholder={needsText ? "Please describe (required)" : "Add context (optional)"}
             className="h-7 w-full rounded-md border border-border bg-muted/20 px-2.5 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring"
           />
         )}

package/src/components/suggested-actions.tsx

@@ -167,6 +167,7 @@ export interface SuggestedAction {
   callMeta?: SuggestedActionCallMeta
   manualMeta?: SuggestedActionManualMeta
   browserMeta?: SuggestedActionBrowserMeta
+  onFeedback?: (type: "up" | "down", pills: string[], detail: string) => void
 }
 
 // ---------------------------------------------------------------------------
@@ -1253,6 +1254,7 @@ function SuggestedActionCard({
   onOpenRecentActivity,
   onMarkComplete,
   onDispatchAgent,
+  onFeedback,
   iconMap,
   sendLabel,
   accountDetailsLabel,
@@ -1269,6 +1271,7 @@ function SuggestedActionCard({
   onOpenRecentActivity?: () => void
   onMarkComplete?: (id: number | string) => void
   onDispatchAgent?: (id: number | string, editedContent?: string, settings?: { aiDisclosureEnabled?: boolean; maxDurationMinutes?: string; callRecordingEnabled?: boolean; recordingNoticeEnabled?: boolean }) => void
+  onFeedback?: (type: "up" | "down", pills: string[], detail: string) => void
   iconMap?: SuggestedActionsIconMap
   sendLabel?: string
   accountDetailsLabel?: string
@@ -1405,10 +1408,14 @@ function SuggestedActionCard({
       {feedbackOpen && (
         <div className="px-5 py-3 border-b border-border/40 animate-in fade-in slide-in-from-top-2 duration-200">
           <DraftFeedbackInline
-            onRegenerateRequest={(pills, detail) => console.log("Regenerate:", pills, detail)}
-            onSubmitFeedback={(type, pills, detail) => console.log("Feedback:", type, pills, detail)}
+            onRegenerateRequest={(pills, detail) => {
+              onFeedback?.("down", pills, detail)
+            }}
+            onSubmitFeedback={(type, pills, detail) => {
+              onFeedback?.(type, pills, detail)
+            }}
             onDiscardRequest={(pills, detail) => {
-              console.log("Discard:", pills, detail)
+              onFeedback?.("down", pills, detail)
               onDismiss?.(action.id)
             }}
           />
@@ -1972,6 +1979,7 @@ export function SuggestedActions({
               onOpenRecentActivity={onOpenRecentActivity}
               onMarkComplete={onMarkComplete}
               onDispatchAgent={onDispatchAgent}
+              onFeedback={action.onFeedback}
               iconMap={iconMap}
               sendLabel={sendLabel}
               accountDetailsLabel={accountDetailsLabel}

package/src/prototype/prototype-config.ts

@@ -44,7 +44,7 @@ export interface SignalScoreData {
   confidence: number
   onFactorFeedback?: (factorKey: string, type: "up" | "down" | null, detail?: string) => void
   onApproveFeedback?: (reasons: string[], detail: string) => void
-  onDismissFeedback?: (reasons: string[], detail: string) => void
+  onDismissFeedback?: (reasons: string[], detail: string, subReason?: string) => void
 }
 
 // ---------------------------------------------------------------------------
@@ -72,6 +72,7 @@ export interface InboxViewConfig {
   hideToolbarActions?: boolean
   hideHoverActions?: boolean
   onSuggestedActionFeedback?: (actionId: number | string, feedback: string, actionTitle?: string) => void
+  onScoreFeedback?: (type: "up" | "down", pills: string[], detail: string) => void
   buildEntityChips?: (item: QueueItem) => Array<{ id: string; label: string; avatarLetter: string; onClick?: () => void }>
   quickFilterTabs?: Array<{ id: string; label: string; matchValue?: string; count?: number }>
   hideAccountsButton?: boolean

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

@@ -30,6 +30,7 @@ import {
 } from "../components/inbox-toolbar"
 import { GroupedListView, type GroupedListGroup } from "../components/item-list"
 import { SignalApproval, type ApprovalState } from "../components/signal-feedback-inline"
+import { ScoreFeedback } from "../components/score-feedback"
 import { ScoreBreakdown } from "../components/score-breakdown"
 import { Citation, type SourceDef } from "../components/detail-view"
 import {
@@ -107,6 +108,7 @@ export interface DetailViewProps {
   hideApproveButton?: boolean
   signalBriefCopy?: InboxViewConfig["signalBriefCopy"]
   renderDetailExtra?: (item: QueueItem) => React.ReactNode
+  onScoreFeedback?: (type: "up" | "down", pills: string[], detail: string) => void
 }
 
 export function DetailView({
@@ -128,6 +130,7 @@ export function DetailView({
   hideApproveButton,
   signalBriefCopy,
   renderDetailExtra,
+  onScoreFeedback,
 }: DetailViewProps) {
   const [evidenceExpanded, setEvidenceExpanded] = React.useState(false)
   const [showTimeline, setShowTimeline] = React.useState(false)
@@ -180,9 +183,8 @@ export function DetailView({
         signalData.onApproveFeedback?.(reasons, detail)
         console.log("Approval feedback:", { taskId: item.id, company: item.company, reasons, detail })
       }}
-      onDismiss={(reasons, detail) => {
-        signalData.onDismissFeedback?.(reasons, detail)
-        console.log("Dismissed signal:", { taskId: item.id, reasons, detail })
+      onDismiss={(reasons, detail, subReason) => {
+        signalData.onDismissFeedback?.(reasons, detail, subReason)
       }}
     >
       <div className="mx-auto w-full max-w-3xl p-6 pb-12 md:p-8">
@@ -277,14 +279,17 @@ export function DetailView({
                   {signalData.whyNow}
                 </p>
 
+                <ScoreFeedback.Root onSubmitFeedback={(type, pills, detail) => onScoreFeedback?.(type, pills, detail)}>
                 <div className="mb-5 rounded-md border border-border bg-muted/20 p-3">
                   <div className="flex items-center justify-between mb-1.5">
                     <span className="text-[10px] font-bold text-muted-foreground uppercase tracking-wider">Signal Score</span>
                     <div className="flex items-center gap-2">
                       <span className="text-sm font-bold text-foreground">{signalData.score}/100</span>
                       <span className={`text-[10px] font-bold uppercase ${scoreColor}`}>{scoreLabel}</span>
+                      <ScoreFeedback.Trigger />
                     </div>
                   </div>
+                  <ScoreFeedback.Panel />
                   <div className="h-1.5 bg-muted rounded-full overflow-hidden mb-2">
                     <div
                       className={`h-full rounded-full transition-all duration-500 ${barColor}`}
@@ -320,6 +325,7 @@ export function DetailView({
                     </div>
                   )}
                 </div>
+                </ScoreFeedback.Root>
 
                 {!evidenceExpanded && <SignalApproval.Actions />}
               </div>
@@ -398,6 +404,7 @@ export function PrototypeInboxView({
   hideToolbarActions,
   hideHoverActions,
   onSuggestedActionFeedback,
+  onScoreFeedback,
   headerActions,
   onOpenEntityPanel,
   onOpenRecentActivity,
@@ -640,6 +647,7 @@ export function PrototypeInboxView({
     hideApproveButton,
     signalBriefCopy,
     renderDetailExtra,
+    onScoreFeedback,
   }
 
   return (