| 'use client' | |
| import { useEffect, useRef } from 'react' | |
| import { MessageBubble } from './MessageBubble' | |
| import { MessageData } from 'lib/messages' | |
| interface MessageListProps { | |
| messages: MessageData[] | |
| currentCodeId: string | |
| } | |
| export function MessageList({ messages, currentCodeId }: MessageListProps) { | |
| const messagesEndRef = useRef<HTMLDivElement>(null) | |
| const scrollToBottom = () => { | |
| messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }) | |
| } | |
| useEffect(() => { | |
| scrollToBottom() | |
| }, [messages]) | |
| if (messages.length === 0) { | |
| return ( | |
| <div className="flex-1 flex items-center justify-center text-gray-500"> | |
| <div className="text-center"> | |
| <p className="text-lg font-medium">Zatím žádné zprávy</p> | |
| <p className="text-sm mt-1">Buďte první, kdo něco napíše!</p> | |
| </div> | |
| </div> | |
| ) | |
| } | |
| return ( | |
| <div className="flex-1 overflow-y-auto p-4 space-y-1"> | |
| {messages.map((message) => ( | |
| <MessageBubble | |
| key={message.id} | |
| message={message} | |
| isOwn={message.code_id === currentCodeId} | |
| /> | |
| ))} | |
| <div ref={messagesEndRef} /> | |
| </div> | |
| ) | |
| } |