'use client' import { Send } from 'lucide-react' import { useCallback, useEffect, useMemo, useState } from 'react' import { cn } from '@/lib/utils' import { ChatMessageItem } from '@/registry/default/blocks/realtime-chat/components/chat-message' import { useChatScroll } from '@/registry/default/blocks/realtime-chat/hooks/use-chat-scroll' import { useRealtimeChat, type ChatMessage, } from '@/registry/default/blocks/realtime-chat/hooks/use-realtime-chat' import { Button } from '@/registry/default/components/ui/button' import { Input } from '@/registry/default/components/ui/input' interface RealtimeChatProps { roomName: string username: string onMessage?: (messages: ChatMessage[]) => void messages?: ChatMessage[] } /** * Realtime chat component * @param roomName - The name of the room to join. Each room is a unique chat. * @param username - The username of the user * @param onMessage - The callback function to handle the messages. Useful if you want to store the messages in a database. * @param messages - The messages to display in the chat. Useful if you want to display messages from a database. * @returns The chat component */ export const RealtimeChat = ({ roomName, username, onMessage, messages: initialMessages = [], }: RealtimeChatProps) => { const { containerRef, scrollToBottom } = useChatScroll() const { messages: realtimeMessages, sendMessage, isConnected, } = useRealtimeChat({ roomName, username, }) const [newMessage, setNewMessage] = useState('') // Merge realtime messages with initial messages const allMessages = useMemo(() => { const mergedMessages = [...initialMessages, ...realtimeMessages] // Remove duplicates based on message id const uniqueMessages = mergedMessages.filter( (message, index, self) => index === self.findIndex((m) => m.id === message.id) ) // Sort by creation date const sortedMessages = uniqueMessages.sort((a, b) => a.createdAt.localeCompare(b.createdAt)) return sortedMessages }, [initialMessages, realtimeMessages]) useEffect(() => { if (onMessage) { onMessage(allMessages) } }, [allMessages, onMessage]) useEffect(() => { // Scroll to bottom whenever messages change scrollToBottom() }, [allMessages, scrollToBottom]) const handleSendMessage = useCallback( (e: React.FormEvent) => { e.preventDefault() if (!newMessage.trim() || !isConnected) return sendMessage(newMessage) setNewMessage('') }, [newMessage, isConnected, sendMessage] ) return (

{/* Messages */}

{allMessages.length === 0 ? (

No messages yet. Start the conversation!

) : null}

{allMessages.map((message, index) => { const prevMessage = index > 0 ? allMessages[index - 1] : null const showHeader = !prevMessage || prevMessage.user.name !== message.user.name return (

) })}

) }

Installation

Files

components

hooks

lib

Styles