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

@@ -1,46 +1,63 @@
 <template>
-  <div class="user-message-wrap">
-    <div class="user-message">
+  <div class="user-message-wrap group">
+    <div class="flex gap-1 user-message">
       <div
         class="message-wrap"
         :class="{ 'in-progress': isInProgress, 'is-failed': isFailed }"
       >
-        <user-message-bubble
-          v-if="showTextBubble"
-          :message="message.content"
-          :status="message.status"
-          :widget-color="widgetColor"
-        />
-        <div
-          v-if="hasAttachments"
-          class="chat-bubble has-attachment user"
-          :style="{ backgroundColor: widgetColor }"
-        >
-          <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"
-            />
-            <file-bubble
-              v-else
-              :url="attachment.data_url"
-              :is-in-progress="isInProgress"
-              :widget-color="widgetColor"
-              is-user-bubble
+        <div v-if="hasReplyTo" class="flex justify-end mt-2 mb-1 text-xs">
+          <reply-to-chip :reply-to="replyTo" />
+        </div>
+        <div class="flex justify-end gap-1">
+          <div class="flex flex-col justify-end">
+            <message-reply-button
+              v-if="!isInProgress && !isFailed"
+              class="transition-opacity delay-75 opacity-0 group-hover:opacity-100 sm:opacity-0"
+              @click="toggleReply"
             />
           </div>
+          <drag-wrapper direction="left" @dragged="toggleReply">
+            <user-message-bubble
+              v-if="showTextBubble"
+              :message="message.content"
+              :status="message.status"
+              :widget-color="widgetColor"
+            />
+            <div
+              v-if="hasAttachments"
+              class="chat-bubble has-attachment user"
+              :style="{ backgroundColor: widgetColor }"
+            >
+              <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"
+                />
+                <file-bubble
+                  v-else
+                  :url="attachment.data_url"
+                  :is-in-progress="isInProgress"
+                  :widget-color="widgetColor"
+                  is-user-bubble
+                />
+              </div>
+            </div>
+          </drag-wrapper>
         </div>
         <div
           v-if="isFailed"
-          class="flex justify-end align-middle px-4 py-2 text-red-700"
+          class="flex justify-end px-4 py-2 text-red-700 align-middle"
         >
           <button
             v-if="!hasAttachments"
             :title="$t('COMPONENTS.MESSAGE_BUBBLE.RETRY')"
-            class="inline-flex justify-center items-center ml-2"
+            class="inline-flex items-center justify-center ml-2"
             @click="retrySendMessage"
           >
             <fluent-icon icon="arrow-clockwise" size="14" />
@@ -53,20 +70,28 @@
 
 <script>
 import UserMessageBubble from 'widget/components/UserMessageBubble.vue';
+import MessageReplyButton from 'widget/components/MessageReplyButton.vue';
 import ImageBubble from 'widget/components/ImageBubble.vue';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import FileBubble from 'widget/components/FileBubble.vue';
 import timeMixin from 'dashboard/mixins/time';
 import messageMixin from '../mixins/messageMixin';
+import ReplyToChip from 'widget/components/ReplyToChip.vue';
+import DragWrapper from 'widget/components/DragWrapper.vue';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+
 import { mapGetters } from 'vuex';
 
 export default {
   name: 'UserMessage',
   components: {
     UserMessageBubble,
+    MessageReplyButton,
     ImageBubble,
     FileBubble,
     FluentIcon,
+    ReplyToChip,
+    DragWrapper,
   },
   mixins: [timeMixin, messageMixin],
   props: {
@@ -74,6 +99,10 @@ export default {
       type: Object,
       default: () => {},
     },
+    replyTo: {
+      type: Object,
+      default: () => {},
+    },
   },
   data() {
     return {
@@ -107,6 +136,9 @@ export default {
         ? meta.error
         : this.$t('COMPONENTS.MESSAGE_BUBBLE.ERROR_MESSAGE');
     },
+    hasReplyTo() {
+      return this.replyTo && (this.replyTo.content || this.replyTo.attachments);
+    },
   },
   watch: {
     message() {
@@ -126,6 +158,9 @@ export default {
     onImageLoadError() {
       this.hasImageError = true;
     },
+    toggleReply() {
+      bus.$emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.message);
+    },
   },
 };
 </script>