🎨 feat: Create Avatars of Initials Locally (#1869)

client/src/components/Endpoints/Icon.tsx

@@ -12,6 +12,7 @@ import {
   CustomMinimalIcon,
 } from '~/components/svg';
 import { useAuthContext } from '~/hooks/AuthContext';
+import useAvatar from '~/hooks/Messages/useAvatar';
 import { IconProps } from '~/common';
 import { cn } from '~/utils';
 
@@ -27,6 +28,8 @@ const Icon: React.FC<IconProps> = (props) => {
     assistantName,
   } = props;
 
+  const avatarSrc = useAvatar(user);
+
   if (isCreatedByUser) {
     const username = user?.name || 'User';
 
@@ -39,14 +42,7 @@ const Icon: React.FC<IconProps> = (props) => {
         }}
         className={cn('relative flex items-center justify-center', props.className ?? '')}
       >
-        <img
-          className="rounded-sm"
-          src={
-            user?.avatar ||
-            `https://api.dicebear.com/6.x/initials/svg?seed=${username}&fontFamily=Verdana&fontSize=36`
-          }
-          alt="avatar"
-        />
+        <img className="rounded-sm" src={user?.avatar || avatarSrc} alt="avatar" />
       </div>
     );
   } else {

client/src/components/Nav/NavLinks.tsx

@@ -7,6 +7,7 @@ import { useGetUserBalance, useGetStartupConfig } from 'librechat-data-provider/
 import type { TConversation } from 'librechat-data-provider';
 import FilesView from '~/components/Chat/Input/Files/FilesView';
 import { useAuthContext } from '~/hooks/AuthContext';
+import useAvatar from '~/hooks/Messages/useAvatar';
 import { ExportModal } from './ExportConversation';
 import { LinkIcon, GearIcon } from '~/components';
 import { useLocalize } from '~/hooks';
@@ -28,9 +29,12 @@ function NavLinks() {
   const [showSettings, setShowSettings] = useState(false);
   const [showFiles, setShowFiles] = useRecoilState(store.showFiles);
 
-  let conversation;
   const activeConvo = useRecoilValue(store.conversationByIndex(0));
   const globalConvo = useRecoilValue(store.conversation) ?? ({} as TConversation);
+
+  const avatarSrc = useAvatar(user);
+
+  let conversation: TConversation | null | undefined;
   if (location.state?.from?.pathname.includes('/chat')) {
     conversation = globalConvo;
   } else {
@@ -68,16 +72,7 @@ function NavLinks() {
             >
               <div className="-ml-0.9 -mt-0.8 h-8 w-7 flex-shrink-0">
                 <div className="relative flex">
-                  <img
-                    className="rounded-full"
-                    src={
-                      user?.avatar ||
-                      `https://api.dicebear.com/6.x/initials/svg?seed=${
-                        user?.name || 'User'
-                      }&fontFamily=Verdana&fontSize=36`
-                    }
-                    alt=""
-                  />
+                  <img className="rounded-full" src={user?.avatar || avatarSrc} alt="" />
                 </div>
               </div>
               <div