From 9f36e195bc4cde16c48dde86f331f9683be52b3f Mon Sep 17 00:00:00 2001
From: David Shin <42793498+dncc89@users.noreply.github.com>
Date: Mon, 15 May 2023 23:08:30 +0900
Subject: [PATCH] Update GPT4 model icon (#274)

---
 .../components/Input/NewConversationMenu/PresetItem.jsx    | 3 ++-
 client/src/utils/getIcon.jsx                               | 7 ++-----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Input/NewConversationMenu/PresetItem.jsx b/client/src/components/Input/NewConversationMenu/PresetItem.jsx
index b963514cf6..6de86ee5b9 100644
--- a/client/src/components/Input/NewConversationMenu/PresetItem.jsx
+++ b/client/src/components/Input/NewConversationMenu/PresetItem.jsx
@@ -10,6 +10,7 @@ export default function PresetItem({ preset = {}, value, onSelect, onChangePrese
   const icon = getIcon({
     size: 20,
     endpoint: preset?.endpoint,
+    model: preset?.model,
     error: false,
     className: 'mr-2'
   });
@@ -21,7 +22,7 @@ export default function PresetItem({ preset = {}, value, onSelect, onChangePrese
       const { chatGptLabel, model } = preset;
       if (model) _title += `: ${model}`;
       if (chatGptLabel) _title += ` as ${chatGptLabel}`;
-    }  else if (endpoint === 'google') {
+    } else if (endpoint === 'google') {
       const { modelLabel, model } = preset;
       if (model) _title += `: ${model}`;
       if (modelLabel) _title += ` as ${modelLabel}`;
diff --git a/client/src/utils/getIcon.jsx b/client/src/utils/getIcon.jsx
index bafedab435..74390dc405 100644
--- a/client/src/utils/getIcon.jsx
+++ b/client/src/utils/getIcon.jsx
@@ -30,15 +30,13 @@ const getIcon = 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') {
       const { chatGptLabel } = props;
-
       icon = <GPTIcon size={size * 0.7} />;
-      bg = model && model.toLowerCase() === 'gpt-4' ? 'black' : (chatGptLabel
+      bg = model && model.toLowerCase() === 'gpt-4' ? '#AB68FF' : (chatGptLabel
         ? `rgba(16, 163, 127, ${button ? 0.75 : 1})`
         : `rgba(16, 163, 127, ${button ? 0.75 : 1})`);
       name = chatGptLabel || 'ChatGPT';
@@ -48,13 +46,12 @@ const getIcon = props => {
       name = modelLabel || 'PaLM2';
     } 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 = model && model.toLowerCase() === 'gpt-4' ? 'black' : `rgba(0, 163, 255, ${button ? 0.75 : 1})`;
+      bg = model && model.toLowerCase() === 'gpt-4' ? '#AB68FF' : `rgba(0, 163, 255, ${button ? 0.75 : 1})`;
       name = 'ChatGPT';
     } else if (endpoint === null) {
       icon = <GPTIcon size={size * 0.7} />;