From ef86b25dae970d5c6f5baf777d39473858a36305 Mon Sep 17 00:00:00 2001
From: Danny Avila <messagedaniel@protonmail.com>
Date: Fri, 1 Mar 2024 13:08:27 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=91=A4=20feat:=20Show=20Default=20Icon=20?=
 =?UTF-8?q?if=20No=20Avatar=20or=20Username=20provided=20(#1943)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Endpoints/Icon.tsx | 12 +++++++++++-
 client/src/components/Nav/NavLinks.tsx   | 16 +++++++++++++++-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Endpoints/Icon.tsx b/client/src/components/Endpoints/Icon.tsx
index 53f6590e3..56cba9ee8 100644
--- a/client/src/components/Endpoints/Icon.tsx
+++ b/client/src/components/Endpoints/Icon.tsx
@@ -3,6 +3,7 @@ import UnknownIcon from '~/components/Chat/Menus/Endpoints/UnknownIcon';
 import {
   Plugin,
   GPTIcon,
+  UserIcon,
   PaLMIcon,
   CodeyIcon,
   GeminiIcon,
@@ -42,7 +43,16 @@ const Icon: React.FC<IconProps> = (props) => {
         }}
         className={cn('relative flex items-center justify-center', props.className ?? '')}
       >
-        <img className="rounded-sm" src={user?.avatar || avatarSrc} alt="avatar" />
+        {!user?.avatar && !user?.username ? (
+          <div
+            style={{ backgroundColor: 'rgb(121, 137, 255)', width: '24px', height: '24px' }}
+            className="relative flex h-9 w-9 items-center justify-center rounded-sm p-1 text-white"
+          >
+            <UserIcon />
+          </div>
+        ) : (
+          <img className="rounded-sm" src={user?.avatar || avatarSrc} alt="avatar" />
+        )}
       </div>
     );
   } else {
diff --git a/client/src/components/Nav/NavLinks.tsx b/client/src/components/Nav/NavLinks.tsx
index ad324132a..17a196a2e 100644
--- a/client/src/components/Nav/NavLinks.tsx
+++ b/client/src/components/Nav/NavLinks.tsx
@@ -10,6 +10,7 @@ import { useAuthContext } from '~/hooks/AuthContext';
 import useAvatar from '~/hooks/Messages/useAvatar';
 import { ExportModal } from './ExportConversation';
 import { LinkIcon, GearIcon } from '~/components';
+import { UserIcon } from '~/components/svg';
 import { useLocalize } from '~/hooks';
 import Settings from './Settings';
 import NavLink from './NavLink';
@@ -72,7 +73,20 @@ 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 || avatarSrc} alt="" />
+                  {!user?.avatar && !user?.username ? (
+                    <div
+                      style={{
+                        backgroundColor: 'rgb(121, 137, 255)',
+                        width: '28px',
+                        height: '28px',
+                      }}
+                      className="relative flex h-9 w-9 items-center justify-center rounded-full p-1 text-white"
+                    >
+                      <UserIcon />
+                    </div>
+                  ) : (
+                    <img className="rounded-full" src={user?.avatar || avatarSrc} alt="avatar" />
+                  )}
                 </div>
               </div>
               <div