From 0553062ac62668d19d8183ee6af80063b5108b2c Mon Sep 17 00:00:00 2001
From: Emerson Gomes <emerson.gomes@gmail.com>
Date: Tue, 26 Nov 2024 15:13:21 -0300
Subject: [PATCH] =?UTF-8?q?Adds=20icons=20for=20Google=20Gemini=20models?=
 =?UTF-8?q?=20and=20custom=20model=20icons=20for=20L=E2=80=A6=20(#3218)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Add description for Google Gemini models and custom model icons for LiteLLM (OpenAI) proxied models

* Adds Vertex AI aliases for Claude

---------

Co-authored-by: Emerson Gomes <emerson.gomes@thalesgroup.com>
---
 web/public/Gemini.svg                             |  1 +
 web/src/app/admin/configuration/llm/interfaces.ts | 12 ++++++++++--
 web/src/components/icons/icons.tsx                |  6 ++++++
 web/src/components/llm/LLMList.tsx                |  2 +-
 web/src/lib/hooks.ts                              | 10 ++++++++++
 web/src/lib/llm/utils.ts                          |  7 +++++++
 6 files changed, 35 insertions(+), 3 deletions(-)
 create mode 100755 web/public/Gemini.svg

diff --git a/web/public/Gemini.svg b/web/public/Gemini.svg
new file mode 100755
index 00000000000..787c8371079
--- /dev/null
+++ b/web/public/Gemini.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M16 8.016A8.522 8.522 0 008.016 16h-.032A8.521 8.521 0 000 8.016v-.032A8.521 8.521 0 007.984 0h.032A8.522 8.522 0 0016 7.984v.032z" fill="url(#prefix__paint0_radial_980_20147)"/><defs><radialGradient id="prefix__paint0_radial_980_20147" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(16.1326 5.4553 -43.70045 129.2322 1.588 6.503)"><stop offset=".067" stop-color="#9168C0"/><stop offset=".343" stop-color="#5684D1"/><stop offset=".672" stop-color="#1BA1E3"/></radialGradient></defs></svg>
\ No newline at end of file
diff --git a/web/src/app/admin/configuration/llm/interfaces.ts b/web/src/app/admin/configuration/llm/interfaces.ts
index 61f81311ecf..54c12d1e8fa 100644
--- a/web/src/app/admin/configuration/llm/interfaces.ts
+++ b/web/src/app/admin/configuration/llm/interfaces.ts
@@ -4,6 +4,7 @@ import {
   AzureIcon,
   CPUIcon,
   OpenAIIcon,
+  GeminiIcon,
   OpenSourceIcon,
 } from "@/components/icons/icons";
 import { FaRobot } from "react-icons/fa";
@@ -67,10 +68,17 @@ export interface LLMProviderDescriptor {
   display_model_names: string[] | null;
 }
 
-export const getProviderIcon = (providerName: string) => {
+export const getProviderIcon = (providerName: string, modelName?: string) => {
   switch (providerName) {
     case "openai":
-      return OpenAIIcon;
+      // Special cases for openai based on modelName
+      if (modelName?.toLowerCase().includes("gemini")) {
+        return GeminiIcon;
+      }
+      if (modelName?.toLowerCase().includes("claude")) {
+        return AnthropicIcon;
+      }
+      return OpenAIIcon; // Default for openai
     case "anthropic":
       return AnthropicIcon;
     case "bedrock":
diff --git a/web/src/components/icons/icons.tsx b/web/src/components/icons/icons.tsx
index a2f01084fd7..a3fca41242b 100644
--- a/web/src/components/icons/icons.tsx
+++ b/web/src/components/icons/icons.tsx
@@ -39,6 +39,7 @@ import Image, { StaticImageData } from "next/image";
 import jiraSVG from "../../../public/Jira.svg";
 import confluenceSVG from "../../../public/Confluence.svg";
 import openAISVG from "../../../public/Openai.svg";
+import geminiSVG from "../../../public/Gemini.svg";
 import openSourceIcon from "../../../public/OpenSource.png";
 import litellmIcon from "../../../public/LiteLLM.jpg";
 
@@ -1096,6 +1097,11 @@ export const OpenAIIcon = ({
   className = defaultTailwindCSS,
 }: IconProps) => <LogoIcon size={size} className={className} src={openAISVG} />;
 
+export const GeminiIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => <LogoIcon size={size} className={className} src={geminiSVG} />;
+
 export const VoyageIcon = ({
   size = 16,
   className = defaultTailwindCSS,
diff --git a/web/src/components/llm/LLMList.tsx b/web/src/components/llm/LLMList.tsx
index 271c568c6d1..9ff640aaa25 100644
--- a/web/src/components/llm/LLMList.tsx
+++ b/web/src/components/llm/LLMList.tsx
@@ -49,7 +49,7 @@ export const LlmList: React.FC<LlmListProps> = ({
               llmProvider.provider,
               modelName
             ),
-            icon: getProviderIcon(llmProvider.provider),
+            icon: getProviderIcon(llmProvider.provider, modelName),
           });
         }
       }
diff --git a/web/src/lib/hooks.ts b/web/src/lib/hooks.ts
index a19c1eb7c4b..3645f8a5b56 100644
--- a/web/src/lib/hooks.ts
+++ b/web/src/lib/hooks.ts
@@ -292,6 +292,16 @@ const MODEL_DISPLAY_NAMES: { [key: string]: string } = {
   "claude-instant-1.2": "Claude Instant 1.2",
   "claude-3-5-sonnet-20240620": "Claude 3.5 Sonnet",
   "claude-3-5-sonnet-20241022": "Claude 3.5 Sonnet (New)",
+  "claude-3-5-sonnet-v2@20241022": "Claude 3.5 Sonnet (New)",
+  "claude-3.5-sonnet-v2@20241022": "Claude 3.5 Sonnet (New)",
+
+  // Google Models
+  "gemini-1.5-pro": "Gemini 1.5 Pro",
+  "gemini-1.5-flash": "Gemini 1.5 Flash",
+  "gemini-1.5-pro-001": "Gemini 1.5 Pro",
+  "gemini-1.5-flash-001": "Gemini 1.5 Flash",
+  "gemini-1.5-pro-002": "Gemini 1.5 Pro (v2)",
+  "gemini-1.5-flash-002": "Gemini 1.5 Flash (v2)",
 
   // Bedrock models
   "meta.llama3-1-70b-instruct-v1:0": "Llama 3.1 70B",
diff --git a/web/src/lib/llm/utils.ts b/web/src/lib/llm/utils.ts
index 9a47dbc8071..b200ba39170 100644
--- a/web/src/lib/llm/utils.ts
+++ b/web/src/lib/llm/utils.ts
@@ -86,6 +86,13 @@ const MODEL_NAMES_SUPPORTING_IMAGE_INPUT = [
   "anthropic.claude-3-haiku-20240307-v1:0",
   "anthropic.claude-3-5-sonnet-20240620-v1:0",
   "anthropic.claude-3-5-sonnet-20241022-v2:0",
+  // google gemini model names
+  "gemini-1.5-pro",
+  "gemini-1.5-flash",
+  "gemini-1.5-pro-001",
+  "gemini-1.5-flash-001",
+  "gemini-1.5-pro-002",
+  "gemini-1.5-flash-002",
 ];
 
 export function checkLLMSupportsImageInput(model: string) {