35 lines
1.0 KiB
TypeScript
35 lines
1.0 KiB
TypeScript
"use client";
|
|
import Image from "next/image";
|
|
|
|
import { UserMessageAvatar } from "@/app/_components";
|
|
import { useActiveCharacter } from "@/providers/character-provider";
|
|
|
|
export interface MessageAvatarProps {
|
|
isFromAI: boolean;
|
|
userAvatarUrl?: string | null;
|
|
}
|
|
|
|
const AVATAR_CLASS_NAME =
|
|
"flex size-(--chat-avatar-size,43px) shrink-0 items-center justify-center overflow-hidden rounded-full border-2 border-(--color-avatar-border,#fbf3f5) bg-(--color-avatar-border,#fbf3f5) shadow-(--shadow-input-box,0_1px_2px_rgba(0,0,0,0.1))";
|
|
|
|
export function MessageAvatar({ isFromAI, userAvatarUrl }: MessageAvatarProps) {
|
|
const character = useActiveCharacter();
|
|
|
|
if (isFromAI) {
|
|
return (
|
|
<div className={AVATAR_CLASS_NAME} aria-label="AI avatar">
|
|
<Image
|
|
src={character.assets.avatar}
|
|
alt={character.displayName}
|
|
width={43}
|
|
height={43}
|
|
priority
|
|
className="size-full object-cover"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return <UserMessageAvatar avatarUrl={userAvatarUrl} />;
|
|
}
|