From 75bba41b2cae518c9a5bbf3222888974ff98780c Mon Sep 17 00:00:00 2001
From: Eric Grob <ericgrob@Erics-MacBook-Pro-2.local>
Date: Thu, 22 Feb 2024 10:01:31 -0700
Subject: [PATCH 1/2] chore: wip adding iframe to handle bar files

---
 src/css/chatbot.css      | 104 +++++++++++++++++++++++++++++++++++++++
 src/css/site.css         |   1 +
 src/partials/body.hbs    |   1 +
 src/partials/chat-ui.hbs |   3 ++
 4 files changed, 109 insertions(+)
 create mode 100644 src/css/chatbot.css
 create mode 100644 src/partials/chat-ui.hbs

diff --git a/src/css/chatbot.css b/src/css/chatbot.css
new file mode 100644
index 00000000..3cb25e35
--- /dev/null
+++ b/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%;
+}
diff --git a/src/css/site.css b/src/css/site.css
index 8ca90e74..46918ded 100644
--- a/src/css/site.css
+++ b/src/css/site.css
@@ -35,3 +35,4 @@
 @import "disable-callouts.css";
 @import "asciidoctor-external-callout.css";
 @import "info-banner.css";
+@import "chatbot.css";
\ No newline at end of file
diff --git a/src/partials/body.hbs b/src/partials/body.hbs
index 4ab4e12c..ed756e3f 100644
--- a/src/partials/body.hbs
+++ b/src/partials/body.hbs
@@ -2,4 +2,5 @@
 {{> nav}}
 {{> toc}}
 {{> main}}
+{{> chat-ui}}
 </div>
diff --git a/src/partials/chat-ui.hbs b/src/partials/chat-ui.hbs
new file mode 100644
index 00000000..b83b18dd
--- /dev/null
+++ b/src/partials/chat-ui.hbs
@@ -0,0 +1,3 @@
+<div class="lex-web-ui-iframe lex-web-ui-iframe--show lex-web-ui-iframe--minimize" id="lex-web-ui-iframe"
+    ><iframe src="https://d2sozpdiqok6m4.cloudfront.net/#/?lexWebUiEmbed=true" frameborder="0" scrolling="no" title="chatbot" allow="microphone; clipboard-read; clipboard-write;"></iframe>
+</div>

From a4c3545a83502b97121b5d5a4d06e4bec9d779bc Mon Sep 17 00:00:00 2001
From: Eric Grob <ericgrob@Erics-MacBook-Pro-2.local>
Date: Thu, 22 Feb 2024 15:28:24 -0700
Subject: [PATCH 2/2] chore: use chat js from dist; initiate in the bundle

---
 package.json                    |  1 +
 src/js/vendor/chatbot.bundle.js | 48 +++++++++++++++++++++++++++++++++
 src/partials/chat-ui.hbs        |  4 +--
 3 files changed, 50 insertions(+), 3 deletions(-)
 create mode 100644 src/js/vendor/chatbot.bundle.js

diff --git a/package.json b/package.json
index ba26c2c8..9aba049b 100644
--- a/package.json
+++ b/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",
diff --git a/src/js/vendor/chatbot.bundle.js b/src/js/vendor/chatbot.bundle.js
new file mode 100644
index 00000000..eabb11be
--- /dev/null
+++ b/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);
+        });
+})()
\ No newline at end of file
diff --git a/src/partials/chat-ui.hbs b/src/partials/chat-ui.hbs
index b83b18dd..7e6e0588 100644
--- a/src/partials/chat-ui.hbs
+++ b/src/partials/chat-ui.hbs
@@ -1,3 +1 @@
-<div class="lex-web-ui-iframe lex-web-ui-iframe--show lex-web-ui-iframe--minimize" id="lex-web-ui-iframe"
-    ><iframe src="https://d2sozpdiqok6m4.cloudfront.net/#/?lexWebUiEmbed=true" frameborder="0" scrolling="no" title="chatbot" allow="microphone; clipboard-read; clipboard-write;"></iframe>
-</div>
+<script src="{{{uiRootPath}}}/js/vendor/chatbot.js"></script>