welcome flow

backend/danswer/configs/app_configs.py

@@ -140,7 +140,7 @@
     os.environ.get("POSTGRES_PASSWORD") or "password"
 )
 POSTGRES_HOST = os.environ.get("POSTGRES_HOST") or "localhost"
-POSTGRES_PORT = os.environ.get("POSTGRES_PORT") or "5433"
+POSTGRES_PORT = os.environ.get("POSTGRES_PORT") or "5432"
 POSTGRES_DB = os.environ.get("POSTGRES_DB") or "postgres"
 
 POSTGRES_API_SERVER_POOL_SIZE = int(

deployment/docker_compose/docker-compose.dev.yml

@@ -313,7 +313,7 @@ services:
       - POSTGRES_USER=${POSTGRES_USER:-postgres}
       - POSTGRES_PASSWORD=${POSTGRES_PASSWORD:-password}
     ports:
-      - "5433:5432"
+      - "5432:5432"
     volumes:
       - db_volume:/var/lib/postgresql/data
 

deployment/docker_compose/docker-compose.gpu-dev.yml

@@ -313,7 +313,7 @@ services:
       - POSTGRES_USER=${POSTGRES_USER:-postgres}
       - POSTGRES_PASSWORD=${POSTGRES_PASSWORD:-password}
     ports:
-      - "5433:5432"
+      - "5432:5432"
     volumes:
       - db_volume:/var/lib/postgresql/data
 

deployment/docker_compose/docker-compose.search-testing.yml

@@ -157,7 +157,7 @@ services:
       - POSTGRES_USER=${POSTGRES_USER:-postgres}
       - POSTGRES_PASSWORD=${POSTGRES_PASSWORD:-password}
     ports:
-      - "5433"
+      - "5432"
     volumes:
       - db_volume:/var/lib/postgresql/data
 

web/src/app/assistants/mine/page.tsx

@@ -1,10 +1,11 @@
 import { InstantSSRAutoRefresh } from "@/components/SSRAutoRefresh";
-import { WelcomeModal } from "@/components/initialSetup/welcome/WelcomeModalWrapper";
+
 import { fetchChatData } from "@/lib/chat/fetchChatData";
 import { unstable_noStore as noStore } from "next/cache";
 import { redirect } from "next/navigation";
 import WrappedAssistantsMine from "./WrappedAssistantsMine";
 import { AssistantsProvider } from "@/components/context/AssistantsContext";
+import { WelcomeModal } from "@/components/initialSetup/welcome/WelcomeModalWrapper";
 
 export default async function GalleryPage({
   searchParams,
@@ -25,10 +26,10 @@ export default async function GalleryPage({
     folders,
     assistants,
     openedFolders,
-    shouldShowWelcomeModal,
     toggleSidebar,
     hasAnyConnectors,
     hasImageCompatibleModel,
+    shouldShowWelcomeModal,
   } = data;
 
   return (

web/src/app/search/page.tsx

@@ -32,6 +32,7 @@ import { fetchLLMProvidersSS } from "@/lib/llm/fetchLLMs";
 import { LLMProviderDescriptor } from "../admin/configuration/llm/interfaces";
 import { AssistantsProvider } from "@/components/context/AssistantsContext";
 import { headers } from "next/headers";
+import { hasCompletedWelcomeFlowSS } from "@/components/initialSetup/welcome/WelcomeModalWrapper";
 
 export default async function Home({
   searchParams,

web/src/components/chat_search/UnconfiguredProviderText.tsx

@@ -9,10 +9,6 @@ export default function CredentialNotConfigured({
 }) {
   const { shouldShowConfigurationNeeded } = useProviderStatus();
 
-  if (!shouldShowConfigurationNeeded) {
-    return null;
-  }
-
   return (
     <>
       {noSources ? (
@@ -22,22 +18,24 @@ export default function CredentialNotConfigured({
             href="/admin/add-connector"
             className="text-link hover:underline cursor-pointer"
           >
-            some sources
+            a source
           </a>{" "}
           to continue.
         </p>
       ) : (
-        <p className="text-base text-center w-full text-subtle">
-          Please note that you have not yet configured an LLM provider. You can
-          configure one{" "}
-          <button
-            onClick={showConfigureAPIKey}
-            className="text-link hover:underline cursor-pointer"
-          >
-            here
-          </button>
-          .
-        </p>
+        shouldShowConfigurationNeeded && (
+          <p className="text-base text-center w-full text-subtle">
+            Please note that you have not yet configured an LLM provider. You
+            can configure one{" "}
+            <button
+              onClick={showConfigureAPIKey}
+              className="text-link hover:underline cursor-pointer"
+            >
+              here
+            </button>
+            .
+          </p>
+        )
       )}
     </>
   );

web/src/components/initialSetup/welcome/WelcomeModal.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import React from "react";
+import { Button, Divider, Text } from "@tremor/react";
+import { Modal } from "../../Modal";
+import Cookies from "js-cookie";
+import { useRouter } from "next/navigation";
+import { COMPLETED_WELCOME_FLOW_COOKIE } from "./constants";
+import { useEffect, useState } from "react";
+import { ApiKeyForm } from "@/components/llm/ApiKeyForm";
+import { WellKnownLLMProviderDescriptor } from "@/app/admin/configuration/llm/interfaces";
+import { checkLlmProvider } from "./lib";
+import { User } from "@/lib/types";
+import { useProviderStatus } from "@/components/chat_search/ProviderContext";
+
+import { usePopup } from "@/components/admin/connectors/Popup";
+
+function setWelcomeFlowComplete() {
+  Cookies.set(COMPLETED_WELCOME_FLOW_COOKIE, "true", { expires: 365 });
+}
+
+export function _CompletedWelcomeFlowDummyComponent() {
+  setWelcomeFlowComplete();
+  return null;
+}
+
+export function _WelcomeModal({ user }: { user: User | null }) {
+  const router = useRouter();
+
+  const [providerOptions, setProviderOptions] = useState<
+    WellKnownLLMProviderDescriptor[]
+  >([]);
+  const { popup, setPopup } = usePopup();
+
+  const { refreshProviderInfo } = useProviderStatus();
+  const clientSetWelcomeFlowComplete = async () => {
+    setWelcomeFlowComplete();
+    refreshProviderInfo();
+    router.refresh();
+  };
+
+  useEffect(() => {
+    async function fetchProviderInfo() {
+      const { options } = await checkLlmProvider(user);
+      setProviderOptions(options);
+    }
+
+    fetchProviderInfo();
+  }, [user]);
+
+  // We should always have options
+  if (providerOptions.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {popup}
+
+      <Modal
+        title={"Welcome to Danswer!"}
+        width="w-full max-h-[900px] overflow-y-scroll max-w-3xl"
+      >
+        <div>
+          <Text className="mb-4">
+            Danswer brings all your company&apos;s knowledge to your fingertips,
+            ready to be accessed instantly.
+          </Text>
+          <Text className="mb-4">
+            To get started, we need to set up an API key for the Language Model
+            (LLM) provider. This key allows Danswer to interact with the AI
+            model, enabling intelligent responses to your queries.
+          </Text>
+
+          <div className="max-h-[900px] overflow-y-scroll">
+            <ApiKeyForm
+              // Don't show success message on initial setup
+              hideSuccess
+              setPopup={setPopup}
+              onSuccess={clientSetWelcomeFlowComplete}
+              providerOptions={providerOptions}
+            />
+          </div>
+        </div>
+      </Modal>
+    </>
+  );
+}

web/src/components/initialSetup/welcome/WelcomeModalWrapper.tsx

@@ -0,0 +1,24 @@
+import { cookies } from "next/headers";
+import {
+  _CompletedWelcomeFlowDummyComponent,
+  _WelcomeModal,
+} from "./WelcomeModal";
+import { COMPLETED_WELCOME_FLOW_COOKIE } from "./constants";
+import { User } from "@/lib/types";
+
+export function hasCompletedWelcomeFlowSS() {
+  const cookieStore = cookies();
+  return (
+    cookieStore.get(COMPLETED_WELCOME_FLOW_COOKIE)?.value?.toLowerCase() ===
+    "true"
+  );
+}
+
+export function WelcomeModal({ user }: { user: User | null }) {
+  const hasCompletedWelcomeFlow = hasCompletedWelcomeFlowSS();
+  if (hasCompletedWelcomeFlow) {
+    return <_CompletedWelcomeFlowDummyComponent />;
+  }
+
+  return <_WelcomeModal user={user} />;
+}