31 lines
940 B
TypeScript
31 lines
940 B
TypeScript
import { User } from "lucide-react";
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import { useAuth } from "@/contexts/auth-context";
|
|
|
|
interface UserMessageProps {
|
|
content: string;
|
|
}
|
|
|
|
export function UserMessage({ content }: UserMessageProps) {
|
|
const { user } = useAuth();
|
|
|
|
return (
|
|
<div className="flex gap-3">
|
|
<Avatar className="w-8 h-8 flex-shrink-0 select-none">
|
|
<AvatarImage draggable={false} src={user?.picture} alt={user?.name} />
|
|
<AvatarFallback className="text-sm bg-primary/20 text-primary">
|
|
{user?.name ? (
|
|
user.name.charAt(0).toUpperCase()
|
|
) : (
|
|
<User className="h-4 w-4" />
|
|
)}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div className="flex-1">
|
|
<p className="text-foreground whitespace-pre-wrap break-words overflow-wrap-anywhere">
|
|
{content}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|