@handled-ai/design-system 0.17.1 → 0.18.1

package/src/components/feedback-primitives.tsx

@@ -0,0 +1,424 @@
+"use client"
+
+import * as React from "react"
+import { ThumbsUp, ThumbsDown } from "lucide-react"
+import { cn } from "../lib/utils"
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+/**
+ * Structured feedback data shape.
+ *
+ * Preserves the tree structure for DB persistence:
+ *   reasonTop  -> tier-1 chip label (maps to case_feedback.reason_top)
+ *   reasonSub  -> tier-2 sub-chip label (maps to case_feedback.reason_sub)
+ *   pills      -> any additional selected chips (maps to case_feedback.pills)
+ *   detail     -> free-text input (maps to case_feedback.free_text)
+ */
+export interface FeedbackSubmitData {
+  sentiment: "positive" | "negative"
+  reasonTop?: string
+  reasonSub?: string
+  pills: string[]
+  detail: string
+}
+
+/**
+ * Defines a tier-1 chip that may have tier-2 sub-chips.
+ */
+export interface FeedbackChipTree {
+  label: string
+  subPrompt?: string
+  subChips?: string[]
+}
+
+// ---------------------------------------------------------------------------
+// FeedbackChipGroup
+// ---------------------------------------------------------------------------
+
+export interface FeedbackChipGroupProps {
+  chips: string[]
+  selected: string[]
+  onToggle: (chip: string) => void
+  flavor: "positive" | "negative"
+  className?: string
+}
+
+const CHIP_SELECTED_CLASSES: Record<"positive" | "negative", string> = {
+  negative: "bg-red-50 text-red-700 border-red-200",
+  positive: "bg-muted text-foreground border-border",
+}
+
+const CHIP_IDLE_CLASS =
+  "bg-background text-muted-foreground border-border hover:bg-muted/50"
+
+export function FeedbackChipGroup({
+  chips,
+  selected,
+  onToggle,
+  flavor,
+  className,
+}: FeedbackChipGroupProps) {
+  return (
+    <div className={cn("flex flex-wrap gap-1.5", className)}>
+      {chips.map((chip) => {
+        const isSelected = selected.includes(chip)
+        return (
+          <button
+            key={chip}
+            type="button"
+            onClick={() => onToggle(chip)}
+            className={cn(
+              "rounded-md px-2.5 py-1 text-[11px] font-medium border transition-colors",
+              isSelected ? CHIP_SELECTED_CLASSES[flavor] : CHIP_IDLE_CLASS,
+            )}
+          >
+            {chip}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// FeedbackInput
+// ---------------------------------------------------------------------------
+
+export interface FeedbackInputProps {
+  placeholder?: string
+  value: string
+  onChange: (value: string) => void
+  onSubmit?: () => void
+  className?: string
+}
+
+export function FeedbackInput({
+  placeholder,
+  value,
+  onChange,
+  onSubmit,
+  className,
+}: FeedbackInputProps) {
+  return (
+    <input
+      type="text"
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" && onSubmit) {
+          e.preventDefault()
+          onSubmit()
+        }
+      }}
+      placeholder={placeholder}
+      className={cn(
+        "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-ring",
+        className,
+      )}
+    />
+  )
+}
+
+// ---------------------------------------------------------------------------
+// FeedbackActions
+// ---------------------------------------------------------------------------
+
+export interface FeedbackActionsProps {
+  onSubmit: () => void
+  onCancel: () => void
+  submitDisabled?: boolean
+  submitLabel?: string
+  cancelLabel?: string
+  hint?: string
+  className?: string
+}
+
+export function FeedbackActions({
+  onSubmit,
+  onCancel,
+  submitDisabled = false,
+  submitLabel = "Submit",
+  cancelLabel = "Cancel",
+  hint,
+  className,
+}: FeedbackActionsProps) {
+  return (
+    <div className={cn("flex items-center gap-2", className)}>
+      <button
+        type="button"
+        onClick={onSubmit}
+        disabled={submitDisabled}
+        className="bg-foreground text-background rounded-md px-3 py-1.5 text-xs font-semibold disabled:opacity-50"
+      >
+        {submitLabel}
+      </button>
+      <button
+        type="button"
+        onClick={onCancel}
+        className="border border-border rounded-md px-3 py-1.5 text-xs font-medium"
+      >
+        {cancelLabel}
+      </button>
+      {hint && (
+        <span className="ml-auto text-[11px] text-muted-foreground">
+          {hint}
+        </span>
+      )}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// FeedbackFooter
+// ---------------------------------------------------------------------------
+
+export interface FeedbackFooterProps {
+  feedback: "positive" | "negative" | null
+  onFeedbackChange: (value: "positive" | "negative" | null) => void
+  onSubmit: (data: FeedbackSubmitData) => void
+  metaText?: string
+  positivePrompt?: string
+  negativePrompt?: string
+  negativeChips?: FeedbackChipTree[]
+  positiveChips?: string[]
+  className?: string
+}
+
+const SENTIMENT_BUTTON_ACTIVE: Record<"positive" | "negative", string> = {
+  negative: "text-red-600 bg-red-50 border-red-200",
+  positive: "text-foreground bg-muted border-border",
+}
+
+const SENTIMENT_BUTTON_IDLE =
+  "text-muted-foreground hover:text-foreground"
+
+export function FeedbackFooter({
+  feedback,
+  onFeedbackChange,
+  onSubmit,
+  metaText,
+  positivePrompt = "Thanks! Anything to keep about this score?",
+  negativePrompt = "What's the issue?",
+  negativeChips = [],
+  positiveChips = [],
+  className,
+}: FeedbackFooterProps) {
+  const [expanded, setExpanded] = React.useState(false)
+  const [selectedTier1, setSelectedTier1] = React.useState<string | null>(null)
+  const [selectedTier2, setSelectedTier2] = React.useState<string | null>(null)
+  const [additionalPills, setAdditionalPills] = React.useState<string[]>([])
+  const [detailText, setDetailText] = React.useState("")
+  const [activeTreeIndex, setActiveTreeIndex] = React.useState<number | null>(
+    null,
+  )
+
+  // Reset state when feedback collapses
+  const resetState = React.useCallback(() => {
+    setExpanded(false)
+    setSelectedTier1(null)
+    setSelectedTier2(null)
+    setAdditionalPills([])
+    setDetailText("")
+    setActiveTreeIndex(null)
+  }, [])
+
+  const handleSentimentClick = React.useCallback(
+    (sentiment: "positive" | "negative") => {
+      onFeedbackChange(sentiment)
+      // Reset chip state when switching sentiment, then expand
+      resetState()
+      setExpanded(true)
+    },
+    [onFeedbackChange, resetState],
+  )
+
+  const handleTier1Toggle = React.useCallback(
+    (chipLabel: string) => {
+      if (selectedTier1 === chipLabel) {
+        // Deselect the tier-1 chip
+        setSelectedTier1(null)
+        setSelectedTier2(null)
+        setActiveTreeIndex(null)
+      } else if (selectedTier1 === null) {
+        // First selection becomes the primary reasonTop
+        setSelectedTier1(chipLabel)
+        setSelectedTier2(null)
+        // Find the chip's tree index to show sub-chips
+        const idx = negativeChips.findIndex((c) => c.label === chipLabel)
+        if (idx !== -1 && negativeChips[idx].subChips) {
+          setActiveTreeIndex(idx)
+        } else {
+          setActiveTreeIndex(null)
+        }
+      } else {
+        // Additional selections become pills
+        setAdditionalPills((prev) =>
+          prev.includes(chipLabel)
+            ? prev.filter((p) => p !== chipLabel)
+            : [...prev, chipLabel],
+        )
+      }
+    },
+    [selectedTier1, negativeChips],
+  )
+
+  const handleTier2Toggle = React.useCallback((subChip: string) => {
+    setSelectedTier2((prev) => (prev === subChip ? null : subChip))
+  }, [])
+
+  const handlePositiveChipToggle = React.useCallback(
+    (chip: string) => {
+      if (selectedTier1 === chip) {
+        setSelectedTier1(null)
+      } else if (selectedTier1 === null) {
+        setSelectedTier1(chip)
+      } else {
+        setAdditionalPills((prev) =>
+          prev.includes(chip)
+            ? prev.filter((p) => p !== chip)
+            : [...prev, chip],
+        )
+      }
+    },
+    [selectedTier1],
+  )
+
+  const handleSubmit = React.useCallback(() => {
+    if (!feedback) return
+    onSubmit({
+      sentiment: feedback,
+      reasonTop: selectedTier1 ?? undefined,
+      reasonSub: selectedTier2 ?? undefined,
+      pills: additionalPills,
+      detail: detailText,
+    })
+    resetState()
+  }, [
+    feedback,
+    selectedTier1,
+    selectedTier2,
+    additionalPills,
+    detailText,
+    onSubmit,
+    resetState,
+  ])
+
+  const handleCancel = React.useCallback(() => {
+    resetState()
+    onFeedbackChange(null)
+  }, [resetState, onFeedbackChange])
+
+  // Determine which chips are selected (combining tier1 + additionalPills)
+  const allSelectedChips = React.useMemo(() => {
+    const result: string[] = []
+    if (selectedTier1) result.push(selectedTier1)
+    result.push(...additionalPills)
+    return result
+  }, [selectedTier1, additionalPills])
+
+  // Active tier-1 chip tree (for showing sub-chips)
+  const activeTree =
+    activeTreeIndex !== null ? negativeChips[activeTreeIndex] : null
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      {/* Sentiment buttons + meta text bar */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <button
+            type="button"
+            onClick={() => handleSentimentClick("positive")}
+            className={cn(
+              "flex gap-1 items-center text-[11px] font-medium rounded-md px-2 py-1 transition-colors",
+              feedback === "positive"
+                ? SENTIMENT_BUTTON_ACTIVE.positive
+                : SENTIMENT_BUTTON_IDLE,
+            )}
+          >
+            <ThumbsUp className="h-[11px] w-[11px]" />
+            Helpful
+          </button>
+          <button
+            type="button"
+            onClick={() => handleSentimentClick("negative")}
+            className={cn(
+              "flex gap-1 items-center text-[11px] font-medium rounded-md px-2 py-1 transition-colors",
+              feedback === "negative"
+                ? SENTIMENT_BUTTON_ACTIVE.negative
+                : SENTIMENT_BUTTON_IDLE,
+            )}
+          >
+            <ThumbsDown className="h-[11px] w-[11px]" />
+            Not helpful
+          </button>
+        </div>
+        {metaText && (
+          <span className="text-[11px] text-muted-foreground">{metaText}</span>
+        )}
+      </div>
+
+      {/* Expanded feedback area */}
+      {expanded && feedback && (
+        <div className="space-y-3">
+          {/* Prompt text */}
+          <p className="text-xs text-muted-foreground">
+            {feedback === "negative" ? negativePrompt : positivePrompt}
+          </p>
+
+          {/* Chip area */}
+          {feedback === "negative" && negativeChips.length > 0 && (
+            <div className="space-y-2">
+              {/* Tier-1 chips */}
+              <FeedbackChipGroup
+                chips={negativeChips.map((c) => c.label)}
+                selected={allSelectedChips}
+                onToggle={handleTier1Toggle}
+                flavor="negative"
+              />
+
+              {/* Tier-2 sub-chips (shown when a tier-1 with sub-chips is active) */}
+              {activeTree && activeTree.subChips && (
+                <div className="pl-3 space-y-1.5">
+                  {activeTree.subPrompt && (
+                    <p className="text-[11px] text-muted-foreground">
+                      {activeTree.subPrompt}
+                    </p>
+                  )}
+                  <FeedbackChipGroup
+                    chips={activeTree.subChips}
+                    selected={selectedTier2 ? [selectedTier2] : []}
+                    onToggle={handleTier2Toggle}
+                    flavor="negative"
+                  />
+                </div>
+              )}
+            </div>
+          )}
+
+          {feedback === "positive" && positiveChips.length > 0 && (
+            <FeedbackChipGroup
+              chips={positiveChips}
+              selected={allSelectedChips}
+              onToggle={handlePositiveChipToggle}
+              flavor="positive"
+            />
+          )}
+
+          {/* Detail text input */}
+          <FeedbackInput
+            placeholder="Add optional detail…"
+            value={detailText}
+            onChange={setDetailText}
+            onSubmit={handleSubmit}
+          />
+
+          {/* Action buttons */}
+          <FeedbackActions onSubmit={handleSubmit} onCancel={handleCancel} />
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/insights-filter-bar.tsx

@@ -23,6 +23,7 @@ export interface FilterDefinition {
 
 export interface InsightsFilterBarProps {
   filters: FilterDefinition[]
+  variant?: "default" | "compact"
   values: Record<string, string>
   onChange: (filterId: string, value: string) => void
   onClearAll?: () => void
@@ -45,6 +46,7 @@ function InsightsFilterBar({
   onChange,
   onClearAll,
   className,
+  variant = "default",
 }: InsightsFilterBarProps) {
   const showClearAll = onClearAll && hasNonDefaultValue(filters, values)
 
@@ -52,11 +54,12 @@ function InsightsFilterBar({
     <div
       data-slot="insights-filter-bar"
       className={cn(
-        "flex flex-wrap items-center gap-3 rounded-md border border-border bg-card p-4 shadow-sm",
+        "flex flex-wrap items-center rounded-md border border-border bg-card shadow-sm",
+        variant === "compact" ? "gap-2 p-2" : "gap-3 p-4",
         className
       )}
     >
-      <div className="flex items-center gap-2">
+      <div className={cn("flex items-center gap-2", variant === "compact" && "sr-only")}>
         <FilterIcon className="h-4 w-4 text-muted-foreground" />
         <span className="text-sm font-medium text-muted-foreground">
           Filters:
@@ -80,7 +83,10 @@ function InsightsFilterBar({
               <Button
                 variant="outline"
                 size="sm"
-                className="h-8 gap-1.5 text-xs font-normal shadow-none"
+                className={cn(
+                  "gap-1.5 text-xs font-normal shadow-none",
+                  variant === "compact" ? "h-7 px-2" : "h-8"
+                )}
               >
                 {IconComp ? (
                   <IconComp className="h-3.5 w-3.5 text-muted-foreground" />
@@ -118,7 +124,10 @@ function InsightsFilterBar({
           <Button
             variant="ghost"
             size="sm"
-            className="h-8 text-xs text-destructive hover:text-destructive"
+            className={cn(
+              "text-xs text-destructive hover:text-destructive",
+              variant === "compact" ? "h-7 px-2" : "h-8"
+            )}
             onClick={onClearAll}
           >
             Clear All

package/src/components/linked-entity-cell.tsx

@@ -0,0 +1,74 @@
+"use client"
+
+import * as React from "react"
+import { ExternalLink } from "lucide-react"
+
+import { cn } from "../lib/utils"
+
+export interface LinkedEntityCellProps extends React.HTMLAttributes<HTMLDivElement> {
+  name: React.ReactNode
+  href?: string
+  subtitle?: React.ReactNode
+  meta?: React.ReactNode
+  icon?: React.ReactNode
+  external?: boolean
+  onNavigate?: () => void
+}
+
+export function LinkedEntityCell({
+  name,
+  href,
+  subtitle,
+  meta,
+  icon,
+  external = false,
+  onNavigate,
+  className,
+  ...props
+}: LinkedEntityCellProps) {
+  const content = (
+    <>
+      <span className="truncate">{name}</span>
+      {external ? <ExternalLink className="h-3 w-3 shrink-0 opacity-60" aria-hidden="true" /> : null}
+    </>
+  )
+
+  return (
+    <div
+      data-slot="linked-entity-cell"
+      className={cn("flex min-w-0 items-center gap-2", className)}
+      {...props}
+    >
+      {icon ? (
+        <span data-slot="linked-entity-cell-icon" className="shrink-0 text-muted-foreground">
+          {icon}
+        </span>
+      ) : null}
+      <div className="min-w-0 flex-1">
+        {href ? (
+          <a
+            data-slot="linked-entity-cell-link"
+            href={href}
+            target={external ? "_blank" : undefined}
+            rel={external ? "noreferrer" : undefined}
+            onClick={onNavigate}
+            className="inline-flex max-w-full items-center gap-1 truncate font-medium text-foreground underline-offset-4 hover:text-primary hover:underline"
+          >
+            {content}
+          </a>
+        ) : (
+          <span data-slot="linked-entity-cell-name" className="block truncate font-medium text-foreground">
+            {name}
+          </span>
+        )}
+        {subtitle || meta ? (
+          <div data-slot="linked-entity-cell-meta" className="mt-0.5 truncate text-xs text-muted-foreground">
+            {subtitle}
+            {subtitle && meta ? <span className="px-1">·</span> : null}
+            {meta}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  )
+}

package/src/components/metric-card.tsx

@@ -24,6 +24,88 @@ export interface MetricCardProps {
   showInfo?: boolean
 }
 
+export interface KpiStripItem {
+  id?: string
+  label: React.ReactNode
+  value: React.ReactNode
+  unit?: React.ReactNode
+  subtitle?: React.ReactNode
+  change?: MetricCardProps["change"]
+}
+
+export interface KpiStripProps extends React.HTMLAttributes<HTMLDivElement> {
+  items: KpiStripItem[]
+  columns?: 2 | 3 | 4
+}
+
+export function KpiStrip({ items, columns = 4, className, ...props }: KpiStripProps) {
+  return (
+    <div
+      data-slot="kpi-strip"
+      className={cn(
+        "grid gap-3 rounded-xl border border-border bg-card p-3 shadow-sm",
+        columns === 2 && "sm:grid-cols-2",
+        columns === 3 && "sm:grid-cols-3",
+        columns === 4 && "sm:grid-cols-2 lg:grid-cols-4",
+        className
+      )}
+      {...props}
+    >
+      {items.map((item, index) => {
+        const isGoodDirection = item.change
+          ? item.change.isGood !== undefined
+            ? item.change.isGood
+            : item.change.direction === "up"
+          : false
+        const ChangeIcon = item.change?.direction === "down" ? ArrowDown : ArrowUp
+
+        return (
+          <div
+            key={item.id ?? index}
+            data-slot="kpi-strip-item"
+            className="min-w-0 rounded-lg bg-muted/40 px-3 py-2"
+          >
+            <div data-slot="kpi-strip-label" className="truncate text-xs font-medium text-muted-foreground">
+              {item.label}
+            </div>
+            <div className="mt-1 flex items-baseline gap-1">
+              <span data-slot="kpi-strip-value" className="truncate text-2xl font-bold tracking-tight text-foreground">
+                {item.value}
+              </span>
+              {item.unit ? (
+                <span data-slot="kpi-strip-unit" className="text-sm font-semibold text-muted-foreground">
+                  {item.unit}
+                </span>
+              ) : null}
+            </div>
+            {item.subtitle || item.change ? (
+              <div className="mt-1 flex items-center gap-2 text-xs">
+                {item.change ? (
+                  <span
+                    data-slot="kpi-strip-change"
+                    className={cn(
+                      "inline-flex items-center gap-0.5 font-semibold",
+                      isGoodDirection ? "text-emerald-600" : "text-red-600"
+                    )}
+                  >
+                    <ChangeIcon className="h-3 w-3 stroke-[3]" />
+                    {item.change.value}
+                  </span>
+                ) : null}
+                {item.subtitle ? (
+                  <span data-slot="kpi-strip-subtitle" className="truncate text-muted-foreground">
+                    {item.subtitle}
+                  </span>
+                ) : null}
+              </div>
+            ) : null}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
 export function MetricCard({
   title,
   value,