From ce78b4ff620456fed64dc09019143f59b8d584a2 Mon Sep 17 00:00:00 2001
From: ItzCrazyKns <95534749+ItzCrazyKns@users.noreply.github.com>
Date: Tue, 21 Oct 2025 16:32:40 +0530
Subject: [PATCH] feat(app): show "add model" button

---
 .../Sections/Models/ModelProvider.tsx         | 178 +++++++++---------
 src/components/Setup/SetupConfig.tsx          |   3 +-
 2 files changed, 88 insertions(+), 93 deletions(-)

diff --git a/src/components/Settings/Sections/Models/ModelProvider.tsx b/src/components/Settings/Sections/Models/ModelProvider.tsx
index 8a2b0f6..79928c2 100644
--- a/src/components/Settings/Sections/Models/ModelProvider.tsx
+++ b/src/components/Settings/Sections/Models/ModelProvider.tsx
@@ -112,100 +112,96 @@ const ModelProvider = ({
           >
             <div className="border-t border-light-200 dark:border-dark-200" />
             <div className="flex flex-col gap-y-4 px-5 py-4">
-              {modelProvider.chatModels.length > 0 && (
-                <div className="flex flex-col gap-y-2">
-                  <div className="flex flex-row w-full justify-between items-center">
-                    <p className="text-[11px] lg:text-xs text-black/70 dark:text-white/70">
-                      Chat models
-                    </p>
-                    <AddModel
-                      providerId={modelProvider.id}
-                      setProviders={setProviders}
-                      type="chat"
-                    />
-                  </div>
-                  <div className="flex flex-col gap-2">
-                    {modelProvider.chatModels.some((m) => m.key === 'error') ? (
-                      <div className="flex flex-row items-center gap-2 text-xs lg:text-sm text-red-500 dark:text-red-400 rounded-lg bg-red-50 dark:bg-red-950/20 px-3 py-2 border border-red-200 dark:border-red-900/30">
-                        <AlertCircle size={16} className="shrink-0" />
-                        <span className="break-words">
-                          {
-                            modelProvider.chatModels.find(
-                              (m) => m.key === 'error',
-                            )?.name
-                          }
-                        </span>
-                      </div>
-                    ) : (
-                      <div className="flex flex-row flex-wrap gap-2">
-                        {modelProvider.chatModels.map((model, index) => (
-                          <div
-                            key={`${modelProvider.id}-chat-${model.key}-${index}`}
-                            className="flex flex-row items-center space-x-1 text-xs lg:text-sm text-black/70 dark:text-white/70 rounded-lg bg-light-secondary dark:bg-dark-secondary px-3 py-1.5"
-                          >
-                            <span>{model.name}</span>
-                            <button
-                              onClick={() => {
-                                handleModelDelete('chat', model.key);
-                              }}
-                            >
-                              <X size={12} />
-                            </button>
-                          </div>
-                        ))}
-                      </div>
-                    )}
-                  </div>
+              <div className="flex flex-col gap-y-2">
+                <div className="flex flex-row w-full justify-between items-center">
+                  <p className="text-[11px] lg:text-xs text-black/70 dark:text-white/70">
+                    Chat models
+                  </p>
+                  <AddModel
+                    providerId={modelProvider.id}
+                    setProviders={setProviders}
+                    type="chat"
+                  />
                 </div>
-              )}
-              {modelProvider.embeddingModels.length > 0 && (
-                <div className="flex flex-col gap-y-2">
-                  <div className="flex flex-row w-full justify-between items-center">
-                    <p className="text-[11px] lg:text-xs text-black/70 dark:text-white/70">
-                      Embedding models
-                    </p>
-                    <AddModel
-                      providerId={modelProvider.id}
-                      setProviders={setProviders}
-                      type="embedding"
-                    />
-                  </div>
-                  <div className="flex flex-col gap-2">
-                    {modelProvider.embeddingModels.some(
-                      (m) => m.key === 'error',
-                    ) ? (
-                      <div className="flex flex-row items-center gap-2 text-xs lg:text-sm text-red-500 dark:text-red-400 rounded-lg bg-red-50 dark:bg-red-950/20 px-3 py-2 border border-red-200 dark:border-red-900/30">
-                        <AlertCircle size={16} className="shrink-0" />
-                        <span className="break-words">
-                          {
-                            modelProvider.embeddingModels.find(
-                              (m) => m.key === 'error',
-                            )?.name
-                          }
-                        </span>
-                      </div>
-                    ) : (
-                      <div className="flex flex-row flex-wrap gap-2">
-                        {modelProvider.embeddingModels.map((model, index) => (
-                          <div
-                            key={`${modelProvider.id}-embedding-${model.key}-${index}`}
-                            className="flex flex-row items-center space-x-1 text-xs lg:text-sm text-black/70 dark:text-white/70 rounded-lg bg-light-secondary dark:bg-dark-secondary px-3 py-1.5"
+                <div className="flex flex-col gap-2">
+                  {modelProvider.chatModels.some((m) => m.key === 'error') ? (
+                    <div className="flex flex-row items-center gap-2 text-xs lg:text-sm text-red-500 dark:text-red-400 rounded-lg bg-red-50 dark:bg-red-950/20 px-3 py-2 border border-red-200 dark:border-red-900/30">
+                      <AlertCircle size={16} className="shrink-0" />
+                      <span className="break-words">
+                        {
+                          modelProvider.chatModels.find(
+                            (m) => m.key === 'error',
+                          )?.name
+                        }
+                      </span>
+                    </div>
+                  ) : (
+                    <div className="flex flex-row flex-wrap gap-2">
+                      {modelProvider.chatModels.map((model, index) => (
+                        <div
+                          key={`${modelProvider.id}-chat-${model.key}-${index}`}
+                          className="flex flex-row items-center space-x-1 text-xs lg:text-sm text-black/70 dark:text-white/70 rounded-lg bg-light-secondary dark:bg-dark-secondary px-3 py-1.5"
+                        >
+                          <span>{model.name}</span>
+                          <button
+                            onClick={() => {
+                              handleModelDelete('chat', model.key);
+                            }}
                           >
-                            <span>{model.name}</span>
-                            <button
-                              onClick={() => {
-                                handleModelDelete('embedding', model.key);
-                              }}
-                            >
-                              <X size={12} />
-                            </button>
-                          </div>
-                        ))}
-                      </div>
-                    )}
-                  </div>
+                            <X size={12} />
+                          </button>
+                        </div>
+                      ))}
+                    </div>
+                  )}
                 </div>
-              )}
+              </div>
+              <div className="flex flex-col gap-y-2">
+                <div className="flex flex-row w-full justify-between items-center">
+                  <p className="text-[11px] lg:text-xs text-black/70 dark:text-white/70">
+                    Embedding models
+                  </p>
+                  <AddModel
+                    providerId={modelProvider.id}
+                    setProviders={setProviders}
+                    type="embedding"
+                  />
+                </div>
+                <div className="flex flex-col gap-2">
+                  {modelProvider.embeddingModels.some(
+                    (m) => m.key === 'error',
+                  ) ? (
+                    <div className="flex flex-row items-center gap-2 text-xs lg:text-sm text-red-500 dark:text-red-400 rounded-lg bg-red-50 dark:bg-red-950/20 px-3 py-2 border border-red-200 dark:border-red-900/30">
+                      <AlertCircle size={16} className="shrink-0" />
+                      <span className="break-words">
+                        {
+                          modelProvider.embeddingModels.find(
+                            (m) => m.key === 'error',
+                          )?.name
+                        }
+                      </span>
+                    </div>
+                  ) : (
+                    <div className="flex flex-row flex-wrap gap-2">
+                      {modelProvider.embeddingModels.map((model, index) => (
+                        <div
+                          key={`${modelProvider.id}-embedding-${model.key}-${index}`}
+                          className="flex flex-row items-center space-x-1 text-xs lg:text-sm text-black/70 dark:text-white/70 rounded-lg bg-light-secondary dark:bg-dark-secondary px-3 py-1.5"
+                        >
+                          <span>{model.name}</span>
+                          <button
+                            onClick={() => {
+                              handleModelDelete('embedding', model.key);
+                            }}
+                          >
+                            <X size={12} />
+                          </button>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
             </div>
           </motion.div>
         )}
diff --git a/src/components/Setup/SetupConfig.tsx b/src/components/Setup/SetupConfig.tsx
index 18b07e9..334974f 100644
--- a/src/components/Setup/SetupConfig.tsx
+++ b/src/components/Setup/SetupConfig.tsx
@@ -63,8 +63,7 @@ const SetupConfig = ({
     }
   };
 
-  const hasProviders =
-    providers.filter((p) => p.chatModels.length > 0).length > 0;
+  const hasProviders = providers.length > 0;
 
   return (
     <div className="w-[95vw] md:w-[80vw] lg:w-[65vw] mx-auto px-2 sm:px-4 md:px-6 flex flex-col space-y-6">