feat: show reply to for agent message

app/javascript/widget/components/AgentMessage.vue

@@ -13,6 +13,22 @@
         />
       </div>
       <div class="message-wrap">
+        <div class="flex mb-1 text-xs">
+          <div
+            v-if="replyTo && (replyTo.content || replyTo.attachments)"
+            class="px-1.5 py-0.5 rounded-md text-slate-600 bg-slate-50 hover:bg-slate-100 hover:text-slate-800 cursor-pointer flex items-center gap-1.5"
+          >
+            <FluentIcon icon="arrow-reply" size="12" class="flex-shrink-0" />
+            <div
+              v-if="replyTo.content"
+              v-dompurify-html="formatMessage(replyTo.content, false)"
+              class="reply-to-truncate"
+            />
+            <div v-else-if="replyTo.attachments" class="reply-to-truncate">
+              <p>{{ replyToAttachment }}</p>
+            </div>
+          </div>
+        </div>
         <AgentMessageBubble
           v-if="shouldDisplayAgentMessage"
           :content-type="contentType"
@@ -72,6 +88,8 @@ import configMixin from '../mixins/configMixin';
 import messageMixin from '../mixins/messageMixin';
 import { isASubmittedFormMessage } from 'shared/helpers/MessageTypeHelper';
 import darkModeMixin from 'widget/mixins/darkModeMixin.js';
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 
 export default {
   name: 'AgentMessage',
@@ -81,13 +99,24 @@ export default {
     Thumbnail,
     UserMessage,
     FileBubble,
+    FluentIcon,
   },
-  mixins: [timeMixin, configMixin, messageMixin, darkModeMixin],
+  mixins: [
+    timeMixin,
+    configMixin,
+    messageMixin,
+    darkModeMixin,
+    messageFormatterMixin,
+  ],
   props: {
     message: {
       type: Object,
       default: () => {},
     },
+    replyTo: {
+      type: Object,
+      default: () => {},
+    },
   },
   data() {
     return {
@@ -180,6 +209,14 @@ export default {
         'has-text': this.shouldDisplayAgentMessage,
       };
     },
+    replyToAttachment() {
+      if (!this.replyTo?.attachments.length) {
+        return '';
+      }
+
+      const [{ file_type: fileType } = {}] = this.replyTo.attachments;
+      return this.$t(`ATTACHMENTS.${fileType}.CONTENT`);
+    },
   },
   watch: {
     message() {
@@ -196,3 +233,9 @@ export default {
   },
 };
 </script>
+
+<style lang="scss">
+.reply-to-truncate > p {
+  @apply overflow-hidden truncate max-w-[8rem];
+}
+</style>

app/javascript/widget/components/ChatMessage.vue

@@ -1,11 +1,12 @@
 <template>
-  <UserMessage v-if="isUserMessage" :message="message" />
-  <AgentMessage v-else :message="message" />
+  <UserMessage v-if="isUserMessage" :message="message" :reply-to="replyTo" />
+  <AgentMessage v-else :message="message" :reply-to="replyTo" />
 </template>
 
 <script>
 import AgentMessage from 'widget/components/AgentMessage.vue';
 import UserMessage from 'widget/components/UserMessage.vue';
+import { mapGetters } from 'vuex';
 import { MESSAGE_TYPE } from 'widget/helpers/constants';
 
 export default {
@@ -20,9 +21,16 @@ export default {
     },
   },
   computed: {
+    ...mapGetters({
+      allMessages: 'conversation/getConversation',
+    }),
     isUserMessage() {
       return this.message.message_type === MESSAGE_TYPE.INCOMING;
     },
+    replyTo() {
+      const replyTo = this.message?.content_attributes?.in_reply_to;
+      return replyTo ? this.allMessages[replyTo] : null;
+    },
   },
 };
 </script>