add optional isAnonymous parameter, move mock logged in to earlier in index.html example

Author: bacalj

build/static/js/453.chunk.js

@@ -5,6 +5,16 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ACCESS Q&A Bot Standalone Demo</title>
     <link rel="stylesheet" href="./build/static/css/main.css">
+    <!-- Load scripts in head for earlier initialization -->
+    <script>
+        // Determine if user is logged in by checking for a class on the body
+        document.addEventListener('DOMContentLoaded', function() {
+            window.isAnonymous = !document.querySelector('body').classList.contains('user-logged-in');
+        });
+    </script>
+    <!-- Preload JavaScript bundles -->
+    <script src="./build/static/js/main.js"></script>
+    <script src="./build/static/js/453.chunk.js"></script>
     <style>
         body {
             font-family: Arial, sans-serif;
@@ -61,43 +71,62 @@ <h2>Method 3: Explicitly Call JavaScript Function</h2>
     </div>
 
     <script>
-        // Determine if user is logged in by checking for a class on the body
-        function isAnonymous() {
-            return !document.querySelector('body').classList.contains('user-logged-in');
-        }
-        window.isAnonymous = isAnonymous();
-    </script>
+        // Initialize all methods once DOM is fully loaded and scripts are available
+        document.addEventListener('DOMContentLoaded', function() {
+            // Ensure window.qAndATool is available before proceeding
+            function initializeQABots() {
+                if (window.qAndATool) {
+                    // Method 1: Initialize the root element if not already done
+                    const qaBot = document.getElementById('qa-bot');
+                    if (qaBot && !qaBot.hasChildNodes()) {
+                        console.log("Initializing Method 1 - Root QA Bot");
+                        window.qAndATool({
+                            target: qaBot,
+                            isLoggedIn: !window.isAnonymous,
+                            isAnonymous: window.isAnonymous
+                        });
+                    }
 
-    <!--
-        Load the main JavaScript bundle which includes:
-        1. The React components that power the Q&A tool
-        2. The globally exposed qAndATool function (from src/index.js)
+                    // Method 2: Initialize embedded-qa-bot elements
+                    const embeddedBots = document.querySelectorAll('.embedded-qa-bot');
+                    embeddedBots.forEach(function(bot) {
+                        if (!bot.hasChildNodes()) {
+                            console.log("Initializing Method 2 - Embedded QA Bot");
+                            window.qAndATool({
+                                target: bot,
+                                embedded: true,
+                                isOpen: true,
+                                welcome: bot.getAttribute('data-welcome') || "Hello!",
+                                prompt: bot.getAttribute('data-prompt') || "Ask me a question...",
+                                isLoggedIn: !window.isAnonymous,
+                                isAnonymous: window.isAnonymous
+                            });
+                        }
+                    });
 
-        Note: All three integration methods depend on window.qAndATool
-        being exposed by the JavaScript bundle
-    -->
-    <script src="./build/static/js/main.js"></script>
-    <script src="./build/static/js/453.chunk.js"></script>
+                    // Method 3: Initialize the custom-qa-bot element
+                    console.log("Initializing Method 3 - Custom QA Bot");
+                    window.qAndATool({
+                        target: document.getElementById('custom-qa-bot'),
+                        embedded: true,
+                        welcome: "This is configured using JavaScript!",
+                        prompt: "Try asking a question about ACCESS...",
+                        isLoggedIn: !window.isAnonymous,
+                        isAnonymous: window.isAnonymous,
+                        disabled: window.isAnonymous,
+                        isOpen: true
+                    });
+                } else {
+                    console.error("qAndATool function not found. Make sure the JS files are loaded properly.");
+                }
+            }
 
-    <script>
-        // Wait for window.qAndATool to be available
-        window.addEventListener('load', function() {
+            // Try to initialize immediately
             if (window.qAndATool) {
-                // JavaScript function example
-                window.qAndATool({
-                    target: document.getElementById('custom-qa-bot'),
-                    embedded: true,
-                    welcome: "This is configured using JavaScript!",
-                    prompt: "Try asking a question about ACCESS...",
-                    isLoggedIn: !window.isAnonymous,
-                    disabled: window.isAnonymous,
-                    isOpen: true
-                });
-
-                // Note: Method 1 uses the div with id="qa-bot"
-                // and Method 2 is handled by the class-based selector
+                initializeQABots();
             } else {
-                console.error("qAndATool function not found. Make sure the JS files are loaded properly.");
+                // Or wait a bit for scripts to load if needed
+                setTimeout(initializeQABots, 500);
             }
         });
     </script>

build/static/js/453.chunk.js.map

@@ -10,6 +10,7 @@ import QABot from './components/QABot';
  * - welcome: string
  * - prompt: string
  * - isLoggedIn: boolean
+ * - isAnonymous: boolean
  * - disabled: boolean
  * - isOpen: boolean
  * - onClose: function
@@ -21,6 +22,7 @@ function App(props) {
       welcome={props.welcome}
       prompt={props.prompt}
       isLoggedIn={props.isLoggedIn}
+      isAnonymous={props.isAnonymous}
       disabled={props.disabled}
       isOpen={props.isOpen}
       onClose={props.onClose}

build/static/js/main.js

@@ -11,8 +11,9 @@ const QABot = (props) => {
   const containerRef = useRef(null);
 
   const isLoggedIn = props.isLoggedIn !== undefined ? props.isLoggedIn : false;
+  const isAnonymous = props.isAnonymous !== undefined ? props.isAnonymous : !isLoggedIn;
   // Derive disabled state, respecting explicit disabled prop if provided
-  const disabled = props.disabled !== undefined ? props.disabled : !isLoggedIn;
+  const disabled = props.disabled !== undefined ? props.disabled : isAnonymous;
 
   // Use isOpen prop with default to false if not provided
   const isOpen = props.isOpen !== undefined ? props.isOpen : false;

build/static/js/main.js.map

@@ -15,7 +15,7 @@ export { WebComponentQABot };
 // Function-based API that prioritizes web component usage
 // and then attempts a react render (since some people may use the function within a react context)
 export function qAndATool(config) {
-  const { target, version, isLoggedIn, isOpen, ...otherProps } = config;
+  const { target, version, isLoggedIn, isAnonymous, isOpen, ...otherProps } = config;
 
   if (!target || !(target instanceof HTMLElement)) {
     console.error('QA Bot: A valid target DOM element is required');
@@ -28,6 +28,7 @@ export function qAndATool(config) {
     return webComponentQAndATool({
       target,
       isLoggedIn,
+      isAnonymous,
       isOpen,
       ...otherProps
     });
@@ -38,6 +39,7 @@ export function qAndATool(config) {
       <React.StrictMode>
         <App
           isLoggedIn={isLoggedIn}
+          isAnonymous={isAnonymous}
           isOpen={isOpen}
           {...otherProps}
         />

index.html

@@ -122,6 +122,7 @@ class AccessQABot extends HTMLElement {
       'prompt',
       'embedded',
       'is-logged-in',
+      'is-anonymous',
       'disabled',
       'is-open',
       'api-key'
@@ -142,6 +143,7 @@ class AccessQABot extends HTMLElement {
       prompt: this.getAttribute('prompt'),
       embedded: this.hasAttribute('embedded'),
       isLoggedIn: this.hasAttribute('is-logged-in'),
+      isAnonymous: this.hasAttribute('is-anonymous'),
       disabled: this.hasAttribute('disabled'),
       isOpen: this.hasAttribute('is-open'),
       // Always provide an apiKey to prevent process.env reference errors
@@ -232,6 +234,7 @@ export function webComponentQAndATool(config) {
   if (props.prompt) qaBot.setAttribute('prompt', props.prompt);
   if (props.embedded) qaBot.setAttribute('embedded', '');
   if (props.isLoggedIn) qaBot.setAttribute('is-logged-in', '');
+  if (props.isAnonymous) qaBot.setAttribute('is-anonymous', '');
   if (props.disabled) qaBot.setAttribute('disabled', '');
   if (props.isOpen) qaBot.setAttribute('is-open', '');
   if (props.apiKey) qaBot.setAttribute('api-key', props.apiKey);