feat: add inreplyto

2024-11-28 18:55:44 +05:30
parent ebe35c7843
commit 39b06a76ce
4 changed files with 55 additions and 5 deletions
@@ -123,6 +123,10 @@ const props = defineProps({
    type: Boolean,
    default: false,
  },
+  inReplyTo: {
+    type: Object,
+    default: null,
+  },
 });

 /**
@@ -229,6 +233,7 @@ const componentToRender = computed(() => {

 provideMessageContext({
  variant,
+  inReplyTo: props.inReplyTo,
  orientation,
  isMyMessage,
 });
@@ -21,6 +21,13 @@ const shouldGroupWithNext = index => {
  // Check if messages are in the same minute by rounding down to nearest minute
  return Math.floor(next.createdAt / 60) === Math.floor(current.createdAt / 60);
 };
+
+const getReplyToMessage = message => {
+  const idToCheck = message.contentAttributes.inReplyTo;
+  if (!idToCheck) return null;
+
+  return messages.find(candidate => idToCheck === candidate.id);
+};
 </script>

 <template>
@@ -30,6 +37,7 @@ const shouldGroupWithNext = index => {
        <Message
          :current-user-id="1"
          :group-with-next="shouldGroupWithNext(index)"
+          :in-reply-to="getReplyToMessage(message)"
          v-bind="message"
        />
      </template>
@@ -1,9 +1,15 @@
 <script setup>
 import { computed } from 'vue';
+
+import { emitter } from 'shared/helpers/mitt';
 import { useMessageContext } from '../provider.js';
+import { useI18n } from 'vue-i18n';
+
+import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { MESSAGE_VARIANTS } from '../constants';

-const { variant, orientation } = useMessageContext();
+const { variant, orientation, inReplyTo } = useMessageContext();
+const { t } = useI18n();

 const varaintBaseMap = {
  [MESSAGE_VARIANTS.AGENT]: 'bg-n-solid-blue text-n-slate-12',
@@ -32,10 +38,39 @@ const messageClass = computed(() => {

  return classToApply;
 });
+
+const scrollToMessage = () => {
+  emitter.emit(BUS_EVENTS.SCROLL_TO_MESSAGE, {
+    messageId: this.message.id,
+  });
+};
+
+const previewMessage = computed(() => {
+  if (!inReplyTo) return '';
+
+  const { content, attachments } = inReplyTo;
+
+  if (content) return content;
+  if (attachments.length) {
+    const [{ fileType } = {}] = inReplyTo.attachments;
+    return t(`CHAT_LIST.ATTACHMENTS.${fileType}.CONTENT`);
+  }
+
+  return '';
+});
 </script>

 <template>
  <div class="max-w-md text-sm" :class="messageClass">
+    <div
+      v-if="inReplyTo"
+      class="bg-n-alpha-black1 rounded-lg p-2"
+      @click="scrollToMessage"
+    >
+      <span class="line-clamp-2">
+        {{ previewMessage }}
+      </span>
+    </div>
    <slot />
  </div>
 </template>
@@ -129,10 +129,10 @@ export default camelcaseKeys(
      status: 'read',
      content_type: 'text',
      processed_message_content:
-        "Hey, I am Shivam, I'll be helping you today. What kind of repair are you looking for?",
+        "Hey, I am Shivam, I'll be helping you today. What kind of repair are you looking for? I see you own a Macbook Pro 2022 Model. Is that correct?",
      id: 5301,
      content:
-        "Hey, I am Shivam, I'll be helping you today. What kind of repair are you looking for?",
+        "Hey, I am Shivam, I'll be helping you today. What kind of repair are you looking for? I see you own a Macbook Pro 2022 Model. Is that correct?",
      account_id: 2,
      inbox_id: 486,
      message_type: 1,
@@ -140,7 +140,9 @@ export default camelcaseKeys(
      updated_at: '2024-11-27T12:32:43.458Z',
      private: false,
      source_id: null,
-      content_attributes: {},
+      content_attributes: {
+        in_reply_to: 5296,
+      },
      sender_type: 'User',
      sender_id: 1,
      external_source_ids: {},
@@ -185,7 +187,7 @@ export default camelcaseKeys(
      source_id: null,
      content_type: 'text',
      content_attributes: {
-        in_reply_to: null,
+        in_reply_to: 5301,
      },
      sender_type: 'Contact',
      sender_id: 599,