Astryx Chat Layout

Component

About

An Astryx layout shell for chat interfaces with message flow, a frosted composer dock, auto-scroll, and responsive keyboard handling.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Astryx Chat Layout to your project and fits it to your theme.

Code

How Astryx Chat Layout is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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

'use client';

import {
  ChatLayout,
  ChatMessageList,
  ChatMessage,
  ChatMessageBubble,
  ChatComposer,
  ChatTokenizedText,
} from '@/components/ui/astryx-chat-layout';
import {VStack} from '@astryxdesign/core/Stack';

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

export default function ChatLayoutShowcase() {
  return (
    <div
      data-astryx-theme="neutral"
      data-theme="light"
      style={{colorScheme: 'light', display: 'contents'}}>
      <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>
    </div>
  );
}