AI Layout

Chat Layout

A full-page chat shell that composes a persistent desktop sidebar, a sticky header bar, a scrollable main content area, and an optional footer slot. On mobile the sidebar collapses into a Sheet drawer controlled by the built-in menu toggle.

How to use React hooks

Chat messages appear here

Type a message…

import { ChatLayout } from "@aetherstack/blocks"

Installation

terminal

npx aether-ui add chat-layout

Import

import.tsx

import { ChatLayout } from "@aetherstack/blocks"

Usage

chat-layout.tsx

"use client"

import * as React from "react"
import { ChatLayout } from "@aetherstack/blocks"
import { ChatSidebar } from "@aetherstack/blocks"
import { PromptInput } from "@aetherstack/ui"

export default function ChatPage() {
  const [sidebarOpen, setSidebarOpen] = React.useState(false)

  return (
    <ChatLayout
      sidebar={
        <ChatSidebar
          conversations={[
            { id: "1", title: "React hooks deep-dive", active: true },
            { id: "2", title: "TypeScript generics" },
          ]}
          onNewChat={() => {}}
          onConversationClick={() => {}}
        />
      }
      header={<span className="font-medium">React hooks deep-dive</span>}
      footer={
        <PromptInput
          value=""
          onChange={() => {}}
          onSubmit={() => {}}
          placeholder="Type a message…"
        />
      }
      sidebarOpen={sidebarOpen}
      onSidebarToggle={setSidebarOpen}
    >
      {/* render messages here */}
    </ChatLayout>
  )
}

Props

Prop	Type	Default	Description
children*	ReactNode	—	Main scrollable content area — typically the message list.
sidebar	ReactNode	—	Sidebar content. Hidden on mobile; exposed via a Sheet when sidebarOpen is true.
header	ReactNode	—	Content rendered inside the sticky 56 px header bar.
footer	ReactNode	—	Content rendered in a fixed footer panel — typically a prompt input.
sidebarOpen	boolean	false	Controls the mobile Sheet sidebar open state.
onSidebarToggle	(open: boolean) => void	—	Called when the mobile menu button or Sheet overlay is interacted with.
className	string	—	Additional classes on the root element.

* Required

Accessibility

→Sidebar is wrapped in an <aside> landmark on desktop.
→Main content area is wrapped in a <main> element.
→Mobile menu toggle button includes aria-label='Toggle sidebar'.
→The Sheet sidebar uses a visually-hidden SheetTitle for screen reader context.