52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
import { User } from "lucide-react";
|
|
import { motion } from "motion/react";
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import { useAuth } from "@/contexts/auth-context";
|
|
import { cn } from "@/lib/utils";
|
|
import { Message } from "./message";
|
|
|
|
interface UserMessageProps {
|
|
content: string;
|
|
isCompleted?: boolean;
|
|
animate?: boolean;
|
|
}
|
|
|
|
export function UserMessage({ content, isCompleted, animate = true }: UserMessageProps) {
|
|
const { user } = useAuth();
|
|
|
|
console.log("animate", animate);
|
|
|
|
return (
|
|
<motion.div
|
|
initial={animate ? { opacity: 0, y: -20 } : { opacity: 1, y: 0 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={animate ? { duration: 0.4, delay: 0.2, ease: "easeOut" } : { duration: 0 }}
|
|
className={isCompleted ? "opacity-50" : ""}
|
|
>
|
|
<Message
|
|
icon={
|
|
<Avatar className="w-8 h-8 rounded-lg flex-shrink-0 select-none">
|
|
<AvatarImage draggable={false} src={user?.picture} alt={user?.name} />
|
|
<AvatarFallback
|
|
className={cn(
|
|
isCompleted ? "text-placeholder-foreground" : "text-primary",
|
|
"text-sm bg-accent/20 rounded-lg transition-colors duration-300",
|
|
)}
|
|
>
|
|
{user?.name ? user.name.charAt(0).toUpperCase() : <User className="h-4 w-4" />}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
}
|
|
>
|
|
<p
|
|
className={cn(
|
|
"text-foreground text-sm py-1.5 whitespace-pre-wrap break-words overflow-wrap-anywhere transition-colors duration-300",
|
|
isCompleted ? "text-placeholder-foreground" : "text-foreground",
|
|
)}
|
|
>
|
|
{content}
|
|
</p>
|
|
</Message>
|
|
</motion.div>
|
|
);
|
|
}
|