@handled-ai/design-system 0.20.5 → 0.20.7

package/src/components/email-body.tsx

@@ -0,0 +1,126 @@
+"use client"
+
+import * as React from "react"
+
+import { sanitizeHtml } from "../internal/safe-html"
+import { cn } from "../lib/utils"
+import {
+  decodeEmailDisplayText,
+  splitEmailHtmlForDisplay,
+  splitEmailTextForDisplay,
+} from "./email-display-helpers"
+
+export interface EmailBodyProps {
+  html?: string | null
+  text?: string | null
+  detailsHtml?: string | null
+  detailsText?: string | null
+  collapseDetails?: boolean
+  defaultDetailsOpen?: boolean
+  variant?: "history" | "preview"
+  className?: string
+}
+
+const PROSE = cn(
+  "break-words leading-[1.62]",
+  "[&_p]:my-2 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0",
+  "[&_a]:text-[#1a73e8] [&_a]:underline-offset-2 hover:[&_a]:underline",
+  "[&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5",
+  "[&_blockquote]:my-2 [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground",
+  "[&_table]:my-2 [&_table]:max-w-full [&_table]:border-collapse",
+  "[&_td]:align-top [&_td]:pr-2 [&_th]:align-top [&_th]:pr-2",
+  "[&_img]:max-w-full [&_img]:h-auto",
+  "[&_sup]:align-super [&_sup]:text-[0.75em] [&_sub]:align-sub [&_sub]:text-[0.75em]",
+)
+
+function PlainTextBlock({ text, className, slot }: { text: string; className?: string; slot: string }) {
+  return (
+    <div data-slot={slot} className={cn(PROSE, "whitespace-pre-line", className)}>
+      {decodeEmailDisplayText(text)}
+    </div>
+  )
+}
+
+function HtmlBlock({ html, className, slot }: { html: string; className?: string; slot: string }) {
+  return (
+    <div
+      data-slot={slot}
+      className={cn(PROSE, className)}
+      dangerouslySetInnerHTML={{ __html: sanitizeHtml(html) }}
+    />
+  )
+}
+
+export function EmailBody({
+  html,
+  text,
+  detailsHtml,
+  detailsText,
+  collapseDetails = false,
+  defaultDetailsOpen = false,
+  variant = "history",
+  className,
+}: EmailBodyProps) {
+  const [detailsOpen, setDetailsOpen] = React.useState(defaultDetailsOpen)
+
+  const htmlParts = html ? splitEmailHtmlForDisplay(html) : null
+  const textParts = html ? null : splitEmailTextForDisplay(text ?? "")
+
+  const bodyHtml = htmlParts?.bodyHtml ?? ""
+  const bodyText = textParts?.bodyText ?? ""
+  const combinedDetailsHtml = [htmlParts?.detailsHtml, detailsHtml].filter(Boolean).join("")
+  const combinedDetailsText = [textParts?.detailsText, detailsText].filter(Boolean).join("")
+  const hasBody = Boolean(bodyHtml.trim() || bodyText.trim())
+  const hasDetails = Boolean(combinedDetailsHtml.trim() || combinedDetailsText.trim())
+  const shouldCollapseDetails = collapseDetails && hasDetails
+  const showDetails = hasDetails && (!shouldCollapseDetails || detailsOpen)
+
+  return (
+    <div
+      data-slot="email-body"
+      data-variant={variant}
+      className={cn(
+        "text-sm text-foreground/90",
+        variant === "preview" && "text-[13.5px]",
+        className,
+      )}
+    >
+      {hasBody ? (
+        htmlParts ? (
+          <HtmlBlock slot="email-body-content" html={bodyHtml} />
+        ) : (
+          <PlainTextBlock slot="email-body-content" text={bodyText} />
+        )
+      ) : null}
+
+      {shouldCollapseDetails ? (
+        <button
+          type="button"
+          onClick={() => setDetailsOpen((value) => !value)}
+          className="text-muted-foreground hover:text-foreground hover:bg-muted mt-2 rounded px-1.5 text-xs leading-5"
+          aria-expanded={detailsOpen}
+          title={detailsOpen ? "Hide historical details" : "Show historical details"}
+        >
+          •••
+        </button>
+      ) : null}
+
+      {showDetails ? (
+        <div
+          data-slot="email-body-details"
+          className={cn(
+            "mt-2 text-muted-foreground",
+            shouldCollapseDetails && "border-border border-l-2 pl-3",
+            variant === "preview" && "border-border/50 border-t pt-3",
+          )}
+        >
+          {combinedDetailsHtml ? (
+            <HtmlBlock slot="email-body-details-content" html={combinedDetailsHtml} />
+          ) : (
+            <PlainTextBlock slot="email-body-details-content" text={combinedDetailsText} />
+          )}
+        </div>
+      ) : null}
+    </div>
+  )
+}

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

@@ -0,0 +1,557 @@
+import { htmlToTextSnippet, sanitizeHtml } from "../internal/safe-html"
+
+export interface NormalizedEmailSender {
+  name: string
+  email: string | null
+}
+
+export interface EmailDisplaySenderInput {
+  name?: string | null
+  email?: string | null
+  fallbackName?: string
+}
+
+export interface SplitEmailHtmlResult {
+  bodyHtml: string
+  detailsHtml: string
+}
+
+export interface SplitEmailTextResult {
+  bodyText: string
+  detailsText: string
+}
+
+const HTML_ENTITY_RE = /&(?:#x[0-9a-f]+|#\d+|[a-z][a-z0-9]+);?/i
+const EMAIL_RE = /[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}/i
+const ANGLE_ADDRESS_RE = /^\s*(.*?)\s*<\s*([^<>\s]+@[^<>\s]+)\s*>\s*$/
+const BR_TAG_RE = /<br\s*\/?>/gi
+
+const SPLITTABLE_BLOCK_TAGS = new Set(["p", "div"])
+const WHOLE_BLOCK_TAGS = new Set(["blockquote", "table", "ul", "ol", "hr"])
+const BLOCK_TAGS = new Set([...SPLITTABLE_BLOCK_TAGS, ...WHOLE_BLOCK_TAGS])
+const HTML_BLOCK_START_RE = /<(p|div|blockquote|table|ul|ol|hr)\b[^>]*>/i
+
+const SIGNATURE_DELIMITER_RE = /^--\s*$/
+const GMAIL_SIGNATURE_RE = /\b(?:gmail_signature|gmail_signature_prefix|gmail_extra)\b/i
+const GMAIL_QUOTE_RE = /<blockquote\b[^>]*\bclass=["'][^"']*\bgmail_quote\b/i
+const ON_WROTE_RE = /^On\s.+wrote:\s*$/i
+const SIGNOFF_RE = /^(?:thanks,|thank you,|best,|regards,|sincerely,)$/i
+const DETAILS_START_RE = /^(?:confidentiality notice\b|this message and any attachments\b|this email and any attachments\b|the information contained in this message\b|this communication may contain\b|unsubscribe\b|manage your preferences\b)/i
+const CONTACT_DETAIL_RE = /(?:@|https?:\/\/|www\.|\+?\d[\d\s().-]{6,}\d|\b(?:ceo|cfo|cto|coo|founder|co-founder|director|manager|vp|vice president|president|head of|sales|marketing|operations|account|customer success|success|support|engineer|consultant|partner|principal|advisor|associate)\b|\b(?:inc|llc|ltd|corp|corporation|company|co\.)\b)/i
+
+function safeCodePoint(value: number): string {
+  return Number.isInteger(value) && value >= 0 && value <= 0x10ffff ? String.fromCodePoint(value) : ""
+}
+
+function decodeHtmlEntities(value: string): string {
+  const namedEntities: Record<string, string> = {
+    amp: "&",
+    apos: "'",
+    colon: ":",
+    gt: ">",
+    lt: "<",
+    nbsp: " ",
+    newline: "\n",
+    quot: '"',
+    tab: "\t",
+  }
+
+  let decoded = value
+  for (let i = 0; i < 4; i += 1) {
+    const next = decoded
+      .replace(/&#x([0-9a-f]+);?/gi, (_match, hex: string) => safeCodePoint(Number.parseInt(hex, 16)))
+      .replace(/&#(\d+);?/g, (_match, decimal: string) => safeCodePoint(Number.parseInt(decimal, 10)))
+      .replace(/&([a-z][a-z0-9]+);?/gi, (match, name: string) => namedEntities[name.toLowerCase()] ?? match)
+
+    if (next === decoded) return decoded
+    decoded = next
+  }
+
+  return decoded
+}
+
+function decodeJsonEscapes(value: string): string {
+  return value
+    .replace(/\\u\{([0-9a-f]{1,6})\}/gi, (_match, hex: string) => safeCodePoint(Number.parseInt(hex, 16)))
+    .replace(/\\u([0-9a-f]{4})/gi, (_match, hex: string) => safeCodePoint(Number.parseInt(hex, 16)))
+    .replace(/\\r\\n|\\n|\\r/g, "\n")
+    .replace(/\\t/g, "\t")
+    .replace(/\\(["'\\/])/g, "$1")
+}
+
+function maybeParseJsonString(value: string): string {
+  const trimmed = value.trim()
+  if (!trimmed.startsWith('"') || !trimmed.endsWith('"')) return value
+  if (!/[\\&]/.test(trimmed)) return value
+
+  try {
+    const parsed = JSON.parse(trimmed) as unknown
+    return typeof parsed === "string" ? parsed : value
+  } catch {
+    return value
+  }
+}
+
+/**
+ * Decodes display-only email text so UI labels, body fallbacks, collapsed rows,
+ * and snippets do not show HTML entities or JSON escape artifacts. It does not
+ * sanitize HTML; sanitize at the HTML render boundary before using markup.
+ */
+export function decodeEmailDisplayText(value: string): string {
+  let decoded = maybeParseJsonString(value).replace(/\r\n?/g, "\n")
+
+  for (let i = 0; i < 4; i += 1) {
+    const next = decodeHtmlEntities(decodeJsonEscapes(decoded))
+    if (next === decoded) break
+    decoded = next
+  }
+
+  return decoded.replace(/\u00a0/g, " ")
+}
+
+function stripWrappingQuotes(value: string): string {
+  const trimmed = value.trim()
+  if ((trimmed.startsWith('"') && trimmed.endsWith('"')) || (trimmed.startsWith("'") && trimmed.endsWith("'"))) {
+    return trimmed.slice(1, -1).trim()
+  }
+  return trimmed
+}
+
+function extractEmail(value: string): string | null {
+  const decoded = decodeEmailDisplayText(value)
+  const angleMatch = decoded.match(ANGLE_ADDRESS_RE)
+  const email = angleMatch?.[2] ?? decoded.match(EMAIL_RE)?.[0]
+  return email ? email.trim() : null
+}
+
+function extractNameFromAddress(value: string): string {
+  const decoded = decodeEmailDisplayText(value)
+  const angleMatch = decoded.match(ANGLE_ADDRESS_RE)
+  if (angleMatch) return stripWrappingQuotes(angleMatch[1] ?? "")
+  return stripWrappingQuotes(decoded.replace(EMAIL_RE, "").replace(/[<>]/g, "").trim())
+}
+
+function cleanDisplayName(value: string, email: string | null): string {
+  let name = stripWrappingQuotes(decodeEmailDisplayText(value))
+  if (email) {
+    name = name
+      .replace(new RegExp(`<\\s*${email.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}\\s*>`, "i"), "")
+      .replace(new RegExp(`^${email.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}$`, "i"), "")
+      .trim()
+  }
+  return stripWrappingQuotes(name)
+}
+
+export function normalizeEmailSender(input: EmailDisplaySenderInput): NormalizedEmailSender {
+  const fallbackName = decodeEmailDisplayText(input.fallbackName ?? "Unknown sender").trim() || "Unknown sender"
+  const rawName = input.name ? decodeEmailDisplayText(input.name) : ""
+  const rawEmail = input.email ? decodeEmailDisplayText(input.email) : ""
+  const email = extractEmail(rawEmail) ?? extractEmail(rawName)
+
+  const nameFromName = rawName ? cleanDisplayName(extractNameFromAddress(rawName) || rawName, email) : ""
+  const nameFromEmail = rawEmail ? cleanDisplayName(extractNameFromAddress(rawEmail), email) : ""
+  const name = nameFromName || nameFromEmail || email || fallbackName
+
+  return { name, email }
+}
+
+function splitAddressList(value: string): string[] {
+  const parts: string[] = []
+  let current = ""
+  let quote: '"' | "'" | null = null
+  let angleDepth = 0
+
+  for (let index = 0; index < value.length; index += 1) {
+    const char = value[index]
+
+    if (quote) {
+      current += char
+      if (char === quote && value[index - 1] !== "\\") quote = null
+      continue
+    }
+
+    if (char === '"' || char === "'") {
+      quote = char
+      current += char
+      continue
+    }
+
+    if (char === "<") angleDepth += 1
+    if (char === ">" && angleDepth > 0) angleDepth -= 1
+
+    if (char === "," && angleDepth === 0) {
+      if (current.trim()) parts.push(current.trim())
+      current = ""
+      continue
+    }
+
+    current += char
+  }
+
+  if (current.trim()) parts.push(current.trim())
+  return parts
+}
+
+function formatSingleAddress(value: string): string {
+  const decoded = decodeEmailDisplayText(value).trim()
+  if (!decoded) return ""
+
+  const email = extractEmail(decoded)
+  const name = cleanDisplayName(extractNameFromAddress(decoded), email)
+
+  if (email && name) return `${name} <${email}>`
+  if (email) return email
+  return stripWrappingQuotes(decoded)
+}
+
+export function formatAddressList(input?: string | string[] | null): string {
+  if (!input) return ""
+
+  const rawItems = Array.isArray(input) ? input : splitAddressList(input)
+  return rawItems
+    .map((item) => formatSingleAddress(item))
+    .filter(Boolean)
+    .join(", ")
+}
+
+export function formatEmailTimestamp(value?: string | Date | null): string | null {
+  if (!value) return null
+  const date = value instanceof Date ? value : new Date(value)
+  if (Number.isNaN(date.getTime())) return null
+
+  return new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    timeZone: "UTC",
+  }).format(date)
+}
+
+type MessageSegment = { html?: string; text?: string; visibleText: string }
+
+function escapeHtmlText(value: string): string {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
+}
+
+function decodeHtmlTextNodes(html: string): string {
+  if (!HTML_ENTITY_RE.test(html) && !/\\[nrt"'\\/]|\\u/i.test(html)) return html
+
+  if (typeof document !== "undefined") {
+    const template = document.createElement("template")
+    template.innerHTML = html
+    const walker = document.createTreeWalker(template.content, NodeFilter.SHOW_TEXT)
+    const textNodes: Text[] = []
+    let node = walker.nextNode()
+    while (node) {
+      textNodes.push(node as Text)
+      node = walker.nextNode()
+    }
+    textNodes.forEach((textNode) => {
+      textNode.nodeValue = decodeEmailDisplayText(textNode.nodeValue ?? "")
+    })
+    return template.innerHTML
+  }
+
+  return html
+    .split(/(<[^>]+>)/g)
+    .map((part) => (part.startsWith("<") && part.endsWith(">") ? part : escapeHtmlText(decodeEmailDisplayText(part))))
+    .join("")
+}
+
+function decodeHtmlText(value: string): string {
+  const withoutTags = value
+    .replace(BR_TAG_RE, "\n")
+    .replace(/<\/(p|div|blockquote|li|tr|table|ul|ol)>/gi, "\n")
+    .replace(/<[^>]*>/g, "")
+
+  return decodeEmailDisplayText(withoutTags)
+}
+
+function htmlToVisibleText(html: string): string {
+  return decodeHtmlText(html).replace(/\u00a0/g, " ").replace(/[ \t]+/g, " ").trim()
+}
+
+function serializeNode(node: Node): string {
+  const host = document.createElement("div")
+  host.appendChild(node.cloneNode(true))
+  return host.innerHTML
+}
+
+function wrapHtmlLike(element: Element, innerHtml: string): string {
+  const clone = element.cloneNode(false) as HTMLElement
+  clone.innerHTML = innerHtml
+  return clone.outerHTML
+}
+
+function hasDirectBr(nodes: readonly Node[]): boolean {
+  return nodes.some((node) => node.nodeType === Node.ELEMENT_NODE && (node as Element).tagName.toLowerCase() === "br")
+}
+
+function hasDirectBlockChild(element: Element): boolean {
+  return Array.from(element.children).some((child) => {
+    const tagName = child.tagName.toLowerCase()
+    return tagName !== "br" && BLOCK_TAGS.has(tagName)
+  })
+}
+
+function makeHtmlSegment(html: string): MessageSegment | null {
+  const visibleText = htmlToVisibleText(html)
+  if (!html.trim() || (!visibleText && !/<(?:img|hr)\b/i.test(html))) return null
+  return { html, visibleText }
+}
+
+function splitInlineNodes(nodes: readonly Node[], wrapper?: Element): MessageSegment[] {
+  const containsBr = hasDirectBr(nodes)
+  const chunks: string[][] = [[]]
+
+  nodes.forEach((node) => {
+    if (node.nodeType === Node.ELEMENT_NODE && (node as Element).tagName.toLowerCase() === "br") {
+      chunks.push([])
+      return
+    }
+
+    chunks[chunks.length - 1]?.push(serializeNode(node))
+  })
+
+  return chunks
+    .map((chunk) => chunk.join(""))
+    .map((innerHtml) => {
+      if (wrapper) return wrapHtmlLike(wrapper, innerHtml)
+      return containsBr ? `<div>${innerHtml}</div>` : innerHtml
+    })
+    .map(makeHtmlSegment)
+    .filter((segment): segment is MessageSegment => Boolean(segment))
+}
+
+function splitElementSegment(element: Element): MessageSegment[] {
+  const tagName = element.tagName.toLowerCase()
+
+  if (GMAIL_SIGNATURE_RE.test(element.outerHTML) || GMAIL_QUOTE_RE.test(element.outerHTML)) {
+    const segment = makeHtmlSegment(element.outerHTML)
+    return segment ? [segment] : []
+  }
+
+  if (tagName === "div" && hasDirectBlockChild(element)) {
+    const childSegments = splitHtmlNodes(Array.from(element.childNodes))
+    return childSegments.length ? childSegments : ([makeHtmlSegment(element.outerHTML)].filter(Boolean) as MessageSegment[])
+  }
+
+  if (SPLITTABLE_BLOCK_TAGS.has(tagName) && hasDirectBr(Array.from(element.childNodes)) && !hasDirectBlockChild(element)) {
+    return splitInlineNodes(Array.from(element.childNodes), element)
+  }
+
+  const segment = makeHtmlSegment(element.outerHTML)
+  return segment ? [segment] : []
+}
+
+function splitHtmlNodes(nodes: readonly Node[]): MessageSegment[] {
+  const segments: MessageSegment[] = []
+  let inlineNodes: Node[] = []
+
+  const flushInline = () => {
+    if (!inlineNodes.length) return
+    segments.push(...splitInlineNodes(inlineNodes))
+    inlineNodes = []
+  }
+
+  nodes.forEach((node) => {
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const element = node as Element
+      const tagName = element.tagName.toLowerCase()
+      if (BLOCK_TAGS.has(tagName)) {
+        flushInline()
+        segments.push(...splitElementSegment(element))
+        return
+      }
+    }
+
+    inlineNodes.push(node)
+  })
+
+  flushInline()
+  return segments
+}
+
+function findMatchingCloseTag(html: string, tagName: string, openTagEnd: number): number {
+  if (tagName === "hr") return openTagEnd + 1
+
+  const tagPattern = new RegExp(`</?${tagName}\\b[^>]*>`, "gi")
+  tagPattern.lastIndex = openTagEnd + 1
+  let depth = 1
+  let match: RegExpExecArray | null
+
+  while ((match = tagPattern.exec(html)) !== null) {
+    const rawTag = match[0]
+    if (/^<\//.test(rawTag)) depth -= 1
+    else if (!/\/\s*>$/.test(rawTag)) depth += 1
+    if (depth === 0) return tagPattern.lastIndex
+  }
+
+  return html.length
+}
+
+function splitHtmlSegmentsFallback(html: string): MessageSegment[] {
+  const segments: MessageSegment[] = []
+  let cursor = 0
+
+  const pushInline = (inlineHtml: string) => {
+    const chunks = inlineHtml.split(BR_TAG_RE)
+    const hadBr = chunks.length > 1
+    chunks.forEach((chunk) => {
+      const segment = makeHtmlSegment(hadBr ? `<div>${chunk}</div>` : chunk)
+      if (segment) segments.push(segment)
+    })
+  }
+
+  while (cursor < html.length) {
+    const rest = html.slice(cursor)
+    const match = HTML_BLOCK_START_RE.exec(rest)
+    if (!match || match.index === undefined) {
+      pushInline(rest)
+      break
+    }
+
+    if (match.index > 0) pushInline(rest.slice(0, match.index))
+
+    const tagStart = cursor + match.index
+    const rawOpen = match[0]
+    const tagName = match[1].toLowerCase()
+    const openTagEnd = tagStart + rawOpen.length - 1
+    const segmentEnd = findMatchingCloseTag(html, tagName, openTagEnd)
+    const blockHtml = html.slice(tagStart, segmentEnd)
+
+    if (SPLITTABLE_BLOCK_TAGS.has(tagName) && BR_TAG_RE.test(blockHtml)) {
+      const openTag = rawOpen
+      const closeTag = `</${tagName}>`
+      const inner = blockHtml.replace(new RegExp(`^${rawOpen.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}`, "i"), "").replace(new RegExp(`${closeTag}$`, "i"), "")
+      inner.split(BR_TAG_RE).forEach((chunk) => {
+        const segment = makeHtmlSegment(`${openTag}${chunk}${closeTag}`)
+        if (segment) segments.push(segment)
+      })
+    } else {
+      const segment = makeHtmlSegment(blockHtml)
+      if (segment) segments.push(segment)
+    }
+
+    cursor = segmentEnd
+  }
+
+  return segments
+}
+
+function segmentHtmlMessage(html: string): MessageSegment[] {
+  if (typeof document === "undefined" || typeof Node === "undefined") {
+    return splitHtmlSegmentsFallback(html)
+  }
+
+  const template = document.createElement("template")
+  template.innerHTML = html
+  return splitHtmlNodes(Array.from(template.content.childNodes))
+}
+
+function segmentTextMessage(text: string): MessageSegment[] {
+  const normalized = decodeEmailDisplayText(text)
+  const lines: string[] = normalized.match(/[^\n]*(?:\n|$)/g) ?? []
+  return lines
+    .filter((line, index) => line.length > 0 && !(index === lines.length - 1 && line === ""))
+    .map((line) => ({ text: line, visibleText: line.replace(/\u00a0/g, " ").trim() }))
+}
+
+function firstVisibleLine(text: string): string {
+  return text.replace(/\u00a0/g, " ").trimStart().split(/\r?\n/).find((line) => line.trim())?.trim() ?? ""
+}
+
+function isLikelySenderNameLine(line: string): boolean {
+  if (!line || line.length > 60) return false
+  if (/[,@:;!?]|https?:\/\/|www\.|\d/.test(line)) return false
+
+  const words = line.split(/\s+/).filter(Boolean)
+  if (words.length < 1 || words.length > 4) return false
+
+  return words.every((word) => /^[A-Z][A-Za-z'.-]*$/.test(word))
+}
+
+function nextVisibleSegmentText(segments: MessageSegment[], fromIndex: number): string {
+  for (let index = fromIndex + 1; index < segments.length; index += 1) {
+    const text = firstVisibleLine(segments[index]?.visibleText ?? "")
+    if (text) return text
+  }
+  return ""
+}
+
+function isGmailDetailsSegment(segment: MessageSegment): boolean {
+  return Boolean(segment.html && (GMAIL_SIGNATURE_RE.test(segment.html) || GMAIL_QUOTE_RE.test(segment.html)))
+}
+
+function isFooterBoundary(segments: MessageSegment[], index: number): boolean {
+  const segment = segments[index]
+  if (!segment) return false
+  if (isGmailDetailsSegment(segment)) return true
+
+  const line = firstVisibleLine(segment.visibleText)
+  if (!line) return false
+  if (SIGNATURE_DELIMITER_RE.test(line) || DETAILS_START_RE.test(line) || ON_WROTE_RE.test(line)) return true
+
+  const nextText = nextVisibleSegmentText(segments, index)
+  if (SIGNOFF_RE.test(line)) return Boolean(nextText && (isLikelySenderNameLine(nextText) || CONTACT_DETAIL_RE.test(nextText)))
+
+  return isLikelySenderNameLine(line) && CONTACT_DETAIL_RE.test(nextText)
+}
+
+function splitFooterSegments(segments: MessageSegment[]): { bodySegments: MessageSegment[]; detailsSegments: MessageSegment[] } {
+  const visibleIndexes = segments
+    .map((segment, index) => (segment.visibleText || isGmailDetailsSegment(segment) ? index : -1))
+    .filter((index) => index >= 0)
+  const visibleCount = visibleIndexes.length
+  if (visibleCount < 2) return { bodySegments: segments, detailsSegments: [] }
+
+  const trailingCount = Math.max(Math.ceil(visibleCount * 0.4), 8)
+  const firstTrailingOrdinal = Math.max(1, visibleCount - trailingCount)
+
+  for (let ordinal = firstTrailingOrdinal; ordinal < visibleCount; ordinal += 1) {
+    const index = visibleIndexes[ordinal]
+    if (ordinal > 0 && isFooterBoundary(segments, index)) {
+      return { bodySegments: segments.slice(0, index), detailsSegments: segments.slice(index) }
+    }
+  }
+
+  return { bodySegments: segments, detailsSegments: [] }
+}
+
+export function splitEmailHtmlForDisplay(html: string): SplitEmailHtmlResult {
+  const sanitizedHtml = sanitizeHtml(decodeHtmlTextNodes(html))
+  const { bodySegments, detailsSegments } = splitFooterSegments(segmentHtmlMessage(sanitizedHtml))
+
+  if (!detailsSegments.length) return { bodyHtml: sanitizedHtml, detailsHtml: "" }
+
+  return {
+    bodyHtml: bodySegments.map((segment) => segment.html ?? "").join(""),
+    detailsHtml: detailsSegments.map((segment) => segment.html ?? "").join(""),
+  }
+}
+
+export function splitEmailTextForDisplay(text: string): SplitEmailTextResult {
+  const decodedText = decodeEmailDisplayText(text)
+  const { bodySegments, detailsSegments } = splitFooterSegments(segmentTextMessage(decodedText))
+
+  if (!detailsSegments.length) return { bodyText: decodedText, detailsText: "" }
+
+  return {
+    bodyText: bodySegments.map((segment) => segment.text ?? "").join(""),
+    detailsText: detailsSegments.map((segment) => segment.text ?? "").join(""),
+  }
+}
+
+export function emailBodySnippet(input: { bodyHtml?: string | null; body?: string | null }, maxLength = 140): string {
+  const html = input.bodyHtml?.trim()
+  if (html) {
+    return decodeEmailDisplayText(htmlToTextSnippet(splitEmailHtmlForDisplay(html).bodyHtml, maxLength)).trim()
+  }
+
+  const text = input.body ?? ""
+  const bodyText = splitEmailTextForDisplay(text).bodyText
+  const firstLine = bodyText.split("\n").find((line) => line.trim())?.trim() ?? ""
+  return decodeEmailDisplayText(firstLine).replace(/\s+/g, " ").trim().slice(0, maxLength)
+}