ChatBubble

'use client'
const MSGS = [
  { id:1, text:'Hello! How can I help you today?', sender:'ai', time:'10:00' },
  { id:2, text:'Generate a dashboard component with charts', sender:'user', time:'10:01' },
  { id:3, text:'Sure! Here is a responsive dashboard with bar and donut charts.', sender:'ai', time:'10:01' },
  { id:4, text:'Can you add dark mode?', sender:'user', time:'10:02' },
]

export default function ChatBubble({ messages = MSGS }) {
  return (
    <div style={{ display:'flex', flexDirection:'column', gap:'12px', padding:'16px', maxWidth:'400px' }}>
      {messages.map(msg => (
        <div key={msg.id} style={{
          display:'flex', justifyContent:msg.sender==='user' ? 'flex-end' : 'flex-start', gap:'8px', alignItems:'flex-end',
        }}>
          {msg.sender==='ai' && (
            <div style={{ width:'32px', height:'32px', borderRadius:'50%', background:'linear-gradient(135deg,#6d28d9,#2563eb)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:'16px', flexShrink:0 }}>🤖</div>
          )}
          <div>
            <div style={{
              padding:'10px 14px', borderRadius:msg.sender==='user' ? '18px 18px 4px 18px' : '18px 18px 18px 4px',
              background:msg.sender==='user' ? '#6d28d9' : '#f1f5f9',
              color:msg.sender==='user' ? '#fff' : '#1e293b',
              fontSize:'14px', lineHeight:1.5, maxWidth:'260px',
            }}>{msg.text}</div>
            <div style={{ fontSize:'11px', color:'#94a3b8', marginTop:'4px', textAlign:msg.sender==='user'?'right':'left' }}>{msg.time}</div>
          </div>
        </div>
      ))}
    </div>
  )
}

Component info

About

Chat message bubbles with sender/receiver layout and timestamps