mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-01-05 18:18:51 +01:00
feat: icons for chat identification (#879)
* Added endpoint picture * plugin icon fix & new minimalist icon * changed from BingAIMinimalIcon to BingAIMinimalistIcon * fix(Conversation) reduced the space between the icon and the title * refactor(getIcon & getMinimalIcon) * moved IconProps in ~/common * refactor(getIcon & getMinimalistIcon) from switch/case to map * fix(getIcon.tsx) renamed to Icon * renamed all from Minimalist to Minimal
This commit is contained in:
Marco Beretta
GitHub
parent
6358383001
commit
2419af8748
18 changed files with 356 additions and 126 deletions
102
client/src/components/Endpoints/Icon.tsx
Normal file
102
client/src/components/Endpoints/Icon.tsx
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
import React from 'react';
|
||||
import { Plugin, GPTIcon, AnthropicIcon } from '~/components/svg';
|
||||
import { useAuthContext } from '~/hooks';
|
||||
import { cn } from '~/utils';
|
||||
import { IconProps } from '~/common';
|
||||
|
||||
const Icon: React.FC<IconProps> = (props) => {
|
||||
const { size = 30, isCreatedByUser, button, model = true, endpoint, error, jailbreak } = props;
|
||||
|
||||
const { user } = useAuthContext();
|
||||
|
||||
if (isCreatedByUser) {
|
||||
const username = user?.name || 'User';
|
||||
|
||||
return (
|
||||
<div
|
||||
title={username}
|
||||
style={{
|
||||
width: size,
|
||||
height: size,
|
||||
}}
|
||||
className={`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"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
const endpointIcons = {
|
||||
azureOpenAI: {
|
||||
icon: <GPTIcon size={size * 0.7} />,
|
||||
bg: 'linear-gradient(0.375turn, #61bde2, #4389d0)',
|
||||
name: 'ChatGPT',
|
||||
},
|
||||
openAI: {
|
||||
icon: <GPTIcon size={size * 0.7} />,
|
||||
bg:
|
||||
typeof model === 'string' && model.toLowerCase().startsWith('gpt-4')
|
||||
? '#AB68FF'
|
||||
: '#19C37D',
|
||||
name: 'ChatGPT',
|
||||
},
|
||||
gptPlugins: {
|
||||
icon: <Plugin size={size * 0.7} />,
|
||||
bg: `rgba(69, 89, 164, ${button ? 0.75 : 1})`,
|
||||
name: 'Plugins',
|
||||
},
|
||||
google: { icon: <img src="/assets/google-palm.svg" alt="Palm Icon" />, name: 'PaLM2' },
|
||||
anthropic: { icon: <AnthropicIcon size={size * 0.7} />, bg: '#d09a74', name: 'Claude' },
|
||||
bingAI: {
|
||||
icon: jailbreak ? (
|
||||
<img src="/assets/bingai-jb.png" alt="Bing Icon" />
|
||||
) : (
|
||||
<img src="/assets/bingai.png" alt="Sydney Icon" />
|
||||
),
|
||||
name: jailbreak ? 'Sydney' : 'BingAI',
|
||||
},
|
||||
chatGPTBrowser: {
|
||||
icon: <GPTIcon size={size * 0.7} />,
|
||||
bg:
|
||||
typeof model === 'string' && model.toLowerCase().startsWith('gpt-4')
|
||||
? '#AB68FF'
|
||||
: `rgba(0, 163, 255, ${button ? 0.75 : 1})`,
|
||||
name: 'ChatGPT',
|
||||
},
|
||||
null: { icon: <GPTIcon size={size * 0.7} />, bg: 'grey', name: 'N/A' },
|
||||
default: { icon: <GPTIcon size={size * 0.7} />, bg: 'grey', name: 'UNKNOWN' },
|
||||
};
|
||||
|
||||
const { icon, bg, name } = endpointIcons[endpoint] || endpointIcons.default;
|
||||
|
||||
return (
|
||||
<div
|
||||
title={name}
|
||||
style={{
|
||||
background: bg || 'transparent',
|
||||
width: size,
|
||||
height: size,
|
||||
}}
|
||||
className={cn(
|
||||
'relative flex items-center justify-center rounded-sm text-white ',
|
||||
props.className || '',
|
||||
)}
|
||||
>
|
||||
{icon}
|
||||
{error && (
|
||||
<span className="absolute right-0 top-[20px] -mr-2 flex h-4 w-4 items-center justify-center rounded-full border border-white bg-red-500 text-[10px] text-white">
|
||||
!
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default Icon;
|
||||
58
client/src/components/Endpoints/MinimalIcon.tsx
Normal file
58
client/src/components/Endpoints/MinimalIcon.tsx
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
import React from 'react';
|
||||
import {
|
||||
AzureMinimalIcon,
|
||||
OpenAIMinimalIcon,
|
||||
ChatGPTMinimalIcon,
|
||||
PluginMinimalIcon,
|
||||
BingAIMinimalIcon,
|
||||
PaLMinimalIcon,
|
||||
AnthropicMinimalIcon,
|
||||
} from '~/components/svg';
|
||||
import { cn } from '~/utils';
|
||||
import { IconProps } from '~/common';
|
||||
|
||||
const MinimalIcon: React.FC<IconProps> = (props) => {
|
||||
const { size = 30, error } = props;
|
||||
|
||||
let endpoint = 'default'; // Default value for endpoint
|
||||
|
||||
if (typeof props.endpoint === 'string') {
|
||||
endpoint = props.endpoint;
|
||||
}
|
||||
|
||||
const endpointIcons = {
|
||||
azureOpenAI: { icon: <AzureMinimalIcon />, name: props.chatGptLabel || 'ChatGPT' },
|
||||
openAI: { icon: <OpenAIMinimalIcon />, name: props.chatGptLabel || 'ChatGPT' },
|
||||
gptPlugins: { icon: <PluginMinimalIcon />, name: 'Plugins' },
|
||||
google: { icon: <PaLMinimalIcon />, name: props.modelLabel || 'PaLM2' },
|
||||
anthropic: { icon: <AnthropicMinimalIcon />, name: props.modelLabel || 'Claude' },
|
||||
bingAI: { icon: <BingAIMinimalIcon />, name: 'BingAI' },
|
||||
chatGPTBrowser: { icon: <ChatGPTMinimalIcon />, name: 'ChatGPT' },
|
||||
default: { icon: <OpenAIMinimalIcon />, name: 'UNKNOWN' },
|
||||
};
|
||||
|
||||
const { icon, name } = endpointIcons[endpoint];
|
||||
|
||||
return (
|
||||
<div
|
||||
title={name}
|
||||
style={{
|
||||
width: size,
|
||||
height: size,
|
||||
}}
|
||||
className={cn(
|
||||
'relative flex items-center justify-center rounded-sm text-white',
|
||||
props.className || '',
|
||||
)}
|
||||
>
|
||||
{icon}
|
||||
{error && (
|
||||
<span className="absolute right-0 top-[20px] -mr-2 flex h-4 w-4 items-center justify-center rounded-full border border-white bg-red-500 text-[10px] text-white">
|
||||
!
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MinimalIcon;
|
||||
|
|
@ -1,114 +0,0 @@
|
|||
import { Plugin, GPTIcon, AnthropicIcon } from '~/components/svg';
|
||||
import { useAuthContext } from '~/hooks';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
const getIcon = (props) => {
|
||||
const { size = 30, isCreatedByUser, button, model, message = true } = props;
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
const { user } = useAuthContext();
|
||||
|
||||
if (isCreatedByUser) {
|
||||
return (
|
||||
<div
|
||||
title={user?.name || 'User'}
|
||||
style={{
|
||||
width: size,
|
||||
height: size,
|
||||
}}
|
||||
className={'relative flex items-center justify-center' + props?.className}
|
||||
>
|
||||
<img
|
||||
className="rounded-sm"
|
||||
src={
|
||||
user?.avatar ||
|
||||
`https://api.dicebear.com/6.x/initials/svg?seed=${
|
||||
user?.name || 'User'
|
||||
}&fontFamily=Verdana&fontSize=36`
|
||||
}
|
||||
alt="avatar"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
} else if (!isCreatedByUser) {
|
||||
const { endpoint, error } = props;
|
||||
|
||||
let icon, bg, name;
|
||||
if (endpoint === 'azureOpenAI') {
|
||||
const { chatGptLabel } = props;
|
||||
icon = <GPTIcon size={size * 0.7} />;
|
||||
bg = 'linear-gradient(0.375turn, #61bde2, #4389d0)';
|
||||
name = chatGptLabel || 'ChatGPT';
|
||||
} else if (endpoint === 'openAI' || (endpoint === 'gptPlugins' && message)) {
|
||||
const { chatGptLabel } = props;
|
||||
icon = <GPTIcon size={size * 0.7} />;
|
||||
bg =
|
||||
model && model.toLowerCase().startsWith('gpt-4')
|
||||
? '#AB68FF'
|
||||
: chatGptLabel
|
||||
? `rgba(16, 163, 127, ${button ? 0.75 : 1})`
|
||||
: `rgba(16, 163, 127, ${button ? 0.75 : 1})`;
|
||||
name = chatGptLabel || 'ChatGPT';
|
||||
} else if (endpoint === 'gptPlugins' && !message) {
|
||||
icon = <Plugin size={size * 0.7} />;
|
||||
bg = `rgba(69, 89, 164, ${button ? 0.75 : 1})`;
|
||||
name = 'Plugins';
|
||||
} else if (endpoint === 'google') {
|
||||
const { modelLabel } = props;
|
||||
icon = <img src="/assets/google-palm.svg" alt="Palm Icon" />;
|
||||
name = modelLabel || 'PaLM2';
|
||||
} else if (endpoint === 'anthropic') {
|
||||
const { modelLabel } = props;
|
||||
icon = <AnthropicIcon size={size * 0.7} />;
|
||||
bg = '#d09a74';
|
||||
name = modelLabel || 'Claude';
|
||||
} else if (endpoint === 'bingAI') {
|
||||
const { jailbreak } = props;
|
||||
if (jailbreak) {
|
||||
icon = <img src="/assets/bingai-jb.png" alt="Bing Icon" />;
|
||||
name = 'Sydney';
|
||||
} else {
|
||||
icon = <img src="/assets/bingai.png" alt="Sydney Icon" />;
|
||||
name = 'BingAI';
|
||||
}
|
||||
} else if (endpoint === 'chatGPTBrowser') {
|
||||
icon = <GPTIcon size={size * 0.7} />;
|
||||
bg =
|
||||
model && model.toLowerCase().startsWith('gpt-4')
|
||||
? '#AB68FF'
|
||||
: `rgba(0, 163, 255, ${button ? 0.75 : 1})`;
|
||||
name = 'ChatGPT';
|
||||
} else if (endpoint === null) {
|
||||
icon = <GPTIcon size={size * 0.7} />;
|
||||
bg = 'grey';
|
||||
name = 'N/A';
|
||||
} else {
|
||||
icon = <GPTIcon size={size * 0.7} />;
|
||||
bg = 'grey';
|
||||
name = 'UNKNOWN';
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
title={name}
|
||||
style={{
|
||||
background: bg || 'transparent',
|
||||
width: size,
|
||||
height: size,
|
||||
}}
|
||||
className={cn(
|
||||
'relative flex items-center justify-center rounded-sm text-white ',
|
||||
props?.className ?? '',
|
||||
)}
|
||||
>
|
||||
{icon}
|
||||
{error && (
|
||||
<span className="absolute right-0 top-[20px] -mr-2 flex h-4 w-4 items-center justify-center rounded-full border border-white bg-red-500 text-[10px] text-white">
|
||||
!
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default getIcon;
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
export { default as getIcon } from './getIcon';
|
||||
export { default as Icon } from './Icon';
|
||||
export { default as MinimalIcon } from './MinimalIcon';
|
||||
export { default as EndpointSettings } from './EndpointSettings';
|
||||
export { default as EditPresetDialog } from './EditPresetDialog';
|
||||
export { default as SaveAsPresetDialog } from './SaveAsPresetDialog';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue