dify

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

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import Avatar from '.'
+
+const meta = {
+  title: 'Base/Data Display/Avatar',
+  component: Avatar,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Initials or image-based avatar used across contacts and member lists. Falls back to the first letter when the image fails to load.',
+      },
+      source: {
+        language: 'tsx',
+        code: `
+<Avatar name="Alex Doe" avatar="https://cloud.dify.ai/logo/logo.svg" size={40} />
+        `.trim(),
+      },
+    },
+  },
+  tags: ['autodocs'],
+  args: {
+    name: 'Alex Doe',
+    avatar: 'https://cloud.dify.ai/logo/logo.svg',
+    size: 40,
+  },
+} satisfies Meta<typeof Avatar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const WithFallback: Story = {
+  args: {
+    avatar: null,
+    name: 'Fallback',
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<Avatar name="Fallback" avatar={null} size={40} />
+        `.trim(),
+      },
+    },
+  },
+}
+
+export const CustomSizes: Story = {
+  render: args => (
+    <div className="flex items-end gap-4">
+      {[24, 32, 48, 64].map(size => (
+        <div key={size} className="flex flex-col items-center gap-2">
+          <Avatar {...args} size={size} avatar="https://i.pravatar.cc/96?u=size-test" />
+          <span className="text-xs text-text-tertiary">{size}px</span>
+        </div>
+      ))}
+    </div>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+{[24, 32, 48, 64].map(size => (
+  <Avatar key={size} name="Size Test" size={size} avatar="https://i.pravatar.cc/96?u=size-test" />
+))}
+        `.trim(),
+      },
+    },
+  },
+}

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

@@ -0,0 +1,64 @@
+'use client'
+import { useEffect, useState } from 'react'
+import cn from '@/utils/classnames'
+
+export type AvatarProps = {
+  name: string
+  avatar: string | null
+  size?: number
+  className?: string
+  textClassName?: string
+  onError?: (x: boolean) => void
+}
+const Avatar = ({
+  name,
+  avatar,
+  size = 30,
+  className,
+  textClassName,
+  onError,
+}: AvatarProps) => {
+  const avatarClassName = 'shrink-0 flex items-center rounded-full bg-primary-600'
+  const style = { width: `${size}px`, height: `${size}px`, fontSize: `${size}px`, lineHeight: `${size}px` }
+  const [imgError, setImgError] = useState(false)
+
+  const handleError = () => {
+    setImgError(true)
+    onError?.(true)
+  }
+
+  // after uploaded, api would first return error imgs url: '.../files//file-preview/...'. Then return the right url, Which caused not show the avatar
+  useEffect(() => {
+    if(avatar && imgError)
+      setImgError(false)
+  }, [avatar])
+
+  if (avatar && !imgError) {
+    return (
+      <img
+        className={cn(avatarClassName, className)}
+        style={style}
+        alt={name}
+        src={avatar}
+        onError={handleError}
+        onLoad={() => onError?.(false)}
+      />
+    )
+  }
+
+  return (
+    <div
+      className={cn(avatarClassName, className)}
+      style={style}
+    >
+      <div
+        className={cn(textClassName, 'scale-[0.4] text-center text-white')}
+        style={style}
+      >
+        {name && name[0].toLocaleUpperCase()}
+      </div>
+    </div>
+  )
+}
+
+export default Avatar