Docs
Realtime Chat

Realtime Chat

Real-time chat component for collaborative applications

Installation

Open in

Folder structure

  • components
  • hooks
  • lib
    • supabase
1import { cn } from '@/lib/utils'
2import type { ChatMessage } from '@/hooks/use-realtime-chat'
3
4interface ChatMessageItemProps {
5  message: ChatMessage
6  isOwnMessage: boolean
7  showHeader: boolean
8}
9
10export const ChatMessageItem = ({ message, isOwnMessage, showHeader }: ChatMessageItemProps) => {
11  return (
12    <div className={`flex mt-2 ${isOwnMessage ? 'justify-end' : 'justify-start'}`}>
13      <div
14        className={cn('max-w-[75%] w-fit flex flex-col gap-1', {
15          'items-end': isOwnMessage,
16        })}
17      >
18        {showHeader && (
19          <div
20            className={cn('flex items-center gap-2 text-xs px-3', {
21              'justify-end flex-row-reverse': isOwnMessage,
22            })}
23          >
24            <span className={'font-medium'}>{message.user.name}</span>
25            <span className="text-foreground/50 text-xs">
26              {new Date(message.createdAt).toLocaleTimeString('en-US', {
27                hour: '2-digit',
28                minute: '2-digit',
29                hour12: true,
30              })}
31            </span>
32          </div>
33        )}
34        <div
35          className={cn(
36            'py-2 px-3 rounded-xl text-sm w-fit',
37            isOwnMessage ? 'bg-primary text-primary-foreground' : 'bg-muted text-foreground'
38          )}
39        >
40          {message.content}
41        </div>
42      </div>
43    </div>
44  )
45}

Introduction

The Realtime Chat component provides a complete chat interface that enables users to exchange messages in real-time within a shared room.

Usage

Basic usage

import { RealtimeChat } from '@/components/realtime-chat'
 
export default function ChatPage() {
  return <RealtimeChat roomName="my-chat-room" username="john_doe" />
}

With initial messages

import { RealtimeChat } from '@/components/realtime-chat'
import { useMessagesQuery } from '@/hooks/use-messages-query'
 
export default function ChatPage() {
  const { data: messages } = useMessagesQuery()
 
  return <RealtimeChat roomName="my-chat-room" username="john_doe" messages={messages} />
}

Storing messages

import { RealtimeChat } from '@/components/realtime-chat'
import { useMessagesQuery } from '@/hooks/use-messages-query'
import { storeMessages } from '@/lib/store-messages'
 
export default function ChatPage() {
  const { data: messages } = useMessagesQuery()
  const handleMessage = (messages: ChatMessage[]) => {
    // Store messages in your database
    await storeMessages(messages)
  }
 
  return <RealtimeChat roomName="my-chat-room" username="john_doe" onMessage={handleMessage} />
}

Features

  • Real-time message synchronization
  • Message persistence support with onMessage and messages props
  • Customizable message appearance
  • Automatic scroll-to-bottom on new messages
  • Room-based isolation for scoped conversations
  • Low-latency updates using Supabase Realtime

Props

PropTypeDescription
roomNamestringUnique identifier for the shared chat room.
usernamestringName of the current user; used to identify message senders.
onMessage?(messages: ChatMessage[]) => voidOptional callback to handle messages, useful for persistence.
messages?ChatMessage[]Optional initial messages to display in the chat.

ChatMessage type

interface ChatMessage {
  id: string
  content: string
  user: {
    name: string
  }
  createdAt: string
}

Further reading