@handled-ai/design-system 0.18.36 → 0.18.37

package/src/components/entity-panel.tsx

@@ -21,10 +21,8 @@ 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
@@ -780,121 +778,6 @@ 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

@@ -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

@@ -40,6 +40,10 @@ 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 { FeedbackFooter, FeedbackChipGroup, FeedbackInput, FeedbackActions, InlineFeedbackControl } from "./components/feedback-primitives"

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