Upload components/MessageBubble.jsx with huggingface_hub

components/MessageBubble.jsx

@@ -0,0 +1,36 @@
+import Image from 'next/image'
+
+export default function MessageBubble({ message, isLast }) {
+  const isUser = message.role === 'user'
+  const hasImage = Array.isArray(message.content) && 
+    message.content.some(item => item.type === 'image_url')
+  
+  const textContent = Array.isArray(message.content)
+    ? message.content.find(item => item.type === 'text')?.text || ''
+    : message.content
+
+  const imageContent = Array.isArray(message.content)
+    ? message.content.find(item => item.type === 'image_url')
+    : null
+
+  return (
+    <div className={`flex ${isUser ? 'justify-end' : 'justify-start'} mb-4`}>
+      <div className={`message-bubble ${isUser ? 'user-bubble' : 'assistant-bubble'} ${!textContent && imageContent ? 'p-0 overflow-hidden' : ''}`}>
+        {imageContent && (
+          <div className="mb-2">
+            <Image
+              src={imageContent.image_url.url}
+              alt="Uploaded image"
+              width={200}
+              height={200}
+              className="rounded-lg object-cover"
+            />
+          </div>
+        )}
+        {textContent && (
+          <p className="whitespace-pre-wrap">{textContent}</p>
+        )}
+      </div>
+    </div>
+  )
+}