Chat Components

@workspace/chat — shared primitives for chat interfaces

ChatMessage — user

import { ChatMessage } from "@workspace/chat/components/chat-message"

you

14:22

Can you explain how the theme system works? I want to add a custom variant.

ChatMessage — assistant with markdown

qwen3.5-397b

14:23

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:

First item

Second item with emphasis

Third item

And a numbered list:

Step one

Step two

Step three

ChatMessage — with thinking block

assistant

14:24

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.

ChatMessage — streaming state

assistant

now

The theme system uses CSS custom properties with a two-layer architecture. Click 'simulate stream' to see the streaming cursor.

ChatThinking — standalone

import { ChatThinking } from "@workspace/chat/components/chat-thinking"

ChatMarkdown — standalone

import { ChatMarkdown } from "@workspace/chat/components/chat-markdown"

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:

First item

Second item with emphasis

Third item

And a numbered list:

Step one

Step two

Step three

ChatInput — compose bar

import { ChatInput } from "@workspace/chat/components/chat-input"

ChatMessageActions + ChatSwipeControls — interactive

import { ChatMessageActions, ChatSwipeControls } from "@workspace/chat/components/chat-actions"

assistant

1/3

14:30

This is the first response variant. Use the chevrons to navigate between siblings.

SwipeControls

3/5

Actions (hover →)

ChatList — auto-scrolling container

import { ChatList, ChatSeparator } from "@workspace/chat/components/chat-list"

you