From 2c94c890772de324248ee1306c80ff6f47c4598c Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Sat, 29 Jun 2024 01:21:27 +0530
Subject: [PATCH] feat: Add video message viewer in agent widget bubble (#9691)

Fixes https://linear.app/chatwoot/issue/CW-3384/video-message-display-issue
---
 .../widget/components/AgentMessage.vue         | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/app/javascript/widget/components/AgentMessage.vue b/app/javascript/widget/components/AgentMessage.vue
index eb64e0c36..c38726031 100755
--- a/app/javascript/widget/components/AgentMessage.vue
+++ b/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);
     },