Spaces:
Running
Running
File size: 2,114 Bytes
4fb0c68 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faVolumeUp, faCopy, faSync, faStar, faCogs } from '@fortawesome/free-solid-svg-icons';
const ChatMessage = ({ message, isUser }) => {
return (
<div className={`flex ${isUser ? 'justify-end' : 'justify-start'} mb-2`}>
<div className={`flex items-end ${isUser ? 'flex-row-reverse' : 'flex-row'}`}>
<div className="flex flex-col items-center">
<div className="w-10 h-10 rounded-full overflow-hidden">
<img
src={isUser ? '/public/you.png' : '/public/bot.png'}
alt={isUser ? 'You' : 'AI Bot'}
className="w-full h-full object-cover"
/>
</div>
<p className="text-xs mt-1">{isUser ? 'You' : 'AI Bot'}</p>
</div>
<div className={`p-3 rounded-lg ml-2 max-w-lg ${isUser ? 'bg-blue-600 text-white' : 'bg-gray-300 text-black'}`}>
<p className="text-sm whitespace-pre-wrap" dangerouslySetInnerHTML={{ __html: message.text }}></p>
<p className="text-xs mt-1">{message.timestamp}</p>
{!isUser && (
<div className="flex mt-2 space-x-2">
<button className="p-1 text-sm bg-white rounded-full hover:bg-gray-200">
<FontAwesomeIcon icon={faVolumeUp} />
</button>
<button className="p-1 text-sm bg-white rounded-full hover:bg-gray-200">
<FontAwesomeIcon icon={faCopy} />
</button>
<button className="p-1 text-sm bg-white rounded-full hover:bg-gray-200">
<FontAwesomeIcon icon={faSync} />
</button>
<button className="p-1 text-sm bg-white rounded-full hover:bg-gray-200">
<FontAwesomeIcon icon={faStar} />
</button>
<button className="p-1 text-sm bg-white rounded-full hover:bg-gray-200">
<FontAwesomeIcon icon={faCogs} />
</button>
</div>
)}
</div>
</div>
</div>
);
};
export default ChatMessage;
|