Conversation Layout
Full-page layout pattern for chat and agent interfaces.
A conversation layout composes three zones into a full-height panel: a context header, a scrollable message thread, and a sticky input bar. Below is a self-contained 440px mockup.
AI
AssistantAI
Hello! I'm here to help. What would you like to work on today?
U
Can you help me analyze our Q3 sales data?
AI
Of course! Please share the data or describe what you're working with and I'll get started.
Message...
Zone breakdown
Header — shrink-0, sits above the thread. Contains agent identity, status indicator, or action buttons. Use border-b to visually separate.
Thread — flex-1 overflow-y-auto, grows to fill available space. Render ChatMessage components in a flex flex-col gap-4 container. Add bg-zinc-50/50 for a subtle inset feel.
Input — shrink-0 border-t, pinned to the bottom. Wraps ChatInput with comfortable padding.
Code structure
import { ChatMessage } from '@clarxai/ui'
import { ChatInput } from '@clarxai/ui'
export function ConversationPage() {
return (
<div className="flex h-screen flex-col">
{/* Header */}
<header className="shrink-0 border-b px-4 py-3 flex items-center gap-2 bg-white dark:bg-zinc-900">
<span className="text-sm font-medium">Assistant</span>
</header>
{/* Thread */}
<main
role="log"
aria-live="polite"
className="flex-1 overflow-y-auto px-4 py-4 flex flex-col gap-4 bg-zinc-50/50 dark:bg-zinc-950/50"
>
<ChatMessage role="assistant" content="How can I help?" />
</main>
{/* Input */}
<footer className="shrink-0 border-t px-4 py-3 bg-white dark:bg-zinc-900">
<ChatInput placeholder="Ask anything..." onSubmit={() => {}} />
</footer>
</div>
)
}Accessibility notes
- Add
role="log"andaria-live="polite"to the thread region so screen readers announce new messages. - Give
ChatInputanaria-labelor ensure a visible label is associated with the textarea. - New messages appended at the bottom will be announced automatically by
aria-live.