Initial Release — help-frontend

Dr. Frontend

Chat Components

The shadcn chat primitives — Message,Bubble,Attachment,Marker, andMessageScroller — ported into the @cs-coe registry and themed with Genentech tokens. See the shadcn release notesfor the original components. For a working conversation built from these pieces, see theChat Assistant demo.

Bubble

The message surface. Seven variants cover primary replies, quiet system text, tinted brand emphasis, and destructive states.

variant="default"
The mutation sits in a conserved binding pocket.
variant="secondary"
The mutation sits in a conserved binding pocket.
variant="muted"
The mutation sits in a conserved binding pocket.
variant="tinted"
The mutation sits in a conserved binding pocket.
variant="outline"
The mutation sits in a conserved binding pocket.
variant="ghost"
The mutation sits in a conserved binding pocket.
variant="destructive"
The mutation sits in a conserved binding pocket.
align="end"
Aligned to the end (outgoing).
BubbleReactions
Here is the summary you asked for.
👍 3🎯 1

Message

Lays out a conversation row: avatar, header, content, and footer, with start/end alignment.

Assistant · 10:24
I found three candidate targets in the pathway.
Generated from 12 sources
JD
You · 10:25
Can you rank them by confidence?

Attachment

Files and images with media, metadata, upload state, and actions. Shown across sizes, orientations, and states.

orientation="horizontal"
assay-results.pdf2.4 MB · PDF
state (uploading / processing / error / done)
sequences.fastaUploading…
structure.pdbProcessing…
too-large.csvUpload failed
report.docxReady
orientation="vertical" (image card)
gel-1.pngPNG
gel-2.pngPNG
gel-3.pngPNG
size="sm" / size="xs"
notes-sm.md12 KB
notes-xs.md

Marker

Status updates, system notes, labeled separators, and bordered rows for streaming state, tool activity, and date breaks.

variant="default"
Assistant is thinking…
variant="separator" (date break)
Today
variant="border"
Ran tool: search_pubmed (1.2s)
shimmer (live status)

Generating response…

MessageScroller

Scroll container that anchors to the latest turn. Scroll up to reveal the jump-to-end control; the edges fade via scroll-fade.

Result 1: candidate looks promising.
JD
Tell me more about this one.
Result 2: candidate looks promising.
JD
Tell me more about this one.
Result 3: candidate looks promising.
JD
Tell me more about this one.
Result 4: candidate looks promising.
JD
Tell me more about this one.
Result 5: candidate looks promising.
JD
Tell me more about this one.
Result 6: candidate looks promising.
JD
Tell me more about this one.
Result 7: candidate looks promising.
JD
Tell me more about this one.

Components Used

@cs-coe/message
Conversation rows
@cs-coe/bubble
Message surface + reactions
@cs-coe/attachment
Files & images
@cs-coe/marker
Status & separators
@cs-coe/message-scroller
Anchored scroll container

CSS Utilities

The components rely on two scroll-aware CSS utilities that ship alongside them:scroll-fade adds edge fades to scroll containers, and shimmer animates live status text like "Generating response…".

Both are vendored in src/styles/chat-utilities.cssand imported from the app's global stylesheet.