disclaimer as footer

Author: GFJHogue

.chainlit/config.toml

@@ -74,7 +74,7 @@ github = "https://github.com/reactome/reactome_chatbot/issues"
 
 # Specify a Javascript file that can be used to customize the user interface.
 # The Javascript file can be served from the public directory.
-# custom_js = "/public/test.js"
+custom_js = "/public/custom.js"
 
 # Specify a custom meta image url.
 # custom_meta_image_url = "https://chainlit-cloud.s3.eu-west-3.amazonaws.com/logo/chainlit_banner.png"

config_default.yml

@@ -16,23 +16,6 @@ usage_limits:
 
 messages:
 
-  disclaimer-guests:
-    message: |-
-      _**Disclaimer:** Our chatbot uses AI to assist you. Responses are generated automatically and may not always be accurate. Do not share sensitive, personal or confidential information. For more information, please click on the “Readme” icon at the top-right of this window._
-    recipients:
-      - guests
-    trigger:
-      event: on_chat_start
-  
-  disclaimer-logged_in:
-    message: |-
-      _**Disclaimer:** Our chatbot uses AI to assist you. Responses are generated automatically and may not always be accurate. Do not share sensitive, personal or confidential information. For more information, please click on the “Readme” icon at the top-right of this window._
-    recipients:
-      - logged_in
-    trigger:
-      event: on_chat_start
-      freq_max: 1w
-
   welcome:
     message: |-
       Welcome to {chat_profile}, your interactive chatbot for exploring **[Reactome](https://reactome.org/)**!

public/custom.js

@@ -0,0 +1,64 @@
+/* 
+ * Replace the contents of the Chainlit watermark/footer
+ */
+(function () {
+  const CUSTOM_FOOTER_HTML = `
+    <div class="text-xs text-muted-foreground text-center">
+      <span>
+        <em>
+          <strong>Disclaimer:</strong>
+          Our chatbot uses AI to assist you.
+          Responses are generated automatically and may not always be accurate.
+          Do not share sensitive, personal or confidential information.
+          For more information, please click on the “Readme” icon at the top-right of this window.
+        </em>
+      </span>
+    </div>
+  `.trim();
+
+  const WATERMARK_SELECTOR = 'a.watermark';
+  const APPLIED_ATTR = 'data-custom-watermark';
+
+  function replaceFooterContents(root = document) {
+    const nodes = root instanceof Element
+      ? root.querySelectorAll(WATERMARK_SELECTOR)
+      : document.querySelectorAll(WATERMARK_SELECTOR);
+
+    nodes.forEach((el) => {
+      if (!(el instanceof HTMLElement)) return;
+      if (el.getAttribute(APPLIED_ATTR) === '1') return;
+
+      el.innerHTML = CUSTOM_FOOTER_HTML;
+
+      // disable the link behaviour
+      el.removeAttribute('href');
+      el.removeAttribute('target');
+      el.style.pointerEvents = 'none';
+
+      el.setAttribute(APPLIED_ATTR, '1');
+    });
+  }
+
+  // Initial run (in case the element is already present).
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => replaceFooterContents(document));
+  } else {
+    replaceFooterContents(document);
+  }
+
+  // Re-apply on future UI updates (SPA re-renders).
+  const mo = new MutationObserver((mutations) => {
+    for (const m of mutations) {
+      for (const node of m.addedNodes) {
+        if (node instanceof Element) {
+          // If the watermark itself is added or its parent subtree changes, update.
+          if (node.matches?.(WATERMARK_SELECTOR) || node.querySelector?.(WATERMARK_SELECTOR)) {
+            replaceFooterContents(node);
+          }
+        }
+      }
+    }
+  });
+
+  mo.observe(document.documentElement, { childList: true, subtree: true });
+})();