Sticky chatbot

Author: polterguy

backend/files/misc/changelog.md

@@ -1,5 +1,15 @@
 
 
+## Version 20.3.0
+
+Minor feature release
+
+* Allowing the chatbot to be 'sticky', implying if it's opened on one page, and the user is navigating, the chatbot opens automatically once loading is done
+
+
+----
+
+
 ## Version 19.11.3
 
 Minor bug fix release

backend/files/system/openai/front.files/chat/modern.js

@@ -43,7 +43,8 @@
       animation: '[[animation]]',
       popup: '[[popup]]',
       extra: '[[extra]]',
-      hidden: [[hidden]]
+      hidden: [[hidden]],
+      sticky: [[sticky]]
     },
 
     // References buffer for storing references during invocation.
@@ -278,7 +279,6 @@
 
         // Making sure surface is scrolled to the bottom when opened.
         this.hasSessionItems = true;
-
       }
 
       // Making sure we close chatbot with ESC.
@@ -316,6 +316,16 @@
           ainiro_faq_question(null, initialPrompt);
         }
       }, 1);
+
+      // Checking if we should show the chatbot by default.
+      if (this.ainiro_settings.sticky === true) {
+        const ses = sessionStorage.getItem('ainiro_state');
+        if (ses === 'open') {
+          this.show();
+        }
+      } else {
+        sessionStorage.setItem('ainiro_state', 'closed');
+      }
     },
 
     /*
@@ -327,6 +337,7 @@
       wnd.parentElement.removeChild(wnd);
       const btn = document.getElementById('ainiro_chat_btn');
       btn.parentElement.removeChild(btn);
+      sessionStorage.setItem('ainiro_state', 'closed');
     },
 
     /*
@@ -349,7 +360,12 @@
       this.includeResources(() => {
 
         // Now we can safely invoke our real show function.
-        this._show(onAfter);
+        this._show(() => {
+          if (onAfter) {
+            onAfter();
+          }
+          sessionStorage.setItem('ainiro_state', 'open');
+        });
       });
     },
 
@@ -877,6 +893,7 @@
       if (shopifyChatbot) {
         shopifyChatbot.style.display = 'block';
       }
+      sessionStorage.setItem('ainiro_state', 'closed');
     },
 
     /*

backend/files/system/openai/include-chatbot.get.hl

@@ -21,6 +21,7 @@
    follow_up:bool
    new_tab:bool
    popup:string
+   sticky:bool
 
    // Not used, but allows embedders to do a hard refresh to reload JavaScript.
    v:string

backend/files/system/openai/include-chatbot.js.get.hl

@@ -24,6 +24,7 @@
    animation:string
    popup:string
    hidden:bool
+   sticky:bool
 
    // Extra parameter passed into each invocation towards chat endpoint
    extra:string
@@ -50,6 +51,7 @@ validators.default:x:@.arguments
    animation:
    popup:
    hidden:bool:false
+   sticky:bool:false
 
 // Checking if custom JavaScript file exists.
 .filename
@@ -128,6 +130,10 @@ set-value:x:@.result
    strings.replace:x:@.result
       .:[[hidden]]
       strings.to-lower:x:@.arguments/*/hidden
+set-value:x:@.result
+   strings.replace:x:@.result
+      .:[[sticky]]
+      strings.to-lower:x:@.arguments/*/sticky
 set-value:x:@.result
    strings.replace:x:@.result
       .:[[start]]

backend/slots/Version.cs

@@ -20,7 +20,7 @@ public class Version : ISlot
         /// <param name="input">Parameters passed from signaler</param>
         public void Signal(ISignaler signaler, Node input)
         {
-            input.Value = "v20.2.6";
+            input.Value = "v20.3.0";
         }
     }
 }

frontend/src/app/components/protected/create/chatbot-wizard/chatbot-wizard.component.ts

@@ -198,7 +198,7 @@ export class ChatbotWizardComponent implements OnInit, OnDestroy {
     this.dialog
       .open(MachineLearningEmbedUiComponent, {
         width: '80vw',
-        maxWidth: '750px',
+        maxWidth: '850px',
         data: {
           type: this.model,
           landing_page: true,

frontend/src/app/components/protected/manage/machine-learning/components/machine-learning-embed-ui/machine-learning-embed-ui.component.html

@@ -253,6 +253,12 @@ <h3 mat-dialog-title class="mb-3">Embed Chatbot or AI Search on your website</h3
           matTooltip="Have the chatbot display highlighted code"
           color="primary">Code</mat-checkbox>
 
+        <mat-checkbox
+          [(ngModel)]="sticky"
+          labelPosition="before"
+          matTooltip="Opens the chatbot during navigation if it's already been opened"
+          color="primary">Sticky</mat-checkbox>
+
       </div>
 
     </mat-tab>

frontend/src/app/components/protected/manage/machine-learning/components/machine-learning-embed-ui/machine-learning-embed-ui.component.ts

@@ -54,6 +54,7 @@ export class MachineLearningEmbedUiComponent implements OnInit {
   linkColor: string = '#fe8464';
   positioning: string = 'right';
   animations: string = 'none';
+  sticky: boolean = false;
 
   constructor(
     @Inject(MAT_DIALOG_DATA) public data: any,
@@ -189,6 +190,9 @@ export class MachineLearningEmbedUiComponent implements OnInit {
     if (this.animations && this.animations !== 'none') {
       url += '&animation=' + this.animations;
     }
+    if (this.sticky) {
+      url += '&sticky=true';
+    }
 
     if (html) {
       return `<script src="${url}" defer></script>`;

frontend/src/app/components/protected/manage/machine-learning/machine-learning-types/machine-learning-types.component.ts

@@ -410,7 +410,7 @@ export class MachineLearningModelsComponent implements OnInit {
     this.dialog
       .open(MachineLearningEmbedUiComponent, {
         width: '80vw',
-        maxWidth: '750px',
+        maxWidth: '850px',
         data: {
           type: el.type,
           noClose: true,