Merge branch 'develop' into chore/vuelidate-v2-migration

app/javascript/widget/App.vue

@@ -71,6 +71,7 @@ export default {
       messageCount: 'conversation/getMessageCount',
       unreadMessageCount: 'conversation/getUnreadMessageCount',
       isWidgetStyleFlat: 'appConfig/isWidgetStyleFlat',
+      showUnreadMessagesDialog: 'appConfig/getShowUnreadMessagesDialog',
     }),
     isIFrame() {
       return IFrameHelper.isIFrame();
@@ -209,8 +210,13 @@ export default {
     },
     setUnreadView() {
       const { unreadMessageCount } = this;
-
-      if (this.isIFrame && unreadMessageCount > 0 && !this.isWidgetOpen) {
+      if (!this.showUnreadMessagesDialog) {
+        this.handleUnreadNotificationDot();
+      } else if (
+        this.isIFrame &&
+        unreadMessageCount > 0 &&
+        !this.isWidgetOpen
+      ) {
         this.replaceRoute('unread-messages').then(() => {
           this.setIframeHeight(true);
           IFrameHelper.sendMessage({ event: 'setUnreadMode' });

app/javascript/widget/components/AgentMessage.vue

@@ -30,7 +30,7 @@
             />
             <div
               v-if="hasAttachments"
-              class="chat-bubble has-attachment agent"
+              class="chat-bubble has-attachment space-y-2 agent"
               :class="(wrapClass, $dm('bg-white', 'dark:bg-slate-700'))"
             >
               <div
@@ -44,6 +44,14 @@
                   :readable-time="readableTime"
                   @error="onImageLoadError"
                 />
+
+                <video-bubble
+                  v-if="attachment.file_type === 'video' && !hasVideoError"
+                  :url="attachment.data_url"
+                  :readable-time="readableTime"
+                  @error="onVideoLoadError"
+                />
+
                 <audio v-else-if="attachment.file_type === 'audio'" controls>
                   <source :src="attachment.data_url" />
                 </audio>
@@ -84,6 +92,7 @@ import AgentMessageBubble from 'widget/components/AgentMessageBubble.vue';
 import MessageReplyButton from 'widget/components/MessageReplyButton.vue';
 import timeMixin from 'dashboard/mixins/time';
 import ImageBubble from 'widget/components/ImageBubble.vue';
+import VideoBubble from 'widget/components/VideoBubble.vue';
 import FileBubble from 'widget/components/FileBubble.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import { MESSAGE_TYPE } from 'widget/helpers/constants';
@@ -100,6 +109,7 @@ export default {
   components: {
     AgentMessageBubble,
     ImageBubble,
+    VideoBubble,
     Thumbnail,
     UserMessage,
     FileBubble,
@@ -120,6 +130,7 @@ export default {
   data() {
     return {
       hasImageError: false,
+      hasVideoError: false,
     };
   },
   computed: {
@@ -215,15 +226,20 @@ export default {
   watch: {
     message() {
       this.hasImageError = false;
+      this.hasVideoError = false;
     },
   },
   mounted() {
     this.hasImageError = false;
+    this.hasVideoError = false;
   },
   methods: {
     onImageLoadError() {
       this.hasImageError = true;
     },
+    onVideoLoadError() {
+      this.hasVideoError = true;
+    },
     toggleReply() {
       emitter.emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.message);
     },

app/javascript/widget/components/UserMessage.vue

@@ -39,6 +39,14 @@
                   :readable-time="readableTime"
                   @error="onImageLoadError"
                 />
+
+                <video-bubble
+                  v-if="attachment.file_type === 'video' && !hasVideoError"
+                  :url="attachment.data_url"
+                  :readable-time="readableTime"
+                  @error="onVideoLoadError"
+                />
+
                 <file-bubble
                   v-else
                   :url="attachment.data_url"
@@ -72,6 +80,7 @@
 import UserMessageBubble from 'widget/components/UserMessageBubble.vue';
 import MessageReplyButton from 'widget/components/MessageReplyButton.vue';
 import ImageBubble from 'widget/components/ImageBubble.vue';
+import VideoBubble from 'widget/components/VideoBubble.vue';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import FileBubble from 'widget/components/FileBubble.vue';
 import timeMixin from 'dashboard/mixins/time';
@@ -88,6 +97,7 @@ export default {
     UserMessageBubble,
     MessageReplyButton,
     ImageBubble,
+    VideoBubble,
     FileBubble,
     FluentIcon,
     ReplyToChip,
@@ -107,6 +117,7 @@ export default {
   data() {
     return {
       hasImageError: false,
+      hasVideoError: false,
     };
   },
   computed: {
@@ -143,10 +154,12 @@ export default {
   watch: {
     message() {
       this.hasImageError = false;
+      this.hasVideoError = false;
     },
   },
   mounted() {
     this.hasImageError = false;
+    this.hasVideoError = false;
   },
   methods: {
     async retrySendMessage() {
@@ -158,6 +171,9 @@ export default {
     onImageLoadError() {
       this.hasImageError = true;
     },
+    onVideoLoadError() {
+      this.hasVideoError = true;
+    },
     toggleReply() {
       this.$emitter.emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.message);
     },

app/javascript/widget/components/VideoBubble.vue

@@ -0,0 +1,27 @@
+<script setup>
+defineProps({
+  url: { type: String, default: '' },
+  readableTime: { type: String, default: '' },
+});
+
+const emits = defineEmits(['error']);
+
+const onVideoError = () => {
+  emits('error');
+};
+</script>
+<template>
+  <div class="block relative max-w-full">
+    <video
+      class="w-full max-w-[250px] h-auto"
+      :src="url"
+      controls
+      @error="onVideoError"
+    />
+    <span
+      class="text-xs absolute text-white dark:text-white right-3 bottom-1 whitespace-nowrap"
+    >
+      {{ readableTime }}
+    </span>
+  </div>
+</template>

app/javascript/widget/store/modules/appConfig.js

@@ -10,6 +10,7 @@ import {
 const state = {
   hideMessageBubble: false,
   isCampaignViewClicked: false,
+  showUnreadMessagesDialog: true,
   isWebWidgetTriggered: false,
   isWidgetOpen: false,
   position: 'right',
@@ -29,6 +30,7 @@ export const getters = {
   getReferrerHost: $state => $state.referrerHost,
   isWidgetStyleFlat: $state => $state.widgetStyle === 'flat',
   darkMode: $state => $state.darkMode,
+  getShowUnreadMessagesDialog: $state => $state.showUnreadMessagesDialog,
 };
 
 export const actions = {
@@ -38,6 +40,7 @@ export const actions = {
       showPopoutButton,
       position,
       hideMessageBubble,
+      showUnreadMessagesDialog,
       widgetStyle = 'rounded',
       darkMode = 'light',
     }
@@ -46,6 +49,7 @@ export const actions = {
       hideMessageBubble: !!hideMessageBubble,
       position: position || 'right',
       showPopoutButton: !!showPopoutButton,
+      showUnreadMessagesDialog: !!showUnreadMessagesDialog,
       widgetStyle,
       darkMode,
     });
@@ -75,6 +79,7 @@ export const mutations = {
     $state.widgetStyle = data.widgetStyle;
     $state.darkMode = data.darkMode;
     $state.locale = data.locale || $state.locale;
+    $state.showUnreadMessagesDialog = data.showUnreadMessagesDialog;
   },
   [TOGGLE_WIDGET_OPEN]($state, isWidgetOpen) {
     $state.isWidgetOpen = isWidgetOpen;

app/javascript/widget/store/modules/specs/appConfig/getters.spec.js

@@ -13,4 +13,10 @@ describe('#getters', () => {
       expect(getters.getReferrerHost(state)).toEqual('www.chatwoot.com');
     });
   });
+  describe('#getShowUnreadMessagesDialog', () => {
+    it('returns correct value', () => {
+      const state = { showUnreadMessagesDialog: true };
+      expect(getters.getShowUnreadMessagesDialog(state)).toEqual(true);
+    });
+  });
 });