mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-16 16:30:15 +01:00
🧊 style: Adjust Endpoint Icons (#2070)
* 🧊 style: Adjust Endpoint Icons
* Update MessageParts.tsx
This commit is contained in:
Danny Avila
GitHub
parent
0bd8c2ba00
commit
d1c37e8bde
4 changed files with 129 additions and 115 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 548 B After Width: | Height: | Size: 4.7 KiB |
|
|
@ -55,11 +55,11 @@ export default function Message(props: TMessageProps) {
|
|||
onTouchMove={handleScroll}
|
||||
>
|
||||
<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>
|
||||
<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) ? (
|
||||
<span className=" direction-rtl w-40 overflow-x-scroll">{icon}</span>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ export default function Message(props: TMessageProps) {
|
|||
onTouchMove={handleScroll}
|
||||
>
|
||||
<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>
|
||||
<div className="pt-0.5">
|
||||
|
|
|
|||
|
|
@ -46,13 +46,13 @@ const Icon: React.FC<IconProps> = (props) => {
|
|||
>
|
||||
{!user?.avatar && !user?.username ? (
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgb(121, 137, 255)',
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
boxShadow: 'rgba(240, 246, 252, 0.1) 0px 0px 0px 1px',
|
||||
style={{
|
||||
backgroundColor: 'rgb(121, 137, 255)',
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
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 />
|
||||
</div>
|
||||
|
|
@ -61,124 +61,138 @@ const Icon: React.FC<IconProps> = (props) => {
|
|||
)}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
const endpointIcons = {
|
||||
[EModelEndpoint.assistants]: {
|
||||
icon: props.iconURL ? (
|
||||
}
|
||||
|
||||
const endpointIcons = {
|
||||
[EModelEndpoint.assistants]: {
|
||||
icon: props.iconURL ? (
|
||||
<div className="relative flex h-6 w-6 items-center justify-center">
|
||||
<div
|
||||
title={assistantName}
|
||||
style={{
|
||||
width: 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 className="h-6 w-6">
|
||||
<div className="relative flex h-full items-center justify-center rounded-full bg-white text-black">
|
||||
<AssistantIcon />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-6 w-6">
|
||||
<div className="shadow-stroke flex h-6 w-6 items-center justify-center overflow-hidden rounded-full">
|
||||
<AssistantIcon className="h-2/3 w-2/3 text-gray-400" />
|
||||
</div>
|
||||
),
|
||||
name: endpoint,
|
||||
},
|
||||
[EModelEndpoint.azureOpenAI]: {
|
||||
icon: <AzureMinimalIcon size={size * 0.5555555555555556} />,
|
||||
bg: 'linear-gradient(0.375turn, #61bde2, #4389d0)',
|
||||
name: 'ChatGPT',
|
||||
},
|
||||
[EModelEndpoint.openAI]: {
|
||||
icon: <GPTIcon size={size * 0.5555555555555556} />,
|
||||
bg:
|
||||
typeof model === 'string' && model.toLowerCase().includes('gpt-4')
|
||||
? '#AB68FF'
|
||||
: '#19C37D',
|
||||
name: 'ChatGPT',
|
||||
},
|
||||
[EModelEndpoint.gptPlugins]: {
|
||||
icon: <Plugin size={size * 0.7} />,
|
||||
bg: `rgba(69, 89, 164, ${button ? 0.75 : 1})`,
|
||||
name: 'Plugins',
|
||||
},
|
||||
[EModelEndpoint.google]: {
|
||||
icon: model?.toLowerCase()?.includes('code') ? (
|
||||
<CodeyIcon size={size * 0.75} />
|
||||
) : model?.toLowerCase()?.includes('gemini') ? (
|
||||
<GeminiIcon size={size * 0.7} />
|
||||
) : (
|
||||
<PaLMIcon size={size * 0.7} />
|
||||
),
|
||||
name: model?.toLowerCase()?.includes('code')
|
||||
? 'Codey'
|
||||
: model?.toLowerCase()?.includes('gemini')
|
||||
? 'Gemini'
|
||||
: 'PaLM2',
|
||||
},
|
||||
[EModelEndpoint.anthropic]: {
|
||||
icon: <AnthropicIcon size={size * 0.5555555555555556} />,
|
||||
bg: '#d09a74',
|
||||
name: 'Claude',
|
||||
},
|
||||
[EModelEndpoint.bingAI]: {
|
||||
icon: jailbreak ? (
|
||||
<img src="/assets/bingai-jb.png" alt="Bing Icon" />
|
||||
) : (
|
||||
<img src="/assets/bingai.png" alt="Sydney Icon" />
|
||||
),
|
||||
name: jailbreak ? 'Sydney' : 'BingAI',
|
||||
},
|
||||
[EModelEndpoint.chatGPTBrowser]: {
|
||||
icon: <GPTIcon size={size * 0.5555555555555556} />,
|
||||
bg:
|
||||
typeof model === 'string' && model.toLowerCase().includes('gpt-4')
|
||||
? '#AB68FF'
|
||||
: `rgba(0, 163, 255, ${button ? 0.75 : 1})`,
|
||||
name: 'ChatGPT',
|
||||
},
|
||||
[EModelEndpoint.custom]: {
|
||||
icon: <CustomMinimalIcon size={size * 0.7} />,
|
||||
name: 'Custom',
|
||||
},
|
||||
null: { icon: <GPTIcon size={size * 0.7} />, bg: 'grey', name: 'N/A' },
|
||||
default: {
|
||||
icon: (
|
||||
<UnknownIcon
|
||||
iconURL={props.iconURL}
|
||||
endpoint={endpoint ?? ''}
|
||||
className="icon-md"
|
||||
context="message"
|
||||
/>
|
||||
),
|
||||
name: endpoint,
|
||||
},
|
||||
};
|
||||
</div>
|
||||
),
|
||||
name: endpoint,
|
||||
},
|
||||
[EModelEndpoint.azureOpenAI]: {
|
||||
icon: <AzureMinimalIcon size={size * 0.5555555555555556} />,
|
||||
bg: 'linear-gradient(0.375turn, #61bde2, #4389d0)',
|
||||
name: 'ChatGPT',
|
||||
},
|
||||
[EModelEndpoint.openAI]: {
|
||||
icon: <GPTIcon size={size * 0.5555555555555556} />,
|
||||
bg:
|
||||
typeof model === 'string' && model.toLowerCase().includes('gpt-4') ? '#AB68FF' : '#19C37D',
|
||||
name: 'ChatGPT',
|
||||
},
|
||||
[EModelEndpoint.gptPlugins]: {
|
||||
icon: <Plugin size={size * 0.7} />,
|
||||
bg: `rgba(69, 89, 164, ${button ? 0.75 : 1})`,
|
||||
name: 'Plugins',
|
||||
},
|
||||
[EModelEndpoint.google]: {
|
||||
icon: model?.toLowerCase()?.includes('code') ? (
|
||||
<CodeyIcon size={size * 0.75} />
|
||||
) : model?.toLowerCase()?.includes('gemini') ? (
|
||||
<GeminiIcon size={size * 0.7} />
|
||||
) : (
|
||||
<PaLMIcon size={size * 0.7} />
|
||||
),
|
||||
name: model?.toLowerCase()?.includes('code')
|
||||
? 'Codey'
|
||||
: model?.toLowerCase()?.includes('gemini')
|
||||
? 'Gemini'
|
||||
: 'PaLM2',
|
||||
},
|
||||
[EModelEndpoint.anthropic]: {
|
||||
icon: <AnthropicIcon size={size * 0.5555555555555556} />,
|
||||
bg: '#d09a74',
|
||||
name: 'Claude',
|
||||
},
|
||||
[EModelEndpoint.bingAI]: {
|
||||
icon: jailbreak ? (
|
||||
<img src="/assets/bingai-jb.png" alt="Bing Icon" />
|
||||
) : (
|
||||
<img src="/assets/bingai.png" alt="Sydney Icon" />
|
||||
),
|
||||
name: jailbreak ? 'Sydney' : 'BingAI',
|
||||
},
|
||||
[EModelEndpoint.chatGPTBrowser]: {
|
||||
icon: <GPTIcon size={size * 0.5555555555555556} />,
|
||||
bg:
|
||||
typeof model === 'string' && model.toLowerCase().includes('gpt-4')
|
||||
? '#AB68FF'
|
||||
: `rgba(0, 163, 255, ${button ? 0.75 : 1})`,
|
||||
name: 'ChatGPT',
|
||||
},
|
||||
[EModelEndpoint.custom]: {
|
||||
icon: <CustomMinimalIcon size={size * 0.7} />,
|
||||
name: 'Custom',
|
||||
},
|
||||
null: { icon: <GPTIcon size={size * 0.7} />, bg: 'grey', name: 'N/A' },
|
||||
default: {
|
||||
icon: (
|
||||
<div className="h-6 w-6">
|
||||
<div className="overflow-hidden rounded-full">
|
||||
<UnknownIcon
|
||||
iconURL={props.iconURL}
|
||||
endpoint={endpoint ?? ''}
|
||||
className="h-full w-full object-contain"
|
||||
context="message"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
name: endpoint,
|
||||
},
|
||||
};
|
||||
|
||||
const { icon, bg, name } =
|
||||
endpoint && endpointIcons[endpoint] ? endpointIcons[endpoint] : endpointIcons.default;
|
||||
const { icon, bg, name } =
|
||||
endpoint && endpointIcons[endpoint] ? endpointIcons[endpoint] : endpointIcons.default;
|
||||
|
||||
return (
|
||||
<div
|
||||
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>
|
||||
);
|
||||
if (endpoint === EModelEndpoint.assistants) {
|
||||
return icon;
|
||||
}
|
||||
|
||||
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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue