Merge branch 'develop' into feat/app-store-reviews

app/javascript/dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue

@@ -49,6 +49,7 @@ const emit = defineEmits(['edit', 'delete']);
 const { t } = useI18n();
 
 const STATUS_COMPLETED = 'completed';
+const STATUS_PROCESSING = 'processing';
 
 const { formatMessage } = useMessageFormatter();
 
@@ -68,9 +69,15 @@ const campaignStatus = computed(() => {
       : t('CAMPAIGN.LIVE_CHAT.CARD.STATUS.DISABLED');
   }
 
-  return props.status === STATUS_COMPLETED
-    ? t('CAMPAIGN.SMS.CARD.STATUS.COMPLETED')
-    : t('CAMPAIGN.SMS.CARD.STATUS.SCHEDULED');
+  if (props.status === STATUS_COMPLETED) {
+    return t('CAMPAIGN.SMS.CARD.STATUS.COMPLETED');
+  }
+
+  if (props.status === STATUS_PROCESSING) {
+    return t('CAMPAIGN.SMS.CARD.STATUS.PROCESSING');
+  }
+
+  return t('CAMPAIGN.SMS.CARD.STATUS.SCHEDULED');
 });
 
 const inboxName = computed(() => props.inbox?.name || '');

app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactMoreActions.vue

@@ -1,34 +1,48 @@
 <script setup>
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import { usePolicy } from 'dashboard/composables/usePolicy';
 
 const emit = defineEmits(['add', 'import', 'export']);
 
 const { t } = useI18n();
+const { checkPermissions } = usePolicy();
 
-const contactMenuItems = [
+const contactMenuItems = computed(() => [
   {
     label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.ADD_CONTACT'),
     action: 'add',
     value: 'add',
     icon: 'i-lucide-plus',
   },
-  {
-    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.EXPORT_CONTACT'),
-    action: 'export',
-    value: 'export',
-    icon: 'i-lucide-upload',
-  },
-  {
-    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.IMPORT_CONTACT'),
-    action: 'import',
-    value: 'import',
-    icon: 'i-lucide-download',
-  },
-];
+  ...(checkPermissions(['administrator', 'contact_manage'])
+    ? [
+        {
+          label: t(
+            'CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.EXPORT_CONTACT'
+          ),
+          action: 'export',
+          value: 'export',
+          icon: 'i-lucide-upload',
+        },
+      ]
+    : []),
+  ...(checkPermissions(['administrator', 'contact_manage'])
+    ? [
+        {
+          label: t(
+            'CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.IMPORT_CONTACT'
+          ),
+          action: 'import',
+          value: 'import',
+          icon: 'i-lucide-download',
+        },
+      ]
+    : []),
+]);
 const showActionsDropdown = ref(false);
 
 const handleContactAction = ({ action }) => {

app/javascript/dashboard/components-next/Contacts/VoiceCallButton.vue

@@ -3,10 +3,20 @@ import { computed, ref, useAttrs } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import { useMapGetter, useStore } from 'dashboard/composables/store';
-import { isVoiceCallEnabled } from 'dashboard/helper/inbox';
+import {
+  isVoiceCallEnabled,
+  getVoiceCallProvider,
+  VOICE_CALL_PROVIDERS,
+} from 'dashboard/helper/inbox';
+import {
+  VOICE_CALL_DIRECTION,
+  VOICE_CALL_OUTBOUND_INIT_STATUS,
+} from 'dashboard/components-next/message/constants';
 import { useAlert } from 'dashboard/composables';
 import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
 import { useCallsStore } from 'dashboard/stores/calls';
+import { useWhatsappCallSession } from 'dashboard/composables/useWhatsappCallSession';
+import ContactAPI from 'dashboard/api/contacts';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
@@ -14,6 +24,9 @@ import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 const props = defineProps({
   phone: { type: String, default: '' },
   contactId: { type: [String, Number], required: true },
+  // When set, the WhatsApp call continues in this conversation (matching the
+  // header button) instead of looking up the contact's most recent one.
+  conversationId: { type: [String, Number], default: null },
   label: { type: String, default: '' },
   icon: { type: [String, Object, Function], default: '' },
   size: { type: String, default: 'sm' },
@@ -30,6 +43,7 @@ const { t } = useI18n();
 
 const dialogRef = ref(null);
 
+const callsStore = useCallsStore();
 const inboxesList = useMapGetter('inboxes/getInboxes');
 const contactsUiFlags = useMapGetter('contacts/getUIFlags');
 
@@ -38,13 +52,22 @@ const voiceInboxes = computed(() =>
 );
 const hasVoiceInboxes = computed(() => voiceInboxes.value.length > 0);
 
-// Unified behavior: hide when no phone
 const shouldRender = computed(() => hasVoiceInboxes.value && !!props.phone);
 
 const isInitiatingCall = computed(() => {
   return contactsUiFlags.value?.isInitiatingCall || false;
 });
 
+// Mirror the conversation-header button: block a new call whenever any provider
+// call is already active or ringing, otherwise starting a WhatsApp call here
+// would leave a still-live Twilio (or other) session with no visible control.
+const isCallButtonDisabled = computed(
+  () =>
+    callsStore.hasActiveCall ||
+    callsStore.hasIncomingCall ||
+    isInitiatingCall.value
+);
+
 const navigateToConversation = conversationId => {
   const accountId = route.params.accountId;
   if (conversationId && accountId) {
@@ -58,23 +81,96 @@ const navigateToConversation = conversationId => {
   }
 };
 
-const startCall = async inboxId => {
-  if (isInitiatingCall.value) return;
+const whatsappCallSession = useWhatsappCallSession();
+
+// Find the most recent open conversation for this contact in the picked inbox.
+// WhatsApp /initiate is conversation-scoped (unlike Twilio's contact-scoped path).
+// Pass inboxId so the BE applies the filter before the 20-row cap — without it,
+// contacts whose latest WhatsApp conversation falls outside the 20 most recent
+// across all inboxes would be treated as having no conversation.
+const findWhatsappConversationId = async inboxId => {
+  const { data } = await ContactAPI.getConversations(props.contactId, {
+    inboxId,
+  });
+  const conversations = data?.payload || [];
+  const match = [...conversations].sort(
+    (a, b) => (b.last_activity_at || 0) - (a.last_activity_at || 0)
+  )[0];
+  return match?.id || null;
+};
+
+const startWhatsappCall = async (inboxId, conversationIdHint) => {
+  // WhatsApp /initiate is conversation-scoped, so we must hand it a
+  // conversation. Use the caller's hint when given (in-conversation flow);
+  // otherwise pick the most recent one in the inbox.
+  const conversationId =
+    conversationIdHint || (await findWhatsappConversationId(inboxId));
+  if (!conversationId) {
+    useAlert(t('CONTACT_PANEL.CALL_FAILED'));
+    return;
+  }
+
+  const response =
+    await whatsappCallSession.initiateOutboundCall(conversationId);
+  // The composable returns { status: 'locked' } when an init is already in
+  // flight or a call is already active; treat that as a soft no-op rather than
+  // claiming success.
+  if (response?.status === VOICE_CALL_OUTBOUND_INIT_STATUS.LOCKED) return;
+  if (!response?.id) {
+    // Permission template path returns no call id. Mirror the header button and
+    // surface whether the request was just sent or is already pending instead of
+    // claiming the call started. The permission message lands in the
+    // conversation, so still navigate there.
+    const messageKey =
+      response?.status === VOICE_CALL_OUTBOUND_INIT_STATUS.PERMISSION_PENDING
+        ? 'CONTACT_PANEL.WHATSAPP_CALL_PERMISSION_PENDING'
+        : 'CONTACT_PANEL.WHATSAPP_CALL_PERMISSION_REQUESTED';
+    useAlert(t(messageKey));
+    navigateToConversation(conversationId);
+    return;
+  }
+
+  // Stay non-active until the connect cable event arrives — flipping to active
+  // here would start the duration timer before the contact picks up.
+  callsStore.addCall({
+    callSid: response.call_id,
+    callId: response.id,
+    conversationId,
+    inboxId,
+    callDirection: VOICE_CALL_DIRECTION.OUTBOUND,
+    provider: VOICE_CALL_PROVIDERS.WHATSAPP,
+  });
+
+  useAlert(t('CONTACT_PANEL.CALL_INITIATED'));
+  navigateToConversation(conversationId);
+};
+
+const startCall = async (inboxId, conversationIdHint = null) => {
+  if (isCallButtonDisabled.value) return;
+
+  const inbox = (inboxesList.value || []).find(i => i.id === inboxId);
+  if (getVoiceCallProvider(inbox) === VOICE_CALL_PROVIDERS.WHATSAPP) {
+    try {
+      await startWhatsappCall(inboxId, conversationIdHint);
+    } catch (error) {
+      useAlert(error?.message || t('CONTACT_PANEL.CALL_FAILED'));
+    }
+    return;
+  }
 
   try {
     const response = await store.dispatch('contacts/initiateCall', {
       contactId: props.contactId,
       inboxId,
+      conversationId: conversationIdHint,
     });
     const { call_sid: callSid, conversation_id: conversationId } = response;
 
-    // Add call to store immediately so widget shows
-    const callsStore = useCallsStore();
     callsStore.addCall({
       callSid,
       conversationId,
       inboxId,
-      callDirection: 'outbound',
+      callDirection: VOICE_CALL_DIRECTION.OUTBOUND,
     });
 
     useAlert(t('CONTACT_PANEL.CALL_INITIATED'));
@@ -86,6 +182,22 @@ const startCall = async inboxId => {
 };
 
 const onClick = async () => {
+  // In conversation context, only stay in this conversation if its inbox is
+  // itself voice-capable (works the same for Twilio and WhatsApp). For
+  // non-voice channels (email, web, …) fall back to the picker so the call
+  // goes out via a voice inbox.
+  if (props.conversationId) {
+    const conversation = store.getters.getConversationById(
+      props.conversationId
+    );
+    const conversationInbox = (inboxesList.value || []).find(
+      i => i.id === conversation?.inbox_id
+    );
+    if (conversationInbox && isVoiceCallEnabled(conversationInbox)) {
+      await startCall(conversationInbox.id, props.conversationId);
+      return;
+    }
+  }
   if (voiceInboxes.value.length > 1) {
     dialogRef.value?.open();
     return;
@@ -106,7 +218,7 @@ const onPickInbox = async inbox => {
       v-if="shouldRender"
       v-tooltip.top-end="tooltipLabel || null"
       v-bind="attrs"
-      :disabled="isInitiatingCall"
+      :disabled="isCallButtonDisabled"
       :is-loading="isInitiatingCall"
       :label="label"
       :icon="icon"

app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.vue

@@ -2,6 +2,7 @@
 import { ref, computed, watch } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
+import { OnClickOutside } from '@vueuse/components';
 import { useMapGetter } from 'dashboard/composables/store.js';
 import { useConfig } from 'dashboard/composables/useConfig';
 import { ARTICLE_TABS, CATEGORY_ALL } from 'dashboard/helper/portalHelper';
@@ -18,6 +19,7 @@ import ArticleEmptyState from 'dashboard/components-next/HelpCenter/EmptyState/A
 import BulkSelectBar from 'dashboard/components-next/captain/assistant/BulkSelectBar.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 import BulkTranslateDialog from './BulkTranslateDialog.vue';
 
 const props = defineProps({
@@ -62,6 +64,7 @@ const isFeatureEnabledonAccount = useMapGetter(
 
 const selectedArticleIds = ref(new Set());
 const deleteConfirmDialogRef = ref(null);
+const isCategoryMenuOpen = ref(false);
 
 const { isEnterprise } = useConfig();
 
@@ -221,6 +224,34 @@ const bulkUpdateStatus = async status => {
   }
 };
 
+const categoryMenuItems = computed(() =>
+  props.categories.map(category => ({
+    label: category.name,
+    value: category.id,
+    action: 'move',
+    emoji: category.icon,
+  }))
+);
+
+const handleBulkUpdateCategory = async ({ value }) => {
+  isCategoryMenuOpen.value = false;
+  try {
+    await articlesAPI.bulkUpdateCategory({
+      portalSlug: route.params.portalSlug,
+      articleIds: [...selectedArticleIds.value],
+      categoryId: value,
+    });
+    onBulkActionSuccess(
+      t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.CATEGORY_SUCCESS')
+    );
+  } catch (error) {
+    useAlert(
+      error?.message ||
+        t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.CATEGORY_ERROR')
+    );
+  }
+};
+
 const confirmBulkDelete = () => {
   deleteConfirmDialogRef.value?.open();
 };
@@ -340,6 +371,30 @@ watch(
                   class="[&>span:nth-child(2)]:hidden sm:[&>span:nth-child(2)]:inline w-fit"
                   @click="bulkUpdateStatus('archived')"
                 />
+                <div v-if="categoryMenuItems.length" class="relative group">
+                  <OnClickOutside @trigger="isCategoryMenuOpen = false">
+                    <Button
+                      sm
+                      faded
+                      slate
+                      icon="i-lucide-folder-input"
+                      :label="
+                        t(
+                          'HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.MOVE_TO_CATEGORY'
+                        )
+                      "
+                      class="[&>span:nth-child(2)]:hidden sm:[&>span:nth-child(2)]:inline w-fit"
+                      @click="isCategoryMenuOpen = !isCategoryMenuOpen"
+                    />
+                    <DropdownMenu
+                      v-if="isCategoryMenuOpen"
+                      :menu-items="categoryMenuItems"
+                      show-search
+                      class="right-0 w-48 mt-2 top-full max-h-60"
+                      @action="handleBulkUpdateCategory"
+                    />
+                  </OnClickOutside>
+                </div>
                 <Button
                   v-if="isTranslationAvailable"
                   sm

app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue

@@ -202,7 +202,7 @@ defineExpose({ state, isSubmitDisabled });
                 size="sm"
                 type="button"
                 :icon="!state.icon ? 'i-lucide-smile-plus' : ''"
-                class="!h-[2.4rem] !w-[2.375rem] absolute top-[1.94rem] !outline-none !rounded-[0.438rem] border-0 ltr:left-px rtl:right-px ltr:!rounded-r-none rtl:!rounded-l-none"
+                class="!h-[2.38rem] !w-[2.375rem] absolute top-[2rem] !outline-none !rounded-[0.438rem] border-0 ltr:left-px rtl:right-px ltr:!rounded-r-none rtl:!rounded-l-none"
                 @click="isEmojiPickerOpen = !isEmojiPickerOpen"
               />
               <EmojiInput

app/javascript/dashboard/components-next/Settings/SettingsToggleSection.vue

@@ -32,7 +32,11 @@ const modelValue = defineModel({ type: Boolean, default: false });
         <span class="text-heading-3 text-n-slate-12">
           {{ header }}
         </span>
-        <div v-if="hideToggle" class="size-2" />
+        <template v-if="hideToggle">
+          <slot name="hiddenToggle">
+            <div class="size-2" />
+          </slot>
+        </template>
         <ToggleSwitch v-else v-model="modelValue" />
       </div>
       <span v-if="description" class="text-body-main text-n-slate-11">

app/javascript/dashboard/components-next/call/CallCard.story.vue

@@ -0,0 +1,179 @@
+<script setup>
+import CallCard from './CallCard.vue';
+import { VOICE_CALL_DIRECTION } from 'dashboard/components-next/message/constants';
+import { VOICE_CALL_PROVIDERS } from 'dashboard/helper/inbox';
+
+const whatsappCall = {
+  callSid: 'wamid.HBgM',
+  conversationId: 1234,
+  provider: VOICE_CALL_PROVIDERS.WHATSAPP,
+};
+
+const twilioCall = {
+  callSid: 'CA1234567890',
+  conversationId: 1234,
+};
+
+const richCallInfo = {
+  contactName: 'John Does',
+  phoneNumber: '+1 412 245 0242',
+  inboxName: 'Customer support',
+  location: 'San Francisco, United States',
+  countryFlag: '\u{1F1FA}\u{1F1F8}',
+  hasLocation: true,
+  avatar:
+    'https://app.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBd3FodGc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--d218a325af0ef45061eefd352f8efb9ac84275e8/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lKYW5CbFp3WTZCa1ZVT2hOeVpYTnBlbVZmZEc5ZlptbHNiRnNIYVFINk1BPT0iLCJleHAiOm51bGwsInB1ciI6InZhcmlhdGlvbiJ9fQ==--533c3ad7218e24c4b0e8f8959dc1953ce1d279b9/1707423736896.jpeg',
+};
+
+// Falls back to inbox name when neither city nor country is on the contact.
+const noLocationCallInfo = {
+  contactName: 'Anonymous Lead',
+  phoneNumber: '+44 20 7916 0428',
+  inboxName: 'Sales',
+  location: 'Sales',
+  countryFlag: '',
+  hasLocation: false,
+  avatar: '',
+};
+
+// Truncation regression check — both contact name and location should ellipsize.
+const longCallInfo = {
+  contactName: 'Aleksandra Konstantinopolskaya',
+  phoneNumber: '+49 30 911890',
+  inboxName: 'Customer support',
+  location:
+    'Friedrichshain-Kreuzberg, Federal Republic of Germany (Deutschland)',
+  countryFlag: '\u{1F1E9}\u{1F1EA}',
+  hasLocation: true,
+  avatar: '',
+};
+
+const unknownCallerInfo = {
+  contactName: 'Unknown caller',
+  phoneNumber: '',
+  inboxName: 'Customer support',
+  location: 'Customer support',
+  countryFlag: '',
+  hasLocation: false,
+  avatar: '',
+};
+
+const log =
+  (label, ...args) =>
+  () => {
+    // eslint-disable-next-line no-console
+    console.log(`[CallCard.story] ${label}`, ...args);
+  };
+</script>
+
+<template>
+  <Story
+    title="Components/Call/CallCard"
+    :layout="{ type: 'grid', width: '400px' }"
+  >
+    <Variant title="Incoming · WhatsApp">
+      <CallCard
+        :call="whatsappCall"
+        :call-info="richCallInfo"
+        :state="VOICE_CALL_DIRECTION.INCOMING"
+        @accept="log('accept')"
+        @reject="log('reject')"
+        @go-to-conversation="log('goToConversation')"
+      />
+    </Variant>
+
+    <Variant title="Incoming · Twilio (no flag)">
+      <CallCard
+        :call="twilioCall"
+        :call-info="noLocationCallInfo"
+        :state="VOICE_CALL_DIRECTION.INCOMING"
+        @accept="log('accept')"
+        @reject="log('reject')"
+        @go-to-conversation="log('goToConversation')"
+      />
+    </Variant>
+
+    <Variant title="Outgoing · WhatsApp ringing">
+      <CallCard
+        :call="whatsappCall"
+        :call-info="richCallInfo"
+        :state="VOICE_CALL_DIRECTION.OUTGOING"
+        @reject="log('reject')"
+        @go-to-conversation="log('goToConversation')"
+      />
+    </Variant>
+
+    <Variant title="Ongoing · WhatsApp (mute visible, unmuted)">
+      <CallCard
+        :call="whatsappCall"
+        :call-info="richCallInfo"
+        :state="VOICE_CALL_DIRECTION.ONGOING"
+        duration="01:23"
+        :is-muted="false"
+        show-mute
+        @end="log('end')"
+        @toggle-mute="log('toggleMute')"
+        @go-to-conversation="log('goToConversation')"
+      />
+    </Variant>
+
+    <Variant title="Ongoing · WhatsApp muted">
+      <CallCard
+        :call="whatsappCall"
+        :call-info="richCallInfo"
+        :state="VOICE_CALL_DIRECTION.ONGOING"
+        duration="03:47"
+        is-muted
+        show-mute
+        @end="log('end')"
+        @toggle-mute="log('toggleMute')"
+        @go-to-conversation="log('goToConversation')"
+      />
+    </Variant>
+
+    <Variant title="Ongoing · Twilio (no mute control)">
+      <CallCard
+        :call="twilioCall"
+        :call-info="richCallInfo"
+        :state="VOICE_CALL_DIRECTION.ONGOING"
+        duration="00:42"
+        @end="log('end')"
+        @go-to-conversation="log('goToConversation')"
+      />
+    </Variant>
+
+    <Variant title="Incoming · Unknown caller">
+      <CallCard
+        :call="whatsappCall"
+        :call-info="unknownCallerInfo"
+        :state="VOICE_CALL_DIRECTION.INCOMING"
+        @accept="log('accept')"
+        @reject="log('reject')"
+        @go-to-conversation="log('goToConversation')"
+      />
+    </Variant>
+
+    <Variant title="Truncation · long name and location">
+      <CallCard
+        :call="whatsappCall"
+        :call-info="longCallInfo"
+        :state="VOICE_CALL_DIRECTION.INCOMING"
+        @accept="log('accept')"
+        @reject="log('reject')"
+        @go-to-conversation="log('goToConversation')"
+      />
+    </Variant>
+
+    <Variant title="Ongoing · no conversation link in footer">
+      <CallCard
+        :call="{ ...whatsappCall, conversationId: null }"
+        :call-info="richCallInfo"
+        :state="VOICE_CALL_DIRECTION.ONGOING"
+        duration="02:10"
+        show-mute
+        @end="log('end')"
+        @toggle-mute="log('toggleMute')"
+      />
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/call/CallCard.vue

@@ -0,0 +1,242 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { VOICE_CALL_DIRECTION } from 'dashboard/components-next/message/constants';
+import { VOICE_CALL_PROVIDERS } from 'dashboard/helper/inbox';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  call: {
+    type: Object,
+    required: true,
+  },
+  callInfo: {
+    type: Object,
+    required: true,
+  },
+  // 'incoming' | 'outgoing' | 'ongoing'
+  state: {
+    type: String,
+    required: true,
+  },
+  duration: {
+    type: String,
+    default: '',
+  },
+  isMuted: {
+    type: Boolean,
+    default: false,
+  },
+  showMute: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+defineEmits([
+  'accept',
+  'reject',
+  'end',
+  'toggleMute',
+  'goToConversation',
+  'dismiss',
+]);
+
+const { t } = useI18n();
+
+const isOngoing = computed(() => props.state === VOICE_CALL_DIRECTION.ONGOING);
+const isIncoming = computed(
+  () => props.state === VOICE_CALL_DIRECTION.INCOMING
+);
+const isOutgoing = computed(
+  () => props.state === VOICE_CALL_DIRECTION.OUTGOING
+);
+
+const statusIcon = computed(() => {
+  if (isOngoing.value) return 'i-ph-phone-call-bold';
+  if (isOutgoing.value) return 'i-ph-phone-outgoing-bold';
+  return 'i-ph-phone-incoming-bold';
+});
+
+const statusLabel = computed(() => {
+  if (isOngoing.value) return t('CONVERSATION.VOICE_WIDGET.CALL_IN_PROGRESS');
+  if (isOutgoing.value) return t('CONVERSATION.VOICE_WIDGET.OUTGOING_CALL');
+  return t('CONVERSATION.VOICE_WIDGET.INCOMING_CALL');
+});
+
+const channelIcon = computed(() => {
+  if (props.call?.provider === VOICE_CALL_PROVIDERS.WHATSAPP)
+    return 'i-ri-whatsapp-fill';
+  return 'i-ph-phone-bold';
+});
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-2 pt-4 bg-n-solid-2/95 rounded-2xl shadow-xl outline outline-1 outline-n-strong backdrop-blur-md"
+    :class="call?.conversationId ? 'pb-2' : 'pb-4'"
+  >
+    <!-- Top section: status badge + location/inbox + duration -->
+    <div class="flex flex-col gap-3">
+      <div class="flex items-center gap-2 px-4">
+        <!-- Ongoing: status badge on left -->
+        <div v-if="isOngoing" class="flex items-center gap-1.5 shrink-0">
+          <Icon :icon="statusIcon" class="size-3.5 text-n-teal-9 shrink-0" />
+          <span class="text-xs font-medium text-n-teal-9 tracking-tight">
+            {{ statusLabel }}
+          </span>
+        </div>
+
+        <!-- Caller location (city, country) or fallback to channel + inbox name -->
+        <div class="flex items-center gap-1.5 min-w-0 flex-1">
+          <span
+            v-if="callInfo.hasLocation && callInfo.countryFlag"
+            class="text-sm leading-none shrink-0"
+          >
+            {{ callInfo.countryFlag }}
+          </span>
+          <Icon
+            v-else-if="!isOngoing"
+            :icon="channelIcon"
+            class="size-3.5 text-n-slate-10 shrink-0"
+          />
+          <span
+            class="text-xs font-medium text-n-slate-11 tracking-tight truncate"
+          >
+            {{ callInfo.location }}
+          </span>
+        </div>
+
+        <!-- Ongoing: duration on right -->
+        <p
+          v-if="isOngoing"
+          class="font-display text-base font-medium text-n-slate-11 shrink-0 mb-0 tabular-nums tracking-tight"
+        >
+          {{ duration }}
+        </p>
+        <!-- Incoming/Outgoing: status badge on right -->
+        <div v-else class="flex items-center gap-1.5 shrink-0">
+          <Icon :icon="statusIcon" class="size-3.5 text-n-teal-9 shrink-0" />
+          <span class="text-xs font-medium text-n-teal-9 tracking-tight">
+            {{ statusLabel }}
+          </span>
+          <!-- Dismiss: removes the notification from the UI without declining.
+               Incoming only — outgoing/ongoing calls are ended via the call
+               controls, not silently dismissed. -->
+          <NextButton
+            v-if="isIncoming"
+            v-tooltip.top="$t('CONVERSATION.VOICE_WIDGET.DISMISS_CALL')"
+            icon="i-ph-x-bold"
+            slate
+            ghost
+            xs
+            class="!rounded-full -my-1"
+            @click="$emit('dismiss')"
+          />
+        </div>
+      </div>
+
+      <!-- Main row: avatar + name/phone + actions -->
+      <div class="flex items-center gap-3 px-4">
+        <div class="shrink-0">
+          <Avatar
+            :src="callInfo.avatar"
+            :name="callInfo.contactName"
+            :size="40"
+          />
+        </div>
+        <div class="flex-1 min-w-0">
+          <p
+            class="font-display text-sm font-medium text-n-slate-12 truncate mb-0.5 tracking-tight leading-tight"
+          >
+            {{ callInfo.contactName }}
+          </p>
+          <p
+            v-if="callInfo.phoneNumber"
+            class="text-sm text-n-slate-11 truncate mb-0 tracking-tight leading-tight"
+          >
+            {{ callInfo.phoneNumber }}
+          </p>
+        </div>
+
+        <!-- Actions -->
+        <div class="flex items-center gap-2 shrink-0">
+          <!-- Mute toggle (WhatsApp ongoing only) -->
+          <NextButton
+            v-if="isOngoing && showMute"
+            v-tooltip.top="
+              isMuted
+                ? $t('CONVERSATION.VOICE_WIDGET.UNMUTE')
+                : $t('CONVERSATION.VOICE_WIDGET.MUTE')
+            "
+            :icon="
+              isMuted ? 'i-ph-microphone-slash-bold' : 'i-ph-microphone-bold'
+            "
+            :variant="isMuted ? 'solid' : 'faded'"
+            :color="isMuted ? 'amber' : 'teal'"
+            class="!rounded-full"
+            @click="$emit('toggleMute')"
+          />
+
+          <!-- Accept call (incoming only) -->
+          <NextButton
+            v-if="isIncoming"
+            v-tooltip.top="$t('CONVERSATION.VOICE_WIDGET.JOIN_CALL')"
+            icon="i-ph-phone-bold"
+            teal
+            class="!rounded-full"
+            @click="$emit('accept')"
+          />
+
+          <!-- Reject / end call (all states) -->
+          <NextButton
+            v-tooltip.top="
+              isOngoing
+                ? $t('CONVERSATION.VOICE_WIDGET.END_CALL')
+                : $t('CONVERSATION.VOICE_WIDGET.REJECT_CALL')
+            "
+            icon="i-ph-phone-x-bold"
+            ruby
+            class="!rounded-full rotate-[134deg]"
+            @click="isOngoing ? $emit('end') : $emit('reject')"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Footer: go to conversation thread -->
+    <NextButton
+      v-if="call?.conversationId"
+      slate
+      ghost
+      trailing-icon
+      class="!justify-between !px-2 !mx-2"
+      @click="$emit('goToConversation')"
+    >
+      <template #icon>
+        <span
+          class="flex items-center gap-1 text-n-slate-11 group-hover:text-n-slate-12"
+        >
+          <Icon
+            icon="i-ph-chat-circle-text-bold"
+            class="size-3.5 text-n-slate-11 shrink-0"
+          />
+          <span class="text-sm tracking-tight tabular-nums">
+            #{{ call.conversationId }}
+          </span>
+          <Icon
+            icon="i-ph-caret-right-bold"
+            class="size-3 text-n-slate-11 shrink-0"
+          />
+        </span>
+      </template>
+      <span
+        class="text-sm text-n-slate-11 tracking-tight group-hover:text-n-slate-12"
+      >
+        {{ $t('CONVERSATION.VOICE_WIDGET.GO_TO_CONVERSATION') }}
+      </span>
+    </NextButton>
+  </div>
+</template>

app/javascript/dashboard/components-next/call/FloatingCallWidget.vue

@@ -0,0 +1,268 @@
+<script setup>
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+import { useCallSession } from 'dashboard/composables/useCallSession';
+import { setWhatsappCallMuted } from 'dashboard/composables/useWhatsappCallSession';
+import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
+import { VOICE_CALL_PROVIDERS } from 'dashboard/helper/inbox';
+import { VOICE_CALL_DIRECTION } from 'dashboard/components-next/message/constants';
+import WindowVisibilityHelper from 'dashboard/helper/AudioAlerts/WindowVisibilityHelper';
+import CallCard from 'dashboard/components-next/call/CallCard.vue';
+import countriesList from 'shared/constants/countries.js';
+
+const RINGTONE_URL = '/audio/dashboard/bell.mp3';
+
+const route = useRoute();
+const router = useRouter();
+const store = useStore();
+
+const {
+  activeCall,
+  incomingCalls,
+  hasActiveCall,
+  isJoining,
+  joinCall,
+  endCall: endCallSession,
+  rejectIncomingCall,
+  dismissCall,
+  formattedCallDuration,
+} = useCallSession();
+
+// Mute is currently WhatsApp-only — Twilio calls are mediated server-side and
+// don't expose a mic track on the browser side.
+const isMuted = ref(false);
+const isWhatsappActive = computed(
+  () => activeCall.value?.provider === VOICE_CALL_PROVIDERS.WHATSAPP
+);
+
+const primaryIncomingCall = computed(() =>
+  hasActiveCall.value ? null : incomingCalls.value[0] || null
+);
+
+const stackedIncomingCalls = computed(() =>
+  hasActiveCall.value ? incomingCalls.value : incomingCalls.value.slice(1)
+);
+
+const mainCardState = computed(() => {
+  if (hasActiveCall.value) return VOICE_CALL_DIRECTION.ONGOING;
+  const direction = primaryIncomingCall.value?.callDirection;
+  return direction === VOICE_CALL_DIRECTION.OUTBOUND
+    ? VOICE_CALL_DIRECTION.OUTGOING
+    : VOICE_CALL_DIRECTION.INCOMING;
+});
+
+// Stacked cards are always non-active (ringing) calls, so reflect each call's
+// real direction. An outbound call must render as OUTGOING — otherwise it shows
+// the incoming-only dismiss (✕) control and the agent could drop it locally
+// without terminating, leaving the customer ringing with no widget to end it.
+const stackedCardState = call =>
+  call?.callDirection === VOICE_CALL_DIRECTION.OUTBOUND
+    ? VOICE_CALL_DIRECTION.OUTGOING
+    : VOICE_CALL_DIRECTION.INCOMING;
+
+const toggleMute = () => {
+  isMuted.value = !isMuted.value;
+  setWhatsappCallMuted(isMuted.value);
+};
+
+watch(hasActiveCall, active => {
+  if (!active) isMuted.value = false;
+});
+
+// Convert ISO 3166-1 alpha-2 country code (e.g. "US") to its regional indicator
+// flag emoji. Returns empty string if the code is missing or malformed.
+const countryCodeToFlag = code => {
+  if (!code || code.length !== 2) return '';
+  const base = 0x1f1e6;
+  const offset = 'A'.charCodeAt(0);
+  return String.fromCodePoint(
+    ...code
+      .toUpperCase()
+      .split('')
+      .map(c => base + (c.charCodeAt(0) - offset))
+  );
+};
+
+const getCallInfo = call => {
+  const conversation = store.getters.getConversationById(call?.conversationId);
+  // Look up inbox from the call's own inboxId — the conversation can drop out
+  // of the Vuex store when the user navigates between inbox views, so going
+  // through `conversation.inbox_id` would lose the inbox name (and fall back
+  // to the literal "Customer support" string).
+  const inbox = store.getters['inboxes/getInbox'](call?.inboxId);
+  const sender = conversation?.meta?.sender;
+  // `caller` is the snapshot captured when the call first landed (from the
+  // message sender or the WhatsApp cable payload). It outlives the
+  // conversation being in the store, so prefer it for display.
+  const caller = call?.caller;
+  const additional =
+    sender?.additional_attributes || caller?.additionalAttributes || {};
+  const city = additional.city || '';
+  const countryCode = additional.country_code || '';
+  const country =
+    additional.country ||
+    countriesList.find(c => c.id === countryCode.toUpperCase())?.name ||
+    '';
+  // Prefer the richest available location string ("City, Country"); fall back to
+  // whichever single field is present; finally fall back to the inbox name so
+  // there's always something to show.
+  const locationParts = [city, country].filter(Boolean);
+  const location =
+    locationParts.join(', ') || inbox?.name || 'Customer support';
+  return {
+    conversation,
+    inbox,
+    contactName:
+      caller?.name ||
+      sender?.name ||
+      caller?.phone ||
+      sender?.phone_number ||
+      'Unknown caller',
+    phoneNumber: caller?.phone || sender?.phone_number || '',
+    inboxName: inbox?.name || 'Customer support',
+    location,
+    countryFlag: countryCodeToFlag(countryCode),
+    hasLocation: locationParts.length > 0,
+    avatar: caller?.avatar || sender?.avatar || sender?.thumbnail,
+  };
+};
+
+const goToConversation = call => {
+  const conversationId = call?.conversationId;
+  const accountId = route.params.accountId;
+  if (!conversationId || !accountId) return;
+  router.push({
+    path: frontendURL(conversationUrl({ accountId, id: conversationId })),
+  });
+};
+
+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,
+    callSid: call.callSid,
+  });
+};
+
+const handleJoinCall = async call => {
+  if (!call || isJoining.value) return;
+  const { conversation } = getCallInfo(call);
+
+  if (hasActiveCall.value) {
+    await handleEndCall();
+  }
+
+  // The conversation may not be hydrated yet (post-refresh seeding path);
+  // call.inboxId already carries what joinCall needs.
+  const result = await joinCall({
+    conversationId: call.conversationId,
+    inboxId: call.inboxId || conversation?.inbox_id,
+    callSid: call.callSid,
+  });
+
+  if (result && conversation) {
+    router.push({
+      name: 'inbox_conversation',
+      params: { conversation_id: call.conversationId },
+    });
+  }
+};
+
+// Auto-join outbound calls when window is visible. WhatsApp outbound has no
+// separate join step (the offer was sent at initiate time and the answer is
+// applied directly by the cable handler), so this only covers Twilio.
+watch(
+  () => incomingCalls.value[0],
+  call => {
+    if (
+      call?.callDirection === VOICE_CALL_DIRECTION.OUTBOUND &&
+      call?.provider !== VOICE_CALL_PROVIDERS.WHATSAPP &&
+      !hasActiveCall.value &&
+      WindowVisibilityHelper.isWindowVisible()
+    ) {
+      handleJoinCall(call);
+    }
+  },
+  { immediate: true }
+);
+
+// Loop the ringtone while an inbound call is unanswered. Stop the moment any
+// call is active (we joined), every inbound call cleared, or the widget tears
+// down. The watcher only fires on the boolean transitioning, so additional
+// ringing calls arriving while one is already ringing don't restart the audio
+// — they silently stack into the UI without producing a fresh ring.
+// Browser autoplay may reject the first play() if the tab has no prior
+// user gesture; that's fine — the visual widget still surfaces the call.
+const ringtone = new Audio(RINGTONE_URL);
+ringtone.loop = true;
+ringtone.volume = 1;
+
+const stopRingtone = () => {
+  ringtone.pause();
+  ringtone.currentTime = 0;
+};
+
+const ringingInbound = computed(() =>
+  incomingCalls.value.some(
+    call => call.callDirection !== VOICE_CALL_DIRECTION.OUTBOUND
+  )
+);
+
+watch(
+  () => ringingInbound.value && !hasActiveCall.value,
+  shouldRing => {
+    if (shouldRing) {
+      ringtone.play().catch(() => {});
+    } else {
+      stopRingtone();
+    }
+  },
+  { immediate: true }
+);
+
+onBeforeUnmount(stopRingtone);
+</script>
+
+<template>
+  <div
+    v-if="incomingCalls.length || hasActiveCall"
+    class="fixed ltr:right-4 rtl:left-4 bottom-4 z-50 flex flex-col gap-3 w-[400px]"
+  >
+    <!-- Stacked incoming calls (shown above the primary card) -->
+    <CallCard
+      v-for="call in stackedIncomingCalls"
+      :key="call.callSid"
+      :call="call"
+      :state="stackedCardState(call)"
+      :call-info="getCallInfo(call)"
+      @accept="handleJoinCall(call)"
+      @reject="rejectIncomingCall(call.callSid)"
+      @dismiss="dismissCall(call.callSid)"
+      @go-to-conversation="goToConversation(call)"
+    />
+
+    <!-- Main Call Widget -->
+    <CallCard
+      v-if="hasActiveCall || primaryIncomingCall"
+      :call="activeCall || primaryIncomingCall"
+      :state="mainCardState"
+      :call-info="getCallInfo(activeCall || primaryIncomingCall)"
+      :duration="hasActiveCall ? formattedCallDuration : ''"
+      :is-muted="isMuted"
+      :show-mute="hasActiveCall && isWhatsappActive"
+      @accept="handleJoinCall(primaryIncomingCall)"
+      @reject="rejectIncomingCall(primaryIncomingCall?.callSid)"
+      @dismiss="dismissCall(primaryIncomingCall?.callSid)"
+      @end="handleEndCall"
+      @toggle-mute="toggleMute"
+      @go-to-conversation="goToConversation(activeCall || primaryIncomingCall)"
+    />
+  </div>
+</template>

app/javascript/dashboard/components-next/captain/assistant/DocumentBulkActions.vue

@@ -25,7 +25,7 @@ const store = useStore();
 const bulkDeleteDialog = ref(null);
 
 const isSyncableDocument = doc =>
-  !doc.pdf_document && doc.status === 'available' && !doc.sync_in_progress;
+  !doc.pdf_document && doc.status === 'available';
 
 const syncableSelectedIds = computed(() => {
   if (!props.selectedIds.size) return [];

app/javascript/dashboard/components-next/captain/assistant/DocumentCard.vue

@@ -127,7 +127,6 @@ const menuItems = computed(() => {
       value: 'sync',
       action: 'sync',
       icon: 'i-lucide-refresh-cw',
-      disabled: props.syncInProgress,
     });
   }
 

app/javascript/dashboard/components-next/icon/ChannelIcon.story.vue

@@ -0,0 +1,65 @@
+<script setup>
+import ChannelIcon from './ChannelIcon.vue';
+import { useChannelBrandIcon } from './provider';
+
+const inboxes = [
+  { name: 'API', channel_type: 'Channel::Api' },
+  { name: 'Email', channel_type: 'Channel::Email' },
+  { name: 'Gmail', channel_type: 'Channel::Email', provider: 'google' },
+  { name: 'Outlook', channel_type: 'Channel::Email', provider: 'microsoft' },
+  { name: 'Messenger', channel_type: 'Channel::FacebookPage' },
+  { name: 'Instagram', channel_type: 'Channel::Instagram' },
+  { name: 'Line', channel_type: 'Channel::Line' },
+  { name: 'Telegram', channel_type: 'Channel::Telegram' },
+  { name: 'WhatsApp', channel_type: 'Channel::Whatsapp' },
+  { name: 'TikTok', channel_type: 'Channel::Tiktok' },
+  { name: 'SMS', channel_type: 'Channel::Sms' },
+  { name: 'Twilio SMS', channel_type: 'Channel::TwilioSms' },
+  {
+    name: 'Twilio WhatsApp',
+    channel_type: 'Channel::TwilioSms',
+    medium: 'whatsapp',
+  },
+  {
+    name: 'Voice',
+    channel_type: 'Channel::TwilioSms',
+    voice_enabled: true,
+  },
+  { name: 'Website', channel_type: 'Channel::WebWidget' },
+];
+
+const brandInboxes = inboxes.filter(inbox => useChannelBrandIcon(inbox).value);
+</script>
+
+<template>
+  <Story title="Components/Icons/ChannelIcon">
+    <Variant title="Glyph (default)">
+      <div class="grid grid-cols-4 gap-5">
+        <div
+          v-for="inbox in inboxes"
+          :key="inbox.name"
+          class="flex items-center gap-2"
+        >
+          <ChannelIcon :inbox="inbox" class="size-6 text-n-slate-11" />
+          <span>{{ inbox.name }}</span>
+        </div>
+      </div>
+    </Variant>
+    <Variant title="Brand icon">
+      <div class="grid grid-cols-4 gap-5">
+        <div
+          v-for="inbox in brandInboxes"
+          :key="inbox.name"
+          class="flex items-center gap-2"
+        >
+          <ChannelIcon
+            :inbox="inbox"
+            use-brand-icon
+            class="size-6 text-n-slate-11"
+          />
+          <span>{{ inbox.name }}</span>
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/icon/ChannelIcon.vue

@@ -1,6 +1,7 @@
 <script setup>
-import { toRef } from 'vue';
-import { useChannelIcon } from './provider';
+import { computed, toRef } from 'vue';
+import { isVoiceCallEnabled } from 'dashboard/helper/inbox';
+import { useChannelIcon, useChannelBrandIcon } from './provider';
 import Icon from 'next/icon/Icon.vue';
 
 const props = defineProps({
@@ -8,11 +9,35 @@ const props = defineProps({
     type: Object,
     required: true,
   },
+  // When true, render the full-color brand icon (when one exists for the
+  // channel type) and fall back to the monochrome glyph otherwise.
+  useBrandIcon: {
+    type: Boolean,
+    default: false,
+  },
 });
 
-const channelIcon = useChannelIcon(toRef(props, 'inbox'));
+defineOptions({ inheritAttrs: false });
+
+const inboxRef = toRef(props, 'inbox');
+
+const hasVoiceBadge = computed(() => isVoiceCallEnabled(props.inbox));
+const channelIcon = useChannelIcon(inboxRef);
+const brandIcon = useChannelBrandIcon(inboxRef);
+
+const icon = computed(() =>
+  props.useBrandIcon && brandIcon.value ? brandIcon.value : channelIcon.value
+);
 </script>
 
 <template>
-  <Icon :icon="channelIcon" />
+  <span class="relative inline-flex" v-bind="$attrs">
+    <Icon :icon="icon" class="size-full" />
+    <span
+      v-if="hasVoiceBadge"
+      class="absolute top-0 ltr:right-0 rtl:left-0 inline-flex items-center justify-center size-2 rounded-full bg-n-surface-1"
+    >
+      <Icon icon="i-lucide-audio-lines" class="size-1.5 text-n-slate-12" />
+    </span>
+  </span>
 </template>

app/javascript/dashboard/components-next/icon/provider.js

@@ -1,46 +1,76 @@
+import { INBOX_TYPES, TWILIO_CHANNEL_MEDIUM } from 'dashboard/helper/inbox';
 import { computed } from 'vue';
-import { isVoiceCallEnabled } from 'dashboard/helper/inbox';
+
+const channelTypeIconMap = {
+  'Channel::Api': 'i-woot-api',
+  'Channel::Email': 'i-woot-mail',
+  'Channel::FacebookPage': 'i-woot-messenger',
+  'Channel::Line': 'i-woot-line',
+  'Channel::Sms': 'i-woot-sms',
+  'Channel::Telegram': 'i-woot-telegram',
+  'Channel::TwilioSms': 'i-woot-sms',
+  'Channel::TwitterProfile': 'i-woot-x',
+  'Channel::WebWidget': 'i-woot-website',
+  'Channel::Whatsapp': 'i-woot-whatsapp',
+  'Channel::Instagram': 'i-woot-instagram',
+  'Channel::Tiktok': 'i-woot-tiktok',
+  'Channel::AppStore': 'i-ri-app-store-fill',
+};
+
+const providerIconMap = {
+  microsoft: 'i-woot-outlook',
+  google: 'i-woot-gmail',
+};
+
+// Full-color brand icons. Most come from the `logos` Iconify set; Instagram,
+// Outlook and Line use custom `woot` glyphs since the `logos` versions are
+// monochrome or missing. Channels not listed here have no brand variant and
+// callers should fall back to the monochrome glyph via useChannelIcon.
+const channelTypeBrandIconMap = {
+  'Channel::FacebookPage': 'i-logos-messenger',
+  'Channel::Line': 'i-woot-line-color',
+  'Channel::Telegram': 'i-logos-telegram',
+  'Channel::Whatsapp': 'i-logos-whatsapp-icon',
+  'Channel::Instagram': 'i-woot-instagram-color',
+  'Channel::Tiktok': 'i-logos-tiktok-icon',
+};
+
+const providerBrandIconMap = {
+  microsoft: 'i-woot-outlook-color',
+  google: 'i-logos-google-gmail',
+};
+
+const resolveInbox = inbox => inbox?.value ?? inbox;
 
 export function useChannelIcon(inbox) {
-  const channelTypeIconMap = {
-    'Channel::Api': 'i-woot-api',
-    'Channel::Email': 'i-woot-mail',
-    'Channel::FacebookPage': 'i-woot-messenger',
-    'Channel::Line': 'i-woot-line',
-    'Channel::Sms': 'i-woot-sms',
-    'Channel::Telegram': 'i-woot-telegram',
-    'Channel::TwilioSms': 'i-woot-sms',
-    'Channel::TwitterProfile': 'i-woot-x',
-    'Channel::WebWidget': 'i-woot-website',
-    'Channel::Whatsapp': 'i-woot-whatsapp',
-    'Channel::Instagram': 'i-woot-instagram',
-    'Channel::Tiktok': 'i-woot-tiktok',
-    'Channel::AppStore': 'i-ri-app-store-fill',
-  };
-
-  const providerIconMap = {
-    microsoft: 'i-woot-outlook',
-    google: 'i-woot-gmail',
-  };
-
   const channelIcon = computed(() => {
-    const inboxDetails = inbox.value || inbox;
+    const inboxDetails = resolveInbox(inbox);
     const type = inboxDetails.channel_type;
     let icon = channelTypeIconMap[type];
 
-    if (type === 'Channel::Email' && inboxDetails.provider) {
+    if (type === INBOX_TYPES.EMAIL && inboxDetails.provider) {
       if (Object.keys(providerIconMap).includes(inboxDetails.provider)) {
         icon = providerIconMap[inboxDetails.provider];
       }
     }
 
     // Special case for Twilio whatsapp
-    if (type === 'Channel::TwilioSms' && inboxDetails.medium === 'whatsapp') {
+    if (
+      type === INBOX_TYPES.TWILIO &&
+      inboxDetails.medium === TWILIO_CHANNEL_MEDIUM.WHATSAPP
+    ) {
       icon = 'i-woot-whatsapp';
     }
 
-    // Special case for voice-enabled inboxes (Twilio, WhatsApp, etc.)
-    if (isVoiceCallEnabled(inboxDetails)) {
+    // Native Twilio voice inbox: a TwilioSms with voice enabled (and no WhatsApp medium)
+    // is presented as a Voice channel, so show the phone icon.
+    const voiceEnabled =
+      inboxDetails.voice_enabled || inboxDetails.voiceEnabled;
+    if (
+      type === INBOX_TYPES.TWILIO &&
+      voiceEnabled &&
+      inboxDetails.medium !== TWILIO_CHANNEL_MEDIUM.WHATSAPP
+    ) {
       icon = 'i-woot-voice';
     }
 
@@ -49,3 +79,26 @@ export function useChannelIcon(inbox) {
 
   return channelIcon;
 }
+
+export function useChannelBrandIcon(inbox) {
+  return computed(() => {
+    const inboxDetails = resolveInbox(inbox);
+    const type = inboxDetails.channel_type;
+    let icon = channelTypeBrandIconMap[type];
+
+    if (type === INBOX_TYPES.EMAIL && inboxDetails.provider) {
+      if (Object.keys(providerBrandIconMap).includes(inboxDetails.provider)) {
+        icon = providerBrandIconMap[inboxDetails.provider];
+      }
+    }
+
+    if (
+      type === INBOX_TYPES.TWILIO &&
+      inboxDetails.medium === TWILIO_CHANNEL_MEDIUM.WHATSAPP
+    ) {
+      icon = channelTypeBrandIconMap['Channel::Whatsapp'];
+    }
+
+    return icon ?? null;
+  });
+}

app/javascript/dashboard/components-next/message/Message.vue

@@ -31,6 +31,7 @@ import FileBubble from './bubbles/File.vue';
 import AudioBubble from './bubbles/Audio.vue';
 import VideoBubble from './bubbles/Video.vue';
 import EmbedBubble from './bubbles/Embed.vue';
+import FallbackBubble from './bubbles/Fallback.vue';
 import InstagramStoryBubble from './bubbles/InstagramStory.vue';
 import EmailBubble from './bubbles/Email/Index.vue';
 import UnsupportedBubble from './bubbles/Unsupported.vue';
@@ -328,6 +329,8 @@ const componentToRender = computed(() => {
   if (Array.isArray(props.attachments) && props.attachments.length === 1) {
     const fileType = props.attachments[0].fileType;
 
+    if (fileType === ATTACHMENT_TYPES.FALLBACK) return FallbackBubble;
+
     if (!props.content) {
       if (fileType === ATTACHMENT_TYPES.IMAGE) return ImageBubble;
       if (fileType === ATTACHMENT_TYPES.FILE) return FileBubble;
@@ -554,11 +557,10 @@ provideMessageContext({
         <Avatar v-bind="avatarInfo" :size="24" />
       </div>
       <div
-        class="[grid-area:bubble] flex"
+        class="[grid-area:bubble] flex min-w-0"
         :class="{
           'ltr:ml-8 rtl:mr-8 justify-end': orientation === ORIENTATION.RIGHT,
           'ltr:mr-8 rtl:ml-8': orientation === ORIENTATION.LEFT,
-          'min-w-0': variant === MESSAGE_VARIANTS.EMAIL,
         }"
         @contextmenu="openContextMenu($event)"
       >

app/javascript/dashboard/components-next/message/bubbles/Base.vue

@@ -95,7 +95,7 @@ const replyToPreview = computed(() => {
 
 <template>
   <div
-    class="text-sm"
+    class="text-sm min-w-0"
     :class="[
       messageClass,
       {

app/javascript/dashboard/components-next/message/bubbles/Fallback.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { computed } from 'vue';
+import BaseBubble from './Base.vue';
+import FormattedContent from './Text/FormattedContent.vue';
+import { useMessageContext } from '../provider.js';
+
+const { attachments, content } = useMessageContext();
+
+const attachment = computed(() => attachments.value?.[0] || {});
+const url = computed(
+  () => attachment.value.dataUrl || attachment.value.data_url
+);
+const title = computed(
+  () =>
+    attachment.value.fallbackTitle ||
+    attachment.value.fallback_title ||
+    url.value
+);
+</script>
+
+<template>
+  <BaseBubble class="p-3" data-bubble-name="fallback">
+    <FormattedContent v-if="content" :content="content" class="mb-2" />
+    <a
+      v-if="url"
+      :href="url"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="block max-w-[320px] truncate text-sm text-n-brand underline"
+    >
+      {{ title }}
+    </a>
+    <span v-else class="text-sm text-n-slate-11">
+      {{ title }}
+    </span>
+  </BaseBubble>
+</template>

app/javascript/dashboard/components-next/message/bubbles/Unsupported.vue

@@ -6,9 +6,12 @@ import BaseBubble from './Base.vue';
 
 const { inboxId } = useMessageContext();
 
-const { isAFacebookInbox, isAnInstagramChannel, isATiktokChannel } = useInbox(
-  inboxId.value
-);
+const {
+  isAFacebookInbox,
+  isAnInstagramChannel,
+  isATiktokChannel,
+  isAWhatsAppChannel,
+} = useInbox(inboxId.value);
 
 const unsupportedMessageKey = computed(() => {
   if (isAFacebookInbox.value)
@@ -16,6 +19,8 @@ const unsupportedMessageKey = computed(() => {
   if (isAnInstagramChannel.value)
     return 'CONVERSATION.UNSUPPORTED_MESSAGE_INSTAGRAM';
   if (isATiktokChannel.value) return 'CONVERSATION.UNSUPPORTED_MESSAGE_TIKTOK';
+  if (isAWhatsAppChannel.value)
+    return 'CONVERSATION.UNSUPPORTED_MESSAGE_WHATSAPP';
   return 'CONVERSATION.UNSUPPORTED_MESSAGE';
 });
 </script>

app/javascript/dashboard/components-next/message/bubbles/VoiceCall.vue

@@ -2,14 +2,27 @@
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStore } from 'vuex';
+import { useMapGetter } from 'dashboard/composables/store';
 import { useMessageContext } from '../provider.js';
-import { VOICE_CALL_STATUS } from '../constants';
-import { useCallSession } from 'dashboard/composables/useCallSession';
+import {
+  VOICE_CALL_STATUS,
+  VOICE_CALL_DIRECTION,
+  VOICE_CALL_OUTBOUND_INIT_STATUS,
+  VOICE_CALL_END_REASON,
+  MESSAGE_TYPES,
+  ATTACHMENT_TYPES,
+} from '../constants';
+import { useCallActions } from 'dashboard/composables/useCallSession';
+import { useWhatsappCallSession } from 'dashboard/composables/useWhatsappCallSession';
+import { useCallsStore } from 'dashboard/stores/calls';
+import { VOICE_CALL_PROVIDERS } from 'dashboard/helper/inbox';
 import { formatDuration } from 'shared/helpers/timeHelper';
+import { useAlert } from 'dashboard/composables';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import BaseBubble from 'next/message/bubbles/Base.vue';
 import AudioChip from 'next/message/chips/Audio.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 const LABEL_MAP = {
   [VOICE_CALL_STATUS.IN_PROGRESS]: 'CONVERSATION.VOICE_CALL.CALL_IN_PROGRESS',
@@ -17,39 +30,67 @@ const LABEL_MAP = {
 };
 
 const ICON_MAP = {
-  [VOICE_CALL_STATUS.IN_PROGRESS]: 'i-ph-phone-call',
-  [VOICE_CALL_STATUS.NO_ANSWER]: 'i-ph-phone-x',
-  [VOICE_CALL_STATUS.FAILED]: 'i-ph-phone-x',
-};
-
-const BG_COLOR_MAP = {
-  [VOICE_CALL_STATUS.IN_PROGRESS]: 'bg-n-teal-9',
-  [VOICE_CALL_STATUS.RINGING]: 'bg-n-teal-9 animate-pulse',
-  [VOICE_CALL_STATUS.COMPLETED]: 'bg-n-slate-11',
-  [VOICE_CALL_STATUS.NO_ANSWER]: 'bg-n-ruby-9',
-  [VOICE_CALL_STATUS.FAILED]: 'bg-n-ruby-9',
+  [VOICE_CALL_STATUS.IN_PROGRESS]: 'i-ph-phone-call-bold',
+  [VOICE_CALL_STATUS.COMPLETED]: 'i-ph-phone-bold',
+  [VOICE_CALL_STATUS.NO_ANSWER]: 'i-ph-phone-x-bold',
+  [VOICE_CALL_STATUS.FAILED]: 'i-ph-phone-x-bold',
 };
 
 const { t } = useI18n();
 const store = useStore();
-const { call, conversationId, currentUserId, inboxId } = useMessageContext();
+const {
+  call,
+  attachments,
+  contentAttributes,
+  conversationId,
+  currentUserId,
+  inboxId,
+  sender,
+  messageType,
+} = useMessageContext();
 const { joinCall, endCall, activeCall, hasActiveCall, isJoining } =
-  useCallSession();
+  useCallActions();
+const whatsappCallSession = useWhatsappCallSession();
+const callsStore = useCallsStore();
+const contactsUiFlags = useMapGetter('contacts/getUIFlags');
+const isInitiatingCall = computed(
+  () => contactsUiFlags.value?.isInitiatingCall || false
+);
 
 const status = computed(() => call.value?.status);
-const isOutbound = computed(() => call.value?.direction === 'outgoing');
+// Server-side call records use `outgoing`/`incoming`, while the Pinia store
+// and a few API hops normalise to `outbound`/`inbound`. Accept either so the
+// bubble label matches the message orientation no matter the source.
+const isOutbound = computed(() => {
+  const dir = call.value?.direction;
+  if (
+    dir === VOICE_CALL_DIRECTION.OUTGOING ||
+    dir === VOICE_CALL_DIRECTION.OUTBOUND
+  )
+    return true;
+  if (
+    dir === VOICE_CALL_DIRECTION.INCOMING ||
+    dir === VOICE_CALL_DIRECTION.INBOUND
+  )
+    return false;
+  // Fall back to the message orientation: agent-authored messages sit on the
+  // right (outbound) and contact-authored ones on the left.
+  return messageType.value === MESSAGE_TYPES.OUTGOING;
+});
+const isWhatsapp = computed(
+  () => call.value?.provider === VOICE_CALL_PROVIDERS.WHATSAPP
+);
 const isFailed = computed(() =>
   [VOICE_CALL_STATUS.NO_ANSWER, VOICE_CALL_STATUS.FAILED].includes(status.value)
 );
-const acceptedByAgentId = computed(() => call.value?.acceptedByAgentId);
-const didCurrentUserAnswer = computed(
+const isMissedInbound = computed(() => isFailed.value && !isOutbound.value);
+const endReason = computed(() => call.value?.endReason);
+const wasDeclinedByAgent = computed(
   () =>
-    !!acceptedByAgentId.value && acceptedByAgentId.value === currentUserId.value
+    isMissedInbound.value &&
+    endReason.value === VOICE_CALL_END_REASON.AGENT_REJECTED
 );
-// Pickup auto-assigns the conversation, so the assignee is a safe display proxy
-// for the answerer when the Call payload lacks accepted_by_agent_id (e.g.,
-// Twilio's call-status webhook flipped the call to in-progress before the
-// participant-join webhook claimed it).
+const acceptedByAgentId = computed(() => call.value?.acceptedByAgentId);
 const conversationAssignee = computed(() => {
   const conversation = store.getters.getConversationById?.(
     conversationId?.value
@@ -66,67 +107,107 @@ const displayAgentName = computed(() => {
   return conversationAssignee.value?.name || null;
 });
 
+const audioAttachment = computed(() =>
+  (attachments?.value || []).find(a => a.fileType === ATTACHMENT_TYPES.AUDIO)
+);
+
+const durationSeconds = computed(() => {
+  const fromCall = call.value?.durationSeconds || call.value?.duration_seconds;
+  if (fromCall != null) return fromCall;
+  const data = contentAttributes?.value?.data;
+  return data?.durationSeconds || data?.duration_seconds;
+});
+
+const formattedDuration = computed(() => formatDuration(durationSeconds.value));
+
+// Agent who handled the call (initiator on outbound, answerer on inbound), taken
+// strictly from the persisted accept fields — never the conversation's current
+// assignee, which would mis-attribute a historical call after a reassignment.
+const handlerName = computed(() => {
+  if (call.value?.acceptedByAgentName) return call.value.acceptedByAgentName;
+  if (!acceptedByAgentId.value) return null;
+  const agent = store.getters['agents/getAgentById'](acceptedByAgentId.value);
+  return agent?.available_name || agent?.name || null;
+});
+
+const handledBy = computed(() =>
+  handlerName.value
+    ? t('CONVERSATION.VOICE_CALL.HANDLED_BY', { agentName: handlerName.value })
+    : null
+);
+
 const labelKey = computed(() => {
   if (LABEL_MAP[status.value]) return LABEL_MAP[status.value];
-  if (status.value === VOICE_CALL_STATUS.RINGING) {
+  if (isFailed.value) {
     return isOutbound.value
-      ? 'CONVERSATION.VOICE_CALL.OUTGOING_CALL'
-      : 'CONVERSATION.VOICE_CALL.INCOMING_CALL';
+      ? 'CONVERSATION.VOICE_CALL.NO_ANSWER_OUTBOUND_LABEL'
+      : 'CONVERSATION.VOICE_CALL.MISSED_CALL';
   }
-  return isFailed.value
-    ? 'CONVERSATION.VOICE_CALL.MISSED_CALL'
+  // RINGING or an as-yet-unknown/initial status: orient purely by direction so an
+  // outbound call never falls through to the "Incoming call" label.
+  return isOutbound.value
+    ? 'CONVERSATION.VOICE_CALL.OUTGOING_CALL'
     : 'CONVERSATION.VOICE_CALL.INCOMING_CALL';
 });
 
-const formattedDuration = computed(() =>
-  formatDuration(call.value?.durationSeconds)
-);
-
 const subtext = computed(() => {
-  if (status.value === VOICE_CALL_STATUS.RINGING) {
-    return t('CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET');
-  }
+  // Completed: "Handled by {agent} · 0:42" (drops either part when absent).
   if (status.value === VOICE_CALL_STATUS.COMPLETED) {
-    return formattedDuration.value;
+    return [handledBy.value, formattedDuration.value]
+      .filter(Boolean)
+      .join(' · ');
   }
   if (status.value === VOICE_CALL_STATUS.IN_PROGRESS) {
-    if (isOutbound.value) return t('CONVERSATION.VOICE_CALL.THEY_ANSWERED');
-    if (didCurrentUserAnswer.value) {
-      return t('CONVERSATION.VOICE_CALL.YOU_ANSWERED');
+    return handledBy.value;
+  }
+  if (isFailed.value) {
+    // Missed/failed calls have no handler, so keep the reason rather than "Handled by".
+    if (isOutbound.value) {
+      return t('CONVERSATION.VOICE_CALL.NO_ANSWER_OUTBOUND_SUBTEXT');
     }
-    if (displayAgentName.value) {
-      return t('CONVERSATION.VOICE_CALL.AGENT_ANSWERED', {
+    if (wasDeclinedByAgent.value && displayAgentName.value) {
+      return t('CONVERSATION.VOICE_CALL.MISSED_CALL_DECLINED_BY', {
         agentName: displayAgentName.value,
       });
     }
-    return t('CONVERSATION.VOICE_CALL.THEY_ANSWERED');
+    return t('CONVERSATION.VOICE_CALL.MISSED_CALL_INBOUND_SUBTEXT');
   }
-  return isFailed.value
-    ? t('CONVERSATION.VOICE_CALL.NO_ANSWER')
-    : t('CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET');
+  // RINGING or an as-yet-unknown/initial status.
+  if (isOutbound.value) {
+    return handledBy.value || t('CONVERSATION.VOICE_CALL.CALLING');
+  }
+  return t('CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET');
 });
 
 const iconName = computed(() => {
   if (ICON_MAP[status.value]) return ICON_MAP[status.value];
-  return isOutbound.value ? 'i-ph-phone-outgoing' : 'i-ph-phone-incoming';
+  return isOutbound.value
+    ? 'i-ph-phone-outgoing-bold'
+    : 'i-ph-phone-incoming-bold';
 });
 
-const bgColor = computed(() => BG_COLOR_MAP[status.value] || 'bg-n-teal-9');
+// Subtle icon container — matches the design's tonal swatch over the bubble bg.
+// Status drives the accent: teal for live, ruby for missed, neutral otherwise.
+const iconContainerClass = computed(() => {
+  if (status.value === VOICE_CALL_STATUS.IN_PROGRESS) {
+    return 'bg-n-teal-3 text-n-teal-11';
+  }
+  if (status.value === VOICE_CALL_STATUS.RINGING) {
+    return 'bg-n-teal-3 text-n-teal-11';
+  }
+  if (isMissedInbound.value) {
+    return 'bg-n-alpha-2 text-n-ruby-9';
+  }
+  return 'bg-n-alpha-2 text-n-slate-12';
+});
 
 const callSid = computed(() => call.value?.providerCallId);
 
-// Show "Join call" when the call is still ringing, no agent has claimed it,
-// and the conversation is unassigned or assigned to the current user. Mirrors
-// the eligibility used by FloatingCallWidget so the bubble can act as a
-// recovery affordance after a refresh or missed widget.
 const canJoinCall = computed(() => {
   if (status.value !== VOICE_CALL_STATUS.RINGING) return false;
   if (isOutbound.value) return false;
   if (acceptedByAgentId.value) return false;
   if (!callSid.value || !inboxId.value || !conversationId.value) return false;
-  // Suppress the button once this call is the local active session — the
-  // message status webhook may lag behind, so we can't rely on `status` alone
-  // to hide it after a successful join from this client.
   if (hasActiveCall.value && activeCall.value?.callSid === callSid.value)
     return false;
   const assignee = conversationAssignee.value;
@@ -135,11 +216,12 @@ const canJoinCall = computed(() => {
 });
 
 const recordingAttachment = computed(() => {
+  if (audioAttachment.value) return audioAttachment.value;
   const url = call.value?.recordingUrl;
   if (!url) return null;
   return {
     dataUrl: url,
-    fileType: 'audio',
+    fileType: ATTACHMENT_TYPES.AUDIO,
     extension: 'wav',
     transcribedText: call.value?.transcript || '',
   };
@@ -162,48 +244,117 @@ const handleJoinCall = async () => {
     callSid: callSid.value,
   });
 };
+
+const canCallBack = computed(
+  () =>
+    isMissedInbound.value &&
+    !!inboxId.value &&
+    !!conversationId.value &&
+    !hasActiveCall.value &&
+    !callsStore.hasIncomingCall
+);
+
+const handleCallBack = async () => {
+  if (!canCallBack.value || isInitiatingCall.value) return;
+  try {
+    if (isWhatsapp.value) {
+      const response = await whatsappCallSession.initiateOutboundCall(
+        conversationId.value
+      );
+      if (response?.status === VOICE_CALL_OUTBOUND_INIT_STATUS.LOCKED) return;
+      // Permission template path returns no call id — show banner, no widget yet.
+      if (!response?.id) {
+        useAlert(
+          response?.status ===
+            VOICE_CALL_OUTBOUND_INIT_STATUS.PERMISSION_PENDING
+            ? t('CONVERSATION.HEADER.WHATSAPP_CALL_PERMISSION_PENDING')
+            : t('CONVERSATION.HEADER.WHATSAPP_CALL_PERMISSION_REQUESTED')
+        );
+        return;
+      }
+      callsStore.addCall({
+        callSid: response.call_id,
+        callId: response.id,
+        conversationId: conversationId.value,
+        inboxId: inboxId.value,
+        callDirection: VOICE_CALL_DIRECTION.OUTBOUND,
+        provider: VOICE_CALL_PROVIDERS.WHATSAPP,
+      });
+      return;
+    }
+    const response = await store.dispatch('contacts/initiateCall', {
+      contactId: sender.value?.id,
+      inboxId: inboxId.value,
+      conversationId: conversationId.value,
+    });
+    callsStore.addCall({
+      callSid: response?.call_sid,
+      conversationId: response?.conversation_id ?? conversationId.value,
+      inboxId: inboxId.value,
+      callDirection: VOICE_CALL_DIRECTION.OUTBOUND,
+    });
+  } catch (error) {
+    useAlert(error?.message || t('CONTACT_PANEL.CALL_FAILED'));
+  }
+};
 </script>
 
 <template>
-  <BaseBubble class="p-0 border-none" hide-meta>
-    <div class="flex overflow-hidden flex-col w-full max-w-sm">
-      <div class="flex gap-3 items-center p-3 w-full">
+  <BaseBubble class="!p-3 !max-w-md min-w-[240px]" hide-meta>
+    <div class="flex flex-col gap-3 w-full">
+      <!-- Header row: icon + title + duration/subtext -->
+      <div class="flex gap-2.5 items-start">
         <div
-          class="flex justify-center items-center rounded-full size-10 shrink-0"
-          :class="bgColor"
+          class="flex justify-center items-center rounded-xl size-11 shrink-0"
+          :class="iconContainerClass"
         >
-          <Icon
-            class="size-5"
-            :icon="iconName"
-            :class="{
-              'text-n-slate-1': status === VOICE_CALL_STATUS.COMPLETED,
-              'text-white': status !== VOICE_CALL_STATUS.COMPLETED,
-            }"
-          />
+          <Icon class="size-4" :icon="iconName" />
         </div>
-
-        <div class="flex overflow-hidden flex-col flex-grow">
-          <span class="text-sm font-medium truncate text-n-slate-12">
+        <div class="flex flex-col flex-1 min-w-0 self-center">
+          <span
+            class="font-display text-sm font-medium leading-tight truncate tracking-tight"
+          >
             {{ $t(labelKey) }}
           </span>
-          <span v-if="subtext" class="text-xs text-n-slate-11">
+          <span
+            v-if="subtext"
+            class="text-sm leading-tight truncate tracking-tight opacity-75"
+          >
             {{ subtext }}
           </span>
-          <button
-            v-if="canJoinCall"
-            type="button"
-            class="p-0 mt-1 text-xs font-medium text-start text-n-teal-10 hover:text-n-teal-11 disabled:opacity-50"
-            :disabled="isJoining"
-            @click="handleJoinCall"
-          >
-            {{ $t('CONVERSATION.VOICE_CALL.JOIN_CALL') }}
-          </button>
         </div>
       </div>
 
-      <div v-if="recordingAttachment" class="px-3 pb-3">
-        <AudioChip :attachment="recordingAttachment" />
-      </div>
+      <!-- Audio player (when there's a recording) -->
+      <AudioChip
+        v-if="recordingAttachment"
+        :attachment="recordingAttachment"
+        show-transcribed-text
+      />
+
+      <!-- Call back button (missed inbound) -->
+      <NextButton
+        v-if="canCallBack"
+        type="button"
+        :label="$t('CONVERSATION.VOICE_CALL.CALL_BACK')"
+        icon="i-ph-phone-bold"
+        teal
+        class="!rounded-full"
+        :disabled="isInitiatingCall"
+        @click="handleCallBack"
+      />
+
+      <!-- Join call button (ringing inbound) -->
+      <NextButton
+        v-if="canJoinCall"
+        type="button"
+        :label="$t('CONVERSATION.VOICE_CALL.JOIN_CALL')"
+        icon="i-ph-phone-bold"
+        teal
+        class="!rounded-full"
+        :disabled="isJoining"
+        @click="handleJoinCall"
+      />
     </div>
   </BaseBubble>
 </template>

app/javascript/dashboard/components-next/message/chips/Audio.vue

@@ -31,6 +31,17 @@ const timeStampURL = computed(() => {
   return timeStampAppendedURL(attachment.dataUrl);
 });
 
+const TRANSCRIPT_PREVIEW_LENGTH = 200;
+const isTranscriptExpanded = ref(false);
+const isTranscriptLong = computed(
+  () => (attachment.transcribedText?.length || 0) > TRANSCRIPT_PREVIEW_LENGTH
+);
+const displayedTranscript = computed(() => {
+  const text = attachment.transcribedText || '';
+  if (!isTranscriptLong.value || isTranscriptExpanded.value) return text;
+  return `${text.slice(0, TRANSCRIPT_PREVIEW_LENGTH).trimEnd()}…`;
+});
+
 const audioPlayer = useTemplateRef('audioPlayer');
 
 const isPlaying = ref(false);
@@ -41,8 +52,33 @@ const playbackSpeed = ref(1);
 
 const { uid } = getCurrentInstance();
 
+// MediaRecorder-produced WebM/Opus blobs lack a Duration header → <audio>.duration
+// resolves to Infinity until we seek past the end, which forces the engine to
+// scan the file and compute the real length. Safe no-op for files with a real
+// duration already (mp3/m4a/etc).
+const resolveStreamingDuration = () => {
+  const el = audioPlayer.value;
+  if (!el) return;
+  const onTimeUpdate = () => {
+    el.removeEventListener('timeupdate', onTimeUpdate);
+    el.currentTime = 0;
+    duration.value = el.duration;
+  };
+  el.addEventListener('timeupdate', onTimeUpdate);
+  try {
+    el.currentTime = Number.MAX_SAFE_INTEGER;
+  } catch {
+    el.removeEventListener('timeupdate', onTimeUpdate);
+  }
+};
+
 const onLoadedMetadata = () => {
-  duration.value = audioPlayer.value?.duration;
+  const d = audioPlayer.value?.duration;
+  if (!Number.isFinite(d)) {
+    resolveStreamingDuration();
+    return;
+  }
+  duration.value = d;
 };
 
 const playbackSpeedLabel = computed(() => {
@@ -53,7 +89,8 @@ const playbackSpeedLabel = computed(() => {
 // When the onLoadMetadata is called, so we need to set the duration
 // value when the component is mounted
 onMounted(() => {
-  duration.value = audioPlayer.value?.duration;
+  const d = audioPlayer.value?.duration;
+  if (Number.isFinite(d)) duration.value = d;
   audioPlayer.value.playbackRate = playbackSpeed.value;
 });
 
@@ -189,7 +226,18 @@ const downloadAudio = async () => {
       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 }}
+      {{ displayedTranscript }}
+      <button
+        v-if="isTranscriptLong"
+        class="block mt-1 p-0 border-0 bg-transparent text-n-slate-11 hover:text-n-slate-12 font-medium"
+        @click="isTranscriptExpanded = !isTranscriptExpanded"
+      >
+        {{
+          isTranscriptExpanded
+            ? $t('CONVERSATION.VOICE_CALL.TRANSCRIPT_SHOW_LESS')
+            : $t('CONVERSATION.VOICE_CALL.TRANSCRIPT_SHOW_MORE')
+        }}
+      </button>
     </div>
   </div>
 </template>

app/javascript/dashboard/components-next/message/constants.js

@@ -88,5 +88,18 @@ export const VOICE_CALL_STATUS = {
 
 export const VOICE_CALL_DIRECTION = {
   INBOUND: 'inbound',
+  INCOMING: 'incoming',
+  OUTGOING: 'outgoing',
+  ONGOING: 'ongoing',
   OUTBOUND: 'outbound',
 };
+
+export const VOICE_CALL_OUTBOUND_INIT_STATUS = {
+  LOCKED: 'locked',
+  PERMISSION_REQUESTED: 'permission_requested',
+  PERMISSION_PENDING: 'permission_pending',
+};
+
+export const VOICE_CALL_END_REASON = {
+  AGENT_REJECTED: 'agent_rejected',
+};

app/javascript/dashboard/components-next/sidebar/SidebarProfileMenuStatus.vue

@@ -78,26 +78,27 @@ function changeAvailabilityStatus(availability) {
 <template>
   <DropdownSection class="[&>ul]:overflow-visible">
     <div class="grid gap-0">
-      <DropdownItem preserve-open>
-        <div class="flex-grow flex items-center gap-1">
+      <DropdownItem preserve-open class="gap-1">
+        <div class="flex-grow flex items-center gap-1 min-w-0">
           {{ $t('SIDEBAR.SET_YOUR_AVAILABILITY') }}
         </div>
-        <DropdownContainer>
+        <DropdownContainer class="shrink-0">
           <template #trigger="{ toggle }">
             <Button
               size="sm"
               color="slate"
               variant="faded"
-              class="min-w-[96px]"
               icon="i-lucide-chevron-down"
               trailing-icon
               @click="toggle"
             >
-              <div class="flex gap-1 items-center flex-grow text-sm">
+              <div class="flex gap-1 items-center min-w-0 text-sm">
                 <div class="p-1 flex-shrink-0">
                   <div class="size-2 rounded-sm" :class="activeStatus.color" />
                 </div>
-                <span>{{ activeStatus.label }}</span>
+                <span class="truncate max-w-[7rem]">
+                  {{ activeStatus.label }}
+                </span>
               </div>
             </Button>
           </template>
@@ -114,12 +115,12 @@ function changeAvailabilityStatus(availability) {
         </DropdownContainer>
       </DropdownItem>
       <DropdownItem>
-        <div class="flex-grow flex items-center gap-1">
+        <div class="flex-grow min-w-0">
           {{ $t('SIDEBAR.SET_AUTO_OFFLINE.TEXT') }}
           <Icon
             v-tooltip.top="$t('SIDEBAR.SET_AUTO_OFFLINE.INFO_SHORT')"
             icon="i-lucide-info"
-            class="size-4 text-n-slate-10"
+            class="inline-block align-middle ms-1 size-4 text-n-slate-10"
           />
         </div>
         <ToggleSwitch v-model="autoOfflineToggle" />

app/javascript/dashboard/components-next/sidebar/SidebarUnreadBadge.vue

@@ -19,7 +19,7 @@ const displayCount = computed(() =>
   <span
     v-if="normalizedCount > 0"
     data-test-id="sidebar-unread-badge"
-    class="inline-grid h-5 min-w-5 place-items-center rounded-full bg-n-brand px-1 text-xxs font-medium leading-3 text-white flex-shrink-0"
+    class="inline-grid h-5 min-w-5 place-items-center rounded-full bg-n-slate-4 px-1 text-xxs font-medium leading-3 text-n-slate-12 dark:bg-n-slate-5 flex-shrink-0"
   >
     {{ displayCount }}
   </span>