dify/web/app/components/base/avatar/index.tsx

'use client'
import { useState } from 'react'
import cn from '@/utils/classnames'

export type AvatarProps = {
  name: string
  avatar: string | null
  size?: number
  className?: string
  textClassName?: string
  backgroundColor?: string
}
const Avatar = ({
  name,
  avatar,
  size = 30,
  className,
  textClassName,
  backgroundColor,
}: AvatarProps) => {
  const avatarClassName = backgroundColor
    ? 'shrink-0 flex items-center rounded-full'
    : 'shrink-0 flex items-center rounded-full bg-primary-600'
  const style = {
    width: `${size}px`,
    height: `${size}px`,
    fontSize: `${size}px`,
    lineHeight: `${size}px`,
    ...(backgroundColor && !avatar ? { backgroundColor } : {}),
  }
  const [imgError, setImgError] = useState(false)

  const handleError = () => {
    setImgError(true)
  }

  if (avatar && !imgError) {
    return (
      <img
        className={cn(avatarClassName, className)}
        style={style}
        alt={name}
        src={avatar}
        onError={handleError}
      />
    )
  }

  return (
    <div
      className={cn(avatarClassName, className)}
      style={style}
    >
      <div
        className={cn(textClassName, 'scale-[0.4] text-center text-white')}
        style={style}
      >
        {name[0].toLocaleUpperCase()}
      </div>
    </div>
  )
}

export default Avatar