feat: Add video message viewing in to the user bubble in widget (#9642)

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);
     },