/* MessageBubble.jsx , Single message row: avatar, name+role, body, attachments. */
function MessageBubble({ message }) {
 const isMe = message.who === 'me';
 return (
  <article className={'bf-bubble bf-bubble--' + message.who}>
   <div className={'bf-avatar bf-avatar--sm' + (isMe ? ' bf-avatar--me' : '')} aria-hidden="true">
    {message.initials}
   </div>
   <div className="bf-bubble__body">
    <header className="bf-bubble__header">
     <span className="bf-bubble__name">{message.name}</span>
     <span className="bf-bubble__role">{message.role}</span>
     <span className="bf-bubble__time">{message.time}</span>
    </header>
    <p className="bf-bubble__text">{message.body}</p>
    {message.attachments && message.attachments.length > 0 && (
     <ul className="bf-bubble__attachments" aria-label="Attachments">
      {message.attachments.map(a => (
       <li key={a.name} className="bf-bubble__attachment">
        <span className="bf-bubble__attachmentIcon" aria-hidden="true">📎</span>
        <span className="bf-bubble__attachmentName">{a.name}</span>
        <span className="bf-bubble__attachmentSize">{a.size}</span>
       </li>
      ))}
     </ul>
    )}
   </div>
  </article>
 );
}

window.MessageBubble = MessageBubble;