feat: toggle reply to on widget based on feature flag (#8261)

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/widget/components/AgentMessage.vue

@@ -22,6 +22,7 @@
           <drag-wrapper
             class="space-y-2"
             direction="right"
+            :disabled="!allowReplyTo"
             @dragged="toggleReply"
           >
             <AgentMessageBubble
@@ -57,6 +58,7 @@
           </drag-wrapper>
           <div class="flex flex-col justify-end">
             <message-reply-button
+              v-if="allowReplyTo"
               class="transition-opacity delay-75 opacity-0 group-hover:opacity-100 sm:opacity-0"
               @click="toggleReply"
             />
@@ -125,6 +127,7 @@ export default {
   data() {
     return {
       hasImageError: false,
+      allowReplyTo: window.chatwootWebChannel.allowReplyTo || false,
     };
   },
   computed: {
@@ -214,6 +217,7 @@ export default {
       };
     },
     hasReplyTo() {
+      if (!this.allowReplyTo) return false;
       return this.replyTo && (this.replyTo.content || this.replyTo.attachments);
     },
   },

app/javascript/widget/components/ChatFooter.vue

@@ -68,6 +68,7 @@ export default {
   data() {
     return {
       inReplyTo: null,
+      allowReplyTo: window.chatwootWebChannel.allowReplyTo || false,
     };
   },
   computed: {
@@ -90,6 +91,8 @@ export default {
       return this.currentUser && this.currentUser.email;
     },
     hasReplyTo() {
+      if (!this.allowReplyTo) return false;
+
       return (
         this.inReplyTo && (this.inReplyTo.content || this.inReplyTo.attachments)
       );

app/javascript/widget/components/DragWrapper.vue

@@ -19,6 +19,10 @@ export default {
       required: true,
       validator: value => ['left', 'right'].includes(value),
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -29,9 +33,11 @@ export default {
   },
   methods: {
     handleTouchStart(event) {
+      if (this.disabled) return;
       this.startX = event.touches[0].clientX;
     },
     handleTouchMove(event) {
+      if (this.disabled) return;
       const touchX = event.touches[0].clientX;
       let deltaX = touchX - this.startX;
 

app/javascript/widget/components/FooterReplyTo.vue

@@ -29,7 +29,7 @@ export default {
   },
   computed: {
     replyToAttachment() {
-      if (!this.inReplyTo?.attachments.length) {
+      if (!this.inReplyTo?.attachments?.length) {
         return '';
       }
 

app/javascript/widget/components/ReplyToChip.vue

@@ -26,7 +26,7 @@ export default {
   },
   computed: {
     replyToAttachment() {
-      if (!this.replyTo?.attachments.length) {
+      if (!this.replyTo?.attachments?.length) {
         return '';
       }
 

app/javascript/widget/components/UserMessage.vue

@@ -11,12 +11,16 @@
         <div class="flex justify-end gap-1">
           <div class="flex flex-col justify-end">
             <message-reply-button
-              v-if="!isInProgress && !isFailed"
+              v-if="!isInProgress && !isFailed && allowReplyTo"
               class="transition-opacity delay-75 opacity-0 group-hover:opacity-100 sm:opacity-0"
               @click="toggleReply"
             />
           </div>
-          <drag-wrapper direction="left" @dragged="toggleReply">
+          <drag-wrapper
+            direction="left"
+            :disabled="!allowReplyTo"
+            @dragged="toggleReply"
+          >
             <user-message-bubble
               v-if="showTextBubble"
               :message="message.content"
@@ -107,6 +111,7 @@ export default {
   data() {
     return {
       hasImageError: false,
+      allowReplyTo: window.chatwootWebChannel.allowReplyTo || false,
     };
   },
   computed: {
@@ -137,6 +142,7 @@ export default {
         : this.$t('COMPONENTS.MESSAGE_BUBBLE.ERROR_MESSAGE');
     },
     hasReplyTo() {
+      if (!this.allowReplyTo) return false;
       return this.replyTo && (this.replyTo.content || this.replyTo.attachments);
     },
   },