Layout shell for a chat composer. Arranges named slots (drawer, header, input, footer, send) with page-radius container, elevation, a keyboard-only editor focus ring, and concentric inner radius for child elements.
Preview loads on approachPreview loads on approach
Exact source · chat-composer-showcase
// Copyright (c) Meta Platforms, Inc. and affiliates.
'use client';
import {ChatComposer} from '@astryxdesign/core/Chat';
import {Stack} from '@astryxdesign/core/Layout';
export default function ChatComposerShowcase() {
return (
<Stack direction="vertical" width={450} maxWidth="100%">
<ChatComposer onSubmit={() => {}} placeholder="Type a message…" />
</Stack>
);
}
Usage
ChatComposer is the message-entry shell for a chat surface. It coordinates a controlled or uncontrolled draft, provides a default token-capable input and send/stop action, and arranges optional drawer, header, footer, and status content. Custom inputs and send controls can join the same value, submission, disabled, stop, and focus contract through useChatComposerContext().
Typed props
Prop
Type and behavior
onSubmit
(value: string) => void · required
Called when the user submits a message.
onStop
() => void
Called when the user requests to stop generation.
isStopShown
boolean · default false
Whether the stop button is shown instead of the send button.
Resting elevation of the composer body. low (the default) keeps today's raised look: low at rest, bumping to med on hover / focus. none flattens it and draws a border. Keyboard focus in the editor adds the shared focus ring in either presentation; pointer focus does not add that ring.
drawer
ReactNode
Slot: collapsible drawer above the input: attachments, context chips, etc. Use ChatComposerDrawer.
Slot: custom input element. Replaces the default input. Use ChatComposerInput for trigger menus/tokens, or wire any input (plain textarea, rich editor) to the composition contract via useChatComposerContext(): read value/onChange/onSubmit/canSend and register a focus control on inputControlRef so body-click-to-focus works.
