modal onboarding clarity (#2780)

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,

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,

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)}
     >

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={() => {
+              onSuccess={clientSetWelcomeFlowComplete}
-                router.refresh();
-                refreshProviderInfo();
-                setCanBegin(true);
-              }}
               providerOptions={providerOptions}
             />
           </div>
-          <Divider />
-          <Button disabled={!canBegin} onClick={clientSetWelcomeFlowComplete}>
-            Get Started
-          </Button>
         </div>
       </Modal>
     </>

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>

web/src/components/llm/ApiKeyModal.tsx

@@ -24,18 +24,16 @@ 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 text-gray-700">
-          <div className="mb-5 text-sm">
+          Please provide an API Key below in order to start using Danswer – you
-            Please provide an API Key below in order to start using
+          can always change this later.
-            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">
@@ -54,8 +52,7 @@ export const ApiKeyModal = ({
           }}
           providerOptions={providerOptions}
         />
-        </div>
+      </>
-      </div>
     </Modal>
   );
 };