refactor(web): compose avatar fallbacks from primitives

web/app/components/workflow/comment/thread.tsx

@@ -6,7 +6,7 @@ import { RiArrowDownSLine, RiArrowUpSLine, RiCheckboxCircleFill, RiCheckboxCircl
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useReactFlow, useViewport } from 'reactflow'
-import { Avatar } from '@/app/components/base/avatar'
+import { Avatar, AvatarFallback, AvatarImage, avatarPartClassNames, AvatarRoot, getAvatarSizeClassNames } from '@/app/components/base/avatar'
 import Divider from '@/app/components/base/divider'
 import InlineDeleteConfirm from '@/app/components/base/inline-delete-confirm'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
@@ -19,6 +19,8 @@ import { cn } from '@/utils/classnames'
 import { useStore } from '../store'
 import { MentionInput } from './mention-input'
 
+const threadAvatarSizeClassNames = getAvatarSizeClassNames('sm')
+
 type CommentThreadProps = {
   comment: WorkflowCommentDetail
   loading?: boolean
@@ -120,13 +122,21 @@ const ThreadMessage: FC<{
   return (
     <div className={cn('flex gap-3 pt-1', className)}>
       <div className="shrink-0">
-        <Avatar
-          name={authorName}
-          avatar={avatarUrl || null}
-          size="sm"
-          className={cn('h-8 w-8 rounded-full')}
-          backgroundColor={userColor}
-        />
+        <AvatarRoot className={cn(avatarPartClassNames.root, threadAvatarSizeClassNames.root, 'h-8 w-8 rounded-full')}>
+          {avatarUrl && (
+            <AvatarImage
+              src={avatarUrl}
+              alt={authorName}
+              className={avatarPartClassNames.image}
+            />
+          )}
+          <AvatarFallback
+            className={cn(avatarPartClassNames.fallback, threadAvatarSizeClassNames.text)}
+            style={userColor ? { backgroundColor: userColor } : undefined}
+          >
+            {authorName?.[0]?.toLocaleUpperCase()}
+          </AvatarFallback>
+        </AvatarRoot>
       </div>
       <div className="min-w-0 flex-1 pb-4 text-text-primary last:pb-0">
         <div className="flex flex-wrap items-center gap-x-2 gap-y-1">