@handled-ai/design-system 0.18.34 → 0.18.36

package/src/components/entity-panel.tsx

@@ -21,8 +21,10 @@ import {
   Maximize2,
   Minimize2,
   CalendarDays,
+  ChevronRight,
 } from "lucide-react"
 import { TimelineActivity, type TimelineEvent } from "./timeline-activity"
+import { BRAND_ICONS } from "../lib/icons"
 
 // ---------------------------------------------------------------------------
 // EntityPanel -- supports Sheet (side panel), wide, and fullscreen modes
@@ -778,6 +780,121 @@ export function EntityDetails({ onClose: _onClose }: { onClose?: () => void }) {
 // SourcesToggle – collapsible sources list
 // ---------------------------------------------------------------------------
 
+// ---------------------------------------------------------------------------
+// RelatedRecordActionCard – clickable card for related records (cases, accounts, etc.)
+// ---------------------------------------------------------------------------
+
+/** Icon can be a ReactNode (e.g. a Lucide icon) or the string "salesforce" for the brand logo. */
+export type RelatedRecordActionIcon = React.ReactNode | "salesforce"
+
+export interface RelatedRecordActionCardProps {
+  kind: string
+  label: string
+  subtitle?: string
+  href?: string
+  external?: boolean
+  icon?: RelatedRecordActionIcon
+  onClick?: () => void
+  disabledReason?: string
+  testId?: string
+}
+
+export function RelatedRecordActionCard({
+  kind: _kind,
+  label,
+  subtitle,
+  href,
+  external,
+  icon,
+  onClick,
+  disabledReason,
+  testId,
+}: RelatedRecordActionCardProps) {
+  const disabled = !!disabledReason
+
+  const iconNode =
+    icon === "salesforce" ? (
+      <img
+        src={BRAND_ICONS.salesforce}
+        alt="Salesforce"
+        className="w-4 h-4 object-contain"
+      />
+    ) : (
+      icon ?? <FileText className="h-4 w-4" aria-hidden="true" />
+    )
+
+  const content = (
+    <>
+      <div className="flex items-center gap-2.5 min-w-0">
+        <div className="w-7 h-7 rounded-md border border-border/60 bg-muted/30 flex items-center justify-center shrink-0 text-muted-foreground">
+          {iconNode}
+        </div>
+        <div className="min-w-0">
+          <p className="text-sm font-medium text-foreground leading-snug truncate">
+            {label}
+          </p>
+          {subtitle && (
+            <p className="text-[11px] text-muted-foreground/70 truncate">
+              {subtitle}
+            </p>
+          )}
+        </div>
+      </div>
+      <div className="flex items-center gap-1 shrink-0 text-muted-foreground">
+        {external && <ExternalLink className="w-3 h-3" />}
+        <ChevronRight className="w-3.5 h-3.5" />
+      </div>
+    </>
+  )
+
+  const baseClassName =
+    "flex items-center justify-between gap-3 py-2 px-2 -mx-2 rounded-md transition-colors"
+  const interactiveClassName = disabled
+    ? `${baseClassName} opacity-50 cursor-not-allowed`
+    : `${baseClassName} hover:bg-muted/50 cursor-pointer`
+
+  if (disabled) {
+    return (
+      <div
+        className={interactiveClassName}
+        title={disabledReason}
+        data-testid={testId}
+      >
+        {content}
+      </div>
+    )
+  }
+
+  if (href) {
+    return (
+      <a
+        href={href}
+        target={external ? "_blank" : undefined}
+        rel={external ? "noopener noreferrer" : undefined}
+        className={interactiveClassName}
+        data-testid={testId}
+      >
+        {content}
+      </a>
+    )
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`${interactiveClassName} w-full text-left`}
+      data-testid={testId}
+    >
+      {content}
+    </button>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// SourcesToggle – collapsible sources list
+// ---------------------------------------------------------------------------
+
 function SourcesToggle() {
   const [expanded, setExpanded] = React.useState(false)
 

package/src/components/score-feedback.tsx

@@ -175,7 +175,7 @@ function Trigger({ className }: { className?: string }) {
         className={cn(
           "p-1.5 rounded transition-colors",
           thumbState === "down"
-            ? "bg-red-50 text-red-600 dark:bg-red-950/30 dark:text-red-400"
+            ? "bg-muted text-foreground"
             : "hover:bg-muted text-muted-foreground hover:text-foreground"
         )}
       >

package/src/components/suggested-actions.tsx

@@ -1037,7 +1037,7 @@ function SuggestedActionCard({
             onClick={() => handleThumbClick("down")}
             className={`p-1.5 rounded transition-colors ${
               feedbackOpen && feedbackDirection === "down"
-                ? "bg-red-50 text-red-600 dark:bg-red-950/30 dark:text-red-400"
+                ? "bg-muted text-foreground"
                 : "hover:bg-muted text-muted-foreground hover:text-foreground"
             }`}
           >