🎭 refactor: Avatar Loading UX and Fix Initials Rendering Bugs (#9261)

Co-authored-by: Danny Avila <danny@librechat.ai>

packages/client/src/hooks/index.ts

@@ -3,6 +3,7 @@
 export type { TranslationKeys } from './useLocalize';
 
 export { default as useToast } from './useToast';
+export { default as useAvatar } from './useAvatar';
 export { default as useCombobox } from './useCombobox';
 export { default as useLocalize } from './useLocalize';
 export { default as useMediaQuery } from './useMediaQuery';

packages/client/src/hooks/useAvatar.ts

@@ -0,0 +1,44 @@
+import { useMemo } from 'react';
+import { createAvatar } from '@dicebear/core';
+import { initials } from '@dicebear/collection';
+import type { TUser } from 'librechat-data-provider';
+
+const avatarCache: Record<string, string> = {};
+
+const useAvatar = (user: TUser | undefined) => {
+  return useMemo(() => {
+    const { username, name } = user ?? {};
+    const seed = name || username;
+    if (!seed) {
+      return '';
+    }
+
+    if (user?.avatar && user?.avatar !== '') {
+      return user.avatar;
+    }
+
+    if (avatarCache[seed]) {
+      return avatarCache[seed];
+    }
+
+    const avatar = createAvatar(initials, {
+      seed,
+      fontFamily: ['Verdana'],
+      fontSize: 36,
+    });
+
+    let avatarDataUri = '';
+    try {
+      avatarDataUri = avatar.toDataUri();
+      if (avatarDataUri) {
+        avatarCache[seed] = avatarDataUri;
+      }
+    } catch (error) {
+      console.error('Failed to generate avatar:', error);
+    }
+
+    return avatarDataUri;
+  }, [user]);
+};
+
+export default useAvatar;