Yogi Prasetya - Software Developer | React, Next.js & MERN Stack

Interactive Playground

Explore the live three-column layout: switch conversations in the left sidebar, send messages in the active thread, and inspect channel or contact details in the profile sheet.

Installation

Add the Chat Layout block to your Next.js project via the shadcn CLI or manual file installation.

pnpm dlx shadcn@latest add https://yogiprasetya.com/r/chat.json

Usage

Import ChatLayout and mount it inside a height-constrained container.

app/chat/page.tsx

import { ChatLayout } from '@/components/chat/chat-layout';
import type { Message } from '@/components/chat/chat-types';

export function ChatPage() {
  const [messages, setMessages] = React.useState<Message[]>([]);

  const handleSend = (text: string) => {
    // Send message callback
  };

  return (
    <div className="h-screen w-full">
      <ChatLayout
        messages={messages}
        chatType="direct"
        onSend={handleSend}
      />
    </div>
  );
}

Composition

Internal structural decomposition and modular sub-component hierarchy.

ChatLayout
- ChatSidebar
  - ChatConversationContact
- ChatConversationHeader
- ChatConversationArea
  - ChatMessageList
    - ChatMessageStatus
- ChatComposer
- ChatProfile

ChatLayoutProps

Complete API reference for properties accepted by the ChatLayout component.

Prop	Type	Default	Description
`messages`required	`Message[]`	`[]`	Array of thread messages to display in the conversation list.
`onSend`required	`(text: string) => void`	—	Callback triggered when user submits a message via composer.
`activeChatType`	`'direct' \| 'group'`	`'direct'`	Determines whether the chat behaves as 1-on-1 or multi-user channel.
`hasMore`	`boolean`	`false`	Whether more historical messages are available to load from the server.
`onLoadMore`	`() => void`	—	Callback triggered when user scrolls to top of message list to load older messages.
`onRetry`	`(clientId: ClientId) => void`	—	Callback triggered when user clicks retry on an error-state message.
`sidebar`	`ChatLayoutProps["sidebar"]`	—	Configuration for left conversation navigation list and active conversation selection.
`profile`	`ChatLayoutProps["profile"]`	—	Configuration for right contact sheet or group information panel.
`presence`	`Presence`	—	Typing indicators and presence status for the active conversation.
`contact`	`CenterContactHeader`	—	Header metadata for the central conversation panel.
`centerAttachments`	`AttachmentItem[]`	—	Static attachments forwarded to center column for preview rendering.
`defaultProfileOpen`	`boolean`	`false`	Initial open state for the collapsible profile column.
`className`	`string`	—	Optional CSS class name for outer layout container.