File size: 2,073 Bytes
5306da4 |
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 52 53 54 55 |
import React from "react";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import { Card } from "@/components/ui/card";
import { useIsMobile } from "@/hooks/use-mobile";
interface MessageProps {
content: string;
}
export const UserMessage: React.FC<MessageProps> = ({ content }) => {
const isMobile = useIsMobile();
return (
<div className="flex justify-end mb-4">
<div className="flex flex-col items-end">
<Card className="bg-gradient-to-br from-white to-white/95 text-black p-3.5 rounded-2xl rounded-tr-sm max-w-[90%] sm:max-w-[80%] shadow-md border border-white/10 px-2 pr-6">
<p className="text-sm md:text-base leading-relaxed px-2">{content}</p>
</Card>
</div>
<Avatar
className={`${
isMobile ? "h-8 w-8" : "h-9 w-9"
} ml-2 bg-white text-black shadow-[0_0_10px_rgba(255,255,255,0.2)] ring-2 ring-white/20`}
>
<AvatarImage
src="https://images.unsplash.com/photo-1618160702438-9b02ab6515c9?auto=format&fit=crop&w=100&h=100"
alt="User"
/>
<AvatarFallback className="text-xs font-medium">You</AvatarFallback>
</Avatar>
</div>
);
};
export const AIMessage: React.FC<MessageProps> = ({ content }) => {
const isMobile = useIsMobile();
return (
<div className="flex mb-4">
<Avatar
className={`${
isMobile ? "h-8 w-8" : "h-9 w-9"
} mr-2 bg-gradient-to-br text-black from-purple-600/80 to-blue-600/80 border border-white/30 shadow-[0_0_10px_rgba(168,85,247,0.2)] ring-2 ring-white/10`}
>
<AvatarFallback className="text-xs font-medium">AI</AvatarFallback>
</Avatar>
<div className="flex flex-col">
<Card className="bg-gradient-to-br from-gray-900/80 to-gray-800/80 text-white p-3.5 rounded-2xl rounded-tl-sm max-w-[90%] sm:max-w-[80%] shadow-md border border-white/10 backdrop-blur-sm px-2 pr-6">
<p className="text-sm md:text-base leading-relaxed px-2">{content}</p>
</Card>
</div>
</div>
);
};
|