@handled-ai/design-system 0.20.21 → 0.20.23

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

@@ -416,4 +416,333 @@ describe("TimelineActivity", () => {
     expectNoVisibleEscapeArtifacts(container.textContent ?? "")
   })
 
+  // --- Empty-recipient suppression (history emails) ---
+
+  it.each(["default", "case-panel"] as const)(
+    "suppresses the To-segment in the expanded %s card when there is no recipient",
+    (variant) => {
+      const event = minimal({
+        isInteractive: true,
+        defaultExpanded: true,
+        email: {
+          from: "Priya Raman",
+          to: "",
+          subject: "Synced email",
+          body: "historical body",
+        },
+      })
+
+      const { container } = render(<TimelineActivity events={[event]} variant={variant} />)
+
+      expect(container.textContent).not.toContain("no recipient yet")
+      // No "To " label renders at all when recipients are empty.
+      expect(container.textContent).not.toMatch(/\bTo\s/)
+    },
+  )
+
+  it("suppresses the To-segment in the collapsed preview when there is no recipient", () => {
+    const event = minimal({
+      isInteractive: true,
+      defaultExpanded: false,
+      email: {
+        from: "Priya Raman",
+        to: "",
+        subject: "Synced email",
+        body: "historical body",
+      },
+    })
+
+    const { container } = render(<TimelineActivity events={[event]} />)
+
+    expect(container.textContent).not.toContain("no recipient yet")
+    // Collapsed preview shows sender + subject + snippet, never a To-segment.
+    expect(screen.getByRole("button", { name: /Expand/i })).toBeTruthy()
+  })
+
+  it("still renders the recipient on the expanded card when present, stacked below the sender row", () => {
+    const event = minimal({
+      isInteractive: true,
+      defaultExpanded: true,
+      email: {
+        from: "Priya Raman",
+        fromEmail: "priya@example.com",
+        to: "Recipient Name <recipient@example.com>",
+        date: "2026-06-08T15:30:00.000Z",
+        subject: "Re: hi",
+        body: "body",
+      },
+    })
+
+    const { container } = render(<TimelineActivity events={[event]} variant="case-panel" />)
+    const header = container.querySelector('[data-slot="timeline-card-header"]')!
+
+    expect(header.textContent).toContain("Priya Raman")
+    expect(header.textContent).toContain("To Recipient Name <recipient@example.com>")
+    // Date and the To-line are in separate block rows (no jammed concatenation).
+    expect(header.textContent).not.toMatch(/\d(?:AM|PM)To /)
+  })
+
+  // --- Top collapse affordance ---
+
+  it.each(["default", "case-panel"] as const)(
+    "collapses the expanded %s email card from the top affordance",
+    (variant) => {
+      const event = minimal({
+        isInteractive: true,
+        defaultExpanded: true,
+        email: {
+          from: "Priya Raman",
+          to: "Dana Okafor",
+          subject: "Re: hi",
+          body: "expanded body content",
+        },
+      })
+
+      const { container } = render(<TimelineActivity events={[event]} variant={variant} />)
+
+      // The top collapse control is present while expanded.
+      const topCollapse = container.querySelector('[data-slot="timeline-collapse-top"]')!
+      expect(topCollapse).not.toBeNull()
+      // While expanded both the top and bottom "Show less" affordances exist.
+      expect(screen.getAllByRole("button", { name: /Show less/i }).length).toBe(2)
+
+      fireEvent.click(topCollapse)
+
+      // After collapsing, the expanded affordances are gone and the collapsed
+      // preview (Expand button) returns.
+      expect(container.querySelector('[data-slot="timeline-collapse-top"]')).toBeNull()
+      expect(screen.queryAllByRole("button", { name: /Show less/i }).length).toBe(0)
+      expect(screen.getByRole("button", { name: /Expand/i })).toBeTruthy()
+    },
+  )
+
+  // --- Signature / quoted-content suppression ---
+
+  it("hides signatureHtml behind a 'Show signature' toggle (collapsed by default)", () => {
+    const event = minimal({
+      isInteractive: true,
+      defaultExpanded: true,
+      email: {
+        from: "Priya Raman",
+        to: "Dana Okafor",
+        subject: "Re: hi",
+        body: "main body",
+        bodyHtml: "<p>main body</p>",
+        signatureHtml: "<p>Priya Raman | VP of Sales | 555-1234</p>",
+      },
+    })
+
+    const { container } = render(<TimelineActivity events={[event]} />)
+
+    // Signature content is not visible by default.
+    expect(container.textContent).not.toContain("VP of Sales")
+    const toggle = screen.getByRole("button", { name: /Show signature/i })
+    expect(toggle).toBeTruthy()
+
+    fireEvent.click(toggle)
+    expect(container.querySelector('[data-slot="timeline-email-signature-content"]')).not.toBeNull()
+    expect(container.textContent).toContain("VP of Sales")
+    expect(screen.getByRole("button", { name: /Hide signature/i })).toBeTruthy()
+  })
+
+  it("hides quotedHtml behind a 'Show quoted text' toggle (collapsed by default)", () => {
+    const event = minimal({
+      isInteractive: true,
+      defaultExpanded: true,
+      email: {
+        from: "Priya Raman",
+        to: "Dana Okafor",
+        subject: "Re: hi",
+        body: "main body",
+        bodyHtml: "<p>main body</p>",
+        quotedHtml: "<blockquote>On Mon, earlier message text</blockquote>",
+      },
+    })
+
+    const { container } = render(<TimelineActivity events={[event]} variant="case-panel" />)
+
+    expect(container.textContent).not.toContain("earlier message text")
+    const toggle = screen.getByRole("button", { name: /Show quoted text/i })
+    expect(toggle).toBeTruthy()
+
+    fireEvent.click(toggle)
+    expect(container.querySelector('[data-slot="timeline-email-quoted-content"]')).not.toBeNull()
+    expect(container.textContent).toContain("earlier message text")
+  })
+
+  it("renders the plain email path unchanged when signatureHtml/quotedHtml are absent", () => {
+    const event = minimal({
+      isInteractive: true,
+      defaultExpanded: true,
+      email: {
+        from: "Priya Raman",
+        to: "Dana Okafor",
+        subject: "Re: hi",
+        body: "just the body",
+        bodyHtml: "<p>just the body</p>",
+      },
+    })
+
+    const { container } = render(<TimelineActivity events={[event]} />)
+
+    expect(container.querySelector('[data-slot="timeline-email-signature"]')).toBeNull()
+    expect(container.querySelector('[data-slot="timeline-email-quoted"]')).toBeNull()
+    expect(screen.queryByRole("button", { name: /Show signature/i })).toBeNull()
+    expect(screen.queryByRole("button", { name: /Show quoted text/i })).toBeNull()
+    // The HTML body still renders via the existing slot.
+    expect(container.querySelector('[data-slot="timeline-email-html"]')).not.toBeNull()
+    expect(container.textContent).toContain("just the body")
+  })
+
+  // --- Gong call card ---
+
+  function gongEvent(overrides: Partial<NonNullable<TimelineEvent["gongCall"]>> = {}): TimelineEvent {
+    return minimal({
+      isInteractive: true,
+      defaultExpanded: true,
+      gongCall: {
+        title: "Discovery call with Acme",
+        startTime: "2026-06-08T15:30:00.000Z",
+        durationSeconds: 2280, // 38 min
+        direction: "Outbound",
+        outcome: "Connected",
+        brief: "Discussed Q3 expansion plans.\nBudget approved by finance.",
+        keyPoints: "- Wants SSO\n- 200 seats",
+        nextSteps: "Send proposal by Friday",
+        url: "https://app.gong.io/call?id=abc123",
+        ...overrides,
+      },
+    })
+  }
+
+  it.each(["default", "case-panel"] as const)(
+    "renders the Gong call title, duration, and brief in the expanded %s card",
+    (variant) => {
+      const { container } = render(<TimelineActivity events={[gongEvent()]} variant={variant} />)
+
+      const card = container.querySelector('[data-slot="timeline-gong-card"]')
+      expect(card).not.toBeNull()
+      expect(container.textContent).toContain("Discovery call with Acme")
+      expect(container.querySelector('[data-slot="timeline-gong-duration"]')?.textContent).toContain("38 min")
+      expect(container.textContent).toContain("Discussed Q3 expansion plans.")
+      expect(container.textContent).toContain("Outbound")
+      expect(container.textContent).toContain("Connected")
+    },
+  )
+
+  it("formats long durations as hours and minutes", () => {
+    const { container } = render(
+      <TimelineActivity events={[gongEvent({ durationSeconds: 4320 })]} />, // 72 min
+    )
+    expect(container.querySelector('[data-slot="timeline-gong-duration"]')?.textContent).toContain("1 h 12 min")
+  })
+
+  it("renders Key points and Next steps sections only when present", () => {
+    const { container } = render(<TimelineActivity events={[gongEvent()]} />)
+    expect(container.querySelector('[data-slot="timeline-gong-key-points"]')).not.toBeNull()
+    expect(container.querySelector('[data-slot="timeline-gong-next-steps"]')).not.toBeNull()
+    expect(container.textContent).toContain("Key points")
+    expect(container.textContent).toContain("Wants SSO")
+    expect(container.textContent).toContain("Next steps")
+    expect(container.textContent).toContain("Send proposal by Friday")
+  })
+
+  it("omits Key points and Next steps sections when those fields are absent", () => {
+    const { container } = render(
+      <TimelineActivity events={[gongEvent({ keyPoints: null, nextSteps: undefined })]} />,
+    )
+    expect(container.querySelector('[data-slot="timeline-gong-key-points"]')).toBeNull()
+    expect(container.querySelector('[data-slot="timeline-gong-next-steps"]')).toBeNull()
+    expect(container.textContent).not.toContain("Key points")
+    expect(container.textContent).not.toContain("Next steps")
+  })
+
+  it("renders a 'View in Gong' link with href + new-tab attributes when url is present", () => {
+    render(<TimelineActivity events={[gongEvent()]} />)
+    const link = screen.getByRole("link", { name: /View in Gong/i })
+    expect(link).toHaveAttribute("href", "https://app.gong.io/call?id=abc123")
+    expect(link).toHaveAttribute("target", "_blank")
+    expect(link).toHaveAttribute("rel", "noopener noreferrer")
+  })
+
+  it("omits the 'View in Gong' link when url is absent", () => {
+    render(<TimelineActivity events={[gongEvent({ url: null })]} />)
+    expect(screen.queryByRole("link", { name: /View in Gong/i })).toBeNull()
+  })
+
+  it("keeps absent Gong fields hygienic (no null/undefined/Invalid Date, no empty labels)", () => {
+    const { container } = render(
+      <TimelineActivity
+        events={[
+          gongEvent({
+            startTime: null,
+            durationSeconds: null,
+            direction: null,
+            outcome: null,
+            brief: null,
+            keyPoints: null,
+            nextSteps: null,
+            url: null,
+          }),
+        ]}
+      />,
+    )
+    const text = container.textContent ?? ""
+    expect(text).toContain("Discovery call with Acme")
+    expect(text).not.toContain("null")
+    expect(text).not.toContain("undefined")
+    expect(text).not.toContain("Invalid Date")
+    expect(text).not.toContain("NaN")
+    expect(text).not.toContain("Key points")
+    expect(text).not.toContain("Next steps")
+    expect(container.querySelector('[data-slot="timeline-gong-duration"]')).toBeNull()
+  })
+
+  it("collapses to a duration + snippet preview and expands the Gong card", () => {
+    const event = minimal({
+      isInteractive: true,
+      defaultExpanded: false,
+      gongCall: {
+        title: "Pricing sync",
+        durationSeconds: 2280,
+        brief: "Walked through the enterprise tier.",
+      },
+    })
+    const { container } = render(<TimelineActivity events={[event]} />)
+
+    // Collapsed: shows duration + snippet, no expanded body sections.
+    expect(container.textContent).toContain("38 min")
+    expect(container.textContent).toContain("Walked through the enterprise tier.")
+    expect(screen.getByRole("button", { name: /Expand/i })).toBeTruthy()
+
+    fireEvent.click(screen.getByRole("button", { name: /Expand/i }))
+    expect(container.querySelector('[data-slot="timeline-gong-body"]')).not.toBeNull()
+  })
+
+  it.each(["default", "case-panel"] as const)(
+    "collapses the expanded Gong %s card from the top affordance",
+    (variant) => {
+      const { container } = render(<TimelineActivity events={[gongEvent()]} variant={variant} />)
+
+      const topCollapse = container.querySelector('[data-slot="timeline-collapse-top"]')!
+      expect(topCollapse).not.toBeNull()
+
+      fireEvent.click(topCollapse)
+
+      expect(container.querySelector('[data-slot="timeline-collapse-top"]')).toBeNull()
+      expect(screen.getByRole("button", { name: /Expand/i })).toBeTruthy()
+    },
+  )
+
+  it("leaves email-only events unaffected by the Gong call path", () => {
+    const event = minimal({
+      isInteractive: true,
+      defaultExpanded: true,
+      email: { from: "Priya Raman", to: "Dana Okafor", subject: "Re: hi", body: "plain body" },
+    })
+    const { container } = render(<TimelineActivity events={[event]} />)
+    expect(container.querySelector('[data-slot="timeline-gong-card"]')).toBeNull()
+    expect(container.textContent).toContain("plain body")
+  })
+
 })

package/src/components/conversation-panel.tsx

@@ -99,6 +99,15 @@ export interface ConvMessage {
   receipt?: { kind: "new" | "read" | "opened" | "sent" | "draft"; label: string }
   /** HTML body (preferred). Sanitized by the component before rendering. */
   bodyHtml?: string
+  /**
+   * Pre-split signature HTML for this message, sanitized server-side by the
+   * sender's signature pipeline (which preserves the authored Gmail look —
+   * fonts, colors, logos). When present it renders inside the collapsed
+   * details section ("•••" toggle) instead of relying on the heuristic footer
+   * split of `bodyHtml`, so long signatures never expand the thread by
+   * default.
+   */
+  signatureHtml?: string | null
   /** Plain-text fallback when `bodyHtml` is absent. */
   body?: string
   /** Quoted prior message, collapsed behind a toggle. Sanitized before rendering. */
@@ -470,6 +479,7 @@ function MessageView({
           <EmailBody
             html={message.bodyHtml}
             text={message.body}
+            detailsHtml={message.signatureHtml ?? undefined}
             variant="history"
             collapseDetails={true}
             className="text-sm"