move embedding options to their own component (#387)

frontend/src/components/EmbeddingSelection/AzureAiOptions/index.jsx

@@ -0,0 +1,53 @@
+export default function AzureAiOptions({ settings }) {
+  return (
+    <>
+      <div className="flex flex-col w-60">
+        <label className="text-white text-sm font-semibold block mb-4">
+          Azure Service Endpoint
+        </label>
+        <input
+          type="url"
+          name="AzureOpenAiEndpoint"
+          className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+          placeholder="https://my-azure.openai.azure.com"
+          defaultValue={settings?.AzureOpenAiEndpoint}
+          required={true}
+          autoComplete="off"
+          spellCheck={false}
+        />
+      </div>
+
+      <div className="flex flex-col w-60">
+        <label className="text-white text-sm font-semibold block mb-4">
+          API Key
+        </label>
+        <input
+          type="password"
+          name="AzureOpenAiKey"
+          className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+          placeholder="Azure OpenAI API Key"
+          defaultValue={settings?.AzureOpenAiKey ? "*".repeat(20) : ""}
+          required={true}
+          autoComplete="off"
+          spellCheck={false}
+        />
+      </div>
+
+      <div className="flex flex-col w-60">
+        <label className="text-white text-sm font-semibold block mb-4">
+          Embedding Deployment Name
+        </label>
+        <input
+          type="text"
+          name="AzureOpenAiEmbeddingModelPref"
+          className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+          placeholder="Azure OpenAI embedding model deployment name"
+          defaultValue={settings?.AzureOpenAiEmbeddingModelPref}
+          required={true}
+          autoComplete="off"
+          spellCheck={false}
+        />
+      </div>
+    </>
+  );
+}

frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx

@@ -0,0 +1,105 @@
+import { useEffect, useState } from "react";
+import System from "../../../models/system";
+
+export default function LocalAiOptions({ settings }) {
+  const [basePathValue, setBasePathValue] = useState(
+    settings?.EmbeddingBasePath
+  );
+  const [basePath, setBasePath] = useState(settings?.EmbeddingBasePath);
+  function updateBasePath() {
+    setBasePath(basePathValue);
+  }
+
+  return (
+    <>
+      <div className="flex flex-col w-60">
+        <label className="text-white text-sm font-semibold block mb-4">
+          LocalAI Base URL
+        </label>
+        <input
+          type="url"
+          name="EmbeddingBasePath"
+          className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+          placeholder="http://localhost:8080/v1"
+          defaultValue={settings?.EmbeddingBasePath}
+          onChange={(e) => setBasePathValue(e.target.value)}
+          onBlur={updateBasePath}
+          required={true}
+          autoComplete="off"
+          spellCheck={false}
+        />
+      </div>
+      <LocalAIModelSelection settings={settings} basePath={basePath} />
+    </>
+  );
+}
+
+function LocalAIModelSelection({ settings, basePath = null }) {
+  const [customModels, setCustomModels] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function findCustomModels() {
+      if (!basePath || !basePath.includes("/v1")) {
+        setCustomModels([]);
+        setLoading(false);
+        return;
+      }
+      setLoading(true);
+      const { models } = await System.customModels("localai", null, basePath);
+      setCustomModels(models || []);
+      setLoading(false);
+    }
+    findCustomModels();
+  }, [basePath]);
+
+  if (loading || customModels.length == 0) {
+    return (
+      <div className="flex flex-col w-60">
+        <label className="text-white text-sm font-semibold block mb-4">
+          Embedding Model Name
+        </label>
+        <select
+          name="EmbeddingModelPref"
+          disabled={true}
+          className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+        >
+          <option disabled={true} selected={true}>
+            {basePath?.includes("/v1")
+              ? "-- loading available models --"
+              : "-- waiting for URL --"}
+          </option>
+        </select>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col w-60">
+      <label className="text-white text-sm font-semibold block mb-4">
+        Embedding Model Name
+      </label>
+      <select
+        name="EmbeddingModelPref"
+        required={true}
+        className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+      >
+        {customModels.length > 0 && (
+          <optgroup label="Your loaded models">
+            {customModels.map((model) => {
+              return (
+                <option
+                  key={model.id}
+                  value={model.id}
+                  selected={settings?.EmbeddingModelPref === model.id}
+                >
+                  {model.id}
+                </option>
+              );
+            })}
+          </optgroup>
+        )}
+      </select>
+    </div>
+  );
+}

frontend/src/components/EmbeddingSelection/OpenAiOptions/index.jsx

@@ -0,0 +1,34 @@
+export default function OpenAiOptions({ settings }) {
+  return (
+    <>
+      <div className="flex flex-col w-60">
+        <label className="text-white text-sm font-semibold block mb-4">
+          API Key
+        </label>
+        <input
+          type="password"
+          name="OpenAiKey"
+          className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
+          placeholder="OpenAI API Key"
+          defaultValue={settings?.OpenAiKey ? "*".repeat(20) : ""}
+          required={true}
+          autoComplete="off"
+          spellCheck={false}
+        />
+      </div>
+      <div className="flex flex-col w-60">
+        <label className="text-white text-sm font-semibold block mb-4">
+          Model Preference
+        </label>
+        <select
+          disabled={true}
+          className="cursor-not-allowed bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+        >
+          <option disabled={true} selected={true}>
+            text-embedding-ada-002
+          </option>
+        </select>
+      </div>
+    </>
+  );
+}

frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx

@@ -11,6 +11,9 @@ import LocalAiLogo from "../../../media/llmprovider/localai.png";
 import PreLoader from "../../../components/Preloader";
 import LLMProviderOption from "../../../components/LLMSelection/LLMProviderOption";
 import ChangeWarningModal from "../../../components/ChangeWarning";
+import OpenAiOptions from "../../../components/EmbeddingSelection/OpenAiOptions";
+import AzureAiOptions from "../../../components/EmbeddingSelection/AzureAiOptions";
+import LocalAiOptions from "../../../components/EmbeddingSelection/LocalAiOptions";
 
 export default function GeneralEmbeddingPreference() {
   const [saving, setSaving] = useState(false);
@@ -19,8 +22,6 @@ export default function GeneralEmbeddingPreference() {
   const [embeddingChoice, setEmbeddingChoice] = useState("openai");
   const [settings, setSettings] = useState(null);
   const [loading, setLoading] = useState(true);
-  const [basePathValue, setBasePathValue] = useState("");
-  const [basePath, setBasePath] = useState("");
 
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -60,17 +61,11 @@ export default function GeneralEmbeddingPreference() {
     setHasChanges(true);
   };
 
-  function updateBasePath() {
-    setBasePath(basePathValue);
-  }
-
   useEffect(() => {
     async function fetchKeys() {
       const _settings = await System.keys();
       setSettings(_settings);
       setEmbeddingChoice(_settings?.EmbeddingEngine || "openai");
-      setBasePath(_settings?.EmbeddingBasePath || "");
-      setBasePathValue(_settings?.EmbeddingBasePath || "");
       setHasEmbeddings(_settings?.HasExistingEmbeddings || false);
       setLoading(false);
     }
@@ -173,118 +168,13 @@ export default function GeneralEmbeddingPreference() {
                 </div>
                 <div className="mt-10 flex flex-wrap gap-4 max-w-[800px]">
                   {embeddingChoice === "openai" && (
-                    <>
-                      <div className="flex flex-col w-60">
-                        <label className="text-white text-sm font-semibold block mb-4">
-                          API Key
-                        </label>
-                        <input
-                          type="text"
-                          name="OpenAiKey"
-                          className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
-                          placeholder="OpenAI API Key"
-                          defaultValue={
-                            settings?.OpenAiKey ? "*".repeat(20) : ""
-                          }
-                          required={true}
-                          autoComplete="off"
-                          spellCheck={false}
-                        />
-                      </div>
-                      <div className="flex flex-col w-60">
-                        <label className="text-white text-sm font-semibold block mb-4">
-                          Model Preference
-                        </label>
-                        <select
-                          disabled={true}
-                          className="cursor-not-allowed bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
-                        >
-                          <option disabled={true} selected={true}>
-                            text-embedding-ada-002
-                          </option>
-                        </select>
-                      </div>
-                    </>
+                    <OpenAiOptions settings={settings} />
                   )}
-
                   {embeddingChoice === "azure" && (
-                    <>
-                      <div className="flex flex-col w-60">
-                        <label className="text-white text-sm font-semibold block mb-4">
-                          Azure Service Endpoint
-                        </label>
-                        <input
-                          type="url"
-                          name="AzureOpenAiEndpoint"
-                          className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
-                          placeholder="https://my-azure.openai.azure.com"
-                          defaultValue={settings?.AzureOpenAiEndpoint}
-                          required={true}
-                          autoComplete="off"
-                          spellCheck={false}
-                        />
-                      </div>
-
-                      <div className="flex flex-col w-60">
-                        <label className="text-white text-sm font-semibold block mb-4">
-                          API Key
-                        </label>
-                        <input
-                          type="password"
-                          name="AzureOpenAiKey"
-                          className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
-                          placeholder="Azure OpenAI API Key"
-                          defaultValue={
-                            settings?.AzureOpenAiKey ? "*".repeat(20) : ""
-                          }
-                          required={true}
-                          autoComplete="off"
-                          spellCheck={false}
-                        />
-                      </div>
-
-                      <div className="flex flex-col w-60">
-                        <label className="text-white text-sm font-semibold block mb-4">
-                          Embedding Deployment Name
-                        </label>
-                        <input
-                          type="text"
-                          name="AzureOpenAiEmbeddingModelPref"
-                          className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
-                          placeholder="Azure OpenAI embedding model deployment name"
-                          defaultValue={settings?.AzureOpenAiEmbeddingModelPref}
-                          required={true}
-                          autoComplete="off"
-                          spellCheck={false}
-                        />
-                      </div>
-                    </>
+                    <AzureAiOptions settings={settings} />
                   )}
-
                   {embeddingChoice === "localai" && (
-                    <>
-                      <div className="flex flex-col w-60">
-                        <label className="text-white text-sm font-semibold block mb-4">
-                          LocalAI Base URL
-                        </label>
-                        <input
-                          type="url"
-                          name="EmbeddingBasePath"
-                          className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
-                          placeholder="http://localhost:8080/v1"
-                          defaultValue={settings?.EmbeddingBasePath}
-                          onChange={(e) => setBasePathValue(e.target.value)}
-                          onBlur={updateBasePath}
-                          required={true}
-                          autoComplete="off"
-                          spellCheck={false}
-                        />
-                      </div>
-                      <LocalAIModelSelection
-                        settings={settings}
-                        basePath={basePath}
-                      />
-                    </>
+                    <LocalAiOptions settings={settings} />
                   )}
                 </div>
               </>
@@ -295,73 +185,3 @@ export default function GeneralEmbeddingPreference() {
     </div>
   );
 }
-
-function LocalAIModelSelection({ settings, basePath = null }) {
-  const [customModels, setCustomModels] = useState([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    async function findCustomModels() {
-      if (!basePath || !basePath.includes("/v1")) {
-        setCustomModels([]);
-        setLoading(false);
-        return;
-      }
-      setLoading(true);
-      const { models } = await System.customModels("localai", null, basePath);
-      setCustomModels(models || []);
-      setLoading(false);
-    }
-    findCustomModels();
-  }, [basePath]);
-
-  if (loading || customModels.length == 0) {
-    return (
-      <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-4">
-          Embedding Model Name
-        </label>
-        <select
-          name="EmbeddingModelPref"
-          disabled={true}
-          className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
-        >
-          <option disabled={true} selected={true}>
-            {basePath?.includes("/v1")
-              ? "-- loading available models --"
-              : "-- waiting for URL --"}
-          </option>
-        </select>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-col w-60">
-      <label className="text-white text-sm font-semibold block mb-4">
-        Embedding Model Name
-      </label>
-      <select
-        name="EmbeddingModelPref"
-        required={true}
-        className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
-      >
-        {customModels.length > 0 && (
-          <optgroup label="Your loaded models">
-            {customModels.map((model) => {
-              return (
-                <option
-                  key={model.id}
-                  value={model.id}
-                  selected={settings?.EmbeddingModelPref === model.id}
-                >
-                  {model.id}
-                </option>
-              );
-            })}
-          </optgroup>
-        )}
-      </select>
-    </div>
-  );
-}

frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/EmbeddingSelection/index.jsx

@@ -5,28 +5,23 @@ import LocalAiLogo from "../../../../../media/llmprovider/localai.png";
 import System from "../../../../../models/system";
 import PreLoader from "../../../../../components/Preloader";
 import LLMProviderOption from "../../../../../components/LLMSelection/LLMProviderOption";
+import OpenAiOptions from "../../../../../components/EmbeddingSelection/OpenAiOptions";
+import AzureAiOptions from "../../../../../components/EmbeddingSelection/AzureAiOptions";
+import LocalAiOptions from "../../../../../components/EmbeddingSelection/LocalAiOptions";
 
 function EmbeddingSelection({ nextStep, prevStep, currentStep }) {
   const [embeddingChoice, setEmbeddingChoice] = useState("openai");
   const [settings, setSettings] = useState(null);
   const [loading, setLoading] = useState(true);
-  const [basePathValue, setBasePathValue] = useState("");
-  const [basePath, setBasePath] = useState("");
-
   const updateChoice = (selection) => {
     setEmbeddingChoice(selection);
   };
 
-  function updateBasePath() {
-    setBasePath(basePathValue);
-  }
-
   useEffect(() => {
     async function fetchKeys() {
       const _settings = await System.keys();
       setSettings(_settings);
       setEmbeddingChoice(_settings?.EmbeddingEngine || "openai");
-      setBasePathValue(_settings?.EmbeddingBasePath || "");
       setLoading(false);
     }
     fetchKeys();
@@ -97,116 +92,13 @@ function EmbeddingSelection({ nextStep, prevStep, currentStep }) {
           </div>
           <div className="mt-10 flex flex-wrap gap-4 max-w-[800px]">
             {embeddingChoice === "openai" && (
-              <>
-                <div className="flex flex-col w-60">
-                  <label className="text-white text-sm font-semibold block mb-4">
-                    API Key
-                  </label>
-                  <input
-                    type="password"
-                    name="OpenAiKey"
-                    className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
-                    placeholder="OpenAI API Key"
-                    defaultValue={settings?.OpenAiKey ? "*".repeat(20) : ""}
-                    required={true}
-                    autoComplete="off"
-                    spellCheck={false}
-                  />
-                </div>
-                <div className="flex flex-col w-60">
-                  <label className="text-white text-sm font-semibold block mb-4">
-                    Model Preference
-                  </label>
-                  <select
-                    disabled={true}
-                    className="cursor-not-allowed bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
-                  >
-                    <option disabled={true} selected={true}>
-                      text-embedding-ada-002
-                    </option>
-                  </select>
-                </div>
-              </>
+              <OpenAiOptions settings={settings} />
             )}
-
             {embeddingChoice === "azure" && (
-              <>
-                <div className="flex flex-col w-60">
-                  <label className="text-white text-sm font-semibold block mb-4">
-                    Azure Service Endpoint
-                  </label>
-                  <input
-                    type="url"
-                    name="AzureOpenAiEndpoint"
-                    className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
-                    placeholder="https://my-azure.openai.azure.com"
-                    defaultValue={settings?.AzureOpenAiEndpoint}
-                    required={true}
-                    autoComplete="off"
-                    spellCheck={false}
-                  />
-                </div>
-
-                <div className="flex flex-col w-60">
-                  <label className="text-white text-sm font-semibold block mb-4">
-                    API Key
-                  </label>
-                  <input
-                    type="password"
-                    name="AzureOpenAiKey"
-                    className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
-                    placeholder="Azure OpenAI API Key"
-                    defaultValue={
-                      settings?.AzureOpenAiKey ? "*".repeat(20) : ""
-                    }
-                    required={true}
-                    autoComplete="off"
-                    spellCheck={false}
-                  />
-                </div>
-
-                <div className="flex flex-col w-60">
-                  <label className="text-white text-sm font-semibold block mb-4">
-                    Embedding Deployment Name
-                  </label>
-                  <input
-                    type="text"
-                    name="AzureOpenAiEmbeddingModelPref"
-                    className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
-                    placeholder="Azure OpenAI embedding model deployment name"
-                    defaultValue={settings?.AzureOpenAiEmbeddingModelPref}
-                    required={true}
-                    autoComplete="off"
-                    spellCheck={false}
-                  />
-                </div>
-              </>
+              <AzureAiOptions settings={settings} />
             )}
-
             {embeddingChoice === "localai" && (
-              <>
-                <div className="flex flex-col w-60">
-                  <label className="text-white text-sm font-semibold block mb-4">
-                    LocalAI Base URL
-                  </label>
-                  <input
-                    type="url"
-                    name="EmbeddingBasePath"
-                    className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
-                    placeholder="http://localhost:8080/v1"
-                    defaultValue={settings?.EmbeddingBasePath}
-                    onChange={(e) => setBasePathValue(e.target.value)}
-                    onBlur={updateBasePath}
-                    required={true}
-                    autoComplete="off"
-                    spellCheck={false}
-                  />
-                </div>
-                <LocalAIModelSelection
-                  settings={settings}
-                  basePath={basePath}
-                />
-              </>
+              <LocalAiOptions settings={settings} />
             )}
           </div>
         </div>
@@ -230,74 +122,4 @@ function EmbeddingSelection({ nextStep, prevStep, currentStep }) {
   );
 }
 
-function LocalAIModelSelection({ settings, basePath = null }) {
-  const [customModels, setCustomModels] = useState([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    async function findCustomModels() {
-      if (!basePath || !basePath.includes("/v1")) {
-        setCustomModels([]);
-        setLoading(false);
-        return;
-      }
-      setLoading(true);
-      const { models } = await System.customModels("localai", null, basePath);
-      setCustomModels(models || []);
-      setLoading(false);
-    }
-    findCustomModels();
-  }, [basePath]);
-
-  if (loading || customModels.length == 0) {
-    return (
-      <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-4">
-          Embedding Model Name
-        </label>
-        <select
-          name="EmbeddingModelPref"
-          disabled={true}
-          className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
-        >
-          <option disabled={true} selected={true}>
-            {basePath?.includes("/v1")
-              ? "-- loading available models --"
-              : "-- waiting for URL --"}
-          </option>
-        </select>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-col w-60">
-      <label className="text-white text-sm font-semibold block mb-4">
-        Embedding Model Name
-      </label>
-      <select
-        name="EmbeddingModelPref"
-        required={true}
-        className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
-      >
-        {customModels.length > 0 && (
-          <optgroup label="Your loaded models">
-            {customModels.map((model) => {
-              return (
-                <option
-                  key={model.id}
-                  value={model.id}
-                  selected={settings.EmbeddingModelPref === model.id}
-                >
-                  {model.id}
-                </option>
-              );
-            })}
-          </optgroup>
-        )}
-      </select>
-    </div>
-  );
-}
-
 export default memo(EmbeddingSelection);