From d1c37e8bdec73ae37d157862260275aedf907136 Mon Sep 17 00:00:00 2001
From: Danny Avila <messagedaniel@protonmail.com>
Date: Mon, 11 Mar 2024 13:40:31 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=8A=20style:=20Adjust=20Endpoint=20Ico?=
 =?UTF-8?q?ns=20(#2070)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🧊 style: Adjust Endpoint Icons

* Update MessageParts.tsx
---
 client/public/assets/mistral.png              | Bin 548 -> 4799 bytes
 .../src/components/Chat/Messages/Message.tsx  |   4 +-
 .../components/Chat/Messages/MessageParts.tsx |   2 +-
 client/src/components/Endpoints/Icon.tsx      | 238 +++++++++---------
 4 files changed, 129 insertions(+), 115 deletions(-)

diff --git a/client/public/assets/mistral.png b/client/public/assets/mistral.png
index ff2f3e8b63bd8f193f84c4d070152beed8ee7e80..beaffab92cccb427c718ca7aba76e79ff5ea38e5 100644
GIT binary patch
literal 4799
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

literal 548
zcmV+<0^9wGP)<h;3K|Lk000e1NJLTq001BW001Be0{{R3M5Kzw00027P)t-s0002;
za}EDY1Rfq9|G5DFJq08m9sN-P{mTIT00$=@9Lfd@_@n^;GXxqO9RC0Z|IPsaNdq1m
z8~#ZHn^X(`qyYYL0QYVH=V$=)rU1f#0spZ88yg!L8XNz40RL$K@oE6Gas>Y}1MV*b
z|IGmJzySTQ0RN-_`=0>JrUCzP0NP>!|4ag{a|HiM0`Elw%sdAF00!>?2Z}Kc%mfQY
zI21)D6-E^pDIysq8yXrK8-S}Y(f|MeBy>_vQvei0LtkKGZi<SEi;S<Zv9hwVv$M3-
z=kE9S{r&y^{{H^{{v&HTE&u=k{z*hZRCwB@)5}T&K@djaubWPgWF&|#R77y+!iDeu
z96o^vy6|q|Ej``hWx^nYS>&vW;-{zsRfY%?3goQMIEfk3x#eTU?V~<hXXR-L(E#fL
zX(*6afy*@$x_&qc`&V&lQ8GMa<3<cd)Hq#`jxA@E#t(0E>D0@oUz*+yVbEeIP_5fG
z?DyvfiupL`NQC#IV>%IE)Hfa97FnaCK{YYF<mQ3C#eoIFtFUKL;k}Bxe|5sF#r3_>
ziLDQ~`LwfLMtNlsQ7VzBtAjXn51U(*UkiuxicEW9ToqbByh0Mftm2OLS)VlfvuHQF
m>dpTmOsJ5T|DQJ$!|(-q1XZ9vsKFut0000<MNUMnLSTXl7VL2V

diff --git a/client/src/components/Chat/Messages/Message.tsx b/client/src/components/Chat/Messages/Message.tsx
index a0934d2bff..c95e6c9e0b 100644
--- a/client/src/components/Chat/Messages/Message.tsx
+++ b/client/src/components/Chat/Messages/Message.tsx
@@ -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>
                     ) : (
diff --git a/client/src/components/Chat/Messages/MessageParts.tsx b/client/src/components/Chat/Messages/MessageParts.tsx
index ba18632a55..c1c16122b8 100644
--- a/client/src/components/Chat/Messages/MessageParts.tsx
+++ b/client/src/components/Chat/Messages/MessageParts.tsx
@@ -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">
diff --git a/client/src/components/Endpoints/Icon.tsx b/client/src/components/Endpoints/Icon.tsx
index 4f65997b78..4d2ec9ae0b 100644
--- a/client/src/components/Endpoints/Icon.tsx
+++ b/client/src/components/Endpoints/Icon.tsx
@@ -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;