Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-18 17:30:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

🧊 style: Adjust Endpoint Icons (#2070)

Browse source 
* 🧊 style: Adjust Endpoint Icons

* Update MessageParts.tsx
This commit is contained in:
Danny Avila 2024-03-11 13:40:31 -04:00 • committed by GitHub
parent 0bd8c2ba00
commit d1c37e8bde
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 129 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
client/public/assets/mistral.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 548 B

After

Width:  |  Height:  |  Size: 4.7 KiB

Before After
Before After

4
client/src/components/Chat/Messages/Message.tsx
View file

@ -55,11 +55,11 @@ export default function Message(props: TMessageProps) {
onTouchMove={handleScroll} onTouchMove={handleScroll}
> >
<div className="m-auto justify-center p-4 py-2 text-base md:gap-6 "> <div className="m-auto justify-center p-4 py-2 text-base md:gap-6 ">
<div className="} group mx-auto flex flex-1 gap-3 text-base md:max-w-3xl md:px-5 lg:max-w-[40rem] lg:px-1 xl:max-w-[48rem] xl:px-5"> <div className="final-completion group mx-auto flex flex-1 gap-3 text-base md:max-w-3xl md:px-5 lg:max-w-[40rem] lg:px-1 xl:max-w-[48rem] xl:px-5">
<div className="relative flex flex-shrink-0 flex-col items-end"> <div className="relative flex flex-shrink-0 flex-col items-end">
<div> <div>
<div className="pt-0.5"> <div className="pt-0.5">
<div className="gizmo-shadow-stroke flex h-5 w-5 items-center justify-center rounded-full"> <div className="flex h-6 w-6 items-center justify-center overflow-hidden rounded-full">
{typeof icon === 'string' && /[^\\x00-\\x7F]+/.test(icon as string) ? ( {typeof icon === 'string' && /[^\\x00-\\x7F]+/.test(icon as string) ? (
<span className=" direction-rtl w-40 overflow-x-scroll">{icon}</span> <span className=" direction-rtl w-40 overflow-x-scroll">{icon}</span>
) : ( ) : (

2
client/src/components/Chat/Messages/MessageParts.tsx
View file

@ -42,7 +42,7 @@ export default function Message(props: TMessageProps) {
onTouchMove={handleScroll} onTouchMove={handleScroll}
> >
<div className="m-auto justify-center p-4 py-2 text-base md:gap-6 "> <div className="m-auto justify-center p-4 py-2 text-base md:gap-6 ">
<div className="} group mx-auto flex flex-1 gap-3 text-base md:max-w-3xl md:px-5 lg:max-w-[40rem] lg:px-1 xl:max-w-[48rem] xl:px-5"> <div className="group mx-auto flex flex-1 gap-3 text-base md:max-w-3xl md:px-5 lg:max-w-[40rem] lg:px-1 xl:max-w-[48rem] xl:px-5">
<div className="relative flex flex-shrink-0 flex-col items-end"> <div className="relative flex flex-shrink-0 flex-col items-end">
<div> <div>
<div className="pt-0.5"> <div className="pt-0.5">

228
client/src/components/Endpoints/Icon.tsx
View file

@ -52,7 +52,7 @@ const Icon: React.FC<IconProps> = (props) => {
height: '20px', height: '20px',
boxShadow: 'rgba(240, 246, 252, 0.1) 0px 0px 0px 1px', boxShadow: 'rgba(240, 246, 252, 0.1) 0px 0px 0px 1px',
}} }}
className="relative flex h-9 w-9 items-center justify-center rounded-full p-1 text-white" className="relative flex h-9 w-9 items-center justify-center rounded-sm p-1 text-white"
> >
<UserIcon /> <UserIcon />
</div> </div>
@ -61,124 +61,138 @@ const Icon: React.FC<IconProps> = (props) => {
)} )}
</div> </div>
); );
} else { }
const endpointIcons = {
[EModelEndpoint.assistants]: { const endpointIcons = {
icon: props.iconURL ? ( [EModelEndpoint.assistants]: {
icon: props.iconURL ? (
<div className="relative flex h-6 w-6 items-center justify-center">
<div <div
title={assistantName} title={assistantName}
style={{ style={{
width: size, width: size,
height: size, height: size,
}} }}
className={cn('relative flex items-center justify-center', props.className ?? '')} className={cn('overflow-hidden rounded-full', props.className ?? '')}
> >
<img className="rounded-full" src={props.iconURL} alt={assistantName} /> <img
className="shadow-stroke h-full w-full object-cover"
src={props.iconURL}
alt={assistantName}
style={{ height: '80', width: '80' }}
/>
</div> </div>
) : ( </div>
<div className="h-6 w-6"> ) : (
<div className="relative flex h-full items-center justify-center rounded-full bg-white text-black"> <div className="h-6 w-6">
<AssistantIcon /> <div className="shadow-stroke flex h-6 w-6 items-center justify-center overflow-hidden rounded-full">
</div> <AssistantIcon className="h-2/3 w-2/3 text-gray-400" />
</div> </div>
), </div>
name: endpoint, ),
}, name: endpoint,
[EModelEndpoint.azureOpenAI]: { },
icon: <AzureMinimalIcon size={size * 0.5555555555555556} />, [EModelEndpoint.azureOpenAI]: {
bg: 'linear-gradient(0.375turn, #61bde2, #4389d0)', icon: <AzureMinimalIcon size={size * 0.5555555555555556} />,
name: 'ChatGPT', bg: 'linear-gradient(0.375turn, #61bde2, #4389d0)',
}, name: 'ChatGPT',
[EModelEndpoint.openAI]: { },
icon: <GPTIcon size={size * 0.5555555555555556} />, [EModelEndpoint.openAI]: {
bg: icon: <GPTIcon size={size * 0.5555555555555556} />,
typeof model === 'string' && model.toLowerCase().includes('gpt-4') bg:
? '#AB68FF' typeof model === 'string' && model.toLowerCase().includes('gpt-4') ? '#AB68FF' : '#19C37D',
: '#19C37D', name: 'ChatGPT',
name: 'ChatGPT', },
}, [EModelEndpoint.gptPlugins]: {
[EModelEndpoint.gptPlugins]: { icon: <Plugin size={size * 0.7} />,
icon: <Plugin size={size * 0.7} />, bg: `rgba(69, 89, 164, ${button ? 0.75 : 1})`,
bg: `rgba(69, 89, 164, ${button ? 0.75 : 1})`, name: 'Plugins',
name: 'Plugins', },
}, [EModelEndpoint.google]: {
[EModelEndpoint.google]: { icon: model?.toLowerCase()?.includes('code') ? (
icon: model?.toLowerCase()?.includes('code') ? ( <CodeyIcon size={size * 0.75} />
<CodeyIcon size={size * 0.75} /> ) : model?.toLowerCase()?.includes('gemini') ? (
) : model?.toLowerCase()?.includes('gemini') ? ( <GeminiIcon size={size * 0.7} />
<GeminiIcon size={size * 0.7} /> ) : (
) : ( <PaLMIcon size={size * 0.7} />
<PaLMIcon size={size * 0.7} /> ),
), name: model?.toLowerCase()?.includes('code')
name: model?.toLowerCase()?.includes('code') ? 'Codey'
? 'Codey' : model?.toLowerCase()?.includes('gemini')
: model?.toLowerCase()?.includes('gemini') ? 'Gemini'
? 'Gemini' : 'PaLM2',
: 'PaLM2', },
}, [EModelEndpoint.anthropic]: {
[EModelEndpoint.anthropic]: { icon: <AnthropicIcon size={size * 0.5555555555555556} />,
icon: <AnthropicIcon size={size * 0.5555555555555556} />, bg: '#d09a74',
bg: '#d09a74', name: 'Claude',
name: 'Claude', },
}, [EModelEndpoint.bingAI]: {
[EModelEndpoint.bingAI]: { icon: jailbreak ? (
icon: jailbreak ? ( <img src="/assets/bingai-jb.png" alt="Bing Icon" />
<img src="/assets/bingai-jb.png" alt="Bing Icon" /> ) : (
) : ( <img src="/assets/bingai.png" alt="Sydney Icon" />
<img src="/assets/bingai.png" alt="Sydney Icon" /> ),
), name: jailbreak ? 'Sydney' : 'BingAI',
name: jailbreak ? 'Sydney' : 'BingAI', },
}, [EModelEndpoint.chatGPTBrowser]: {
[EModelEndpoint.chatGPTBrowser]: { icon: <GPTIcon size={size * 0.5555555555555556} />,
icon: <GPTIcon size={size * 0.5555555555555556} />, bg:
bg: typeof model === 'string' && model.toLowerCase().includes('gpt-4')
typeof model === 'string' && model.toLowerCase().includes('gpt-4') ? '#AB68FF'
? '#AB68FF' : `rgba(0, 163, 255, ${button ? 0.75 : 1})`,
: `rgba(0, 163, 255, ${button ? 0.75 : 1})`, name: 'ChatGPT',
name: 'ChatGPT', },
}, [EModelEndpoint.custom]: {
[EModelEndpoint.custom]: { icon: <CustomMinimalIcon size={size * 0.7} />,
icon: <CustomMinimalIcon size={size * 0.7} />, name: 'Custom',
name: 'Custom', },
}, null: { icon: <GPTIcon size={size * 0.7} />, bg: 'grey', name: 'N/A' },
null: { icon: <GPTIcon size={size * 0.7} />, bg: 'grey', name: 'N/A' }, default: {
default: { icon: (
icon: ( <div className="h-6 w-6">
<UnknownIcon <div className="overflow-hidden rounded-full">
iconURL={props.iconURL} <UnknownIcon
endpoint={endpoint ?? ''} iconURL={props.iconURL}
className="icon-md" endpoint={endpoint ?? ''}
context="message" className="h-full w-full object-contain"
/> context="message"
), />
name: endpoint, </div>
}, </div>
}; ),
name: endpoint,
},
};
const { icon, bg, name } = const { icon, bg, name } =
endpoint && endpointIcons[endpoint] ? endpointIcons[endpoint] : endpointIcons.default; endpoint && endpointIcons[endpoint] ? endpointIcons[endpoint] : endpointIcons.default;
return ( if (endpoint === EModelEndpoint.assistants) {
<div return icon;
title={name}
style={{
width: size,
height: size,
}}
className={cn(
'relative flex items-center justify-center rounded-full text-black dark:text-white',
props.className || '',
)}
>
{icon}
{error && (
<span className="absolute right-0 top-[20px] -mr-2 flex h-3 w-3 items-center justify-center rounded-full border border-white bg-red-500 text-[10px] text-white">
!
</span>
)}
</div>
);
} }
return (
<div
title={name}
style={{
background: bg || 'transparent',
width: size,
height: size,
}}
className={cn(
'relative flex h-9 w-9 items-center justify-center rounded-sm p-1 text-white',
props.className || '',
)}
>
{icon}
{error && (
<span className="absolute right-0 top-[20px] -mr-2 flex h-3 w-3 items-center justify-center rounded-full border border-white bg-red-500 text-[10px] text-white">
!
</span>
)}
</div>
);
}; };
export default Icon; export default Icon;