From e716ca55f0459b9f01d8a9d8732925e8e33ccdcc Mon Sep 17 00:00:00 2001
From: Stijnus <72551117+Stijnus@users.noreply.github.com>
Date: Thu, 12 Dec 2024 23:46:41 +0100
Subject: [PATCH] Add Logo icons LLM's

Added the Next.js Image component import for optimized image loading
Modified the provider item layout to include an icon next to the provider name
Used template literals to dynamically load the correct icon based on the provider name
Added proper sizing (24x24) for consistent icon display
Added dark:invert class to ensure icons are visible in dark mode (assuming they're dark by default)
---
 app/components/settings/providers/ProvidersTab.tsx | 9 ++++++++-
 public/icons/Anthropic.svg                         | 4 ++++
 public/icons/Cohere.svg                            | 4 ++++
 public/icons/Deepseek.svg                          | 5 +++++
 public/icons/Google.svg                            | 4 ++++
 public/icons/Groq.svg                              | 4 ++++
 public/icons/HuggingFace.svg                       | 4 ++++
 public/icons/LMStudio.svg                          | 5 +++++
 public/icons/Mistral.svg                           | 4 ++++
 public/icons/Ollama.svg                            | 4 ++++
 public/icons/OpenAI.svg                            | 4 ++++
 public/icons/OpenAILike.svg                        | 4 ++++
 public/icons/OpenRouter.svg                        | 4 ++++
 public/icons/Together.svg                          | 4 ++++
 public/icons/xAI.svg                               | 5 +++++
 15 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 public/icons/Anthropic.svg
 create mode 100644 public/icons/Cohere.svg
 create mode 100644 public/icons/Deepseek.svg
 create mode 100644 public/icons/Google.svg
 create mode 100644 public/icons/Groq.svg
 create mode 100644 public/icons/HuggingFace.svg
 create mode 100644 public/icons/LMStudio.svg
 create mode 100644 public/icons/Mistral.svg
 create mode 100644 public/icons/Ollama.svg
 create mode 100644 public/icons/OpenAI.svg
 create mode 100644 public/icons/OpenAILike.svg
 create mode 100644 public/icons/OpenRouter.svg
 create mode 100644 public/icons/Together.svg
 create mode 100644 public/icons/xAI.svg

diff --git a/app/components/settings/providers/ProvidersTab.tsx b/app/components/settings/providers/ProvidersTab.tsx
index 309afb8..9e9da36 100644
--- a/app/components/settings/providers/ProvidersTab.tsx
+++ b/app/components/settings/providers/ProvidersTab.tsx
@@ -49,7 +49,14 @@ export default function ProvidersTab() {
           className="flex flex-col mb-2 provider-item hover:bg-bolt-elements-bg-depth-3 p-4 rounded-lg border border-bolt-elements-borderColor "
         >
           <div className="flex items-center justify-between mb-2">
-            <span className="text-bolt-elements-textPrimary">{provider.name}</span>
+            <div className="flex items-center gap-2">
+              <img
+                src={`/icons/${provider.name.toLowerCase()}.svg`}
+                alt={`${provider.name} icon`}
+                className="w-6 h-6 dark:invert"
+              />
+              <span className="text-bolt-elements-textPrimary">{provider.name}</span>
+            </div>
             <Switch
               className="ml-auto"
               checked={provider.settings.enabled}
diff --git a/public/icons/Anthropic.svg b/public/icons/Anthropic.svg
new file mode 100644
index 0000000..f9c8bf8
--- /dev/null
+++ b/public/icons/Anthropic.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 2L2 19.5455H22L12 2ZM12 6.5L18.5 18H5.5L12 6.5Z" fill="#000000"/>
+</svg>
diff --git a/public/icons/Cohere.svg b/public/icons/Cohere.svg
new file mode 100644
index 0000000..c7531c4
--- /dev/null
+++ b/public/icons/Cohere.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM15 6H9C7.34 6 6 7.34 6 9V15C6 16.66 7.34 18 9 18H15C16.66 18 18 16.66 18 15V9C18 7.34 16.66 6 15 6Z" fill="#000000"/>
+</svg>
diff --git a/public/icons/Deepseek.svg b/public/icons/Deepseek.svg
new file mode 100644
index 0000000..c3a4049
--- /dev/null
+++ b/public/icons/Deepseek.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M21.5 12c0 5.25-4.25 9.5-9.5 9.5S2.5 17.25 2.5 12 6.75 2.5 12 2.5s9.5 4.25 9.5 9.5zM12 4.5c-4.136 0-7.5 3.364-7.5 7.5 0 4.136 3.364 7.5 7.5 7.5 4.136 0 7.5-3.364 7.5-7.5 0-4.136-3.364-7.5-7.5-7.5zm3.5 7.5c0 1.933-1.567 3.5-3.5 3.5S8.5 13.933 8.5 12 10.067 8.5 12 8.5s3.5 1.567 3.5 3.5z" fill="#000000"/>
+    <path d="M15.5 7.5c-.828 0-1.5-.672-1.5-1.5s.672-1.5 1.5-1.5 1.5.672 1.5 1.5-.672 1.5-1.5 1.5z" fill="#000000"/>
+</svg>
diff --git a/public/icons/Google.svg b/public/icons/Google.svg
new file mode 100644
index 0000000..79b262a
--- /dev/null
+++ b/public/icons/Google.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z" fill="#000000"/>
+</svg>
diff --git a/public/icons/Groq.svg b/public/icons/Groq.svg
new file mode 100644
index 0000000..b198fb4
--- /dev/null
+++ b/public/icons/Groq.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 2L2 7V17L12 22L22 17V7L12 2ZM12 4.618L19.236 8.236L12 11.854L4.764 8.236L12 4.618ZM4 9.618L11 13.146V18.382L4 14.854V9.618ZM13 18.382V13.146L20 9.618V14.854L13 18.382Z" fill="#000000"/>
+</svg>
diff --git a/public/icons/HuggingFace.svg b/public/icons/HuggingFace.svg
new file mode 100644
index 0000000..6a70cd8
--- /dev/null
+++ b/public/icons/HuggingFace.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11.844 2.5c-.616 0-1.22.117-1.787.346a4.654 4.654 0 0 0-2.67-.346c-2.63.346-4.195 2.827-3.496 5.535.467 1.82 1.157 3.214 2.67 3.907v1.012c0 2.363 1.947 4.309 4.309 4.309 2.362 0 4.309-1.946 4.309-4.309v-.957c1.56-.693 2.25-2.143 2.67-3.962.7-2.708-.865-5.19-3.496-5.535a4.654 4.654 0 0 0-2.509.346zm.18 3.27a.82.82 0 0 1 .82.82.82.82 0 0 1-.82.819.82.82 0 0 1-.82-.82.82.82 0 0 1 .82-.819zm-3.725 0a.82.82 0 0 1 .82.82.82.82 0 0 1-.82.819.82.82 0 0 1-.82-.82.82.82 0 0 1 .82-.819zm3.95 3.158c-.484 1.161-1.55 1.955-2.786 1.955-1.237 0-2.302-.794-2.786-1.955-.064-.154.088-.316.251-.27.733.205 1.624.329 2.535.329.911 0 1.802-.124 2.535-.33.163-.045.315.117.251.271z" fill="#000000"/>
+</svg>
diff --git a/public/icons/LMStudio.svg b/public/icons/LMStudio.svg
new file mode 100644
index 0000000..d8d9887
--- /dev/null
+++ b/public/icons/LMStudio.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M5 4h14c.6 0 1 .4 1 1v14c0 .6-.4 1-1 1H5c-.6 0-1-.4-1-1V5c0-.6.4-1 1-1zm7 3c-2.2 0-4 1.8-4 4 0 1.5.8 2.8 2 3.4v1.6c0 1.1.9 2 2 2s2-.9 2-2v-1.6c1.2-.7 2-2 2-3.4 0-2.2-1.8-4-4-4zm0 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z" fill="#000000"/>
+    <path d="M9 8h2v2H9zm4 0h2v2h-2z" fill="#000000"/>
+</svg>
diff --git a/public/icons/Mistral.svg b/public/icons/Mistral.svg
new file mode 100644
index 0000000..7526259
--- /dev/null
+++ b/public/icons/Mistral.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12C22 6.477 17.523 2 12 2ZM12 4C16.418 4 20 7.582 20 12C20 16.418 16.418 20 12 20C7.582 20 4 16.418 4 12C4 7.582 7.582 4 12 4ZM12 6L7 18H17L12 6ZM12 9.5L14.5 16H9.5L12 9.5Z" fill="#000000"/>
+</svg>
diff --git a/public/icons/Ollama.svg b/public/icons/Ollama.svg
new file mode 100644
index 0000000..dd63997
--- /dev/null
+++ b/public/icons/Ollama.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12C22 6.477 17.523 2 12 2ZM12 4.5C16.142 4.5 19.5 7.858 19.5 12C19.5 16.142 16.142 19.5 12 19.5C7.858 19.5 4.5 16.142 4.5 12C4.5 7.858 7.858 4.5 12 4.5ZM12 7C9.239 7 7 9.239 7 12C7 14.761 9.239 17 12 17C14.761 17 17 14.761 17 12C17 9.239 14.761 7 12 7Z" fill="#000000"/>
+</svg>
diff --git a/public/icons/OpenAI.svg b/public/icons/OpenAI.svg
new file mode 100644
index 0000000..5af0871
--- /dev/null
+++ b/public/icons/OpenAI.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" fill="#000000"/>
+</svg>
diff --git a/public/icons/OpenAILike.svg b/public/icons/OpenAILike.svg
new file mode 100644
index 0000000..20e3813
--- /dev/null
+++ b/public/icons/OpenAILike.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M22.282 11.846c0-.813-.195-1.618-.57-2.341a4.757 4.757 0 0 0-1.573-1.724 4.813 4.813 0 0 0 .21-1.425c0-.813-.195-1.618-.57-2.341a4.846 4.846 0 0 0-1.557-1.724A4.846 4.846 0 0 0 16.026 1.5a4.846 4.846 0 0 0-2.341.195 4.846 4.846 0 0 0-1.724 1.557 4.813 4.813 0 0 0-1.425-.21c-.813 0-1.618.195-2.341.57a4.846 4.846 0 0 0-1.724 1.557A4.846 4.846 0 0 0 5.5 7.974c0 .488.065.975.195 1.441a4.757 4.757 0 0 0-1.573 1.724 4.813 4.813 0 0 0-.57 2.341c0 .813.195 1.618.57 2.341a4.757 4.757 0 0 0 1.573 1.724 4.813 4.813 0 0 0-.21 1.425c0 .813.195 1.618.57 2.341a4.846 4.846 0 0 0 1.557 1.724 4.846 4.846 0 0 0 2.195.791c.813 0 1.618-.195 2.341-.57a4.846 4.846 0 0 0 1.724-1.557c.456.13.928.195 1.425.195.813 0 1.618-.195 2.341-.57a4.846 4.846 0 0 0 1.724-1.557 4.846 4.846 0 0 0 .791-2.195c0-.488-.065-.975-.195-1.441a4.757 4.757 0 0 0 1.573-1.724c.375-.723.57-1.528.57-2.341z" fill="none" stroke="#000000" stroke-width="1.5"/>
+</svg>
diff --git a/public/icons/OpenRouter.svg b/public/icons/OpenRouter.svg
new file mode 100644
index 0000000..7cfe36b
--- /dev/null
+++ b/public/icons/OpenRouter.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 2L4.5 6V18L12 22L19.5 18V6L12 2ZM12 4.236L17.14 7L12 9.764L6.86 7L12 4.236ZM6.5 8.764L11.5 11.464V16.764L6.5 14.064V8.764ZM12.5 16.764V11.464L17.5 8.764V14.064L12.5 16.764Z" fill="#000000"/>
+</svg>
diff --git a/public/icons/Together.svg b/public/icons/Together.svg
new file mode 100644
index 0000000..a2975f1
--- /dev/null
+++ b/public/icons/Together.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM15 6H9C7.34 6 6 7.34 6 9V15C6 16.66 7.34 18 9 18H15C16.66 18 18 16.66 18 15V9C18 7.34 16.66 6 15 6ZM16 15C16 15.55 15.55 16 15 16H9C8.45 16 8 15.55 8 15V9C8 8.45 8.45 8 9 8H15C15.55 8 16 8.45 16 9V15Z" fill="#000000"/>
+</svg>
diff --git a/public/icons/xAI.svg b/public/icons/xAI.svg
new file mode 100644
index 0000000..5a57ea5
--- /dev/null
+++ b/public/icons/xAI.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3.5 3L9 12L3.5 21H6.5L10.5 14L14.5 21H17.5L12 12L17.5 3H14.5L10.5 10L6.5 3H3.5Z" fill="#000000"/>
+    <path d="M18 3L20.5 7L23 3H18Z" fill="#000000"/>
+</svg>