Gyan.AI / frontend /src /components /ai-tutor /MessageBubble.tsx
cryogenic22's picture
Create MessageBubble.tsx
6dbe119 verified
raw
history blame contribute delete
540 Bytes
import React from 'react';
const MessageBubble = ({ content, role, timestamp }) => (
<div className={`flex ${role === 'user' ? 'justify-end' : 'justify-start'} mb-4`}>
<div className={`max-w-[80%] rounded-lg p-4 ${
role === 'user'
? 'bg-blue-500 text-white'
: 'bg-gray-100 text-gray-900'
}`}>
<div className="text-sm">{content}</div>
<div className="text-xs mt-1 opacity-70">
{new Date(timestamp).toLocaleTimeString()}
</div>
</div>
</div>
);
export default MessageBubble;