Merge branch 'develop' into fix/cw-4085

2025-05-01 16:41:44 -07:00
parent ae5c71ffa1 55316ea0a0
commit c0e398c642
982 changed files with 25286 additions and 6037 deletions
@@ -17,6 +17,9 @@ export default {
    hasFbConfigured() {
      return window.chatwootConfig?.fbAppId;
    },
+    hasInstagramConfigured() {
+      return window.chatwootConfig?.instagramAppId;
+    },
    isActive() {
      const { key } = this.channel;
      if (Object.keys(this.enabledFeatures).length === 0) {
@@ -32,6 +35,12 @@ export default {
        return this.enabledFeatures.channel_email;
      }

+      if (key === 'instagram') {
+        return (
+          this.enabledFeatures.channel_instagram && this.hasInstagramConfigured
+        );
+      }
+
      return [
        'website',
        'twilio',
@@ -40,6 +49,7 @@ export default {
        'sms',
        'telegram',
        'line',
+        'instagram',
      ].includes(key);
    },
  },
@@ -220,6 +220,7 @@ const plugins = computed(() => {
      trigger: '@',
      showMenu: showUserMentions,
      searchTerm: mentionSearchKey,
+      isAllowed: () => props.isPrivate,
    }),
    createSuggestionPlugin({
      trigger: '/',
@@ -774,10 +775,24 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
 }

 .ProseMirror-prompt {
-  @apply z-[9999] bg-slate-25 dark:bg-slate-700 rounded-md border border-solid border-slate-75 dark:border-slate-800 shadow-lg;
+  @apply z-[9999] bg-n-alpha-3 backdrop-blur-[100px] border border-n-strong p-6 shadow-xl rounded-xl;

  h5 {
-    @apply dark:text-slate-25 text-slate-800;
+    @apply text-n-slate-12 mb-1.5;
+  }
+
+  .ProseMirror-prompt-buttons {
+    button {
+      @apply h-8 px-3;
+
+      &[type='submit'] {
+        @apply bg-n-brand text-white hover:bg-n-brand/90;
+      }
+
+      &[type='button'] {
+        @apply bg-n-slate-9/10 text-n-slate-12 hover:bg-n-slate-9/20;
+      }
+    }
  }
 }

@@ -328,11 +328,24 @@ export default {
 }

 .ProseMirror-prompt {
-  z-index: var(--z-index-highest);
-  background: var(--white);
-  box-shadow: var(--shadow-large);
-  border-radius: var(--border-radius-normal);
-  border: 1px solid var(--color-border);
-  min-width: 25rem;
+  @apply z-[9999] bg-n-alpha-3 min-w-80 backdrop-blur-[100px] border border-n-strong p-6 shadow-xl rounded-xl;
+
+  h5 {
+    @apply text-n-slate-12 mb-1.5;
+  }
+
+  .ProseMirror-prompt-buttons {
+    button {
+      @apply h-8 px-3;
+
+      &[type='submit'] {
+        @apply bg-n-brand text-white hover:bg-n-brand/90;
+      }
+
+      &[type='button'] {
+        @apply bg-n-slate-9/10 text-n-slate-12 hover:bg-n-slate-9/20;
+      }
+    }
+  }
 }
 </style>
@@ -10,6 +10,7 @@ import {
  ALLOWED_FILE_TYPES,
  ALLOWED_FILE_TYPES_FOR_TWILIO_WHATSAPP,
  ALLOWED_FILE_TYPES_FOR_LINE,
+  ALLOWED_FILE_TYPES_FOR_INSTAGRAM,
 } from 'shared/constants/messages';
 import VideoCallButton from '../VideoCallButton.vue';
 import AIAssistanceButton from '../AIAssistanceButton.vue';
@@ -113,6 +114,10 @@ export default {
      type: String,
      required: true,
    },
+    conversationType: {
+      type: String,
+      default: '',
+    },
  },
  emits: [
    'replaceText',
@@ -187,6 +192,9 @@ export default {
    showAudioPlayStopButton() {
      return this.showAudioRecorder && this.isRecordingAudio;
    },
+    isInstagramDM() {
+      return this.conversationType === 'instagram_direct_message';
+    },
    allowedFileTypes() {
      if (this.isATwilioWhatsAppChannel) {
        return ALLOWED_FILE_TYPES_FOR_TWILIO_WHATSAPP;
@@ -194,6 +202,10 @@ export default {
      if (this.isALineChannel) {
        return ALLOWED_FILE_TYPES_FOR_LINE;
      }
+      if (this.isAnInstagramChannel || this.isInstagramDM) {
+        return ALLOWED_FILE_TYPES_FOR_INSTAGRAM;
+      }
+
      return ALLOWED_FILE_TYPES;
    },
    enableDragAndDrop() {
@@ -38,6 +38,7 @@ import { REPLY_POLICY } from 'shared/constants/links';
 import wootConstants from 'dashboard/constants/globals';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { FEATURE_FLAGS } from '../../../featureFlags';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';

 import NextButton from 'dashboard/components-next/button/Button.vue';

@@ -203,6 +204,22 @@ export default {
      return contactLastSeenAt;
    },

+    // Check there is a instagram inbox exists with the same instagram_id
+    hasDuplicateInstagramInbox() {
+      const instagramId = this.inbox.instagram_id;
+      const { additional_attributes: additionalAttributes = {} } = this.inbox;
+      const instagramInbox =
+        this.$store.getters['inboxes/getInstagramInboxByInstagramId'](
+          instagramId
+        );
+
+      return (
+        this.inbox.channel_type === INBOX_TYPES.FB &&
+        additionalAttributes.type === 'instagram_direct_message' &&
+        instagramInbox
+      );
+    },
+
    replyWindowBannerMessage() {
      if (this.isAWhatsAppChannel) {
        return this.$t('CONVERSATION.TWILIO_WHATSAPP_CAN_REPLY');
@@ -212,24 +229,37 @@ export default {
        if (additionalAttributes) {
          const {
            agent_reply_time_window_message: agentReplyTimeWindowMessage,
+            agent_reply_time_window: agentReplyTimeWindow,
          } = additionalAttributes;
-          return agentReplyTimeWindowMessage;
+          return (
+            agentReplyTimeWindowMessage ||
+            this.$t('CONVERSATION.API_HOURS_WINDOW', {
+              hours: agentReplyTimeWindow,
+            })
+          );
        }
        return '';
      }
      return this.$t('CONVERSATION.CANNOT_REPLY');
    },
    replyWindowLink() {
-      if (this.isAWhatsAppChannel) {
+      if (this.isAFacebookInbox || this.isAnInstagramChannel) {
        return REPLY_POLICY.FACEBOOK;
      }
+      if (this.isAWhatsAppCloudChannel) {
+        return REPLY_POLICY.WHATSAPP_CLOUD;
+      }
      if (!this.isAPIInbox) {
        return REPLY_POLICY.TWILIO_WHATSAPP;
      }
      return '';
    },
    replyWindowLinkText() {
-      if (this.isAWhatsAppChannel) {
+      if (
+        this.isAWhatsAppChannel ||
+        this.isAFacebookInbox ||
+        this.isAnInstagramChannel
+      ) {
        return this.$t('CONVERSATION.24_HOURS_WINDOW');
      }
      if (!this.isAPIInbox) {
@@ -557,11 +587,17 @@ export default {
    <Banner
      v-if="!currentChat.can_reply"
      color-scheme="alert"
-      class="mt-2 mx-2 rounded-lg overflow-hidden"
+      class="mx-2 mt-2 overflow-hidden rounded-lg"
      :banner-message="replyWindowBannerMessage"
      :href-link="replyWindowLink"
      :href-link-text="replyWindowLinkText"
    />
+    <Banner
+      v-else-if="hasDuplicateInstagramInbox"
+      color-scheme="alert"
+      class="mx-2 mt-2 overflow-hidden rounded-lg"
+      :banner-message="$t('CONVERSATION.OLD_INSTAGRAM_INBOX_REPLY_BANNER')"
+    />
    <div class="flex justify-end">
      <NextButton
        faded
@@ -241,15 +241,27 @@ export default {
      if (this.isAFacebookInbox) {
        return MESSAGE_MAX_LENGTH.FACEBOOK;
      }
-      if (this.isAWhatsAppChannel) {
+      if (this.isAnInstagramChannel) {
+        return MESSAGE_MAX_LENGTH.INSTAGRAM;
+      }
+      if (this.isATwilioWhatsAppChannel) {
        return MESSAGE_MAX_LENGTH.TWILIO_WHATSAPP;
      }
+      if (this.isAWhatsAppCloudChannel) {
+        return MESSAGE_MAX_LENGTH.WHATSAPP_CLOUD;
+      }
      if (this.isASmsInbox) {
        return MESSAGE_MAX_LENGTH.TWILIO_SMS;
      }
      if (this.isAnEmailChannel) {
        return MESSAGE_MAX_LENGTH.EMAIL;
      }
+      if (this.isATwilioSMSChannel) {
+        return MESSAGE_MAX_LENGTH.TWILIO_SMS;
+      }
+      if (this.isAWhatsAppChannel) {
+        return MESSAGE_MAX_LENGTH.WHATSAPP_CLOUD;
+      }
      return MESSAGE_MAX_LENGTH.GENERAL;
    },
    showFileUpload() {
@@ -261,7 +273,8 @@ export default {
        this.isAnEmailChannel ||
        this.isASmsInbox ||
        this.isATelegramChannel ||
-        this.isALineChannel
+        this.isALineChannel ||
+        this.isAnInstagramChannel
      );
    },
    replyButtonLabel() {
@@ -387,9 +400,14 @@ export default {
    },
  },
  watch: {
-    currentChat(conversation) {
+    currentChat(conversation, oldConversation) {
      const { can_reply: canReply } = conversation;
-      this.setCCAndToEmailsFromLastChat();
+      if (oldConversation && oldConversation.id !== conversation.id) {
+        // Only update email fields when switching to a completely different conversation (by ID)
+        // This prevents overwriting user input (e.g., CC/BCC fields) when performing actions
+        // like self-assign or other updates that do not actually change the conversation context
+        this.setCCAndToEmailsFromLastChat();
+      }

      if (this.isOnPrivateNote) {
        return;
@@ -405,13 +423,12 @@ export default {
    },
    // When moving from one conversation to another, the store may not have the
    // list of all the messages. A fetch is subsequently made to get the messages.
-    // However, this update does not trigger the `currentChat` watcher.
-    // We can add a deep watcher to it, but then, that would be too broad of a net to cast
-    // And would impact performance too. So we watch the messages directly.
-    // The watcher here is `deep` too, because the messages array is mutated and
-    // not replaced. So, a shallow watcher would not catch the change.
-    'currentChat.messages': {
-      handler() {
+    // This watcher handles two main cases:
+    // 1. When switching conversations and messages are fetched/updated, ensures CC/BCC fields are set from the latest OUTGOING/INCOMING email (not activity/private messages).
+    // 2. Fixes and issue where CC/BCC fields could be reset/lost after assignment/activity actions or message mutations that did not represent a true email context change.
+    lastEmail: {
+      handler(lastEmail) {
+        if (!lastEmail) return;
        this.setCCAndToEmailsFromLastChat();
      },
      deep: true,
@@ -685,7 +702,11 @@ export default {
          this.isATwilioWhatsAppChannel ||
          this.isAWhatsAppCloudChannel ||
          this.is360DialogWhatsAppChannel;
-        if (isOnWhatsApp && !this.isPrivate) {
+        // When users send messages containing both text and attachments on Instagram, Instagram treats them as separate messages.
+        // Although Chatwoot combines these into a single message, Instagram sends separate echo events for each component.
+        // This can create duplicate messages in Chatwoot. To prevent this issue, we'll handle text and attachments as separate messages.
+        const isOnInstagram = this.isAnInstagramChannel;
+        if ((isOnWhatsApp || isOnInstagram) && !this.isPrivate) {
          this.sendMessageAsMultipleMessages(this.message);
        } else {
          const messagePayload = this.getMessagePayload(this.message);
@@ -702,7 +723,7 @@ export default {
      }
    },
    sendMessageAsMultipleMessages(message) {
-      const messages = this.getMessagePayloadForWhatsapp(message);
+      const messages = this.getMultipleMessagesPayload(message);
      messages.forEach(messagePayload => {
        this.sendMessage(messagePayload);
      });
@@ -934,11 +955,11 @@ export default {

      return payload;
    },
-    getMessagePayloadForWhatsapp(message) {
+    getMultipleMessagesPayload(message) {
      const multipleMessagePayload = [];

      if (this.attachedFiles && this.attachedFiles.length) {
-        let caption = message;
+        let caption = this.isAnInstagramChannel ? '' : message;
        this.attachedFiles.forEach(attachment => {
          const attachedFile = this.globalConfig.directUploadsEnabled
            ? attachment.blobSignedId
@@ -953,9 +974,19 @@ export default {

          attachmentPayload = this.setReplyToInPayload(attachmentPayload);
          multipleMessagePayload.push(attachmentPayload);
-          caption = '';
+          // For WhatsApp, only the first attachment gets a caption
+          if (!this.isAnInstagramChannel) caption = '';
        });
-      } else {
+      }
+
+      const hasNoAttachments =
+        !this.attachedFiles || !this.attachedFiles.length;
+      // For Instagram, we need a separate text message
+      // For WhatsApp, we only need a text message if there are no attachments
+      if (
+        (this.isAnInstagramChannel && this.message) ||
+        (!this.isAnInstagramChannel && hasNoAttachments)
+      ) {
        let messagePayload = {
          conversationId: this.currentChat.id,
          message,
@@ -1076,7 +1107,7 @@ export default {
    v-if="showSelfAssignBanner"
    action-button-variant="ghost"
    color-scheme="secondary"
-    class="banner--self-assign mx-2 mb-2 rounded-lg"
+    class="mx-2 mb-2 rounded-lg banner--self-assign"
    :banner-message="$t('CONVERSATION.NOT_ASSIGNED_TO_YOU')"
    has-action-button
    :action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
@@ -1135,7 +1166,7 @@ export default {
        v-else-if="!showRichContentEditor"
        ref="messageInput"
        v-model="message"
-        class="input"
+        class="rounded-none input"
        :placeholder="messagePlaceHolder"
        :min-height="4"
        :signature="signatureToApply"
@@ -1195,6 +1226,7 @@ export default {
      :mode="replyType"
      :on-file-upload="onFileUpload"
      :on-send="onSendReply"
+      :conversation-type="conversationType"
      :recording-audio-duration-text="recordingAudioDurationText"
      :recording-audio-state="recordingAudioState"
      :send-button-text="replyButtonLabel"
@@ -69,10 +69,6 @@ const onAgentSelect = index => {
      v-if="items.length"
      ref="tagAgentsRef"
      class="vertical dropdown menu mention--box bg-n-solid-1 p-1 rounded-xl text-sm overflow-auto absolute w-full z-20 shadow-md left-0 leading-[1.2] bottom-full max-h-[12.5rem] border border-solid border-n-strong"
-      :class="{
-        'border-b-[0.5rem] border-solid border-white dark:!border-slate-700':
-          items.length <= 4,
-      }"
    >
      <li
        v-for="(agent, index) in items"
@@ -56,7 +56,7 @@ const unlinkIssue = () => {

 <template>
  <div
-    class="absolute flex flex-col items-start bg-white dark:bg-slate-800 z-50 px-4 py-3 border border-solid border-ash-200 w-[384px] rounded-xl gap-4 max-h-96 overflow-auto"
+    class="absolute flex flex-col items-start bg-n-alpha-3 backdrop-blur-[100px] z-50 px-4 py-3 border border-solid border-n-container w-[384px] rounded-xl gap-4 max-h-96 overflow-auto"
  >
    <div class="flex flex-col w-full">
      <IssueHeader
@@ -66,37 +66,37 @@ const unlinkIssue = () => {
        @unlink-issue="unlinkIssue"
      />

-      <span class="mt-2 text-sm font-medium text-ash-900">
+      <span class="mt-2 text-sm font-medium text-n-slate-12">
        {{ issue.title }}
      </span>
      <span
        v-if="issue.description"
-        class="mt-1 text-sm text-ash-800 line-clamp-3"
+        class="mt-1 text-sm text-n-slate-11 line-clamp-3"
      >
        {{ issue.description }}
      </span>
    </div>
    <div class="flex flex-row items-center h-6 gap-2">
      <UserAvatarWithName v-if="assignee" :user="assignee" class="py-1" />
-      <div v-if="assignee" class="w-px h-3 bg-ash-200" />
+      <div v-if="assignee" class="w-px h-3 bg-n-slate-4" />
      <div class="flex items-center gap-1 py-1">
        <fluent-icon
          icon="status"
          size="14"
          :style="{ color: issue.state.color }"
        />
-        <h6 class="text-xs text-ash-900">
+        <h6 class="text-xs text-n-slate-12">
          {{ issue.state.name }}
        </h6>
      </div>
-      <div v-if="priorityLabel" class="w-px h-3 bg-ash-200" />
+      <div v-if="priorityLabel" class="w-px h-3 bg-n-slate-4" />
      <div v-if="priorityLabel" class="flex items-center gap-1 py-1">
        <fluent-icon
          :icon="`priority-${priorityLabel.toLowerCase()}`"
          size="14"
          view-box="0 0 12 12"
        />
-        <h6 class="text-xs text-ash-900">{{ priorityLabel }}</h6>
+        <h6 class="text-xs text-n-slate-12">{{ priorityLabel }}</h6>
      </div>
    </div>
    <div v-if="labels.length" class="flex flex-wrap items-center gap-1">
@@ -111,7 +111,7 @@ const unlinkIssue = () => {
      />
    </div>
    <div class="flex items-center">
-      <span class="text-xs text-ash-800">
+      <span class="text-xs text-n-slate-11">
        {{
          $t('INTEGRATION_SETTINGS.LINEAR.ISSUE.CREATED_AT', {
            createdAt: formattedDate,
@@ -100,14 +100,17 @@ onMounted(() => {
 </script>

 <template>
-  <div class="relative" :class="{ group: linkedIssue }">
+  <div
+    class="relative after:content-[''] after:h-5 after:bg-transparent after:top-5 after:w-full after:block after:absolute after:z-0"
+    :class="{ group: linkedIssue }"
+  >
    <Button
      v-on-clickaway="closeIssue"
      v-tooltip="tooltipText"
      sm
      ghost
      slate
-      class="!gap-1"
+      class="!gap-1 group-hover:bg-n-alpha-2"
      @click="openIssue"
    >
      <fluent-icon
@@ -124,7 +127,7 @@ onMounted(() => {
      v-if="linkedIssue"
      :issue="linkedIssue.issue"
      :link-id="linkedIssue.id"
-      class="absolute right-0 top-[40px] invisible group-hover:visible"
+      class="absolute right-0 top-[36px] invisible group-hover:visible"
      @unlink-issue="unlinkIssue"
    />
    <woot-modal