Chat·component·@astryxdesign/core

Chat Layout

Layout shell for full chat interfaces. Messages flow in normal page flow, composer is fixed to the bottom with a frosted glass dock. Set density (compact/balanced/spacious) to control spacing, message max-width, and blur layer sizing. Includes built-in auto-scroll, a "New messages" scroll-to-bottom button, and a frosted glass blur layer behind the composer. By default the layout root is the scroll container; pass scrollRef to delegate scrolling to a parent element or the document body.

Open in Playground @astryxdesign/core/Chat

Showcases and examples

2 documented examples

Chat Layout

ChatLayout API entry

Open Playground ↗

Preview loads on approachPreview loads on approach

Exact source · chat-layout-showcase

// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

import {
  ChatLayout,
  ChatMessageList,
  ChatMessage,
  ChatMessageBubble,
  ChatComposer,
  ChatTokenizedText,
} from '@astryxdesign/core/Chat';
import {VStack} from '@astryxdesign/core/Stack';

const TOKENS = [{value: '/review', label: '/review', variant: 'blue' as const}];

export default function ChatLayoutShowcase() {
  return (
    <VStack width={450}>
      <ChatLayout
        composer={
          <ChatComposer onSubmit={() => {}} placeholder="Ask something..." />
        }>
        <ChatMessageList>
          <ChatMessage sender="user">
            <ChatMessageBubble>
              <ChatTokenizedText tokens={TOKENS}>
                /review the changes in this file
              </ChatTokenizedText>
            </ChatMessageBubble>
          </ChatMessage>
          <ChatMessage sender="assistant">
            <ChatMessageBubble variant="ghost">
              Reading the file now...
            </ChatMessageBubble>
          </ChatMessage>
        </ChatMessageList>
      </ChatLayout>
    </VStack>
  );
}

Usage

ChatLayout is the layout shell for full-page chat interfaces. It renders messages in normal page flow and docks the composer to the bottom with a frosted glass blur layer. Set the density prop to control spacing; it defaults to balanced. Use it to wrap ChatMessageList and ChatComposer for a complete chat experience with built-in auto-scroll and a scroll-to-bottom button.

Pass ChatMessageList as children and ChatComposer as the composer prop for a complete chat interface.
Provide an emptyState so new conversations show a prompt instead of a blank screen.
Use scrollRef when the chat is embedded in a page where a parent element handles scrolling.
Don't apply a fixed height on the layout; let it fill its container with flex: 1.
Don't render multiple ChatLayout instances in the same scroll container; each expects to own its scroll context.

Typed props

Prop	Type and behavior
`children`	`ReactNode` · required Message content: typically ChatMessageList. Flows naturally in the page and scrolls with the container.
`composer`	`ReactNode` · required Composer element: typically ChatComposer. Fixed to the bottom with a frosted glass dock. Slot: TextInput
`emptyState`	`ReactNode` Content shown when children is empty. Centered vertically in the message area. Slot: EmptyState
`scrollButton`	`ReactNode \| null` Scroll-to-bottom button rendered above the composer. Defaults to ChatLayoutScrollButton with auto-scroll integration. Pass null to hide.
`scrollRef`	`React.RefObject<HTMLElement \| null>` External scroll container ref. When provided, auto-scroll and scroll-to-bottom target this element instead of the layout root. Use when the chat is embedded in a page where a parent element or the document body scrolls.
`density`	`'compact' \| 'balanced' \| 'spacious'` · default 'balanced' Visual density: controls dock padding, message-area max-width and inline padding, and the height of the frosted glass blur layer.

Anatomy

Message area · required

Scrollable region for messages. Renders children (typically ChatMessageList) in a flex column that pushes content to the bottom when the list is short.

Frosted glass dock · required

Sticky or fixed container at the bottom with a backdrop-blur layer. Houses the scroll button and composer.

Scroll-to-bottom button · optional

Appears when the user scrolls up or new messages arrive. Defaults to ChatLayoutScrollButton; pass null to hide or a custom element to override.

Composer · required

The input area for sending messages, typically ChatComposer. Docked at the bottom inside the frosted glass layer.

Empty state · optional

Centered placeholder shown when no messages exist. Use EmptyState for a consistent look.