File size: 1,653 Bytes
cc276cc | 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 49 50 51 | import { Message as MessageType } from '@/lib/types';
import { cn } from '@/lib/utils';
import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
interface MessageProps {
message: MessageType;
isSender: boolean;
}
export function Message({ message, isSender }: MessageProps) {
return (
<div
className={cn(
'flex items-start gap-3',
isSender ? 'flex-row-reverse' : 'flex-row'
)}
>
<Avatar className="h-8 w-8 border">
<AvatarImage src={message.sender.avatar} alt={message.sender.name} />
<AvatarFallback>
{message.sender.name.charAt(0)}
</AvatarFallback>
</Avatar>
<div
className={cn(
'max-w-xs rounded-lg p-3 text-sm shadow-sm md:max-w-md',
isSender
? 'rounded-br-none bg-primary text-primary-foreground'
: 'rounded-bl-none bg-muted',
message.theme === 'travel' && 'theme-travel',
message.theme === 'relationships' && 'theme-relationships',
message.theme === 'recipes' && 'theme-recipes',
message.theme === 'weather' && 'theme-weather',
)}
>
<p className="leading-relaxed">{message.text}</p>
<p
className={cn(
'mt-1 text-right text-xs',
isSender ? 'text-primary-foreground/70' : 'text-muted-foreground',
(message.theme === 'travel' || message.theme === 'relationships') && 'text-white/70',
(message.theme === 'recipes' || message.theme === 'weather') && 'text-gray-600'
)}
>
{message.timestamp}
</p>
</div>
</div>
);
}
|