From 9368cffdcfef2040659fdead8c3ba973692f655a Mon Sep 17 00:00:00 2001 From: shatfield4 Date: Thu, 4 Jan 2024 16:11:30 -0800 Subject: [PATCH 1/9] move llm, embedder, vectordb items to components folder --- .../EmbeddingSelection/EmbedderItem/index.jsx} | 0 .../LLMItem.jsx => components/LLMSelection/LLMItem/index.jsx} | 0 .../VectorDBSelection/VectorDBItem/index.jsx} | 2 +- .../pages/OnboardingFlow/Steps/EmbeddingPreference/index.jsx | 2 +- .../src/pages/OnboardingFlow/Steps/LLMPreference/index.jsx | 2 +- .../OnboardingFlow/Steps/VectorDatabaseConnection/index.jsx | 4 ++-- 6 files changed, 5 insertions(+), 5 deletions(-) rename frontend/src/{pages/OnboardingFlow/Steps/EmbeddingPreference/EmbedderItem.jsx => components/EmbeddingSelection/EmbedderItem/index.jsx} (100%) rename frontend/src/{pages/OnboardingFlow/Steps/LLMPreference/LLMItem.jsx => components/LLMSelection/LLMItem/index.jsx} (100%) rename frontend/src/{pages/OnboardingFlow/Steps/VectorDatabaseConnection/VectorDatabaseItem.jsx => components/VectorDBSelection/VectorDBItem/index.jsx} (94%) diff --git a/frontend/src/pages/OnboardingFlow/Steps/EmbeddingPreference/EmbedderItem.jsx b/frontend/src/components/EmbeddingSelection/EmbedderItem/index.jsx similarity index 100% rename from frontend/src/pages/OnboardingFlow/Steps/EmbeddingPreference/EmbedderItem.jsx rename to frontend/src/components/EmbeddingSelection/EmbedderItem/index.jsx diff --git a/frontend/src/pages/OnboardingFlow/Steps/LLMPreference/LLMItem.jsx b/frontend/src/components/LLMSelection/LLMItem/index.jsx similarity index 100% rename from frontend/src/pages/OnboardingFlow/Steps/LLMPreference/LLMItem.jsx rename to frontend/src/components/LLMSelection/LLMItem/index.jsx diff --git a/frontend/src/pages/OnboardingFlow/Steps/VectorDatabaseConnection/VectorDatabaseItem.jsx b/frontend/src/components/VectorDBSelection/VectorDBItem/index.jsx similarity index 94% rename from frontend/src/pages/OnboardingFlow/Steps/VectorDatabaseConnection/VectorDatabaseItem.jsx rename to frontend/src/components/VectorDBSelection/VectorDBItem/index.jsx index 4ecd304f7a1..47f067f5c2d 100644 --- a/frontend/src/pages/OnboardingFlow/Steps/VectorDatabaseConnection/VectorDatabaseItem.jsx +++ b/frontend/src/components/VectorDBSelection/VectorDBItem/index.jsx @@ -1,4 +1,4 @@ -export default function VectorDatabaseItem({ +export default function VectorDBItem({ name, value, image, diff --git a/frontend/src/pages/OnboardingFlow/Steps/EmbeddingPreference/index.jsx b/frontend/src/pages/OnboardingFlow/Steps/EmbeddingPreference/index.jsx index c78d3f4434b..10185f9488a 100644 --- a/frontend/src/pages/OnboardingFlow/Steps/EmbeddingPreference/index.jsx +++ b/frontend/src/pages/OnboardingFlow/Steps/EmbeddingPreference/index.jsx @@ -8,7 +8,7 @@ import NativeEmbeddingOptions from "@/components/EmbeddingSelection/NativeEmbedd import OpenAiOptions from "@/components/EmbeddingSelection/OpenAiOptions"; import AzureAiOptions from "@/components/EmbeddingSelection/AzureAiOptions"; import LocalAiOptions from "@/components/EmbeddingSelection/LocalAiOptions"; -import EmbedderItem from "./EmbedderItem"; +import EmbedderItem from "@/components/EmbeddingSelection/EmbedderItem"; import System from "@/models/system"; import paths from "@/utils/paths"; import showToast from "@/utils/toast"; diff --git a/frontend/src/pages/OnboardingFlow/Steps/LLMPreference/index.jsx b/frontend/src/pages/OnboardingFlow/Steps/LLMPreference/index.jsx index 24d561ed6d8..a594cd0c211 100644 --- a/frontend/src/pages/OnboardingFlow/Steps/LLMPreference/index.jsx +++ b/frontend/src/pages/OnboardingFlow/Steps/LLMPreference/index.jsx @@ -16,7 +16,7 @@ import LocalAiOptions from "@/components/LLMSelection/LocalAiOptions"; import NativeLLMOptions from "@/components/LLMSelection/NativeLLMOptions"; import GeminiLLMOptions from "@/components/LLMSelection/GeminiLLMOptions"; import OllamaLLMOptions from "@/components/LLMSelection/OllamaLLMOptions"; -import LLMItem from "./LLMItem"; +import LLMItem from "@/components/LLMSelection/LLMItem"; import System from "@/models/system"; import paths from "@/utils/paths"; import showToast from "@/utils/toast"; diff --git a/frontend/src/pages/OnboardingFlow/Steps/VectorDatabaseConnection/index.jsx b/frontend/src/pages/OnboardingFlow/Steps/VectorDatabaseConnection/index.jsx index 17accbab008..c384146ab97 100644 --- a/frontend/src/pages/OnboardingFlow/Steps/VectorDatabaseConnection/index.jsx +++ b/frontend/src/pages/OnboardingFlow/Steps/VectorDatabaseConnection/index.jsx @@ -6,7 +6,6 @@ import LanceDbLogo from "@/media/vectordbs/lancedb.png"; import WeaviateLogo from "@/media/vectordbs/weaviate.png"; import QDrantLogo from "@/media/vectordbs/qdrant.png"; import System from "@/models/system"; -import VectorDatabaseItem from "./VectorDatabaseItem"; import paths from "@/utils/paths"; import PineconeDBOptions from "@/components/VectorDBSelection/PineconeDBOptions"; import ChromaDBOptions from "@/components/VectorDBSelection/ChromaDBOptions"; @@ -15,6 +14,7 @@ import WeaviateDBOptions from "@/components/VectorDBSelection/WeaviateDBOptions" import LanceDBOptions from "@/components/VectorDBSelection/LanceDBOptions"; import showToast from "@/utils/toast"; import { useNavigate } from "react-router-dom"; +import VectorDBItem from "@/components/VectorDBSelection/VectorDBItem"; const TITLE = "Vector Database Connection"; const DESCRIPTION = @@ -154,7 +154,7 @@ export default function VectorDatabaseConnection({
{filteredVDBs.map((vdb) => ( - Date: Thu, 4 Jan 2024 16:26:41 -0800 Subject: [PATCH 2/9] add backdrop blur to search in llm, embedder, vectordb preferences --- .../pages/OnboardingFlow/Steps/EmbeddingPreference/index.jsx | 2 +- .../src/pages/OnboardingFlow/Steps/LLMPreference/index.jsx | 4 ++-- .../OnboardingFlow/Steps/VectorDatabaseConnection/index.jsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/pages/OnboardingFlow/Steps/EmbeddingPreference/index.jsx b/frontend/src/pages/OnboardingFlow/Steps/EmbeddingPreference/index.jsx index 10185f9488a..5b1c5ce5d3e 100644 --- a/frontend/src/pages/OnboardingFlow/Steps/EmbeddingPreference/index.jsx +++ b/frontend/src/pages/OnboardingFlow/Steps/EmbeddingPreference/index.jsx @@ -124,7 +124,7 @@ export default function EmbeddingPreference({
-
+
-
-
+
+
-
+
Date: Thu, 4 Jan 2024 17:08:44 -0800 Subject: [PATCH 3/9] implement searchable llm preference in settings --- .../GeneralSettings/LLMPreference/index.jsx | 248 ++++++++++-------- 1 file changed, 135 insertions(+), 113 deletions(-) diff --git a/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx b/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx index 0cecaa4d1b8..2c508585632 100644 --- a/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx +++ b/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx @@ -12,7 +12,6 @@ import OllamaLogo from "@/media/llmprovider/ollama.png"; import LMStudioLogo from "@/media/llmprovider/lmstudio.png"; import LocalAiLogo from "@/media/llmprovider/localai.png"; import PreLoader from "@/components/Preloader"; -import LLMProviderOption from "@/components/LLMSelection/LLMProviderOption"; import OpenAiOptions from "@/components/LLMSelection/OpenAiOptions"; import AzureAiOptions from "@/components/LLMSelection/AzureAiOptions"; import AnthropicAiOptions from "@/components/LLMSelection/AnthropicAiOptions"; @@ -21,21 +20,31 @@ import LocalAiOptions from "@/components/LLMSelection/LocalAiOptions"; import NativeLLMOptions from "@/components/LLMSelection/NativeLLMOptions"; import GeminiLLMOptions from "@/components/LLMSelection/GeminiLLMOptions"; import OllamaLLMOptions from "@/components/LLMSelection/OllamaLLMOptions"; +import LLMItem from "@/components/LLMSelection/LLMItem"; +import { MagnifyingGlass } from "@phosphor-icons/react"; export default function GeneralLLMPreference() { const [saving, setSaving] = useState(false); const [hasChanges, setHasChanges] = useState(false); - const [llmChoice, setLLMChoice] = useState("openai"); const [settings, setSettings] = useState(null); const [loading, setLoading] = useState(true); + const [searchQuery, setSearchQuery] = useState(""); + const [filteredLLMs, setFilteredLLMs] = useState([]); + const [selectedLLM, setSelectedLLM] = useState(null); + + const isHosted = window.location.hostname.includes("useanything.com"); + const handleSubmit = async (e) => { e.preventDefault(); - setSaving(true); + const form = e.target; const data = {}; - const form = new FormData(e.target); - for (var [key, value] of form.entries()) data[key] = value; + const formData = new FormData(form); + data.LLMProvider = selectedLLM; + for (var [key, value] of formData.entries()) data[key] = value; const { error } = await System.updateSystem(data); + setSaving(true); + if (error) { showToast(`Failed to save LLM settings: ${error}`, "error"); } else { @@ -46,7 +55,7 @@ export default function GeneralLLMPreference() { }; const updateLLMChoice = (selection) => { - setLLMChoice(selection); + setSelectedLLM(selection); setHasChanges(true); }; @@ -54,12 +63,88 @@ export default function GeneralLLMPreference() { async function fetchKeys() { const _settings = await System.keys(); setSettings(_settings); - setLLMChoice(_settings?.LLMProvider); + setSelectedLLM(_settings?.LLMProvider); setLoading(false); } fetchKeys(); }, []); + useEffect(() => { + const selectedLLMItem = LLMS.find((llm) => llm.value === selectedLLM); + let filtered = LLMS.filter((llm) => + llm.name.toLowerCase().includes(searchQuery.toLowerCase()) + ); + // If LLM selected, move it to the top + if (selectedLLMItem) { + filtered = [ + selectedLLMItem, + ...filtered.filter((llm) => llm.value !== selectedLLM), + ]; + } + setFilteredLLMs(filtered); + }, [searchQuery, selectedLLM]); + + const LLMS = [ + { + name: "OpenAI", + value: "openai", + logo: OpenAiLogo, + options: , + description: "The standard option for most non-commercial use.", + }, + { + name: "Azure OpenAI", + value: "azure", + logo: AzureOpenAiLogo, + options: , + description: "The enterprise option of OpenAI hosted on Azure services.", + }, + { + name: "Anthropic", + value: "anthropic", + logo: AnthropicLogo, + options: , + description: "A friendly AI Assistant hosted by Anthropic.", + }, + { + name: "Gemini", + value: "gemini", + logo: GeminiLogo, + options: , + description: "Google's largest and most capable AI model", + }, + { + name: "Ollama", + value: "ollama", + logo: OllamaLogo, + options: , + description: "Run LLMs locally on your own machine.", + }, + { + name: "LM Studio", + value: "lmstudio", + logo: LMStudioLogo, + options: , + description: + "Discover, download, and run thousands of cutting edge LLMs in a few clicks.", + }, + { + name: "Local AI", + value: "localai", + logo: LocalAiLogo, + options: , + description: "Run LLMs locally on your own machine.", + }, + { + name: "Native", + value: "native", + logo: AnythingLLMIcon, + options: , + description: + "Use a downloaded custom Llama model for chatting on this AnythingLLM instance.", + }, + ]; + return (
{!isMobile && } @@ -78,11 +163,7 @@ export default function GeneralLLMPreference() { className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent" > {isMobile && } - setHasChanges(true)} - className="flex w-full" - > +
@@ -109,107 +190,48 @@ export default function GeneralLLMPreference() {
LLM Providers
-
- - - - - - - - - {!window.location.hostname.includes("useanything.com") && ( - - )} -
-
- {llmChoice === "openai" && ( - - )} - {llmChoice === "azure" && ( - - )} - {llmChoice === "anthropic" && ( - - )} - {llmChoice === "gemini" && ( - - )} - {llmChoice === "lmstudio" && ( - - )} - {llmChoice === "localai" && ( - - )} - {llmChoice === "ollama" && ( - - )} - {llmChoice === "native" && ( - - )} +
+
+
+
+ + setSearchQuery(e.target.value)} + autoComplete="off" + onKeyDown={(e) => { + if (e.key === "Enter") e.preventDefault(); + }} + /> +
+
+
+ {filteredLLMs.map((llm) => { + if (llm.value === "native" && isHosted) return null; + return ( + updateLLMChoice(llm.value)} + /> + ); + })} +
+
+
+ {selectedLLM && + LLMS.find((llm) => llm.value === selectedLLM)?.options} +
From a21750842e9ec62f121932c858a7f3b51998d094 Mon Sep 17 00:00:00 2001 From: shatfield4 Date: Thu, 4 Jan 2024 17:34:38 -0800 Subject: [PATCH 4/9] implement searchable embedder in settings --- .../LocalAiOptions/index.jsx | 115 ++++++------ .../EmbeddingPreference/index.jsx | 164 +++++++++++------- 2 files changed, 159 insertions(+), 120 deletions(-) diff --git a/frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx b/frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx index 6f81712c14b..651d3e950b8 100644 --- 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 (
-
-
- - setBasePathValue(e.target.value)} - onBlur={() => setBasePath(basePathValue)} - required={true} - autoComplete="off" - spellCheck={false} - /> -
- + + setBasePathValue(e.target.value)} + onBlur={() => setBasePath(basePathValue)} + required={true} + autoComplete="off" + spellCheck={false} /> -
- - e.target.blur()} - defaultValue={settings?.EmbeddingModelMaxChunkLength} - required={false} - autoComplete="off" - /> -
-
-
-
- -
- - setApiKeyValue(e.target.value)} - onBlur={() => setApiKey(apiKeyValue)} - /> + +
+ + e.target.blur()} + defaultValue={settings?.EmbeddingModelMaxChunkLength} + required={false} + autoComplete="off" + /> +
+
+
+
+
+
+ setApiKeyValue(e.target.value)} + onBlur={() => setApiKey(apiKeyValue)} + />
diff --git a/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx b/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx index d6224906cfd..df77d01e067 100644 --- a/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx +++ b/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx @@ -8,12 +8,13 @@ import OpenAiLogo from "@/media/llmprovider/openai.png"; import AzureOpenAiLogo from "@/media/llmprovider/azure.png"; 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"; import NativeEmbeddingOptions from "@/components/EmbeddingSelection/NativeEmbeddingOptions"; +import EmbedderItem from "@/components/EmbeddingSelection/EmbedderItem"; +import { MagnifyingGlass } from "@phosphor-icons/react"; export default function GeneralEmbeddingPreference() { const [saving, setSaving] = useState(false); @@ -23,6 +24,10 @@ export default function GeneralEmbeddingPreference() { const [settings, setSettings] = useState(null); const [loading, setLoading] = useState(true); + const [searchQuery, setSearchQuery] = useState(""); + const [filteredEmbedders, setFilteredEmbedders] = useState([]); + const [selectedEmbedder, setSelectedEmbedder] = useState(null); + const handleSubmit = async (e) => { e.preventDefault(); if ( @@ -38,11 +43,11 @@ export default function GeneralEmbeddingPreference() { const handleSaveSettings = async () => { setSaving(true); - const data = new FormData(document.getElementById("embedding-form")); + const form = document.getElementById("embedding-form"); const settingsData = {}; - for (let [key, value] of data.entries()) { - settingsData[key] = value; - } + const formData = new FormData(form); + settingsData.EmbeddingEngine = selectedEmbedder; + for (var [key, value] of formData.entries()) settingsData[key] = value; const { error } = await System.updateSystem(settingsData); if (error) { @@ -57,7 +62,7 @@ export default function GeneralEmbeddingPreference() { }; const updateChoice = (selection) => { - setEmbeddingChoice(selection); + setSelectedEmbedder(selection); setHasChanges(true); }; @@ -65,13 +70,61 @@ export default function GeneralEmbeddingPreference() { async function fetchKeys() { const _settings = await System.keys(); setSettings(_settings); - setEmbeddingChoice(_settings?.EmbeddingEngine || "openai"); + setSelectedEmbedder(_settings?.EmbeddingEngine || "native"); setHasEmbeddings(_settings?.HasExistingEmbeddings || false); setLoading(false); } fetchKeys(); }, []); + const EMBEDDERS = [ + { + name: "AnythingLLM Embedder", + value: "native", + logo: AnythingLLMIcon, + options: , + description: + "Use the built-in embedding engine for AnythingLLM. Zero setup!", + }, + { + name: "OpenAI", + value: "openai", + logo: OpenAiLogo, + options: , + description: "The standard option for most non-commercial use.", + }, + { + name: "Azure OpenAI", + value: "azure", + logo: AzureOpenAiLogo, + options: , + description: "The enterprise option of OpenAI hosted on Azure services.", + }, + { + name: "Local AI", + value: "localai", + logo: LocalAiLogo, + options: , + description: "Run embedding models locally on your own machine.", + }, + ]; + + useEffect(() => { + const selectedEmbedderItem = EMBEDDERS.find( + (embedder) => embedder.value === selectedEmbedder + ); + let filtered = EMBEDDERS.filter((embedder) => + embedder.name.toLowerCase().includes(searchQuery.toLowerCase()) + ); + if (selectedEmbedderItem) { + filtered = [ + selectedEmbedderItem, + ...filtered.filter((embedder) => embedder.value !== selectedEmbedder), + ]; + } + setFilteredEmbedders(filtered); + }, [searchQuery, selectedEmbedder]); + return (
setHasChanges(true)} className="flex w-full" >
@@ -132,59 +184,49 @@ export default function GeneralEmbeddingPreference() {
Embedding Providers
-
- - - - - -
-
- {embeddingChoice === "native" && } - {embeddingChoice === "openai" && ( - - )} - {embeddingChoice === "azure" && ( - - )} - {embeddingChoice === "localai" && ( - - )} +
+
+
+
+ + setSearchQuery(e.target.value)} + autoComplete="off" + onKeyDown={(e) => { + if (e.key === "Enter") e.preventDefault(); + }} + /> +
+
+
+ {filteredEmbedders.map((embedder) => { + return ( + updateChoice(embedder.value)} + /> + ); + })} +
+
+
+ {selectedEmbedder && + EMBEDDERS.find( + (embedder) => embedder.value === selectedEmbedder + )?.options} +
From 44059ffce3b743ea4b56607ae7074cbf878abccd Mon Sep 17 00:00:00 2001 From: shatfield4 Date: Thu, 4 Jan 2024 17:36:45 -0800 Subject: [PATCH 5/9] remove unused useState from embedder preferences --- .../src/pages/GeneralSettings/EmbeddingPreference/index.jsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx b/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx index df77d01e067..925fdad65b8 100644 --- a/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx +++ b/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx @@ -20,10 +20,8 @@ export default function GeneralEmbeddingPreference() { const [saving, setSaving] = useState(false); const [hasChanges, setHasChanges] = useState(false); const [hasEmbeddings, setHasEmbeddings] = useState(false); - const [embeddingChoice, setEmbeddingChoice] = useState("openai"); const [settings, setSettings] = useState(null); const [loading, setLoading] = useState(true); - const [searchQuery, setSearchQuery] = useState(""); const [filteredEmbedders, setFilteredEmbedders] = useState([]); const [selectedEmbedder, setSelectedEmbedder] = useState(null); @@ -31,7 +29,7 @@ export default function GeneralEmbeddingPreference() { const handleSubmit = async (e) => { e.preventDefault(); if ( - embeddingChoice !== settings?.EmbeddingEngine && + selectedEmbedder !== settings?.EmbeddingEngine && hasChanges && hasEmbeddings ) { From 2cddbca6fb13dfcec6dddcde26e57364eaf22515 Mon Sep 17 00:00:00 2001 From: shatfield4 Date: Thu, 4 Jan 2024 17:48:46 -0800 Subject: [PATCH 6/9] implement searchable vector database in settings --- .../GeneralSettings/VectorDatabase/index.jsx | 334 ++++++------------ 1 file changed, 103 insertions(+), 231 deletions(-) diff --git a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx index 2ddf1d5a7d6..1a746525480 100644 --- a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx +++ b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx @@ -11,34 +11,85 @@ import QDrantLogo from "@/media/vectordbs/qdrant.png"; import PreLoader from "@/components/Preloader"; import VectorDBOption from "@/components/VectorDBOption"; import ChangeWarningModal from "@/components/ChangeWarning"; +import { MagnifyingGlass } from "@phosphor-icons/react"; +import LanceDBOptions from "@/components/VectorDBSelection/LanceDBOptions"; +import ChromaDBOptions from "@/components/VectorDBSelection/ChromaDBOptions"; +import PineconeDBOptions from "@/components/VectorDBSelection/PineconeDBOptions"; +import QDrantDBOptions from "@/components/VectorDBSelection/QDrantDBOptions"; +import WeaviateDBOptions from "@/components/VectorDBSelection/WeaviateDBOptions"; +import VectorDBItem from "@/components/VectorDBSelection/VectorDBItem"; export default function GeneralVectorDatabase() { const [saving, setSaving] = useState(false); const [hasChanges, setHasChanges] = useState(false); const [hasEmbeddings, setHasEmbeddings] = useState(false); - const [vectorDB, setVectorDB] = useState("lancedb"); const [settings, setSettings] = useState({}); const [loading, setLoading] = useState(true); + const [searchQuery, setSearchQuery] = useState(""); + const [filteredVDBs, setFilteredVDBs] = useState([]); + const [selectedVDB, setSelectedVDB] = useState(null); useEffect(() => { async function fetchKeys() { const _settings = await System.keys(); + console.log(_settings); setSettings(_settings); - setVectorDB(_settings?.VectorDB || "lancedb"); + setSelectedVDB(_settings?.VectorDB || "lancedb"); setHasEmbeddings(_settings?.HasExistingEmbeddings || false); setLoading(false); } fetchKeys(); }, []); + const VECTOR_DBS = [ + { + name: "LanceDB", + value: "lancedb", + logo: LanceDbLogo, + options: , + description: + "100% local vector DB that runs on the same instance as AnythingLLM.", + }, + { + name: "Chroma", + value: "chroma", + logo: ChromaLogo, + options: , + description: + "Open source vector database you can host yourself or on the cloud.", + }, + { + name: "Pinecone", + value: "pinecone", + logo: PineconeLogo, + options: , + description: "100% cloud-based vector database for enterprise use cases.", + }, + { + name: "QDrant", + value: "qdrant", + logo: QDrantLogo, + options: , + description: "Open source local and distributed cloud vector database.", + }, + { + name: "Weaviate", + value: "weaviate", + logo: WeaviateLogo, + options: , + description: + "Open source local and cloud hosted multi-modal vector database.", + }, + ]; + const updateVectorChoice = (selection) => { setHasChanges(true); - setVectorDB(selection); + setSelectedVDB(selection); }; const handleSubmit = async (e) => { e.preventDefault(); - if (vectorDB !== settings?.VectorDB && hasChanges && hasEmbeddings) { + if (selectedVDB !== settings?.VectorDB && hasChanges && hasEmbeddings) { document.getElementById("confirmation-modal")?.showModal(); } else { await handleSaveSettings(); @@ -47,11 +98,11 @@ export default function GeneralVectorDatabase() { const handleSaveSettings = async () => { setSaving(true); - const data = new FormData(document.getElementById("vectordb-form")); + const form = document.getElementById("vectordb-form"); const settingsData = {}; - for (let [key, value] of data.entries()) { - settingsData[key] = value; - } + const formData = new FormData(form); + settingsData.VectorDB = selectedVDB; + for (var [key, value] of formData.entries()) settingsData[key] = value; const { error } = await System.updateSystem(settingsData); if (error) { @@ -65,6 +116,18 @@ export default function GeneralVectorDatabase() { document.getElementById("confirmation-modal")?.close(); }; + useEffect(() => { + if (searchQuery.trim() === "") { + setFilteredVDBs(VECTOR_DBS); + } else { + const lowercasedQuery = searchQuery.toLowerCase(); + const filtered = VECTOR_DBS.filter((vdb) => + vdb.name.toLowerCase().includes(lowercasedQuery) + ); + setFilteredVDBs(filtered); + } + }, [searchQuery]); + return (
setHasChanges(true)} className="flex w-full" >
@@ -119,236 +181,46 @@ export default function GeneralVectorDatabase() {
Select your preferred vector database provider
-
- - - - - - -
-
- {vectorDB === "pinecone" && ( - <> -
- - -
- -
- - -
- -
- - +
+
+
+ -
- - )} - - {vectorDB === "chroma" && ( - <> -
- - -
- -
- -
- -
- - setSearchQuery(e.target.value)} autoComplete="off" - type="password" - defaultValue={ - settings?.ChromaApiKey ? "*".repeat(20) : "" - } - 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-myApiKeyToAccessMyChromaInstance" + onKeyDown={(e) => { + if (e.key === "Enter") e.preventDefault(); + }} />
- - )} - - {vectorDB === "lancedb" && ( -
-

- There is no configuration needed for LanceDB. -

- )} - - {vectorDB === "qdrant" && ( - <> -
- - -
- -
- - + {filteredVDBs.map((vdb) => ( + updateVectorChoice(vdb.value)} /> -
- - )} - - {vectorDB === "weaviate" && ( - <> -
- - -
- -
- - -
- - )} + ))} +
+
+
+ {selectedVDB && + VECTOR_DBS.find((vdb) => vdb.value === selectedVDB) + ?.options} +
From 31c9e23ec77e7c230bee3dd0a51482a6ea2b4275 Mon Sep 17 00:00:00 2001 From: shatfield4 Date: Thu, 4 Jan 2024 17:56:28 -0800 Subject: [PATCH 7/9] fix save changes button not appearing on change for llm, embedder, and vectordb settings pages --- .../GeneralSettings/EmbeddingPreference/index.jsx | 5 ++++- .../src/pages/GeneralSettings/LLMPreference/index.jsx | 5 ++++- .../src/pages/GeneralSettings/VectorDatabase/index.jsx | 10 ++++++++-- 3 files changed, 16 insertions(+), 4 deletions(-) diff --git a/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx b/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx index 925fdad65b8..71a622a9060 100644 --- a/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx +++ b/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx @@ -219,7 +219,10 @@ export default function GeneralEmbeddingPreference() { })}
-
+
setHasChanges(true)} + className="mt-4 flex flex-col gap-y-1" + > {selectedEmbedder && EMBEDDERS.find( (embedder) => embedder.value === selectedEmbedder diff --git a/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx b/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx index 2c508585632..f4bb974a20c 100644 --- a/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx +++ b/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx @@ -228,7 +228,10 @@ export default function GeneralLLMPreference() { })}
-
+
setHasChanges(true)} + className="mt-4 flex flex-col gap-y-1" + > {selectedLLM && LLMS.find((llm) => llm.value === selectedLLM)?.options}
diff --git a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx index 1a746525480..f08c1344ab0 100644 --- a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx +++ b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx @@ -194,7 +194,10 @@ export default function GeneralVectorDatabase() { type="text" placeholder="Search vector databases" className="bg-zinc-600 z-20 pl-10 rounded-full w-full px-4 py-1 text-sm border-2 border-slate-300/40 outline-none focus:border-white text-white" - onChange={(e) => setSearchQuery(e.target.value)} + onChange={(e) => { + e.preventDefault(); + setSearchQuery(e.target.value); + }} autoComplete="off" onKeyDown={(e) => { if (e.key === "Enter") e.preventDefault(); @@ -216,7 +219,10 @@ export default function GeneralVectorDatabase() { ))}
-
+
setHasChanges(true)} + className="mt-4 flex flex-col gap-y-1" + > {selectedVDB && VECTOR_DBS.find((vdb) => vdb.value === selectedVDB) ?.options} From d5594a9450486c69c509a6323381fc4062b712cd Mon Sep 17 00:00:00 2001 From: shatfield4 Date: Thu, 4 Jan 2024 18:02:42 -0800 Subject: [PATCH 8/9] sort selected items in all settings and put selected item at top of list --- .../GeneralSettings/VectorDatabase/index.jsx | 20 +++++++++-------- .../Steps/EmbeddingPreference/index.jsx | 22 +++++++++++-------- .../Steps/LLMPreference/index.jsx | 21 ++++++++++-------- .../Steps/VectorDatabaseConnection/index.jsx | 20 +++++++++-------- 4 files changed, 47 insertions(+), 36 deletions(-) diff --git a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx index f08c1344ab0..63b639f5ef9 100644 --- a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx +++ b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx @@ -117,16 +117,18 @@ export default function GeneralVectorDatabase() { }; useEffect(() => { - if (searchQuery.trim() === "") { - setFilteredVDBs(VECTOR_DBS); - } else { - const lowercasedQuery = searchQuery.toLowerCase(); - const filtered = VECTOR_DBS.filter((vdb) => - vdb.name.toLowerCase().includes(lowercasedQuery) - ); - setFilteredVDBs(filtered); + const selectedVDBItem = VECTOR_DBS.find((vdb) => vdb.value === selectedVDB); + let filtered = VECTOR_DBS.filter((vdb) => + vdb.name.toLowerCase().includes(searchQuery.toLowerCase()) + ); + if (selectedVDBItem) { + filtered = [ + selectedVDBItem, + ...filtered.filter((vdb) => vdb.value !== selectedVDB), + ]; } - }, [searchQuery]); + setFilteredVDBs(filtered); + }, [searchQuery, selectedVDB]); return (
diff --git a/frontend/src/pages/OnboardingFlow/Steps/EmbeddingPreference/index.jsx b/frontend/src/pages/OnboardingFlow/Steps/EmbeddingPreference/index.jsx index 7690a5bc3aa..8775a055388 100644 --- a/frontend/src/pages/OnboardingFlow/Steps/EmbeddingPreference/index.jsx +++ b/frontend/src/pages/OnboardingFlow/Steps/EmbeddingPreference/index.jsx @@ -108,16 +108,20 @@ export default function EmbeddingPreference({ }, []); useEffect(() => { - if (searchQuery.trim() === "") { - setFilteredEmbedders(EMBEDDERS); - } else { - const lowercasedQuery = searchQuery.toLowerCase(); - const filtered = EMBEDDERS.filter((embedder) => - embedder.name.toLowerCase().includes(lowercasedQuery) - ); - setFilteredEmbedders(filtered); + const selectedEmbedderItem = EMBEDDERS.find( + (embedder) => embedder.value === selectedEmbedder + ); + let filtered = EMBEDDERS.filter((embedder) => + embedder.name.toLowerCase().includes(searchQuery.toLowerCase()) + ); + if (selectedEmbedderItem) { + filtered = [ + selectedEmbedderItem, + ...filtered.filter((embedder) => embedder.value !== selectedEmbedder), + ]; } - }, [searchQuery]); + setFilteredEmbedders(filtered); + }, [searchQuery, selectedEmbedder]); return (
diff --git a/frontend/src/pages/OnboardingFlow/Steps/LLMPreference/index.jsx b/frontend/src/pages/OnboardingFlow/Steps/LLMPreference/index.jsx index 8fb80219382..d243dd425fc 100644 --- a/frontend/src/pages/OnboardingFlow/Steps/LLMPreference/index.jsx +++ b/frontend/src/pages/OnboardingFlow/Steps/LLMPreference/index.jsx @@ -144,16 +144,19 @@ export default function LLMPreference({ }, []); useEffect(() => { - if (searchQuery.trim() === "") { - setFilteredLLMs(LLMS); - } else { - const lowercasedQuery = searchQuery.toLowerCase(); - const filtered = LLMS.filter((llm) => - llm.name.toLowerCase().includes(lowercasedQuery) - ); - setFilteredLLMs(filtered); + const selectedLLMItem = LLMS.find((llm) => llm.value === selectedLLM); + let filtered = LLMS.filter((llm) => + llm.name.toLowerCase().includes(searchQuery.toLowerCase()) + ); + // If LLM selected, move it to the top + if (selectedLLMItem) { + filtered = [ + selectedLLMItem, + ...filtered.filter((llm) => llm.value !== selectedLLM), + ]; } - }, [searchQuery]); + setFilteredLLMs(filtered); + }, [searchQuery, selectedLLM]); return (
diff --git a/frontend/src/pages/OnboardingFlow/Steps/VectorDatabaseConnection/index.jsx b/frontend/src/pages/OnboardingFlow/Steps/VectorDatabaseConnection/index.jsx index 1ca499247bb..79824cf0de0 100644 --- a/frontend/src/pages/OnboardingFlow/Steps/VectorDatabaseConnection/index.jsx +++ b/frontend/src/pages/OnboardingFlow/Steps/VectorDatabaseConnection/index.jsx @@ -118,16 +118,18 @@ export default function VectorDatabaseConnection({ }, []); useEffect(() => { - if (searchQuery.trim() === "") { - setFilteredVDBs(VECTOR_DBS); - } else { - const lowercasedQuery = searchQuery.toLowerCase(); - const filtered = VECTOR_DBS.filter((vdb) => - vdb.name.toLowerCase().includes(lowercasedQuery) - ); - setFilteredVDBs(filtered); + const selectedVDBItem = VECTOR_DBS.find((vdb) => vdb.value === selectedVDB); + let filtered = VECTOR_DBS.filter((vdb) => + vdb.name.toLowerCase().includes(searchQuery.toLowerCase()) + ); + if (selectedVDBItem) { + filtered = [ + selectedVDBItem, + ...filtered.filter((vdb) => vdb.value !== selectedVDB), + ]; } - }, [searchQuery]); + setFilteredVDBs(filtered); + }, [searchQuery, selectedVDB]); return ( <> From e6d16b41d2f573c1bb4e35154bbdcc3171165e80 Mon Sep 17 00:00:00 2001 From: timothycarambat Date: Thu, 4 Jan 2024 18:14:30 -0800 Subject: [PATCH 9/9] no auto-top for selection --- .../LLMSelection/LocalAiOptions/index.jsx | 8 ++-- .../src/components/VectorDBOption/index.jsx | 39 ------------------- .../EmbeddingPreference/index.jsx | 11 +----- .../GeneralSettings/LLMPreference/index.jsx | 10 +---- .../GeneralSettings/VectorDatabase/index.jsx | 12 +----- .../Steps/EmbeddingPreference/index.jsx | 11 +----- .../Steps/LLMPreference/index.jsx | 10 +---- .../Steps/VectorDatabaseConnection/index.jsx | 9 +---- 8 files changed, 10 insertions(+), 100 deletions(-) delete mode 100644 frontend/src/components/VectorDBOption/index.jsx diff --git a/frontend/src/components/LLMSelection/LocalAiOptions/index.jsx b/frontend/src/components/LLMSelection/LocalAiOptions/index.jsx index 7a385278609..c7abd09af28 100644 --- 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 }) {
-
onClick(value)}> - - -
- ); -} diff --git a/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx b/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx index 71a622a9060..ddcb81319ae 100644 --- a/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx +++ b/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx @@ -108,18 +108,9 @@ export default function GeneralEmbeddingPreference() { ]; useEffect(() => { - const selectedEmbedderItem = EMBEDDERS.find( - (embedder) => embedder.value === selectedEmbedder - ); - let filtered = EMBEDDERS.filter((embedder) => + const filtered = EMBEDDERS.filter((embedder) => embedder.name.toLowerCase().includes(searchQuery.toLowerCase()) ); - if (selectedEmbedderItem) { - filtered = [ - selectedEmbedderItem, - ...filtered.filter((embedder) => embedder.value !== selectedEmbedder), - ]; - } setFilteredEmbedders(filtered); }, [searchQuery, selectedEmbedder]); diff --git a/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx b/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx index f4bb974a20c..d72cf3c2b3f 100644 --- a/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx +++ b/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx @@ -70,17 +70,9 @@ export default function GeneralLLMPreference() { }, []); useEffect(() => { - const selectedLLMItem = LLMS.find((llm) => llm.value === selectedLLM); - let filtered = LLMS.filter((llm) => + const filtered = LLMS.filter((llm) => llm.name.toLowerCase().includes(searchQuery.toLowerCase()) ); - // If LLM selected, move it to the top - if (selectedLLMItem) { - filtered = [ - selectedLLMItem, - ...filtered.filter((llm) => llm.value !== selectedLLM), - ]; - } setFilteredLLMs(filtered); }, [searchQuery, selectedLLM]); diff --git a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx index 63b639f5ef9..9ef9cff2dd9 100644 --- a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx +++ b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx @@ -9,7 +9,6 @@ import LanceDbLogo from "@/media/vectordbs/lancedb.png"; import WeaviateLogo from "@/media/vectordbs/weaviate.png"; import QDrantLogo from "@/media/vectordbs/qdrant.png"; import PreLoader from "@/components/Preloader"; -import VectorDBOption from "@/components/VectorDBOption"; import ChangeWarningModal from "@/components/ChangeWarning"; import { MagnifyingGlass } from "@phosphor-icons/react"; import LanceDBOptions from "@/components/VectorDBSelection/LanceDBOptions"; @@ -117,16 +116,9 @@ export default function GeneralVectorDatabase() { }; useEffect(() => { - const selectedVDBItem = VECTOR_DBS.find((vdb) => vdb.value === selectedVDB); - let filtered = VECTOR_DBS.filter((vdb) => + const filtered = VECTOR_DBS.filter((vdb) => vdb.name.toLowerCase().includes(searchQuery.toLowerCase()) ); - if (selectedVDBItem) { - filtered = [ - selectedVDBItem, - ...filtered.filter((vdb) => vdb.value !== selectedVDB), - ]; - } setFilteredVDBs(filtered); }, [searchQuery, selectedVDB]); @@ -207,7 +199,7 @@ export default function GeneralVectorDatabase() { />
-
+
{filteredVDBs.map((vdb) => ( { - const selectedEmbedderItem = EMBEDDERS.find( - (embedder) => embedder.value === selectedEmbedder - ); - let filtered = EMBEDDERS.filter((embedder) => + const filtered = EMBEDDERS.filter((embedder) => embedder.name.toLowerCase().includes(searchQuery.toLowerCase()) ); - if (selectedEmbedderItem) { - filtered = [ - selectedEmbedderItem, - ...filtered.filter((embedder) => embedder.value !== selectedEmbedder), - ]; - } setFilteredEmbedders(filtered); }, [searchQuery, selectedEmbedder]); diff --git a/frontend/src/pages/OnboardingFlow/Steps/LLMPreference/index.jsx b/frontend/src/pages/OnboardingFlow/Steps/LLMPreference/index.jsx index d243dd425fc..887681985ec 100644 --- a/frontend/src/pages/OnboardingFlow/Steps/LLMPreference/index.jsx +++ b/frontend/src/pages/OnboardingFlow/Steps/LLMPreference/index.jsx @@ -144,17 +144,9 @@ export default function LLMPreference({ }, []); useEffect(() => { - const selectedLLMItem = LLMS.find((llm) => llm.value === selectedLLM); - let filtered = LLMS.filter((llm) => + const filtered = LLMS.filter((llm) => llm.name.toLowerCase().includes(searchQuery.toLowerCase()) ); - // If LLM selected, move it to the top - if (selectedLLMItem) { - filtered = [ - selectedLLMItem, - ...filtered.filter((llm) => llm.value !== selectedLLM), - ]; - } setFilteredLLMs(filtered); }, [searchQuery, selectedLLM]); diff --git a/frontend/src/pages/OnboardingFlow/Steps/VectorDatabaseConnection/index.jsx b/frontend/src/pages/OnboardingFlow/Steps/VectorDatabaseConnection/index.jsx index 79824cf0de0..f451fc3e247 100644 --- a/frontend/src/pages/OnboardingFlow/Steps/VectorDatabaseConnection/index.jsx +++ b/frontend/src/pages/OnboardingFlow/Steps/VectorDatabaseConnection/index.jsx @@ -118,16 +118,9 @@ export default function VectorDatabaseConnection({ }, []); useEffect(() => { - const selectedVDBItem = VECTOR_DBS.find((vdb) => vdb.value === selectedVDB); - let filtered = VECTOR_DBS.filter((vdb) => + const filtered = VECTOR_DBS.filter((vdb) => vdb.name.toLowerCase().includes(searchQuery.toLowerCase()) ); - if (selectedVDBItem) { - filtered = [ - selectedVDBItem, - ...filtered.filter((vdb) => vdb.value !== selectedVDB), - ]; - } setFilteredVDBs(filtered); }, [searchQuery, selectedVDB]);