import React from 'react'; import type { ChatMessage } from '../types'; import { MarkdownRenderer } from './MarkdownRenderer'; import { UserIcon, DocumentTextIcon } from './icons'; // REELBOT_IMAGE_URL is not needed here anymore for the avatar itself export const ChatMessageItem: React.FC<{ message: ChatMessage }> = React.memo(({ message }) => { const isUser = message.sender === 'user'; const shouldDisplaySources = () => { if (message.sender === 'model' && message.groundingChunks && message.groundingChunks.length > 0) { const text = message.text.toLowerCase(); return text.includes("sources:") || text.includes("source:") || text.includes("fuentes:") || text.includes("fuente:"); } return false; }; const isImageFile = message.file && message.file.dataUrl && message.file.type.startsWith('image/'); const isDocumentFile = message.file && !isImageFile && (message.file.type.includes('pdf') || message.file.type.includes('word') || message.file.type.includes('document')); return (
{/* Adjusted items-start to items-center for better emoji alignment */} {isUser ? ( ) : ( 🤖 )} {isUser ? 'Tú' : 'ReelBot'}
{/* File Preview */} {message.file && (
{isImageFile ? ( {message.file.name} ) : isDocumentFile ? (
{message.file.name}
) : null }
)} {/* Message Text */} {message.text && ( message.sender === 'model' ? ( ) : (

{message.text}

) )} {message.error &&

Error: {message.error}

} {shouldDisplaySources() && (

Sources:

)}
); });