👤 feat: Show Default Icon if No Avatar or Username provided (#1943)

This commit is contained in:
Danny Avila 2024-03-01 13:08:27 -05:00 committed by GitHub
parent c52ea9490b
commit ef86b25dae
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 26 additions and 2 deletions

View file

@ -3,6 +3,7 @@ import UnknownIcon from '~/components/Chat/Menus/Endpoints/UnknownIcon';
import { import {
Plugin, Plugin,
GPTIcon, GPTIcon,
UserIcon,
PaLMIcon, PaLMIcon,
CodeyIcon, CodeyIcon,
GeminiIcon, GeminiIcon,
@ -42,7 +43,16 @@ const Icon: React.FC<IconProps> = (props) => {
}} }}
className={cn('relative flex items-center justify-center', props.className ?? '')} className={cn('relative flex items-center justify-center', props.className ?? '')}
> >
{!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" /> <img className="rounded-sm" src={user?.avatar || avatarSrc} alt="avatar" />
)}
</div> </div>
); );
} else { } else {

View file

@ -10,6 +10,7 @@ import { useAuthContext } from '~/hooks/AuthContext';
import useAvatar from '~/hooks/Messages/useAvatar'; import useAvatar from '~/hooks/Messages/useAvatar';
import { ExportModal } from './ExportConversation'; import { ExportModal } from './ExportConversation';
import { LinkIcon, GearIcon } from '~/components'; import { LinkIcon, GearIcon } from '~/components';
import { UserIcon } from '~/components/svg';
import { useLocalize } from '~/hooks'; import { useLocalize } from '~/hooks';
import Settings from './Settings'; import Settings from './Settings';
import NavLink from './NavLink'; 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="-ml-0.9 -mt-0.8 h-8 w-7 flex-shrink-0">
<div className="relative flex"> <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> </div>
<div <div