Chat Layout

A layout pattern for messaging apps, AI chat interfaces, and support systems.

Preview

Implementation

Installation

npx shadcn@latest add cs-coe-frontend/chat-layout

Usage

import {
  ChatLayout,
  ChatLayoutSidebar,
  ChatLayoutMain,
  ChatLayoutHeader,
  ChatLayoutMessages,
  ChatLayoutInput,
} from '@/components/layouts/chat-layout';

<ChatLayout>
  <ChatLayoutSidebar>
    {/* Conversation list */}
  </ChatLayoutSidebar>
  <ChatLayoutMain>
    <ChatLayoutHeader>
      {/* Chat header */}
    </ChatLayoutHeader>
    <ChatLayoutMessages>
      {/* Message list */}
    </ChatLayoutMessages>
    <ChatLayoutInput>
      {/* Input area */}
    </ChatLayoutInput>
  </ChatLayoutMain>
</ChatLayout>

Use Cases

• AI chat interfaces (ChatGPT-style)
• Customer support systems
• Team messaging applications
• Collaborative workspaces

Components

ChatLayoutSidebar - Conversation list
ChatLayoutMain - Main chat area
ChatLayoutHeader - Chat header with title
ChatLayoutMessages - Scrollable message area
ChatLayoutInput - Message input area
ChatLayoutPanel - Optional side panel