529 UI update llm embedder and vectordb selection pages (#533)

* move llm, embedder, vectordb items to components folder * add backdrop blur to search in llm, embedder, vectordb preferences * implement searchable llm preference in settings * implement searchable embedder in settings * remove unused useState from embedder preferences * implement searchable vector database in settings * fix save changes button not appearing on change for llm, embedder, and vectordb settings pages * sort selected items in all settings and put selected item at top of list * no auto-top for selection --------- Co-authored-by: timothycarambat <[email protected]>
Mintplex-Labs · Jan 5, 2024 · d95d1a9 · d95d1a9
1 parent e9f7b9b
commit d95d1a9
Show file tree

Hide file tree

Showing 12 changed files with 414 additions and 550 deletions.
diff --git a/...teps/EmbeddingPreference/EmbedderItem.jsx → ...EmbeddingSelection/EmbedderItem/index.jsx b/...teps/EmbeddingPreference/EmbedderItem.jsx → ...EmbeddingSelection/EmbedderItem/index.jsx
diff --git a/frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx b/frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import System from "@/models/system";
 
 export default function LocalAiOptions({ settings }) {
@@ -12,67 +12,64 @@ export default function LocalAiOptions({ settings }) {
   return (
     <div className="w-full flex flex-col gap-y-4">
       <div className="w-full flex items-center gap-4">
-        <div className="w-full flex items-center gap-4">
-          <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={() => setBasePath(basePathValue)}
-              required={true}
-              autoComplete="off"
-              spellCheck={false}
-            />
-          </div>
-          <LocalAIModelSelection
-            settings={settings}
-            apiKey={apiKey}
-            basePath={basePath}
+        <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={() => setBasePath(basePathValue)}
+            required={true}
+            autoComplete="off"
+            spellCheck={false}
           />
-          <div className="flex flex-col w-60">
-            <label className="text-white text-sm font-semibold block mb-4">
-              Max embedding chunk length
-            </label>
-            <input
-              type="number"
-              name="EmbeddingModelMaxChunkLength"
-              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="1000"
-              min={1}
-              onScroll={(e) => e.target.blur()}
-              defaultValue={settings?.EmbeddingModelMaxChunkLength}
-              required={false}
-              autoComplete="off"
-            />
-          </div>
         </div>
-        <div className="w-full flex items-center gap-4">
-          <div className="flex flex-col w-60">
-            <div className="flex flex-col gap-y-1 mb-4">
-              <label className="text-white text-sm font-semibold flex items-center gap-x-2">
-                Local AI API Key{" "}
-                <p className="!text-xs !italic !font-thin">optional</p>
-              </label>
-            </div>
-
-            <input
-              type="password"
-              name="LocalAiApiKey"
-              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="sk-mysecretkey"
-              defaultValue={settings?.LocalAiApiKey ? "*".repeat(20) : ""}
-              autoComplete="off"
-              spellCheck={false}
-              onChange={(e) => setApiKeyValue(e.target.value)}
-              onBlur={() => setApiKey(apiKeyValue)}
-            />
+        <LocalAIModelSelection
+          settings={settings}
+          apiKey={apiKey}
+          basePath={basePath}
+        />
+        <div className="flex flex-col w-60">
+          <label className="text-white text-sm font-semibold block mb-4">
+            Max embedding chunk length
+          </label>
+          <input
+            type="number"
+            name="EmbeddingModelMaxChunkLength"
+            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="1000"
+            min={1}
+            onScroll={(e) => e.target.blur()}
+            defaultValue={settings?.EmbeddingModelMaxChunkLength}
+            required={false}
+            autoComplete="off"
+          />
+        </div>
+      </div>
+      <div className="w-full flex items-center gap-4">
+        <div className="flex flex-col w-60">
+          <div className="flex flex-col gap-y-1 mb-4">
+            <label className="text-white text-sm font-semibold flex items-center gap-x-2">
+              Local AI API Key{" "}
+              <p className="!text-xs !italic !font-thin">optional</p>
+            </label>
           </div>
+          <input
+            type="password"
+            name="LocalAiApiKey"
+            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="sk-mysecretkey"
+            defaultValue={settings?.LocalAiApiKey ? "*".repeat(20) : ""}
+            autoComplete="off"
+            spellCheck={false}
+            onChange={(e) => setApiKeyValue(e.target.value)}
+            onBlur={() => setApiKey(apiKeyValue)}
+          />
         </div>
       </div>
     </div>

diff --git a/...rdingFlow/Steps/LLMPreference/LLMItem.jsx → ...components/LLMSelection/LLMItem/index.jsx b/...rdingFlow/Steps/LLMPreference/LLMItem.jsx → ...components/LLMSelection/LLMItem/index.jsx
diff --git a/frontend/src/components/LLMSelection/LocalAiOptions/index.jsx b/frontend/src/components/LLMSelection/LocalAiOptions/index.jsx
@@ -71,12 +71,10 @@ export default function LocalAiOptions({ settings, showAlert = false }) {
       <div className="w-full flex items-center gap-4">
         <div className="flex flex-col w-60">
           <div className="flex flex-col gap-y-1 mb-4">
-            <label className="text-white text-sm font-semibold block">
-              Local AI API Key
+            <label className="text-white text-sm font-semibold flex items-center gap-x-2">
+              Local AI API Key{" "}
+              <p className="!text-xs !italic !font-thin">optional</p>
             </label>
-            <p className="text-xs italic text-white/60">
-              optional API key to use if running LocalAI with API keys.
-            </p>
           </div>
 
           <input

diff --git a/frontend/src/components/VectorDBOption/index.jsx b/frontend/src/components/VectorDBOption/index.jsx
diff --git a/...DatabaseConnection/VectorDatabaseItem.jsx → .../VectorDBSelection/VectorDBItem/index.jsx b/...DatabaseConnection/VectorDatabaseItem.jsx → .../VectorDBSelection/VectorDBItem/index.jsx
@@ -1,4 +1,4 @@
-export default function VectorDatabaseItem({
+export default function VectorDBItem({
   name,
   value,
   image,