@handled-ai/design-system 0.18.36 → 0.18.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@handled-ai/design-system",
-  "version": "0.18.36",
+  "version": "0.18.38",
   "description": "Handled UI component library (shadcn-style, New York)",
   "type": "module",
   "packageManager": "pnpm@9.12.0",

package/src/components/__tests__/email-composer-row.test.tsx

@@ -0,0 +1,51 @@
+import { describe, it, expect, afterEach } from "vitest"
+import React from "react"
+import { render, screen, cleanup } from "@testing-library/react"
+
+import { EmailComposerRow } from "../email-composer-row"
+
+afterEach(() => {
+  cleanup()
+})
+
+describe("EmailComposerRow", () => {
+  it("renders the label and content", () => {
+    render(
+      <EmailComposerRow label="To">
+        <span>content here</span>
+      </EmailComposerRow>,
+    )
+
+    expect(screen.getByText("To")).toBeTruthy()
+    expect(screen.getByText("content here")).toBeTruthy()
+  })
+
+  it("applies amber state classes", () => {
+    const { container } = render(
+      <EmailComposerRow label="To" state="amber">
+        <span>body</span>
+      </EmailComposerRow>,
+    )
+
+    const row = container.firstChild as HTMLElement
+    expect(row.className).toContain("bg-amber-50/35")
+    expect(row.className).toContain("border-amber-200/80")
+
+    const label = screen.getByText("To")
+    expect(label.className).toContain("text-amber-700")
+  })
+
+  it("applies alignStart classes", () => {
+    const { container } = render(
+      <EmailComposerRow label="To" alignStart>
+        <span>body</span>
+      </EmailComposerRow>,
+    )
+
+    const row = container.firstChild as HTMLElement
+    expect(row.className).toContain("items-start")
+
+    const label = screen.getByText("To")
+    expect(label.className).toContain("pt-[7px]")
+  })
+})

package/src/components/__tests__/email-preview-card.test.tsx

@@ -0,0 +1,62 @@
+import { describe, it, expect, afterEach } from "vitest"
+import React from "react"
+import { render, screen, cleanup } from "@testing-library/react"
+
+import { EmailPreviewCard } from "../email-preview-card"
+
+afterEach(() => {
+  cleanup()
+})
+
+const from = { name: "Cory Pitt", email: "cory@withhandled.com" }
+
+describe("EmailPreviewCard", () => {
+  it("renders the subject", () => {
+    render(<EmailPreviewCard from={from} subject="Quarterly update" />)
+    expect(screen.getByText("Quarterly update")).toBeTruthy()
+  })
+
+  it("falls back to (no subject) when subject is missing", () => {
+    render(<EmailPreviewCard from={from} />)
+    expect(screen.getByText("(no subject)")).toBeTruthy()
+  })
+
+  it("renders the sender name and email", () => {
+    render(<EmailPreviewCard from={from} />)
+    expect(screen.getByText("Cory Pitt")).toBeTruthy()
+    expect(screen.getByText("<cory@withhandled.com>")).toBeTruthy()
+  })
+
+  it("renders the recipient", () => {
+    render(<EmailPreviewCard from={from} to="jane@acme.com" />)
+    expect(screen.getByText("to jane@acme.com")).toBeTruthy()
+    expect(
+      screen.getByText(/This is how your email lands in jane@acme.com's inbox/),
+    ).toBeTruthy()
+  })
+
+  it("renders 'to no recipient yet' when no recipient", () => {
+    render(<EmailPreviewCard from={from} />)
+    expect(screen.getByText("to no recipient yet")).toBeTruthy()
+    expect(
+      screen.getByText(/This is how your email lands in the recipient's inbox/),
+    ).toBeTruthy()
+  })
+
+  it("renders html body markup", () => {
+    const { container } = render(
+      <EmailPreviewCard from={from} htmlBody="<strong>Hello world</strong>" />,
+    )
+    expect(container.querySelector("strong")?.textContent).toBe("Hello world")
+  })
+
+  it("renders the signature when provided", () => {
+    const { container } = render(
+      <EmailPreviewCard
+        from={from}
+        signatureHtml="<em>Best, Cory</em>"
+      />,
+    )
+    expect(container.querySelector("em")?.textContent).toBe("Best, Cory")
+  })
+})

package/src/components/__tests__/email-recipient-field.test.tsx

@@ -0,0 +1,256 @@
+import { describe, it, expect, vi, afterEach } from "vitest"
+import React from "react"
+import { render, screen, fireEvent, cleanup } from "@testing-library/react"
+
+import {
+  EmailRecipientField,
+  type RecipientChip,
+} from "../email-recipient-field"
+import type { SuggestedContact } from "../suggested-actions"
+
+afterEach(() => {
+  cleanup()
+})
+
+const contacts: SuggestedContact[] = [
+  { name: "Alex Admin", role: "Controller", email: "alex@example.com", confirmed: true },
+  { name: "Bea Buyer", role: "Buyer", email: "bea@example.com", confirmed: true },
+  { name: "No Email", role: "Unknown", confirmed: false },
+]
+
+function getInput(): HTMLInputElement {
+  return screen.getByPlaceholderText(/Add email|Add another/) as HTMLInputElement
+}
+
+describe("EmailRecipientField", () => {
+  it("adds an unconfirmed chip when pressing Enter on a valid email", () => {
+    const onChange = vi.fn()
+    render(
+      <EmailRecipientField label="To" recipients={[]} onRecipientsChange={onChange} />,
+    )
+
+    const input = getInput()
+    fireEvent.change(input, { target: { value: "new@example.com" } })
+    fireEvent.keyDown(input, { key: "Enter" })
+
+    expect(onChange).toHaveBeenCalledWith([
+      { id: "new@example.com", email: "new@example.com", name: "", confirmed: false },
+    ])
+  })
+
+  it("adds a chip when pressing comma", () => {
+    const onChange = vi.fn()
+    render(
+      <EmailRecipientField label="To" recipients={[]} onRecipientsChange={onChange} />,
+    )
+
+    const input = getInput()
+    fireEvent.change(input, { target: { value: "comma@example.com" } })
+    fireEvent.keyDown(input, { key: "," })
+
+    expect(onChange).toHaveBeenCalledWith([
+      { id: "comma@example.com", email: "comma@example.com", name: "", confirmed: false },
+    ])
+  })
+
+  it("does not add an invalid email", () => {
+    const onChange = vi.fn()
+    render(
+      <EmailRecipientField label="To" recipients={[]} onRecipientsChange={onChange} />,
+    )
+
+    const input = getInput()
+    fireEvent.change(input, { target: { value: "not-an-email" } })
+    fireEvent.keyDown(input, { key: "Enter" })
+
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it("confirms a chip", () => {
+    const onChange = vi.fn()
+    const recipients: RecipientChip[] = [
+      { id: "a@b.com", email: "a@b.com", name: "", confirmed: false },
+    ]
+    render(
+      <EmailRecipientField label="To" recipients={recipients} onRecipientsChange={onChange} />,
+    )
+
+    fireEvent.click(screen.getByRole("button", { name: "Confirm" }))
+    expect(onChange).toHaveBeenCalledWith([
+      { id: "a@b.com", email: "a@b.com", name: "", confirmed: true },
+    ])
+  })
+
+  it("removes a chip via the X button", () => {
+    const onChange = vi.fn()
+    const recipients: RecipientChip[] = [
+      { id: "a@b.com", email: "a@b.com", name: "Al", confirmed: true },
+    ]
+    render(
+      <EmailRecipientField label="To" recipients={recipients} onRecipientsChange={onChange} />,
+    )
+
+    fireEvent.click(screen.getByRole("button", { name: "Remove Al" }))
+    expect(onChange).toHaveBeenCalledWith([])
+  })
+
+  it("removes the last chip on Backspace with empty input", () => {
+    const onChange = vi.fn()
+    const recipients: RecipientChip[] = [
+      { id: "a@b.com", email: "a@b.com", name: "", confirmed: true },
+      { id: "c@d.com", email: "c@d.com", name: "", confirmed: true },
+    ]
+    render(
+      <EmailRecipientField label="To" recipients={recipients} onRecipientsChange={onChange} />,
+    )
+
+    const input = getInput()
+    fireEvent.keyDown(input, { key: "Backspace" })
+    expect(onChange).toHaveBeenCalledWith([
+      { id: "a@b.com", email: "a@b.com", name: "", confirmed: true },
+    ])
+  })
+
+  it("silently rejects emails already in addedEmails", () => {
+    const onChange = vi.fn()
+    render(
+      <EmailRecipientField
+        label="To"
+        recipients={[]}
+        onRecipientsChange={onChange}
+        addedEmails={new Set(["dup@example.com"])}
+      />,
+    )
+
+    const input = getInput()
+    fireEvent.change(input, { target: { value: "dup@example.com" } })
+    fireEvent.keyDown(input, { key: "Enter" })
+
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it("applies amber tint when amber and an unconfirmed chip exists", () => {
+    const { container } = render(
+      <EmailRecipientField
+        label="To"
+        amber
+        recipients={[{ id: "a@b.com", email: "a@b.com", name: "", confirmed: false }]}
+        onRecipientsChange={vi.fn()}
+      />,
+    )
+
+    const row = container.firstChild as HTMLElement
+    expect(row.className).toContain("bg-amber-50/35")
+  })
+
+  it("conditionally renders the mini-chips", () => {
+    const { rerender } = render(
+      <EmailRecipientField label="To" recipients={[]} onRecipientsChange={vi.fn()} />,
+    )
+    expect(screen.queryByRole("button", { name: /Contacts/ })).toBeNull()
+    expect(screen.queryByRole("button", { name: /Cc\/Bcc/ })).toBeNull()
+
+    rerender(
+      <EmailRecipientField
+        label="To"
+        recipients={[]}
+        onRecipientsChange={vi.fn()}
+        showPicker
+        showCcBcc
+      />,
+    )
+    expect(screen.getByRole("button", { name: /Contacts/ })).toBeTruthy()
+    expect(screen.getByRole("button", { name: /Add Cc\/Bcc/ })).toBeTruthy()
+  })
+
+  it("toggles Cc/Bcc label and fires the toggle handler", () => {
+    const onToggle = vi.fn()
+    const { rerender } = render(
+      <EmailRecipientField
+        label="To"
+        recipients={[]}
+        onRecipientsChange={vi.fn()}
+        showCcBcc
+        onCcBccToggle={onToggle}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole("button", { name: "Add Cc/Bcc" }))
+    expect(onToggle).toHaveBeenCalledTimes(1)
+
+    rerender(
+      <EmailRecipientField
+        label="To"
+        recipients={[]}
+        onRecipientsChange={vi.fn()}
+        showCcBcc
+        ccBccOpen
+        onCcBccToggle={onToggle}
+      />,
+    )
+    expect(screen.getByRole("button", { name: "Hide Cc/Bcc" })).toBeTruthy()
+  })
+
+  it("opens and closes the contact picker", () => {
+    render(
+      <EmailRecipientField
+        label="To"
+        recipients={[]}
+        onRecipientsChange={vi.fn()}
+        showPicker
+        contacts={contacts}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole("button", { name: /Contacts/ }))
+    expect(screen.getByPlaceholderText("Search contacts...")).toBeTruthy()
+    expect(screen.getByText("Alex Admin")).toBeTruthy()
+
+    fireEvent.keyDown(document, { key: "Escape" })
+    expect(screen.queryByPlaceholderText("Search contacts...")).toBeNull()
+  })
+
+  it("adds a confirmed recipient when a contact is selected", () => {
+    const onChange = vi.fn()
+    render(
+      <EmailRecipientField
+        label="To"
+        recipients={[]}
+        onRecipientsChange={onChange}
+        showPicker
+        contacts={contacts}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole("button", { name: /Contacts/ }))
+    fireEvent.click(screen.getByText("Alex Admin"))
+
+    expect(onChange).toHaveBeenCalledWith([
+      { id: "alex@example.com", email: "alex@example.com", name: "Alex Admin", confirmed: true },
+    ])
+  })
+
+  it("disables rows for added and no-email contacts", () => {
+    render(
+      <EmailRecipientField
+        label="To"
+        recipients={[]}
+        onRecipientsChange={vi.fn()}
+        showPicker
+        contacts={contacts}
+        addedEmails={new Set(["alex@example.com"])}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole("button", { name: /Contacts/ }))
+
+    const options = screen.getAllByRole("option")
+    const alexRow = options.find((o) => o.textContent?.includes("Alex Admin"))!
+    const noEmailRow = options.find((o) => o.textContent?.includes("No Email"))!
+
+    expect(alexRow.className).toContain("pointer-events-none")
+    expect(alexRow.textContent).toContain("Added")
+    expect(noEmailRow.className).toContain("pointer-events-none")
+    expect(noEmailRow.textContent).toContain("No email")
+  })
+})

package/src/components/__tests__/email-send-bar.test.tsx

@@ -0,0 +1,80 @@
+import { describe, it, expect, vi, afterEach } from "vitest"
+import React from "react"
+import { render, screen, fireEvent, cleanup } from "@testing-library/react"
+
+import { EmailSendBar } from "../email-send-bar"
+
+afterEach(() => {
+  cleanup()
+})
+
+describe("EmailSendBar", () => {
+  it("renders primary and secondary actions", () => {
+    render(
+      <EmailSendBar
+        primaryActions={[{ key: "attach", label: "Attach" }]}
+        secondaryActions={[{ key: "schedule", label: "Schedule" }]}
+      />,
+    )
+
+    expect(screen.getByRole("button", { name: "Attach" })).toBeTruthy()
+    expect(screen.getByRole("button", { name: "Schedule" })).toBeTruthy()
+  })
+
+  it("renders a divider only when both groups exist", () => {
+    const { container, rerender } = render(
+      <EmailSendBar
+        primaryActions={[{ key: "attach", label: "Attach" }]}
+        secondaryActions={[{ key: "schedule", label: "Schedule" }]}
+      />,
+    )
+    expect(container.querySelector(".w-px.h-\\[18px\\]")).toBeTruthy()
+
+    rerender(
+      <EmailSendBar primaryActions={[{ key: "attach", label: "Attach" }]} />,
+    )
+    expect(container.querySelector(".w-px.h-\\[18px\\]")).toBeNull()
+  })
+
+  it("renders the send button with custom label", () => {
+    render(<EmailSendBar sendLabel="Send email" />)
+    expect(screen.getByRole("button", { name: "Send email" })).toBeTruthy()
+  })
+
+  it("disables the send button when sendDisabled is true", () => {
+    render(<EmailSendBar sendDisabled />)
+    const send = screen.getByRole("button", { name: "Send" }) as HTMLButtonElement
+    expect(send.disabled).toBe(true)
+  })
+
+  it("fires click handlers", () => {
+    const onSend = vi.fn()
+    const onAttach = vi.fn()
+
+    render(
+      <EmailSendBar
+        primaryActions={[{ key: "attach", label: "Attach", onClick: onAttach }]}
+        onSend={onSend}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole("button", { name: "Attach" }))
+    fireEvent.click(screen.getByRole("button", { name: "Send" }))
+
+    expect(onAttach).toHaveBeenCalledTimes(1)
+    expect(onSend).toHaveBeenCalledTimes(1)
+  })
+
+  it("does not fire click for disabled action", () => {
+    const onAttach = vi.fn()
+    render(
+      <EmailSendBar
+        primaryActions={[
+          { key: "attach", label: "Attach", onClick: onAttach, disabled: true },
+        ]}
+      />,
+    )
+    const btn = screen.getByRole("button", { name: "Attach" }) as HTMLButtonElement
+    expect(btn.disabled).toBe(true)
+  })
+})

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

@@ -16,7 +16,7 @@ const positivePills = ["Tone", "Personalization", "Length", "CTA", "Other"]
 const negativePills = ["Too formal", "Too casual", "Too long", "Missing context", "Wrong angle", "Factual error", "Other"]
 
 export interface DraftFeedbackInlineProps {
-  initialDirection?: "up" | "down" | null
+  initialDirection?: 'up' | 'down' | null
   onRegenerateRequest?: (pills: string[], detail: string) => void
   onSubmitFeedback?: (type: "up" | "down", pills: string[], detail: string) => void
   onDiscardRequest?: (pills: string[], detail: string) => void
@@ -70,7 +70,7 @@ export function DraftFeedbackInline({
   if (noted) {
     return (
       <div className="flex items-center gap-1.5 py-1 animate-in fade-in slide-in-from-top-1 duration-200">
-        <Check className="w-3.5 h-3.5 text-foreground" />
+        <Check className="w-3.5 h-3.5 text-emerald-500" />
         <span className="text-xs text-muted-foreground">Feedback recorded</span>
       </div>
     )
@@ -88,7 +88,7 @@ export function DraftFeedbackInline({
   }
 
   return (
-    <div className="space-y-2">
+    <div className="space-y-0">
       <div className="flex items-center justify-between">
         <span className="text-sm text-foreground font-medium">How&apos;s this draft?</span>
         <div className="flex gap-1">
@@ -100,11 +100,11 @@ export function DraftFeedbackInline({
             }}
             className={`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-4 h-4" />
+            <ThumbsUp className="w-4 h-4" fill={thumbState === "up" ? "currentColor" : "none"} />
           </button>
           <button
             onClick={() => {
@@ -114,31 +114,31 @@ export function DraftFeedbackInline({
             }}
             className={`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-4 h-4" />
+            <ThumbsDown className="w-4 h-4" fill={thumbState === "down" ? "currentColor" : "none"} />
           </button>
         </div>
       </div>
 
       {thumbState && (
-        <div className="pt-2 space-y-2.5 animate-in fade-in slide-in-from-top-2 duration-200">
+        <div className="pt-3 space-y-3 animate-in fade-in slide-in-from-top-2 duration-200">
           <div>
             <span className="text-xs text-muted-foreground mb-2 block font-medium">
               {thumbState === "up" ? "What worked well?" : "What needs improvement?"}
             </span>
-            <div className="flex flex-wrap gap-2">
+            <div className="flex flex-wrap gap-1.5">
               {(thumbState === "up" ? positivePills : negativePills).map((pill) => (
                 <button
                   key={pill}
                   onClick={() => togglePill(pill)}
-                  className={`px-3 py-1.5 rounded-full text-[11px] font-medium border transition-colors ${
+                  className={`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"
                   }`}
                 >
@@ -155,7 +155,7 @@ export function DraftFeedbackInline({
             className="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-indigo-500/50 focus:border-indigo-500/50 resize-none min-h-[60px]"
           />
 
-          <div className="flex items-center gap-2.5 pt-2">
+          <div className="flex items-center gap-2 pt-1">
             {thumbState === "down" ? (
               <>
                 <button

package/src/components/email-composer-row.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+export interface EmailComposerRowProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  label: React.ReactNode
+  state?: "default" | "amber"
+  alignStart?: boolean
+  children: React.ReactNode
+}
+
+export function EmailComposerRow({
+  label,
+  state = "default",
+  alignStart = false,
+  children,
+  className,
+  ...props
+}: EmailComposerRowProps) {
+  const amber = state === "amber"
+
+  return (
+    <div
+      className={cn(
+        "grid grid-cols-[60px_1fr] gap-2 px-[18px] py-[9px] border-b border-border/70 items-center text-sm",
+        alignStart && "items-start",
+        amber && "bg-amber-50/35 border-amber-200/80",
+        className,
+      )}
+      {...props}
+    >
+      <div
+        className={cn(
+          "text-[11px] font-semibold uppercase tracking-wide text-muted-foreground",
+          alignStart && "pt-[7px]",
+          amber && "text-amber-700",
+        )}
+      >
+        {label}
+      </div>
+      <div className="min-w-0">{children}</div>
+    </div>
+  )
+}

package/src/components/email-preview-card.tsx

@@ -0,0 +1,94 @@
+"use client"
+
+import * as React from "react"
+import { Eye } from "lucide-react"
+
+import { cn } from "../lib/utils"
+
+export interface EmailPreviewCardProps {
+  from: { name: string; email: string }
+  to?: string
+  subject?: string
+  htmlBody?: string
+  textBody?: string
+  signatureHtml?: string | null
+  className?: string
+}
+
+function getInitials(name: string): string {
+  return name
+    .split(" ")
+    .map((part) => part[0])
+    .filter(Boolean)
+    .slice(0, 2)
+    .join("")
+    .toUpperCase()
+}
+
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;")
+}
+
+export function EmailPreviewCard({
+  from,
+  to,
+  subject,
+  htmlBody,
+  textBody,
+  signatureHtml,
+  className,
+}: EmailPreviewCardProps) {
+  const recipientLabel = to ? `${to}'s` : "the recipient's"
+  const bodyHtml = htmlBody ?? (textBody ? escapeHtml(textBody) : "")
+
+  return (
+    <div className={cn("p-4 bg-muted/30 min-h-full", className)}>
+      <div className="flex items-start gap-2 mb-3 py-2.5 px-3 border rounded-lg bg-background text-[11.5px] text-muted-foreground">
+        <Eye className="size-4 shrink-0 mt-0.5" />
+        <span>
+          This is how your email lands in {recipientLabel} inbox. Nothing has
+          been sent yet.
+        </span>
+      </div>
+
+      <div className="bg-background border rounded-xl shadow-sm overflow-hidden">
+        <div className="px-[18px] pt-4 pb-3 text-base font-semibold border-b border-border/50">
+          {subject || "(no subject)"}
+        </div>
+
+        <div className="flex items-center gap-3 px-[18px] pt-3">
+          <div className="flex size-9 shrink-0 items-center justify-center rounded-full bg-foreground text-background text-xs font-semibold">
+            {getInitials(from.name)}
+          </div>
+          <div className="min-w-0 flex-1">
+            <div className="text-sm">
+              <span className="font-semibold text-foreground">{from.name}</span>{" "}
+              <span className="text-muted-foreground">&lt;{from.email}&gt;</span>
+            </div>
+            <div className="text-xs text-muted-foreground">
+              {to ? `to ${to}` : "to no recipient yet"}
+            </div>
+          </div>
+          <div className="text-xs text-muted-foreground shrink-0">just now</div>
+        </div>
+
+        <div
+          className="px-[18px] py-2 ml-[47px] text-[13.5px] leading-relaxed whitespace-pre-wrap"
+          dangerouslySetInnerHTML={{ __html: bodyHtml }}
+        />
+
+        {signatureHtml ? (
+          <div
+            className="ml-[47px] px-[18px] pt-3 mt-3 border-t border-border/50 pb-4 text-xs leading-relaxed text-muted-foreground"
+            dangerouslySetInnerHTML={{ __html: signatureHtml }}
+          />
+        ) : null}
+      </div>
+    </div>
+  )
+}