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

@@ -0,0 +1,51 @@
+<template>
+  <button
+    class="px-1.5 py-0.5 rounded-md text-slate-500 bg-slate-50 dark:bg-slate-900 opacity-60 hover:opacity-100 cursor-pointer flex items-center gap-1.5"
+    @click="navigateTo(replyTo.id)"
+  >
+    <fluent-icon icon="arrow-reply" size="12" class="flex-shrink-0" />
+    <div class="truncate max-w-[8rem]">
+      {{ replyTo.content || replyToAttachment }}
+    </div>
+  </button>
+</template>
+
+<script>
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+
+export default {
+  name: 'AgentMessage',
+  components: {
+    FluentIcon,
+  },
+  props: {
+    replyTo: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  computed: {
+    replyToAttachment() {
+      if (!this.replyTo?.attachments.length) {
+        return '';
+      }
+
+      const [{ file_type: fileType } = {}] = this.replyTo.attachments;
+      return this.$t(`ATTACHMENTS.${fileType}.CONTENT`);
+    },
+  },
+  methods: {
+    navigateTo(id) {
+      const elementId = `cwmsg-${id}`;
+      this.$nextTick(() => {
+        const el = document.getElementById(elementId);
+        el.scrollIntoView();
+        el.classList.add('bg-slate-100', 'dark:bg-slate-900');
+        setTimeout(() => {
+          el.classList.remove('bg-slate-100', 'dark:bg-slate-900');
+        }, 500);
+      });
+    },
+  },
+};
+</script>