Feature/get iframe UI working

package.json

@@ -49,6 +49,7 @@
     "highlight.js": "9.18.3",
     "jquery": "~3.5",
     "js-yaml": "~3.14",
+    "lex-web-ui": "github:couchbaselabs/lex-bot-ui#dist-only",
     "mark.js": "~8.11",
     "merge-stream": "~2.0",
     "postcss-calc": "~7.0",

src/css/chatbot.css

@@ -0,0 +1,104 @@
+.lex-web-ui-iframe {
+  bottom: 1.5rem;
+  display: none; /* hidden by default changed once iframe is loaded */
+  margin-bottom: 0px;
+  margin-left: 2px;
+  margin-right: 3vw;
+  margin-top: 2px;
+  max-width: 27vw;
+  height: 80vh; /* dynamically changed on iframe maximize/minimize */
+  min-width: calc(30vw - 3vw); /* half viewport width minus margin right */
+  position: fixed;
+  right: 0;
+  z-index: 2147483637; /* max z-index (2147483647) - 10 */
+}
+
+.lex-web-ui-iframe iframe {
+  border-radius: 8px 8px 10px 10px;
+}
+
+.lex-web-ui-iframe--show {
+  display: flex;
+}
+
+.lex-web-ui-iframe--minimize {
+  max-width: 230px !important;
+  max-height: 185px !important;
+  border-radius: 85px !important;
+  min-width: 230px !important;
+}
+
+.lex-web-ui-iframe--maximize {
+  max-width: 55vw !important;
+  height: 90vh; /* dynamically changed on iframe maximize/minimize */
+  min-width: calc(55vw - 3vw) !important;
+}
+
+
+/* disable box shadow when minimized */
+.lex-web-ui-iframe.lex-web-ui-iframe--minimize iframe {
+  box-shadow: none;
+  border-radius: none;
+}
+
+/* hide on very small resolutions */
+@media only screen and (max-width: 240px),
+only screen and (max-height: 256px)
+{
+  .lex-web-ui-iframe {
+    display: none!important;
+  }
+
+  .lex-web-ui-iframe--minimize {
+    max-width: 300px !important;
+    max-height: 185px !important;
+  }
+}
+/* take most space on small resolutions (smart phones) */
+@media only screen
+and (min-width: 241px)
+and (max-width: 480px) {
+  .lex-web-ui-iframe {
+    min-width: 85vw !important;
+    height: 84vh;
+    margin-right: 2vw;
+    align-self: center;
+  }
+
+  .lex-web-ui-iframe--maximize {
+    max-width: 96vw !important;
+    height: 90vh; /* dynamically changed on iframe maximize/minimize */
+    min-width: 96vw !important;
+  }
+
+}
+
+/* adjust down on medium resolutions */
+@media only screen
+and (min-width: 481px)
+and (max-width: 960px) {
+  .lex-web-ui-iframe {
+    max-width: 55vw;
+    height: 80vh; /* dynamically changed on iframe maximize/minimize */
+    min-width: calc(55vw - 3vw); /* half viewport width minus margin right */
+  }
+
+  .lex-web-ui-iframe--maximize {
+    max-width: 90vw !important;
+    height: 90vh; /* dynamically changed on iframe maximize/minimize */
+    min-width: 90vw !important;
+  }
+
+  .lex-web-ui-iframe.lex-web-ui-iframe--show.lex-web-ui-iframe--minimize {
+    max-width: 300px !important;
+    max-height: 185px !important;
+    border-radius: 85px !important;
+    min-width: 230px !important;
+  }
+}
+
+.lex-web-ui-iframe iframe {
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}

src/css/site.css

@@ -35,3 +35,4 @@
 @import "disable-callouts.css";
 @import "asciidoctor-external-callout.css";
 @import "info-banner.css";
+@import "chatbot.css";

src/js/vendor/chatbot.bundle.js

@@ -0,0 +1,48 @@
+;(function () {
+    'use strict'
+    var ChatBotUiLoader = require('lex-web-ui/test-host-website/public/lex-web-ui-loader/js/index.js');
+    window.ChatBotUiLoader = ChatBotUiLoader;
+    var iframeLoader = new ChatBotUiLoader.IframeLoader();
+    var chatbotUiconfig = {
+        ui: {
+          parentOrigin: parent.document.URL,
+          toolbarTitle: "Couchbase",
+          toolbarLogo:
+            "https://www.couchbase.com/wp-content/uploads/sites/3/2023/10/SDKs_Ottoman.svg",
+          positiveFeedbackIntent: "Thumbs up",
+          negativeFeedbackIntent: "Thumbs down",
+          helpIntent: "Help",
+          enableLogin: false,
+          forceLogin: false,
+          AllowSuperDangerousHTMLInMessage: true,
+          shouldDisplayResponseCardTitle: false,
+          saveHistory: false,
+          minButtonContent: "",
+          hideInputFieldsForButtonResponse: false,
+          pushInitialTextOnRestart: false,
+          directFocusToBotInput: false,
+          showDialogStateIcon: false,
+          backButton: false,
+          messageMenu: true,
+          hideButtonMessageBubble: false,
+          enableLiveChat: false,
+        },
+        iframe: {
+          iframeOrigin: "https://d2sozpdiqok6m4.cloudfront.net",
+          shouldLoadIframeMinimized: true,
+          iframeSrcPath: "/#/?lexWebUiEmbed=true&parentOrigin=" + parent.document.URL,
+        },
+      };
+
+      // load the iframe
+      iframeLoader
+        .load(chatbotUiconfig)
+        .then(function () {
+          iframeLoader.api.ping();
+          // perform actions on the parent dependent on the chatbot loading.
+          $("#send-intent").prop("disabled", false);
+        })
+        .catch(function (error) {
+          console.error("chatbot UI failed to load", error);
+        });
+})()

src/partials/body.hbs

@@ -2,4 +2,5 @@
 {{> nav}}
 {{> toc}}
 {{> main}}
+{{> chat-ui}}
 </div>

src/partials/chat-ui.hbs

@@ -0,0 +1 @@
+<script src="{{{uiRootPath}}}/js/vendor/chatbot.js"></script>