Mercurial

comparison love/epi/src/components/ChatUI/MessageItem.tsx @ 38:cf9caa4abc3e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
author MrJuneJune <me@mrjunejune.com>
date Mon, 01 Dec 2025 20:35:56 -0800
parents
children
comparison
equal deleted inserted replaced
37:fb9bcd3145cb 38:cf9caa4abc3e
1 import { User, Bot } from 'lucide-react';
2 import type { Message } from '@/atoms/chatAtoms';
3 import ReactMarkdown from 'react-markdown';
4 import remarkGfm from 'remark-gfm';
5
6 interface MessageItemProps {
7 message: Message;
8 }
9
10 export function MessageItem({ message }: MessageItemProps) {
11 const isUser = message.role === 'user';
12
13 return (
14 <div
15 className={`flex gap-4 py-4 px-6 ${
16 isUser ? 'bg-gray-50 dark:bg-gray-800/30' : ''
17 }`}
18 >
19 <div className="flex-shrink-0">
20 {isUser ? (
21 <div className="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
22 <User className="w-5 h-5 text-white" />
23 </div>
24 ) : (
25 <div className="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center">
26 <Bot className="w-5 h-5 text-white" />
27 </div>
28 )}
29 </div>
30
31 <div className="flex-1 prose prose-sm text-white dark:prose-invert max-w-none">
32 {message.image_url && (
33 <div className="my-4 -mx-4 sm:mx-0 rounded-lg overflow-hidden">
34 <img
35 src={message.image_url}
36 alt="Uploaded or generated content"
37 className="max-w-full h-auto rounded-lg shadow-lg"
38 loading="lazy"
39 />
40 </div>
41 )}
42 <ReactMarkdown remarkPlugins={[remarkGfm]}>
43 {message.content}
44 </ReactMarkdown>
45 </div>
46 </div>
47 );
48 }