+
);
}
diff --git a/frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx b/frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx
index 2b976e1428..6f81712c14 100644
--- a/frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx
@@ -10,72 +10,72 @@ export default function LocalAiOptions({ settings }) {
const [apiKey, setApiKey] = useState(settings?.LocalAiApiKey);
return (
- <>
+
+
+
+
-
-
-
-
+
+
+
+
-
-
-
+
-
+
+
+
+
-
-
- setBasePathValue(e.target.value)}
- onBlur={() => setBasePath(basePathValue)}
- required={true}
- autoComplete="off"
- spellCheck={false}
- />
-
-
-
- e.target.blur()}
- defaultValue={settings?.EmbeddingModelMaxChunkLength}
- required={false}
- autoComplete="off"
+
-
+
-
+
+ setBasePathValue(e.target.value)}
+ onBlur={() => setBasePath(basePathValue)}
+ required={true}
+ autoComplete="off"
+ spellCheck={false}
+ />
+
+
-
);
}
diff --git a/frontend/src/components/EmbeddingSelection/OpenAiOptions/index.jsx b/frontend/src/components/EmbeddingSelection/OpenAiOptions/index.jsx
index f38f7c445e..dd00d67abd 100644
--- a/frontend/src/components/EmbeddingSelection/OpenAiOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/OpenAiOptions/index.jsx
@@ -1,34 +1,36 @@
export default function OpenAiOptions({ settings }) {
return (
- <>
-
-
-
+
-
+
+
+
+
+
- setApiKeyValue(e.target.value)}
- onBlur={() => setApiKey(apiKeyValue)}
- />
+ setApiKeyValue(e.target.value)}
+ onBlur={() => setApiKey(apiKeyValue)}
+ />
+
-
-
+
+
);
}
diff --git a/frontend/src/components/LLMSelection/AzureAiOptions/index.jsx b/frontend/src/components/LLMSelection/AzureAiOptions/index.jsx
index 2978651016..ce54d3d60d 100644
--- a/frontend/src/components/LLMSelection/AzureAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/AzureAiOptions/index.jsx
@@ -1,87 +1,92 @@
export default function AzureAiOptions({ settings }) {
return (
- <>
-
+
-
+
+
+
+
+
+
+
-
-
-
-
+
-
-
-
+
+
+
+
+
+
-
-
-
-
+
+
+
+
-
-
-
+
-
+
+
+
-
-
-
+
+
);
}
diff --git a/frontend/src/components/LLMSelection/OpenAiOptions/index.jsx b/frontend/src/components/LLMSelection/OpenAiOptions/index.jsx
index fd2f876651..cbd83edb99 100644
--- a/frontend/src/components/LLMSelection/OpenAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/OpenAiOptions/index.jsx
@@ -6,7 +6,7 @@ export default function OpenAiOptions({ settings }) {
const [openAIKey, setOpenAIKey] = useState(settings?.OpenAiKey);
return (
- <>
+
+
+
+
-
-
-
+
-
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/components/VectorDBSelection/LanceDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/LanceDBOptions/index.jsx
new file mode 100644
index 0000000000..942a3666da
--- /dev/null
+++ b/frontend/src/components/VectorDBSelection/LanceDBOptions/index.jsx
@@ -0,0 +1,9 @@
+export default function LanceDBOptions() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/components/VectorDBSelection/PineconeDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/PineconeDBOptions/index.jsx
new file mode 100644
index 0000000000..5491f758c6
--- /dev/null
+++ b/frontend/src/components/VectorDBSelection/PineconeDBOptions/index.jsx
@@ -0,0 +1,55 @@
+export default function PineconeDBOptions({ settings }) {
+ return (
+ + There is no configuration needed for LanceDB. +
+
+
+ );
+}
diff --git a/frontend/src/components/VectorDBSelection/QDrantDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/QDrantDBOptions/index.jsx
new file mode 100644
index 0000000000..e1e9d90f68
--- /dev/null
+++ b/frontend/src/components/VectorDBSelection/QDrantDBOptions/index.jsx
@@ -0,0 +1,38 @@
+export default function QDrantDBOptions({ settings }) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/components/VectorDBSelection/WeaviateDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/WeaviateDBOptions/index.jsx
new file mode 100644
index 0000000000..5d7494ed15
--- /dev/null
+++ b/frontend/src/components/VectorDBSelection/WeaviateDBOptions/index.jsx
@@ -0,0 +1,38 @@
+export default function WeaviateDBOptions({ settings }) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/media/illustrations/create-workspace.png b/frontend/src/media/illustrations/create-workspace.png
new file mode 100644
index 0000000000..8e31174e5d
Binary files /dev/null and b/frontend/src/media/illustrations/create-workspace.png differ
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/AppearanceSetup/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/AppearanceSetup/index.jsx
deleted file mode 100644
index 30e87b0ac6..0000000000
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/AppearanceSetup/index.jsx
+++ /dev/null
@@ -1,145 +0,0 @@
-import React, { memo, useEffect, useState } from "react";
-import System from "@/models/system";
-import AnythingLLM from "@/media/logo/anything-llm.png";
-import useLogo from "@/hooks/useLogo";
-import { Plus } from "@phosphor-icons/react";
-import showToast from "@/utils/toast";
-
-function AppearanceSetup({ prevStep, nextStep }) {
- const { logo: _initLogo, setLogo: _setLogo } = useLogo();
- const [logo, setLogo] = useState("");
- const [isDefaultLogo, setIsDefaultLogo] = useState(true);
-
- useEffect(() => {
- async function logoInit() {
- setLogo(_initLogo || "");
- const _isDefaultLogo = await System.isDefaultLogo();
- setIsDefaultLogo(_isDefaultLogo);
- }
- logoInit();
- }, [_initLogo]);
-
- const handleFileUpload = async (event) => {
- const file = event.target.files[0];
- if (!file) return false;
-
- const objectURL = URL.createObjectURL(file);
- setLogo(objectURL);
-
- const formData = new FormData();
- formData.append("logo", file);
- const { success, error } = await System.uploadLogo(formData);
- if (!success) {
- showToast(`Failed to upload logo: ${error}`, "error");
- setLogo(_initLogo);
- return;
- }
-
- const logoURL = await System.fetchLogo();
- _setLogo(logoURL);
-
- showToast("Image uploaded successfully.", "success");
- setIsDefaultLogo(false);
- };
-
- const handleRemoveLogo = async () => {
- setLogo("");
- setIsDefaultLogo(true);
-
- const { success, error } = await System.removeCustomLogo();
- if (!success) {
- console.error("Failed to remove logo:", error);
- showToast(`Failed to remove logo: ${error}`, "error");
- const logoURL = await System.fetchLogo();
- setLogo(logoURL);
- setIsDefaultLogo(false);
- return;
- }
-
- const logoURL = await System.fetchLogo();
- _setLogo(logoURL);
-
- showToast("Image successfully removed.", "success");
- };
-
- return (
-
+
+
+
+
+
+
+
+
+
+
+
-
- );
-}
-export default memo(AppearanceSetup);
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/CreateFirstWorkspace/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/CreateFirstWorkspace/index.jsx
deleted file mode 100644
index d2624ef6a1..0000000000
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/CreateFirstWorkspace/index.jsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React, { memo } from "react";
-import { useNavigate } from "react-router-dom";
-import paths from "@/utils/paths";
-import Workspace from "@/models/workspace";
-
-function CreateFirstWorkspace({ prevStep }) {
- const navigate = useNavigate();
-
- const handleCreate = async (e) => {
- e.preventDefault();
- const form = new FormData(e.target);
- const { workspace, error } = await Workspace.new({
- name: form.get("name"),
- onboardingComplete: true,
- });
- if (!!workspace) {
- navigate(paths.home());
- } else {
- alert(error);
- }
- };
-
- return (
-
-
-
-
- Custom Logo
-- Upload your custom logo to make your chatbot yours. -
-
- 
(e.target.src = AnythingLLM)}
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-export default memo(CreateFirstWorkspace);
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/EmbeddingSelection/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/EmbeddingSelection/index.jsx
deleted file mode 100644
index 98e1262a04..0000000000
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/EmbeddingSelection/index.jsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import React, { memo, useEffect, useState } from "react";
-import AnythingLLMIcon from "@/media/logo/anything-llm-icon.png";
-import OpenAiLogo from "@/media/llmprovider/openai.png";
-import AzureOpenAiLogo from "@/media/llmprovider/azure.png";
-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";
-import NativeEmbeddingOptions from "@/components/EmbeddingSelection/NativeEmbeddingOptions";
-
-function EmbeddingSelection({ nextStep, prevStep, currentStep }) {
- const [embeddingChoice, setEmbeddingChoice] = useState("native");
- const [settings, setSettings] = useState(null);
- const [loading, setLoading] = useState(true);
- const updateChoice = (selection) => {
- setEmbeddingChoice(selection);
- };
-
- useEffect(() => {
- async function fetchKeys() {
- const _settings = await System.keys();
- setSettings(_settings);
- setEmbeddingChoice(_settings?.EmbeddingEngine || "native");
- setLoading(false);
- }
- fetchKeys();
- }, [currentStep]);
-
- const handleSubmit = async (e) => {
- e.preventDefault();
- const form = e.target;
- const data = {};
- const formData = new FormData(form);
- for (var [key, value] of formData.entries()) data[key] = value;
- const { error } = await System.updateSystem(data);
- if (error) {
- alert(`Failed to save LLM settings: ${error}`, "error");
- return;
- }
- nextStep("vector_database");
- return;
- };
-
- if (loading)
- return (
-
-
- );
-
- return (
-
-
-
- );
-}
-
-export default memo(EmbeddingSelection);
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/LLMSelection/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/LLMSelection/index.jsx
deleted file mode 100644
index 850dea3c2e..0000000000
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/LLMSelection/index.jsx
+++ /dev/null
@@ -1,183 +0,0 @@
-import React, { memo, useEffect, useState } from "react";
-import AnythingLLMIcon from "@/media/logo/anything-llm-icon.png";
-import OpenAiLogo from "@/media/llmprovider/openai.png";
-import AzureOpenAiLogo from "@/media/llmprovider/azure.png";
-import AnthropicLogo from "@/media/llmprovider/anthropic.png";
-import GeminiLogo from "@/media/llmprovider/gemini.png";
-import OllamaLogo from "@/media/llmprovider/ollama.png";
-import LMStudioLogo from "@/media/llmprovider/lmstudio.png";
-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/LLMSelection/OpenAiOptions";
-import AzureAiOptions from "@/components/LLMSelection/AzureAiOptions";
-import AnthropicAiOptions from "@/components/LLMSelection/AnthropicAiOptions";
-import LMStudioOptions from "@/components/LLMSelection/LMStudioOptions";
-import LocalAiOptions from "@/components/LLMSelection/LocalAiOptions";
-import NativeLLMOptions from "@/components/LLMSelection/NativeLLMOptions";
-import GeminiLLMOptions from "@/components/LLMSelection/GeminiLLMOptions";
-import OllamaLLMOptions from "@/components/LLMSelection/OllamaLLMOptions";
-
-function LLMSelection({ nextStep, prevStep, currentStep }) {
- const [llmChoice, setLLMChoice] = useState("openai");
- const [settings, setSettings] = useState(null);
- const [loading, setLoading] = useState(true);
-
- const updateLLMChoice = (selection) => {
- setLLMChoice(selection);
- };
-
- useEffect(() => {
- async function fetchKeys() {
- const _settings = await System.keys();
- setSettings(_settings);
- setLLMChoice(_settings?.LLMProvider || "openai");
- setLoading(false);
- }
-
- if (currentStep === "llm_preference") {
- fetchKeys();
- }
- }, []);
-
- const handleSubmit = async (e) => {
- e.preventDefault();
- const form = e.target;
- const data = {};
- const formData = new FormData(form);
- for (var [key, value] of formData.entries()) data[key] = value;
- const { error } = await System.updateSystem(data);
- if (error) {
- alert(`Failed to save LLM settings: ${error}`, "error");
- return;
- }
- nextStep("embedding_preferences");
- };
-
- if (loading)
- return (
-
-
- );
-
- return (
-
-
-
- );
-}
-
-export default memo(LLMSelection);
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/MultiUserSetup/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/MultiUserSetup/index.jsx
deleted file mode 100644
index 71310abfca..0000000000
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/MultiUserSetup/index.jsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import React, { useState, memo } from "react";
-import System from "@/models/system";
-import { AUTH_TIMESTAMP, AUTH_TOKEN, AUTH_USER } from "@/utils/constants";
-import debounce from "lodash.debounce";
-
-// Multi-user mode step
-function MultiUserSetup({ nextStep, prevStep }) {
- const [username, setUsername] = useState("");
- const [password, setPassword] = useState("");
-
- const handleSubmit = async (e) => {
- e.preventDefault();
- const form = e.target;
- const formData = new FormData(form);
- const data = {
- username: formData.get("username"),
- password: formData.get("password"),
- };
- const { success, error } = await System.setupMultiUser(data);
- if (!success) {
- alert(error);
- return;
- }
-
- // Auto-request token with credentials that was just set so they
- // are not redirected to login after completion.
- const { user, token } = await System.requestToken(data);
- window.localStorage.setItem(AUTH_USER, JSON.stringify(user));
- window.localStorage.setItem(AUTH_TOKEN, token);
- window.localStorage.removeItem(AUTH_TIMESTAMP);
-
- nextStep("data_handling");
- };
-
- const setNewUsername = (e) => setUsername(e.target.value);
- const setNewPassword = (e) => setPassword(e.target.value);
- const handleUsernameChange = debounce(setNewUsername, 500);
- const handlePasswordChange = debounce(setNewPassword, 500);
- return (
-
-
-
- );
-}
-export default memo(MultiUserSetup);
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/PasswordProtection/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/PasswordProtection/index.jsx
deleted file mode 100644
index 4504288e6a..0000000000
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/PasswordProtection/index.jsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import React, { memo, useState } from "react";
-import System from "@/models/system";
-import { AUTH_TIMESTAMP, AUTH_TOKEN, AUTH_USER } from "@/utils/constants";
-import debounce from "lodash.debounce";
-
-function PasswordProtection({ nextStep, prevStep }) {
- const [password, setPassword] = useState("");
- const handleSubmit = async (e) => {
- e.preventDefault();
- const form = e.target;
- const formData = new FormData(form);
- const { error } = await System.updateSystemPassword({
- usePassword: true,
- newPassword: formData.get("password"),
- });
-
- if (error) {
- alert(`Failed to set password: ${error}`, "error");
- return;
- }
-
- // Auto-request token with password that was just set so they
- // are not redirected to login after completion.
- const { token } = await System.requestToken({
- password: formData.get("password"),
- });
- window.localStorage.removeItem(AUTH_USER);
- window.localStorage.removeItem(AUTH_TIMESTAMP);
- window.localStorage.setItem(AUTH_TOKEN, token);
-
- nextStep("data_handling");
- return;
- };
-
- const handleSkip = () => {
- nextStep("data_handling");
- };
-
- const setNewPassword = (e) => setPassword(e.target.value);
- const handlePasswordChange = debounce(setNewPassword, 500);
- return (
-
-
-
- );
-}
-export default memo(PasswordProtection);
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/UserModeSelection/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/UserModeSelection/index.jsx
deleted file mode 100644
index b78c325330..0000000000
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/UserModeSelection/index.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React, { memo } from "react";
-
-// How many people will be using your instance step
-function UserModeSelection({ nextStep, prevStep }) {
- const justMeClicked = () => {
- nextStep("password_protection");
- };
-
- const myTeamClicked = () => {
- nextStep("multi_user_mode");
- };
-
- return (
-
-
- );
-}
-
-export default memo(UserModeSelection);
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/UserQuestionnaire/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/UserQuestionnaire/index.jsx
deleted file mode 100644
index a0cb97fd75..0000000000
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/UserQuestionnaire/index.jsx
+++ /dev/null
@@ -1,240 +0,0 @@
-import { COMPLETE_QUESTIONNAIRE } from "@/utils/constants";
-import paths from "@/utils/paths";
-import { CheckCircle, Circle } from "@phosphor-icons/react";
-import React, { memo } from "react";
-
-async function sendQuestionnaire({ email, useCase, comment }) {
- if (import.meta.env.DEV) return;
- return fetch(`https://onboarding-wxich7363q-uc.a.run.app`, {
- method: "POST",
- body: JSON.stringify({
- email,
- useCase,
- comment,
- sourceId: "0VRjqHh6Vukqi0x0Vd0n/m8JuT7k8nOz",
- }),
- })
- .then(() => {
- window.localStorage.setItem(COMPLETE_QUESTIONNAIRE, true);
- console.log(`✅ Questionnaire responses sent.`);
- })
- .catch((error) => {
- console.error(`sendQuestionnaire`, error.message);
- });
-}
-
-function UserQuestionnaire({ nextStep, prevStep }) {
- const handleSubmit = async (e) => {
- e.preventDefault();
- const form = e.target;
- const formData = new FormData(form);
- nextStep("create_workspace");
-
- await sendQuestionnaire({
- email: formData.get("email"),
- useCase: formData.get("use_case") || "other",
- comment: formData.get("comment") || null,
- });
- return;
- };
-
- const handleSkip = () => {
- nextStep("create_workspace");
- };
-
- if (!!window?.localStorage?.getItem(COMPLETE_QUESTIONNAIRE)) {
- return (
-
-
-
- How many people will be using your instance?
-
-
-
-
-
-
-
-
-
-
- );
- }
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-export default memo(UserQuestionnaire);
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/VectorDatabaseConnection/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/VectorDatabaseConnection/index.jsx
deleted file mode 100644
index 16ee9aa53b..0000000000
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/VectorDatabaseConnection/index.jsx
+++ /dev/null
@@ -1,310 +0,0 @@
-import React, { memo, useEffect, useState } from "react";
-
-import VectorDBOption from "@/components/VectorDBOption";
-import ChromaLogo from "@/media/vectordbs/chroma.png";
-import PineconeLogo from "@/media/vectordbs/pinecone.png";
-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 PreLoader from "@/components/Preloader";
-
-function VectorDatabaseConnection({ nextStep, prevStep, currentStep }) {
- const [vectorDB, setVectorDB] = useState("lancedb");
- const [settings, setSettings] = useState({});
- const [loading, setLoading] = useState(true);
-
- useEffect(() => {
- async function fetchKeys() {
- const _settings = await System.keys();
- setSettings(_settings);
- setVectorDB(_settings?.VectorDB || "lancedb");
- setLoading(false);
- }
- if (currentStep === "vector_database") {
- fetchKeys();
- }
- }, [currentStep]);
-
- const updateVectorChoice = (selection) => {
- setVectorDB(selection);
- };
-
- const handleSubmit = async (e, formElement) => {
- e.preventDefault();
- const form = formElement || e.target;
- const data = {};
- const formData = new FormData(form);
- for (var [key, value] of formData.entries()) data[key] = value;
- const { error } = await System.updateSystem(data);
- if (error) {
- alert(`Failed to save settings: ${error}`, "error");
- return;
- }
- nextStep("appearance");
- return;
- };
-
- if (loading)
- return (
-
-
- );
-
- return (
-
-
-
- );
-}
-
-export default memo(VectorDatabaseConnection);
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/index.jsx
deleted file mode 100644
index 9815a7e80d..0000000000
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/index.jsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import React, { useState } from "react";
-import { X } from "@phosphor-icons/react";
-import LLMSelection from "./Steps/LLMSelection";
-import VectorDatabaseConnection from "./Steps/VectorDatabaseConnection";
-import AppearanceSetup from "./Steps/AppearanceSetup";
-import UserModeSelection from "./Steps/UserModeSelection";
-import PasswordProtection from "./Steps/PasswordProtection";
-import MultiUserSetup from "./Steps/MultiUserSetup";
-import CreateFirstWorkspace from "./Steps/CreateFirstWorkspace";
-import EmbeddingSelection from "./Steps/EmbeddingSelection";
-import DataHandling from "./Steps/DataHandling";
-import UserQuestionnaire from "./Steps/UserQuestionnaire";
-
-const DIALOG_ID = "onboarding-modal";
-
-const STEPS = {
- llm_preference: {
- title: "LLM Preference",
- description:
- "These are the credentials and settings for your preferred LLM chat & embedding provider.",
- component: LLMSelection,
- },
- embedding_preferences: {
- title: "Embedding Preference",
- description: "Choose a provider for embedding files and text.",
- component: EmbeddingSelection,
- },
- vector_database: {
- title: "Vector Database",
- description:
- "These are the credentials and settings for how your AnythingLLM instance will function.",
- component: VectorDatabaseConnection,
- },
- appearance: {
- title: "Appearance",
- description:
- "Customize the appearance of your AnythingLLM instance.\nFind more customization options on the appearance settings page.",
- component: AppearanceSetup,
- },
- user_mode_setup: {
- title: "User Mode Setup",
- description: "Choose how many people will be using your instance.",
- component: UserModeSelection,
- },
- password_protection: {
- title: "Password Protect",
- description:
- "Protect your instance with a password. It is important to save this password as it cannot be recovered.",
- component: PasswordProtection,
- },
- multi_user_mode: {
- title: "Multi-User Mode",
- description:
- "Setup your instance to support your team by activating multi-user mode.",
- component: MultiUserSetup,
- },
- data_handling: {
- title: "Data Handling",
- description:
- "We are committed to transparency and control when it comes to your personal data.",
- component: DataHandling,
- },
- user_questionnaire: {
- title: "A little about yourself",
- description:
- "We use information about how you use AnythingLLM to make our product better.",
- component: UserQuestionnaire,
- },
- create_workspace: {
- title: "Create Workspace",
- description: "To get started, create a new workspace.",
- component: CreateFirstWorkspace,
- },
-};
-
-export const OnboardingModalId = DIALOG_ID;
-export default function OnboardingModal({ setModalVisible }) {
- const [currentStep, setCurrentStep] = useState("llm_preference");
- const [history, setHistory] = useState(["llm_preference"]);
-
- function hideModal() {
- setModalVisible(false);
- }
-
- const nextStep = (stepKey) => {
- setCurrentStep(stepKey);
- setHistory([...history, stepKey]);
- };
-
- const prevStep = () => {
- const currentStepIdx = history.indexOf(currentStep);
- if (currentStepIdx === -1 || currentStepIdx === 0) {
- setCurrentStep("llm_preference");
- setHistory(["llm_preference"]);
- return hideModal();
- }
-
- const prevStep = history[currentStepIdx - 1];
- const _history = [...history].slice(0, currentStepIdx);
- setCurrentStep(prevStep);
- setHistory(_history);
- };
-
- const { component: StepComponent, ...step } = STEPS[currentStep];
- return (
-
- );
-}
diff --git a/frontend/src/pages/OnboardingFlow/Steps/CreateWorkspace/index.jsx b/frontend/src/pages/OnboardingFlow/Steps/CreateWorkspace/index.jsx
new file mode 100644
index 0000000000..aa53c87fc4
--- /dev/null
+++ b/frontend/src/pages/OnboardingFlow/Steps/CreateWorkspace/index.jsx
@@ -0,0 +1,99 @@
+import React, { useEffect, useRef, useState } from "react";
+import illustration from "@/media/illustrations/create-workspace.png";
+import paths from "@/utils/paths";
+import showToast from "@/utils/toast";
+import { useNavigate } from "react-router-dom";
+import Workspace from "@/models/workspace";
+
+const TITLE = "Create your first workspace";
+const DESCRIPTION =
+ "Create your first workspace and get started with AnythingLLM.";
+
+export default function CreateWorkspace({
+ setHeader,
+ setForwardBtn,
+ setBackBtn,
+}) {
+ const [workspaceName, setWorkspaceName] = useState("");
+ const navigate = useNavigate();
+ const createWorkspaceRef = useRef();
+
+ useEffect(() => {
+ setHeader({ title: TITLE, description: DESCRIPTION });
+ setBackBtn({ showing: false, disabled: false, onClick: handleBack });
+ }, []);
+
+ useEffect(() => {
+ if (workspaceName.length > 3) {
+ setForwardBtn({ showing: true, disabled: false, onClick: handleForward });
+ } else {
+ setForwardBtn({ showing: true, disabled: true, onClick: handleForward });
+ }
+ }, [workspaceName]);
+
+ const handleCreate = async (e) => {
+ e.preventDefault();
+ const form = new FormData(e.target);
+ const { workspace, error } = await Workspace.new({
+ name: form.get("name"),
+ onboardingComplete: true,
+ });
+ if (!!workspace) {
+ showToast(
+ "Workspace created successfully! Taking you to home...",
+ "success"
+ );
+ await new Promise((resolve) => setTimeout(resolve, 1000));
+ navigate(paths.home());
+ } else {
+ showToast(`Failed to create workspace: ${error}`, "error");
+ }
+ };
+
+ function handleForward() {
+ createWorkspaceRef.current.click();
+ }
+
+ function handleBack() {
+ navigate(paths.onboarding.survey());
+ }
+
+ return (
+
+ );
+}
diff --git a/frontend/src/pages/OnboardingFlow/Steps/CustomLogo/index.jsx b/frontend/src/pages/OnboardingFlow/Steps/CustomLogo/index.jsx
new file mode 100644
index 0000000000..bb421bc39a
--- /dev/null
+++ b/frontend/src/pages/OnboardingFlow/Steps/CustomLogo/index.jsx
@@ -0,0 +1,136 @@
+import useLogo from "@/hooks/useLogo";
+import System from "@/models/system";
+import showToast from "@/utils/toast";
+import { Plus } from "@phosphor-icons/react";
+import React, { useState, useEffect } from "react";
+import AnythingLLM from "@/media/logo/anything-llm.png";
+import paths from "@/utils/paths";
+import { useNavigate } from "react-router-dom";
+
+const TITLE = "Custom Logo";
+const DESCRIPTION =
+ "Upload your custom logo to make your chatbot yours. Optional.";
+
+export default function CustomLogo({ setHeader, setForwardBtn, setBackBtn }) {
+ const navigate = useNavigate();
+ function handleForward() {
+ navigate(paths.onboarding.userSetup());
+ }
+
+ function handleBack() {
+ navigate(paths.onboarding.vectorDatabase());
+ }
+
+ useEffect(() => {
+ setHeader({ title: TITLE, description: DESCRIPTION });
+ setForwardBtn({ showing: true, disabled: false, onClick: handleForward });
+ setBackBtn({ showing: true, disabled: false, onClick: handleBack });
+ }, []);
+
+ const { logo: _initLogo, setLogo: _setLogo } = useLogo();
+ const [logo, setLogo] = useState("");
+ const [isDefaultLogo, setIsDefaultLogo] = useState(true);
+
+ useEffect(() => {
+ async function logoInit() {
+ setLogo(_initLogo || "");
+ const _isDefaultLogo = await System.isDefaultLogo();
+ setIsDefaultLogo(_isDefaultLogo);
+ }
+ logoInit();
+ }, [_initLogo]);
+
+ const handleFileUpload = async (event) => {
+ const file = event.target.files[0];
+ if (!file) return false;
+
+ const objectURL = URL.createObjectURL(file);
+ setLogo(objectURL);
+
+ const formData = new FormData();
+ formData.append("logo", file);
+ const { success, error } = await System.uploadLogo(formData);
+ if (!success) {
+ showToast(`Failed to upload logo: ${error}`, "error");
+ setLogo(_initLogo);
+ return;
+ }
+
+ const logoURL = await System.fetchLogo();
+ _setLogo(logoURL);
+
+ showToast("Image uploaded successfully.", "success", { clear: true });
+ setIsDefaultLogo(false);
+ };
+
+ const handleRemoveLogo = async () => {
+ setLogo("");
+ setIsDefaultLogo(true);
+
+ const { success, error } = await System.removeCustomLogo();
+ if (!success) {
+ console.error("Failed to remove logo:", error);
+ showToast(`Failed to remove logo: ${error}`, "error");
+ const logoURL = await System.fetchLogo();
+ setLogo(logoURL);
+ setIsDefaultLogo(false);
+ return;
+ }
+
+ const logoURL = await System.fetchLogo();
+ _setLogo(logoURL);
+
+ showToast("Image successfully removed.", "success", { clear: true });
+ };
+
+ return (
+
+
+ );
+}
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/DataHandling/index.jsx b/frontend/src/pages/OnboardingFlow/Steps/DataHandling/index.jsx
similarity index 87%
rename from frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/DataHandling/index.jsx
rename to frontend/src/pages/OnboardingFlow/Steps/DataHandling/index.jsx
index 81b93c5dc0..db285f1283 100644
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/DataHandling/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/Steps/DataHandling/index.jsx
@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useState } from "react";
+import PreLoader from "@/components/Preloader";
import System from "@/models/system";
import AnythingLLMIcon from "@/media/logo/anything-llm-icon.png";
import OpenAiLogo from "@/media/llmprovider/openai.png";
@@ -13,8 +13,13 @@ import PineconeLogo from "@/media/vectordbs/pinecone.png";
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 React, { useState, useEffect } from "react";
+import paths from "@/utils/paths";
+import { useNavigate } from "react-router-dom";
+const TITLE = "Data Handling & Privacy";
+const DESCRIPTION =
+ "We are committed to transparency and control when it comes to your personal data.";
const LLM_SELECTION_PRIVACY = {
openai: {
name: "OpenAI",
@@ -151,26 +156,36 @@ const EMBEDDING_ENGINE_PRIVACY = {
},
};
-function DataHandling({ nextStep, prevStep, currentStep }) {
+export default function DataHandling({ setHeader, setForwardBtn, setBackBtn }) {
const [llmChoice, setLLMChoice] = useState("openai");
const [loading, setLoading] = useState(true);
const [vectorDb, setVectorDb] = useState("pinecone");
const [embeddingEngine, setEmbeddingEngine] = useState("openai");
+ const navigate = useNavigate();
useEffect(() => {
+ setHeader({ title: TITLE, description: DESCRIPTION });
+ setForwardBtn({ showing: true, disabled: false, onClick: handleForward });
+ setBackBtn({ showing: false, disabled: false, onClick: handleBack });
async function fetchKeys() {
const _settings = await System.keys();
- setLLMChoice(_settings?.LLMProvider);
- setVectorDb(_settings?.VectorDB);
- setEmbeddingEngine(_settings?.EmbeddingEngine);
+ setLLMChoice(_settings?.LLMProvider || "openai");
+ setVectorDb(_settings?.VectorDB || "pinecone");
+ setEmbeddingEngine(_settings?.EmbeddingEngine || "openai");
setLoading(false);
}
- if (currentStep === "data_handling") {
- fetchKeys();
- }
+ fetchKeys();
}, []);
+ function handleForward() {
+ navigate(paths.onboarding.survey());
+ }
+
+ function handleBack() {
+ navigate(paths.onboarding.userSetup());
+ }
+
if (loading)
return (
+ {isDefaultLogo ? (
+
+ ) : (
+
+
+ (e.target.src = AnythingLLM)}
+ />
+
+ )}
+
+
+
@@ -179,7 +194,7 @@ function DataHandling({ nextStep, prevStep, currentStep }) {
);
return (
-
+
-
);
}
-
-export default memo(DataHandling);
diff --git a/frontend/src/pages/OnboardingFlow/Steps/EmbeddingPreference/EmbedderItem.jsx b/frontend/src/pages/OnboardingFlow/Steps/EmbeddingPreference/EmbedderItem.jsx
new file mode 100644
index 0000000000..b37b645f95
--- /dev/null
+++ b/frontend/src/pages/OnboardingFlow/Steps/EmbeddingPreference/EmbedderItem.jsx
@@ -0,0 +1,39 @@
+export default function EmbedderItem({
+ name,
+ value,
+ image,
+ description,
+ checked,
+ onClick,
+}) {
+ return (
+
+ {(setHeader, setBackBtn, setForwardBtn) => (
+
);
}
diff --git a/frontend/src/utils/paths.js b/frontend/src/utils/paths.js
index 7a0c7bb70c..547a3b3f31 100644
--- a/frontend/src/utils/paths.js
+++ b/frontend/src/utils/paths.js
@@ -7,8 +7,34 @@ export default {
login: () => {
return "/login";
},
- onboarding: () => {
- return "/onboarding";
+ onboarding: {
+ home: () => {
+ return "/onboarding";
+ },
+ survey: () => {
+ return "/onboarding/survey";
+ },
+ llmPreference: () => {
+ return "/onboarding/llm-preference";
+ },
+ embeddingPreference: () => {
+ return "/onboarding/embedding-preference";
+ },
+ vectorDatabase: () => {
+ return "/onboarding/vector-database";
+ },
+ customLogo: () => {
+ return "/onboarding/custom-logo";
+ },
+ userSetup: () => {
+ return "/onboarding/user-setup";
+ },
+ dataHandling: () => {
+ return "/onboarding/data-handling";
+ },
+ createWorkspace: () => {
+ return "/onboarding/create-workspace";
+ },
},
github: () => {
return "https://github.com/Mintplex-Labs/anything-llm";
diff --git a/server/prisma/seed.js b/server/prisma/seed.js
index 71d1e63d68..829b812ab4 100644
--- a/server/prisma/seed.js
+++ b/server/prisma/seed.js
@@ -1,12 +1,13 @@
-const { PrismaClient } = require('@prisma/client');
+const { PrismaClient } = require("@prisma/client");
const prisma = new PrismaClient();
async function main() {
const settings = [
- { label: 'multi_user_mode', value: 'false' },
- { label: 'users_can_delete_workspaces', value: 'false' },
- { label: 'limit_user_messages', value: 'false' },
- { label: 'message_limit', value: '25' },
+ { label: "multi_user_mode", value: "false" },
+ { label: "users_can_delete_workspaces", value: "false" },
+ { label: "limit_user_messages", value: "false" },
+ { label: "message_limit", value: "25" },
+ { label: "logo_filename", value: "anything-llm.png" },
];
for (let setting of settings) {
@@ -24,7 +25,7 @@ async function main() {
}
main()
- .catch(e => {
+ .catch((e) => {
console.error(e);
process.exit(1);
})
LLM Selection
@@ -239,23 +254,6 @@ function DataHandling({ nextStep, prevStep, currentStep }) {
-
-
-
onClick(value)}
+ className={`w-full hover:bg-white/10 p-2 rounded-md hover:cursor-pointer ${
+ checked && "bg-white/10"
+ }`}
+ >
+
+
+ );
+}
diff --git a/frontend/src/pages/OnboardingFlow/Steps/EmbeddingPreference/index.jsx b/frontend/src/pages/OnboardingFlow/Steps/EmbeddingPreference/index.jsx
new file mode 100644
index 0000000000..c78d3f4434
--- /dev/null
+++ b/frontend/src/pages/OnboardingFlow/Steps/EmbeddingPreference/index.jsx
@@ -0,0 +1,180 @@
+import { MagnifyingGlass } from "@phosphor-icons/react";
+import { useEffect, useState, useRef } from "react";
+import AnythingLLMIcon from "@/media/logo/anything-llm-icon.png";
+import OpenAiLogo from "@/media/llmprovider/openai.png";
+import AzureOpenAiLogo from "@/media/llmprovider/azure.png";
+import LocalAiLogo from "@/media/llmprovider/localai.png";
+import NativeEmbeddingOptions from "@/components/EmbeddingSelection/NativeEmbeddingOptions";
+import OpenAiOptions from "@/components/EmbeddingSelection/OpenAiOptions";
+import AzureAiOptions from "@/components/EmbeddingSelection/AzureAiOptions";
+import LocalAiOptions from "@/components/EmbeddingSelection/LocalAiOptions";
+import EmbedderItem from "./EmbedderItem";
+import System from "@/models/system";
+import paths from "@/utils/paths";
+import showToast from "@/utils/toast";
+import { useNavigate } from "react-router-dom";
+
+const TITLE = "Embedding Preference";
+const DESCRIPTION =
+ "AnythingLLM can work with many embedding models. This will be the model which turns documents into vectors.";
+
+export default function EmbeddingPreference({
+ setHeader,
+ setForwardBtn,
+ setBackBtn,
+}) {
+ const [searchQuery, setSearchQuery] = useState("");
+ const [filteredEmbedders, setFilteredEmbedders] = useState([]);
+ const [selectedEmbedder, setSelectedEmbedder] = useState(null);
+ const [settings, setSettings] = useState(null);
+ const formRef = useRef(null);
+ const hiddenSubmitButtonRef = useRef(null);
+ const isHosted = window.location.hostname.includes("useanything.com");
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ async function fetchKeys() {
+ const _settings = await System.keys();
+ setSettings(_settings);
+ setSelectedEmbedder(_settings?.EmbeddingEngine || "native");
+ }
+ fetchKeys();
+ }, []);
+
+ const EMBEDDERS = [
+ {
+ name: "AnythingLLM Embedder",
+ value: "native",
+ logo: AnythingLLMIcon,
+ options:
+ 
+
+
+
+ {name}
+
+ {description}
+
+
+
+
+ );
+}
diff --git a/frontend/src/pages/OnboardingFlow/Steps/Home/index.jsx b/frontend/src/pages/OnboardingFlow/Steps/Home/index.jsx
new file mode 100644
index 0000000000..7b31e2ac3d
--- /dev/null
+++ b/frontend/src/pages/OnboardingFlow/Steps/Home/index.jsx
@@ -0,0 +1,41 @@
+import paths from "@/utils/paths";
+import LGroupImg from "./l_group.png";
+import RGroupImg from "./r_group.png";
+import AnythingLLMLogo from "@/media/logo/anything-llm.png";
+import { useNavigate } from "react-router-dom";
+
+export default function OnboardingHome() {
+ const navigate = useNavigate();
+ return (
+ <>
+
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/pages/OnboardingFlow/Steps/Home/l_group.png b/frontend/src/pages/OnboardingFlow/Steps/Home/l_group.png
new file mode 100644
index 0000000000..2981196a33
Binary files /dev/null and b/frontend/src/pages/OnboardingFlow/Steps/Home/l_group.png differ
diff --git a/frontend/src/pages/OnboardingFlow/Steps/Home/r_group.png b/frontend/src/pages/OnboardingFlow/Steps/Home/r_group.png
new file mode 100644
index 0000000000..fc50fd52c8
Binary files /dev/null and b/frontend/src/pages/OnboardingFlow/Steps/Home/r_group.png differ
diff --git a/frontend/src/pages/OnboardingFlow/Steps/LLMPreference/LLMItem.jsx b/frontend/src/pages/OnboardingFlow/Steps/LLMPreference/LLMItem.jsx
new file mode 100644
index 0000000000..b6db5d1303
--- /dev/null
+++ b/frontend/src/pages/OnboardingFlow/Steps/LLMPreference/LLMItem.jsx
@@ -0,0 +1,39 @@
+export default function LLMItem({
+ name,
+ value,
+ image,
+ description,
+ checked,
+ onClick,
+}) {
+ return (
+
+
+
+ 
+
+
+ Welcome to
+ onClick(value)}
+ className={`w-full hover:bg-white/10 p-2 rounded-md hover:cursor-pointer ${
+ checked && "bg-white/10"
+ }`}
+ >
+
+
+ );
+}
diff --git a/frontend/src/pages/OnboardingFlow/Steps/LLMPreference/index.jsx b/frontend/src/pages/OnboardingFlow/Steps/LLMPreference/index.jsx
new file mode 100644
index 0000000000..24d561ed6d
--- /dev/null
+++ b/frontend/src/pages/OnboardingFlow/Steps/LLMPreference/index.jsx
@@ -0,0 +1,211 @@
+import { MagnifyingGlass } from "@phosphor-icons/react";
+import { useEffect, useState, useRef } from "react";
+import OpenAiLogo from "@/media/llmprovider/openai.png";
+import AzureOpenAiLogo from "@/media/llmprovider/azure.png";
+import AnthropicLogo from "@/media/llmprovider/anthropic.png";
+import GeminiLogo from "@/media/llmprovider/gemini.png";
+import OllamaLogo from "@/media/llmprovider/ollama.png";
+import LMStudioLogo from "@/media/llmprovider/lmstudio.png";
+import LocalAiLogo from "@/media/llmprovider/localai.png";
+import AnythingLLMIcon from "@/media/logo/anything-llm-icon.png";
+import OpenAiOptions from "@/components/LLMSelection/OpenAiOptions";
+import AzureAiOptions from "@/components/LLMSelection/AzureAiOptions";
+import AnthropicAiOptions from "@/components/LLMSelection/AnthropicAiOptions";
+import LMStudioOptions from "@/components/LLMSelection/LMStudioOptions";
+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 System from "@/models/system";
+import paths from "@/utils/paths";
+import showToast from "@/utils/toast";
+import { useNavigate } from "react-router-dom";
+
+const TITLE = "LLM Preference";
+const DESCRIPTION =
+ "AnythingLLM can work with many LLM providers. This will be the service which handles chatting.";
+
+export default function LLMPreference({
+ setHeader,
+ setForwardBtn,
+ setBackBtn,
+}) {
+ const [searchQuery, setSearchQuery] = useState("");
+ const [filteredLLMs, setFilteredLLMs] = useState([]);
+ const [selectedLLM, setSelectedLLM] = useState(null);
+ const [settings, setSettings] = useState(null);
+ const formRef = useRef(null);
+ const hiddenSubmitButtonRef = useRef(null);
+ const isHosted = window.location.hostname.includes("useanything.com");
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ async function fetchKeys() {
+ const _settings = await System.keys();
+ setSettings(_settings);
+ setSelectedLLM(_settings?.LLMProvider || "openai");
+ }
+ fetchKeys();
+ }, []);
+
+ const LLMS = [
+ {
+ name: "OpenAI",
+ value: "openai",
+ logo: OpenAiLogo,
+ options:
+
+
+
+
+ {name}
+
+ {description}
+
+
+
+
+ );
+}
diff --git a/frontend/src/pages/OnboardingFlow/Steps/Survey/index.jsx b/frontend/src/pages/OnboardingFlow/Steps/Survey/index.jsx
new file mode 100644
index 0000000000..35b2f67d07
--- /dev/null
+++ b/frontend/src/pages/OnboardingFlow/Steps/Survey/index.jsx
@@ -0,0 +1,297 @@
+import { COMPLETE_QUESTIONNAIRE } from "@/utils/constants";
+import paths from "@/utils/paths";
+import { CheckCircle } from "@phosphor-icons/react";
+import React, { useState, useEffect, useRef } from "react";
+import { useNavigate } from "react-router-dom";
+
+const TITLE = "Welcome to AnythingLLM";
+const DESCRIPTION = "Help us make AnythingLLM built for your needs. Optional.";
+
+async function sendQuestionnaire({ email, useCase, comment }) {
+ if (import.meta.env.DEV) return;
+ return fetch(`https://onboarding-wxich7363q-uc.a.run.app`, {
+ method: "POST",
+ body: JSON.stringify({
+ email,
+ useCase,
+ comment,
+ sourceId: "0VRjqHh6Vukqi0x0Vd0n/m8JuT7k8nOz",
+ }),
+ })
+ .then(() => {
+ window.localStorage.setItem(COMPLETE_QUESTIONNAIRE, true);
+ console.log(`✅ Questionnaire responses sent.`);
+ })
+ .catch((error) => {
+ console.error(`sendQuestionnaire`, error.message);
+ });
+}
+
+export default function Survey({ setHeader, setForwardBtn, setBackBtn }) {
+ const [selectedOption, setSelectedOption] = useState("");
+ const formRef = useRef(null);
+ const navigate = useNavigate();
+ const submitRef = useRef(null);
+
+ function handleForward() {
+ if (!!window?.localStorage?.getItem(COMPLETE_QUESTIONNAIRE)) {
+ navigate(paths.onboarding.createWorkspace());
+ return;
+ }
+ if (submitRef.current) {
+ submitRef.current.click();
+ }
+ }
+
+ function skipSurvey() {
+ navigate(paths.onboarding.createWorkspace());
+ }
+
+ function handleBack() {
+ navigate(paths.onboarding.dataHandling());
+ }
+
+ useEffect(() => {
+ setHeader({ title: TITLE, description: DESCRIPTION });
+ setForwardBtn({ showing: true, disabled: false, onClick: handleForward });
+ setBackBtn({ showing: true, disabled: false, onClick: handleBack });
+ }, []);
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ const form = e.target;
+ const formData = new FormData(form);
+
+ await sendQuestionnaire({
+ email: formData.get("email"),
+ useCase: formData.get("use_case") || "other",
+ comment: formData.get("comment") || null,
+ });
+
+ navigate(paths.onboarding.createWorkspace());
+ };
+
+ if (!!window?.localStorage?.getItem(COMPLETE_QUESTIONNAIRE)) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/pages/OnboardingFlow/Steps/UserSetup/index.jsx b/frontend/src/pages/OnboardingFlow/Steps/UserSetup/index.jsx
new file mode 100644
index 0000000000..500a483a18
--- /dev/null
+++ b/frontend/src/pages/OnboardingFlow/Steps/UserSetup/index.jsx
@@ -0,0 +1,336 @@
+import System from "@/models/system";
+import showToast from "@/utils/toast";
+import React, { useState, useEffect, useRef } from "react";
+import debounce from "lodash.debounce";
+import paths from "@/utils/paths";
+import { useNavigate } from "react-router-dom";
+import { AUTH_TIMESTAMP, AUTH_TOKEN, AUTH_USER } from "@/utils/constants";
+
+const TITLE = "User Setup";
+const DESCRIPTION = "Configure your user settings.";
+
+export default function UserSetup({ setHeader, setForwardBtn, setBackBtn }) {
+ const [selectedOption, setSelectedOption] = useState("");
+ const [singleUserPasswordValid, setSingleUserPasswordValid] = useState(false);
+ const [multiUserLoginValid, setMultiUserLoginValid] = useState(false);
+ const [enablePassword, setEnablePassword] = useState(false);
+ const myTeamSubmitRef = useRef(null);
+ const justMeSubmitRef = useRef(null);
+ const navigate = useNavigate();
+
+ function handleForward() {
+ if (selectedOption === "just_me" && enablePassword) {
+ justMeSubmitRef.current?.click();
+ } else if (selectedOption === "just_me" && !enablePassword) {
+ navigate(paths.onboarding.dataHandling());
+ } else if (selectedOption === "my_team") {
+ myTeamSubmitRef.current?.click();
+ }
+ }
+
+ function handleBack() {
+ navigate(paths.onboarding.customLogo());
+ }
+
+ useEffect(() => {
+ let isDisabled = true;
+ if (selectedOption === "just_me") {
+ isDisabled = !singleUserPasswordValid;
+ } else if (selectedOption === "my_team") {
+ isDisabled = !multiUserLoginValid;
+ }
+
+ setForwardBtn({
+ showing: true,
+ disabled: isDisabled,
+ onClick: handleForward,
+ });
+ }, [selectedOption, singleUserPasswordValid, multiUserLoginValid]);
+
+ useEffect(() => {
+ setHeader({ title: TITLE, description: DESCRIPTION });
+ setBackBtn({ showing: true, disabled: false, onClick: handleBack });
+ }, []);
+
+ return (
+
+
+ );
+}
+
+const JustMe = ({
+ setSingleUserPasswordValid,
+ enablePassword,
+ setEnablePassword,
+ justMeSubmitRef,
+ navigate,
+}) => {
+ const [itemSelected, setItemSelected] = useState(false);
+ const [password, setPassword] = useState("");
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ const form = e.target;
+ const formData = new FormData(form);
+ const { error } = await System.updateSystemPassword({
+ usePassword: true,
+ newPassword: formData.get("password"),
+ });
+
+ if (error) {
+ showToast(`Failed to set password: ${error}`, "error");
+ return;
+ }
+
+ showToast("Password set successfully!", "success", { clear: true });
+
+ // Auto-request token with password that was just set so they
+ // are not redirected to login after completion.
+ const { token } = await System.requestToken({
+ password: formData.get("password"),
+ });
+ window.localStorage.removeItem(AUTH_USER);
+ window.localStorage.removeItem(AUTH_TIMESTAMP);
+ window.localStorage.setItem(AUTH_TOKEN, token);
+
+ navigate(paths.onboarding.dataHandling());
+ };
+
+ const setNewPassword = (e) => setPassword(e.target.value);
+ const handlePasswordChange = debounce(setNewPassword, 500);
+
+ function handleYes() {
+ setItemSelected(true);
+ setEnablePassword(true);
+ }
+
+ function handleNo() {
+ setItemSelected(true);
+ setEnablePassword(false);
+ }
+
+ useEffect(() => {
+ if (enablePassword && itemSelected && password.length >= 8) {
+ setSingleUserPasswordValid(true);
+ } else if (!enablePassword && itemSelected) {
+ setSingleUserPasswordValid(true);
+ } else {
+ setSingleUserPasswordValid(false);
+ }
+ });
+ return (
+
+
+ {selectedOption === "just_me" && (
+
+ How many people will be using your instance?
+
+
+
+
+
+
+
+ );
+};
+
+const MyTeam = ({ setMultiUserLoginValid, myTeamSubmitRef, navigate }) => {
+ const [username, setUsername] = useState("");
+ const [password, setPassword] = useState("");
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ const form = e.target;
+ const formData = new FormData(form);
+ const data = {
+ username: formData.get("username"),
+ password: formData.get("password"),
+ };
+ const { success, error } = await System.setupMultiUser(data);
+ if (!success) {
+ showToast(`Error: ${error}`, "error");
+ return;
+ }
+
+ showToast("Multi-user login enabled.", "success", { clear: true });
+ navigate(paths.onboarding.dataHandling());
+
+ // Auto-request token with credentials that was just set so they
+ // are not redirected to login after completion.
+ const { user, token } = await System.requestToken(data);
+ window.localStorage.setItem(AUTH_USER, JSON.stringify(user));
+ window.localStorage.setItem(AUTH_TOKEN, token);
+ window.localStorage.removeItem(AUTH_TIMESTAMP);
+ };
+
+ const setNewUsername = (e) => setUsername(e.target.value);
+ const setNewPassword = (e) => setPassword(e.target.value);
+ const handleUsernameChange = debounce(setNewUsername, 500);
+ const handlePasswordChange = debounce(setNewPassword, 500);
+
+ useEffect(() => {
+ if (username.length >= 6 && password.length >= 8) {
+ setMultiUserLoginValid(true);
+ } else {
+ setMultiUserLoginValid(false);
+ }
+ }, [username, password]);
+ return (
+
+
+
+ Would you like to set up a password?
+
+
+
+
+
+ {enablePassword && (
+
+ )}
+
+
+
+ );
+};
diff --git a/frontend/src/pages/OnboardingFlow/Steps/VectorDatabaseConnection/VectorDatabaseItem.jsx b/frontend/src/pages/OnboardingFlow/Steps/VectorDatabaseConnection/VectorDatabaseItem.jsx
new file mode 100644
index 0000000000..4ecd304f7a
--- /dev/null
+++ b/frontend/src/pages/OnboardingFlow/Steps/VectorDatabaseConnection/VectorDatabaseItem.jsx
@@ -0,0 +1,37 @@
+export default function VectorDatabaseItem({
+ name,
+ value,
+ image,
+ description,
+ checked,
+ onClick,
+}) {
+ return (
+ onClick(value)}
+ className={`w-full hover:bg-white/10 p-2 rounded-md hover:cursor-pointer ${
+ checked ? "bg-white/10" : ""
+ }`}
+ >
+
+
+ );
+}
diff --git a/frontend/src/pages/OnboardingFlow/Steps/VectorDatabaseConnection/index.jsx b/frontend/src/pages/OnboardingFlow/Steps/VectorDatabaseConnection/index.jsx
new file mode 100644
index 0000000000..17accbab00
--- /dev/null
+++ b/frontend/src/pages/OnboardingFlow/Steps/VectorDatabaseConnection/index.jsx
@@ -0,0 +1,182 @@
+import React, { useEffect, useState, useRef } from "react";
+import { MagnifyingGlass } from "@phosphor-icons/react";
+import ChromaLogo from "@/media/vectordbs/chroma.png";
+import PineconeLogo from "@/media/vectordbs/pinecone.png";
+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";
+import QDrantDBOptions from "@/components/VectorDBSelection/QDrantDBOptions";
+import WeaviateDBOptions from "@/components/VectorDBSelection/WeaviateDBOptions";
+import LanceDBOptions from "@/components/VectorDBSelection/LanceDBOptions";
+import showToast from "@/utils/toast";
+import { useNavigate } from "react-router-dom";
+
+const TITLE = "Vector Database Connection";
+const DESCRIPTION =
+ "These are the credentials and settings for your vector database of choice.";
+
+export default function VectorDatabaseConnection({
+ setHeader,
+ setForwardBtn,
+ setBackBtn,
+}) {
+ const [searchQuery, setSearchQuery] = useState("");
+ const [filteredVDBs, setFilteredVDBs] = useState([]);
+ const [selectedVDB, setSelectedVDB] = useState(null);
+ const [settings, setSettings] = useState(null);
+ const formRef = useRef(null);
+ const hiddenSubmitButtonRef = useRef(null);
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ async function fetchKeys() {
+ const _settings = await System.keys();
+ setSettings(_settings);
+ setSelectedVDB(_settings?.VectorDB || "lancedb");
+ }
+ fetchKeys();
+ }, []);
+
+ const VECTOR_DBS = [
+ {
+ name: "LanceDB",
+ value: "lancedb",
+ logo: LanceDbLogo,
+ options:
+
+
+
+
+ {name}
+ {description}
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+ {children(setHeader, setBackBtn, setForwardBtn)}
+ + {header.title} +
++ {header.description} +
+
+
+
+ {backBtn.showing && (
+
+ )}
+
+
+
+ {forwardBtn.showing && (
+
+ )}
+
+
+
+ );
+}
diff --git a/frontend/src/pages/OnboardingFlow/index.jsx b/frontend/src/pages/OnboardingFlow/index.jsx
index 106f7cbae1..c46b3c0bc9 100644
--- a/frontend/src/pages/OnboardingFlow/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/index.jsx
@@ -1,57 +1,21 @@
-import React, { useEffect, useState } from "react";
-import OnboardingModal, { OnboardingModalId } from "./OnboardingModal";
-import useLogo from "@/hooks/useLogo";
-import { isMobile } from "react-device-detect";
+import React from "react";
+import OnboardingSteps, { OnboardingLayout } from "./Steps";
+import { useParams } from "react-router-dom";
export default function OnboardingFlow() {
- const { logo } = useLogo();
- const [modalVisible, setModalVisible] = useState(false);
-
- useEffect(() => {
- if (modalVisible) {
- document.getElementById(OnboardingModalId)?.showModal();
- }
- }, [modalVisible]);
-
- function showModal() {
- setModalVisible(true);
- }
-
- if (isMobile) {
- return (
-
+ {backBtn.showing && (
+
+ )}
+
+
+
+
+
+
+
+ {children(setHeader, setBackBtn, setForwardBtn)}
+ + {header.title} +
++ {header.description} +
+
+ {forwardBtn.showing && (
+
+ )}
+
+
-
- );
- }
+ const { step } = useParams();
+ const StepPage = OnboardingSteps[step || "home"];
+ if (step === "home" || !step) return
-
-
-
- Welcome to
-
-
-
- - Please use a desktop browser to continue onboarding. -
-
-
+
-
-
- {modalVisible &&
- Welcome to
-
-
-
-
-