@handled-ai/design-system 0.18.53 → 0.19.0-rc.0

package/src/components/data-table-filter.tsx

@@ -44,6 +44,14 @@ export interface DataTableOptionFilterCategory extends DataTableFilterCategoryBa
   options: (string | FilterOption)[]
   /** Filter behavior. Defaults to "multi" (checkbox multi-select). */
   type?: "multi" | "single" | "boolean"
+  /**
+   * When true, the submenu search box is parent-driven: typing fires
+   * `onOptionSearch(categoryId, query)` and the parent is responsible for
+   * supplying the matching `options` (e.g. a server-backed lookup over a large
+   * set). The built-in client-side option filtering is skipped, the search box
+   * is always shown, and `optionSearchLoading[categoryId]` drives a loading row.
+   */
+  remoteSearch?: boolean
 }
 
 export interface DataTableTextFilterCategory extends DataTableFilterCategoryBase {
@@ -196,6 +204,15 @@ export interface DataTableFilterProps {
   textFilters?: Record<string, string>
   /** Callback when a free-text filter value is applied or cleared. */
   onTextFilterChange?: (categoryId: string, value: string) => void
+  /**
+   * Fired when the submenu search input changes for a category with
+   * `remoteSearch: true`. The parent should debounce, fetch matching options,
+   * and feed them back via that category's `options`. The empty string is sent
+   * when the box is cleared (or the submenu re-opens) so the parent can reset.
+   */
+  onOptionSearch?: (categoryId: string, query: string) => void
+  /** Per-category loading state for remote option search, keyed by category id. */
+  optionSearchLoading?: Record<string, boolean>
 }
 
 export function DataTableFilter({
@@ -213,6 +230,8 @@ export function DataTableFilter({
   conditionBuilderLabel = "Add filter",
   textFilters = {},
   onTextFilterChange,
+  onOptionSearch,
+  optionSearchLoading = {},
 }: DataTableFilterProps) {
   const [query, setQuery] = React.useState("")
   const [subQueries, setSubQueries] = React.useState<Record<string, string>>({})
@@ -360,17 +379,21 @@ export function DataTableFilter({
             }
 
             /* ── Sub-menu (single / multi) ──────────────────────── */
+            const isRemote = category.remoteSearch === true
             const subQuery = (subQueries[category.id] ?? "").trim().toLowerCase()
-            const filteredOptions = subQuery
-              ? category.options.filter((opt) =>
+            // Remote-search categories are filtered by the parent (server-side);
+            // never client-filter their options.
+            const filteredOptions = isRemote || !subQuery
+              ? category.options
+              : category.options.filter((opt) =>
                   getOptionLabel(opt).toLowerCase().includes(subQuery)
                 )
-              : category.options
-            const shouldShowSubmenuSearch = shouldShowOptionSearch(
+            const shouldShowSubmenuSearch = isRemote || shouldShowOptionSearch(
               category.searchable,
               category.options.length,
               optionSearchThreshold,
             )
+            const isSearching = optionSearchLoading[category.id] === true
 
             return (
               <DropdownMenuSub
@@ -382,6 +405,8 @@ export function DataTableFilter({
                       delete next[category.id]
                       return next
                     })
+                    // Reset the parent's remote results so re-opening starts clean.
+                    if (isRemote) onOptionSearch?.(category.id, "")
                   }
                 }}
               >
@@ -399,9 +424,11 @@ export function DataTableFilter({
                           className="h-7 w-full rounded-md bg-muted/50 py-1 pr-2 pl-7 text-xs outline-none transition-colors placeholder:text-muted-foreground/70 focus:bg-muted"
                           placeholder="Search..."
                           value={subQueries[category.id] ?? ""}
-                          onChange={(e) =>
-                            setSubQueries((prev) => ({ ...prev, [category.id]: e.target.value }))
-                          }
+                          onChange={(e) => {
+                            const next = e.target.value
+                            setSubQueries((prev) => ({ ...prev, [category.id]: next }))
+                            if (isRemote) onOptionSearch?.(category.id, next)
+                          }}
                           onClick={(e) => e.stopPropagation()}
                           onKeyDown={(e) => {
                             // Allow navigation keys to propagate to Radix menu handling
@@ -447,11 +474,27 @@ export function DataTableFilter({
                       </DropdownMenuItem>
                     )
                   })}
-                  {filteredOptions.length === 0 && category.options.length > 0 && (
+                  {isSearching ? (
                     <div className="p-2 text-center text-xs text-muted-foreground">
-                      No matches
+                      Searching…
                     </div>
-                  )}
+                  ) : filteredOptions.length === 0 ? (
+                    (() => {
+                      const typed = (subQueries[category.id] ?? "").trim().length > 0
+                      const message = isRemote
+                        ? typed
+                          ? "No matches"
+                          : "Type to search"
+                        : category.options.length > 0
+                          ? "No matches"
+                          : null
+                      return message ? (
+                        <div className="p-2 text-center text-xs text-muted-foreground">
+                          {message}
+                        </div>
+                      ) : null
+                    })()
+                  ) : null}
                 </DropdownMenuSubContent>
               </DropdownMenuSub>
             )

package/src/components/owner-chips.tsx

@@ -0,0 +1,335 @@
+"use client"
+
+/**
+ * owner-chips.tsx — disambiguates the two ownership concepts operators kept
+ * confusing on the case panel:
+ *
+ *  1. SIGNAL OWNER   — Handled's OWN assignment. Who owns working this
+ *     signal/action inside Handled. Editable here (assign / reassign /
+ *     unassign). Replaces the ambiguous bare "Unassigned" chip.
+ *
+ *  2. ACCOUNT OWNER(S) — read-through from Salesforce. An account can carry
+ *     more than one (AE + RM). Informational + links out to Salesforce; never
+ *     assigned from inside Handled. Leads with the Salesforce mark.
+ *
+ * Single account owner -> a static, non-interactive chip (no dropdown).
+ * Multiple account owners -> stacked avatars + a ×N badge and a menu that
+ * lists each owner with a link out. This keeps a single owner cheap and quiet
+ * while still surfacing the full set when there is more than one.
+ *
+ * Presentational only: data + handlers come from the consumer (the app).
+ */
+
+import * as React from "react"
+import {
+  ChevronDown,
+  ChevronUp,
+  Check,
+  UserPlus,
+  UserMinus,
+  Info,
+  ArrowUpRight,
+} from "lucide-react"
+
+import { cn } from "../lib/utils"
+import { getInitials } from "../lib/user-display"
+import { BRAND_ICONS } from "../lib/icons"
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar"
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from "./dropdown-menu"
+
+export interface OwnerPerson {
+  /** Stable id (profile id for signal owner; SF user id for account owner). */
+  id?: string
+  name: string
+  email?: string
+  /** e.g. "Relationship Manager", "Account Executive". */
+  role?: string
+  /** Avatar image; falls back to initials when absent. */
+  avatarUrl?: string | null
+  /** External link (Salesforce) for an account owner. */
+  href?: string
+}
+
+/* ── shared bits ─────────────────────────────────────────────────────────── */
+
+function SalesforceMark({ size = 14 }: { size?: number }) {
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={BRAND_ICONS.salesforce}
+      alt="Salesforce"
+      width={size}
+      height={size}
+      style={{ width: size, height: size, objectFit: "contain", display: "block" }}
+    />
+  )
+}
+
+function OwnerAvatar({ person, size = "sm" }: { person: OwnerPerson; size?: "sm" | "default" }) {
+  return (
+    <Avatar size={size} className="ring-background ring-2">
+      {person.avatarUrl ? <AvatarImage src={person.avatarUrl} alt={person.name} /> : null}
+      <AvatarFallback className="bg-muted text-muted-foreground text-[10px] font-medium uppercase">
+        {getInitials({ name: person.name, email: person.email })}
+      </AvatarFallback>
+    </Avatar>
+  )
+}
+
+const chipBase =
+  "inline-flex h-8 items-center gap-1.5 rounded-lg border border-border bg-background px-2.5 text-[13px] " +
+  "shadow-[0_1px_1px_rgba(0,0,0,0.03)]"
+
+/* ── Signal owner (Handled assignment, editable) ─────────────────────────── */
+
+export interface SignalOwnerChipProps {
+  /** Current Handled assignee, or null when unassigned. */
+  owner: OwnerPerson | null
+  /** Operators the case can be assigned to (preloaded — no fetch on open). */
+  assignableOwners?: OwnerPerson[]
+  onAssign?: (owner: OwnerPerson) => void
+  onUnassign?: () => void
+  /** Read-only: render a static chip without the assignment menu. */
+  disabled?: boolean
+  className?: string
+}
+
+function SignalOwnerChip({
+  owner,
+  assignableOwners = [],
+  onAssign,
+  onUnassign,
+  disabled,
+  className,
+}: SignalOwnerChipProps) {
+  const [open, setOpen] = React.useState(false)
+
+  const value = (
+    <>
+      {owner ? (
+        <OwnerAvatar person={owner} />
+      ) : (
+        <span className="text-muted-foreground inline-flex size-[18px] items-center justify-center">
+          <UserPlus size={13} />
+        </span>
+      )}
+      <span className="text-muted-foreground text-[11px] font-medium tracking-wide uppercase">
+        Signal owner
+      </span>
+      <span className="bg-border/70 mx-0.5 h-3.5 w-px" aria-hidden />
+      <span className={cn("font-medium", owner ? "text-foreground" : "text-muted-foreground")}>
+        {owner ? owner.name.split(" ")[0] : "Unassigned"}
+      </span>
+    </>
+  )
+
+  // Read-only or nothing to assign to: static chip.
+  if (disabled || (!onAssign && !onUnassign)) {
+    return (
+      <span
+        data-slot="signal-owner-chip"
+        data-empty={owner ? undefined : "true"}
+        className={cn(chipBase, className)}
+        title="Who owns this signal inside Handled"
+      >
+        {value}
+      </span>
+    )
+  }
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          data-slot="signal-owner-chip"
+          data-empty={owner ? undefined : "true"}
+          className={cn(chipBase, "hover:bg-muted cursor-pointer transition-colors", className)}
+          title="Who owns this signal inside Handled"
+        >
+          {value}
+          <span className="text-muted-foreground ml-0.5">
+            {open ? <ChevronUp size={13} /> : <ChevronDown size={13} />}
+          </span>
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-64">
+        <DropdownMenuLabel className="flex flex-col gap-0.5">
+          <span className="text-[13px] font-semibold">Assign signal owner</span>
+          <span className="text-muted-foreground text-[11px] font-normal">
+            Who works this inside Handled, separate from the Salesforce account owner.
+          </span>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {assignableOwners.map((o) => {
+          const active = !!owner && (owner.id ? owner.id === o.id : owner.name === o.name)
+          return (
+            <DropdownMenuItem
+              key={o.id ?? o.name}
+              onSelect={() => onAssign?.(o)}
+              className="gap-2"
+            >
+              <OwnerAvatar person={o} size="default" />
+              <span className="flex min-w-0 flex-col">
+                <span className="truncate text-[13px] font-medium">{o.name}</span>
+                {o.role ? (
+                  <span className="text-muted-foreground truncate text-[11px]">{o.role}</span>
+                ) : null}
+              </span>
+              {active ? <Check size={14} className="text-foreground ml-auto" /> : null}
+            </DropdownMenuItem>
+          )
+        })}
+        {owner && onUnassign ? (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onSelect={() => onUnassign()} className="text-muted-foreground gap-2">
+              <UserMinus size={13} /> Unassign
+            </DropdownMenuItem>
+          </>
+        ) : null}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+/* ── Account owner(s) (Salesforce, read-through) ─────────────────────────── */
+
+export interface AccountOwnerChipProps {
+  /** Salesforce account owners (RM, AE, …). Empty -> renders nothing. */
+  owners: OwnerPerson[]
+  className?: string
+}
+
+function AccountOwnerChip({ owners, className }: AccountOwnerChipProps) {
+  const [open, setOpen] = React.useState(false)
+  if (!owners.length) return null
+  const multi = owners.length > 1
+
+  // Single owner: a quiet, static chip — no dropdown (per product intent).
+  if (!multi) {
+    const only = owners[0]
+    const body = (
+      <>
+        <span className="inline-flex shrink-0 items-center">
+          <SalesforceMark />
+        </span>
+        <OwnerAvatar person={only} />
+        <span className="text-foreground font-medium">{only.name.split(" ")[0]}</span>
+      </>
+    )
+    return only.href ? (
+      <a
+        href={only.href}
+        target="_blank"
+        rel="noopener noreferrer"
+        data-slot="account-owner-chip"
+        className={cn(chipBase, "hover:bg-muted transition-colors", className)}
+        title={`Account owner in Salesforce — ${only.name}`}
+      >
+        {body}
+        <ArrowUpRight size={12} className="text-muted-foreground ml-0.5" />
+      </a>
+    ) : (
+      <span
+        data-slot="account-owner-chip"
+        className={cn(chipBase, className)}
+        title={`Account owner in Salesforce — ${only.name}`}
+      >
+        {body}
+      </span>
+    )
+  }
+
+  // Multiple owners: stacked avatars + ×N + a menu listing each.
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          data-slot="account-owner-chip"
+          data-multi="true"
+          className={cn(chipBase, "hover:bg-muted cursor-pointer transition-colors", className)}
+          title="Account owners in Salesforce"
+        >
+          <span className="inline-flex shrink-0 items-center">
+            <SalesforceMark />
+          </span>
+          <span className="flex -space-x-2">
+            {owners.map((o) => (
+              <OwnerAvatar key={o.id ?? o.name} person={o} />
+            ))}
+          </span>
+          <span className="text-foreground font-medium">Account owners</span>
+          <span className="bg-muted text-muted-foreground rounded px-1 text-[11px] font-semibold tabular-nums">
+            ×{owners.length}
+          </span>
+          <span className="text-muted-foreground ml-0.5">
+            {open ? <ChevronUp size={13} /> : <ChevronDown size={13} />}
+          </span>
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-72">
+        <DropdownMenuLabel className="flex items-center gap-1.5 text-[13px]">
+          <SalesforceMark />
+          {owners.length} account owners
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {owners.map((o) => {
+          const row = (
+            <>
+              <OwnerAvatar person={o} size="default" />
+              <span className="flex min-w-0 flex-col">
+                <span className="truncate text-[13px] font-medium">{o.name}</span>
+                {o.role ? (
+                  <span className="text-muted-foreground truncate text-[11px]">{o.role}</span>
+                ) : null}
+              </span>
+              {o.href ? <ArrowUpRight size={13} className="text-muted-foreground ml-auto" /> : null}
+            </>
+          )
+          return (
+            <DropdownMenuItem key={o.id ?? o.name} asChild={!!o.href} className="gap-2">
+              {o.href ? (
+                <a href={o.href} target="_blank" rel="noopener noreferrer" title={`Open ${o.name} in Salesforce`}>
+                  {row}
+                </a>
+              ) : (
+                <span>{row}</span>
+              )}
+            </DropdownMenuItem>
+          )
+        })}
+        <DropdownMenuSeparator />
+        <div className="text-muted-foreground flex items-center gap-1.5 px-2 py-1.5 text-[11px]">
+          <Info size={12} /> Synced from Salesforce. Manage owners there.
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+/* ── Convenience composite ──────────────────────────────────────────────── */
+
+export interface OwnerChipsProps extends SignalOwnerChipProps {
+  /** Salesforce account owners (read-through). */
+  accountOwners?: OwnerPerson[]
+}
+
+function OwnerChips({ accountOwners = [], className, ...signal }: OwnerChipsProps) {
+  return (
+    <>
+      <SignalOwnerChip {...signal} className={className} />
+      <AccountOwnerChip owners={accountOwners} className={className} />
+    </>
+  )
+}
+
+export { SignalOwnerChip, AccountOwnerChip, OwnerChips }

package/src/components/timeline-activity.tsx

@@ -2,8 +2,25 @@
 
 import * as React from "react"
 import { cn } from "../lib/utils"
+import { sanitizeHtml } from "../internal/safe-html"
 import { ChevronDown, ChevronUp, ExternalLink } from "lucide-react"
 
+/**
+ * Gmail-like reading-pane typography for rendered, sanitized email HTML.
+ * Self-contained Tailwind child-variant utilities — no global CSS. Links use
+ * Gmail blue; quoted history (`blockquote.gmail_quote`) is de-emphasized with a
+ * left rule and muted, slightly smaller text.
+ */
+const EMAIL_HTML_CLASS = cn(
+  "text-sm leading-[1.62] text-foreground/90 break-words",
+  "[&_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",
+  "[&_img]:max-w-full [&_img]:h-auto",
+  "[&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground [&_blockquote]:text-[13px]",
+  "[&_.gmail_quote]:border-l-2 [&_.gmail_quote]:border-border [&_.gmail_quote]:pl-3 [&_.gmail_quote]:text-muted-foreground [&_.gmail_quote]:text-[13px]"
+)
+
 export type TimelineEventTone =
   | "red"
   | "amber"
@@ -37,6 +54,13 @@ export interface TimelineEvent {
     date?: string
     subject?: string
     body: React.ReactNode
+    /**
+     * HTML body. When provided, the card renders formatted, Gmail-like HTML
+     * instead of the plain-text `body`. The component sanitizes it before
+     * rendering. Opt-in: when absent, the plain-text `body` path is used and
+     * existing consumers are unaffected.
+     */
+    bodyHtml?: string
   }
   content?: React.ReactNode
   source?: {
@@ -242,9 +266,19 @@ function TimelineItem({ event, isLast }: { event: TimelineEvent; isLast: boolean
                           </div>
                         </div>
 
-                        <div className="whitespace-pre-line text-sm leading-relaxed text-foreground/90">
-                          {event.email.body}
-                        </div>
+                        {event.email.bodyHtml ? (
+                          // Gmail reading-pane typography; quoted history
+                          // (blockquote.gmail_quote) is de-emphasized with a left rule.
+                          <div
+                            data-slot="timeline-email-html"
+                            className={EMAIL_HTML_CLASS}
+                            dangerouslySetInnerHTML={{ __html: sanitizeHtml(event.email.bodyHtml) }}
+                          />
+                        ) : (
+                          <div className="whitespace-pre-line text-sm leading-relaxed text-foreground/90">
+                            {event.email.body}
+                          </div>
+                        )}
 
                         <button
                           onClick={(e) => {

package/src/index.ts

@@ -29,10 +29,12 @@ export * from "./components/case-panel-activity-timeline"
 export * from "./components/case-panel-detail"
 export * from "./components/case-panel-why"
 export { CollapsibleSection, type CollapsibleSectionProps } from "./components/collapsible-section"
+export * from "./components/comment-composer"
 export * from "./components/compliance-badge"
 export * from "./components/contact-chip"
 export * from "./components/contact-list"
 export * from "./components/contextual-quick-action-launcher"
+export * from "./components/conversation-panel"
 export * from "./components/dashboard-cards"
 export * from "./components/data-table"
 export * from "./components/data-table-condition-filter"
@@ -67,6 +69,7 @@ export * from "./components/kbd-hint"
 export * from "./components/label"
 export * from "./components/message"
 export * from "./components/metric-card"
+export * from "./components/owner-chips"
 export * from "./components/performance-metrics-table"
 export * from "./components/pill"
 export * from "./components/preview-list"

package/src/internal/__tests__/safe-html.test.ts

@@ -0,0 +1,53 @@
+import { describe, expect, it } from "vitest"
+import { htmlToTextSnippet, sanitizeHtml } from "../safe-html"
+
+describe("sanitizeHtml", () => {
+  it("removes executable tags, event handlers, styles, and unsafe urls", () => {
+    const html = sanitizeHtml(
+      '<p style="color:red" onclick="alert(1)">Hi<script>alert(1)</script><iframe src="https://evil.test"></iframe><a href="java&#x3a;script:alert(1)">bad</a><img src="data:text/html,boom" onerror="alert(1)"></p>',
+    )
+
+    expect(html).toBe('<p>Hi<a>bad</a><img></p>')
+  })
+
+  it("rejects entity-obfuscated unsafe protocols", () => {
+    const html = sanitizeHtml('<a href="jav&#x61;script&colon;alert(1)">bad</a><a href="java&amp;#x73;cript:alert(1)">also bad</a>')
+
+    expect(html).toBe('<a>bad</a><a>also bad</a>')
+  })
+
+  it("drops url attributes with out-of-range numeric entities without throwing", () => {
+    expect(() => sanitizeHtml('<a href="&#x110000;">link</a><img src="&#999999999999999999999;">')).not.toThrow()
+    expect(sanitizeHtml('<a href="&#x110000;">link</a><img src="&#999999999999999999999;">')).toBe('<a>link</a><img>')
+  })
+
+  it("drops protocol-relative urls instead of treating them as local paths", () => {
+    const html = sanitizeHtml('<a href="//evil.example/path">link</a><img src="//evil.example/pixel.png">')
+
+    expect(html).toBe('<a>link</a><img>')
+  })
+
+  it("handles less-than characters inside quoted attributes without preserving unsafe attributes", () => {
+    const html = sanitizeHtml('<img src=x onerror="alert(1)" alt="<"><p title="<" onclick="alert(1)">click me</p>')
+
+    expect(html).toBe('<img src="x" alt="&lt;"><p title="&lt;">click me</p>')
+  })
+
+  it("keeps common email formatting, safe links, and gmail_quote classes", () => {
+    const html = sanitizeHtml(
+      '<blockquote class="gmail_quote weird$class" style="color:red"><a href="https://example.com" target="_self">Quoted</a><br><ul><li>One</li></ul></blockquote>',
+    )
+
+    expect(html).toContain('class="gmail_quote"')
+    expect(html).toContain('href="https://example.com"')
+    expect(html).toContain('rel="noopener noreferrer"')
+    expect(html).toContain("<ul><li>One</li></ul>")
+    expect(html).not.toContain("style=")
+  })
+})
+
+describe("htmlToTextSnippet", () => {
+  it("builds snippets from sanitized text content", () => {
+    expect(htmlToTextSnippet('<p>Hello <script>alert(1)</script><b>world</b></p>', 11)).toBe("Hello world")
+  })
+})