Spaces:
Sleeping
Sleeping
| import React from 'react'; | |
| import type { Message } from '../../types'; | |
| import { MessageBubble } from './MessageBubble'; | |
| interface MessageListProps { | |
| messages: Message[]; | |
| isStreaming: boolean; | |
| documents: { id: string; filename: string }[]; | |
| selectedDocId: string | null; | |
| messagesEndRef: React.RefObject<HTMLDivElement | null>; | |
| onSourceClick: (filename: string, content: string, chunkIndex: number) => void; | |
| } | |
| export function MessageList({ | |
| messages, | |
| isStreaming, | |
| documents, | |
| selectedDocId, | |
| messagesEndRef, | |
| onSourceClick, | |
| }: MessageListProps) { | |
| return ( | |
| <div className="messages-container"> | |
| {messages.length === 0 ? ( | |
| <div className="empty-state"> | |
| <h3>Welcome to <span>REDNOTE</span></h3> | |
| <p> | |
| Upload a document and select it to ask specific questions, or query all | |
| uploaded context at once. | |
| </p> | |
| {documents.length > 0 && !selectedDocId && ( | |
| <p style={{ color: 'var(--red-hover)', fontSize: '0.85rem' }}> | |
| Tip: Click a document on the left sidebar to focus questions specifically to it. | |
| </p> | |
| )} | |
| </div> | |
| ) : ( | |
| messages.map((msg, index) => ( | |
| <MessageBubble | |
| key={index} | |
| message={msg} | |
| isLastMessageStreaming={isStreaming && index === messages.length - 1} | |
| onSourceClick={onSourceClick} | |
| /> | |
| )) | |
| )} | |
| <div ref={messagesEndRef} /> | |
| </div> | |
| ); | |
| } | |