Merge branch 'develop' into feat/ui-lib

2026-02-09 16:51:26 +05:30
parent ce5b7e310e 67112647e8
commit 76b1769731
969 changed files with 30544 additions and 7332 deletions
@@ -3,12 +3,14 @@ import { onMounted, computed, ref, toRefs } from 'vue';
 import { useTimeoutFn } from '@vueuse/core';
 import { provideMessageContext } from './provider.js';
 import { useTrack } from 'dashboard/composables';
+import { useMapGetter } from 'dashboard/composables/store';
 import { emitter } from 'shared/helpers/mitt';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { LocalStorage } from 'shared/helpers/localStorage';
 import { ACCOUNT_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
+import { getInboxIconByType } from 'dashboard/helper/inbox';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import {
  MESSAGE_TYPES,
@@ -144,6 +146,8 @@ const showBackgroundHighlight = ref(false);
 const showContextMenu = ref(false);
 const { t } = useI18n();
 const route = useRoute();
+const inboxGetter = useMapGetter('inboxes/getInbox');
+const inbox = computed(() => inboxGetter.value(props.inboxId) || {});

 /**
 * Computes the message variant based on props
@@ -167,6 +171,10 @@ const variant = computed(() => {
  if (props.contentAttributes?.isUnsupported)
    return MESSAGE_VARIANTS.UNSUPPORTED;

+  if (props.contentAttributes?.externalEcho) {
+    return MESSAGE_VARIANTS.AGENT;
+  }
+
  const isBot = !props.sender || props.sender.type === SENDER_TYPES.AGENT_BOT;
  if (isBot && props.messageType === MESSAGE_TYPES.OUTGOING) {
    return MESSAGE_VARIANTS.BOT;
@@ -332,6 +340,7 @@ const componentToRender = computed(() => {
  const instagramSharedTypes = [
    ATTACHMENT_TYPES.STORY_MENTION,
    ATTACHMENT_TYPES.IG_STORY,
+    ATTACHMENT_TYPES.IG_STORY_REPLY,
    ATTACHMENT_TYPES.IG_POST,
  ];
  if (instagramSharedTypes.includes(props.contentAttributes.imageType)) {
@@ -452,6 +461,18 @@ function handleReplyTo() {
 }

 const avatarInfo = computed(() => {
+  if (props.contentAttributes?.externalEcho) {
+    const { name, avatar_url, channel_type, medium } = inbox.value;
+    const iconName = avatar_url
+      ? null
+      : getInboxIconByType(channel_type, medium);
+    return {
+      name: iconName ? '' : name || t('CONVERSATION.NATIVE_APP'),
+      src: avatar_url || '',
+      iconName,
+    };
+  }
+
  // If no sender, return bot info
  if (!props.sender) {
    return {
@@ -479,6 +500,9 @@ const avatarInfo = computed(() => {
 });

 const avatarTooltip = computed(() => {
+  if (props.contentAttributes?.externalEcho) {
+    return t('CONVERSATION.NATIVE_APP_ADVISORY');
+  }
  if (avatarInfo.value.name === '') return '';
  return `${t('CONVERSATION.SENT_BY')} ${avatarInfo.value.name}`;
 });
@@ -513,7 +537,7 @@ provideMessageContext({
  <div
    v-if="shouldRenderMessage"
    :id="`message${props.id}`"
-    class="flex mb-2 w-full message-bubble-container"
+    class="flex w-full mb-2 message-bubble-container"
    :data-message-id="props.id"
    :class="[
      flexOrientationClass,
@@ -42,7 +42,10 @@ const props = defineProps({
 const emit = defineEmits(['retry']);

 const allMessages = computed(() => {
-  return useCamelCase(props.messages, { deep: true });
+  return useCamelCase(props.messages, {
+    deep: true,
+    stopPaths: ['content_attributes.translations'],
+  });
 });

 const currentChat = useMapGetter('getSelectedChat');
@@ -127,7 +130,7 @@ const getInReplyToMessage = parentMessage => {
 </script>

 <template>
-  <ul class="px-4 bg-n-background">
+  <ul class="px-4 bg-n-surface-1">
    <slot name="beforeAll" />
    <template v-for="(message, index) in allMessages" :key="message.id">
      <slot
@@ -7,6 +7,7 @@ import { emitter } from 'shared/helpers/mitt';
 import { useMessageContext } from '../provider.js';
 import { useI18n } from 'vue-i18n';

+import MessageFormatter from 'shared/helpers/MessageFormatter.js';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { MESSAGE_VARIANTS, ORIENTATION } from '../constants';

@@ -99,7 +100,7 @@ const replyToPreview = computed(() => {

  const { content, attachments } = inReplyTo.value;

-  if (content) return content;
+  if (content) return new MessageFormatter(content).formattedMessage;
  if (attachments?.length) {
    const firstAttachment = attachments[0];
    const fileType = firstAttachment.fileType ?? firstAttachment.file_type;
@@ -126,9 +127,10 @@ const replyToPreview = computed(() => {
      class="p-2 -mx-1 mb-2 rounded-lg cursor-pointer bg-n-alpha-black1"
      @click="scrollToMessage"
    >
-      <span class="break-all line-clamp-2">
-        {{ replyToPreview }}
-      </span>
+      <div
+        v-dompurify-html="replyToPreview"
+        class="prose prose-bubble line-clamp-2"
+      />
    </div>
    <slot />
    <MessageMeta
@@ -1,19 +1,26 @@
 <script setup>
 import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useMessageContext } from '../provider.js';
 import Icon from 'next/icon/Icon.vue';
 import BaseBubble from 'next/message/bubbles/Base.vue';

 import MessageFormatter from 'shared/helpers/MessageFormatter.js';
-import { MESSAGE_VARIANTS } from '../constants';
+import { MESSAGE_VARIANTS, ATTACHMENT_TYPES } from '../constants';

 const emit = defineEmits(['error']);
-const { variant, content, attachments } = useMessageContext();
+const { t } = useI18n();
+const { variant, content, contentAttributes, attachments } =
+  useMessageContext();

 const attachment = computed(() => {
  return attachments.value[0];
 });

+const isStoryReply = computed(() => {
+  return contentAttributes.value?.imageType === ATTACHMENT_TYPES.IG_STORY_REPLY;
+});
+
 const hasImgStoryError = ref(false);
 const hasVideoStoryError = ref(false);

@@ -37,10 +44,13 @@ const onVideoLoadError = () => {
 </script>

 <template>
-  <BaseBubble
+  <BaseBubble 
    class="p-[var(--bubble-padding-y)] overflow-hidden"
    data-bubble-name="ig-story"
  >
+    <p v-if="isStoryReply" class="mb-1 text-xs text-n-slate-11">
+      {{ t('COMPONENTS.FILE_BUBBLE.INSTAGRAM_STORY_REPLY') }}
+    </p>
    <div v-if="content" v-dompurify-html="formattedContent" class="mb-2" />
    <img
      v-if="!hasImgStoryError"
@@ -0,0 +1,28 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+  buttonText: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="flex flex-col gap-2.5 text-n-slate-12 max-w-80">
+    <div class="p-3 rounded-xl bg-n-alpha-2">
+      <span
+        v-dompurify-html="message.content"
+        class="text-sm font-medium prose prose-bubble"
+      />
+    </div>
+    <div class="flex gap-2">
+      <Button :label="buttonText" slate class="!text-n-blue-11 w-full" />
+    </div>
+  </div>
+</template>
@@ -18,12 +18,8 @@ defineProps({
      />
    </div>
    <div class="flex gap-2">
-      <Button label="Call us" slate class="!text-n-blue-text w-full" />
-      <Button
-        label="Visit our website"
-        slate
-        class="!text-n-blue-text w-full"
-      />
+      <Button label="Call us" slate class="!text-n-blue-11 w-full" />
+      <Button label="Visit our website" slate class="!text-n-blue-11 w-full" />
    </div>
  </div>
 </template>
@@ -1,5 +1,23 @@
 <script setup>
+import { computed } from 'vue';
+import { useMessageContext } from '../provider.js';
+import { useInbox } from 'dashboard/composables/useInbox';
 import BaseBubble from './Base.vue';
+
+const { inboxId } = useMessageContext();
+
+const { isAFacebookInbox, isAnInstagramChannel, isATiktokChannel } = useInbox(
+  inboxId.value
+);
+
+const unsupportedMessageKey = computed(() => {
+  if (isAFacebookInbox.value)
+    return 'CONVERSATION.UNSUPPORTED_MESSAGE_FACEBOOK';
+  if (isAnInstagramChannel.value)
+    return 'CONVERSATION.UNSUPPORTED_MESSAGE_INSTAGRAM';
+  if (isATiktokChannel.value) return 'CONVERSATION.UNSUPPORTED_MESSAGE_TIKTOK';
+  return 'CONVERSATION.UNSUPPORTED_MESSAGE';
+});
 </script>

 <template>
@@ -7,6 +25,6 @@ import BaseBubble from './Base.vue';
    class="px-[var(--bubble-padding-x)] py-[var(--bubble-padding-y)] text-sm"
    data-bubble-name="unsupported"
  >
-    {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE') }}
+    {{ $t(unsupportedMessageKey) }}
  </BaseBubble>
 </template>
@@ -17,6 +17,10 @@ const { attachment } = defineProps({
    type: Object,
    required: true,
  },
+  showTranscribedText: {
+    type: Boolean,
+    default: true,
+  },
 });

 defineOptions({
@@ -182,7 +186,7 @@ const downloadAudio = async () => {
    </div>

    <div
-      v-if="attachment.transcribedText"
+      v-if="attachment.transcribedText && showTranscribedText"
      class="text-n-slate-12 p-3 text-sm bg-n-alpha-1 rounded-lg w-full break-words"
    >
      {{ attachment.transcribedText }}
@@ -52,6 +52,7 @@ export const ATTACHMENT_TYPES = {
  EMBED: 'embed',
  IG_POST: 'ig_post',
  IG_STORY: 'ig_story',
+  IG_STORY_REPLY: 'ig_story_reply',
 };

 export const CONTENT_TYPES = {