@workspace/chat — shared primitives for chat interfaces
Can you explain how the theme system works? I want to add a custom variant.
Here's a bold statement and some italic text.
Inline code: const x = 42
A code block:
function greet(name: string) {
return `Hello, ${name}!`
}
A list:
And a numbered list:
The architecture uses a two-layer approach. The :root block holds color values as CSS custom properties. The @theme inline block maps Tailwind tokens to those properties via var(). Theme classes override the :root values, and Tailwind reads the updated references automatically.
The theme system uses CSS custom properties with a two-layer architecture. Click 'simulate stream' to see the streaming cursor.
Here's a bold statement and some italic text.
Inline code: const x = 42
A code block:
function greet(name: string) {
return `Hello, ${name}!`
}
A list:
And a numbered list:
This is the first response variant. Use the chevrons to navigate between siblings.
First message
Response with markdown and inline code.
Second question about the system
A longer response that demonstrates how messages stack in the scroll container. The ChatList component auto-scrolls to bottom when new content is added, but respects user scroll-up to read history.
One more to fill the container
This message should be near the bottom. If the container is shorter than the content, you should see a scrollbar. The auto-scroll-to-bottom behavior activates when you're within 80px of the bottom edge.