Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-22 18:26:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

feat: new endpoint-style icon

Browse source
This commit is contained in:
Wentao Lyu 2023-03-31 01:41:41 +08:00
parent 7e8b31cd09
commit 089ca5f120
5 changed files with 91 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

85
client/src/utils/getIcon.jsx Normal file
View file

@ -0,0 +1,85 @@
import { clsx } from 'clsx';
import React from 'react';
import { twMerge } from 'tailwind-merge';
import GPTIcon from '../components/svg/GPTIcon';
import BingIcon from '../components/svg/BingIcon';
const getIcon = props => {
// { size = 30, isCreatedByUser, model, chatGptLabel, error, ...props }
const { size = 30, isCreatedByUser, button } = props;
if (isCreatedByUser)
return (
<div
title="User"
style={{
background: 'radial-gradient(circle at 90% 110%, rgb(1 43 128), rgb(17, 139, 161))',
color: 'white',
fontSize: 12,
width: size,
height: size
}}
className={`relative flex items-center justify-center rounded-sm text-white ` + props?.className}
>
User
</div>
);
else if (!isCreatedByUser) {
const { endpoint, error } = props;
let icon = <GPTIcon size={size * 0.7} />;
let bg = 'grey';
let name = 'UNKNOWN';
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') {
const { chatGptLabel } = props;
icon = <GPTIcon size={size * 0.7} />;
bg = chatGptLabel
? `rgba(16, 163, 127, ${button ? 0.75 : 1})`
: `rgba(16, 163, 127, ${button ? 0.75 : 1})`;
name = chatGptLabel || 'ChatGPT';
} else if (endpoint === 'bingAI') {
const { jailbreak } = props;
icon = <BingIcon size={size * 0.7} />;
bg = jailbreak ? `radial-gradient(circle at 90% 110%, #F0F0FA, #D0E0F9)` : `transparent`;
name = jailbreak ? 'Sydney' : 'BingAI';
} else if (endpoint === 'chatGPTBrowser') {
icon = <GPTIcon size={size * 0.7} />;
bg = `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';
}
return (
<div
title={name}
style={{
background: bg || 'transparent',
width: size,
height: size
}}
className={`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;

80
client/src/utils/index.js
View file

@ -1,8 +1,5 @@
import { clsx } from 'clsx';
import React from 'react';
import { twMerge } from 'tailwind-merge';
import GPTIcon from '../components/svg/GPTIcon';
import BingIcon from '../components/svg/BingIcon';
export function cn(...inputs) {
return twMerge(clsx(inputs));
@ -37,80 +34,3 @@ export const languages = [
'perl',
'pascal'
];
export const getIconOfAi = ({
size = 30,
sender,
isCreatedByUser,
searchResult,
model,
chatGptLabel,
error,
...props
}) => {
const { button } = props;
const bgColors = {
chatgpt: `rgb(16, 163, 127${button ? ', 0.75' : ''})`,
chatgptBrowser: `rgb(25, 207, 207${button ? ', 0.75' : ''})`,
bingai: 'transparent',
sydney: 'radial-gradient(circle at 90% 110%, #F0F0FA, #D0E0F9)',
chatgptCustom: `rgb(0, 163, 255${button ? ', 0.75' : ''})`
};
if (isCreatedByUser)
return (
<div
title="User"
style={{
background: 'radial-gradient(circle at 90% 110%, rgb(1 43 128), rgb(17, 139, 161))',
color: 'white',
fontSize: 12,
width: size,
height: size
}}
className={`relative flex items-center justify-center rounded-sm text-white ` + props?.className}
>
User
</div>
);
else if (!isCreatedByUser) {
// TODO: use model from convo, rather than submit
// const { model, chatGptLabel, promptPrefix } = convo;
let background = bgColors[model];
const isBing = model === 'bingai' || model === 'sydney';
return (
<div
title={chatGptLabel || model}
style={{
background: background || 'radial-gradient(circle at 90% 110%, #F0F0FA, #D0E0F9)',
width: size,
height: size
}}
className={`relative flex items-center justify-center rounded-sm text-white ` + props?.className}
>
{isBing ? <BingIcon size={size * 0.7} /> : <GPTIcon size={size * 0.7} />}
{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>
);
} else
return (
<div
title="User"
style={{
background: 'radial-gradient(circle at 90% 110%, rgb(1 43 128), rgb(17, 139, 161))',
color: 'white',
fontSize: 12,
width: size,
height: size
}}
className={`relative flex items-center justify-center rounded-sm p-1 text-white ` + props?.className}
>
{chatGptLabel}
</div>
);
};