Cyrene_v2/frontend/web/src/components/chat/MessageList.tsx

import type { Message } from '../../types/chat'

export default function MessageList({ messages }: { messages: Message[] }) {
  return (
    <div className="space-y-3">
      {messages.map((msg) => (
        <MessageBubble key={msg.id} message={msg} />
      ))}
    </div>
  )
}

function MessageBubble({ message }: { message: Message }) {
  const isUser = message.role === 'user'
  const isAction = message.role === 'action'
  const isSystem = message.role === 'system'
  const isEmpty = message.role === 'assistant' && !message.content

  if (isAction) {
    return (
      <div className="flex justify-center py-1">
        <span className="text-xs text-[var(--mx-tertiary-text)] bg-[var(--mx-badge-blue)]/80 px-3 py-1 rounded-full">
          {message.content}
        </span>
      </div>
    )
  }

  if (isSystem) {
    return (
      <div className="flex justify-center py-1">
        <span className="text-xs text-[var(--mx-error-text)] bg-[var(--mx-error-container)]/80 px-3 py-1 rounded-full">{message.content}</span>
      </div>
    )
  }

  return (
    <div className={`flex ${isUser ? 'justify-end' : 'justify-start'}`}>
      {/* Avatar for AI */}
      {!isUser && (
        <div className="w-8 h-8 rounded-xl overflow-hidden shrink-0 mr-2 mt-1">
          <img src="/images/cyrene-avatar.png" alt="Cyrene" className="w-full h-full object-cover" />
        </div>
      )}

      <div className={`max-w-[75%] px-4 py-2.5 text-sm leading-relaxed ${
        isUser
          ? 'bg-[var(--mx-primary)] text-white rounded-[18px] rounded-br-[6px]'
          : isEmpty
            ? 'bg-transparent text-transparent'
            : 'bg-[var(--mx-surface)] text-[var(--mx-text)] rounded-[18px] rounded-bl-[6px] border border-[var(--mx-outline)]'
      }`}>
        {isEmpty ? (
          <span className="flex gap-1.5 py-1">
            <span className="w-2 h-2 rounded-full bg-[#404040] animate-bounce" style={{animationDelay:'0ms'}} />
            <span className="w-2 h-2 rounded-full bg-[#404040] animate-bounce" style={{animationDelay:'150ms'}} />
            <span className="w-2 h-2 rounded-full bg-[#404040] animate-bounce" style={{animationDelay:'300ms'}} />
          </span>
        ) : (
          message.content
        )}
      </div>

      {/* Spacer for user messages */}
      {isUser && <div className="w-8 shrink-0 ml-2" />}
    </div>
  )
}