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/AgentMessage.vue

@@ -1,7 +1,9 @@
 <template>
   <div
-    class="agent-message-wrap"
-    :class="{ 'has-response': hasRecordedResponse || isASubmittedForm }"
+    class="agent-message-wrap group"
+    :class="{
+      'has-response': hasRecordedResponse || isASubmittedForm,
+    }"
   >
     <div v-if="!isASubmittedForm" class="agent-message">
       <div class="avatar-wrap">
@@ -13,31 +15,51 @@
         />
       </div>
       <div class="message-wrap">
-        <AgentMessageBubble
-          v-if="shouldDisplayAgentMessage"
-          :content-type="contentType"
-          :message-content-attributes="messageContentAttributes"
-          :message-id="message.id"
-          :message-type="messageType"
-          :message="message.content"
-        />
-        <div
-          v-if="hasAttachments"
-          class="chat-bubble has-attachment agent"
-          :class="(wrapClass, $dm('bg-white', 'dark:bg-slate-700'))"
-        >
-          <div v-for="attachment in message.attachments" :key="attachment.id">
-            <image-bubble
-              v-if="attachment.file_type === 'image' && !hasImageError"
-              :url="attachment.data_url"
-              :thumb="attachment.data_url"
-              :readable-time="readableTime"
-              @error="onImageLoadError"
+        <div v-if="hasReplyTo" class="flex mt-2 mb-1 text-xs">
+          <reply-to-chip :reply-to="replyTo" />
+        </div>
+        <div class="flex gap-1">
+          <drag-wrapper
+            class="space-y-2"
+            direction="right"
+            @dragged="toggleReply"
+          >
+            <AgentMessageBubble
+              v-if="shouldDisplayAgentMessage"
+              :content-type="contentType"
+              :message-content-attributes="messageContentAttributes"
+              :message-id="message.id"
+              :message-type="messageType"
+              :message="message.content"
+            />
+            <div
+              v-if="hasAttachments"
+              class="chat-bubble has-attachment agent"
+              :class="(wrapClass, $dm('bg-white', 'dark:bg-slate-700'))"
+            >
+              <div
+                v-for="attachment in message.attachments"
+                :key="attachment.id"
+              >
+                <image-bubble
+                  v-if="attachment.file_type === 'image' && !hasImageError"
+                  :url="attachment.data_url"
+                  :thumb="attachment.data_url"
+                  :readable-time="readableTime"
+                  @error="onImageLoadError"
+                />
+                <audio v-else-if="attachment.file_type === 'audio'" controls>
+                  <source :src="attachment.data_url" />
+                </audio>
+                <file-bubble v-else :url="attachment.data_url" />
+              </div>
+            </div>
+          </drag-wrapper>
+          <div class="flex flex-col justify-end">
+            <message-reply-button
+              class="transition-opacity delay-75 opacity-0 group-hover:opacity-100 sm:opacity-0"
+              @click="toggleReply"
             />
-            <audio v-else-if="attachment.file_type === 'audio'" controls>
-              <source :src="attachment.data_url" />
-            </audio>
-            <file-bubble v-else :url="attachment.data_url" />
           </div>
         </div>
         <p
@@ -63,6 +85,7 @@
 <script>
 import UserMessage from 'widget/components/UserMessage.vue';
 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 FileBubble from 'widget/components/FileBubble.vue';
@@ -72,6 +95,9 @@ import configMixin from '../mixins/configMixin';
 import messageMixin from '../mixins/messageMixin';
 import { isASubmittedFormMessage } from 'shared/helpers/MessageTypeHelper';
 import darkModeMixin from 'widget/mixins/darkModeMixin.js';
+import ReplyToChip from 'widget/components/ReplyToChip.vue';
+import DragWrapper from 'widget/components/DragWrapper.vue';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
 
 export default {
   name: 'AgentMessage',
@@ -81,6 +107,9 @@ export default {
     Thumbnail,
     UserMessage,
     FileBubble,
+    MessageReplyButton,
+    ReplyToChip,
+    DragWrapper,
   },
   mixins: [timeMixin, configMixin, messageMixin, darkModeMixin],
   props: {
@@ -88,6 +117,10 @@ export default {
       type: Object,
       default: () => {},
     },
+    replyTo: {
+      type: Object,
+      default: () => {},
+    },
   },
   data() {
     return {
@@ -180,6 +213,9 @@ export default {
         'has-text': this.shouldDisplayAgentMessage,
       };
     },
+    hasReplyTo() {
+      return this.replyTo && (this.replyTo.content || this.replyTo.attachments);
+    },
   },
   watch: {
     message() {
@@ -193,6 +229,9 @@ export default {
     onImageLoadError() {
       this.hasImageError = true;
     },
+    toggleReply() {
+      bus.$emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.message);
+    },
   },
 };
 </script>