cozsweet-frontend-nextjs/src/app/chat/components/message-avatar.tsx

"use client";

import { CharacterAvatar, UserMessageAvatar } from "@/app/_components";
import { useActiveCharacter } from "@/providers/character-provider";

export interface MessageAvatarProps {
  isFromAI: boolean;
  userAvatarUrl?: string | null;
  onClick?: () => void;
}

const AVATAR_CLASS_NAME =
  "size-(--chat-avatar-size,43px) ring-2 ring-(--color-avatar-border,#fbf3f5) shadow-(--shadow-input-box,0_1px_2px_rgba(0,0,0,0.1))";

export function MessageAvatar({
  isFromAI,
  userAvatarUrl,
  onClick,
}: MessageAvatarProps) {
  const character = useActiveCharacter();

  if (isFromAI) {
    if (onClick) {
      return (
        <CharacterAvatar
          src={character.assets.avatar}
          alt={character.displayName}
          size="var(--chat-avatar-size, 43px)"
          imageSize={43}
          priority
          className={AVATAR_CLASS_NAME}
          actionLabel={`Open ${character.displayName}'s private room`}
          analyticsKey="chat.open_private_room_from_avatar"
          onClick={onClick}
        />
      );
    }

    return (
      <CharacterAvatar
        src={character.assets.avatar}
        alt={character.displayName}
        size="var(--chat-avatar-size, 43px)"
        imageSize={43}
        priority
        className={AVATAR_CLASS_NAME}
      />
    );
  }

  if (onClick) {
    return (
      <UserMessageAvatar
        avatarUrl={userAvatarUrl}
        actionLabel="Open profile"
        analyticsKey="chat.open_profile_from_avatar"
        onClick={onClick}
      />
    );
  }

  return <UserMessageAvatar avatarUrl={userAvatarUrl} />;
}