@handled-ai/design-system 0.17.1 → 0.17.2

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>
+  )
+}