@handled-ai/design-system 0.18.22 → 0.18.23

package/src/components/case-panel-email-composer.tsx

@@ -0,0 +1,341 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+import { BRAND_ICONS } from "../lib/icons"
+
+export type CasePanelEmailComposerRowState = "default" | "confirmed" | "unconfirmed"
+
+export interface CasePanelEmailComposerRowProps extends React.HTMLAttributes<HTMLDivElement> {
+  label: React.ReactNode
+  children?: React.ReactNode
+  value?: React.ReactNode
+  placeholder?: React.ReactNode
+  actions?: React.ReactNode
+  state?: CasePanelEmailComposerRowState
+}
+
+export function CasePanelEmailComposerRow({
+  label,
+  children,
+  value,
+  placeholder,
+  actions,
+  state = "default",
+  className,
+  ...props
+}: CasePanelEmailComposerRowProps) {
+  const content = children ?? value ?? placeholder
+  const rowClassName =
+    state === "unconfirmed"
+      ? "flex min-h-11 items-stretch border-b border-amber-200/80 bg-amber-50/75 text-sm dark:border-amber-900/50 dark:bg-amber-950/20"
+      : "flex min-h-11 items-stretch border-b border-border/70 bg-background text-sm"
+  const labelClassName =
+    state === "unconfirmed"
+      ? "flex w-[60px] shrink-0 items-center border-r border-amber-200/80 px-3 text-[11px] font-semibold uppercase tracking-wide text-amber-700 dark:border-amber-900/50 dark:text-amber-300"
+      : "flex w-[60px] shrink-0 items-center border-r border-border/70 px-3 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground"
+  const contentClassName =
+    state === "unconfirmed"
+      ? "flex min-w-0 flex-1 items-center gap-2 px-3 py-2 text-amber-950 dark:text-amber-100"
+      : "flex min-w-0 flex-1 items-center gap-2 px-3 py-2 text-foreground"
+  const placeholderClassName =
+    state === "unconfirmed"
+      ? "min-w-0 truncate text-amber-700/80 dark:text-amber-200/80"
+      : "min-w-0 truncate text-muted-foreground"
+
+  return (
+    <div
+      data-slot="case-panel-email-composer-row"
+      data-state={state}
+      className={cn(rowClassName, className)}
+      {...props}
+    >
+      <div data-slot="case-panel-email-composer-row-label" className={labelClassName}>
+        {label}
+      </div>
+      <div data-slot="case-panel-email-composer-row-content" className={contentClassName}>
+        {content ? (
+          <div className="min-w-0 flex-1 truncate">{content}</div>
+        ) : (
+          <div className={placeholderClassName}>Add {label}</div>
+        )}
+        {actions ? <div className="flex shrink-0 items-center gap-1.5">{actions}</div> : null}
+      </div>
+    </div>
+  )
+}
+
+export interface CasePanelEmailComposerChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode
+}
+
+export function CasePanelEmailComposerChip({
+  children,
+  className,
+  type = "button",
+  ...props
+}: CasePanelEmailComposerChipProps) {
+  return (
+    <button
+      data-slot="case-panel-email-composer-chip"
+      type={type}
+      className={cn(
+        "inline-flex h-6 items-center justify-center rounded-full border border-border bg-background px-2.5 text-[11px] font-medium text-muted-foreground shadow-xs transition-colors hover:bg-muted/60 hover:text-foreground disabled:pointer-events-none disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}
+
+export interface CasePanelEmailComposerSignatureRowProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode
+  label?: React.ReactNode
+  checked?: boolean
+  disabled?: boolean
+}
+
+export function CasePanelEmailComposerSignatureRow({
+  children,
+  label = "Include signature",
+  checked = true,
+  disabled,
+  className,
+  ...props
+}: CasePanelEmailComposerSignatureRowProps) {
+  return (
+    <div
+      data-slot="case-panel-email-composer-signature-row"
+      className={cn(
+        "flex items-center justify-between border-t border-border/70 bg-muted/20 px-4 py-2.5 text-xs text-muted-foreground",
+        className,
+      )}
+      {...props}
+    >
+      {children ?? (
+        <div className="flex items-center gap-2">
+          <span
+            aria-hidden="true"
+            data-checked={checked ? "true" : "false"}
+            className={
+              checked
+                ? "flex size-4 items-center justify-center rounded border border-foreground bg-foreground text-[10px] leading-none text-background"
+                : "flex size-4 items-center justify-center rounded border border-border bg-background text-[10px] leading-none text-background"
+            }
+          >
+            {checked ? "✓" : ""}
+          </span>
+          <span className={disabled ? "text-muted-foreground/60" : "text-muted-foreground"}>{label}</span>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export interface CasePanelEmailComposerSlotHelpers {
+  Row: typeof CasePanelEmailComposerRow
+  Chip: typeof CasePanelEmailComposerChip
+  SignatureRow: typeof CasePanelEmailComposerSignatureRow
+}
+
+export interface CasePanelEmailComposerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onKeyDown" | "title"> {
+  title?: React.ReactNode
+  providerLabel?: React.ReactNode
+  recipientRows?: React.ReactNode | ((helpers: CasePanelEmailComposerSlotHelpers) => React.ReactNode)
+  from?: React.ReactNode
+  to?: React.ReactNode
+  cc?: React.ReactNode
+  bcc?: React.ReactNode
+  subject?: React.ReactNode
+  toState?: CasePanelEmailComposerRowState
+  draftEditor?: React.ReactNode
+  toolbar?: React.ReactNode
+  sendBarActions?: React.ReactNode
+  signatureControl?: React.ReactNode
+  disabledReason?: React.ReactNode
+  disabled?: boolean
+  sendDisabled?: boolean
+  sendLabel?: React.ReactNode
+  onSendIntent?: () => void
+  onContactsIntent?: () => void
+  onAccountDetailsIntent?: () => void
+  onAddCcIntent?: () => void
+  onAddBccIntent?: () => void
+  contactsLabel?: React.ReactNode
+  accountDetailsLabel?: React.ReactNode
+  addCcLabel?: React.ReactNode
+  addBccLabel?: React.ReactNode
+  showRecipientActionChips?: boolean
+  onComposerKeyDown?: React.KeyboardEventHandler<HTMLDivElement>
+}
+
+const slotHelpers: CasePanelEmailComposerSlotHelpers = {
+  Row: CasePanelEmailComposerRow,
+  Chip: CasePanelEmailComposerChip,
+  SignatureRow: CasePanelEmailComposerSignatureRow,
+}
+
+export function CasePanelEmailComposer({
+  title = "Draft",
+  providerLabel = "Gmail",
+  recipientRows,
+  from,
+  to,
+  cc,
+  bcc,
+  subject,
+  toState = "default",
+  draftEditor,
+  toolbar,
+  sendBarActions,
+  signatureControl,
+  disabledReason,
+  disabled = false,
+  sendDisabled = false,
+  sendLabel = "Send",
+  onSendIntent,
+  onContactsIntent,
+  onAccountDetailsIntent,
+  onAddCcIntent,
+  onAddBccIntent,
+  contactsLabel = "Contacts",
+  accountDetailsLabel = "Account details",
+  addCcLabel = "Add Cc",
+  addBccLabel = "Add Bcc",
+  showRecipientActionChips = true,
+  onComposerKeyDown,
+  className,
+  ...props
+}: CasePanelEmailComposerProps) {
+  const disabledReasonId = React.useId()
+  const sendIsDisabled = disabled || sendDisabled || Boolean(disabledReason)
+
+  const handleSendIntent = React.useCallback(() => {
+    if (sendIsDisabled) return
+    onSendIntent?.()
+  }, [onSendIntent, sendIsDisabled])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      onComposerKeyDown?.(event)
+      if (event.defaultPrevented) return
+      if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault()
+        handleSendIntent()
+      }
+    },
+    [handleSendIntent, onComposerKeyDown],
+  )
+
+  const renderedRecipientRows =
+    typeof recipientRows === "function"
+      ? recipientRows(slotHelpers)
+      : recipientRows ?? (
+          <>
+            <CasePanelEmailComposerRow label="From" value={from} placeholder="Sender" />
+            <CasePanelEmailComposerRow label="To" value={to} placeholder="Recipient" state={toState} />
+            {cc ? <CasePanelEmailComposerRow label="Cc" value={cc} /> : null}
+            {bcc ? <CasePanelEmailComposerRow label="Bcc" value={bcc} /> : null}
+            <CasePanelEmailComposerRow label="Subject" value={subject} placeholder="Subject" />
+          </>
+        )
+
+  const showActionChips =
+    showRecipientActionChips &&
+    (onContactsIntent || onAccountDetailsIntent || onAddCcIntent || onAddBccIntent)
+
+  return (
+    <div
+      data-slot="case-panel-email-composer"
+      aria-disabled={disabled ? "true" : undefined}
+      className={cn(
+        "overflow-hidden rounded-xl border border-border bg-background shadow-sm",
+        className,
+      )}
+      onKeyDown={handleKeyDown}
+      {...props}
+    >
+      <div data-slot="case-panel-email-composer-header" className="flex items-center justify-between border-b border-border/70 bg-muted/20 px-4 py-3">
+        <div className="flex min-w-0 items-center gap-2">
+          <img
+            src={BRAND_ICONS.gmail.icon}
+            alt="Gmail"
+            className="size-4 shrink-0 object-contain"
+            draggable={false}
+          />
+          <div className="min-w-0 truncate text-sm font-semibold text-foreground">{title}</div>
+        </div>
+        <div className="shrink-0 text-[11px] font-medium text-muted-foreground">{providerLabel}</div>
+      </div>
+
+      <div data-slot="case-panel-email-composer-card" className="bg-background">
+        <div data-slot="case-panel-email-composer-recipient-rows">{renderedRecipientRows}</div>
+
+        {showActionChips ? (
+          <div data-slot="case-panel-email-composer-chip-row" className="flex flex-wrap items-center gap-1.5 border-b border-border/70 bg-muted/10 px-3 py-2">
+            {onContactsIntent ? (
+              <CasePanelEmailComposerChip onClick={onContactsIntent} disabled={disabled}>
+                {contactsLabel}
+              </CasePanelEmailComposerChip>
+            ) : null}
+            {onAccountDetailsIntent ? (
+              <CasePanelEmailComposerChip onClick={onAccountDetailsIntent} disabled={disabled}>
+                {accountDetailsLabel}
+              </CasePanelEmailComposerChip>
+            ) : null}
+            {onAddCcIntent ? (
+              <CasePanelEmailComposerChip onClick={onAddCcIntent} disabled={disabled}>
+                {addCcLabel}
+              </CasePanelEmailComposerChip>
+            ) : null}
+            {onAddBccIntent ? (
+              <CasePanelEmailComposerChip onClick={onAddBccIntent} disabled={disabled}>
+                {addBccLabel}
+              </CasePanelEmailComposerChip>
+            ) : null}
+          </div>
+        ) : null}
+
+        <div data-slot="case-panel-email-composer-editor" className="min-h-40 px-4 py-4 text-sm text-foreground">
+          {draftEditor ?? <div className="text-muted-foreground">Draft editor slot</div>}
+        </div>
+
+        {signatureControl ? (
+          <div data-slot="case-panel-email-composer-signature-control">{signatureControl}</div>
+        ) : (
+          <CasePanelEmailComposerSignatureRow disabled={disabled} />
+        )}
+
+        <div data-slot="case-panel-email-composer-toolbar" className="flex min-h-11 items-center gap-2 border-t border-border/70 bg-muted/10 px-3 py-2">
+          {toolbar ?? <div className="text-xs font-medium text-muted-foreground">Toolbar</div>}
+        </div>
+
+        <div data-slot="case-panel-email-composer-send-bar" className="flex items-center justify-between gap-3 border-t border-border/70 bg-background px-3 py-3">
+          <div className="min-w-0 flex-1">
+            {disabledReason ? (
+              <div id={disabledReasonId} data-slot="case-panel-email-composer-disabled-reason" className="truncate text-xs text-muted-foreground">
+                {disabledReason}
+              </div>
+            ) : null}
+          </div>
+          <div className="flex shrink-0 items-center gap-2">
+            {sendBarActions}
+            <button
+              type="button"
+              data-slot="case-panel-email-composer-send-button"
+              aria-describedby={disabledReason ? disabledReasonId : undefined}
+              disabled={sendIsDisabled}
+              onClick={handleSendIntent}
+              className="inline-flex h-8 items-center justify-center rounded-md bg-foreground px-3 text-xs font-semibold text-background shadow-xs transition-colors hover:bg-foreground/90 disabled:pointer-events-none disabled:bg-muted disabled:text-muted-foreground"
+            >
+              {sendLabel}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/case-panel-why.tsx

@@ -0,0 +1,214 @@
+"use client"
+
+import * as React from "react"
+import { CirclePlus, Loader2, ThumbsDown } from "lucide-react"
+import { cn } from "../lib/utils"
+import { SignalApprovalActions, useSignalApproval } from "./signal-feedback-inline"
+
+export type CasePanelWhyTone = "neutral" | "alert" | "warn" | "info" | "success"
+
+export interface CasePanelWhyRow {
+  id: string
+  label: React.ReactNode
+  value?: React.ReactNode
+  meta?: React.ReactNode
+  description?: React.ReactNode
+}
+
+export interface CasePanelWhyItem {
+  id: string
+  label: React.ReactNode
+  /** Count rendered in the summary pill as ×N when provided. */
+  count?: number
+  summary?: React.ReactNode
+  details?: React.ReactNode
+  rows?: CasePanelWhyRow[]
+  icon?: React.ReactNode
+  tone?: CasePanelWhyTone
+}
+
+export interface CasePanelWhyProps {
+  items: CasePanelWhyItem[]
+  label?: React.ReactNode
+  defaultExpandedId?: string | null
+  onExpandedChange?: (itemId: string | null) => void
+  className?: string
+}
+
+const toneDotClasses: Record<CasePanelWhyTone, string> = {
+  neutral: "bg-muted-foreground/50",
+  alert: "bg-red-500",
+  warn: "bg-amber-500",
+  info: "bg-blue-500",
+  success: "bg-emerald-500",
+}
+
+function makeDomId(...parts: Array<string | undefined>): string {
+  return parts
+    .filter((part): part is string => Boolean(part))
+    .join("-")
+    .replace(/[^A-Za-z0-9_-]+/g, "-")
+}
+
+function DefaultWhyIcon({ tone = "neutral" }: { tone?: CasePanelWhyTone }) {
+  return <span aria-hidden="true" className={cn("h-1.5 w-1.5 rounded-full", toneDotClasses[tone])} />
+}
+
+export function CasePanelWhy({
+  items,
+  label = "Why",
+  defaultExpandedId = null,
+  onExpandedChange,
+  className,
+}: CasePanelWhyProps) {
+  const [expandedId, setExpandedId] = React.useState<string | null>(defaultExpandedId)
+  const reactId = React.useId()
+  const idPrefix = makeDomId("case-panel-why", reactId)
+
+  const toggleExpanded = React.useCallback(
+    (itemId: string) => {
+      setExpandedId((current) => {
+        const next = current === itemId ? null : itemId
+        onExpandedChange?.(next)
+        return next
+      })
+    },
+    [onExpandedChange],
+  )
+
+  if (items.length === 0) return null
+
+  return (
+    <section className={cn("space-y-2", className)} aria-label={typeof label === "string" ? label : "Case panel why"}>
+      {label ? (
+        <div className="text-[11px] font-semibold uppercase tracking-[0.07em] text-muted-foreground">
+          {label}
+        </div>
+      ) : null}
+
+      <div className="space-y-2">
+        {items.map((item) => {
+          const isExpanded = expandedId === item.id
+          const panelId = `${idPrefix}-panel-${makeDomId(item.id)}`
+          const buttonId = `${idPrefix}-button-${makeDomId(item.id)}`
+
+          return (
+            <div key={item.id} className="space-y-2">
+              <button
+                id={buttonId}
+                type="button"
+                aria-expanded={isExpanded}
+                aria-controls={panelId}
+                onClick={() => toggleExpanded(item.id)}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault()
+                    toggleExpanded(item.id)
+                  }
+                }}
+                className={cn(
+                  "inline-flex min-h-8 max-w-full items-center gap-2 rounded-full border border-border bg-background px-3 py-1.5 text-left text-xs font-semibold text-foreground shadow-[0_1px_1.5px_rgba(0,0,0,0.03)] transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                  isExpanded ? "bg-muted/30" : "bg-background",
+                )}
+              >
+                <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-muted">
+                  {item.icon ?? <DefaultWhyIcon tone={item.tone} />}
+                </span>
+                <span className="min-w-0 truncate">{item.label}</span>
+                {typeof item.count === "number" ? (
+                  <span className="shrink-0 rounded-full bg-muted px-1.5 py-0 text-[10px] font-bold tabular-nums text-muted-foreground">
+                    ×{item.count}
+                  </span>
+                ) : null}
+              </button>
+
+              {isExpanded ? (
+                <div
+                  id={panelId}
+                  role="region"
+                  aria-labelledby={buttonId}
+                  className="mt-2 rounded-xl border border-border bg-background p-3 shadow-[0_1px_2px_rgba(0,0,0,0.03)]"
+                >
+                  {item.summary ? <div className="text-sm leading-6 text-foreground">{item.summary}</div> : null}
+                  {item.details ? <div className="mt-2 text-xs leading-5 text-muted-foreground">{item.details}</div> : null}
+                  {item.rows && item.rows.length > 0 ? (
+                    <ul className="mt-3 divide-y divide-border/50" aria-label="Why details">
+                      {item.rows.map((row) => (
+                        <li key={row.id} className="py-2 first:pt-0 last:pb-0">
+                          <div className="flex items-start justify-between gap-3">
+                            <div className="min-w-0">
+                              <div className="text-sm font-medium leading-5 text-foreground">{row.label}</div>
+                              {row.description ? (
+                                <div className="mt-1 text-xs leading-5 text-muted-foreground">{row.description}</div>
+                              ) : null}
+                              {row.meta ? <div className="mt-1 text-[11px] leading-4 text-muted-foreground/80">{row.meta}</div> : null}
+                            </div>
+                            {row.value ? (
+                              <div className="shrink-0 text-right text-xs font-semibold tabular-nums text-foreground">
+                                {row.value}
+                              </div>
+                            ) : null}
+                          </div>
+                        </li>
+                      ))}
+                    </ul>
+                  ) : null}
+                </div>
+              ) : null}
+            </div>
+          )
+        })}
+      </div>
+    </section>
+  )
+}
+
+export interface CasePanelSignalApprovalActionsProps {
+  className?: string
+}
+
+export function CasePanelSignalApprovalActions({ className }: CasePanelSignalApprovalActionsProps) {
+  const {
+    approvalState,
+    labels,
+    hideApproveButton,
+    approveButtonIconUrl,
+    requestingApproval,
+    requestApproval,
+    requestDismiss,
+  } = useSignalApproval()
+
+  if (approvalState !== "pending") {
+    return <SignalApprovalActions />
+  }
+
+  return (
+    <div className={cn("flex flex-wrap items-center gap-2", className)}>
+      {!hideApproveButton ? (
+        <button
+          type="button"
+          onClick={requestApproval}
+          disabled={requestingApproval}
+          className="inline-flex h-8 items-center gap-1.5 rounded-md border border-foreground bg-foreground px-3 text-xs font-semibold text-background shadow-none transition-colors hover:bg-foreground/90 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          {requestingApproval ? (
+            <Loader2 className="h-3.5 w-3.5 animate-spin" />
+          ) : approveButtonIconUrl ? (
+            <img src={approveButtonIconUrl} alt="" className="h-3.5 w-3.5 object-contain" draggable={false} />
+          ) : (
+            <CirclePlus className="h-3.5 w-3.5" />
+          )}
+          {labels.approveButton}
+        </button>
+      ) : null}
+      <button
+        type="button"
+        onClick={requestDismiss}
+        className="inline-flex h-8 items-center gap-1.5 rounded-md border border-border bg-background px-3 text-xs font-medium text-muted-foreground shadow-none transition-colors hover:bg-muted hover:text-foreground"
+      >
+        <ThumbsDown className="h-3.5 w-3.5" />
+        {labels.dismissButton}
+      </button>
+    </div>
+  )
+}