--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/love/epi/src/components/ChatUI/MessageItem.tsx	Mon Dec 01 20:35:56 2025 -0800
@@ -0,0 +1,48 @@
+import { User, Bot } from 'lucide-react';
+import type { Message } from '@/atoms/chatAtoms';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+interface MessageItemProps {
+  message: Message;
+}
+
+export function MessageItem({ message }: MessageItemProps) {
+  const isUser = message.role === 'user';
+
+  return (
+    <div
+      className={`flex gap-4 py-4 px-6 ${
+        isUser ? 'bg-gray-50 dark:bg-gray-800/30' : ''
+      }`}
+    >
+      <div className="flex-shrink-0">
+        {isUser ? (
+          <div className="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
+            <User className="w-5 h-5 text-white" />
+          </div>
+        ) : (
+          <div className="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center">
+            <Bot className="w-5 h-5 text-white" />
+          </div>
+        )}
+      </div>
+
+      <div className="flex-1 prose prose-sm text-white dark:prose-invert max-w-none">
+        {message.image_url && (
+          <div className="my-4 -mx-4 sm:mx-0 rounded-lg overflow-hidden">
+            <img 
+              src={message.image_url} 
+              alt="Uploaded or generated content" 
+              className="max-w-full h-auto rounded-lg shadow-lg"
+              loading="lazy"
+            />
+          </div>
+        )}
+        <ReactMarkdown remarkPlugins={[remarkGfm]}>
+          {message.content}
+        </ReactMarkdown>
+      </div>
+    </div>
+  );
+}