Add twilio softphone with integrated AI assistant
This commit is contained in:
Francisco Gaona
300
frontend/components/SoftphoneDialog.vue
Normal file
300
frontend/components/SoftphoneDialog.vue
Normal file
@@ -0,0 +1,300 @@
|
||||
<template>
|
||||
<Dialog v-model:open="softphone.isOpen.value">
|
||||
<DialogContent class="sm:max-w-[500px] max-h-[80vh] overflow-hidden flex flex-col">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Softphone</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div class="flex-1 overflow-y-auto space-y-4">
|
||||
<!-- Connection Status -->
|
||||
<div class="flex items-center justify-between p-3 rounded-lg border" :class="{
|
||||
'bg-green-50 border-green-200': softphone.isConnected.value,
|
||||
'bg-red-50 border-red-200': !softphone.isConnected.value
|
||||
}">
|
||||
<span class="text-sm font-medium">
|
||||
{{ softphone.isConnected.value ? 'Connected' : 'Disconnected' }}
|
||||
</span>
|
||||
<div class="h-2 w-2 rounded-full" :class="{
|
||||
'bg-green-500': softphone.isConnected.value,
|
||||
'bg-red-500': !softphone.isConnected.value
|
||||
}"></div>
|
||||
</div>
|
||||
|
||||
<!-- Incoming Call -->
|
||||
<div v-if="softphone.incomingCall.value" class="p-4 rounded-lg border border-blue-200 bg-blue-50 animate-pulse">
|
||||
<div class="text-center space-y-4">
|
||||
<div>
|
||||
<p class="text-sm text-gray-600">Incoming call from</p>
|
||||
<p class="text-2xl font-bold">{{ formatPhoneNumber(softphone.incomingCall.value.fromNumber) }}</p>
|
||||
</div>
|
||||
<div class="flex gap-2 justify-center">
|
||||
<Button @click="handleAccept" class="bg-green-500 hover:bg-green-600">
|
||||
<PhoneIcon class="w-4 h-4 mr-2" />
|
||||
Accept
|
||||
</Button>
|
||||
<Button @click="handleReject" variant="destructive">
|
||||
<PhoneOffIcon class="w-4 h-4 mr-2" />
|
||||
Reject
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Active Call -->
|
||||
<div v-if="softphone.currentCall.value" class="space-y-4">
|
||||
<div class="p-4 rounded-lg border bg-gray-50">
|
||||
<div class="text-center space-y-2">
|
||||
<p class="text-sm text-gray-600">
|
||||
{{ softphone.currentCall.value.direction === 'outbound' ? 'Calling' : 'Connected with' }}
|
||||
</p>
|
||||
<p class="text-2xl font-bold">
|
||||
{{ formatPhoneNumber(
|
||||
softphone.currentCall.value.direction === 'outbound'
|
||||
? softphone.currentCall.value.toNumber
|
||||
: softphone.currentCall.value.fromNumber
|
||||
) }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-500 capitalize">{{ softphone.callStatus.value }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Call Controls -->
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<Button variant="outline" size="sm" @click="toggleMute">
|
||||
<MicIcon v-if="!isMuted" class="w-4 h-4" />
|
||||
<MicOffIcon v-else class="w-4 h-4" />
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" @click="showDialpad = !showDialpad">
|
||||
<Hash class="w-4 h-4" />
|
||||
</Button>
|
||||
<Button variant="destructive" size="sm" @click="handleEndCall">
|
||||
<PhoneOffIcon class="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- Dialpad -->
|
||||
<div v-if="showDialpad" class="grid grid-cols-3 gap-2">
|
||||
<Button
|
||||
v-for="digit in ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#']"
|
||||
:key="digit"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
@click="handleDtmf(digit)"
|
||||
class="h-12 text-lg font-semibold"
|
||||
>
|
||||
{{ digit }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI Suggestions - Show whenever there are suggestions, not just during active call -->
|
||||
<div v-if="softphone.aiSuggestions.value.length > 0" class="space-y-2">
|
||||
<h3 class="text-sm font-semibold flex items-center gap-2">
|
||||
<span>AI Assistant</span>
|
||||
<span class="px-2 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full">
|
||||
{{ softphone.aiSuggestions.value.length }}
|
||||
</span>
|
||||
</h3>
|
||||
<div class="space-y-2 max-h-40 overflow-y-auto">
|
||||
<div
|
||||
v-for="(suggestion, index) in softphone.aiSuggestions.value.slice(0, 5)"
|
||||
:key="index"
|
||||
class="p-3 rounded-lg border text-sm transition-all"
|
||||
:class="{
|
||||
'bg-blue-50 border-blue-200 animate-pulse': suggestion.type === 'response' && index === 0,
|
||||
'bg-blue-50 border-blue-200': suggestion.type === 'response' && index !== 0,
|
||||
'bg-green-50 border-green-200 animate-pulse': suggestion.type === 'action' && index === 0,
|
||||
'bg-green-50 border-green-200': suggestion.type === 'action' && index !== 0,
|
||||
'bg-purple-50 border-purple-200 animate-pulse': suggestion.type === 'insight' && index === 0,
|
||||
'bg-purple-50 border-purple-200': suggestion.type === 'insight' && index !== 0
|
||||
}"
|
||||
>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="text-xs font-semibold uppercase" :class="{
|
||||
'text-blue-700': suggestion.type === 'response',
|
||||
'text-green-700': suggestion.type === 'action',
|
||||
'text-purple-700': suggestion.type === 'insight'
|
||||
}">{{ suggestion.type }}</span>
|
||||
<span class="text-xs text-gray-400">just now</span>
|
||||
</div>
|
||||
<p class="leading-relaxed">{{ suggestion.text }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dialer (when no active call) -->
|
||||
<div v-if="!softphone.currentCall.value && !softphone.incomingCall.value" class="space-y-4">
|
||||
<div>
|
||||
<label class="text-sm font-medium">Phone Number</label>
|
||||
<Input
|
||||
v-model="phoneNumber"
|
||||
placeholder="+1234567890"
|
||||
class="mt-1"
|
||||
@keyup.enter="handleCall"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<Button
|
||||
v-for="digit in ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#']"
|
||||
:key="digit"
|
||||
variant="outline"
|
||||
@click="phoneNumber += digit"
|
||||
class="h-12 text-lg font-semibold"
|
||||
>
|
||||
{{ digit }}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<Button @click="handleCall" class="flex-1" :disabled="!phoneNumber">
|
||||
<PhoneIcon class="w-4 h-4 mr-2" />
|
||||
Call
|
||||
</Button>
|
||||
<Button @click="phoneNumber = ''" variant="outline">
|
||||
<XIcon class="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- Debug: Test AI Suggestions -->
|
||||
<Button @click="testAiSuggestion" variant="outline" size="sm" class="w-full">
|
||||
🧪 Test AI Suggestion
|
||||
</Button>
|
||||
|
||||
<!-- Recent Calls -->
|
||||
<div v-if="softphone.callHistory.value.length > 0" class="space-y-2">
|
||||
<h3 class="text-sm font-semibold">Recent Calls</h3>
|
||||
<div class="space-y-1 max-h-40 overflow-y-auto">
|
||||
<div
|
||||
v-for="call in softphone.callHistory.value.slice(0, 5)"
|
||||
:key="call.callSid"
|
||||
class="flex items-center justify-between p-2 rounded hover:bg-gray-100 cursor-pointer"
|
||||
@click="phoneNumber = call.direction === 'outbound' ? call.toNumber : call.fromNumber"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<PhoneIcon v-if="call.direction === 'outbound'" class="w-3 h-3 text-green-500" />
|
||||
<PhoneIncomingIcon v-else class="w-3 h-3 text-blue-500" />
|
||||
<span class="text-sm">
|
||||
{{ formatPhoneNumber(call.direction === 'outbound' ? call.toNumber : call.fromNumber) }}
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-xs text-gray-500">{{ formatDuration(call.duration) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useSoftphone } from '~/composables/useSoftphone';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '~/components/ui/dialog';
|
||||
import { Button } from '~/components/ui/button';
|
||||
import { Input } from '~/components/ui/input';
|
||||
import { PhoneIcon, PhoneOffIcon, PhoneIncomingIcon, MicIcon, MicOffIcon, Hash, XIcon } from 'lucide-vue-next';
|
||||
import { toast } from 'vue-sonner';
|
||||
|
||||
const softphone = useSoftphone();
|
||||
|
||||
const phoneNumber = ref('');
|
||||
const showDialpad = ref(false);
|
||||
const isMuted = ref(false);
|
||||
|
||||
const handleCall = async () => {
|
||||
if (!phoneNumber.value) {
|
||||
toast.error('Please enter a phone number');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await softphone.initiateCall(phoneNumber.value);
|
||||
phoneNumber.value = '';
|
||||
toast.success('Call initiated');
|
||||
} catch (error: any) {
|
||||
toast.error(error.message || 'Failed to initiate call');
|
||||
}
|
||||
};
|
||||
|
||||
const handleAccept = async () => {
|
||||
if (!softphone.incomingCall.value) return;
|
||||
|
||||
try {
|
||||
await softphone.acceptCall(softphone.incomingCall.value.callSid);
|
||||
} catch (error: any) {
|
||||
toast.error(error.message || 'Failed to accept call');
|
||||
}
|
||||
};
|
||||
|
||||
const handleReject = async () => {
|
||||
if (!softphone.incomingCall.value) return;
|
||||
|
||||
try {
|
||||
await softphone.rejectCall(softphone.incomingCall.value.callSid);
|
||||
} catch (error: any) {
|
||||
toast.error(error.message || 'Failed to reject call');
|
||||
}
|
||||
};
|
||||
|
||||
const handleEndCall = async () => {
|
||||
if (!softphone.currentCall.value) return;
|
||||
|
||||
try {
|
||||
await softphone.endCall(softphone.currentCall.value.callSid);
|
||||
} catch (error: any) {
|
||||
toast.error(error.message || 'Failed to end call');
|
||||
}
|
||||
};
|
||||
|
||||
// Debug: Test AI suggestions display
|
||||
const testAiSuggestion = () => {
|
||||
console.log('🧪 Testing AI suggestion display');
|
||||
console.log('Current suggestions:', softphone.aiSuggestions.value);
|
||||
|
||||
// Add a test suggestion
|
||||
softphone.aiSuggestions.value.unshift({
|
||||
type: 'response',
|
||||
text: '💡 Test suggestion: This is a test AI suggestion to verify UI display'
|
||||
});
|
||||
|
||||
console.log('After test:', softphone.aiSuggestions.value);
|
||||
toast.success('Test suggestion added');
|
||||
};
|
||||
|
||||
const handleDtmf = async (digit: string) => {
|
||||
if (!softphone.currentCall.value) return;
|
||||
|
||||
try {
|
||||
await softphone.sendDtmf(softphone.currentCall.value.callSid, digit);
|
||||
} catch (error: any) {
|
||||
console.error('Failed to send DTMF:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleMute = () => {
|
||||
isMuted.value = !isMuted.value;
|
||||
// TODO: Implement actual audio muting
|
||||
toast.info(isMuted.value ? 'Muted' : 'Unmuted');
|
||||
};
|
||||
|
||||
const formatPhoneNumber = (number: string): string => {
|
||||
if (!number) return '';
|
||||
// Simple US format
|
||||
const cleaned = number.replace(/\D/g, '');
|
||||
if (cleaned.length === 11 && cleaned[0] === '1') {
|
||||
return `+1 (${cleaned.slice(1, 4)}) ${cleaned.slice(4, 7)}-${cleaned.slice(7)}`;
|
||||
} else if (cleaned.length === 10) {
|
||||
return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6)}`;
|
||||
}
|
||||
return number;
|
||||
};
|
||||
|
||||
const formatDuration = (seconds?: number): string => {
|
||||
if (!seconds) return '--:--';
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = seconds % 60;
|
||||
return `${mins}:${secs.toString().padStart(2, '0')}`;
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user