feat: introduce voice call dashboard (#14954)
This commit is contained in:
Sivin Varghese
@@ -0,0 +1,237 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { relativeDayTimestamp } from 'shared/helpers/timeHelper';
|
||||
import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
|
||||
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
||||
import AudioPlayer from 'dashboard/components-next/audio/AudioPlayer.vue';
|
||||
import {
|
||||
VOICE_CALL_DIRECTION,
|
||||
VOICE_CALL_STATUS,
|
||||
} from 'dashboard/components-next/message/constants';
|
||||
import CallStatusBadge from './CallStatusBadge.vue';
|
||||
import { CALL_KIND, getCallKind } from './constants';
|
||||
|
||||
const props = defineProps({
|
||||
call: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
|
||||
const kind = computed(() => getCallKind(props.call));
|
||||
|
||||
const contactName = computed(
|
||||
() => props.call.contact.name || props.call.contact.phoneNumber
|
||||
);
|
||||
|
||||
const agentActionLabel = computed(() => {
|
||||
if (!props.call.agent) return '';
|
||||
if (kind.value === CALL_KIND.OUTGOING) return t('CALLS_PAGE.ROW.DIALED_BY');
|
||||
if (kind.value === CALL_KIND.INCOMING) return t('CALLS_PAGE.ROW.PICKED_BY');
|
||||
// Ongoing collapses direction, so resolve dialed-vs-picked from the raw value.
|
||||
if (kind.value === CALL_KIND.ONGOING) {
|
||||
return props.call.direction === VOICE_CALL_DIRECTION.OUTBOUND
|
||||
? t('CALLS_PAGE.ROW.DIALED_BY')
|
||||
: t('CALLS_PAGE.ROW.PICKED_BY');
|
||||
}
|
||||
return '';
|
||||
});
|
||||
|
||||
const resultLabel = computed(() => {
|
||||
if (kind.value === CALL_KIND.MISSED) return t('CALLS_PAGE.ROW.NO_AGENT');
|
||||
if (kind.value === CALL_KIND.NO_REPLY) {
|
||||
return t('CALLS_PAGE.ROW.NO_CONTACT_ANSWER');
|
||||
}
|
||||
if (kind.value === CALL_KIND.FAILED) return t('CALLS_PAGE.ROW.FAILED');
|
||||
if (kind.value === CALL_KIND.ONGOING) {
|
||||
return props.call.status === VOICE_CALL_STATUS.RINGING
|
||||
? t('CALLS_PAGE.ROW.RINGING')
|
||||
: t('CALLS_PAGE.ROW.IN_PROGRESS');
|
||||
}
|
||||
return t('CALLS_PAGE.ROW.ANSWERED');
|
||||
});
|
||||
|
||||
const providerIcon = computed(() =>
|
||||
props.call.provider === 'whatsapp' ? 'i-woot-whatsapp' : 'i-lucide-phone'
|
||||
);
|
||||
|
||||
const createdAtLabel = computed(() =>
|
||||
relativeDayTimestamp(props.call.createdAt, t('CALLS_PAGE.ROW.YESTERDAY'))
|
||||
);
|
||||
|
||||
const conversationRoute = computed(() => ({
|
||||
name: 'inbox_conversation',
|
||||
params: {
|
||||
accountId: route.params.accountId,
|
||||
conversation_id: props.call.conversation.displayId,
|
||||
},
|
||||
query: { messageId: props.call.messageId },
|
||||
}));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col gap-2 py-3.5 border-b border-n-weak lg:hidden">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<Avatar
|
||||
:src="call.contact.avatar"
|
||||
:name="contactName"
|
||||
:size="24"
|
||||
rounded-full
|
||||
/>
|
||||
<span
|
||||
v-tooltip.top="{ content: contactName, delay: { show: 500, hide: 0 } }"
|
||||
class="text-heading-3 font-medium truncate text-n-slate-12 min-w-0"
|
||||
>
|
||||
{{ contactName }}
|
||||
</span>
|
||||
<CallStatusBadge :kind="kind" class="ms-auto shrink-0" />
|
||||
<RouterLink
|
||||
:to="conversationRoute"
|
||||
class="inline-flex items-center h-6 gap-1 px-2 text-label-small outline outline-1 -outline-offset-1 rounded-md outline-n-weak text-n-slate-11 hover:bg-n-alpha-1 shrink-0"
|
||||
>
|
||||
<Icon icon="i-lucide-message-circle" class="size-3.5 text-n-slate-11" />
|
||||
{{ call.conversation.displayId }}
|
||||
<Icon icon="i-lucide-arrow-up-right" class="size-3.5 text-n-slate-11" />
|
||||
</RouterLink>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 min-w-0">
|
||||
<template v-if="agentActionLabel">
|
||||
<span class="text-label-small text-n-slate-10 shrink-0">
|
||||
{{ agentActionLabel }}
|
||||
</span>
|
||||
<Avatar
|
||||
:src="call.agent.avatar"
|
||||
:name="call.agent.name"
|
||||
:size="20"
|
||||
rounded-full
|
||||
/>
|
||||
<span class="text-body-main truncate text-n-slate-12 min-w-0">
|
||||
{{ call.agent.name }}
|
||||
</span>
|
||||
</template>
|
||||
<span v-else class="text-body-main truncate text-n-slate-10 min-w-0">
|
||||
{{ resultLabel }}
|
||||
</span>
|
||||
<span class="w-px h-3 bg-n-strong shrink-0" />
|
||||
<Icon :icon="providerIcon" class="size-4 text-n-slate-11 shrink-0" />
|
||||
<span class="text-body-main truncate text-n-slate-11 min-w-0">
|
||||
{{ call.inbox.name }}
|
||||
</span>
|
||||
<span
|
||||
v-if="!call.recordingUrl"
|
||||
class="ms-auto shrink-0 text-label-small text-n-slate-11 tabular-nums"
|
||||
>
|
||||
{{ createdAtLabel }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="call.recordingUrl"
|
||||
class="flex items-center gap-2 min-w-0 justify-between"
|
||||
>
|
||||
<AudioPlayer
|
||||
:src="call.recordingUrl"
|
||||
:fallback-duration="call.durationSeconds || 0"
|
||||
class="flex-1 sm:flex-[0.7] min-w-0"
|
||||
/>
|
||||
<span class="shrink-0 text-label-small text-n-slate-11 tabular-nums">
|
||||
{{ createdAtLabel }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="hidden items-center gap-x-1.5 gap-y-2.5 border-b border-n-weak lg:flex lg:items-center lg:gap-1.5"
|
||||
>
|
||||
<div class="flex items-center gap-2.5 min-w-0 w-40 shrink-0 py-3.5">
|
||||
<Avatar
|
||||
:src="call.contact.avatar"
|
||||
:name="contactName"
|
||||
:size="24"
|
||||
rounded-full
|
||||
/>
|
||||
<span
|
||||
v-tooltip.top="{ content: contactName, delay: { show: 500, hide: 0 } }"
|
||||
class="text-heading-3 font-medium truncate text-n-slate-12"
|
||||
>
|
||||
{{ contactName }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-nowrap items-center gap-x-2 gap-y-2 min-w-0 grow shrink"
|
||||
>
|
||||
<div class="flex items-center gap-x-2 min-w-0 lg:contents py-3.5">
|
||||
<CallStatusBadge :kind="kind" class="shrink-0" />
|
||||
<template v-if="agentActionLabel">
|
||||
<span
|
||||
class="text-label-small text-n-slate-10 truncate min-w-0 shrink min-w-8"
|
||||
>
|
||||
{{ agentActionLabel }}
|
||||
</span>
|
||||
<span class="flex items-center gap-1.5 min-w-16 shrink-[20]">
|
||||
<Avatar
|
||||
:src="call.agent.avatar"
|
||||
:name="call.agent.name"
|
||||
:size="20"
|
||||
rounded-full
|
||||
/>
|
||||
<span
|
||||
v-tooltip.top="{
|
||||
content: call.agent.name,
|
||||
delay: { show: 500, hide: 0 },
|
||||
}"
|
||||
class="text-body-main truncate text-n-slate-12 min-w-0"
|
||||
>
|
||||
{{ call.agent.name }}
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
<span
|
||||
v-else-if="resultLabel"
|
||||
class="text-body-main truncate text-n-slate-10 min-w-0 shrink-[20]"
|
||||
>
|
||||
{{ resultLabel }}
|
||||
</span>
|
||||
</div>
|
||||
<AudioPlayer
|
||||
v-if="call.recordingUrl"
|
||||
:src="call.recordingUrl"
|
||||
:fallback-duration="call.durationSeconds || 0"
|
||||
class="w-auto min-w-44 shrink mx-auto"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-tooltip.top="{
|
||||
content: call.inbox.name,
|
||||
delay: { show: 500, hide: 0 },
|
||||
}"
|
||||
class="flex items-center gap-1.5 justify-start min-w-14 shrink-[100] py-3.5"
|
||||
>
|
||||
<Icon :icon="providerIcon" class="size-4 text-n-slate-11 shrink-0" />
|
||||
<span class="text-body-main truncate text-n-slate-11">
|
||||
{{ call.inbox.name }}
|
||||
</span>
|
||||
</div>
|
||||
<RouterLink
|
||||
:to="conversationRoute"
|
||||
class="inline-flex items-center h-6 gap-1 px-2 text-label-small py-3.5 outline outline-1 -outline-offset-1 rounded-md outline-n-weak text-n-slate-11 hover:bg-n-alpha-1 shrink-0 justify-self-start"
|
||||
>
|
||||
<Icon icon="i-lucide-message-circle" class="size-3.5 text-n-slate-11" />
|
||||
{{ call.conversation.displayId }}
|
||||
<Icon icon="i-lucide-arrow-up-right" class="size-3.5 text-n-slate-11" />
|
||||
</RouterLink>
|
||||
<span
|
||||
v-tooltip.top="{
|
||||
content: createdAtLabel,
|
||||
delay: { show: 500, hide: 0 },
|
||||
}"
|
||||
class="text-label-small text-end text-n-slate-11 truncate py-3.5 tabular-nums justify-self-end w-16 shrink-0"
|
||||
>
|
||||
{{ createdAtLabel }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,158 @@
|
||||
<script setup>
|
||||
import { computed, getCurrentInstance, ref, useTemplateRef } from 'vue';
|
||||
import { downloadFile } from '@chatwoot/utils';
|
||||
import { useEmitter } from 'dashboard/composables/emitter';
|
||||
import { emitter } from 'shared/helpers/mitt';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
||||
|
||||
const props = defineProps({
|
||||
src: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
fallbackDuration: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
|
||||
const PLAYBACK_SPEEDS = [1, 1.5, 2];
|
||||
|
||||
const audioPlayer = useTemplateRef('audioPlayer');
|
||||
const { uid } = getCurrentInstance();
|
||||
|
||||
const isPlaying = ref(false);
|
||||
const currentTime = ref(0);
|
||||
const duration = ref(props.fallbackDuration);
|
||||
const playbackSpeed = ref(1);
|
||||
|
||||
const onLoadedMetadata = () => {
|
||||
const loadedDuration = audioPlayer.value?.duration;
|
||||
if (Number.isFinite(loadedDuration)) duration.value = loadedDuration;
|
||||
};
|
||||
|
||||
const formatTime = time => {
|
||||
if (!time || Number.isNaN(time)) return '00:00';
|
||||
const minutes = Math.floor(time / 60);
|
||||
const seconds = Math.floor(time % 60);
|
||||
return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
const playbackSpeedLabel = computed(() => `${playbackSpeed.value}x`);
|
||||
|
||||
const displayedTime = computed(() =>
|
||||
formatTime(
|
||||
isPlaying.value || currentTime.value ? currentTime.value : duration.value
|
||||
)
|
||||
);
|
||||
|
||||
// Only one recording should play at a time across the list.
|
||||
useEmitter('pause_playing_audio', currentPlayingId => {
|
||||
if (currentPlayingId !== uid && isPlaying.value) {
|
||||
audioPlayer.value?.pause();
|
||||
isPlaying.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
const playOrPause = () => {
|
||||
if (isPlaying.value) {
|
||||
audioPlayer.value.pause();
|
||||
isPlaying.value = false;
|
||||
} else {
|
||||
emitter.emit('pause_playing_audio', uid);
|
||||
audioPlayer.value.play();
|
||||
isPlaying.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
const onTimeUpdate = () => {
|
||||
currentTime.value = audioPlayer.value?.currentTime;
|
||||
};
|
||||
|
||||
const seek = event => {
|
||||
const time = Number(event.target.value);
|
||||
audioPlayer.value.currentTime = time;
|
||||
currentTime.value = time;
|
||||
};
|
||||
|
||||
const onEnd = () => {
|
||||
isPlaying.value = false;
|
||||
currentTime.value = 0;
|
||||
};
|
||||
|
||||
const changePlaybackSpeed = () => {
|
||||
const currentIndex = PLAYBACK_SPEEDS.indexOf(playbackSpeed.value);
|
||||
playbackSpeed.value =
|
||||
PLAYBACK_SPEEDS[(currentIndex + 1) % PLAYBACK_SPEEDS.length];
|
||||
audioPlayer.value.playbackRate = playbackSpeed.value;
|
||||
};
|
||||
|
||||
const downloadRecording = () => {
|
||||
downloadFile({ url: props.src, type: 'audio' });
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex items-center justify-center h-9 gap-2 px-2 rounded-full bg-n-alpha-1 dark:bg-n-alpha-2 overflow-hidden"
|
||||
@click.stop
|
||||
>
|
||||
<audio
|
||||
ref="audioPlayer"
|
||||
class="hidden"
|
||||
playsinline
|
||||
@loadedmetadata="onLoadedMetadata"
|
||||
@timeupdate="onTimeUpdate"
|
||||
@ended="onEnd"
|
||||
>
|
||||
<source :src="src" />
|
||||
</audio>
|
||||
<Button
|
||||
variant="ghost"
|
||||
color="slate"
|
||||
size="xs"
|
||||
class="!w-6 !p-0 text-n-slate-12"
|
||||
@click="playOrPause"
|
||||
>
|
||||
<template #icon>
|
||||
<Icon
|
||||
:icon="isPlaying ? 'i-lucide-pause' : 'i-lucide-play'"
|
||||
class="size-4 flex-shrink-0"
|
||||
/>
|
||||
</template>
|
||||
</Button>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
:max="duration || 0"
|
||||
:value="currentTime"
|
||||
class="flex-1 min-w-0 lg:grow-0 lg:basis-24 h-1 rounded-lg appearance-none cursor-pointer bg-n-slate-12/30 accent-n-slate-11"
|
||||
@input="seek"
|
||||
/>
|
||||
<span class="text-sm tabular-nums text-n-slate-11 shrink-0">
|
||||
{{ displayedTime }}
|
||||
</span>
|
||||
<div class="w-px h-3.5 bg-n-slate-6 shrink-0" />
|
||||
<Button
|
||||
variant="ghost"
|
||||
color="slate"
|
||||
size="xs"
|
||||
:label="playbackSpeedLabel"
|
||||
class="!px-1 min-w-6 !text-n-slate-11"
|
||||
@click="changePlaybackSpeed"
|
||||
/>
|
||||
<div class="w-px h-3.5 bg-n-slate-6 shrink-0" />
|
||||
<Button
|
||||
variant="ghost"
|
||||
color="slate"
|
||||
size="xs"
|
||||
class="!w-6 !p-0 text-n-slate-11"
|
||||
@click="downloadRecording"
|
||||
>
|
||||
<template #icon>
|
||||
<Icon icon="i-lucide-download" class="size-4 flex-shrink-0" />
|
||||
</template>
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,56 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
||||
import { CALL_KIND } from './constants';
|
||||
|
||||
const props = defineProps({
|
||||
kind: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const KIND_CONFIG = {
|
||||
[CALL_KIND.ONGOING]: {
|
||||
icon: 'i-lucide-phone-call',
|
||||
class: 'bg-n-teal-3 text-n-teal-11',
|
||||
},
|
||||
[CALL_KIND.INCOMING]: {
|
||||
icon: 'i-lucide-phone-incoming',
|
||||
class: 'bg-n-slate-3 text-n-slate-11',
|
||||
},
|
||||
[CALL_KIND.OUTGOING]: {
|
||||
icon: 'i-lucide-phone-outgoing',
|
||||
class: 'bg-n-slate-3 text-n-slate-11',
|
||||
},
|
||||
[CALL_KIND.MISSED]: {
|
||||
icon: 'i-lucide-phone-missed',
|
||||
class: 'bg-n-ruby-3 text-n-ruby-11',
|
||||
},
|
||||
[CALL_KIND.NO_REPLY]: {
|
||||
icon: 'i-lucide-phone-outgoing',
|
||||
class: 'bg-n-amber-3 text-n-amber-11',
|
||||
},
|
||||
[CALL_KIND.FAILED]: {
|
||||
icon: 'i-lucide-phone-off',
|
||||
class: 'bg-n-ruby-3 text-n-ruby-11',
|
||||
},
|
||||
};
|
||||
|
||||
const config = computed(() => KIND_CONFIG[props.kind]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span
|
||||
class="inline-flex items-center justify-center w-20 gap-1.5 h-6 px-1 rounded-md text-label-small shrink-0"
|
||||
:class="config.class"
|
||||
>
|
||||
<Icon :icon="config.icon" class="size-3 flex-shrink-0" />
|
||||
<span class="truncate">{{
|
||||
t(`CALLS_PAGE.STATUS.${kind.toUpperCase()}`)
|
||||
}}</span>
|
||||
</span>
|
||||
</template>
|
||||
@@ -0,0 +1,34 @@
|
||||
<script setup>
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const setupVoiceChannel = () => {
|
||||
router.push({
|
||||
name: 'settings_inbox_new',
|
||||
params: { accountId: route.params.accountId },
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<EmptyStateLayout
|
||||
:title="t('CALLS_PAGE.SETUP.TITLE')"
|
||||
:subtitle="t('CALLS_PAGE.SETUP.SUBTITLE')"
|
||||
:show-backdrop="false"
|
||||
:action-perms="['administrator']"
|
||||
>
|
||||
<template #actions>
|
||||
<Button
|
||||
:label="t('CALLS_PAGE.SETUP.ACTION')"
|
||||
icon="i-lucide-plus"
|
||||
@click="setupVoiceChannel"
|
||||
/>
|
||||
</template>
|
||||
</EmptyStateLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,250 @@
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { OnClickOutside } from '@vueuse/components';
|
||||
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 Icon from 'dashboard/components-next/icon/Icon.vue';
|
||||
|
||||
const props = defineProps({
|
||||
// Null while a fetch is in flight so stale counts are never shown.
|
||||
totalCount: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
agents: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
inboxes: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
// Self-scoped viewers only ever see their own calls, so the assignee filter
|
||||
// is meaningless for them — only admins get it.
|
||||
showAssignee: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const activity = defineModel('activity', { type: String, default: null });
|
||||
const assigneeId = defineModel('assigneeId', { type: Number, default: null });
|
||||
const inboxId = defineModel('inboxId', { type: Number, default: null });
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const ACTIVITY_ICONS = {
|
||||
missed: 'i-lucide-phone-missed',
|
||||
no_reply: 'i-lucide-phone-outgoing',
|
||||
incoming: 'i-lucide-phone-incoming',
|
||||
outgoing: 'i-lucide-phone-outgoing',
|
||||
in_progress: 'i-lucide-phone-call',
|
||||
};
|
||||
|
||||
const BASE_ACTIVITIES = ['missed', 'no_reply'];
|
||||
const OTHER_ACTIVITIES = ['incoming', 'outgoing', 'in_progress'];
|
||||
|
||||
// A single open-menu identifier keeps the three dropdowns mutually exclusive:
|
||||
// opening one closes the others without any cross-wiring.
|
||||
const openMenu = ref(null); // 'activity' | 'assignee' | 'more' | null
|
||||
|
||||
const toggleMenu = name => {
|
||||
openMenu.value = openMenu.value === name ? null : name;
|
||||
};
|
||||
|
||||
// Each dropdown wrapper closes itself on outside clicks. The guard keeps the
|
||||
// other two wrappers (which the click is also outside of) from closing a
|
||||
// menu the user is interacting with.
|
||||
const closeOnOutside = name => {
|
||||
if (openMenu.value === name) openMenu.value = null;
|
||||
};
|
||||
|
||||
const activityLabel = value => t(`CALLS_PAGE.FILTERS.${value.toUpperCase()}`);
|
||||
|
||||
const activeChipLabel = computed(() => {
|
||||
const label = activityLabel(activity.value);
|
||||
return props.totalCount === null ? label : `${label} (${props.totalCount})`;
|
||||
});
|
||||
|
||||
const inactiveChips = computed(() =>
|
||||
BASE_ACTIVITIES.filter(value => value !== activity.value)
|
||||
);
|
||||
|
||||
const otherActivityItems = computed(() =>
|
||||
OTHER_ACTIVITIES.map(value => ({
|
||||
label: activityLabel(value),
|
||||
value,
|
||||
action: 'filter',
|
||||
icon: ACTIVITY_ICONS[value],
|
||||
isSelected: activity.value === value,
|
||||
}))
|
||||
);
|
||||
|
||||
const assigneeItems = computed(() => [
|
||||
{
|
||||
label: t('CALLS_PAGE.FILTERS.ALL_ASSIGNEES'),
|
||||
value: null,
|
||||
action: 'filter',
|
||||
isSelected: !assigneeId.value,
|
||||
},
|
||||
...props.agents.map(agent => ({
|
||||
label: agent.name,
|
||||
value: agent.id,
|
||||
action: 'filter',
|
||||
thumbnail: { name: agent.name, src: agent.thumbnail },
|
||||
isSelected: assigneeId.value === agent.id,
|
||||
})),
|
||||
]);
|
||||
|
||||
const moreFiltersSections = computed(() => [
|
||||
{
|
||||
title: t('CALLS_PAGE.FILTERS.INBOX'),
|
||||
items: [
|
||||
{
|
||||
label: t('CALLS_PAGE.FILTERS.ALL_INBOXES'),
|
||||
value: null,
|
||||
action: 'inbox',
|
||||
isSelected: !inboxId.value,
|
||||
},
|
||||
...props.inboxes.map(inbox => ({
|
||||
label: inbox.name,
|
||||
value: inbox.id,
|
||||
action: 'inbox',
|
||||
isSelected: inboxId.value === inbox.id,
|
||||
})),
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
const selectedAssigneeLabel = computed(
|
||||
() =>
|
||||
props.agents.find(agent => agent.id === assigneeId.value)?.name ||
|
||||
t('CALLS_PAGE.FILTERS.ASSIGNEE')
|
||||
);
|
||||
|
||||
const hasMoreFilters = computed(() => Boolean(inboxId.value));
|
||||
|
||||
const setActivity = value => {
|
||||
openMenu.value = null;
|
||||
activity.value = value;
|
||||
};
|
||||
|
||||
const setAssignee = ({ value }) => {
|
||||
openMenu.value = null;
|
||||
assigneeId.value = value;
|
||||
};
|
||||
|
||||
const applyMoreFilter = ({ action, value }) => {
|
||||
openMenu.value = null;
|
||||
if (action === 'inbox') inboxId.value = value;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-wrap items-center justify-between gap-3">
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<span v-if="!activity" class="text-heading-3 text-n-slate-11 shrink-0">
|
||||
{{
|
||||
totalCount === null
|
||||
? t('CALLS_PAGE.ALL_CALLS')
|
||||
: t('CALLS_PAGE.ALL_CALLS_COUNT', { count: totalCount })
|
||||
}}
|
||||
</span>
|
||||
<Button
|
||||
v-else
|
||||
variant="outline"
|
||||
color="blue"
|
||||
size="sm"
|
||||
:icon="ACTIVITY_ICONS[activity]"
|
||||
class="shrink-0"
|
||||
@click="setActivity(null)"
|
||||
>
|
||||
{{ activeChipLabel }}
|
||||
<Icon icon="i-lucide-x" />
|
||||
</Button>
|
||||
<div class="w-px h-4 bg-n-strong shrink-0" />
|
||||
<Button
|
||||
v-for="chip in inactiveChips"
|
||||
:key="chip"
|
||||
variant="outline"
|
||||
color="slate"
|
||||
size="sm"
|
||||
:icon="ACTIVITY_ICONS[chip]"
|
||||
:label="activityLabel(chip)"
|
||||
class="shrink-0 text-n-slate-12"
|
||||
@click="setActivity(chip)"
|
||||
/>
|
||||
<OnClickOutside
|
||||
class="relative shrink-0"
|
||||
@trigger="closeOnOutside('activity')"
|
||||
>
|
||||
<Button
|
||||
variant="outline"
|
||||
color="slate"
|
||||
size="sm"
|
||||
icon="i-lucide-phone"
|
||||
class="text-n-slate-12"
|
||||
@click="toggleMenu('activity')"
|
||||
>
|
||||
{{ t('CALLS_PAGE.FILTERS.OTHER_ACTIVITY') }}
|
||||
<Icon icon="i-lucide-chevron-down" class="text-n-slate-11" />
|
||||
</Button>
|
||||
<DropdownMenu
|
||||
v-if="openMenu === 'activity'"
|
||||
:menu-items="otherActivityItems"
|
||||
class="mt-1 start-0 top-full w-44"
|
||||
@action="setActivity($event.value)"
|
||||
/>
|
||||
</OnClickOutside>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 shrink-0">
|
||||
<OnClickOutside
|
||||
v-if="showAssignee"
|
||||
class="relative"
|
||||
@trigger="closeOnOutside('assignee')"
|
||||
>
|
||||
<Button
|
||||
variant="outline"
|
||||
color="slate"
|
||||
size="sm"
|
||||
icon="i-lucide-user-round-cog"
|
||||
class="max-w-52 text-n-slate-12"
|
||||
@click="toggleMenu('assignee')"
|
||||
>
|
||||
<span class="truncate">{{ selectedAssigneeLabel }}</span>
|
||||
<Icon icon="i-lucide-chevron-down" class="text-n-slate-11 shrink-0" />
|
||||
</Button>
|
||||
<DropdownMenu
|
||||
v-if="openMenu === 'assignee'"
|
||||
:menu-items="assigneeItems"
|
||||
show-search
|
||||
class="mt-1 end-0 top-full w-56 max-h-72"
|
||||
@action="setAssignee"
|
||||
/>
|
||||
</OnClickOutside>
|
||||
<OnClickOutside class="relative" @trigger="closeOnOutside('more')">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
icon="i-lucide-list-filter"
|
||||
:color="hasMoreFilters ? 'blue' : 'slate'"
|
||||
:class="hasMoreFilters ? '' : 'text-n-slate-12'"
|
||||
@click="toggleMenu('more')"
|
||||
>
|
||||
{{ t('CALLS_PAGE.FILTERS.MORE_FILTERS') }}
|
||||
<Icon
|
||||
icon="i-lucide-chevron-down"
|
||||
:class="hasMoreFilters ? '' : 'text-n-slate-11'"
|
||||
/>
|
||||
</Button>
|
||||
<DropdownMenu
|
||||
v-if="openMenu === 'more'"
|
||||
:menu-sections="moreFiltersSections"
|
||||
class="mt-1 end-0 top-full w-56 max-h-80"
|
||||
@action="applyMoreFilter"
|
||||
/>
|
||||
</OnClickOutside>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,51 @@
|
||||
import {
|
||||
VOICE_CALL_STATUS,
|
||||
VOICE_CALL_DIRECTION,
|
||||
} from 'dashboard/components-next/message/constants';
|
||||
|
||||
export const CALL_KIND = {
|
||||
ONGOING: 'ongoing',
|
||||
INCOMING: 'incoming',
|
||||
OUTGOING: 'outgoing',
|
||||
MISSED: 'missed',
|
||||
NO_REPLY: 'no_reply',
|
||||
FAILED: 'failed',
|
||||
};
|
||||
|
||||
// The API returns display values: status (ringing/in-progress/completed/
|
||||
// no-answer/failed) and direction (inbound/outbound). The list UI presents
|
||||
// them as a single "kind" per row.
|
||||
export const getCallKind = call => {
|
||||
if (
|
||||
[VOICE_CALL_STATUS.RINGING, VOICE_CALL_STATUS.IN_PROGRESS].includes(
|
||||
call.status
|
||||
)
|
||||
) {
|
||||
return CALL_KIND.ONGOING;
|
||||
}
|
||||
if (
|
||||
[VOICE_CALL_STATUS.FAILED, VOICE_CALL_STATUS.REJECTED].includes(call.status)
|
||||
) {
|
||||
return CALL_KIND.FAILED;
|
||||
}
|
||||
const isInbound = call.direction === VOICE_CALL_DIRECTION.INBOUND;
|
||||
if (call.status === VOICE_CALL_STATUS.NO_ANSWER) {
|
||||
return isInbound ? CALL_KIND.MISSED : CALL_KIND.NO_REPLY;
|
||||
}
|
||||
return isInbound ? CALL_KIND.INCOMING : CALL_KIND.OUTGOING;
|
||||
};
|
||||
|
||||
// Filter chips map to the status/direction params supported by CallFinder.
|
||||
export const CALL_ACTIVITY_PARAMS = {
|
||||
missed: {
|
||||
status: VOICE_CALL_STATUS.NO_ANSWER,
|
||||
direction: VOICE_CALL_DIRECTION.INBOUND,
|
||||
},
|
||||
no_reply: {
|
||||
status: VOICE_CALL_STATUS.NO_ANSWER,
|
||||
direction: VOICE_CALL_DIRECTION.OUTBOUND,
|
||||
},
|
||||
incoming: { direction: VOICE_CALL_DIRECTION.INBOUND },
|
||||
outgoing: { direction: VOICE_CALL_DIRECTION.OUTBOUND },
|
||||
in_progress: { status: VOICE_CALL_STATUS.IN_PROGRESS },
|
||||
};
|
||||
@@ -0,0 +1,158 @@
|
||||
<script setup>
|
||||
import { computed, getCurrentInstance, ref, useTemplateRef } from 'vue';
|
||||
import { downloadFile } from '@chatwoot/utils';
|
||||
import { useEmitter } from 'dashboard/composables/emitter';
|
||||
import { emitter } from 'shared/helpers/mitt';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
||||
|
||||
const props = defineProps({
|
||||
src: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
fallbackDuration: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
|
||||
const PLAYBACK_SPEEDS = [1, 1.5, 2];
|
||||
|
||||
const audioPlayer = useTemplateRef('audioPlayer');
|
||||
const { uid } = getCurrentInstance();
|
||||
|
||||
const isPlaying = ref(false);
|
||||
const currentTime = ref(0);
|
||||
const duration = ref(props.fallbackDuration);
|
||||
const playbackSpeed = ref(1);
|
||||
|
||||
const onLoadedMetadata = () => {
|
||||
const loadedDuration = audioPlayer.value?.duration;
|
||||
if (Number.isFinite(loadedDuration)) duration.value = loadedDuration;
|
||||
};
|
||||
|
||||
const formatTime = time => {
|
||||
if (!time || Number.isNaN(time)) return '00:00';
|
||||
const minutes = Math.floor(time / 60);
|
||||
const seconds = Math.floor(time % 60);
|
||||
return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
const playbackSpeedLabel = computed(() => `${playbackSpeed.value}x`);
|
||||
|
||||
const displayedTime = computed(() =>
|
||||
formatTime(
|
||||
isPlaying.value || currentTime.value ? currentTime.value : duration.value
|
||||
)
|
||||
);
|
||||
|
||||
// Only one recording should play at a time across the list.
|
||||
useEmitter('pause_playing_audio', currentPlayingId => {
|
||||
if (currentPlayingId !== uid && isPlaying.value) {
|
||||
audioPlayer.value?.pause();
|
||||
isPlaying.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
const playOrPause = () => {
|
||||
if (isPlaying.value) {
|
||||
audioPlayer.value.pause();
|
||||
isPlaying.value = false;
|
||||
} else {
|
||||
emitter.emit('pause_playing_audio', uid);
|
||||
audioPlayer.value.play();
|
||||
isPlaying.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
const onTimeUpdate = () => {
|
||||
currentTime.value = audioPlayer.value?.currentTime;
|
||||
};
|
||||
|
||||
const seek = event => {
|
||||
const time = Number(event.target.value);
|
||||
audioPlayer.value.currentTime = time;
|
||||
currentTime.value = time;
|
||||
};
|
||||
|
||||
const onEnd = () => {
|
||||
isPlaying.value = false;
|
||||
currentTime.value = 0;
|
||||
};
|
||||
|
||||
const changePlaybackSpeed = () => {
|
||||
const currentIndex = PLAYBACK_SPEEDS.indexOf(playbackSpeed.value);
|
||||
playbackSpeed.value =
|
||||
PLAYBACK_SPEEDS[(currentIndex + 1) % PLAYBACK_SPEEDS.length];
|
||||
audioPlayer.value.playbackRate = playbackSpeed.value;
|
||||
};
|
||||
|
||||
const downloadRecording = () => {
|
||||
downloadFile({ url: props.src, type: 'audio' });
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex items-center justify-center h-8 gap-2 px-2 rounded-full bg-n-alpha-1 dark:bg-n-alpha-2 overflow-hidden"
|
||||
@click.stop
|
||||
>
|
||||
<audio
|
||||
ref="audioPlayer"
|
||||
class="hidden"
|
||||
playsinline
|
||||
@loadedmetadata="onLoadedMetadata"
|
||||
@timeupdate="onTimeUpdate"
|
||||
@ended="onEnd"
|
||||
>
|
||||
<source :src="src" />
|
||||
</audio>
|
||||
<Button
|
||||
variant="ghost"
|
||||
color="slate"
|
||||
size="xs"
|
||||
class="!w-6 !p-0 text-n-slate-12"
|
||||
@click="playOrPause"
|
||||
>
|
||||
<template #icon>
|
||||
<Icon
|
||||
:icon="isPlaying ? 'i-lucide-pause' : 'i-lucide-play'"
|
||||
class="size-4 flex-shrink-0"
|
||||
/>
|
||||
</template>
|
||||
</Button>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
:max="duration || 0"
|
||||
:value="currentTime"
|
||||
class="flex-1 min-w-0 lg:grow-0 lg:basis-24 h-1 rounded-lg appearance-none cursor-pointer bg-n-slate-12/30 accent-n-slate-11"
|
||||
@input="seek"
|
||||
/>
|
||||
<span class="text-sm tabular-nums text-n-slate-11 shrink-0">
|
||||
{{ displayedTime }}
|
||||
</span>
|
||||
<div class="w-px h-3.5 bg-n-slate-6 shrink-0" />
|
||||
<Button
|
||||
variant="ghost"
|
||||
color="slate"
|
||||
size="xs"
|
||||
:label="playbackSpeedLabel"
|
||||
class="!px-1 min-w-6 !text-n-slate-11"
|
||||
@click="changePlaybackSpeed"
|
||||
/>
|
||||
<div class="w-px h-3.5 bg-n-slate-6 shrink-0" />
|
||||
<Button
|
||||
variant="ghost"
|
||||
color="slate"
|
||||
size="xs"
|
||||
class="!w-6 !p-0 text-n-slate-11"
|
||||
@click="downloadRecording"
|
||||
>
|
||||
<template #icon>
|
||||
<Icon icon="i-lucide-download" class="size-4 flex-shrink-0" />
|
||||
</template>
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -2,6 +2,7 @@
|
||||
import { h, ref, computed, onMounted, watch } from 'vue';
|
||||
import { provideSidebarContext, useSidebarResize } from './provider';
|
||||
import { useAccount } from 'dashboard/composables/useAccount';
|
||||
import { useConfig } from 'dashboard/composables/useConfig';
|
||||
import { useKbd } from 'dashboard/composables/utils/useKbd';
|
||||
import { useMapGetter } from 'dashboard/composables/store';
|
||||
import { useStore } from 'vuex';
|
||||
@@ -43,7 +44,14 @@ const emit = defineEmits([
|
||||
]);
|
||||
|
||||
const { accountScopedRoute, isOnChatwootCloud } = useAccount();
|
||||
const { isEnterprise } = useConfig();
|
||||
const store = useStore();
|
||||
|
||||
// Calls run on the enterprise-only API (cloud runs enterprise); hide the entry
|
||||
// on community so it doesn't lead to a dashboard/CTA the backend can't serve.
|
||||
const isCallsAvailable = computed(
|
||||
() => isOnChatwootCloud.value || isEnterprise
|
||||
);
|
||||
const searchShortcut = useKbd([`$mod`, 'k']);
|
||||
const { t } = useI18n();
|
||||
|
||||
@@ -563,6 +571,17 @@ const menuItems = computed(() => {
|
||||
},
|
||||
],
|
||||
},
|
||||
...(isCallsAvailable.value
|
||||
? [
|
||||
{
|
||||
name: 'Calls',
|
||||
label: t('SIDEBAR.CALLS'),
|
||||
icon: 'i-lucide-phone',
|
||||
to: accountScopedRoute('calls_dashboard_index'),
|
||||
activeOn: ['calls_dashboard_index'],
|
||||
},
|
||||
]
|
||||
: []),
|
||||
{
|
||||
name: 'Contacts',
|
||||
label: t('SIDEBAR.CONTACTS'),
|
||||
|
||||
Reference in New Issue
Block a user