@handled-ai/design-system 0.18.36 → 0.18.38

package/src/components/score-feedback.tsx

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

package/src/components/suggested-actions.tsx

@@ -925,14 +925,6 @@ 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)
@@ -1024,22 +1016,18 @@ function SuggestedActionCard({
         </div>
         <div className="flex items-center gap-1.5">
           <button
-            onClick={() => handleThumbClick("up")}
+            onClick={() => setFeedbackOpen(!feedbackOpen)}
             className={`p-1.5 rounded transition-colors ${
-              feedbackOpen && feedbackDirection === "up"
-                ? "bg-muted text-foreground"
+              feedbackOpen
+                ? "bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400"
                 : "hover:bg-muted text-muted-foreground hover:text-foreground"
             }`}
           >
             <ThumbsUp className="w-3.5 h-3.5" />
           </button>
           <button
-            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"
-            }`}
+            onClick={() => setFeedbackOpen(!feedbackOpen)}
+            className="p-1.5 rounded transition-colors hover:bg-muted text-muted-foreground hover:text-foreground"
           >
             <ThumbsDown className="w-3.5 h-3.5" />
           </button>
@@ -1059,8 +1047,6 @@ 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"

package/src/components/__tests__/draft-feedback-inline.test.tsx

@@ -1,72 +0,0 @@
-/**
- * Tests for DraftFeedbackInline.
- *
- * Covers:
- *  - Clicking the up thumb activates the positive state (monochrome bg-muted)
- *  - Clicking the down thumb activates the negative state (restrained red)
- *  - Thumb icons render outline-only (never fill="currentColor")
- *  - initialDirection="down" renders the down state pre-selected
- *  - initialDirection="up" renders the up state pre-selected
- */
-
-import { describe, it, expect } from "vitest"
-import React from "react"
-import { render, screen, fireEvent } from "@testing-library/react"
-import { DraftFeedbackInline } from "../draft-feedback-inline"
-
-describe("DraftFeedbackInline", () => {
-  it("renders idle with no expanded feedback area", () => {
-    render(<DraftFeedbackInline />)
-    expect(screen.getByText("How's this draft?")).toBeTruthy()
-    expect(screen.queryByText("What worked well?")).toBeNull()
-    expect(screen.queryByText("What needs improvement?")).toBeNull()
-  })
-
-  it("activates the positive state with monochrome tokens when up is clicked", () => {
-    const { container } = render(<DraftFeedbackInline />)
-    const buttons = container.querySelectorAll("button")
-    const upButton = buttons[0] as HTMLButtonElement
-    fireEvent.click(upButton)
-
-    expect(screen.getByText("What worked well?")).toBeTruthy()
-    expect(upButton.className).toContain("bg-muted")
-    expect(upButton.className).toContain("text-foreground")
-    expect(upButton.className).not.toContain("emerald")
-  })
-
-  it("activates the negative state with restrained red when down is clicked", () => {
-    const { container } = render(<DraftFeedbackInline />)
-    const buttons = container.querySelectorAll("button")
-    const downButton = buttons[1] as HTMLButtonElement
-    fireEvent.click(downButton)
-
-    expect(screen.getByText("What needs improvement?")).toBeTruthy()
-    expect(downButton.className).toContain("bg-muted")
-    expect(downButton.className).toContain("text-foreground")
-    expect(downButton.className).not.toContain("bg-red")
-  })
-
-  it("renders thumb icons outline-only (never fill=currentColor)", () => {
-    const { container } = render(<DraftFeedbackInline />)
-    const buttons = container.querySelectorAll("button")
-    // Activate up so the icon would be "filled" under the old behavior.
-    fireEvent.click(buttons[0] as HTMLButtonElement)
-
-    const svgs = container.querySelectorAll("svg")
-    svgs.forEach((svg) => {
-      expect(svg.getAttribute("fill")).not.toBe("currentColor")
-    })
-  })
-
-  it("renders the down state pre-selected with initialDirection='down'", () => {
-    render(<DraftFeedbackInline initialDirection="down" />)
-    expect(screen.getByText("What needs improvement?")).toBeTruthy()
-    expect(screen.queryByText("What worked well?")).toBeNull()
-  })
-
-  it("renders the up state pre-selected with initialDirection='up'", () => {
-    render(<DraftFeedbackInline initialDirection="up" />)
-    expect(screen.getByText("What worked well?")).toBeTruthy()
-    expect(screen.queryByText("What needs improvement?")).toBeNull()
-  })
-})

package/src/components/__tests__/suggested-actions-feedback-header.test.tsx

@@ -1,86 +0,0 @@
-/**
- * Tests for the SuggestedActions card header thumbs (feedback direction).
- *
- * Covers:
- *  - Clicking up opens the feedback panel with direction "up"
- *  - Clicking down opens the feedback panel with direction "down"
- *  - Clicking the same direction again closes the panel
- *  - Switching direction remounts DraftFeedbackInline (panel stays open, content switches)
- */
-
-import { describe, it, expect } from "vitest"
-import React from "react"
-import { render, screen, fireEvent } from "@testing-library/react"
-import { SuggestedActions } from "../suggested-actions"
-import type { SuggestedAction } from "../suggested-actions"
-
-const action: SuggestedAction = {
-  id: 1,
-  type: "email",
-  label: "Send follow-up email",
-  status: "pending",
-  content: "<p>Hello there.</p>",
-}
-
-// The header thumbs are the only buttons that wrap a thumbs-up/down SVG and
-// live in the card header. We resolve them by locating the lucide icon class.
-function getHeaderThumbs(container: HTMLElement) {
-  const up = container.querySelector("button .lucide-thumbs-up")?.closest("button")
-  const down = container.querySelector("button .lucide-thumbs-down")?.closest("button")
-  return { up: up as HTMLButtonElement, down: down as HTMLButtonElement }
-}
-
-describe("SuggestedActions header thumbs", () => {
-  it("does not show the feedback panel initially", () => {
-    render(<SuggestedActions actions={[action]} />)
-    expect(screen.queryByText("How's this draft?")).toBeNull()
-  })
-
-  it("opens the feedback panel with direction up when up is clicked", () => {
-    const { container } = render(<SuggestedActions actions={[action]} />)
-    const { up } = getHeaderThumbs(container)
-    fireEvent.click(up)
-
-    expect(screen.getByText("How's this draft?")).toBeTruthy()
-    expect(screen.getByText("What worked well?")).toBeTruthy()
-    expect(screen.queryByText("What needs improvement?")).toBeNull()
-    expect(up.className).toContain("bg-muted")
-    expect(up.className).toContain("text-foreground")
-  })
-
-  it("opens the feedback panel with direction down when down is clicked", () => {
-    const { container } = render(<SuggestedActions actions={[action]} />)
-    const { down } = getHeaderThumbs(container)
-    fireEvent.click(down)
-
-    expect(screen.getByText("How's this draft?")).toBeTruthy()
-    expect(screen.getByText("What needs improvement?")).toBeTruthy()
-    expect(screen.queryByText("What worked well?")).toBeNull()
-    expect(down.className).toContain("bg-muted")
-    expect(down.className).toContain("text-foreground")
-  })
-
-  it("closes the panel when the same direction is clicked again", () => {
-    const { container } = render(<SuggestedActions actions={[action]} />)
-    const { up } = getHeaderThumbs(container)
-    fireEvent.click(up)
-    expect(screen.getByText("How's this draft?")).toBeTruthy()
-
-    fireEvent.click(up)
-    expect(screen.queryByText("How's this draft?")).toBeNull()
-  })
-
-  it("switches direction (remounts DraftFeedbackInline) while keeping the panel open", () => {
-    const { container } = render(<SuggestedActions actions={[action]} />)
-    const { up, down } = getHeaderThumbs(container)
-
-    fireEvent.click(up)
-    expect(screen.getByText("What worked well?")).toBeTruthy()
-
-    fireEvent.click(down)
-    // Panel still open, but now showing the negative (down) variant.
-    expect(screen.getByText("How's this draft?")).toBeTruthy()
-    expect(screen.getByText("What needs improvement?")).toBeTruthy()
-    expect(screen.queryByText("What worked well?")).toBeNull()
-  })
-})