@handled-ai/design-system 0.20.23 → 0.20.26

package/src/components/conversation-panel.tsx

@@ -38,6 +38,7 @@ import {
   GitMerge,
   Check,
   X,
+  FileText,
 } from "lucide-react"
 
 import { cn } from "../lib/utils"
@@ -48,6 +49,14 @@ import { Button } from "./button"
 import { Switch } from "./switch"
 import { Textarea } from "./textarea"
 import { RichTextToolbar } from "./rich-text-toolbar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "./dropdown-menu"
 import { EmailBody } from "./email-body"
 import { decodeEmailDisplayText, emailBodySnippet, formatAddressList, normalizeEmailSender } from "./email-display-helpers"
 import {
@@ -116,6 +125,21 @@ export interface ConvMessage {
 
 export type ConvStatus = "responded" | "awaiting" | "viewing" | "draft"
 
+/**
+ * A reply template offered in the in-composer "Apply template" picker (WIT-970).
+ * Presentational: the consumer fills variables for THIS thread's recipient
+ * before passing it in, so `body` is composer-ready text. `tags` (e.g. "Reply")
+ * are shown as chips so reps can recognize the right template at a glance.
+ */
+export interface ConversationReplyTemplate {
+  id: string
+  name: string
+  /** Composer-ready reply body, already personalized by the consumer. */
+  body: string
+  /** Optional tags shown as chips in the picker for findability. */
+  tags?: string[]
+}
+
 export interface ConversationThread {
   threadId: string
   subject: string
@@ -141,6 +165,12 @@ export interface ConversationThread {
   draft?: string
   /** Signature text appended to replies (plain text). */
   signature?: string
+  /**
+   * Reply templates offered in the composer's "Apply template" picker, already
+   * personalized for this thread's recipient (WIT-970). Omit/empty hides the
+   * picker.
+   */
+  replyTemplates?: ConversationReplyTemplate[]
 }
 
 export interface ConversationReplyPayload {
@@ -178,6 +208,11 @@ export interface ConversationPanelProps {
    */
   onPreviewReply?: (payload: ConversationReplyPayload) => Promise<ConversationReplyPreview>
   onOpenInGmail?: (threadId: string) => void
+  /**
+   * Fired when the rep applies a reply template from the composer picker
+   * (WIT-970) — for analytics / template-usage tracking. Optional.
+   */
+  onApplyReplyTemplate?: (info: { threadId: string; templateId: string }) => void
   /** Inline-open this thread initially (defaults to the first responded one). */
   defaultOpenThreadId?: string
   className?: string
@@ -535,6 +570,7 @@ function ReplyComposer({
   onSend,
   onDraft,
   onPreviewReply,
+  onApplyTemplate,
   draftDisabledReason,
 }: {
   thread: ConversationThread
@@ -545,10 +581,19 @@ function ReplyComposer({
   onSend: (body: string, includeSignature: boolean) => void | Promise<void>
   onDraft: (body: string, includeSignature: boolean) => void | Promise<void>
   onPreviewReply?: (payload: ConversationReplyPayload) => Promise<ConversationReplyPreview>
+  onApplyTemplate?: (templateId: string) => void
   draftDisabledReason?: string | null
 }) {
   const [body, setBody] = React.useState(thread.draft ?? "")
+  const [appliedTemplate, setAppliedTemplate] = React.useState<string | null>(null)
   const [sig, setSig] = React.useState(true)
+  const replyTemplates = thread.replyTemplates ?? []
+
+  const applyTemplate = (template: ConversationReplyTemplate) => {
+    setBody(template.body)
+    setAppliedTemplate(template.name)
+    onApplyTemplate?.(template.id)
+  }
   const [preview, setPreview] = React.useState(false)
   const [previewState, setPreviewState] = React.useState<PreviewState>(IDLE_PREVIEW)
   const [sending, setSending] = React.useState(false)
@@ -686,6 +731,48 @@ function ReplyComposer({
         </div>
       ) : null}
 
+      {replyTemplates.length > 0 ? (
+        <div className="mt-2 flex flex-wrap items-center gap-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button type="button" variant="outline" size="sm" disabled={sending} data-slot="conv-reply-template-trigger">
+                <FileText size={14} /> Apply template
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" className="max-w-xs">
+              <DropdownMenuLabel>Reply templates</DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              {replyTemplates.map((template) => (
+                <DropdownMenuItem
+                  key={template.id}
+                  onSelect={() => applyTemplate(template)}
+                  className="flex flex-col items-start gap-0.5"
+                >
+                  <span className="text-[13px] font-medium">{template.name}</span>
+                  {template.tags && template.tags.length ? (
+                    <span className="flex flex-wrap gap-1">
+                      {template.tags.map((tag) => (
+                        <span
+                          key={tag}
+                          className="border-border bg-muted text-muted-foreground rounded border px-1 py-px text-[10px] leading-4"
+                        >
+                          {tag}
+                        </span>
+                      ))}
+                    </span>
+                  ) : null}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+          {appliedTemplate ? (
+            <span className="text-muted-foreground inline-flex items-center gap-1 text-[11px]">
+              <Check size={11} /> Applied “{appliedTemplate}” · edit before sending
+            </span>
+          ) : null}
+        </div>
+      ) : null}
+
       <div className="mt-2 flex flex-wrap items-center gap-2">
         <RichTextToolbar />
         <label className="text-muted-foreground ml-auto inline-flex cursor-pointer items-center gap-1.5 text-[12px]">
@@ -797,6 +884,7 @@ function ThreadBody({
   onCreateGmailDraft,
   onPreviewReply,
   onOpenInGmail,
+  onApplyReplyTemplate,
 }: {
   thread: ConversationThread
   me?: ConvParticipant
@@ -805,6 +893,7 @@ function ThreadBody({
   onCreateGmailDraft?: (p: ConversationReplyPayload) => void | Promise<void>
   onPreviewReply?: (p: ConversationReplyPayload) => Promise<ConversationReplyPreview>
   onOpenInGmail?: (threadId: string) => void
+  onApplyReplyTemplate?: ConversationPanelProps["onApplyReplyTemplate"]
 }) {
   const canReply = thread.canReply !== false
   const replyDisabledReason = thread.replyDisabledReason?.trim() || "You are not a participant on this thread, so replying is disabled here."
@@ -885,6 +974,7 @@ function ThreadBody({
           replyAll={replyAll}
           tenantName={tenantName}
           onPreviewReply={onPreviewReply}
+          onApplyTemplate={(templateId) => onApplyReplyTemplate?.({ threadId: thread.threadId, templateId })}
           onClose={() => setMode("idle")}
           onSend={async (body, includeSignature) => {
             await onSendReply?.({ threadId: thread.threadId, body, includeSignature, replyAll })
@@ -940,11 +1030,12 @@ function ThreadRow({
   onCreateGmailDraft,
   onPreviewReply,
   onOpenInGmail,
+  onApplyReplyTemplate,
 }: {
   thread: ConversationThread
   open: boolean
   onToggleOpen: () => void
-} & Pick<ConversationPanelProps, "me" | "tenantName" | "onSendReply" | "onCreateGmailDraft" | "onPreviewReply" | "onOpenInGmail">) {
+} & Pick<ConversationPanelProps, "me" | "tenantName" | "onSendReply" | "onCreateGmailDraft" | "onPreviewReply" | "onOpenInGmail" | "onApplyReplyTemplate">) {
   const status = effectiveStatus(thread)
   const sortedMessages = React.useMemo(() => sortMessagesChronologically(thread.messages), [thread.messages])
   const last = sortedMessages[sortedMessages.length - 1]
@@ -997,6 +1088,7 @@ function ThreadRow({
             onCreateGmailDraft={onCreateGmailDraft}
             onPreviewReply={onPreviewReply}
             onOpenInGmail={onOpenInGmail}
+            onApplyReplyTemplate={onApplyReplyTemplate}
           />
         </div>
       ) : null}
@@ -1014,6 +1106,7 @@ function ConversationPanel({
   onCreateGmailDraft,
   onPreviewReply,
   onOpenInGmail,
+  onApplyReplyTemplate,
   defaultOpenThreadId,
   className,
 }: ConversationPanelProps) {
@@ -1148,6 +1241,7 @@ function ConversationPanel({
               onCreateGmailDraft={onCreateGmailDraft}
               onPreviewReply={onPreviewReply}
               onOpenInGmail={onOpenInGmail}
+              onApplyReplyTemplate={onApplyReplyTemplate}
             />
           ))}
         </div>

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

@@ -214,18 +214,25 @@ export function formatAddressList(input?: string | string[] | null): string {
     .join(", ")
 }
 
-export function formatEmailTimestamp(value?: string | Date | null): string | null {
+export function formatEmailTimestamp(
+  value?: string | Date | null,
+  opts?: { timeZone?: string },
+): string | null {
   if (!value) return null
   const date = value instanceof Date ? value : new Date(value)
   if (Number.isNaN(date.getTime())) return null
 
+  // Default = the runtime's local timezone (the viewer's, in the browser).
+  // Callers that render during SSR/hydration pass timeZone "UTC" for the
+  // first paint so server and client HTML match, then re-render local after
+  // mount (see useHydrated in timeline-activity).
   return new Intl.DateTimeFormat("en-US", {
     month: "short",
     day: "numeric",
     year: "numeric",
     hour: "numeric",
     minute: "2-digit",
-    timeZone: "UTC",
+    ...(opts?.timeZone ? { timeZone: opts.timeZone } : {}),
   }).format(date)
 }
 
@@ -302,6 +309,18 @@ function makeHtmlSegment(html: string): MessageSegment | null {
   return { html, visibleText }
 }
 
+// Blank-line segments carry no visible text, so they never participate in
+// footer-boundary detection — but their html must survive the rebuild, or a
+// split body loses every intentional blank line between paragraphs (the
+// Gmail wire format marks them as <div><br></div>).
+function makeBlankLineSegment(html: string): MessageSegment {
+  return { html, visibleText: "" }
+}
+
+function isBlankLineHtml(html: string): boolean {
+  return Boolean(html.trim()) && !htmlToVisibleText(html) && !/<(?:img|hr)\b/i.test(html)
+}
+
 function splitInlineNodes(nodes: readonly Node[], wrapper?: Element): MessageSegment[] {
   const containsBr = hasDirectBr(nodes)
   const chunks: string[][] = [[]]
@@ -315,14 +334,22 @@ function splitInlineNodes(nodes: readonly Node[], wrapper?: Element): MessageSeg
     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))
+  const rendered = chunks.map((chunk) => chunk.join(""))
+  const segments: MessageSegment[] = []
+  rendered.forEach((innerHtml, index) => {
+    const html = wrapper ? wrapHtmlLike(wrapper, innerHtml) : containsBr ? `<div>${innerHtml}</div>` : innerHtml
+    const segment = makeHtmlSegment(html)
+    if (segment) {
+      segments.push(segment)
+      return
+    }
+    // An interior empty chunk sits between two <br>s: an intentional blank
+    // line. Leading/trailing empties stay dropped, as before.
+    if (containsBr && index > 0 && index < rendered.length - 1) {
+      segments.push(makeBlankLineSegment(wrapper ? wrapHtmlLike(wrapper, "<br>") : "<div><br></div>"))
+    }
+  })
+  return segments
 }
 
 function splitElementSegment(element: Element): MessageSegment[] {
@@ -333,6 +360,12 @@ function splitElementSegment(element: Element): MessageSegment[] {
     return segment ? [segment] : []
   }
 
+  // A block with no visible content (e.g. <div><br></div>, <p></p>) is a
+  // blank-line marker — keep it whole instead of splitting/dropping it.
+  if (isBlankLineHtml(element.outerHTML)) {
+    return [makeBlankLineSegment(element.outerHTML)]
+  }
+
   if (tagName === "div" && hasDirectBlockChild(element)) {
     const childSegments = splitHtmlNodes(Array.from(element.childNodes))
     return childSegments.length ? childSegments : ([makeHtmlSegment(element.outerHTML)].filter(Boolean) as MessageSegment[])
@@ -399,9 +432,15 @@ function splitHtmlSegmentsFallback(html: string): MessageSegment[] {
   const pushInline = (inlineHtml: string) => {
     const chunks = inlineHtml.split(BR_TAG_RE)
     const hadBr = chunks.length > 1
-    chunks.forEach((chunk) => {
+    chunks.forEach((chunk, index) => {
       const segment = makeHtmlSegment(hadBr ? `<div>${chunk}</div>` : chunk)
-      if (segment) segments.push(segment)
+      if (segment) {
+        segments.push(segment)
+        return
+      }
+      if (hadBr && index > 0 && index < chunks.length - 1) {
+        segments.push(makeBlankLineSegment("<div><br /></div>"))
+      }
     })
   }
 
@@ -422,13 +461,22 @@ function splitHtmlSegmentsFallback(html: string): MessageSegment[] {
     const segmentEnd = findMatchingCloseTag(html, tagName, openTagEnd)
     const blockHtml = html.slice(tagStart, segmentEnd)
 
-    if (SPLITTABLE_BLOCK_TAGS.has(tagName) && BR_TAG_RE.test(blockHtml)) {
+    if (isBlankLineHtml(blockHtml)) {
+      segments.push(makeBlankLineSegment(blockHtml))
+    } else 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 innerChunks = inner.split(BR_TAG_RE)
+      innerChunks.forEach((chunk, index) => {
         const segment = makeHtmlSegment(`${openTag}${chunk}${closeTag}`)
-        if (segment) segments.push(segment)
+        if (segment) {
+          segments.push(segment)
+          return
+        }
+        if (index > 0 && index < innerChunks.length - 1) {
+          segments.push(makeBlankLineSegment(`${openTag}<br />${closeTag}`))
+        }
       })
     } else {
       const segment = makeHtmlSegment(blockHtml)

package/src/components/timeline-activity.tsx

@@ -392,9 +392,29 @@ function cleanGongText(value?: string | null): string {
   return decodeEmailDisplayText(value).trim()
 }
 
-function getTimelineGongCallDisplay(gongCall: TimelineGongCall) {
+/**
+ * True once the component has mounted on the client. Timestamps render in
+ * UTC for SSR + the hydration pass (server and client HTML must match — the
+ * server has no idea what timezone the viewer is in), then flip to the
+ * viewer's local timezone immediately after mount.
+ */
+function useHydrated(): boolean {
+  const [hydrated, setHydrated] = React.useState(false)
+  React.useEffect(() => {
+    setHydrated(true)
+  }, [])
+  return hydrated
+}
+
+type TimestampDisplayOptions = { utcTimestamps?: boolean }
+
+function timestampTimeZone(opts?: TimestampDisplayOptions): { timeZone?: string } {
+  return opts?.utcTimestamps ? { timeZone: "UTC" } : {}
+}
+
+function getTimelineGongCallDisplay(gongCall: TimelineGongCall, opts?: TimestampDisplayOptions) {
   const title = cleanGongText(gongCall.title)
-  const startTime = formatEmailTimestamp(gongCall.startTime) ?? ""
+  const startTime = formatEmailTimestamp(gongCall.startTime, timestampTimeZone(opts)) ?? ""
   const duration = formatCallDuration(gongCall.durationSeconds)
   const direction = cleanGongText(gongCall.direction)
   const outcome = cleanGongText(gongCall.outcome)
@@ -407,12 +427,12 @@ function getTimelineGongCallDisplay(gongCall: TimelineGongCall) {
   return { title, startTime, duration, direction, outcome, brief, keyPoints, nextSteps, url, snippet }
 }
 
-function getTimelineEmailDisplay(email: TimelineEmail) {
+function getTimelineEmailDisplay(email: TimelineEmail, opts?: TimestampDisplayOptions) {
   const sender = normalizeEmailSender({ name: email.from, email: email.fromEmail })
   const to = formatAddressList(email.to) || decodeEmailDisplayText(email.to ?? "")
   const cc = formatAddressList(email.cc) || decodeEmailDisplayText(email.cc ?? "")
   const bcc = formatAddressList(email.bcc) || decodeEmailDisplayText(email.bcc ?? "")
-  const date = formatEmailTimestamp(email.date) ?? decodeEmailDisplayText(email.date ?? "")
+  const date = formatEmailTimestamp(email.date, timestampTimeZone(opts)) ?? decodeEmailDisplayText(email.date ?? "")
   const subject = email.subject ? decodeEmailDisplayText(email.subject) : ""
   const bodyText = reactNodeToDisplayText(email.body)
   const snippet = emailBodySnippet({ bodyHtml: email.bodyHtml, body: bodyText }, 140)
@@ -430,7 +450,8 @@ function EmailMetadata({
   showAllRecipients: boolean
   setShowAllRecipients: React.Dispatch<React.SetStateAction<boolean>>
 }) {
-  const display = getTimelineEmailDisplay(email)
+  const hydrated = useHydrated()
+  const display = getTimelineEmailDisplay(email, { utcTimestamps: !hydrated })
   const hasExpandableRecipients = Boolean(display.cc || display.bcc)
 
   return (
@@ -847,7 +868,8 @@ function GongCallCard({
   classes: TimelineVariantClasses
 }) {
   const gongCall = event.gongCall as TimelineGongCall
-  const display = getTimelineGongCallDisplay(gongCall)
+  const hydrated = useHydrated()
+  const display = getTimelineGongCallDisplay(gongCall, { utcTimestamps: !hydrated })
 
   if (variant === "default") {
     return (