Update white-labelling to be clearer (advanced settings) (#2228)

* update white labelling to be somewhat clearer

* ensure logotype set to null post submission

web/src/app/ee/admin/whitelabeling/WhitelabelingForm.tsx

@@ -11,14 +11,18 @@ import {
   SubLabel,
   TextFormField,
 } from "@/components/admin/connectors/Field";
-import { Button, Divider } from "@tremor/react";
+import { Button, Divider, Text } from "@tremor/react";
 import { ImageUpload } from "./ImageUpload";
+import { AdvancedOptionsToggle } from "@/components/AdvancedOptionsToggle";
+import Link from "next/link";
 
 export function WhitelabelingForm() {
   const router = useRouter();
   const [selectedLogo, setSelectedLogo] = useState<File | null>(null);
   const [selectedLogotype, setSelectedLogotype] = useState<File | null>(null);
 
+  const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
+
   const settings = useContext(SettingsContext);
   if (!settings) {
     return null;
@@ -97,7 +101,7 @@ export function WhitelabelingForm() {
 
             const formData = new FormData();
             formData.append("file", selectedLogotype);
-            setSelectedLogo(null);
+            setSelectedLogotype(null);
             const response = await fetch(
               "/api/admin/enterprise-settings/logo?is_logotype=true",
               {
@@ -166,12 +170,80 @@ export function WhitelabelingForm() {
                 Specify your own logo to replace the standard Danswer logo.
               </SubLabel>
             )}
+
             <ImageUpload
               selectedFile={selectedLogo}
               setSelectedFile={setSelectedLogo}
             />
+
+            <Divider />
+
+            <AdvancedOptionsToggle
+              showAdvancedOptions={showAdvancedOptions}
+              setShowAdvancedOptions={setShowAdvancedOptions}
+            />
+
             <br />
-            <Label>Custom Logotype</Label>
+
+            {showAdvancedOptions && (
+              <>
+                <Text>
+                  Read{" "}
+                  <Link
+                    href={"https://docs.danswer.dev/enterprise_edition/theming"}
+                    className="text-link cursor-pointer"
+                  >
+                    the docs
+                  </Link>{" "}
+                  to see whitelabelling examples in action.
+                </Text>
+                <div className="mt-4">
+                  <TextFormField
+                    label="Chat Header Content"
+                    name="custom_header_content"
+                    subtext={`Custom Markdown content that will be displayed as a banner at the top of the Chat page.`}
+                    placeholder="Your header content..."
+                    disabled={isSubmitting}
+                  />
+                </div>
+
+                <Divider />
+
+                <div className="mt-4">
+                  <TextFormField
+                    label="Popup Header"
+                    name="custom_popup_header"
+                    subtext={`The title for the popup that will be displayed for each user on their initial visit 
+        to the application. If left blank AND Custom Popup Content is specified, will use "Welcome to ${
+          values.application_name || "Danswer"
+        }!".`}
+                    placeholder="Initial Popup Header"
+                    disabled={isSubmitting}
+                  />
+                </div>
+
+                <div className="mt-4">
+                  <TextFormField
+                    label="Popup Content"
+                    name="custom_popup_content"
+                    subtext={`Custom Markdown content that will be displayed as a popup on initial visit to the application.`}
+                    placeholder="Your popup content..."
+                    isTextArea
+                    disabled={isSubmitting}
+                  />
+                </div>
+
+                <div className="mt-4">
+                  <TextFormField
+                    label="Chat Footer Text"
+                    name="custom_lower_disclaimer_content"
+                    subtext={`Custom Markdown content that will be displayed at the bottom of the Chat page.`}
+                    placeholder="Your disclaimer content..."
+                    isTextArea
+                    disabled={isSubmitting}
+                  />
+                </div>
+                <Label>Chat Footer Logotype</Label>
 
                 {values.use_custom_logotype ? (
                   <div className="mt-3">
@@ -201,68 +273,26 @@ export function WhitelabelingForm() {
                     </Button>
 
                     <SubLabel>
-                  Override the current custom logotype by uploading a new image
+                      Override your uploaded custom logotype by uploading a new
-                  below and clicking the Update button. This logotype is the
+                      image below and clicking the Update button. This logotype
-                  text-based logo that will be rendered at the bottom right of
+                      is the text-based logo that will be rendered at the bottom
-                  the chat screen.
+                      right of the chat screen.
                     </SubLabel>
                   </div>
                 ) : (
-              <SubLabel>Specify your own logotype</SubLabel>
+                  <SubLabel>
+                    Add a custom logotype by uploading a new image below and
+                    clicking the Update button. This logotype is the text-based
+                    logo that will be rendered at the bottom right of the chat
+                    screen.
+                  </SubLabel>
                 )}
                 <ImageUpload
                   selectedFile={selectedLogotype}
                   setSelectedFile={setSelectedLogotype}
                 />
-
+              </>
-            <Divider />
+            )}
-
-            <div className="mt-4">
-              <TextFormField
-                label="Custom Chat Header Content"
-                name="custom_header_content"
-                subtext={`Custom Markdown content that will be displayed as a banner at the top of the Chat page.`}
-                placeholder="Your header content..."
-                disabled={isSubmitting}
-              />
-            </div>
-
-            <Divider />
-
-            <div className="mt-4">
-              <TextFormField
-                label="Custom Popup Header"
-                name="custom_popup_header"
-                subtext={`The title for the popup that will be displayed for each user on their initial visit 
-                to the application. If left blank AND Custom Popup Content is specified, will use "Welcome to ${
-                  values.application_name || "Danswer"
-                }!".`}
-                placeholder="Initial Popup Header"
-                disabled={isSubmitting}
-              />
-            </div>
-
-            <div className="mt-4">
-              <TextFormField
-                label="Custom Popup Content"
-                name="custom_popup_content"
-                subtext={`Custom Markdown content that will be displayed as a popup on initial visit to the application.`}
-                placeholder="Your popup content..."
-                isTextArea
-                disabled={isSubmitting}
-              />
-            </div>
-
-            <div className="mt-4">
-              <TextFormField
-                label="Custom Footer"
-                name="custom_lower_disclaimer_content"
-                subtext={`Custom Markdown content that will be displayed at the bottom of the Chat page.`}
-                placeholder="Your disclaimer content..."
-                isTextArea
-                disabled={isSubmitting}
-              />
-            </div>
 
             <Button type="submit" className="mt-4">
               Update