From 45d852a9db986181b8208a4371aa2d062833c7a8 Mon Sep 17 00:00:00 2001
From: pablodanswer <pablo@danswer.ai>
Date: Sun, 20 Oct 2024 20:42:26 -0700
Subject: [PATCH] modal onboarding clarity (#2780)

---
 .../llm/CustomLLMProviderUpdateForm.tsx       |  7 ++-
 .../llm/LLMProviderUpdateForm.tsx             |  4 +-
 .../initialSetup/search/NoSourcesModal.tsx    |  4 +-
 .../initialSetup/welcome/WelcomeModal.tsx     | 13 ++---
 web/src/components/llm/ApiKeyForm.tsx         |  4 ++
 web/src/components/llm/ApiKeyModal.tsx        | 47 +++++++++----------
 6 files changed, 37 insertions(+), 42 deletions(-)

diff --git a/web/src/app/admin/configuration/llm/CustomLLMProviderUpdateForm.tsx b/web/src/app/admin/configuration/llm/CustomLLMProviderUpdateForm.tsx
index 1b86f9ef8fa..cc059ebe3d0 100644
--- a/web/src/app/admin/configuration/llm/CustomLLMProviderUpdateForm.tsx
+++ b/web/src/app/admin/configuration/llm/CustomLLMProviderUpdateForm.tsx
@@ -38,11 +38,13 @@ export function CustomLLMProviderUpdateForm({
   existingLlmProvider,
   shouldMarkAsDefault,
   setPopup,
+  hideSuccess,
 }: {
   onClose: () => void;
   existingLlmProvider?: FullLLMProvider;
   shouldMarkAsDefault?: boolean;
   setPopup?: (popup: PopupSpec) => void;
+  hideSuccess?: boolean;
 }) {
   const { mutate } = useSWRConfig();
 
@@ -108,9 +110,6 @@ export function CustomLLMProviderUpdateForm({
           return;
         }
 
-        // don't set groups if marked as public
-        const groups = values.is_public ? [] : values.groups;
-
         // test the configuration
         if (!isEqual(values, initialValues)) {
           setIsTesting(true);
@@ -190,7 +189,7 @@ export function CustomLLMProviderUpdateForm({
         const successMsg = existingLlmProvider
           ? "Provider updated successfully!"
           : "Provider enabled successfully!";
-        if (setPopup) {
+        if (!hideSuccess && setPopup) {
           setPopup({
             type: "success",
             message: successMsg,
diff --git a/web/src/app/admin/configuration/llm/LLMProviderUpdateForm.tsx b/web/src/app/admin/configuration/llm/LLMProviderUpdateForm.tsx
index b072083662f..80c7ce0f3b3 100644
--- a/web/src/app/admin/configuration/llm/LLMProviderUpdateForm.tsx
+++ b/web/src/app/admin/configuration/llm/LLMProviderUpdateForm.tsx
@@ -25,6 +25,7 @@ export function LLMProviderUpdateForm({
   shouldMarkAsDefault,
   setPopup,
   hideAdvanced,
+  hideSuccess,
 }: {
   llmProviderDescriptor: WellKnownLLMProviderDescriptor;
   onClose: () => void;
@@ -32,6 +33,7 @@ export function LLMProviderUpdateForm({
   shouldMarkAsDefault?: boolean;
   hideAdvanced?: boolean;
   setPopup?: (popup: PopupSpec) => void;
+  hideSuccess?: boolean;
 }) {
   const { mutate } = useSWRConfig();
 
@@ -202,7 +204,7 @@ export function LLMProviderUpdateForm({
         const successMsg = existingLlmProvider
           ? "Provider updated successfully!"
           : "Provider enabled successfully!";
-        if (setPopup) {
+        if (!hideSuccess && setPopup) {
           setPopup({
             type: "success",
             message: successMsg,
diff --git a/web/src/components/initialSetup/search/NoSourcesModal.tsx b/web/src/components/initialSetup/search/NoSourcesModal.tsx
index f220e274924..b4f6ec004ab 100644
--- a/web/src/components/initialSetup/search/NoSourcesModal.tsx
+++ b/web/src/components/initialSetup/search/NoSourcesModal.tsx
@@ -10,7 +10,7 @@ import { SettingsContext } from "@/components/settings/SettingsProvider";
 export function NoSourcesModal() {
   const settings = useContext(SettingsContext);
   const [isHidden, setIsHidden] = useState(
-    !settings?.settings.search_page_enabled ?? false
+    !settings?.settings.search_page_enabled
   );
 
   if (isHidden) {
@@ -19,7 +19,7 @@ export function NoSourcesModal() {
 
   return (
     <Modal
-      className="max-w-4xl"
+      width="max-w-3xl w-full"
       title="🧐 No sources connected"
       onOutsideClick={() => setIsHidden(true)}
     >
diff --git a/web/src/components/initialSetup/welcome/WelcomeModal.tsx b/web/src/components/initialSetup/welcome/WelcomeModal.tsx
index 1c94ae22961..81496edb8f9 100644
--- a/web/src/components/initialSetup/welcome/WelcomeModal.tsx
+++ b/web/src/components/initialSetup/welcome/WelcomeModal.tsx
@@ -27,7 +27,6 @@ export function _CompletedWelcomeFlowDummyComponent() {
 export function _WelcomeModal({ user }: { user: User | null }) {
   const router = useRouter();
 
-  const [canBegin, setCanBegin] = useState(false);
   const [providerOptions, setProviderOptions] = useState<
     WellKnownLLMProviderDescriptor[]
   >([]);
@@ -75,19 +74,13 @@ export function _WelcomeModal({ user }: { user: User | null }) {
 
           <div className="max-h-[900px] overflow-y-scroll">
             <ApiKeyForm
+              // Don't show success message on initial setup
+              hideSuccess
               setPopup={setPopup}
-              onSuccess={() => {
-                router.refresh();
-                refreshProviderInfo();
-                setCanBegin(true);
-              }}
+              onSuccess={clientSetWelcomeFlowComplete}
               providerOptions={providerOptions}
             />
           </div>
-          <Divider />
-          <Button disabled={!canBegin} onClick={clientSetWelcomeFlowComplete}>
-            Get Started
-          </Button>
         </div>
       </Modal>
     </>
diff --git a/web/src/components/llm/ApiKeyForm.tsx b/web/src/components/llm/ApiKeyForm.tsx
index 189d1fc5738..276bcc36e6c 100644
--- a/web/src/components/llm/ApiKeyForm.tsx
+++ b/web/src/components/llm/ApiKeyForm.tsx
@@ -9,10 +9,12 @@ export const ApiKeyForm = ({
   onSuccess,
   providerOptions,
   setPopup,
+  hideSuccess,
 }: {
   onSuccess: () => void;
   providerOptions: WellKnownLLMProviderDescriptor[];
   setPopup: (popup: PopupSpec) => void;
+  hideSuccess?: boolean;
 }) => {
   const defaultProvider = providerOptions[0]?.name;
   const providerNameToIndexMap = new Map<string, number>();
@@ -56,6 +58,7 @@ export const ApiKeyForm = ({
                   onClose={() => onSuccess()}
                   shouldMarkAsDefault
                   setPopup={setPopup}
+                  hideSuccess={hideSuccess}
                 />
               </TabPanel>
             );
@@ -65,6 +68,7 @@ export const ApiKeyForm = ({
               onClose={() => onSuccess()}
               shouldMarkAsDefault
               setPopup={setPopup}
+              hideSuccess={hideSuccess}
             />
           </TabPanel>
         </TabPanels>
diff --git a/web/src/components/llm/ApiKeyModal.tsx b/web/src/components/llm/ApiKeyModal.tsx
index d1301311c1c..d401036e493 100644
--- a/web/src/components/llm/ApiKeyModal.tsx
+++ b/web/src/components/llm/ApiKeyModal.tsx
@@ -24,38 +24,35 @@ export const ApiKeyModal = ({
   if (!shouldShowConfigurationNeeded) {
     return null;
   }
-
   return (
     <Modal
       title="Set an API Key!"
       width="max-w-3xl w-full"
       onOutsideClick={() => hide()}
     >
-      <div className="max-h-[75vh] overflow-y-auto flex flex-col">
-        <div>
-          <div className="mb-5 text-sm">
-            Please provide an API Key below in order to start using
-            Danswer – you can always change this later.
-            <br />
-            If you&apos;d rather look around first, you can
-            <strong onClick={() => hide()} className="text-link cursor-pointer">
-              {" "}
-              skip this step
-            </strong>
-            .
-          </div>
-
-          <ApiKeyForm
-            setPopup={setPopup}
-            onSuccess={() => {
-              router.refresh();
-              refreshProviderInfo();
-              hide();
-            }}
-            providerOptions={providerOptions}
-          />
+      <>
+        <div className="mb-5 text-sm text-gray-700">
+          Please provide an API Key below in order to start using Danswer – you
+          can always change this later.
+          <br />
+          If you&apos;d rather look around first, you can
+          <strong onClick={() => hide()} className="text-link cursor-pointer">
+            {" "}
+            skip this step
+          </strong>
+          .
         </div>
-      </div>
+
+        <ApiKeyForm
+          setPopup={setPopup}
+          onSuccess={() => {
+            router.refresh();
+            refreshProviderInfo();
+            hide();
+          }}
+          providerOptions={providerOptions}
+        />
+      </>
     </Modal>
   );
 };