From e563746730a9890cea16b4a3d64be919241a1e98 Mon Sep 17 00:00:00 2001
From: pablodanswer <pablo@danswer.ai>
Date: Mon, 9 Sep 2024 19:40:32 -0700
Subject: [PATCH] Consent screen (#2381)

* update

* add consent popup

* rm
---
 .../server/enterprise_settings/models.py      |  1 +
 web/src/app/admin/settings/interfaces.ts      |  1 +
 web/src/app/chat/ChatPopup.tsx                | 48 +++++++++++++-----
 .../admin/whitelabeling/WhitelabelingForm.tsx | 49 +++++++++++++++----
 4 files changed, 78 insertions(+), 21 deletions(-)

diff --git a/backend/ee/danswer/server/enterprise_settings/models.py b/backend/ee/danswer/server/enterprise_settings/models.py
index b5f8165f54..c770fbd73e 100644
--- a/backend/ee/danswer/server/enterprise_settings/models.py
+++ b/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
diff --git a/web/src/app/admin/settings/interfaces.ts b/web/src/app/admin/settings/interfaces.ts
index 1986da9ab5..2c315f320e 100644
--- a/web/src/app/admin/settings/interfaces.ts
+++ b/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 {
diff --git a/web/src/app/chat/ChatPopup.tsx b/web/src/app/chat/ChatPopup.tsx
index ee4f47396d..b26bd19b9b 100644
--- a/web/src/app/chat/ChatPopup.tsx
+++ b/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;
-  if (!popupTitle) {
-    popupTitle = `Welcome to ${
-      settings.enterpriseSettings.application_name || "Danswer"
-    }!`;
-  }
+  const popupTitle =
+    enterpriseSettings?.custom_popup_header ||
+    (isConsentScreen
+      ? "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>
       </>
diff --git a/web/src/app/ee/admin/whitelabeling/WhitelabelingForm.tsx b/web/src/app/ee/admin/whitelabeling/WhitelabelingForm.tsx
index 814e37058a..954d0ab8e4 100644
--- a/web/src/app/ee/admin/whitelabeling/WhitelabelingForm.tsx
+++ b/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 
-                  to the application. If left blank AND Custom Popup Content is specified, will use "Welcome to ${
-                    values.application_name || "Danswer"
-                  }!".`}
-                  placeholder="Initial Popup Header"
+                  subtext={
+                    values.enable_consent_screen
+                      ? `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={
+                    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.`}
-                  placeholder="Your popup content..."
+                  subtext={
+                    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"