Consent screen (#2381)

* update

* add consent popup

* rm

backend/ee/danswer/server/enterprise_settings/models.py

@@ -28,6 +28,7 @@ class EnterpriseSettings(BaseModel):
     custom_header_content: str | None = None
     custom_popup_header: str | None = None
     custom_popup_content: str | None = None
+    enable_consent_screen: bool | None = None
 
     def check_validity(self) -> None:
         return

web/src/app/admin/settings/interfaces.ts

@@ -35,6 +35,7 @@ export interface EnterpriseSettings {
   two_lines_for_chat_header: boolean | null;
   custom_popup_header: string | null;
   custom_popup_content: string | null;
+  enable_consent_screen: boolean | null;
 }
 
 export interface CombinedSettings {

web/src/app/chat/ChatPopup.tsx

@@ -9,9 +9,9 @@ import remarkGfm from "remark-gfm";
 
 const ALL_USERS_INITIAL_POPUP_FLOW_COMPLETED =
   "allUsersInitialPopupFlowCompleted";
-
 export function ChatPopup() {
   const [completedFlow, setCompletedFlow] = useState(true);
+  const [showConsentError, setShowConsentError] = useState(false);
 
   useEffect(() => {
     setCompletedFlow(
@@ -20,16 +20,26 @@ export function ChatPopup() {
   });
 
   const settings = useContext(SettingsContext);
-  if (!settings?.enterpriseSettings?.custom_popup_content || completedFlow) {
+  const enterpriseSettings = settings?.enterpriseSettings;
+  const isConsentScreen = enterpriseSettings?.enable_consent_screen;
+  if (
+    (!enterpriseSettings?.custom_popup_content && !isConsentScreen) ||
+    completedFlow
+  ) {
     return null;
   }
 
-  let popupTitle = settings.enterpriseSettings.custom_popup_header;
+  const popupTitle =
-  if (!popupTitle) {
+    enterpriseSettings?.custom_popup_header ||
-    popupTitle = `Welcome to ${
+    (isConsentScreen
-      settings.enterpriseSettings.application_name || "Danswer"
+      ? "Terms of Use"
-    }!`;
+      : `Welcome to ${enterpriseSettings?.application_name || "Danswer"}!`);
-  }
+
+  const popupContent =
+    enterpriseSettings?.custom_popup_content ||
+    (isConsentScreen
+      ? "By clicking 'I Agree', you acknowledge that you agree to the terms of use of this application and consent to proceed."
+      : "");
 
   return (
     <Modal width="w-3/6 xl:w-[700px]" title={popupTitle}>
@@ -49,12 +59,26 @@ export function ChatPopup() {
           }}
           remarkPlugins={[remarkGfm]}
         >
-          {settings.enterpriseSettings.custom_popup_content}
+          {popupContent}
         </ReactMarkdown>
 
-        <div className="flex w-full">
+        {showConsentError && (
+          <p className="text-red-500 text-sm mt-2">
+            You need to agree to the terms to access the application.
+          </p>
+        )}
+
+        <div className="flex w-full justify-center gap-4 mt-4">
+          {isConsentScreen && (
+            <Button
+              size="xs"
+              color="red"
+              onClick={() => setShowConsentError(true)}
+            >
+              Cancel
+            </Button>
+          )}
           <Button
-            className="mx-auto mt-4"
             size="xs"
             onClick={() => {
               localStorage.setItem(
@@ -64,7 +88,7 @@ export function ChatPopup() {
               setCompletedFlow(true);
             }}
           >
-            Get started!
+            {isConsentScreen ? "I Agree" : "Get started!"}
           </Button>
         </div>
       </>

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

@@ -65,6 +65,8 @@ export function WhitelabelingForm() {
           custom_lower_disclaimer_content:
             enterpriseSettings?.custom_lower_disclaimer_content || "",
           custom_nav_items: enterpriseSettings?.custom_nav_items || [],
+          enable_consent_screen:
+            enterpriseSettings?.enable_consent_screen || false,
         }}
         validationSchema={Yup.object().shape({
           application_name: Yup.string().nullable(),
@@ -75,6 +77,7 @@ export function WhitelabelingForm() {
           custom_popup_header: Yup.string().nullable(),
           custom_popup_content: Yup.string().nullable(),
           custom_lower_disclaimer_content: Yup.string().nullable(),
+          enable_consent_screen: Yup.boolean().nullable(),
         })}
         onSubmit={async (values, formikHelpers) => {
           formikHelpers.setSubmitting(true);
@@ -217,25 +220,53 @@ export function WhitelabelingForm() {
                 <Divider />
 
                 <TextFormField
-                  label="Popup Header"
+                  label={
+                    values.enable_consent_screen
+                      ? "Consent Screen Header"
+                      : "Popup Header"
+                  }
                   name="custom_popup_header"
-                  subtext={`The title for the popup that will be displayed for each user on their initial visit 
+                  subtext={
-                  to the application. If left blank AND Custom Popup Content is specified, will use "Welcome to ${
+                    values.enable_consent_screen
-                    values.application_name || "Danswer"
+                      ? `The title for the consent screen that will be displayed for each user on their initial visit to the application. If left blank, title will default to "Terms of Use".`
-                  }!".`}
+                      : `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"
+                  }
+                  placeholder={
+                    values.enable_consent_screen
+                      ? "Consent Screen Header"
+                      : "Initial Popup Header"
+                  }
                   disabled={isSubmitting}
                 />
 
                 <TextFormField
-                  label="Popup Content"
+                  label={
+                    values.enable_consent_screen
+                      ? "Consent Screen Content"
+                      : "Popup Content"
+                  }
                   name="custom_popup_content"
-                  subtext={`Custom Markdown content that will be displayed as a popup on initial visit to the application.`}
+                  subtext={
-                  placeholder="Your popup content..."
+                    values.enable_consent_screen
+                      ? `Custom Markdown content that will be displayed as a consent screen on initial visit to the application. If left blank, will default to "By clicking 'I Agree', you acknowledge that you agree to the terms of use of this application and consent to proceed."`
+                      : `Custom Markdown content that will be displayed as a popup on initial visit to the application.`
+                  }
+                  placeholder={
+                    values.enable_consent_screen
+                      ? "Your consent screen content..."
+                      : "Your popup content..."
+                  }
                   isTextArea
                   disabled={isSubmitting}
                 />
 
+                <BooleanFormField
+                  name="enable_consent_screen"
+                  label="Enable Consent Screen"
+                  subtext="If enabled, the initial popup will be transformed into a consent screen. Users will be required to agree to the terms before accessing the application on their first login."
+                  disabled={isSubmitting}
+                />
+
                 <TextFormField
                   label="Chat Footer Text"
                   name="custom_lower_disclaimer_content"