-
+ {!hideDividerForTitle && }
)}
{children}
diff --git a/web/src/components/WelcomeModal.tsx b/web/src/components/WelcomeModal.tsx
deleted file mode 100644
index 8b0fd2b0b146..000000000000
--- a/web/src/components/WelcomeModal.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-"use client";
-
-import { Button, Text } from "@tremor/react";
-import { Modal } from "./Modal";
-import Link from "next/link";
-import { FiCheckCircle } from "react-icons/fi";
-import { checkModelNameIsValid } from "@/app/admin/models/embedding/embeddingModels";
-
-export function WelcomeModal({
- embeddingModelName,
-}: {
- embeddingModelName: undefined | null | string;
-}) {
- const validModelSelected = checkModelNameIsValid(embeddingModelName);
-
- return (
-
-
-
- Welcome to Danswer 🎉
-
-
-
- Danswer is the AI-powered search engine for your organization's
- internal knowledge. Whenever you need to find any piece of internal
- information, Danswer is there to help!
-
-
-
- {validModelSelected && (
-
- )}
- Step 1: Choose Your Embedding Model
-
- {!validModelSelected && (
- <>
- To get started, the first step is to choose your{" "}
- embedding model. This machine learning model helps power
- Danswer's search. Different models have different strengths,
- but don't worry we'll guide you through the process of
- choosing the right one for your organization.
-
- )}
-
-
-
-
-
-
- Step 2: Add Your First Connector
-
- Next, we need to to configure some connectors. Connectors are the
- way that Danswer gets data from your organization's various data
- sources. Once setup, we'll automatically sync data from your apps
- and docs into Danswer, so you can search all through all of them in one
- place.
-
+ You've connected some sources, but none of them have finished
+ syncing. Depending on the size of the knowledge base(s) you've
+ connected to Danswer, it can take anywhere between 30 seconds to a
+ few days for the initial sync to complete. So far we've synced{" "}
+ {totalDocs} documents.
+
+
+ To view the status of your syncing connectors, head over to the{" "}
+
+ Existing Connectors page
+
+ .
+
+
+
{
+ setIsHidden(true);
+ }}
+ >
+ Or, click here to continue and ask questions on the partially
+ synced knowledge set.
+
+
+
+
+
+ );
+}
diff --git a/web/src/components/initialSetup/search/NoSourcesModal.tsx b/web/src/components/initialSetup/search/NoSourcesModal.tsx
new file mode 100644
index 000000000000..7510c9393a10
--- /dev/null
+++ b/web/src/components/initialSetup/search/NoSourcesModal.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { Button, Divider } from "@tremor/react";
+import { Modal } from "../../Modal";
+import Link from "next/link";
+import { FiMessageSquare, FiShare2 } from "react-icons/fi";
+import { useState } from "react";
+
+export function NoSourcesModal() {
+ const [isHidden, setIsHidden] = useState(false);
+
+ if (isHidden) {
+ return null;
+ }
+
+ return (
+ setIsHidden(true)}
+ >
+
+
+
+ Before using Search you'll need to connect at least one source.
+ Without any connected knowledge sources, there isn't anything
+ to search over.
+
+
+
+
+
+
+
+ Or, if you're looking for a pure ChatGPT-like experience
+ without any organization specific knowledge, then you can head
+ over to the Chat page and start chatting with Danswer right away!
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/web/src/components/initialSetup/welcome/WelcomeModal.tsx b/web/src/components/initialSetup/welcome/WelcomeModal.tsx
new file mode 100644
index 000000000000..21b7b9f7d39f
--- /dev/null
+++ b/web/src/components/initialSetup/welcome/WelcomeModal.tsx
@@ -0,0 +1,287 @@
+"use client";
+
+import { Button, Divider, Text } from "@tremor/react";
+import { Modal } from "../../Modal";
+import Link from "next/link";
+import Cookies from "js-cookie";
+import { useRouter } from "next/navigation";
+import { COMPLETED_WELCOME_FLOW_COOKIE } from "./constants";
+import { FiCheckCircle, FiMessageSquare, FiShare2 } from "react-icons/fi";
+import { useEffect, useState } from "react";
+import { BackButton } from "@/components/BackButton";
+import { ApiKeyForm } from "@/components/openai/ApiKeyForm";
+import { checkApiKey } from "@/components/openai/ApiKeyModal";
+
+function setWelcomeFlowComplete() {
+ Cookies.set(COMPLETED_WELCOME_FLOW_COOKIE, "true", { expires: 365 });
+}
+
+export function _CompletedWelcomeFlowDummyComponent() {
+ setWelcomeFlowComplete();
+ return null;
+}
+
+function UsageTypeSection({
+ title,
+ description,
+ callToAction,
+ icon,
+ onClick,
+}: {
+ title: string;
+ description: string | JSX.Element;
+ callToAction: string;
+ icon?: React.ElementType;
+ onClick: () => void;
+}) {
+ return (
+
+ Connectors are the way that Danswer gets data from your
+ organization's various data sources. Once setup, we'll
+ automatically sync data from your apps and docs into Danswer, so
+ you can search through all of them in one place.
+
+
+ );
+ break;
+ case "chat":
+ title = undefined;
+ body = (
+ <>
+ setSelectedFlow(null)} />
+
+
+
+ To start using Danswer as a secure ChatGPT, we just need to
+ configure our LLM!
+
+
+ Danswer supports connections with a wide range of LLMs, including
+ self-hosted open-source LLMs. For more details, check out the{" "}
+
+ documentation
+
+ .
+
+
+ If you haven't done anything special with the Gen AI configs,
+ then we default to use OpenAI.
+
+
+
+ {apiKeyVerified && (
+
+ )}
+ Step 1: Provide LLM API Key
+
+
+ {apiKeyVerified ? (
+
+ LLM setup complete!
+
+ If you want to change the key later or choose a different LLM,
+ you'll be able to easily to do so in the Admin Panel / by
+ changing some environment variables.
+
+ Click the button below to start chatting with the LLM setup above!
+ Don't worry, if you do decide later on you want to connect
+ your organization's knowledge, you can always do that in the{" "}
+ {
+ e.preventDefault();
+ setWelcomeFlowComplete();
+ router.push("/admin/add-connector");
+ }}
+ >
+ Admin Panel
+
+ .
+