@handled-ai/design-system 0.20.5 → 0.20.7

package/src/components/__tests__/email-display-helpers.test.ts

@@ -0,0 +1,91 @@
+import { describe, expect, it } from "vitest"
+
+import {
+  decodeEmailDisplayText,
+  emailBodySnippet,
+  formatAddressList,
+  formatEmailTimestamp,
+  normalizeEmailSender,
+  splitEmailHtmlForDisplay,
+  splitEmailTextForDisplay,
+} from "../email-display-helpers"
+
+function expectNoVisibleEscapeArtifacts(value: string) {
+  expect(value).not.toMatch(/&#(?:x[0-9a-f]+|\d+);?/i)
+  expect(value).not.toContain("&")
+  expect(value).not.toContain("<")
+  expect(value).not.toContain(">")
+  expect(value).not.toContain(""")
+  expect(value).not.toContain("\\n")
+  expect(value).not.toContain('\\"')
+  expect(value).not.toContain("\\'")
+}
+
+describe("email display helpers", () => {
+  it("decodes display text without visible escape artifacts", () => {
+    const decoded = decodeEmailDisplayText('"Hi Cory & Jane's team\\nSay \\\"hello\\\""')
+
+    expect(decoded).toBe('Hi Cory & Jane\'s team\nSay "hello"')
+    expectNoVisibleEscapeArtifacts(decoded)
+  })
+
+  it("dedupes combined sender fields into clean name and bare email", () => {
+    expect(normalizeEmailSender({ name: "Jane Doe <jane@example.com>", email: "Jane Doe <jane@example.com>" })).toEqual({
+      name: "Jane Doe",
+      email: "jane@example.com",
+    })
+
+    expect(normalizeEmailSender({ name: "jane@example.com", email: "jane@example.com", fallbackName: "Fallback" })).toEqual({
+      name: "jane@example.com",
+      email: "jane@example.com",
+    })
+  })
+
+  it("formats address lists without inventing names", () => {
+    expect(formatAddressList('"Jane Doe" <jane@example.com>, alex@example.com, Support &amp; Success <support@example.com>')).toBe(
+      "Jane Doe <jane@example.com>, alex@example.com, Support & Success <support@example.com>",
+    )
+  })
+
+  it("formats timestamps deterministically and omits invalid dates", () => {
+    expect(formatEmailTimestamp("2026-06-08T20:45:00.000Z")).toBe("Jun 8, 2026, 8:45 PM")
+    expect(formatEmailTimestamp("not-a-date")).toBeNull()
+    expect(formatEmailTimestamp(null)).toBeNull()
+  })
+
+  it("splits HTML signatures, Gmail quotes, and disclaimers while preserving formatting", () => {
+    const disclaimerSplit = splitEmailHtmlForDisplay("<p>Please review.</p><p>Confidentiality Notice: this message is private.</p>")
+    expect(disclaimerSplit.bodyHtml).toContain("Please review")
+    expect(disclaimerSplit.detailsHtml).toContain("Confidentiality Notice")
+
+    const split = splitEmailHtmlForDisplay(
+      '<p>Hi Dana &amp; team,</p><p>The update looks good.</p><div class="gmail_signature"><table><tbody><tr><td><sup>TM</sup> Jane</td></tr></tbody></table></div><blockquote class="gmail_quote"><div>On Monday, Dana wrote:</div><p>Old note</p></blockquote>',
+    )
+
+    expect(split.bodyHtml).toContain("The update looks good")
+    expect(split.bodyHtml).not.toContain("gmail_signature")
+    expect(split.detailsHtml).toContain('class="gmail_signature"')
+    expect(split.detailsHtml).toContain("<sup>TM</sup>")
+    expect(split.detailsHtml).toContain('class="gmail_quote"')
+  })
+
+  it("splits plain text signatures while preserving line boundaries", () => {
+    const split = splitEmailTextForDisplay("Hi Dana,\n\nLooks good.\n\n-- \nJane Doe\nVP Sales\njane@example.com")
+
+    expect(split.bodyText).toBe("Hi Dana,\n\nLooks good.\n\n")
+    expect(split.detailsText).toBe("-- \nJane Doe\nVP Sales\njane@example.com")
+  })
+
+  it("builds decoded snippets from visible body only", () => {
+    const snippet = emailBodySnippet(
+      {
+        bodyHtml:
+          '<p>Hello &amp; welcome &#39;Cory&#39;</p><p>Thanks,</p><p>Jane Doe</p><p>VP Sales</p><p>jane@example.com</p>',
+      },
+      80,
+    )
+
+    expect(snippet).toBe("Hello & welcome 'Cory'")
+    expectNoVisibleEscapeArtifacts(snippet)
+  })
+})

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

@@ -10,6 +10,17 @@ afterEach(() => {
 
 const from = { name: "Cory Pitt", email: "cory@withhandled.com" }
 
+function expectNoVisibleEscapeArtifacts(value: string) {
+  expect(value).not.toMatch(/&#(?:x[0-9a-f]+|\d+);?/i)
+  expect(value).not.toContain("&")
+  expect(value).not.toContain("<")
+  expect(value).not.toContain(">")
+  expect(value).not.toContain(""")
+  expect(value).not.toContain('\\"')
+  expect(value).not.toContain("\\'")
+  expect(value).not.toContain("\\n")
+}
+
 describe("EmailPreviewCard", () => {
   it("renders the subject", () => {
     render(<EmailPreviewCard from={from} subject="Quarterly update" />)
@@ -29,7 +40,7 @@ describe("EmailPreviewCard", () => {
 
   it("renders the recipient", () => {
     render(<EmailPreviewCard from={from} to="jane@acme.com" />)
-    expect(screen.getByText("to jane@acme.com")).toBeTruthy()
+    expect(screen.getByText("jane@acme.com")).toBeTruthy()
     expect(
       screen.getByText(/This is how your email lands in jane@acme.com's inbox/),
     ).toBeTruthy()
@@ -37,7 +48,7 @@ describe("EmailPreviewCard", () => {
 
   it("renders 'to no recipient yet' when no recipient", () => {
     render(<EmailPreviewCard from={from} />)
-    expect(screen.getByText("to no recipient yet")).toBeTruthy()
+    expect(screen.getByText("no recipient yet")).toBeTruthy()
     expect(
       screen.getByText(/This is how your email lands in the recipient's inbox/),
     ).toBeTruthy()
@@ -59,4 +70,27 @@ describe("EmailPreviewCard", () => {
     )
     expect(container.querySelector("em")?.textContent).toBe("Best, Cory")
   })
+
+  it("decodes preview copy, displays To/Cc/Bcc, and renders superscript signatures", () => {
+    const { container } = render(
+      <EmailPreviewCard
+        from={{ name: "Cory &amp; Co", email: "Cory Pitt <cory@withhandled.com>" }}
+        to={'"Jane &amp; Team" <jane@example.com>'}
+        cc={["Ops &lt;ops@example.com&gt;"]}
+        bcc="Audit <audit@example.com>"
+        subject="Quarterly &amp; renewal"
+        htmlBody="<p>Hello Jane &amp; team — it&#39;s ready.</p>"
+        signatureHtml="<p>Handled<sup>AI</sup></p>"
+      />,
+    )
+
+    expect(screen.getByText("Cory & Co")).toBeTruthy()
+    expect(screen.getByText("Quarterly & renewal")).toBeTruthy()
+    expect(screen.getByText("Jane & Team <jane@example.com>")).toBeTruthy()
+    expect(screen.getByText("Ops <ops@example.com>")).toBeTruthy()
+    expect(screen.getByText("Audit <audit@example.com>")).toBeTruthy()
+    expect(screen.getByText("Hello Jane & team — it's ready.")).toBeTruthy()
+    expect(container.querySelector("sup")?.textContent).toBe("AI")
+    expectNoVisibleEscapeArtifacts(container.textContent ?? "")
+  })
 })

package/src/components/__tests__/timeline-activity.test.tsx

@@ -1,7 +1,7 @@
 import "@testing-library/jest-dom/vitest"
 import { describe, it, expect } from "vitest"
 import React from "react"
-import { render, screen } from "@testing-library/react"
+import { fireEvent, render, screen } from "@testing-library/react"
 import {
   TimelineActivity,
   TONE_CLASSES,
@@ -12,6 +12,17 @@ import {
 // Helpers
 // ---------------------------------------------------------------------------
 
+function expectNoVisibleEscapeArtifacts(value: string) {
+  expect(value).not.toMatch(/&#(?:x[0-9a-f]+|\d+);?/i)
+  expect(value).not.toContain("&")
+  expect(value).not.toContain("<")
+  expect(value).not.toContain(">")
+  expect(value).not.toContain(""")
+  expect(value).not.toContain('\\"')
+  expect(value).not.toContain("\\'")
+  expect(value).not.toContain("\\n")
+}
+
 function minimal(overrides: Partial<TimelineEvent> = {}): TimelineEvent {
   return {
     id: "e1",
@@ -328,4 +339,79 @@ describe("TimelineActivity", () => {
       "https://salesforce.example/case/1",
     )
   })
+
+  it.each(["default", "case-panel"] as const)(
+    "renders email source actionLabel before Show less for the %s variant",
+    (variant) => {
+      const threadUrl = "https://mail.google.com/mail/u/0/#inbox/thread-1"
+      const event = minimal({
+        isInteractive: true,
+        defaultExpanded: true,
+        email: {
+          from: "Priya Raman",
+          to: "Dana Okafor",
+          subject: "Re: hi",
+          body: "plain fallback",
+        },
+        source: { label: "Gmail", actionLabel: "Open thread", url: threadUrl },
+      })
+
+      const { container } = render(<TimelineActivity events={[event]} variant={variant} />)
+
+      const sourceAction = screen.getByRole("link", { name: /Open thread/i })
+      expect(sourceAction).toHaveAttribute("href", threadUrl)
+      expect(screen.queryByRole("link", { name: /Open in Gmail/i })).toBeNull()
+
+      const footer = variant === "case-panel"
+        ? container.querySelector('[data-slot="timeline-card-footer"]')
+        : sourceAction.closest("div")
+      const footerText = footer?.textContent ?? ""
+      const sourceActionIndex = footerText.indexOf("Open thread")
+      const showLessIndex = footerText.indexOf("Show less")
+
+      expect(sourceActionIndex).toBeGreaterThanOrEqual(0)
+      expect(showLessIndex).toBeGreaterThan(sourceActionIndex)
+    },
+  )
+
+  it("uses shared helpers for decoded timeline sender, timestamp, snippets, and collapsed details", () => {
+    const event = minimal({
+      isInteractive: true,
+      defaultExpanded: false,
+      email: {
+        from: "Cory &amp; Co",
+        fromEmail: "cory@example.com",
+        to: "Jane &amp; Team <jane@example.com>",
+        cc: "Ops &lt;ops@example.com&gt;",
+        date: "2026-06-08T15:30:00.000Z",
+        subject: "Update &amp; next steps",
+        body: "plain fallback",
+        bodyHtml:
+          "<p>Hello Jane &amp; team — it&#39;s ready.</p><p>Thanks,</p><p>Cory Pitt</p><p>Handled<sup>AI</sup></p>",
+      },
+      preview: "Hello Jane &amp; team — it&#39;s ready.",
+    })
+
+    const { container } = render(<TimelineActivity events={[event]} />)
+    const collapsedText = container.textContent ?? ""
+
+    expect(collapsedText).toContain("Cory & Co")
+    expect(collapsedText).toContain("Update & next steps")
+    expect(collapsedText).toContain("Hello Jane & team — it's ready.")
+    expectNoVisibleEscapeArtifacts(collapsedText)
+
+    fireEvent.click(screen.getByRole("button", { name: /Expand/i }))
+
+    expect(screen.getByText("Jun 8, 2026, 3:30 PM")).toBeTruthy()
+    expect(screen.getByText(/Jane & Team <jane@example.com>/)).toBeTruthy()
+    expect(container.querySelector('[data-slot="email-body-details"]')).toBeNull()
+    expect(screen.getByRole("button", { name: "•••" })).toBeTruthy()
+    expect(container.textContent).not.toContain("HandledAI")
+
+    fireEvent.click(screen.getByRole("button", { name: "•••" }))
+    expect(container.querySelector("sup")?.textContent).toBe("AI")
+    expect(container.textContent).toContain("HandledAI")
+    expectNoVisibleEscapeArtifacts(container.textContent ?? "")
+  })
+
 })