feat: new endpoint-style icon

client/src/components/Input/Models/ModelItem.jsx

@@ -6,7 +6,7 @@ import { DialogTrigger } from '../../ui/Dialog.tsx';
 import RenameButton from '../../Conversations/RenameButton';
 import TrashIcon from '../../svg/TrashIcon';
 import manualSWR from '~/utils/fetchers';
-import { getIconOfModel } from '~/utils';
+import getIcon from '~/utils/getIcon';
 
 import store from '~/store';
 
@@ -31,7 +31,7 @@ export default function ModelItem({ model: _model, value, onSelect }) {
     setCustomGPTModels(fetchedModels);
   });
 
-  const icon = getIconOfModel({
+  const icon = getIcon({
     size: 20,
     sender: chatGptLabel || model,
     isCreatedByUser: false,

client/src/components/Input/Models/ModelMenu.jsx

@@ -4,7 +4,7 @@ import axios from 'axios';
 import ModelDialog from './ModelDialog';
 import MenuItems from './MenuItems';
 import { swr } from '~/utils/fetchers';
-import { getIconOfModel } from '~/utils';
+import getIcon from '~/utils/getIcon';
 
 import { Button } from '../../ui/Button.tsx';
 import {
@@ -145,7 +145,7 @@ export default function ModelMenu() {
   ];
 
   const colorProps = model === 'chatgpt' ? chatgptColorProps : defaultColorProps;
-  const icon = getIconOfModel({
+  const icon = getIcon({
     size: 32,
     sender: chatGptLabel || model,
     isCreatedByUser: false,

client/src/components/Messages/Message.jsx

@@ -6,7 +6,7 @@ import MultiMessage from './MultiMessage';
 import HoverButtons from './HoverButtons';
 import SiblingSwitch from './SiblingSwitch';
 import { fetchById } from '~/utils/fetchers';
-import { getIconOfAi } from '~/utils';
+import getIcon from '~/utils/getIcon';
 import { useMessageHandler } from '~/utils/handleSubmit';
 
 import store from '~/store';
@@ -60,7 +60,7 @@ export default function Message({
       'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 bg-white dark:text-gray-100 group dark:bg-gray-800'
   };
 
-  const icon = getIconOfAi({
+  const icon = getIcon({
     ...conversation,
     ...message
   });

client/src/utils/getIcon.jsx

@@ -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;

client/src/utils/index.js

@@ -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>
-    );
-};