Pre release v.3.7.8 (#134)

* Updates to Carousel

* Update messagelist component so messages can scroll down automatically

* Updates to components

* update package versions

* removed TTS/STT

* add touch navigation to carousel cards

* added styles to modal window

Co-authored-by: alpe <[email protected]>

CHANGELOG.md

@@ -1,9 +1,16 @@
+# v3.7.8
+## July-2023
+* Bug Fixes
+    * Message does not scroll down automatically.
+    * Carousel Scrolling Bug with Arrows.
+    * Carousel Bug when Switching Cards.
+    * ASR microphone button behaving erratically.
+    * Hiding User input when upload panel is displayed.
 # v3.7.7
 ## June-2023
 * Features
     * Attachment Messages.
-    * Rating Messages.
-    * [MCS integration](docs/features/TWC+MCS%20integration.md).
+    * Rating Messages.    
 
 
 * Bug Fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "teneo-web-chat",
-  "version": "3.7.7",
+  "version": "3.7.8",
   "description": "Teneo Web Chat widget that can be embedded in websites.",
   "scripts": {
     "analyze": "NODE_ENV=production webpack --config webpack.prod.js --profile --json > stats-prod.json && webpack-bundle-analyzer stats-prod.json dist/",
@@ -24,7 +24,6 @@
     "express": "^4.17.1",
     "install": "^0.13.0",
     "isomorphic-dompurify": "^0.24.0",
-    "microsoft-cognitiveservices-speech-sdk": "^1.30.1",
     "vue": "^2.6.14"
   },
   "devDependencies": {

src/components/Header.vue

@@ -60,7 +60,7 @@ export default {
 
 <style scoped>
 .twc-header {
-  background: var(--header-bg-color, #4e8cff);
+  background: var(--header-bg-color, #2f286e);
   min-height: 64px;
   border-top-left-radius: 9px;
   border-top-right-radius: 9px;

src/components/LaunchButton.vue

@@ -93,7 +93,7 @@ export default {
 </script>
 <style scoped>
 .twc-launch-button {
-  background-color: var(--launch-button-bg-color, #4e8cff);
+  background-color: var(--launch-button-bg-color, #2f286e);
   width: 60px;
   height: 60px;
   background-position: center;

src/components/MessageList.vue

@@ -11,7 +11,7 @@
 
 <script>
 import Message from './Message.vue';
-import { EventBus,events } from '../utils/event-bus';
+import { EventBus, events } from '../utils/event-bus';
 
 export default {
   components: {
@@ -26,90 +26,57 @@ export default {
   data() {
     return {
       showScrollDownButton: false,
+      mutationObserver: null,
     };
   },
   mounted() {
-    // Setup a downwards scroller
-    EventBus.$on(events.SCROLL_CHAT_DOWN, () => {
-      setTimeout(() => {
-        this._scrollDown();
-      }, 40);
-    });
+    // Used MutationObserver to detect changes in the messageList or new messages are added
+    this.mutationObserver = new MutationObserver(this.handleMutation);
 
-    // Add scroll event listener to show/hide scroll down button
-    this.$refs.scrollList.addEventListener('scroll', () => {
-  this.handleScroll();
-});
+    // Start observing changes in the scrollList
+    this.mutationObserver.observe(this.$refs.scrollList, {
+      childList: true,
+    });
 
-  },
-  updated() {
-    if (this.shouldScrollToBottom() && !this.showScrollDownButton) {
-  this.$nextTick(this._scrollDown);
-}
-    // Additional scroll down after images etc have loaded
-    setTimeout(this._scrollDown.bind(this), 700);
+    // Scroll to the last message when component is mounted
+    this.$nextTick(this.scrollDown);
   },
   beforeDestroy() {
-    // Remove scroll event listener
-    this.$refs.scrollList.removeEventListener('scroll', this.handleScroll);
+    // Stop observing changes and disconnect MutationObserver
+    this.mutationObserver.disconnect();
   },
   methods: {
-    _scrollDown() {
-  const scrollList = this.$refs.scrollList;
-  const latestMessage = document.querySelector('.twc-message:last-child');
+    scrollDown() {
+      const scrollList = this.$refs.scrollList;
 
-  if (!scrollList) {
-    return;
-  }
+      if (!scrollList) {
+        return;
+      }
 
-  // Only scroll to the bottom if the user is already at the bottom
-  if (scrollList.scrollTop === (scrollList.scrollHeight - scrollList.offsetHeight)) {
-    if (latestMessage && typeof latestMessage.scrollIntoView === 'function') {
-      latestMessage.scrollIntoView({
-        behavior: 'smooth',
-        block: 'end',
-        inline: 'nearest'
+      this.$nextTick(() => {
+        const latestMessage = scrollList.querySelector('.twc-message:last-child');
+
+        if (latestMessage && typeof latestMessage.scrollIntoView === 'function') {
+          latestMessage.scrollIntoView({
+            behavior: 'smooth',
+            block: 'end',
+            inline: 'nearest',
+          });
+        } else {
+          scrollList.scrollTop = scrollList.scrollHeight;
+        }
       });
-    } else {
-      scrollList.scrollTop = scrollList.scrollHeight;
-    }
-  }
-},
-
-shouldScrollToBottom() {
-  return this.$refs.scrollList.scrollTop >= 0;
-},
-
-
-handleScroll() {
-  const scrollList = this.$refs.scrollList;
-
-  if (scrollList.scrollTop === (scrollList.scrollHeight - scrollList.offsetHeight)) {
-    this.showScrollDownButton = false;
-  } else {
-    this.showScrollDownButton = true;
-  }
-},
-
+    },
+    handleMutation() {
+      this.$nextTick(this.scrollDown);
+    },
     scrollDownDirectly() {
-      const latestMessage = document.querySelector('.twc-message:last-child');
-
-      if (latestMessage && typeof latestMessage.scrollIntoView === 'function') {
-        latestMessage.scrollIntoView({
-          behavior: 'smooth',
-          block: 'end',
-          inline: 'nearest'
-        });
-      } else if (this.$refs.scrollList) {
-        this.$refs.scrollList.scrollTop = this.$refs.scrollList.scrollHeight;
-      }
+      this.scrollDown();
     },
   },
 };
 </script>
 
-
-
 <style scoped>
   :root {
     --user-input-bg-color: #fff;
@@ -127,7 +94,8 @@ handleScroll() {
   }
 
   .twc-message-list::-webkit-scrollbar-track {
-    background: var(--user-input-bg-color); border-radius: 10px;
+    background: var(--user-input-bg-color);
+    border-radius: 10px;
     margin: 2px 0;
   }