DS
Published-package documentation wired to the real DS runtime so the same routes reveal how tenant and engine reshape identical component contracts.
Rottay / modernPublished package
Premium Docs

Design System Showroom

Primary
#FFFFFF
Rottay
Radius
14px
Surface shape
DensitynormalPlatform Flagship
NavigatorLibrary map
8 sections212 routes
Foundations first, then primitives, patterns, structures, and surfaces. Keep this rail legible enough to scan without hunting.
Foundations4 documented routes
4
Tokens
Themes
109
93
24
36
3
1
2
Runtime fingerprintToken readout from the active provider chain.
Live DS
Runtime
PlatformRottay
Rottay / ModernPlatform Flagship
Primary
#FFFFFFSecondary #A0A0A5
Radius
Compact runtime evidence across 3+ token signals.
Published DS package · Pattern Library · Rottay / modernShared route metadata for the active runtime, kept inline so the shell reads like a thin header band.
Palette
#FFFFFFRottay
Chrome
Modernrenderer posture
Radius
14pxsurface shape
Density
normalPlatform Flagship
Patterns/Communication/Assistant
Communication3 enginesRuntime-driven docs
Assistant

Assistant

AI chat assistant panel with message history
Communication patterns should show information freshness, authorship, and actionability in the same frame.
How to read this page
Use the showroom switchers in the sidebar to change engine and tenant. The comparison grid below keeps the active tenant and swaps engines so we can inspect the pattern instead of page-local editorial chrome.
Live preview

Compare the same pattern across engines

Sidebar tenant drives thisAssistant
This comparison is the documentation surface. If the pattern only reads well inside local chrome, we should fix the pattern or its preview runtime before teams style around it.

Preview heuristics

3 items
Compare density, action placement, and state readability before aesthetic flavor.
Judge the pattern itself, not any showroom-local framing around it.
If the pattern only works with extra chrome, the pattern or preview runtime still needs work.

Structure pairing

3 items
Consumption

Import and usage

Treat the pattern as a reusable task contract. Keep route-specific business rules outside and use these snippets as the fast-reading baseline.
Consumption contract

Usage notes

3 items
Import from the published package rather than building route-local wrappers first.
Pass data, config, and callbacks while keeping product semantics in the consuming app.
Escalate to a surface only once the whole screen contract is stable, not just the task module.

Surface fit

3 items
ChatSurface
API surface

Props

6 rows
Assistant propsProp contracts stay readable across dark-first and light-first tenants.
6 props1 required5 optional
Fast readStart with required props, then scan defaults before dropping to per-row details.
Contract postureThis reference stays intentionally concise so the primitive contract remains scannable.
items
Required
Optional
Optional
Optional
Optional
Optional
Related patterns

Continue within Communication

Browse all
Activity Log3 engines
Chronological feed of user and system activity
Comment Thread3 engines
Threaded comment discussion with replies
Live Feed3 engines
Real-time event feed with streaming updates
Notification inbox with read/unread and categories
Engines
Icons
Primitives93 documented routes
Display
Inputs
Feedback
Layout
Navigation
Overlay
PatternsCurrent section
49
Data
Forms
Visualization
Communication
Structures24 documented routes
Headers
Workspace
Shell
Record
Dashboard
Feedback
Surfaces36 documented routes
Admin
Data
Experience
Forms
Operations
Workspace
Verticals3 documented routes
Platform
Bit Hire
Evnto
Playground1 documented routes
Playground
Developers2 documented routes
Developers
14pxxl 18px
Density
normalBorder-light cards
Accent
Badge
roundedtop bar · solid dividers
PatternsCommunicationAssistant

Assistant

Active profilePlatform Flagship
Runtime postureRottay / modern
Patterns reference for Assistant.
Runtime controls
TenantRottay
EngineModern
TierPatternReusable workflow or composition contract.
GroupCommunicationStart with message hierarchy.
Best paired withDetailHeaderUsually lands inside ChatSurface.
DetailHeader
WorkbenchHeader
PageShell
Engine comparisonEngine comparisonThe active tenant stays real while the same component is rendered by every engine. The wrapper stays intentionally quiet so engine differences come from the DS itself.
Rottay3 live enginesSame tenant, isolated engine
ClassicAnt Design
Live provider

What to evaluate

3 items
message hierarchy
presence cues
response affordances

Structure pairing

3 items
DetailHeader
WorkbenchHeader
PageShell

Surface fit

3 items
ChatSurface
ActivitySurface
NotificationSurface
ActivitySurface
NotificationSurface
ImportPublished package entrypoint, ready to copy.
tsx
1 line
Consumption
Runtime-aware snippet
import { Assistant } from '@rottay/design-system';
UsagePaste-ready example that shows the base contract first.
tsx
5 lines
Consumption
Runtime-aware snippet
<Assistant
  data={data}
  config={config}
  onAction={handleAction}
/>
Name
Type
Default
Required
Description
Message[] | ActivityEvent[]
none
Messages, notifications, or activity items rendered by the pattern.
unreadCount
number
none
Unread indicator or freshness summary shown near the pattern.
onReply
(payload) => void
none
Response handler for patterns that allow direct inline action.
emptyState
ReactNode
none
Fallback content when no communication items are available.
className
string
none
Additional class names for product-specific composition and layout hooks.
style
CSSProperties
none
Inline overrides for one-off layout or diagnostic preview adjustments.
itemsRequired
Message[] | ActivityEvent[]none
Messages, notifications, or activity items rendered by the pattern.
unreadCountOptional
numbernone
Unread indicator or freshness summary shown near the pattern.
onReplyOptional
(payload) => voidnone
Response handler for patterns that allow direct inline action.
emptyStateOptional
ReactNodenone
Fallback content when no communication items are available.
classNameOptional
stringnone
Additional class names for product-specific composition and layout hooks.
styleOptional
CSSPropertiesnone
Inline overrides for one-off layout or diagnostic preview adjustments.
Notification Center3 engines
Activity Log
Assistant
Comment Thread
Live Feed
Notification Center
Presence
Feedback
Workflow
Navigation
Commerce
Customization
Identity
Shell
Communication patternAssistant
Check freshness, authorship, and whether the information hierarchy stays legible across runtimes.
Assistant kit: streaming, receipts, diff/confirm, and statusstreaming
Assistant is preparing the rollout brief
Idle
Thinking
Streaming
Acting
Error
D
DanielUser
sent
Summarize the current rollout state and highlight blocked approvals.
2 min ago
AI
streaming
just now
Scanning approval queues across tenants...
Input
scope=all-tenants
ModernDaisyUI
Live provider
Communication patternAssistant
Check freshness, authorship, and whether the information hierarchy stays legible across runtimes.
Assistant kit: streaming, receipts, diff/confirm, and statusstreaming
D
sent
AI
streaming
Scanning approval queues across tenants...
Input
scope=all-tenants
RusticVanilla CSS
Live provider
Communication patternAssistant
Check freshness, authorship, and whether the information hierarchy stays legible across runtimes.
Assistant kit: streaming, receipts, diff/confirm, and statusstreaming
D
2 min ago
AI
just now
Scanning approval queues across tenants...
Input
scope=all-tenants
ImportTSX
Quick copy
UsageTSX
Quick copy
Rottay AssistantAssistant
Approvals are clear for Finance and Ops. Legal still has 2 contracts in review and one vendor exception is awaiting a decision.|
approval_auditcomplete
Checked current approval queues across tenants.0.8s
2 pending legal approvals, 1 vendor exception.
Streaming text (live)
Drafting the rollout brief: approvals cleared for Finance and Ops, legal contracts still pending, and one vendor exception to decide.|
scan_approvalsrunning
scan_approvalscomplete
Scanned approval queues across tenants.0.9s
Target channel: cmd+k runtime bulletin
Proposed rollout change
Before
After
Stage
Draft
→
Scheduled
Notify channel
→
cmd+k runtime bulletin
Legal hold
On
→
Publish rollout update
Applies the proposed change and notifies stakeholders in the cmd+k runtime bulletin.
Assistant is preparing the rollout brief
Idle
Thinking
Streaming
Acting
Error
DanielUser
Summarize the current rollout state and highlight blocked approvals.
2 min ago
Rottay AssistantAssistant
Approvals are clear for Finance and Ops. Legal still has 2 contracts in review and one vendor exception is awaiting a decision.|
approval_auditcomplete
Checked current approval queues across tenants.0.8s
2 pending legal approvals, 1 vendor exception.
just now
Streaming text (live)
Drafting the rollout brief: approvals cleared for Finance and Ops, legal contracts still pending, and one vendor exception to decide.|
scan_approvalsrunning
scan_approvalscomplete
Scanned approval queues across tenants.0.9s
Target channel: cmd+k runtime bulletin
Proposed rollout change
Before
After
Stage
Draft
→
Scheduled
Notify channel
→
cmd+k runtime bulletin
Legal hold
On
→
Publish rollout update
Applies the proposed change and notifies stakeholders in the cmd+k runtime bulletin.
Assistant is preparing the rollout brief
Idle
Thinking
Streaming
Acting
Error
DanielUser
sent
Summarize the current rollout state and highlight blocked approvals.
Rottay AssistantAssistant
streaming
Approvals are clear for Finance and Ops. Legal still has 2 contracts in review and one vendor exception is awaiting a decision.|
approval_auditcomplete
Checked current approval queues across tenants.0.8s
2 pending legal approvals, 1 vendor exception.
Streaming text (live)
Drafting the rollout brief: approvals cleared for Finance and Ops, legal contracts still pending, and one vendor exception to decide.|
scan_approvalsrunning
scan_approvalscomplete
Scanned approval queues across tenants.0.9s
Target channel: cmd+k runtime bulletin
Proposed rollout change
Before
After
Stage
Draft
→
Scheduled
Notify channel
→
cmd+k runtime bulletin
Legal hold
On
→
Publish rollout update
Applies the proposed change and notifies stakeholders in the cmd+k runtime bulletin.