@handled-ai/design-system 0.18.37 → 0.18.39

package/src/components/related-record-action-card.tsx

@@ -0,0 +1,169 @@
+"use client"
+
+import * as React from "react"
+import { ExternalLink } from "lucide-react"
+
+import { BRAND_ICONS } from "../lib/icons"
+import { cn } from "../lib/utils"
+
+export type RelatedRecordActionCardKind = "case" | "account" | "opportunity" | "salesforce" | "generic"
+
+export type RelatedRecordActionIcon = "salesforce" | React.ReactNode
+
+export interface RelatedRecordActionCardProps {
+  kind: RelatedRecordActionCardKind
+  label: string
+  subtitle?: string
+  disabledReason?: string
+  href?: string
+  external?: boolean
+  icon?: RelatedRecordActionIcon
+  onClick?: React.MouseEventHandler<HTMLButtonElement>
+  className?: string
+  testId?: string
+}
+
+function renderActionIcon(icon: RelatedRecordActionIcon | undefined, kind: RelatedRecordActionCardKind) {
+  if (icon === "salesforce" || kind === "salesforce") {
+    return (
+      <img
+        src={BRAND_ICONS.salesforce}
+        alt="Salesforce"
+        className="h-4 w-4 object-contain"
+        draggable={false}
+      />
+    )
+  }
+
+  if (icon) {
+    return icon
+  }
+
+  return <span aria-hidden="true">{kind.slice(0, 1).toUpperCase()}</span>
+}
+
+export function RelatedRecordActionCard({
+  kind,
+  label,
+  subtitle,
+  disabledReason,
+  href,
+  external,
+  icon,
+  onClick,
+  className,
+  testId,
+}: RelatedRecordActionCardProps) {
+  const isDisabled = Boolean(disabledReason) || (!href && !onClick)
+
+  const content = (
+    <>
+      <span
+        data-slot="related-record-action-card-icon"
+        className={cn(
+          "flex h-8 w-8 shrink-0 items-center justify-center rounded-md border text-xs font-semibold transition-colors",
+          isDisabled
+            ? "border-border/60 bg-muted/40 text-muted-foreground"
+            : "border-border bg-muted/30 text-muted-foreground group-hover:bg-muted/60 group-active:text-primary"
+        )}
+      >
+        {renderActionIcon(icon, kind)}
+      </span>
+      <span className="min-w-0 flex-1">
+        <span
+          data-slot="related-record-action-card-label"
+          className={cn(
+            "block truncate text-sm font-medium transition-colors",
+            isDisabled ? "text-muted-foreground" : "text-foreground group-active:text-primary"
+          )}
+        >
+          {label}
+        </span>
+        {subtitle && (
+          <span
+            data-slot="related-record-action-card-subtitle"
+            className="mt-0.5 block truncate text-xs text-muted-foreground"
+          >
+            {subtitle}
+          </span>
+        )}
+        {disabledReason && (
+          <span
+            data-slot="related-record-action-card-disabled-reason"
+            className="mt-1 block text-xs text-muted-foreground"
+          >
+            {disabledReason}
+          </span>
+        )}
+      </span>
+      {external && (
+        <>
+          <span className="sr-only">opens in a new tab</span>
+          <ExternalLink
+            aria-hidden="true"
+            data-slot="related-record-action-card-external-icon"
+            className={cn(
+              "h-3.5 w-3.5 shrink-0 text-muted-foreground transition-colors",
+              isDisabled ? "" : "group-active:text-primary"
+            )}
+          />
+        </>
+      )}
+    </>
+  )
+
+  if (isDisabled) {
+    return (
+      <div
+        aria-disabled="true"
+        data-kind={kind}
+        data-slot="related-record-action-card"
+        data-testid={testId}
+        className={cn(
+          "group flex w-full items-center gap-3 rounded-lg border px-3 py-2 text-left transition-colors",
+          "cursor-not-allowed border-border/60 bg-muted/20 text-muted-foreground opacity-70",
+          className
+        )}
+      >
+        {content}
+      </div>
+    )
+  }
+
+  if (href) {
+    return (
+      <a
+        href={href}
+        target={external ? "_blank" : undefined}
+        rel={external ? "noopener noreferrer" : undefined}
+        data-kind={kind}
+        data-slot="related-record-action-card"
+        data-testid={testId}
+        className={cn(
+          "group flex w-full items-center gap-3 rounded-lg border border-border bg-background px-3 py-2 text-left transition-colors",
+          "cursor-pointer hover:bg-muted/50 hover:border-border/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:text-primary",
+          className
+        )}
+      >
+        {content}
+      </a>
+    )
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      data-kind={kind}
+      data-slot="related-record-action-card"
+      data-testid={testId}
+      className={cn(
+        "group flex w-full items-center gap-3 rounded-lg border border-border bg-background px-3 py-2 text-left transition-colors",
+        "cursor-pointer hover:bg-muted/50 hover:border-border/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:text-primary",
+        className
+      )}
+    >
+      {content}
+    </button>
+  )
+}

package/src/components/score-feedback.tsx

@@ -149,7 +149,7 @@ function Trigger({ className }: { className?: string }) {
           className,
         )}
       >
-        <Check className="w-3 h-3 text-emerald-500" />
+        <Check className="w-3 h-3 text-foreground" />
         <span className="text-[11px] text-muted-foreground">{label}</span>
       </button>
     )
@@ -163,11 +163,11 @@ function Trigger({ className }: { className?: string }) {
         className={cn(
           "p-1.5 rounded transition-colors",
           thumbState === "up"
-            ? "bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400"
+            ? "bg-muted text-foreground"
             : "hover:bg-muted text-muted-foreground hover:text-foreground"
         )}
       >
-        <ThumbsUp className="w-3.5 h-3.5" fill={thumbState === "up" ? "currentColor" : "none"} />
+        <ThumbsUp className="w-3.5 h-3.5" />
       </button>
       <button
         type="button"
@@ -175,11 +175,11 @@ function Trigger({ className }: { className?: string }) {
         className={cn(
           "p-1.5 rounded transition-colors",
           thumbState === "down"
-            ? "bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400"
+            ? "bg-muted text-foreground"
             : "hover:bg-muted text-muted-foreground hover:text-foreground"
         )}
       >
-        <ThumbsDown className="w-3.5 h-3.5" fill={thumbState === "down" ? "currentColor" : "none"} />
+        <ThumbsDown className="w-3.5 h-3.5" />
       </button>
     </div>
   )
@@ -219,8 +219,8 @@ function Panel({ className }: { className?: string }) {
                   "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-muted text-foreground border-border"
+                      : "bg-red-50 text-red-700 border-red-200 dark:bg-red-950/30 dark:text-red-300 dark:border-red-800"
                     : "bg-background text-muted-foreground border-border hover:bg-muted/50 hover:text-foreground"
                 )}
               >

package/src/components/suggested-actions.tsx

@@ -925,6 +925,14 @@ function SuggestedActionCard({
   )
   const [showAiEdit, setShowAiEdit] = React.useState(false)
   const [feedbackOpen, setFeedbackOpen] = React.useState(false)
+  const [feedbackDirection, setFeedbackDirection] = React.useState<"up" | "down" | null>(null)
+  const handleThumbClick = (dir: "up" | "down") => {
+    if (feedbackOpen && feedbackDirection === dir) {
+      setFeedbackOpen(false); setFeedbackDirection(null)
+    } else {
+      setFeedbackDirection(dir); setFeedbackOpen(true)
+    }
+  }
   const [followUpEnabled, setFollowUpEnabled] = React.useState(action.followUp?.enabled ?? false)
   const [threadExpanded, setThreadExpanded] = React.useState(false)
   const [expandedMessageId, setExpandedMessageId] = React.useState<string | null>(null)
@@ -1016,18 +1024,22 @@ function SuggestedActionCard({
         </div>
         <div className="flex items-center gap-1.5">
           <button
-            onClick={() => setFeedbackOpen(!feedbackOpen)}
+            onClick={() => handleThumbClick("up")}
             className={`p-1.5 rounded transition-colors ${
-              feedbackOpen
-                ? "bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400"
+              feedbackOpen && feedbackDirection === "up"
+                ? "bg-muted text-foreground"
                 : "hover:bg-muted text-muted-foreground hover:text-foreground"
             }`}
           >
             <ThumbsUp className="w-3.5 h-3.5" />
           </button>
           <button
-            onClick={() => setFeedbackOpen(!feedbackOpen)}
-            className="p-1.5 rounded transition-colors hover:bg-muted text-muted-foreground hover:text-foreground"
+            onClick={() => handleThumbClick("down")}
+            className={`p-1.5 rounded transition-colors ${
+              feedbackOpen && feedbackDirection === "down"
+                ? "bg-muted text-foreground"
+                : "hover:bg-muted text-muted-foreground hover:text-foreground"
+            }`}
           >
             <ThumbsDown className="w-3.5 h-3.5" />
           </button>
@@ -1047,6 +1059,8 @@ 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
+            key={`feedback-${feedbackDirection}`}
+            initialDirection={feedbackDirection}
             onRegenerateRequest={(pills, detail) => {
               onFeedback?.("down", pills, detail)
             }}

package/src/index.ts

@@ -21,6 +21,10 @@ export * from "./components/badge"
 export * from "./components/button"
 export * from "./components/card"
 export * from "./components/case-panel-email-composer"
+export * from "./components/email-composer-row"
+export * from "./components/email-preview-card"
+export * from "./components/email-recipient-field"
+export * from "./components/email-send-bar"
 export * from "./components/case-panel-activity-timeline"
 export * from "./components/case-panel-detail"
 export * from "./components/case-panel-why"
@@ -40,12 +44,9 @@ export * from "./components/detail-view"
 export * from "./components/detail-drawer"
 export * from "./components/dialog"
 export * from "./components/dropdown-menu"
-export * from "./components/email-composer-row"
-export * from "./components/email-preview-card"
-export * from "./components/email-recipient-field"
-export * from "./components/email-send-bar"
 export * from "./components/empty-state"
 export * from "./components/entity-panel"
+export * from "./components/related-record-action-card"
 export { FeedbackFooter, FeedbackChipGroup, FeedbackInput, FeedbackActions, InlineFeedbackControl } from "./components/feedback-primitives"
 export type { FeedbackFooterProps, FeedbackChipTree, FeedbackChipGroupProps, FeedbackInputProps, FeedbackActionsProps, FeedbackSubmitData, PersistedFeedbackData, InlineFeedbackControlProps } from "./components/feedback-primitives"
 export { SignalPriorityPopover } from "./components/signal-priority-popover"