Merge branch 'develop' into feat/expand-idb-coverage

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

@@ -35,7 +35,14 @@ const props = defineProps({
   },
 });
 
-defineEmits(['accept', 'reject', 'end', 'toggleMute', 'goToConversation']);
+defineEmits([
+  'accept',
+  'reject',
+  'end',
+  'toggleMute',
+  'goToConversation',
+  'dismiss',
+]);
 
 const { t } = useI18n();
 
@@ -115,6 +122,19 @@ const channelIcon = computed(() => {
           <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>
 

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

@@ -25,6 +25,7 @@ const {
   joinCall,
   endCall: endCallSession,
   rejectIncomingCall,
+  dismissCall,
   formattedCallDuration,
 } = useCallSession();
 
@@ -51,6 +52,15 @@ const mainCardState = computed(() => {
     : 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);
@@ -230,10 +240,11 @@ onBeforeUnmount(stopRingtone);
       v-for="call in stackedIncomingCalls"
       :key="call.callSid"
       :call="call"
-      :state="VOICE_CALL_DIRECTION.INCOMING"
+      :state="stackedCardState(call)"
       :call-info="getCallInfo(call)"
       @accept="handleJoinCall(call)"
       @reject="rejectIncomingCall(call.callSid)"
+      @dismiss="dismissCall(call.callSid)"
       @go-to-conversation="goToConversation(call)"
     />
 
@@ -248,6 +259,7 @@ onBeforeUnmount(stopRingtone);
       :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)"

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/message/bubbles/VoiceCall.vue

@@ -91,10 +91,6 @@ const wasDeclinedByAgent = computed(
     endReason.value === VOICE_CALL_END_REASON.AGENT_REJECTED
 );
 const acceptedByAgentId = computed(() => call.value?.acceptedByAgentId);
-const didCurrentUserAnswer = computed(
-  () =>
-    !!acceptedByAgentId.value && acceptedByAgentId.value === currentUserId.value
-);
 const conversationAssignee = computed(() => {
   const conversation = store.getters.getConversationById?.(
     conversationId?.value
@@ -124,43 +120,48 @@ const durationSeconds = computed(() => {
 
 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) {
-    return isOutbound.value
-      ? 'CONVERSATION.VOICE_CALL.OUTGOING_CALL'
-      : 'CONVERSATION.VOICE_CALL.INCOMING_CALL';
-  }
   if (isFailed.value) {
     return isOutbound.value
       ? 'CONVERSATION.VOICE_CALL.NO_ANSWER_OUTBOUND_LABEL'
       : 'CONVERSATION.VOICE_CALL.MISSED_CALL';
   }
-  return 'CONVERSATION.VOICE_CALL.INCOMING_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 subtext = computed(() => {
-  if (status.value === VOICE_CALL_STATUS.RINGING) {
-    return isOutbound.value
-      ? t('CONVERSATION.VOICE_CALL.CALLING')
-      : 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 null;
-    if (didCurrentUserAnswer.value) {
-      return t('CONVERSATION.VOICE_CALL.YOU_ANSWERED');
-    }
-    if (displayAgentName.value) {
-      return t('CONVERSATION.VOICE_CALL.AGENT_ANSWERED', {
-        agentName: displayAgentName.value,
-      });
-    }
-    return null;
+    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');
     }
@@ -171,6 +172,10 @@ const subtext = computed(() => {
     }
     return t('CONVERSATION.VOICE_CALL.MISSED_CALL_INBOUND_SUBTEXT');
   }
+  // 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');
 });
 

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);
@@ -215,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/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/widgets/WootWriter/Editor.vue

@@ -589,11 +589,11 @@ function isCmdPlusEnterToSendEnabled() {
 useKeyboardEvents({
   'Alt+KeyP': {
     action: focusEditorInputField,
-    allowOnFocusedInput: true,
+    allowOnFocusedInput: false,
   },
   'Alt+KeyL': {
     action: focusEditorInputField,
-    allowOnFocusedInput: true,
+    allowOnFocusedInput: false,
   },
 });
 

app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue

@@ -105,11 +105,11 @@ export default {
     const keyboardEvents = {
       'Alt+KeyP': {
         action: () => handleNoteClick(),
-        allowOnFocusedInput: true,
+        allowOnFocusedInput: false,
       },
       'Alt+KeyL': {
         action: () => handleReplyClick(),
-        allowOnFocusedInput: true,
+        allowOnFocusedInput: false,
       },
     };
     useKeyboardEvents(keyboardEvents);

app/javascript/dashboard/composables/spec/useKeyboardEvents.spec.js

@@ -1,6 +1,47 @@
+const keyboardEventsMock = vi.hoisted(() => ({
+  mountedCallbacks: [],
+  unmountedCallbacks: [],
+  registeredKeybindings: {},
+}));
+
+vi.mock('vue', async importOriginal => ({
+  ...(await importOriginal()),
+  onMounted: vi.fn(callback =>
+    keyboardEventsMock.mountedCallbacks.push(callback)
+  ),
+  onUnmounted: vi.fn(callback =>
+    keyboardEventsMock.unmountedCallbacks.push(callback)
+  ),
+}));
+
+vi.mock('dashboard/composables/useDetectKeyboardLayout', () => ({
+  useDetectKeyboardLayout: vi.fn(() => Promise.resolve('QWERTY')),
+}));
+
+vi.mock('tinykeys', () => ({
+  createKeybindingsHandler: vi.fn(keybindings => {
+    keyboardEventsMock.registeredKeybindings = keybindings;
+    return event => keybindings[event.shortcut]?.(event);
+  }),
+}));
+
+import { useDetectKeyboardLayout } from 'dashboard/composables/useDetectKeyboardLayout';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import { LAYOUT_QWERTZ } from 'shared/helpers/KeyboardHelpers';
+
+const mount = async events => {
+  useKeyboardEvents(events);
+  await keyboardEventsMock.mountedCallbacks[0]();
+  return keyboardEventsMock.registeredKeybindings;
+};
 
 describe('useKeyboardEvents', () => {
+  beforeEach(() => {
+    keyboardEventsMock.mountedCallbacks = [];
+    keyboardEventsMock.unmountedCallbacks = [];
+    keyboardEventsMock.registeredKeybindings = {};
+  });
+
   it('should be defined', () => {
     expect(useKeyboardEvents).toBeDefined();
   });
@@ -9,18 +50,46 @@ describe('useKeyboardEvents', () => {
     expect(useKeyboardEvents).toBeInstanceOf(Function);
   });
 
-  it('should set up listeners on mount and remove them on unmount', async () => {
-    const events = {
-      'ALT+KeyL': () => {},
-    };
+  it('registers keybindings on mount and removes the listener on unmount', async () => {
+    const addEventListener = vi.spyOn(document, 'addEventListener');
 
-    const mountedMock = vi.fn();
-    const unmountedMock = vi.fn();
-    useKeyboardEvents(events);
-    mountedMock();
-    unmountedMock();
+    const keybindings = await mount({ 'ALT+KeyL': () => {} });
+    expect(Object.keys(keybindings)).toEqual(['ALT+KeyL']);
 
-    expect(mountedMock).toHaveBeenCalled();
-    expect(unmountedMock).toHaveBeenCalled();
+    const { signal } = addEventListener.mock.calls[0][2];
+    expect(signal.aborted).toBe(false);
+
+    keyboardEventsMock.unmountedCallbacks[0]();
+    expect(signal.aborted).toBe(true);
+  });
+
+  it('prefixes Shift on QWERTZ layouts for the affected keys', async () => {
+    useDetectKeyboardLayout.mockResolvedValueOnce(LAYOUT_QWERTZ);
+
+    const keybindings = await mount({ 'Alt+KeyL': () => {} });
+
+    expect(Object.keys(keybindings)).toEqual(['Shift+Alt+KeyL']);
+  });
+
+  it('ignores shortcuts on focused typeable elements by default', async () => {
+    const action = vi.fn();
+    const keybindings = await mount({
+      'Alt+KeyL': { action, allowOnFocusedInput: false },
+    });
+
+    keybindings['Alt+KeyL']({ target: document.createElement('textarea') });
+
+    expect(action).not.toHaveBeenCalled();
+  });
+
+  it('runs shortcuts on focused typeable elements when allowed', async () => {
+    const action = vi.fn();
+    const keybindings = await mount({
+      'Alt+KeyL': { action, allowOnFocusedInput: true },
+    });
+
+    keybindings['Alt+KeyL']({ target: document.createElement('textarea') });
+
+    expect(action).toHaveBeenCalledTimes(1);
   });
 });

app/javascript/dashboard/helper/voice.js

@@ -1,4 +1,5 @@
 import { CONTENT_TYPES } from 'dashboard/components-next/message/constants';
+import { MESSAGE_TYPE } from 'shared/constants/messages';
 import { useCallsStore } from 'dashboard/stores/calls';
 import types from 'dashboard/store/mutation-types';
 
@@ -58,6 +59,10 @@ function extractCallerSnapshot(message) {
   // Snapshot caller info from the message at add-time so the widget can keep
   // rendering it after the user navigates away from a conversation list that
   // had the conversation hydrated (and Vuex evicts it from the store).
+  // Only incoming messages carry the contact as the sender; on outbound calls
+  // the sender is the initiating agent, so skip the snapshot and let the widget
+  // fall back to the conversation's contact (conversation.meta.sender).
+  if (message?.message_type !== MESSAGE_TYPE.INCOMING) return null;
   const sender = message?.sender;
   if (!sender) return null;
   return {

app/javascript/dashboard/i18n/locale/en/conversation.json

@@ -86,13 +86,16 @@
       "MISSED_CALL_INBOUND_SUBTEXT": "No agent picked up",
       "MISSED_CALL_DECLINED_BY": "Declined by {agentName}",
       "CALL_ENDED": "Call ended",
+      "HANDLED_BY": "Handled by {agentName}",
       "NOT_ANSWERED_YET": "Not answered yet",
       "CALLING": "Calling…",
       "THEY_ANSWERED": "They answered",
       "YOU_ANSWERED": "You answered",
       "AGENT_ANSWERED": "{agentName} answered",
       "JOIN_CALL": "Join call",
-      "CALL_BACK": "Call back"
+      "CALL_BACK": "Call back",
+      "TRANSCRIPT_SHOW_MORE": "Show more",
+      "TRANSCRIPT_SHOW_LESS": "Show less"
     },
     "HEADER": {
       "RESOLVE_ACTION": "Resolve",
@@ -312,6 +315,7 @@
       "NOT_ANSWERED_YET": "Not answered yet",
       "HANDLED_IN_ANOTHER_TAB": "Being handled in another tab",
       "REJECT_CALL": "Reject",
+      "DISMISS_CALL": "Dismiss",
       "JOIN_CALL": "Join call",
       "END_CALL": "End call",
       "MUTE": "Mute mic",

app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue

@@ -253,7 +253,6 @@ export default {
 
       if (
         this.isAWhatsAppCloudChannel &&
-        this.isEmbeddedSignupWhatsApp &&
         this.isFeatureEnabledonAccount(
           this.accountId,
           FEATURE_FLAGS.CHANNEL_VOICE

app/javascript/dashboard/stores/calls.js

@@ -54,7 +54,9 @@ export const useCallsStore = defineStore('calls', {
         return;
       }
 
-      this.calls.push({
+      // Prepend so the newest call surfaces as the primary card (incomingCalls[0])
+      // and older calls drop into the stack below it.
+      this.calls.unshift({
         ...callData,
         isActive: false,
       });