fix(ui): display default user avatar in chat (#2251)

* fix(ui): display default user avatar in chat

* update

* [autofix.ci] apply automated fixes

* update

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

ee/tabby-ui/components/chat/question-answer.tsx

@@ -27,7 +27,7 @@ import {
   AccordionTrigger
 } from '../ui/accordion'
 import { Button } from '../ui/button'
-import { IconFile, IconRefresh, IconTrash } from '../ui/icons'
+import { IconFile, IconRefresh, IconTrash, IconUser } from '../ui/icons'
 import { Separator } from '../ui/separator'
 import { Skeleton } from '../ui/skeleton'
 import { UserAvatar } from '../user-avatar'
@@ -108,7 +108,14 @@ function UserMessageCard(props: { message: UserMessage }) {
       {...props}
     >
       <div className="shrink-0 select-none rounded-full border bg-background shadow">
-        <UserAvatar className="h-8 w-8" />
+        <UserAvatar
+          className="h-8 w-8"
+          fallback={
+            <div className="flex h-8 w-8 items-center justify-center">
+              <IconUser className="h-5 w-5" />
+            </div>
+          }
+        />
       </div>
       <div className="ml-4 flex-1 space-y-2 overflow-hidden px-1">
         <MessageMarkdown message={message.message} />

ee/tabby-ui/components/user-avatar.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import React from 'react'
 import NiceAvatar, { genConfig } from 'react-nice-avatar'
 import { mutate } from 'swr'
 import useSWRImmutable from 'swr/immutable'
@@ -13,11 +14,18 @@ import {
   AvatarImage
 } from '@/components/ui/avatar'
 import { Skeleton } from '@/components/ui/skeleton'
+import { ReactNode } from 'react'
 
 const NOT_FOUND_ERROR = 'not_found'
 let shouldFetchAvatar = true
 
-export function UserAvatar({ className }: { className?: string }) {
+export function UserAvatar({
+  className,
+  fallback
+}: {
+  className?: string
+  fallback?: string | ReactNode
+}) {
   const [{ data }] = useMe()
   const userId = data?.me.id
 
@@ -41,7 +49,10 @@ export function UserAvatar({ className }: { className?: string }) {
     })
   })
 
-  if (!userId) return null
+  const avatarConfigFromEmail = React.useMemo(() => {
+    if (!data?.me?.email) return undefined
+    return genConfig(data.me.email)
+  }, [data?.me?.email])
 
   if (isLoading) {
     return <Skeleton className={cn('h-16 w-16 rounded-full', className)} />
@@ -51,19 +62,24 @@ export function UserAvatar({ className }: { className?: string }) {
     shouldFetchAvatar = false
   }
 
-  if (!avatarImageSrc) {
-    const config = genConfig(data.me.email)
-    return <NiceAvatar className={cn('h-16 w-16', className)} {...config} />
+  if (!avatarImageSrc && !avatarConfigFromEmail && fallback) return fallback
+  if (!avatarImageSrc && avatarConfigFromEmail) {
+    return (
+      <NiceAvatar
+        className={cn('h-16 w-16', className)}
+        {...avatarConfigFromEmail}
+      />
+    )
   }
 
   return (
     <AvatarComponent className={cn('h-16 w-16', className)}>
       <AvatarImage
         src={avatarImageSrc}
-        alt={data.me.email}
+        alt={data?.me?.email}
         className="object-cover"
       />
-      <AvatarFallback>{data.me?.email.substring(0, 2)}</AvatarFallback>
+      <AvatarFallback>{data?.me?.email?.substring(0, 2)}</AvatarFallback>
     </AvatarComponent>
   )
 }