mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-02 20:18:08 +00:00
6bdd4f0670
This PR delivers the first slice of the voice channel: inbound call handling. When a customer calls a configured voice number, Chatwoot now creates a new conversation and shows a dedicated call bubble in the UI. As the call progresses (ringing, answered, completed), its status updates in real time in both the conversation list and the call bubble, so agents can instantly see what’s happening. This focuses on the inbound flow and is part of breaking the larger voice feature into smaller, functional, and testable units; further enhancements will follow in subsequent PRs. references: #11602 , #11481 ## Testing - Configure a Voice inbox in Chatwoot with your Twilio number. - Place a call to that number. - Verify a new conversation appears in the Voice inbox for the call. - Open it and confirm a dedicated voice call message bubble is shown. - Watch status update live (ringing/answered); hang up and see it change to completed in both the bubble and conversation list. - to test missed call status, make sure to hangup the call before the please wait while we connect you to an agent message plays ## Screens <img width="400" alt="Screenshot 2025-09-03 at 3 11 25 PM" src="https://github.com/user-attachments/assets/d6a1d2ff-2ded-47b7-9144-a9d898beb380" /> <img width="700" alt="Screenshot 2025-09-03 at 3 11 33 PM" src="https://github.com/user-attachments/assets/c25e6a1e-a885-47f7-b3d7-c3e15eef18c7" /> <img width="700" alt="Screenshot 2025-09-03 at 3 11 57 PM" src="https://github.com/user-attachments/assets/29e7366d-b1d4-4add-a062-4646d2bff435" /> <img width="442" height="255" alt="Screenshot 2025-09-04 at 11 55 01 PM" src="https://github.com/user-attachments/assets/703126f6-a448-49d9-9c02-daf3092cc7f9" /> --------- Co-authored-by: Muhsin <muhsinkeramam@gmail.com>
44 lines
1.5 KiB
Vue
44 lines
1.5 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import BaseBubble from 'next/message/bubbles/Base.vue';
|
|
import { useMessageContext } from '../provider.js';
|
|
import { useVoiceCallStatus } from 'dashboard/composables/useVoiceCallStatus';
|
|
|
|
const { contentAttributes } = useMessageContext();
|
|
|
|
const data = computed(() => contentAttributes.value?.data);
|
|
|
|
const status = computed(() => data.value?.status);
|
|
const direction = computed(() => data.value?.call_direction);
|
|
|
|
const { labelKey, subtextKey, bubbleIconBg, bubbleIconName } =
|
|
useVoiceCallStatus(status, direction);
|
|
|
|
const containerRingClass = computed(() => {
|
|
return status.value === 'ringing' ? 'ring-1 ring-emerald-300' : '';
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<BaseBubble class="p-0 border-none" hide-meta>
|
|
<div
|
|
class="flex overflow-hidden flex-col w-full max-w-xs bg-white rounded-lg border border-slate-100 text-slate-900 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100"
|
|
:class="containerRingClass"
|
|
>
|
|
<div class="flex gap-3 items-center p-3 w-full">
|
|
<div
|
|
class="flex justify-center items-center rounded-full size-10 shrink-0"
|
|
:class="bubbleIconBg"
|
|
>
|
|
<span class="text-xl" :class="bubbleIconName" />
|
|
</div>
|
|
|
|
<div class="flex overflow-hidden flex-col flex-grow">
|
|
<span class="text-base font-medium truncate">{{ $t(labelKey) }}</span>
|
|
<span class="text-xs text-slate-500">{{ $t(subtextKey) }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</BaseBubble>
|
|
</template>
|