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

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

@@ -149,4 +149,59 @@ describe("TimelineActivity", () => {
       expect(TONE_CLASSES[tone].icon).toBeTruthy()
     }
   })
+
+  // --- Email body: opt-in HTML render mode ---
+
+  it("sanitizes formatted HTML when email.bodyHtml is provided", () => {
+    const event = minimal({
+      isInteractive: true,
+      defaultExpanded: true,
+      email: {
+        from: "Priya Raman",
+        to: "Dana Okafor",
+        subject: "Re: hi",
+        body: "plain fallback",
+        bodyHtml:
+          '<p onclick="alert(1)">Hello <a href="javascript:alert(1)">bad</a><script>alert(1)</script><img src="https://example.com/pixel.png" onerror="alert(1)"></p>',
+      },
+    })
+    const { container } = render(<TimelineActivity events={[event]} />)
+    const html = container.querySelector('[data-slot="timeline-email-html"]')!
+    expect(html.innerHTML).not.toContain("script")
+    expect(html.innerHTML).not.toContain("onclick")
+    expect(html.innerHTML).not.toContain("onerror")
+    expect(html.innerHTML).not.toContain("javascript:")
+    expect(html.querySelector("img")?.getAttribute("src")).toBe("https://example.com/pixel.png")
+    expect(html.querySelector("a")?.getAttribute("href")).toBeNull()
+  })
+
+  it("renders formatted HTML when email.bodyHtml is provided", () => {
+    const event = minimal({
+      isInteractive: true,
+      defaultExpanded: true,
+      email: {
+        from: "Priya Raman",
+        to: "Dana Okafor",
+        subject: "Re: hi",
+        body: "plain fallback",
+        bodyHtml: '<p>Hello <a href="https://example.com">link</a></p>',
+      },
+    })
+    const { container } = render(<TimelineActivity events={[event]} />)
+    const html = container.querySelector('[data-slot="timeline-email-html"]')
+    expect(html).not.toBeNull()
+    // Renders the actual anchor element (not escaped text)
+    expect(html!.querySelector("a")?.getAttribute("href")).toBe("https://example.com")
+  })
+
+  it("falls back to the plain-text body when bodyHtml is absent", () => {
+    const event = minimal({
+      isInteractive: true,
+      defaultExpanded: true,
+      email: { from: "Priya", to: "Dana", subject: "Re: hi", body: "just text" },
+    })
+    const { container } = render(<TimelineActivity events={[event]} />)
+    expect(container.querySelector('[data-slot="timeline-email-html"]')).toBeNull()
+    expect(screen.getByText("just text")).toBeDefined()
+  })
 })

package/src/components/case-panel-activity-timeline.tsx

@@ -62,6 +62,8 @@ export type CasePanelActivityPayload =
       dueLabel: string
       status?: "upcoming" | "due" | "overdue" | "met"
       description?: string
+      /** 0..1 elapsed toward the deadline; renders a thin progress bar. */
+      progress?: number
     }
   | {
       kind: "operatorNote"
@@ -373,6 +375,24 @@ function renderPayloadContent(
             ) : null}
           </div>
           {payload.description ? <p className="text-xs leading-relaxed text-muted-foreground">{payload.description}</p> : null}
+          {typeof payload.progress === "number" ? (
+            <div
+              data-slot="deadline-progress"
+              role="progressbar"
+              aria-valuenow={Math.round(Math.min(1, Math.max(0, payload.progress)) * 100)}
+              aria-valuemin={0}
+              aria-valuemax={100}
+              className="bg-muted h-1.5 w-full overflow-hidden rounded-full"
+            >
+              <div
+                className={cn(
+                  "h-full rounded-full",
+                  payload.status === "overdue" ? "bg-red-500" : payload.status === "due" ? "bg-amber-500" : "bg-foreground/70"
+                )}
+                style={{ width: `${Math.min(1, Math.max(0, payload.progress)) * 100}%` }}
+              />
+            </div>
+          ) : null}
         </div>
       )
     case "operatorNote":

package/src/components/comment-composer.tsx

@@ -0,0 +1,119 @@
+"use client"
+
+/**
+ * comment-composer.tsx — an internal-note composer for the case activity
+ * timeline. Posting a comment prepends an `operatorNote` event to the log
+ * (wired by the consumer). Collapses to a single line; expands on focus or
+ * when it has text. ⌘↵ / Ctrl↵ posts.
+ *
+ * Presentational: `onPost` does the work (the consumer persists the note and
+ * adds it to the timeline). Reuses Avatar / Button / Textarea primitives.
+ */
+
+import * as React from "react"
+import { Lock } from "lucide-react"
+
+import { cn } from "../lib/utils"
+import { getInitials } from "../lib/user-display"
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar"
+import { Button } from "./button"
+import { Textarea } from "./textarea"
+
+export interface CommentComposerProps {
+  /** Called with the trimmed note text when the operator posts. */
+  onPost: (text: string) => void
+  /** Current operator (for the avatar). */
+  author?: { name?: string; email?: string; avatarUrl?: string | null }
+  placeholder?: string
+  /** Hint shown in the footer; defaults to the internal-note reassurance. */
+  hint?: string
+  className?: string
+}
+
+function CommentComposer({
+  onPost,
+  author,
+  placeholder = "Add a comment or internal note…",
+  hint = "Internal note: only your team sees this",
+  className,
+}: CommentComposerProps) {
+  const [text, setText] = React.useState("")
+  const [focused, setFocused] = React.useState(false)
+  const open = focused || text.length > 0
+  const canPost = text.trim().length > 0
+
+  const post = () => {
+    const value = text.trim()
+    if (!value) return
+    onPost(value)
+    setText("")
+    setFocused(false)
+  }
+
+  return (
+    <div
+      data-slot="comment-composer"
+      data-open={open ? "true" : undefined}
+      className={cn(
+        "border-border bg-background flex items-start gap-2 rounded-lg border p-2 transition-colors",
+        open && "ring-ring/30 ring-2",
+        className
+      )}
+    >
+      <Avatar size="sm" className="mt-0.5">
+        {author?.avatarUrl ? <AvatarImage src={author.avatarUrl} alt={author.name ?? "You"} /> : null}
+        <AvatarFallback className="bg-muted text-muted-foreground text-[10px] font-medium uppercase">
+          {getInitials({ name: author?.name, email: author?.email })}
+        </AvatarFallback>
+      </Avatar>
+
+      <div className="min-w-0 flex-1">
+        <Textarea
+          data-slot="comment-composer-input"
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          onFocus={() => setFocused(true)}
+          placeholder={placeholder}
+          rows={open ? 3 : 1}
+          className={cn(
+            "resize-none border-0 bg-transparent p-1 text-sm shadow-none focus-visible:ring-0",
+            !open && "min-h-0"
+          )}
+          onKeyDown={(e) => {
+            if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+              e.preventDefault()
+              post()
+            }
+          }}
+        />
+
+        {open ? (
+          <div className="mt-1 flex items-center justify-between gap-2">
+            <span className="text-muted-foreground inline-flex items-center gap-1 text-[11px]">
+              <Lock size={12} /> {hint}
+            </span>
+            <span className="flex items-center gap-2">
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  setText("")
+                  setFocused(false)
+                }}
+              >
+                Cancel
+              </Button>
+              <Button type="button" size="sm" disabled={!canPost} onClick={post}>
+                Comment
+                <kbd className="bg-primary-foreground/15 ml-1 rounded px-1 text-[10px]">⌘↵</kbd>
+              </Button>
+            </span>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+export { CommentComposer }