-
-
-
setSearchQuery(e.target.value)}
- autoComplete="off"
- onKeyDown={(e) => {
- if (e.key === "Enter") e.preventDefault();
- }}
- />
+
+ {searchMenuOpen && (
+
setSearchMenuOpen(false)}
+ />
+ )}
+ {searchMenuOpen ? (
+
+
+
+
+
+ {filteredProviders.map((provider) => (
+ updateProviderChoice(provider.value)}
+ />
+ ))}
+
-
- {filteredProviders.map((provider) => {
- return (
- updateProviderChoice(provider.value)}
- />
- );
- })}
-
-
-
setHasChanges(true)}
- className="mt-4 flex flex-col gap-y-1"
- >
- {selectedProvider &&
- PROVIDERS.find(
- (provider) => provider.value === selectedProvider
- )?.options}
-
+ ) : (
+
setSearchMenuOpen(true)}
+ >
+
+
+
+
+ {selectedProviderObject.name}
+
+
+ {selectedProviderObject.description}
+
+
+
+ )}
+
+
setHasChanges(true)}
+ className="mt-4 flex flex-col gap-y-1"
+ >
+ {selectedProvider &&
+ PROVIDERS.find(
+ (provider) => provider.value === selectedProvider
+ )?.options}
diff --git a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
index 0b2225cb..df0307d1 100644
--- a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
+++ b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
import Sidebar from "@/components/SettingsSidebar";
import { isMobile } from "react-device-detect";
import System from "@/models/system";
@@ -13,7 +13,7 @@ import ZillizLogo from "@/media/vectordbs/zilliz.png";
import AstraDBLogo from "@/media/vectordbs/astraDB.png";
import PreLoader from "@/components/Preloader";
import ChangeWarningModal from "@/components/ChangeWarning";
-import { MagnifyingGlass } from "@phosphor-icons/react";
+import { CaretUpDown, MagnifyingGlass, X } from "@phosphor-icons/react";
import LanceDBOptions from "@/components/VectorDBSelection/LanceDBOptions";
import ChromaDBOptions from "@/components/VectorDBSelection/ChromaDBOptions";
import PineconeDBOptions from "@/components/VectorDBSelection/PineconeDBOptions";
@@ -35,8 +35,55 @@ export default function GeneralVectorDatabase() {
const [searchQuery, setSearchQuery] = useState("");
const [filteredVDBs, setFilteredVDBs] = useState([]);
const [selectedVDB, setSelectedVDB] = useState(null);
+ const [searchMenuOpen, setSearchMenuOpen] = useState(false);
+ const searchInputRef = useRef(null);
const { isOpen, openModal, closeModal } = useModal();
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ if (selectedVDB !== settings?.VectorDB && hasChanges && hasEmbeddings) {
+ openModal();
+ } else {
+ await handleSaveSettings();
+ }
+ };
+
+ const handleSaveSettings = async () => {
+ setSaving(true);
+ const form = document.getElementById("vectordb-form");
+ const settingsData = {};
+ 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) {
+ showToast(`Failed to save vector database settings: ${error}`, "error");
+ setHasChanges(true);
+ } else {
+ showToast("Vector database preferences saved successfully.", "success");
+ setHasChanges(false);
+ }
+ setSaving(false);
+ closeModal();
+ };
+
+ const updateVectorChoice = (selection) => {
+ setSearchQuery("");
+ setSelectedVDB(selection);
+ setSearchMenuOpen(false);
+ setHasChanges(true);
+ };
+
+ const handleXButton = () => {
+ if (searchQuery.length > 0) {
+ setSearchQuery("");
+ if (searchInputRef.current) searchInputRef.current.value = "";
+ } else {
+ setSearchMenuOpen(!searchMenuOpen);
+ }
+ };
+
useEffect(() => {
async function fetchKeys() {
const _settings = await System.keys();
@@ -48,6 +95,13 @@ export default function GeneralVectorDatabase() {
fetchKeys();
}, []);
+ useEffect(() => {
+ const filtered = VECTOR_DBS.filter((vdb) =>
+ vdb.name.toLowerCase().includes(searchQuery.toLowerCase())
+ );
+ setFilteredVDBs(filtered);
+ }, [searchQuery, selectedVDB]);
+
const VECTOR_DBS = [
{
name: "LanceDB",
@@ -111,46 +165,7 @@ export default function GeneralVectorDatabase() {
},
];
- const updateVectorChoice = (selection) => {
- setHasChanges(true);
- setSelectedVDB(selection);
- };
-
- const handleSubmit = async (e) => {
- e.preventDefault();
- if (selectedVDB !== settings?.VectorDB && hasChanges && hasEmbeddings) {
- openModal();
- } else {
- await handleSaveSettings();
- }
- };
-
- const handleSaveSettings = async () => {
- setSaving(true);
- const form = document.getElementById("vectordb-form");
- const settingsData = {};
- 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) {
- showToast(`Failed to save vector database settings: ${error}`, "error");
- setHasChanges(true);
- } else {
- showToast("Vector database preferences saved successfully.", "success");
- setHasChanges(false);
- }
- setSaving(false);
- closeModal();
- };
-
- useEffect(() => {
- const filtered = VECTOR_DBS.filter((vdb) =>
- vdb.name.toLowerCase().includes(searchQuery.toLowerCase())
- );
- setFilteredVDBs(filtered);
- }, [searchQuery, selectedVDB]);
+ const selectedVDBObject = VECTOR_DBS.find((vdb) => vdb.value === selectedVDB);
return (
@@ -176,7 +191,7 @@ export default function GeneralVectorDatabase() {
>
-
+
Vector Database
@@ -196,55 +211,94 @@ export default function GeneralVectorDatabase() {
are current and correct.
-
- Vector Database Providers
+
+ Vector Database Provider
-
-
-
-
-
-
{
- e.preventDefault();
- setSearchQuery(e.target.value);
- }}
- autoComplete="off"
- onKeyDown={(e) => {
- if (e.key === "Enter") e.preventDefault();
- }}
- />
+
+ {searchMenuOpen && (
+
setSearchMenuOpen(false)}
+ />
+ )}
+ {searchMenuOpen ? (
+
+
+
+
+
+ {filteredVDBs.map((vdb) => (
+ updateVectorChoice(vdb.value)}
+ />
+ ))}
+
-
- {filteredVDBs.map((vdb) => (
-
updateVectorChoice(vdb.value)}
+ ) : (
+ setSearchMenuOpen(true)}
+ >
+
+
- ))}
-
-
setHasChanges(true)}
- className="mt-4 flex flex-col gap-y-1"
- >
- {selectedVDB &&
- VECTOR_DBS.find((vdb) => vdb.value === selectedVDB)
- ?.options}
-
+
+
+ {selectedVDBObject.name}
+
+
+ {selectedVDBObject.description}
+
+
+
+
+
+ )}
+
+
setHasChanges(true)}
+ className="mt-4 flex flex-col gap-y-1"
+ >
+ {selectedVDB &&
+ VECTOR_DBS.find((vdb) => vdb.value === selectedVDB)?.options}