diff --git a/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue b/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
index c924dd65d..c39adcab3 100644
--- a/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
+++ b/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
@@ -14,11 +14,11 @@ const props = defineProps({
const emit = defineEmits(['removeAttachment']);
const nonRecordedAudioAttachments = computed(() => {
- return props.attachments.filter(attachment => !attachment?.isRecordedAudio);
+ return props.attachments.filter(attachment => !attachment?.isVoiceMessage);
});
const recordedAudioAttachments = computed(() =>
- props.attachments.filter(attachment => attachment.isRecordedAudio)
+ props.attachments.filter(attachment => attachment.isVoiceMessage)
);
const onRemoveAttachment = itemIndex => {
diff --git a/app/javascript/dashboard/components/widgets/ChannelItem.vue b/app/javascript/dashboard/components/widgets/ChannelItem.vue
index a8327a466..42c39ef98 100644
--- a/app/javascript/dashboard/components/widgets/ChannelItem.vue
+++ b/app/javascript/dashboard/components/widgets/ChannelItem.vue
@@ -52,13 +52,22 @@ const isActive = computed(() => {
return props.enabledFeatures.channel_tiktok && hasTiktokConfigured.value;
}
+ if (key === 'voice') {
+ return props.enabledFeatures.channel_voice;
+ }
+
+ if (key === 'whatsapp_call') {
+ return (
+ props.enabledFeatures.channel_voice &&
+ !!window.chatwootConfig?.whatsappAppId &&
+ window.chatwootConfig.whatsappAppId !== 'none'
+ );
+ }
+
if (key === 'app_store') {
return props.enabledFeatures.channel_app_store;
}
- if (key === 'voice') {
- return props.enabledFeatures.channel_voice;
- }
return [
'website',
@@ -82,7 +91,14 @@ const isComingSoon = computed(() => {
});
const isBeta = computed(() => {
- return ['tiktok', 'app_store', 'voice'].includes(props.channel.key);
+ return ['tiktok', 'voice', 'whatsapp_call', 'app_store'].includes(props.channel.key);
+});
+
+const hasVoiceBadge = computed(() => {
+ return (
+ ['voice', 'whatsapp_call'].includes(props.channel.key) &&
+ !!props.enabledFeatures.channel_voice
+ );
});
const onItemClick = () => {
@@ -99,6 +115,7 @@ const onItemClick = () => {
:icon="channel.icon"
:is-coming-soon="isComingSoon"
:is-beta="isBeta"
+ :has-voice-badge="hasVoiceBadge"
:disabled="!isActive"
@click="onItemClick"
/>
diff --git a/app/javascript/dashboard/components/widgets/FloatingCallWidget.vue b/app/javascript/dashboard/components/widgets/FloatingCallWidget.vue
deleted file mode 100644
index 4086c733c..000000000
--- a/app/javascript/dashboard/components/widgets/FloatingCallWidget.vue
+++ /dev/null
@@ -1,185 +0,0 @@
-
-
-
-
-
-
-
-
-
- {{ getCallInfo(call).contactName }}
-
-
- {{ getCallInfo(call).inboxName }}
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ getCallInfo(activeCall || incomingCalls[0]).contactName }}
-
-
- {{ formattedCallDuration }}
-
-
- {{
- incomingCalls[0]?.callDirection === 'outbound'
- ? $t('CONVERSATION.VOICE_WIDGET.OUTGOING_CALL')
- : $t('CONVERSATION.VOICE_WIDGET.INCOMING_CALL')
- }}
-
-
-
-
-
-
-
-
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue b/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue
index b0428ecdb..50bbc6ba4 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue
@@ -4,7 +4,7 @@ import { ref, onMounted, onUnmounted } from 'vue';
import WaveSurfer from 'wavesurfer.js';
import RecordPlugin from 'wavesurfer.js/dist/plugins/record.js';
import { format, intervalToDuration } from 'date-fns';
-import { convertAudio } from './utils/mp3ConversionUtils';
+import { convertAudio } from './utils/audioConversionUtils';
const props = defineProps({
audioRecordFormat: {
@@ -18,6 +18,7 @@ const emit = defineEmits([
'finishRecord',
'pause',
'play',
+ 'recordError',
]);
const waveformContainer = ref(null);
@@ -26,6 +27,7 @@ const record = ref(null);
const isRecording = ref(false);
const isPlaying = ref(false);
const hasRecording = ref(false);
+const recordedAudioUrl = ref(null);
const formatTimeProgress = time => {
const duration = intervalToDuration({ start: 0, end: time });
@@ -35,6 +37,28 @@ const formatTimeProgress = time => {
);
};
+const AUDIO_EXTENSION_MAP = {
+ 'audio/ogg': 'ogg',
+ 'audio/mp3': 'mp3',
+ 'audio/mpeg': 'mp3',
+ 'audio/wav': 'wav',
+ 'audio/webm': 'webm',
+};
+
+const getRecordPluginOptions = audioFormat => {
+ const options = {
+ scrollingWaveform: true,
+ renderRecordedAudio: false,
+ };
+ if (
+ audioFormat === 'audio/ogg' &&
+ MediaRecorder.isTypeSupported('audio/ogg;codecs=opus')
+ ) {
+ options.mimeType = 'audio/ogg;codecs=opus';
+ }
+ return options;
+};
+
const initWaveSurfer = () => {
wavesurfer.value = WaveSurfer.create({
container: waveformContainer.value,
@@ -45,10 +69,7 @@ const initWaveSurfer = () => {
barGap: 1,
barRadius: 2,
plugins: [
- RecordPlugin.create({
- scrollingWaveform: true,
- renderRecordedAudio: false,
- }),
+ RecordPlugin.create(getRecordPluginOptions(props.audioRecordFormat)),
],
});
@@ -62,21 +83,34 @@ const initWaveSurfer = () => {
});
record.value.on('record-end', async blob => {
- const audioUrl = URL.createObjectURL(blob);
- const audioBlob = await convertAudio(blob, props.audioRecordFormat);
- const fileName = `${getUuid()}.mp3`;
- const file = new File([audioBlob], fileName, {
- type: props.audioRecordFormat,
- });
- wavesurfer.value.load(audioUrl);
- emit('finishRecord', {
- name: file.name,
- type: file.type,
- size: file.size,
- file,
- });
- hasRecording.value = true;
- isRecording.value = false;
+ try {
+ const audioBlob = await convertAudio(blob, props.audioRecordFormat);
+ // Use the converted blob's actual type, which may differ from the
+ // requested format when the browser can't produce it (e.g. Safari falls
+ // back to MP3 instead of OGG). This keeps the filename, content type, and
+ // voice-note flag consistent with the real bytes.
+ const audioType = audioBlob.type || props.audioRecordFormat;
+ const ext = AUDIO_EXTENSION_MAP[audioType] || 'mp3';
+ const fileName = `${getUuid()}.${ext}`;
+ const file = new File([audioBlob], fileName, {
+ type: audioType,
+ });
+ if (recordedAudioUrl.value) URL.revokeObjectURL(recordedAudioUrl.value);
+ recordedAudioUrl.value = URL.createObjectURL(audioBlob);
+ wavesurfer.value.load(recordedAudioUrl.value);
+ emit('finishRecord', {
+ name: file.name,
+ type: file.type,
+ size: file.size,
+ file,
+ });
+ hasRecording.value = true;
+ isRecording.value = false;
+ } catch (error) {
+ isRecording.value = false;
+ hasRecording.value = false;
+ emit('recordError', { error });
+ }
});
record.value.on('record-progress', time => {
@@ -109,6 +143,10 @@ onMounted(() => {
});
onUnmounted(() => {
+ if (recordedAudioUrl.value) {
+ URL.revokeObjectURL(recordedAudioUrl.value);
+ recordedAudioUrl.value = null;
+ }
if (wavesurfer.value) {
wavesurfer.value.destroy();
}
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
index 7881a0d25..3da526fc0 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
+++ b/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,
},
});
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
index a2929f7f8..bf45cdc1c 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
+++ b/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);
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/utils/mp3ConversionUtils.js b/app/javascript/dashboard/components/widgets/WootWriter/utils/audioConversionUtils.js
similarity index 85%
rename from app/javascript/dashboard/components/widgets/WootWriter/utils/mp3ConversionUtils.js
rename to app/javascript/dashboard/components/widgets/WootWriter/utils/audioConversionUtils.js
index 3ae37911d..1b0884cbe 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/utils/mp3ConversionUtils.js
+++ b/app/javascript/dashboard/components/widgets/WootWriter/utils/audioConversionUtils.js
@@ -1,5 +1,7 @@
import lamejs from '@breezystack/lamejs';
+import { remuxWebmToOgg } from './webmOpusToOgg';
+
const writeString = (view, offset, string) => {
// eslint-disable-next-line no-plusplus
for (let i = 0; i < string.length; i++) {
@@ -139,6 +141,20 @@ export const convertAudio = async (inputBlob, outputFormat, bitrate = 128) => {
audio = await convertToWav(inputBlob);
} else if (outputFormat === 'audio/mp3') {
audio = await convertToMp3(inputBlob, bitrate);
+ } else if (outputFormat === 'audio/ogg') {
+ const inputType = inputBlob.type.split(';')[0].trim();
+ if (inputType === 'audio/webm' || inputType === 'video/webm') {
+ audio = await remuxWebmToOgg(inputBlob);
+ } else if (inputType === 'audio/ogg') {
+ audio = inputBlob;
+ } else {
+ // Browsers that record neither WebM nor OGG (e.g. Safari records
+ // audio/mp4) cannot produce OGG/Opus. Fall back to MP3 so the recording
+ // still sends as a regular audio message instead of failing. The caller
+ // keys the voice-note flag off the returned blob type, so an MP3 result
+ // is never mislabeled as an OGG/Opus voice note.
+ audio = await convertToMp3(inputBlob, bitrate);
+ }
} else {
throw new Error('Unsupported output format');
}
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/utils/webmOpusToOgg.js b/app/javascript/dashboard/components/widgets/WootWriter/utils/webmOpusToOgg.js
new file mode 100644
index 000000000..6f8ca087a
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/WootWriter/utils/webmOpusToOgg.js
@@ -0,0 +1,457 @@
+/* eslint-disable no-bitwise */
+/**
+ * WebM/Opus → OGG/Opus remuxer
+ *
+ * Chrome's MediaRecorder produces WebM containers even when
+ * `audio/ogg;codecs=opus` is requested. WhatsApp Cloud API requires
+ * proper OGG/Opus files for voice messages.
+ *
+ * This module extracts raw Opus packets from the WebM (EBML) container
+ * and repackages them into a valid OGG bitstream. The audio data itself
+ * is never re-encoded — only the container format changes.
+ *
+ * References:
+ * EBML (container for WebM): RFC 8794 — https://www.rfc-editor.org/rfc/rfc8794
+ * Matroska/WebM elements: https://www.matroska.org/technical/elements.html
+ * OGG bitstream framing: RFC 3533 — https://www.rfc-editor.org/rfc/rfc3533
+ * Opus codec: RFC 6716 — https://www.rfc-editor.org/rfc/rfc6716
+ * Opus in OGG (OpusHead/Tags): RFC 7845 — https://www.rfc-editor.org/rfc/rfc7845
+ */
+
+// ======================== EBML / WebM parser ========================
+
+const EBML_IDS = {
+ Segment: 0x18538067,
+ SegmentInfo: 0x1549a966,
+ Tracks: 0x1654ae6b,
+ TrackEntry: 0xae,
+ CodecPrivate: 0x63a2,
+ Audio: 0xe1,
+ SamplingFrequency: 0xb5,
+ Channels: 0x9f,
+ Cluster: 0x1f43b675,
+ Timecode: 0xe7,
+ SimpleBlock: 0xa3,
+ BlockGroup: 0xa0,
+ Block: 0xa1,
+};
+
+const MASTER_ELEMENTS = new Set([
+ 0x1a45dfa3, // EBML header
+ EBML_IDS.Segment,
+ EBML_IDS.SegmentInfo,
+ EBML_IDS.Tracks,
+ EBML_IDS.TrackEntry,
+ EBML_IDS.Audio,
+ EBML_IDS.Cluster,
+ EBML_IDS.BlockGroup,
+]);
+
+/** Read an EBML variable-length integer (data size). */
+function readVint(data, pos) {
+ if (pos >= data.length) return null;
+ const first = data[pos];
+ if (first === 0) return null;
+
+ let len = 1;
+ let mask = 0x80;
+ while (len <= 8 && !(first & mask)) {
+ len += 1;
+ mask >>= 1;
+ }
+ if (len > 8 || pos + len > data.length) return null;
+
+ let value = first & (mask - 1);
+ for (let i = 1; i < len; i += 1) {
+ value = value * 256 + data[pos + i];
+ }
+ return { value, length: len };
+}
+
+/** Read an EBML element ID (leading marker bits are kept). */
+function readElementId(data, pos) {
+ if (pos >= data.length) return null;
+ const first = data[pos];
+ if (first === 0) return null;
+
+ let len = 1;
+ let mask = 0x80;
+ while (len <= 4 && !(first & mask)) {
+ len += 1;
+ mask >>= 1;
+ }
+ if (len > 4 || pos + len > data.length) return null;
+
+ let id = first;
+ for (let i = 1; i < len; i += 1) {
+ id = id * 256 + data[pos + i];
+ }
+ return { id, length: len };
+}
+
+function readUintBE(data, offset, length) {
+ let v = 0;
+ for (let i = 0; i < length; i += 1) v = v * 256 + data[offset + i];
+ return v;
+}
+
+function readFloatBE(data, offset, length) {
+ if (length !== 4 && length !== 8) return NaN;
+ const buf = new ArrayBuffer(length);
+ const u8 = new Uint8Array(buf);
+ for (let i = 0; i < length; i += 1) u8[i] = data[offset + i];
+ const view = new DataView(buf);
+ return length === 4 ? view.getFloat32(0) : view.getFloat64(0);
+}
+
+/** Extract the raw Opus frame from a SimpleBlock / Block element. */
+function extractFrameFromBlock(data, offset, end) {
+ const trackVint = readVint(data, offset);
+ if (!trackVint) return null;
+ let pos = offset + trackVint.length;
+
+ // int16 relative timecode (big-endian, signed) – skip
+ pos += 2;
+ // Flags byte – skip. Lacing (Xiph/EBML/fixed-size) is NOT supported;
+ // this assumes single-frame blocks as produced by MediaRecorder.
+ const flags = data[pos];
+ const lacingBits = (flags >> 1) & 0x03;
+ if (lacingBits !== 0) {
+ // eslint-disable-next-line no-console
+ console.warn(
+ 'webmOpusToOgg: laced SimpleBlock detected (unsupported), frame may be invalid'
+ );
+ }
+ pos += 1;
+
+ if (pos >= end) return null;
+ return data.slice(pos, end);
+}
+
+/**
+ * Walk the EBML tree and collect metadata + Opus frames.
+ * We only descend into master elements and only extract the fields we need.
+ */
+function parseWebM(buffer) {
+ const data = new Uint8Array(buffer);
+ const result = {
+ channels: 1,
+ sampleRate: 48000,
+ codecPrivate: null,
+ frames: [],
+ };
+
+ function walk(start, end) {
+ let pos = start;
+ while (pos < end) {
+ const idRes = readElementId(data, pos);
+ if (!idRes) break;
+ pos += idRes.length;
+
+ const sizeRes = readVint(data, pos);
+ if (!sizeRes) break;
+ pos += sizeRes.length;
+
+ // Handle "unknown size" (all-ones VINT) by treating it as the rest of the parent
+ // Use Math.pow instead of bit-shift to avoid 32-bit overflow for 5+ byte VINTs
+ const maxVint = 2 ** (7 * sizeRes.length) - 1;
+ const elEnd =
+ sizeRes.value === maxVint ? end : Math.min(pos + sizeRes.value, end);
+
+ if (MASTER_ELEMENTS.has(idRes.id)) {
+ walk(pos, elEnd);
+ } else {
+ switch (idRes.id) {
+ case EBML_IDS.Channels:
+ result.channels = readUintBE(data, pos, sizeRes.value);
+ break;
+ case EBML_IDS.SamplingFrequency:
+ result.sampleRate = readFloatBE(data, pos, sizeRes.value);
+ break;
+ case EBML_IDS.CodecPrivate:
+ result.codecPrivate = data.slice(pos, elEnd);
+ break;
+ case EBML_IDS.SimpleBlock:
+ case EBML_IDS.Block: {
+ const frame = extractFrameFromBlock(data, pos, elEnd);
+ if (frame && frame.length > 0) result.frames.push(frame);
+ break;
+ }
+ default:
+ break;
+ }
+ }
+ pos = elEnd;
+ }
+ }
+
+ walk(0, data.length);
+ return result;
+}
+
+// ======================== OGG writer ========================
+
+/** OGG CRC-32 table (polynomial 0x04C11DB7). */
+const CRC_TABLE = (() => {
+ const t = new Uint32Array(256);
+ for (let i = 0; i < 256; i += 1) {
+ let c = i << 24;
+ for (let j = 0; j < 8; j += 1) {
+ c = ((c << 1) ^ (c & 0x80000000 ? 0x04c11db7 : 0)) >>> 0;
+ }
+ t[i] = c;
+ }
+ return t;
+})();
+
+function oggCrc32(bytes) {
+ let crc = 0;
+ for (let i = 0; i < bytes.length; i += 1) {
+ crc = (CRC_TABLE[((crc >>> 24) ^ bytes[i]) & 0xff] ^ (crc << 8)) >>> 0;
+ }
+ return crc;
+}
+
+/**
+ * Build one OGG page.
+ *
+ * @param {number} headerType 0x02 = BOS, 0x04 = EOS, 0x00 = normal
+ * @param {number} granulePosition 48 kHz sample count
+ * @param {number} serialNumber logical stream id
+ * @param {number} pageSeq page sequence counter
+ * @param {Uint8Array[]} packets one or more complete Opus packets
+ */
+function createOggPage(
+ headerType,
+ granulePosition,
+ serialNumber,
+ pageSeq,
+ packets
+) {
+ // Build the lacing / segment table
+ const segTable = [];
+ let dataLen = 0;
+ packets.forEach(pkt => {
+ let rem = pkt.length;
+ while (rem >= 255) {
+ segTable.push(255);
+ rem -= 255;
+ }
+ segTable.push(rem); // final segment (0 when pkt.length is a multiple of 255)
+ dataLen += pkt.length;
+ });
+
+ const hdrLen = 27 + segTable.length;
+ const page = new Uint8Array(hdrLen + dataLen);
+ const dv = new DataView(page.buffer);
+
+ // Capture pattern
+ page.set([0x4f, 0x67, 0x67, 0x53]); // "OggS"
+ page[4] = 0; // version
+ page[5] = headerType;
+
+ // Granule position (int64 LE)
+ dv.setUint32(6, granulePosition & 0xffffffff, true);
+ dv.setUint32(
+ 10,
+ Math.floor(granulePosition / 0x100000000) & 0xffffffff,
+ true
+ );
+
+ dv.setUint32(14, serialNumber, true); // serial
+ dv.setUint32(18, pageSeq, true); // page sequence
+ dv.setUint32(22, 0, true); // CRC placeholder
+
+ page[26] = segTable.length;
+ for (let i = 0; i < segTable.length; i += 1) page[27 + i] = segTable[i];
+
+ let off = hdrLen;
+ packets.forEach(pkt => {
+ page.set(pkt, off);
+ off += pkt.length;
+ });
+
+ // Fill in the CRC
+ dv.setUint32(22, oggCrc32(page), true);
+ return page;
+}
+
+// ======================== Opus helpers ========================
+
+/** Lookup table: frame duration in ms for each Opus TOC config index (0-31). */
+const OPUS_FRAME_MS = [
+ 10,
+ 20,
+ 40,
+ 60, // 0-3 SILK NB
+ 10,
+ 20,
+ 40,
+ 60, // 4-7 SILK MB
+ 10,
+ 20,
+ 40,
+ 60, // 8-11 SILK WB
+ 10,
+ 20, // 12-13 Hybrid SWB
+ 10,
+ 20, // 14-15 Hybrid FB
+ 2.5,
+ 5,
+ 10,
+ 20, // 16-19 CELT NB
+ 2.5,
+ 5,
+ 10,
+ 20, // 20-23 CELT WB
+ 2.5,
+ 5,
+ 10,
+ 20, // 24-27 CELT SWB
+ 2.5,
+ 5,
+ 10,
+ 20, // 28-31 CELT FB
+];
+
+/** Return the total number of 48 kHz PCM samples represented by an Opus packet. */
+function opusPacketSamples(pkt) {
+ if (!pkt || pkt.length === 0) return 960; // default 20 ms
+ const toc = pkt[0];
+ const config = (toc >> 3) & 0x1f;
+ const code = toc & 0x03;
+
+ const samplesPerFrame = ((OPUS_FRAME_MS[config] || 20) * 48000) / 1000;
+ let frameCount;
+ if (code <= 1) frameCount = code + 1;
+ else if (code === 2) frameCount = 2;
+ else frameCount = pkt.length >= 2 ? pkt[1] & 0x3f : 1;
+
+ return samplesPerFrame * frameCount;
+}
+
+function buildOpusHead(channels, sampleRate, preSkip) {
+ const buf = new Uint8Array(19);
+ const dv = new DataView(buf.buffer);
+ buf.set(new TextEncoder().encode('OpusHead'));
+ buf[8] = 1; // version
+ buf[9] = channels;
+ dv.setUint16(10, preSkip, true);
+ dv.setUint32(12, sampleRate, true);
+ dv.setInt16(16, 0, true); // output gain
+ buf[18] = 0; // channel mapping family
+ return buf;
+}
+
+function buildOpusTags() {
+ const vendor = new TextEncoder().encode('chatwoot');
+ const buf = new Uint8Array(8 + 4 + vendor.length + 4);
+ const dv = new DataView(buf.buffer);
+ buf.set(new TextEncoder().encode('OpusTags'));
+ dv.setUint32(8, vendor.length, true);
+ buf.set(vendor, 12);
+ dv.setUint32(12 + vendor.length, 0, true); // 0 user comments
+ return buf;
+}
+
+// ======================== Public API ========================
+
+const MAX_FRAMES_PER_PAGE = 50; // ~1 s at 20 ms/frame
+const MAX_SEGMENTS_PER_PAGE = 255;
+
+/**
+ * Remux a WebM/Opus blob into an OGG/Opus blob.
+ * If the input is already OGG (starts with "OggS"), it is returned as-is.
+ *
+ * @param {Blob} webmBlob
+ * @returns {Promise
} OGG/Opus blob
+ */
+export async function remuxWebmToOgg(webmBlob) {
+ const buffer = await webmBlob.arrayBuffer();
+ const bytes = new Uint8Array(buffer);
+
+ // Already OGG? Return unchanged.
+ if (
+ bytes.length >= 4 &&
+ bytes[0] === 0x4f &&
+ bytes[1] === 0x67 &&
+ bytes[2] === 0x67 &&
+ bytes[3] === 0x53
+ ) {
+ return webmBlob;
+ }
+
+ const { channels, sampleRate, codecPrivate, frames } = parseWebM(buffer);
+ if (frames.length === 0) {
+ throw new Error('No Opus frames found in WebM input');
+ }
+
+ // Extract pre-skip from the WebM CodecPrivate (which IS the OpusHead)
+ let preSkip = 312;
+ if (codecPrivate && codecPrivate.length >= 12) {
+ const magic = new TextDecoder().decode(codecPrivate.slice(0, 8));
+ if (magic === 'OpusHead') {
+ preSkip = new DataView(
+ codecPrivate.buffer,
+ codecPrivate.byteOffset,
+ codecPrivate.length
+ ).getUint16(10, true);
+ }
+ }
+
+ const serial = (Math.random() * 0x100000000) >>> 0;
+ let pageSeq = 0;
+ const pages = [];
+
+ // Page 0 – OpusHead (BOS)
+ pages.push(
+ createOggPage(0x02, 0, serial, pageSeq, [
+ buildOpusHead(channels, sampleRate, preSkip),
+ ])
+ );
+ pageSeq += 1;
+
+ // Page 1 – OpusTags
+ pages.push(createOggPage(0x00, 0, serial, pageSeq, [buildOpusTags()]));
+ pageSeq += 1;
+
+ // Audio pages
+ let granule = 0;
+ let idx = 0;
+
+ while (idx < frames.length) {
+ const packets = [];
+ let segs = 0;
+
+ while (idx < frames.length && packets.length < MAX_FRAMES_PER_PAGE) {
+ const pkt = frames[idx];
+ // createOggPage always appends a terminating lacing value, so a packet
+ // spans floor(len/255)+1 segments (including the extra 0 when len is an
+ // exact multiple of 255). Math.ceil would undercount those cases.
+ const pktSegs = Math.floor(pkt.length / 255) + 1;
+ if (segs + pktSegs > MAX_SEGMENTS_PER_PAGE && packets.length > 0) break;
+
+ packets.push(pkt);
+ segs += pktSegs;
+ granule += opusPacketSamples(pkt);
+ idx += 1;
+ }
+
+ const isLast = idx >= frames.length;
+ pages.push(
+ createOggPage(isLast ? 0x04 : 0x00, granule, serial, pageSeq, packets)
+ );
+ pageSeq += 1;
+ }
+
+ // Concatenate pages into a single buffer
+ const total = pages.reduce((s, p) => s + p.length, 0);
+ const out = new Uint8Array(total);
+ let off = 0;
+ pages.forEach(p => {
+ out.set(p, off);
+ off += p.length;
+ });
+
+ return new Blob([out], { type: 'audio/ogg' });
+}
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCallButton.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCallButton.vue
new file mode 100644
index 000000000..d0d2a2778
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCallButton.vue
@@ -0,0 +1,144 @@
+
+
+
+
+
+
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
index 4a46afe73..b48930401 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -8,13 +8,14 @@ import InboxName from '../InboxName.vue';
import MoreActions from './MoreActions.vue';
import Avatar from 'next/avatar/Avatar.vue';
import SLACardLabel from './components/SLACardLabel.vue';
+import ConversationCallButton from './ConversationCallButton.vue';
import wootConstants from 'dashboard/constants/globals';
import { conversationListPageURL } from 'dashboard/helper/URLHelper';
import { snoozedReopenTime } from 'dashboard/helper/snoozeHelpers';
import { useInbox } from 'dashboard/composables/useInbox';
+import { useAlert } from 'dashboard/composables';
import { useI18n } from 'vue-i18n';
import { copyTextToClipboard } from 'shared/helpers/clipboard';
-import { useAlert } from 'dashboard/composables';
const props = defineProps({
chat: {
@@ -172,6 +173,7 @@ const copyConversationId = async () => {
:parent-width="width"
class="hidden md:flex"
/>
+