diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/AppearanceSetup/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/AppearanceSetup/index.jsx
index 7fcd46c1..3ccfa8c5 100644
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/AppearanceSetup/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/AppearanceSetup/index.jsx
@@ -5,7 +5,7 @@ import useLogo from "../../../../../hooks/useLogo";
import { Plus } from "@phosphor-icons/react";
import showToast from "../../../../../utils/toast";
-function AppearanceSetup({ nextStep }) {
+function AppearanceSetup({ prevStep, nextStep }) {
const { logo: _initLogo } = useLogo();
const [logo, setLogo] = useState("");
const [isDefaultLogo, setIsDefaultLogo] = useState(true);
@@ -57,7 +57,7 @@ function AppearanceSetup({ nextStep }) {
};
return (
-
+
Custom Logo
@@ -109,20 +109,23 @@ function AppearanceSetup({ nextStep }) {
-
- Want to customize the automatic messages in your chat? Find more
- customization options on the appearance settings page.
-
+
goToStep(1)}
+ onClick={prevStep}
type="button"
className="px-4 py-2 rounded-lg text-white hover:bg-sidebar"
>
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/LLMSelection/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/LLMSelection/index.jsx
index a813dbd9..3a19d387 100644
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/LLMSelection/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/LLMSelection/index.jsx
@@ -9,7 +9,7 @@ import OpenAiOptions from "../../../../../components/LLMSelection/OpenAiOptions"
import AzureAiOptions from "../../../../../components/LLMSelection/AzureAiOptions";
import AnthropicAiOptions from "../../../../../components/LLMSelection/AnthropicAiOptions";
-function LLMSelection({ nextStep, prevStep, currentStep, goToStep }) {
+function LLMSelection({ nextStep, prevStep, currentStep }) {
const [llmChoice, setLLMChoice] = useState("openai");
const [settings, setSettings] = useState(null);
const [loading, setLoading] = useState(true);
@@ -26,10 +26,10 @@ function LLMSelection({ nextStep, prevStep, currentStep, goToStep }) {
setLoading(false);
}
- if (currentStep === 1) {
+ if (currentStep === "llm_preference") {
fetchKeys();
}
- }, [currentStep]);
+ }, []);
const handleSubmit = async (e) => {
e.preventDefault();
@@ -45,11 +45,10 @@ function LLMSelection({ nextStep, prevStep, currentStep, goToStep }) {
switch (data.LLMProvider) {
case "anthropic":
- goToStep(7);
+ return nextStep("embedding_preferences");
default:
- nextStep();
+ return nextStep("vector_database");
}
- return;
};
if (loading)
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/MultiUserSetup/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/MultiUserSetup/index.jsx
index 726a7027..3b34f2ae 100644
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/MultiUserSetup/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/MultiUserSetup/index.jsx
@@ -33,7 +33,7 @@ function MultiUserSetup({ nextStep, prevStep }) {
window.localStorage.setItem(AUTH_TOKEN, token);
window.localStorage.removeItem(AUTH_TIMESTAMP);
- nextStep();
+ nextStep("data_handling");
};
const setNewUsername = (e) => setUsername(e.target.value);
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/PasswordProtection/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/PasswordProtection/index.jsx
index 1baca6d2..51ae732c 100644
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/PasswordProtection/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/PasswordProtection/index.jsx
@@ -7,7 +7,7 @@ import {
} from "../../../../../utils/constants";
import debounce from "lodash.debounce";
-function PasswordProtection({ goToStep, prevStep }) {
+function PasswordProtection({ nextStep, prevStep }) {
const [password, setPassword] = useState("");
const handleSubmit = async (e) => {
e.preventDefault();
@@ -32,12 +32,12 @@ function PasswordProtection({ goToStep, prevStep }) {
window.localStorage.removeItem(AUTH_TIMESTAMP);
window.localStorage.setItem(AUTH_TOKEN, token);
- goToStep(7);
+ nextStep("data_handling");
return;
};
const handleSkip = () => {
- goToStep(7);
+ nextStep("data_handling");
};
const setNewPassword = (e) => setPassword(e.target.value);
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/UserModeSelection/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/UserModeSelection/index.jsx
index 1d981b35..6625257f 100644
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/UserModeSelection/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/UserModeSelection/index.jsx
@@ -1,13 +1,13 @@
import React, { memo } from "react";
// How many people will be using your instance step
-function UserModeSelection({ goToStep, prevStep }) {
+function UserModeSelection({ nextStep, prevStep }) {
const justMeClicked = () => {
- goToStep(5);
+ nextStep("password_protection");
};
const myTeamClicked = () => {
- goToStep(6);
+ nextStep("multi_user_mode");
};
return (
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/VectorDatabaseConnection/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/VectorDatabaseConnection/index.jsx
index 47fbb870..d8766c81 100644
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/VectorDatabaseConnection/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/VectorDatabaseConnection/index.jsx
@@ -21,7 +21,7 @@ function VectorDatabaseConnection({ nextStep, prevStep, currentStep }) {
setVectorDB(_settings?.VectorDB || "lancedb");
setLoading(false);
}
- if (currentStep === 2) {
+ if (currentStep === "vector_database") {
fetchKeys();
}
}, [currentStep]);
@@ -41,7 +41,7 @@ function VectorDatabaseConnection({ nextStep, prevStep, currentStep }) {
alert(`Failed to save settings: ${error}`, "error");
return;
}
- nextStep();
+ nextStep("appearance");
return;
};
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/index.jsx
index a412ecc5..c53ba2c1 100644
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/OnboardingModal/index.jsx
@@ -8,6 +8,7 @@ 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";
const DIALOG_ID = "onboarding-modal";
@@ -16,46 +17,53 @@ function hideModal() {
}
const STEPS = {
- 1: {
+ llm_preference: {
title: "LLM Preference",
description:
"These are the credentials and settings for your preferred LLM chat & embedding provider.",
component: LLMSelection,
},
- 2: {
+ vector_database: {
title: "Vector Database",
description:
"These are the credentials and settings for how your AnythingLLM instance will function.",
component: VectorDatabaseConnection,
},
- 3: {
+ appearance: {
title: "Appearance",
- description: "Customize the appearance of your AnythingLLM instance.",
+ description:
+ "Customize the appearance of your AnythingLLM instance.\nFind more customization options on the appearance settings page.",
component: AppearanceSetup,
},
- 4: {
+ user_mode_setup: {
title: "User Mode Setup",
description: "Choose how many people will be using your instance.",
component: UserModeSelection,
},
- 5: {
+ 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,
},
- 6: {
+ multi_user_mode: {
title: "Multi-User Mode",
description:
"Setup your instance to support your team by activating multi-user mode.",
component: MultiUserSetup,
},
- 7: {
+ data_handling: {
+ title: "Data Handling",
+ description:
+ "We are committed to transparency and control when it comes to your personal data.",
+ component: DataHandling,
+ },
+ create_workspace: {
title: "Create Workspace",
description: "To get started, create a new workspace.",
component: CreateFirstWorkspace,
},
- 8: {
+ embedding_preferences: {
title: "Embedding Preference",
description:
"Due to your LLM selection you need to set up a provider for embedding files and text.",
@@ -65,19 +73,26 @@ const STEPS = {
export const OnboardingModalId = DIALOG_ID;
export default function OnboardingModal() {
- const [currentStep, setCurrentStep] = useState(1);
+ const [currentStep, setCurrentStep] = useState("llm_preference");
+ const [history, setHistory] = useState(["llm_preference"]);
- const nextStep = () => {
- setCurrentStep((prevStep) => prevStep + 1);
+ const nextStep = (stepKey) => {
+ setCurrentStep(stepKey);
+ setHistory([...history, stepKey]);
};
const prevStep = () => {
- if (currentStep === 1) return hideModal();
- setCurrentStep((prevStep) => prevStep - 1);
- };
+ const currentStepIdx = history.indexOf(currentStep);
+ if (currentStepIdx === -1 || currentStepIdx === 0) {
+ setCurrentStep("llm_preference");
+ setHistory(["llm_preference"]);
+ return hideModal();
+ }
- const goToStep = (step) => {
- setCurrentStep(step);
+ const prevStep = history[currentStepIdx - 1];
+ const _history = [...history].slice(0, currentStepIdx);
+ setCurrentStep(prevStep);
+ setHistory(_history);
};
const { component: StepComponent, ...step } = STEPS[currentStep];
@@ -88,7 +103,7 @@ export default function OnboardingModal() {
{step.title}
-
+
{step.description || ""}
@@ -106,7 +121,6 @@ export default function OnboardingModal() {
currentStep={currentStep}
nextStep={nextStep}
prevStep={prevStep}
- goToStep={goToStep}
/>