components/MessageBubble.jsx

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>
  )
}