Chat Message

Usage

Can you explain how compound components help AI chat UIs stay SDK-agnostic?

Compound components let you compose message layout explicitly while keeping state in your app layer.

"use client";

import { ChatMessage } from "@thenamespace/uikit";

import { Icon } from "@/demos/icon";

Use ChatMessage to compose assistant and user turns with avatars, bubbles, media, markdown, actions, and attachments.

With Markdown

Show me markdown inside assistant messages.

Here is a concise answer with markdown support:

export type ChatStatus = "ready" | "streaming";

The UI stays presentation-only — your SDK owns the message array.

"use client";

import { ChatMessage, Markdown } from "@thenamespace/uikit";

const Wrapper = ({ children }: { children: React.ReactNode }) => (

Render assistant responses with rich markdown content.

Loading

What is the weather in San Francisco?

Thinking...

"use client";

import { ChatLoader, ChatMessage, TextShimmer } from "@thenamespace/uikit";

const Wrapper = ({ children }: { children: React.ReactNode }) => (

Use the loading demo for pending assistant turns.

Anatomy

import {ChatMessage, Markdown} from "@thenamespace/uikit";

<ChatMessage.Assistant>
  <ChatMessage.Avatar alt="Assistant" fallback="AI" show />
  <ChatMessage.Body>
    <ChatMessage.Content>
      <Markdown>{response}</Markdown>
    </ChatMessage.Content>
  </ChatMessage.Body>
</ChatMessage.Assistant>

<ChatMessage.User>
  <ChatMessage.Bubble>
    <ChatMessage.Content>Hello</ChatMessage.Content>
  </ChatMessage.Bubble>
</ChatMessage.User>

CSS Classes

.chat-message--assistant - Assistant message row
.chat-message--user - User message wrapper
.chat-message__avatar - Avatar slot
.chat-message__body - Assistant body column
.chat-message__bubble - User bubble
.chat-message__content - Message content
.chat-message__actions - Action row

API Reference

ChatMessage.Assistant

Assistant message root. Supports native div props.

ChatMessage.User

User message root. Supports native div props.

ChatMessage.Avatar

Avatar slot for assistant messages. Extends Namespace UIKit Avatar props.

ChatMessage.Body

Assistant content column.

ChatMessage.Bubble

User message bubble.

ChatMessage.Content

Message text/content slot.

ChatMessage.Actions

Container for message actions.