feat: show ReplyTo in widget UI (#8094)

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/widget/components/ChatFooter.vue

@@ -1,10 +1,20 @@
 <template>
   <footer
     v-if="!hideReplyBox"
-    class="shadow-sm bg-white mb-1 z-50 relative"
-    :class="{ 'rounded-lg': !isWidgetStyleFlat }"
+    class="relative z-50 mb-1"
+    :class="{
+      'rounded-lg': !isWidgetStyleFlat,
+      'pt-2.5 shadow-[0px_-20px_20px_1px_rgba(0,_0,_0,_0.05)] dark:shadow-[0px_-20px_20px_1px_rgba(0,_0,_0,_0.15)] rounded-t-none':
+        hasReplyTo,
+    }"
   >
+    <footer-reply-to
+      v-if="hasReplyTo"
+      :in-reply-to="inReplyTo"
+      @dismiss="inReplyTo = null"
+    />
     <chat-input-wrap
+      class="shadow-sm"
       :on-send-message="handleSendMessage"
       :on-send-attachment="handleSendAttachment"
     />
@@ -34,16 +44,19 @@
 import { mapActions, mapGetters } from 'vuex';
 import { getContrastingTextColor } from '@chatwoot/utils';
 import CustomButton from 'shared/components/Button.vue';
+import FooterReplyTo from 'widget/components/FooterReplyTo.vue';
 import ChatInputWrap from 'widget/components/ChatInputWrap.vue';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { sendEmailTranscript } from 'widget/api/conversation';
 import routerMixin from 'widget/mixins/routerMixin';
 import { IFrameHelper } from '../helpers/utils';
 import { CHATWOOT_ON_START_CONVERSATION } from '../constants/sdkEvents';
+
 export default {
   components: {
     ChatInputWrap,
     CustomButton,
+    FooterReplyTo,
   },
   mixins: [routerMixin],
   props: {
@@ -52,6 +65,11 @@ export default {
       default: '',
     },
   },
+  data() {
+    return {
+      inReplyTo: null,
+    };
+  },
   computed: {
     ...mapGetters({
       conversationAttributes: 'conversationAttributes/getConversationParams',
@@ -71,6 +89,14 @@ export default {
     showEmailTranscriptButton() {
       return this.currentUser && this.currentUser.email;
     },
+    hasReplyTo() {
+      return (
+        this.inReplyTo && (this.inReplyTo.content || this.inReplyTo.attachments)
+      );
+    },
+  },
+  mounted() {
+    bus.$on(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.toggleReplyTo);
   },
   methods: {
     ...mapActions('conversation', [
@@ -85,14 +111,21 @@ export default {
     async handleSendMessage(content) {
       await this.sendMessage({
         content,
+        replyTo: this.inReplyTo ? this.inReplyTo.id : null,
       });
+      // reset replyTo message after sending
+      this.inReplyTo = null;
       // Update conversation attributes on new conversation
       if (this.conversationSize === 0) {
         this.getAttributes();
       }
     },
-    handleSendAttachment(attachment) {
-      this.sendAttachment({ attachment });
+    async handleSendAttachment(attachment) {
+      await this.sendAttachment({
+        attachment,
+        replyTo: this.inReplyTo ? this.inReplyTo.id : null,
+      });
+      this.inReplyTo = null;
     },
     startNewConversation() {
       this.clearConversations();
@@ -104,6 +137,9 @@ export default {
         data: { hasConversation: true },
       });
     },
+    toggleReplyTo(message) {
+      this.inReplyTo = message;
+    },
     async sendTranscript() {
       const { email } = this.currentUser;
       if (email) {