Merge branch 'develop' into feat/ui-lib

2025-12-22 18:17:12 +05:30
parent 73bd05a941 20d97be4c9
commit ae9b2daf84
760 changed files with 20682 additions and 3887 deletions
@@ -23,6 +23,10 @@ const hasInstagramConfigured = computed(() => {
  return window.chatwootConfig?.instagramAppId;
 });

+const hasTiktokConfigured = computed(() => {
+  return window.chatwootConfig?.tiktokAppId;
+});
+
 const isActive = computed(() => {
  const { key } = props.channel;
  if (Object.keys(props.enabledFeatures).length === 0) {
@@ -44,6 +48,10 @@ const isActive = computed(() => {
    );
  }

+  if (key === 'tiktok') {
+    return props.enabledFeatures.channel_tiktok && hasTiktokConfigured.value;
+  }
+
  if (key === 'voice') {
    return props.enabledFeatures.channel_voice;
  }
@@ -57,6 +65,7 @@ const isActive = computed(() => {
    'telegram',
    'line',
    'instagram',
+    'tiktok',
    'voice',
  ].includes(key);
 });
@@ -0,0 +1,184 @@
+<script setup>
+import { watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+import { useCallSession } from 'dashboard/composables/useCallSession';
+import WindowVisibilityHelper from 'dashboard/helper/AudioAlerts/WindowVisibilityHelper';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+
+const router = useRouter();
+const store = useStore();
+
+const {
+  activeCall,
+  incomingCalls,
+  hasActiveCall,
+  isJoining,
+  joinCall,
+  endCall: endCallSession,
+  rejectIncomingCall,
+  dismissCall,
+  formattedCallDuration,
+} = useCallSession();
+
+const getCallInfo = call => {
+  const conversation = store.getters.getConversationById(call?.conversationId);
+  const inbox = store.getters['inboxes/getInbox'](conversation?.inbox_id);
+  const sender = conversation?.meta?.sender;
+  return {
+    conversation,
+    inbox,
+    contactName: sender?.name || sender?.phone_number || 'Unknown caller',
+    inboxName: inbox?.name || 'Customer support',
+    avatar: sender?.avatar || sender?.thumbnail,
+  };
+};
+
+const handleEndCall = async () => {
+  const call = activeCall.value;
+  if (!call) return;
+
+  const inboxId = call.inboxId || getCallInfo(call).conversation?.inbox_id;
+  if (!inboxId) return;
+
+  await endCallSession({
+    conversationId: call.conversationId,
+    inboxId,
+  });
+};
+
+const handleJoinCall = async call => {
+  const { conversation } = getCallInfo(call);
+  if (!call || !conversation || isJoining.value) return;
+
+  // End current active call before joining new one
+  if (hasActiveCall.value) {
+    await handleEndCall();
+  }
+
+  const result = await joinCall({
+    conversationId: call.conversationId,
+    inboxId: conversation.inbox_id,
+    callSid: call.callSid,
+  });
+
+  if (result) {
+    router.push({
+      name: 'inbox_conversation',
+      params: { conversation_id: call.conversationId },
+    });
+  }
+};
+
+// Auto-join outbound calls when window is visible
+watch(
+  () => incomingCalls.value[0],
+  call => {
+    if (
+      call?.callDirection === 'outbound' &&
+      !hasActiveCall.value &&
+      WindowVisibilityHelper.isWindowVisible()
+    ) {
+      handleJoinCall(call);
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <div
+    v-if="incomingCalls.length || hasActiveCall"
+    class="fixed ltr:right-4 rtl:left-4 bottom-4 z-50 flex flex-col gap-2 w-72"
+  >
+    <!-- Incoming Calls (shown above active call) -->
+    <div
+      v-for="call in hasActiveCall ? incomingCalls : []"
+      :key="call.callSid"
+      class="flex items-center gap-3 p-4 bg-n-solid-2 rounded-xl shadow-xl outline outline-1 outline-n-strong"
+    >
+      <div class="animate-pulse ring-2 ring-n-teal-9 rounded-full inline-flex">
+        <Avatar
+          :src="getCallInfo(call).avatar"
+          :name="getCallInfo(call).contactName"
+          :size="40"
+          rounded-full
+        />
+      </div>
+      <div class="flex-1 min-w-0">
+        <p class="text-sm font-medium text-n-slate-12 truncate mb-0">
+          {{ getCallInfo(call).contactName }}
+        </p>
+        <p class="text-xs text-n-slate-11 truncate">
+          {{ getCallInfo(call).inboxName }}
+        </p>
+      </div>
+      <div class="flex shrink-0 gap-2">
+        <button
+          class="flex justify-center items-center w-10 h-10 bg-n-ruby-9 hover:bg-n-ruby-10 rounded-full transition-colors"
+          @click="dismissCall(call.callSid)"
+        >
+          <i class="text-lg text-white i-ph-phone-x-bold" />
+        </button>
+        <button
+          class="flex justify-center items-center w-10 h-10 bg-n-teal-9 hover:bg-n-teal-10 rounded-full transition-colors"
+          @click="handleJoinCall(call)"
+        >
+          <i class="text-lg text-white i-ph-phone-bold" />
+        </button>
+      </div>
+    </div>
+
+    <!-- Main Call Widget -->
+    <div
+      v-if="hasActiveCall || incomingCalls.length"
+      class="flex items-center gap-3 p-4 bg-n-solid-2 rounded-xl shadow-xl outline outline-1 outline-n-strong"
+    >
+      <div
+        class="ring-2 ring-n-teal-9 rounded-full inline-flex"
+        :class="{ 'animate-pulse': !hasActiveCall }"
+      >
+        <Avatar
+          :src="getCallInfo(activeCall || incomingCalls[0]).avatar"
+          :name="getCallInfo(activeCall || incomingCalls[0]).contactName"
+          :size="40"
+          rounded-full
+        />
+      </div>
+      <div class="flex-1 min-w-0">
+        <p class="text-sm font-medium text-n-slate-12 truncate mb-0">
+          {{ getCallInfo(activeCall || incomingCalls[0]).contactName }}
+        </p>
+        <p v-if="hasActiveCall" class="font-mono text-sm text-n-teal-9">
+          {{ formattedCallDuration }}
+        </p>
+        <p v-else class="text-xs text-n-slate-11">
+          {{
+            incomingCalls[0]?.callDirection === 'outbound'
+              ? $t('CONVERSATION.VOICE_WIDGET.OUTGOING_CALL')
+              : $t('CONVERSATION.VOICE_WIDGET.INCOMING_CALL')
+          }}
+        </p>
+      </div>
+      <div class="flex shrink-0 gap-2">
+        <button
+          class="flex justify-center items-center w-10 h-10 bg-n-ruby-9 hover:bg-n-ruby-10 rounded-full transition-colors"
+          @click="
+            hasActiveCall
+              ? handleEndCall()
+              : rejectIncomingCall(incomingCalls[0]?.callSid)
+          "
+        >
+          <i class="text-lg text-white i-ph-phone-x-bold" />
+        </button>
+        <button
+          v-if="!hasActiveCall"
+          class="flex justify-center items-center w-10 h-10 bg-n-teal-9 hover:bg-n-teal-10 rounded-full transition-colors"
+          @click="handleJoinCall(incomingCalls[0])"
+        >
+          <i class="text-lg text-white i-ph-phone-bold" />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
@@ -54,6 +54,7 @@ import {
  getFormattingForEditor,
  getSelectionCoords,
  calculateMenuPosition,
+  getEffectiveChannelType,
 } from 'dashboard/helper/editorHelper';
 import {
  hasPressedEnterAndNotCmdOrShift,
@@ -81,6 +82,7 @@ const props = defineProps({
  // are triggered except when this flag is true
  allowSignature: { type: Boolean, default: false },
  channelType: { type: String, default: '' },
+  medium: { type: String, default: '' },
  showImageResizeToolbar: { type: Boolean, default: false }, // A kill switch to show or hide the image toolbar
  focusOnMount: { type: Boolean, default: true },
 });
@@ -105,10 +107,16 @@ const TYPING_INDICATOR_IDLE_TIME = 4000;
 const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
 const DEFAULT_FORMATTING = 'Context::Default';

+const effectiveChannelType = computed(() =>
+  getEffectiveChannelType(props.channelType, props.medium)
+);
+
 const editorSchema = computed(() => {
  if (!props.channelType) return messageSchema;

-  const formatType = props.isPrivate ? DEFAULT_FORMATTING : props.channelType;
+  const formatType = props.isPrivate
+    ? DEFAULT_FORMATTING
+    : effectiveChannelType.value;
  const formatting = getFormattingForEditor(formatType);
  return buildMessageSchema(formatting.marks, formatting.nodes);
 });
@@ -116,7 +124,7 @@ const editorSchema = computed(() => {
 const editorMenuOptions = computed(() => {
  const formatType = props.isPrivate
    ? DEFAULT_FORMATTING
-    : props.channelType || DEFAULT_FORMATTING;
+    : effectiveChannelType.value || DEFAULT_FORMATTING;
  const formatting = getFormattingForEditor(formatType);
  return formatting.menu;
 });
@@ -301,8 +309,13 @@ function isBodyEmpty(content) {

  // if the signature is present, we need to remove it before checking
  // note that we don't update the editorView, so this is safe
+  // Use effective channel type to match how signature was appended
  const bodyWithoutSignature = props.signature
-    ? removeSignatureHelper(content, props.signature)
+    ? removeSignatureHelper(
+        content,
+        props.signature,
+        effectiveChannelType.value
+      )
    : content;

  // trimming should remove all the whitespaces, so we can check the length
@@ -370,7 +383,11 @@ function addSignature() {
  // see if the content is empty, if it is before appending the signature
  // we need to add a paragraph node and move the cursor at the start of the editor
  const contentWasEmpty = isBodyEmpty(content);
-  content = appendSignature(content, props.signature, props.channelType);
+  content = appendSignature(
+    content,
+    props.signature,
+    effectiveChannelType.value
+  );
  // need to reload first, ensuring that the editorView is updated
  reloadState(content);

@@ -382,7 +399,11 @@ function addSignature() {
 function removeSignature() {
  if (!props.signature) return;
  let content = props.modelValue;
-  content = removeSignatureHelper(content, props.signature);
+  content = removeSignatureHelper(
+    content,
+    props.signature,
+    effectiveChannelType.value
+  );
  // reload the state, ensuring that the editorView is updated
  reloadState(content);
 }
@@ -205,6 +205,9 @@ export default {
      if (this.isAWhatsAppCloudChannel) {
        return REPLY_POLICY.WHATSAPP_CLOUD;
      }
+      if (this.isATiktokChannel) {
+        return REPLY_POLICY.TIKTOK;
+      }
      if (!this.isAPIInbox) {
        return REPLY_POLICY.TWILIO_WHATSAPP;
      }
@@ -218,6 +221,9 @@ export default {
      ) {
        return this.$t('CONVERSATION.24_HOURS_WINDOW');
      }
+      if (this.isATiktokChannel) {
+        return this.$t('CONVERSATION.48_HOURS_WINDOW');
+      }
      if (!this.isAPIInbox) {
        return this.$t('CONVERSATION.TWILIO_WHATSAPP_24_HOURS_WINDOW');
      }
@@ -7,7 +7,9 @@ import { useTrack } from 'dashboard/composables';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';

+import CannedResponse from './CannedResponse.vue';
 import ReplyToMessage from './ReplyToMessage.vue';
+import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
 import AttachmentPreview from 'dashboard/components/widgets/AttachmentsPreview.vue';
 import ReplyTopPanel from 'dashboard/components/widgets/WootWriter/ReplyTopPanel.vue';
 import ReplyEmailHead from './ReplyEmailHead.vue';
@@ -43,6 +45,8 @@ import fileUploadMixin from 'dashboard/mixins/fileUploadMixin';
 import {
  appendSignature,
  removeSignature,
+  getEffectiveChannelType,
+  extractTextFromMarkdown,
 } from 'dashboard/helper/editorHelper';

 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
@@ -68,6 +72,8 @@ export default {
    WhatsappTemplates,
    WootMessageEditor,
    QuotedEmailPreview,
+    ResizableTextArea,
+    CannedResponse,
  },
  mixins: [inboxMixin, fileUploadMixin, keyboardEventListenerMixins],
  props: {
@@ -108,6 +114,8 @@ export default {
      recordingAudioState: '',
      recordingAudioDurationText: '',
      replyType: REPLY_EDITOR_MODES.REPLY,
+      mentionSearchKey: '',
+      hasSlashCommand: false,
      bccEmails: '',
      ccEmails: '',
      toEmails: '',
@@ -136,9 +144,12 @@ export default {
      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
    }),
    currentContact() {
-      return this.$store.getters['contacts/getContact'](
-        this.currentChat.meta.sender.id
-      );
+      const senderId = this.currentChat?.meta?.sender?.id;
+      if (!senderId) return {};
+      return this.$store.getters['contacts/getContact'](senderId);
+    },
+    isRichEditorEnabled() {
+      return this.isAWebWidgetInbox || this.isAnEmailChannel || this.isAPIInbox;
    },
    shouldShowReplyToMessage() {
      return (
@@ -223,6 +234,9 @@ export default {
      if (this.isAnInstagramChannel) {
        return MESSAGE_MAX_LENGTH.INSTAGRAM;
      }
+      if (this.isATiktokChannel) {
+        return MESSAGE_MAX_LENGTH.TIKTOK;
+      }
      if (this.isATwilioWhatsAppChannel) {
        return MESSAGE_MAX_LENGTH.TWILIO_WHATSAPP;
      }
@@ -395,6 +409,19 @@ export default {
        !!this.quotedEmailText
      );
    },
+    showRichContentEditor() {
+      if (this.isOnPrivateNote || this.isRichEditorEnabled) {
+        return true;
+      }
+
+      return false;
+    },
+    // ensure that the signature is plain text depending on `showRichContentEditor`
+    signatureToApply() {
+      return this.showRichContentEditor
+        ? this.messageSignature
+        : extractTextFromMarkdown(this.messageSignature);
+    },
  },
  watch: {
    currentChat(conversation, oldConversation) {
@@ -437,7 +464,25 @@ export default {
        this.resetRecorderAndClearAttachments();
      }
    },
-    message() {
+    message(updatedMessage) {
+      // Check if the message starts with a slash.
+      const bodyWithoutSignature = removeSignature(
+        updatedMessage,
+        this.signatureToApply
+      );
+      const startsWithSlash = bodyWithoutSignature.startsWith('/');
+
+      // Determine if the user is potentially typing a slash command.
+      // This is true if the message starts with a slash and the rich content editor is not active.
+      this.hasSlashCommand = startsWithSlash && !this.showRichContentEditor;
+      this.showMentions = this.hasSlashCommand;
+
+      // If a slash command is active, extract the command text after the slash.
+      // If not, reset the mentionSearchKey.
+      this.mentionSearchKey = this.hasSlashCommand
+        ? bodyWithoutSignature.substring(1)
+        : '';
+
      // Autosave the current message draft.
      this.doAutoSaveDraft();
    },
@@ -487,14 +532,20 @@ export default {
  methods: {
    handleInsert(article) {
      const { url, title } = article;
-      // Removing empty lines from the title
-      const lines = title.split('\n');
-      const nonEmptyLines = lines.filter(line => line.trim() !== '');
-      const filteredMarkdown = nonEmptyLines.join(' ');
-      emitter.emit(
-        BUS_EVENTS.INSERT_INTO_RICH_EDITOR,
-        `[${filteredMarkdown}](${url})`
-      );
+      if (this.isRichEditorEnabled) {
+        // Removing empty lines from the title
+        const lines = title.split('\n');
+        const nonEmptyLines = lines.filter(line => line.trim() !== '');
+        const filteredMarkdown = nonEmptyLines.join(' ');
+        emitter.emit(
+          BUS_EVENTS.INSERT_INTO_RICH_EDITOR,
+          `[${filteredMarkdown}](${url})`
+        );
+      } else {
+        this.addIntoEditor(
+          `${this.$t('CONVERSATION.REPLYBOX.INSERT_READ_MORE')} ${url}`
+        );
+      }

      useTrack(CONVERSATION_EVENTS.INSERT_ARTICLE_LINK);
    },
@@ -563,10 +614,26 @@ export default {
      if (this.isPrivate) {
        return message;
      }
-
+      if (this.showRichContentEditor) {
+        const effectiveChannelType = getEffectiveChannelType(
+          this.channelType,
+          this.inbox?.medium || ''
+        );
+        return this.sendWithSignature
+          ? appendSignature(
+              message,
+              this.messageSignature,
+              effectiveChannelType
+            )
+          : removeSignature(
+              message,
+              this.messageSignature,
+              effectiveChannelType
+            );
+      }
      return this.sendWithSignature
-        ? appendSignature(message, this.messageSignature, this.channelType)
-        : removeSignature(message, this.messageSignature);
+        ? appendSignature(message, this.signatureToApply)
+        : removeSignature(message, this.signatureToApply);
    },
    removeFromDraft() {
      if (this.conversationIdByRoute) {
@@ -582,6 +649,7 @@ export default {
        Escape: {
          action: () => {
            this.hideEmojiPicker();
+            this.hideMentions();
          },
          allowOnFocusedInput: true,
        },
@@ -623,7 +691,14 @@ export default {
      );
    },
    onPaste(e) {
+      // Don't handle paste if compose new conversation modal is open
+      if (this.newConversationModalActive) {
+        return;
+      }
      const data = e.clipboardData.files;
+      if (!this.showRichContentEditor && data.length !== 0) {
+        this.$refs.messageInput?.$el?.blur();
+      }
      if (!data.length || !data[0]) {
        return;
      }
@@ -757,11 +832,19 @@ export default {
        // if signature is enabled, append it to the message
        // appendSignature ensures that the signature is not duplicated
        // so we don't need to check if the signature is already present
-        message = appendSignature(
-          message,
-          this.messageSignature,
-          this.channelType
-        );
+        if (this.showRichContentEditor) {
+          const effectiveChannelType = getEffectiveChannelType(
+            this.channelType,
+            this.inbox?.medium || ''
+          );
+          message = appendSignature(
+            message,
+            this.messageSignature,
+            effectiveChannelType
+          );
+        } else {
+          message = appendSignature(message, this.signatureToApply);
+        }
      }

      const updatedMessage = replaceVariablesInMessage({
@@ -785,26 +868,52 @@ export default {
      });
      if (canReply || this.isAWhatsAppChannel || this.isAPIInbox)
        this.replyType = mode;
-      if (this.isRecordingAudio) {
-        this.toggleAudioRecorder();
+      if (this.showRichContentEditor) {
+        if (this.isRecordingAudio) {
+          this.toggleAudioRecorder();
+        }
+        return;
      }
+      this.$nextTick(() => this.$refs.messageInput.focus());
    },
    clearEditorSelection() {
      this.updateEditorSelectionWith = '';
    },
+    insertIntoTextEditor(text, selectionStart, selectionEnd) {
+      const { message } = this;
+      const newMessage =
+        message.slice(0, selectionStart) +
+        text +
+        message.slice(selectionEnd, message.length);
+      this.message = newMessage;
+    },
    addIntoEditor(content) {
-      this.updateEditorSelectionWith = content;
-      this.onFocus();
+      if (this.showRichContentEditor) {
+        this.updateEditorSelectionWith = content;
+        this.onFocus();
+      }
+      if (!this.showRichContentEditor) {
+        const { selectionStart, selectionEnd } = this.$refs.messageInput.$el;
+        this.insertIntoTextEditor(content, selectionStart, selectionEnd);
+      }
    },
    clearMessage() {
      this.message = '';
      if (this.sendWithSignature && !this.isPrivate) {
        // if signature is enabled, append it to the message
-        this.message = appendSignature(
-          this.message,
-          this.messageSignature,
-          this.channelType
-        );
+        if (this.showRichContentEditor) {
+          const effectiveChannelType = getEffectiveChannelType(
+            this.channelType,
+            this.inbox?.medium || ''
+          );
+          this.message = appendSignature(
+            this.message,
+            this.messageSignature,
+            effectiveChannelType
+          );
+        } else {
+          this.message = appendSignature(this.message, this.signatureToApply);
+        }
      }
      this.attachedFiles = [];
      this.isRecordingAudio = false;
@@ -839,6 +948,9 @@ export default {
        this.toggleEmojiPicker();
      }
    },
+    hideMentions() {
+      this.showMentions = false;
+    },
    onTypingOn() {
      this.toggleTyping('on');
    },
@@ -1085,6 +1197,13 @@ export default {
        :message="inReplyTo"
        @dismiss="resetReplyToMessage"
      />
+      <CannedResponse
+        v-if="showMentions && hasSlashCommand"
+        v-on-clickaway="hideMentions"
+        class="normal-editor__canned-box"
+        :search-key="mentionSearchKey"
+        @replace="replaceText"
+      />
      <EmojiInput
        v-if="showEmojiPicker"
        v-on-clickaway="hideEmojiPicker"
@@ -1108,7 +1227,23 @@ export default {
        @play="recordingAudioState = 'playing'"
        @pause="recordingAudioState = 'paused'"
      />
+      <ResizableTextArea
+        v-else-if="!showRichContentEditor"
+        ref="messageInput"
+        v-model="message"
+        class="rounded-none input"
+        :placeholder="messagePlaceHolder"
+        :min-height="4"
+        :signature="signatureToApply"
+        allow-signature
+        :send-with-signature="sendWithSignature"
+        @typing-off="onTypingOff"
+        @typing-on="onTypingOn"
+        @focus="onFocus"
+        @blur="onBlur"
+      />
      <WootMessageEditor
+        v-else
        v-model="message"
        :editor-id="editorStateId"
        class="input popover-prosemirror-menu"
@@ -1121,6 +1256,7 @@ export default {
        :signature="messageSignature"
        allow-signature
        :channel-type="channelType"
+        :medium="inbox.medium"
        @typing-off="onTypingOff"
        @typing-on="onTypingOn"
        @focus="onFocus"
@@ -1239,6 +1375,10 @@ export default {

 .reply-box__top {
  @apply relative py-0 px-4 -mt-px;
+
+  textarea {
+    @apply shadow-none outline-none border-transparent bg-transparent m-0 max-h-60 min-h-[3rem] pt-4 pb-0 px-0 resize-none;
+  }
 }

 .emoji-dialog {
@@ -1258,4 +1398,9 @@ export default {
    @apply ltr:left-1 rtl:right-1 -bottom-2;
  }
 }
+
+.normal-editor__canned-box {
+  width: calc(100% - 2 * 1rem);
+  left: 1rem;
+}
 </style>