Merge pull request #1 from necyberteam/login

Link to Login if anonymous

Author: a-pasquale

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "qa_bot",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "homepage": ".",
   "dependencies": {

package.json

@@ -1,6 +1,12 @@
+.rcb-toggle-button.rcb-button-show {
+  background-size: 72%;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-color: rgb(26, 91, 110);
+}
 .rcb-chat-window {
   width: 550px !important;
-  max-width: calc(100% - 2.5rem);
+  max-width: calc(100%);
 
   .rcb-bot-avatar {
     background-size: contain;

src/App.css

@@ -10,7 +10,7 @@ const handleQuery = async (params) => {
   try {
     const requestOptions = {
       method: 'POST',
-      headers: { 
+      headers: {
         'Content-Type': 'application/json',
         'X-API-KEY': apiKey
       },
@@ -55,16 +55,15 @@ const MyChatBot = (props) => {
         return 'loop'
       }
     }
-  
   }
   return (
-    <ChatBot 
+    <ChatBot
       options={{
-        theme: { 
+        theme: {
           primaryColor: '#1a5b6e',
           secondaryColor: '#107180',
           fontFamily: 'Arial, sans-serif',
-          embedded: props.embedded, 
+          embedded: props.embedded,
         },
         header: {
           title: 'ACCESS Q&A Bot',
@@ -75,11 +74,11 @@ const MyChatBot = (props) => {
           disabledPlaceholderText: 'Please log in to ask questions.',
           disabled: props.disabled
         },
-        chatHistory: { storageKey: "qa_bot" },
-        botBubble: { 
+        chatHistory: { disabled: true },
+        botBubble: {
           simStream: true,
           dangerouslySetInnerHtml: true
-         },
+        },
         isOpen: false,
         chatButton: {
           icon: 'https://support.access-ci.org/themes/contrib/asp-theme/images/icons/ACCESS-arrrow.svg',
@@ -110,7 +109,7 @@ const MyChatBot = (props) => {
 function App(props) {
   return (
     <div className="access-qa-bot">
-      <MyChatBot embedded={props.embedded} welcome={props.welcome} prompt={props.prompt} disabled={props.disabled}/>
+      <MyChatBot embedded={props.embedded} welcome={props.welcome} prompt={props.prompt} disabled={props.disabled} />
     </div>
   );
 }

src/App.js

@@ -37,6 +37,31 @@ embeddedQABots.forEach(embeddedQABot => {
   embeddedQABot.appendChild(embeddedDomNode);
 });
 
+// attach login event to the disabled chatbot input
+const loginHandler = () => {
+  if (disabled) {
+    const loginUrl = '/login?destination=' + window.location.pathname;
+    window.location = loginUrl;
+  }
+}
+const addCustomEventListener = (selector, event, handler) => {
+  let rootElement = document.querySelector('body');
+  rootElement.addEventListener(event, function (evt) {
+          var targetElement = evt.target;
+          while (targetElement != null) {
+              if (targetElement.matches(selector)) {
+                  handler(evt);
+                  return;
+              }
+              targetElement = targetElement.parentElement;
+          }
+      },
+      true
+  );
+}
+//adding the Event Listeners to all the chatbot instances
+addCustomEventListener('.rcb-chat-input','click',loginHandler);
+
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals