Merge branch 'feat/whatsapp-call-meta-bridge' into feat/whatsapp-call-ui

# Conflicts: # app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
2026-05-07 15:41:24 +07:00
parent 96b11e31a1 02ac8f008f
commit ad48473ced
98 changed files with 4524 additions and 468 deletions
@@ -1,5 +1,7 @@
 <script setup>
+import { useI18n } from 'vue-i18n';
 import Icon from 'next/icon/Icon.vue';
+import Label from 'dashboard/components-next/label/Label.vue';

 defineProps({
  title: {
@@ -18,7 +20,13 @@ defineProps({
    type: Boolean,
    default: false,
  },
+  isBeta: {
+    type: Boolean,
+    default: false,
+  },
 });
+
+const { t } = useI18n();
 </script>

 <template>
@@ -37,9 +45,18 @@ defineProps({
    </div>

    <div class="flex flex-col items-start gap-1.5">
-      <h3 class="text-n-slate-12 text-sm text-start font-medium capitalize">
-        {{ title }}
-      </h3>
+      <div class="flex items-center gap-2">
+        <h3 class="text-n-slate-12 text-sm text-start font-medium capitalize">
+          {{ title }}
+        </h3>
+        <Label
+          v-if="isBeta && !isComingSoon"
+          v-tooltip.top="t('GENERAL.BETA_DESCRIPTION')"
+          :label="t('GENERAL.BETA')"
+          color="blue"
+          compact
+        />
+      </div>
      <p class="text-n-slate-11 text-start text-sm">
        {{ description }}
      </p>
@@ -50,7 +67,7 @@ defineProps({
      class="absolute inset-0 flex items-center justify-center backdrop-blur-[2px] rounded-2xl bg-gradient-to-br from-n-surface-1/90 via-n-surface-1/70 to-n-surface-1/95 cursor-not-allowed"
    >
      <span class="text-n-slate-12 font-medium text-sm">
-        {{ $t('CHANNEL_SELECTOR.COMING_SOON') }} 🚀
+        {{ t('CHANNEL_SELECTOR.COMING_SOON') }} 🚀
      </span>
    </div>
  </button>
@@ -77,6 +77,10 @@ const isComingSoon = computed(() => {
  return ['voice'].includes(key) && !isActive.value;
 });

+const isBeta = computed(() => {
+  return ['tiktok', 'voice'].includes(props.channel.key);
+});
+
 const onItemClick = () => {
  if (isActive.value) {
    emit('channelItemClick', props.channel.key);
@@ -90,6 +94,7 @@ const onItemClick = () => {
    :description="channel.description"
    :icon="channel.icon"
    :is-coming-soon="isComingSoon"
+    :is-beta="isBeta"
    :disabled="!isActive"
    @click="onItemClick"
  />
@@ -21,6 +21,7 @@ import { useWhatsappCallSession } from 'dashboard/composables/useWhatsappCallSes
 import { useCallsStore } from 'dashboard/stores/calls';
 import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
+import { copyTextToClipboard } from 'shared/helpers/clipboard';

 const props = defineProps({
  chat: {
@@ -149,6 +150,15 @@ const startWhatsappCall = async () => {
    useAlert(error?.message || t('CONVERSATION.HEADER.WHATSAPP_CALL_FAILED'));
  }
 };
+
+const copyConversationId = async () => {
+  try {
+    await copyTextToClipboard(String(props.chat.id));
+    useAlert(t('CONVERSATION.HEADER.COPY_ID_SUCCESS'));
+  } catch (error) {
+    // error
+  }
+};
 </script>

 <template>
@@ -191,9 +201,18 @@ const startWhatsappCall = async () => {
        </div>

        <div
-          class="flex items-center gap-2 overflow-hidden text-xs conversation--header--actions text-ellipsis whitespace-nowrap"
+          class="flex items-center gap-1 overflow-hidden text-xs conversation--header--actions text-n-slate-11 text-ellipsis whitespace-nowrap"
        >
+          <button
+            type="button"
+            class="truncate text-label-small text-n-slate-11 hover:text-n-slate-12 !p-0 cucursor-pointer"
+            @click="copyConversationId"
+          >
+            {{ `#${chat.id}` }}
+          </button>
+          <span v-if="hasMultipleInboxes">•</span>
          <InboxName v-if="hasMultipleInboxes" :inbox="inbox" class="!mx-0" />
+          <span v-if="isSnoozed">•</span>
          <span v-if="isSnoozed" class="font-medium text-n-amber-10">
            {{ snoozedDisplayText }}
          </span>
@@ -273,6 +273,10 @@ export default {
      return MESSAGE_MAX_LENGTH.GENERAL;
    },
    showFileUpload() {
+      const { image_send: imageSend } =
+        this.currentChat?.additional_attributes?.tiktok_capabilities ?? {};
+      const tiktokAttachmentSupported = imageSend ?? true;
+
      return (
        this.isAWebWidgetInbox ||
        this.isAFacebookInbox ||
@@ -283,7 +287,7 @@ export default {
        this.isATelegramChannel ||
        this.isALineChannel ||
        this.isAnInstagramChannel ||
-        this.isATiktokChannel
+        (this.isATiktokChannel && tiktokAttachmentSupported)
      );
    },
    replyButtonLabel() {
@@ -706,6 +710,7 @@ export default {

      // Don't handle paste if editor is disabled
      if (this.isEditorDisabled) return;
+      if (!this.showFileUpload && !this.isOnPrivateNote) return;

      // Filter valid files (non-zero size)
      Array.from(e.clipboardData.files)
@@ -1025,6 +1030,8 @@ export default {
      });
    },
    attachFile({ blob, file }) {
+      if (!this.showFileUpload && !this.isOnPrivateNote) return;
+
      const reader = new FileReader();
      reader.readAsDataURL(file.file);
      reader.onloadend = () => {
@@ -22,6 +22,10 @@ const props = defineProps({
    type: Array,
    required: true,
  },
+  autoPlay: {
+    type: Boolean,
+    default: false,
+  },
 });

 const emit = defineEmits(['close']);
@@ -309,6 +313,7 @@ onMounted(() => {
              :src="activeAttachment.data_url"
              controls
              playsInline
+              :autoplay="autoPlay"
              class="max-h-full max-w-full object-contain"
              @click.stop
            />
@@ -317,6 +322,7 @@ onMounted(() => {
              v-if="isAudio"
              :key="activeAttachment.message_id"
              controls
+              :autoplay="autoPlay"
              class="w-full max-w-md"
              @click.stop
            >