need to package onEngagementLoad as you are not allowed to eval() inside of an extension

browser-extension/README.md

@@ -0,0 +1,10 @@
+# Chrome Browser Extension
+
+This is an example Chrome Browser Extension for adding IVAS Messenger as a side-panel extension.
+
+## Configuration
+
+1. Configure your IVA studio domain and token in the (/src/pages/panel/index.js) file
+1. Load the extension into Chrome. As this is in development, this extension needs to be loaded by using the 'Load unpacked' method.
+1. Once loaded, copy the 'ID:' that is generated to your Messenger Domains, and also add it to the End Point for you Engagement.
+

browser-extension/manifest.json

@@ -6,18 +6,30 @@
   "background": {
     "service_worker": "service-worker.js"
   },
-   "side_panel": {
+  "side_panel": {
-      "default_path": "src/pages/side-panel/index.html"
+    "default_path": "src/pages/side-panel/index.html"
-   },
+  },
   "permissions": ["sidePanel", "storage"],
   "content_security_policy": {
     "extension_pages": "script-src 'self'; object-src 'self'"
   },
-  "action": {
+  "icons": {
-    "default_icon": "icon.png"
+    "16": "images/icon-16.png",
+    "32": "images/icon-32.png",
+    "48": "images/icon-48.png",
+    "128": "images/icon-128.png"
   },
-   "web_accessible_resources": [ {
+  "web_accessible_resources": [
-      "matches": [ "*://*/*" ],
+    {
-      "resources": [ "assets/js/*.js", "assets/css/*.css", "assets/svg/*.svg", "assets/png/*.png", "icon.svg", "blob/*" ]
+      "matches": ["*://*/*"],
-   } ]
+      "resources": [
+        "assets/js/*.js",
+        "assets/css/*.css",
+        "assets/svg/*.svg",
+        "assets/png/*.png",
+        "icon.svg",
+        "blob/*"
+      ]
+    }
+  ]
 }

browser-extension/service-worker.js

@@ -1,11 +1,4 @@
 // Allows users to open the side panel by clicking on the action toolbar icon
 chrome.sidePanel
   .setPanelBehavior({ openPanelOnActionClick: true })
-  .catch((error) => console.error(error));
+  .catch((error) => console.error(error));
-
-chrome.action.onClicked.addListener(() => {
-  chrome.tabs.create({
-    url: 'mainpage.html'
-  });
-  console.log('Opened a tab with a sandboxed page!');
-});

browser-extension/src/pages/panel/ivas-messenger-ui.min.js

@@ -12896,12 +12896,18 @@
                     }),
                     (n.$routines = {
                       onEngagementLoad(j, J, re) {
-                        G.onEngagementLoad &&
+                        // Load onEngagementLoad routine if it exists
-                          new Function(
+                        import('/src/pages/panel/onEngagementLoad.js').then(({ default: onEngagementLoad }) => {
-                            "store, payload, vm",
+                          if (onEngagementLoad) {
-                            G.onEngagementLoad
+                            onEngagementLoad(j, J, re);
-                          )(j, J, re),
+                          }
-                          j.main.settings || j.main.setSettings(J.settings);
+                        });
+                        // G.onEngagementLoad &&
+                        //   new Function(
+                        //     "store, payload, vm",
+                        //     G.onEngagementLoad
+                        //   )(j, J, re),
+                        //   j.main.settings || j.main.setSettings(J.settings);
                       },
                       beforeAddConversationEvent(j, J, re) {
                         let _e = !1;

browser-extension/src/pages/panel/onEngagementLoad.js

@@ -0,0 +1,113 @@
+export default function onEngagementLoad(store, payload, vm) {
+  store.random = true;
+  store.main.setSettings(payload.settings);
+
+  const addScript = (url, root) => {
+    const script = document.createElement("script");
+    script.type = "text/javascript";
+    script.src = url;
+    root.appendChild(script);
+  };
+  const addLink = (url, root) => {
+    const link = document.createElement("link");
+    link.type = "text/css";
+    link.href = url;
+    link.rel = "stylesheet";
+    root.appendChild(link);
+  };
+  const waitForElm = function (selector) {
+    return new Promise((resolve) => {
+      const root = document.querySelector("body ivas-messenger-ui").shadowRoot;
+      if (root.querySelector(selector))
+        return resolve(root.querySelector(selector));
+      const observer = new MutationObserver((mutations) => {
+        if (root.querySelector(selector)) {
+          resolve(root.querySelector(selector));
+          observer.disconnect();
+        }
+      });
+      observer.observe(root, {
+        childList: true,
+        subtree: true,
+      });
+    });
+  };
+
+  addScript(
+    "/src/pages/panel/adaptivecards.min.js",
+    document.head
+  );
+  addLink(
+    "https://unpkg.com/adaptivecards-designer@2.4.3/dist/adaptivecards-defaulthost.css",
+    document.querySelector("body ivas-messenger-ui").shadowRoot
+  );
+
+  const destroyCard = async () => {
+    if (store.card) {
+      try {
+        const node = document
+          .querySelector("body ivas-messenger-ui")
+          .shadowRoot.querySelector(`div.ac-adaptiveCard`);
+        node.parentNode.removeChild(node);
+      } catch (e) {}
+    }
+    delete store.card;
+  };
+
+  fetch(
+    "https://router.ivastudio.verint.live/ProxyScript/run/67bca862210071627d32ef12/current/adaptiveCardHostConfig_651eeea7aa4a825a949d6d3d"
+  ).then(async (response) => {
+    AdaptiveCards.currentHostConfig = await response.json();
+  });
+
+  vm.$watch(
+    () => store.conversationEvent.messages,
+    async (value) => {
+      try {
+        await destroyCard();
+        const message = value.slice(-1)[0];
+        if (message?.metadata?.outputs?.adaptiveCard) {
+          const selector = `div#message-${message._id}`;
+          const div = await waitForElm(selector);
+          const adaptiveCard = new AdaptiveCards.AdaptiveCard();
+          adaptiveCard.hostConfig = new AdaptiveCards.HostConfig(
+            AdaptiveCards.currentHostConfig || AdaptiveCards.defaultHostConfig
+          );
+          console.log(adaptiveCard.hostConfig);
+          adaptiveCard.parse(message.metadata.outputs.adaptiveCard);
+          adaptiveCard.onExecuteAction = async (action) => {
+            console.log(action);
+            await destroyCard();
+            if (action instanceof AdaptiveCards.SubmitAction) {
+              store.conversationEvent.sendMessage({
+                input: "Form Submitted",
+                postBack: action.data,
+              });
+            } else if (action instanceof AdaptiveCards.ExecuteAction) {
+              switch (action.id) {
+                case "cancel":
+                  store.conversationEvent.sendMessage({
+                    input: "Cancel",
+                    postBack: {
+                      canceled: true,
+                    },
+                  });
+                  break;
+              }
+            }
+          };
+          div.appendChild(adaptiveCard.render());
+          div.parentElement.parentElement.scrollTop =
+            div.parentElement.parentElement.scrollHeight;
+          store.card = selector;
+          console.log(store);
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    },
+    {
+      deep: true,
+    }
+  );
+}

browser-extension/src/pages/side-panel/index.html

@@ -7,6 +7,7 @@
     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <script src="/src/pages/panel/index.js"></script>
+  <!-- <script src="/src/pages/panel/adaptiveCard.js"></script> -->
 </head>
 
 <body>