WIP - twilio integration
This commit is contained in:
Francisco Gaona
@@ -17,10 +17,12 @@ import {
|
||||
SidebarRail,
|
||||
} from '@/components/ui/sidebar'
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
|
||||
import { LayoutGrid, Boxes, Settings, Home, ChevronRight, Database, Layers, LogOut, Users, Globe, Building } from 'lucide-vue-next'
|
||||
import { LayoutGrid, Boxes, Settings, Home, ChevronRight, Database, Layers, LogOut, Users, Globe, Building, Phone } from 'lucide-vue-next'
|
||||
import { useSoftphone } from '~/composables/useSoftphone'
|
||||
|
||||
const { logout } = useAuth()
|
||||
const { api } = useApi()
|
||||
const softphone = useSoftphone()
|
||||
|
||||
const handleLogout = async () => {
|
||||
await logout()
|
||||
@@ -328,6 +330,13 @@ const centralAdminMenuItems: Array<{
|
||||
</SidebarContent>
|
||||
<SidebarFooter>
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem v-if="!isCentralAdmin">
|
||||
<SidebarMenuButton @click="softphone.open" class="cursor-pointer hover:bg-accent">
|
||||
<Phone class="h-4 w-4" />
|
||||
<span>Softphone</span>
|
||||
<span v-if="softphone.hasIncomingCall.value" class="ml-auto h-2 w-2 rounded-full bg-red-500 animate-pulse"></span>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton @click="handleLogout" class="cursor-pointer hover:bg-accent">
|
||||
<LogOut class="h-4 w-4" />
|
||||
|
||||
@@ -178,7 +178,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '~
|
||||
import { Input } from '~/components/ui/input';
|
||||
import { Label } from '~/components/ui/label';
|
||||
import { Badge } from '~/components/ui/badge';
|
||||
import Checkbox from '~/components/ui/checkbox.vue';
|
||||
import { Checkbox } from '~/components/ui/checkbox';
|
||||
import DatePicker from '~/components/ui/date-picker/DatePicker.vue';
|
||||
import { UserPlus, Trash2, Users } from 'lucide-vue-next';
|
||||
|
||||
|
||||
280
frontend/components/SoftphoneDialog.vue
Normal file
280
frontend/components/SoftphoneDialog.vue
Normal file
@@ -0,0 +1,280 @@
|
||||
<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>
|
||||
|
||||
<!-- AI Transcript -->
|
||||
<div v-if="softphone.transcript.value.length > 0" class="space-y-2">
|
||||
<h3 class="text-sm font-semibold">Transcript</h3>
|
||||
<div class="max-h-40 overflow-y-auto p-3 rounded-lg border bg-gray-50 space-y-1">
|
||||
<p
|
||||
v-for="(item, index) in softphone.transcript.value.slice(-10)"
|
||||
:key="index"
|
||||
class="text-sm"
|
||||
:class="{ 'text-gray-400': !item.isFinal }"
|
||||
>
|
||||
{{ item.text }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI Suggestions -->
|
||||
<div v-if="softphone.aiSuggestions.value.length > 0" class="space-y-2">
|
||||
<h3 class="text-sm font-semibold">AI Suggestions</h3>
|
||||
<div class="space-y-2 max-h-32 overflow-y-auto">
|
||||
<div
|
||||
v-for="(suggestion, index) in softphone.aiSuggestions.value.slice(0, 5)"
|
||||
:key="index"
|
||||
class="p-2 rounded-lg border text-sm"
|
||||
:class="{
|
||||
'bg-blue-50 border-blue-200': suggestion.type === 'response',
|
||||
'bg-green-50 border-green-200': suggestion.type === 'action',
|
||||
'bg-purple-50 border-purple-200': suggestion.type === 'insight'
|
||||
}"
|
||||
>
|
||||
<span class="text-xs font-medium uppercase text-gray-600">{{ suggestion.type }}</span>
|
||||
<p class="mt-1">{{ suggestion.text }}</p>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<!-- 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');
|
||||
}
|
||||
};
|
||||
|
||||
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>
|
||||
@@ -1,33 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { Check } from 'lucide-vue-next'
|
||||
import { CheckboxIndicator, CheckboxRoot, type CheckboxRootEmits, type CheckboxRootProps, useForwardPropsEmits } from 'radix-vue'
|
||||
import { computed, type HTMLAttributes } from 'vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
|
||||
const emits = defineEmits<CheckboxRootEmits>()
|
||||
|
||||
const delegatedProps = computed(() => {
|
||||
const { class: _, ...delegated } = props
|
||||
|
||||
return delegated
|
||||
})
|
||||
|
||||
const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CheckboxRoot
|
||||
v-bind="forwarded"
|
||||
:class="
|
||||
cn(
|
||||
'peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
>
|
||||
<CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
|
||||
<Check class="h-4 w-4" />
|
||||
</CheckboxIndicator>
|
||||
</CheckboxRoot>
|
||||
</template>
|
||||
421
frontend/composables/useSoftphone.ts
Normal file
421
frontend/composables/useSoftphone.ts
Normal file
@@ -0,0 +1,421 @@
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue';
|
||||
import { io, Socket } from 'socket.io-client';
|
||||
import { useAuth } from './useAuth';
|
||||
import { toast } from 'vue-sonner';
|
||||
|
||||
interface Call {
|
||||
callSid: string;
|
||||
direction: 'inbound' | 'outbound';
|
||||
fromNumber: string;
|
||||
toNumber: string;
|
||||
status: string;
|
||||
startedAt?: string;
|
||||
duration?: number;
|
||||
}
|
||||
|
||||
interface CallTranscript {
|
||||
text: string;
|
||||
isFinal: boolean;
|
||||
timestamp: number;
|
||||
}
|
||||
|
||||
interface AiSuggestion {
|
||||
type: 'response' | 'action' | 'insight';
|
||||
text: string;
|
||||
data?: any;
|
||||
}
|
||||
|
||||
// Module-level shared state for global access
|
||||
const socket = ref<Socket | null>(null);
|
||||
const isConnected = ref(false);
|
||||
const isOpen = ref(false);
|
||||
const currentCall = ref<Call | null>(null);
|
||||
const incomingCall = ref<Call | null>(null);
|
||||
const transcript = ref<CallTranscript[]>([]);
|
||||
const aiSuggestions = ref<AiSuggestion[]>([]);
|
||||
const callHistory = ref<Call[]>([]);
|
||||
const isInitialized = ref(false);
|
||||
|
||||
export function useSoftphone() {
|
||||
const auth = useAuth();
|
||||
|
||||
// Get token and tenantId from localStorage
|
||||
const getToken = () => {
|
||||
if (typeof window === 'undefined') return null;
|
||||
return localStorage.getItem('token');
|
||||
};
|
||||
|
||||
const getTenantId = () => {
|
||||
if (typeof window === 'undefined') return null;
|
||||
return localStorage.getItem('tenantId');
|
||||
};
|
||||
|
||||
// Computed properties
|
||||
const isInCall = computed(() => currentCall.value !== null);
|
||||
const hasIncomingCall = computed(() => incomingCall.value !== null);
|
||||
const callStatus = computed(() => currentCall.value?.status || 'idle');
|
||||
|
||||
/**
|
||||
* Initialize WebSocket connection
|
||||
*/
|
||||
const connect = () => {
|
||||
const token = getToken();
|
||||
|
||||
if (socket.value?.connected || !token) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Use same pattern as useApi to preserve subdomain for multi-tenant
|
||||
const getBackendUrl = () => {
|
||||
if (typeof window !== 'undefined') {
|
||||
const currentHost = window.location.hostname;
|
||||
const protocol = window.location.protocol;
|
||||
return `${protocol}//${currentHost}:3000`;
|
||||
}
|
||||
return 'http://localhost:3000';
|
||||
};
|
||||
|
||||
// Connect to /voice namespace
|
||||
socket.value = io(`${getBackendUrl()}/voice`, {
|
||||
auth: {
|
||||
token: token,
|
||||
},
|
||||
transports: ['websocket', 'polling'],
|
||||
reconnection: true,
|
||||
reconnectionDelay: 1000,
|
||||
reconnectionDelayMax: 5000,
|
||||
reconnectionAttempts: 5,
|
||||
});
|
||||
|
||||
// Connection events
|
||||
socket.value.on('connect', () => {
|
||||
console.log('Softphone WebSocket connected');
|
||||
isConnected.value = true;
|
||||
});
|
||||
|
||||
socket.value.on('disconnect', () => {
|
||||
console.log('Softphone WebSocket disconnected');
|
||||
isConnected.value = false;
|
||||
});
|
||||
|
||||
socket.value.on('connect_error', (error) => {
|
||||
console.error('Softphone connection error:', error);
|
||||
toast.error('Failed to connect to voice service');
|
||||
});
|
||||
|
||||
// Call events
|
||||
socket.value.on('call:incoming', handleIncomingCall);
|
||||
socket.value.on('call:initiated', handleCallInitiated);
|
||||
socket.value.on('call:accepted', handleCallAccepted);
|
||||
socket.value.on('call:rejected', handleCallRejected);
|
||||
socket.value.on('call:ended', handleCallEnded);
|
||||
socket.value.on('call:update', handleCallUpdate);
|
||||
socket.value.on('call:error', handleCallError);
|
||||
socket.value.on('call:state', handleCallState);
|
||||
|
||||
// AI events
|
||||
socket.value.on('ai:transcript', handleAiTranscript);
|
||||
socket.value.on('ai:suggestion', handleAiSuggestion);
|
||||
socket.value.on('ai:action', handleAiAction);
|
||||
|
||||
isInitialized.value = true;
|
||||
};
|
||||
|
||||
/**
|
||||
* Disconnect WebSocket
|
||||
*/
|
||||
const disconnect = () => {
|
||||
if (socket.value) {
|
||||
socket.value.disconnect();
|
||||
socket.value = null;
|
||||
isConnected.value = false;
|
||||
isInitialized.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Open softphone dialog
|
||||
*/
|
||||
const open = () => {
|
||||
if (!isInitialized.value) {
|
||||
connect();
|
||||
}
|
||||
isOpen.value = true;
|
||||
};
|
||||
|
||||
/**
|
||||
* Close softphone dialog
|
||||
*/
|
||||
const close = () => {
|
||||
isOpen.value = false;
|
||||
};
|
||||
|
||||
/**
|
||||
* Initiate outbound call
|
||||
*/
|
||||
const initiateCall = async (toNumber: string) => {
|
||||
if (!socket.value?.connected) {
|
||||
toast.error('Not connected to voice service');
|
||||
return;
|
||||
}
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
socket.value!.emit('call:initiate', { toNumber }, (response: any) => {
|
||||
if (response.success) {
|
||||
resolve(response);
|
||||
} else {
|
||||
reject(new Error(response.error));
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Accept incoming call
|
||||
*/
|
||||
const acceptCall = async (callSid: string) => {
|
||||
if (!socket.value?.connected) {
|
||||
toast.error('Not connected to voice service');
|
||||
return;
|
||||
}
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
socket.value!.emit('call:accept', { callSid }, (response: any) => {
|
||||
if (response.success) {
|
||||
resolve(response);
|
||||
} else {
|
||||
reject(new Error(response.error));
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Reject incoming call
|
||||
*/
|
||||
const rejectCall = async (callSid: string) => {
|
||||
if (!socket.value?.connected) {
|
||||
toast.error('Not connected to voice service');
|
||||
return;
|
||||
}
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
socket.value!.emit('call:reject', { callSid }, (response: any) => {
|
||||
if (response.success) {
|
||||
resolve(response);
|
||||
} else {
|
||||
reject(new Error(response.error));
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* End active call
|
||||
*/
|
||||
const endCall = async (callSid: string) => {
|
||||
if (!socket.value?.connected) {
|
||||
toast.error('Not connected to voice service');
|
||||
return;
|
||||
}
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
socket.value!.emit('call:end', { callSid }, (response: any) => {
|
||||
if (response.success) {
|
||||
resolve(response);
|
||||
} else {
|
||||
reject(new Error(response.error));
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Send DTMF tone
|
||||
*/
|
||||
const sendDtmf = async (callSid: string, digit: string) => {
|
||||
if (!socket.value?.connected) {
|
||||
return;
|
||||
}
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
socket.value!.emit('call:dtmf', { callSid, digit }, (response: any) => {
|
||||
if (response.success) {
|
||||
resolve(response);
|
||||
} else {
|
||||
reject(new Error(response.error));
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// Event handlers
|
||||
const handleIncomingCall = (data: Call) => {
|
||||
console.log('Incoming call:', data);
|
||||
incomingCall.value = data;
|
||||
isOpen.value = true;
|
||||
|
||||
toast.info(`Incoming call from ${data.fromNumber}`, {
|
||||
duration: 30000,
|
||||
action: {
|
||||
label: 'Answer',
|
||||
onClick: () => {
|
||||
acceptCall(data.callSid);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Play ringtone
|
||||
playRingtone();
|
||||
};
|
||||
|
||||
const handleCallInitiated = (data: any) => {
|
||||
console.log('Call initiated:', data);
|
||||
currentCall.value = {
|
||||
callSid: data.callSid,
|
||||
direction: 'outbound',
|
||||
fromNumber: '',
|
||||
toNumber: data.toNumber,
|
||||
status: data.status,
|
||||
};
|
||||
transcript.value = [];
|
||||
aiSuggestions.value = [];
|
||||
};
|
||||
|
||||
const handleCallAccepted = (data: any) => {
|
||||
console.log('Call accepted:', data);
|
||||
if (incomingCall.value?.callSid === data.callSid) {
|
||||
currentCall.value = incomingCall.value;
|
||||
if (currentCall.value) {
|
||||
currentCall.value.status = 'in-progress';
|
||||
}
|
||||
incomingCall.value = null;
|
||||
}
|
||||
stopRingtone();
|
||||
};
|
||||
|
||||
const handleCallRejected = (data: any) => {
|
||||
console.log('Call rejected:', data);
|
||||
if (incomingCall.value?.callSid === data.callSid) {
|
||||
incomingCall.value = null;
|
||||
}
|
||||
stopRingtone();
|
||||
};
|
||||
|
||||
const handleCallEnded = (data: any) => {
|
||||
console.log('Call ended:', data);
|
||||
if (currentCall.value?.callSid === data.callSid) {
|
||||
currentCall.value = null;
|
||||
}
|
||||
if (incomingCall.value?.callSid === data.callSid) {
|
||||
incomingCall.value = null;
|
||||
}
|
||||
stopRingtone();
|
||||
toast.info('Call ended');
|
||||
};
|
||||
|
||||
const handleCallUpdate = (data: any) => {
|
||||
console.log('Call update:', data);
|
||||
if (currentCall.value?.callSid === data.callSid) {
|
||||
currentCall.value = { ...currentCall.value, ...data };
|
||||
}
|
||||
};
|
||||
|
||||
const handleCallError = (data: any) => {
|
||||
console.error('Call error:', data);
|
||||
toast.error(data.message || 'Call error occurred');
|
||||
};
|
||||
|
||||
const handleCallState = (data: Call) => {
|
||||
console.log('Call state:', data);
|
||||
if (data.status === 'in-progress') {
|
||||
currentCall.value = data;
|
||||
}
|
||||
};
|
||||
|
||||
const handleAiTranscript = (data: { transcript: string; isFinal: boolean }) => {
|
||||
console.log('AI transcript:', data);
|
||||
transcript.value.push({
|
||||
text: data.transcript,
|
||||
isFinal: data.isFinal,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
|
||||
// Keep only last 50 transcript items
|
||||
if (transcript.value.length > 50) {
|
||||
transcript.value = transcript.value.slice(-50);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAiSuggestion = (data: AiSuggestion) => {
|
||||
console.log('AI suggestion:', data);
|
||||
aiSuggestions.value.unshift(data);
|
||||
|
||||
// Keep only last 10 suggestions
|
||||
if (aiSuggestions.value.length > 10) {
|
||||
aiSuggestions.value = aiSuggestions.value.slice(0, 10);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAiAction = (data: any) => {
|
||||
console.log('AI action:', data);
|
||||
toast.info(`AI: ${data.action}`);
|
||||
};
|
||||
|
||||
// Ringtone management
|
||||
let ringtoneAudio: HTMLAudioElement | null = null;
|
||||
|
||||
const playRingtone = () => {
|
||||
try {
|
||||
ringtoneAudio = new Audio('/ringtone.mp3');
|
||||
ringtoneAudio.loop = true;
|
||||
ringtoneAudio.play();
|
||||
} catch (error) {
|
||||
console.error('Failed to play ringtone:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const stopRingtone = () => {
|
||||
if (ringtoneAudio) {
|
||||
ringtoneAudio.pause();
|
||||
ringtoneAudio = null;
|
||||
}
|
||||
};
|
||||
|
||||
// Auto-connect on mount if token is available
|
||||
onMounted(() => {
|
||||
if (getToken() && !isInitialized.value) {
|
||||
connect();
|
||||
}
|
||||
});
|
||||
|
||||
// Cleanup on unmount
|
||||
onUnmounted(() => {
|
||||
stopRingtone();
|
||||
});
|
||||
|
||||
return {
|
||||
// State
|
||||
isOpen,
|
||||
isConnected,
|
||||
isInCall,
|
||||
hasIncomingCall,
|
||||
currentCall,
|
||||
incomingCall,
|
||||
callStatus,
|
||||
transcript,
|
||||
aiSuggestions,
|
||||
callHistory,
|
||||
|
||||
// Methods
|
||||
open,
|
||||
close,
|
||||
connect,
|
||||
disconnect,
|
||||
initiateCall,
|
||||
acceptCall,
|
||||
rejectCall,
|
||||
endCall,
|
||||
sendDtmf,
|
||||
};
|
||||
}
|
||||
@@ -2,6 +2,7 @@
|
||||
import { ref } from 'vue'
|
||||
import AppSidebar from '@/components/AppSidebar.vue'
|
||||
import AIChatBar from '@/components/AIChatBar.vue'
|
||||
import SoftphoneDialog from '@/components/SoftphoneDialog.vue'
|
||||
import {
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
@@ -75,6 +76,9 @@ const breadcrumbs = computed(() => {
|
||||
|
||||
<!-- AI Chat Bar Component -->
|
||||
<AIChatBar />
|
||||
|
||||
<!-- Softphone Dialog (Global) -->
|
||||
<SoftphoneDialog />
|
||||
</SidebarInset>
|
||||
</SidebarProvider>
|
||||
</template>
|
||||
|
||||
@@ -67,4 +67,12 @@ export default defineNuxtConfig({
|
||||
compatibilityDate: '2024-01-01',
|
||||
|
||||
css: ['~/assets/css/main.css'],
|
||||
|
||||
components: [
|
||||
{
|
||||
path: '~/components',
|
||||
pathPrefix: false,
|
||||
extensions: ['.vue'],
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
65
frontend/package-lock.json
generated
65
frontend/package-lock.json
generated
@@ -20,6 +20,7 @@
|
||||
"radix-vue": "^1.4.1",
|
||||
"reka-ui": "^2.6.1",
|
||||
"shadcn-nuxt": "^2.3.3",
|
||||
"socket.io-client": "^4.8.3",
|
||||
"tailwind-merge": "^2.2.1",
|
||||
"vue": "^3.4.15",
|
||||
"vue-router": "^4.2.5",
|
||||
@@ -3729,6 +3730,12 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/@socket.io/component-emitter": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
|
||||
"integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@speed-highlight/core": {
|
||||
"version": "1.2.12",
|
||||
"resolved": "https://registry.npmjs.org/@speed-highlight/core/-/core-1.2.12.tgz",
|
||||
@@ -6887,6 +6894,28 @@
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/engine.io-client": {
|
||||
"version": "6.6.4",
|
||||
"resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.4.tgz",
|
||||
"integrity": "sha512-+kjUJnZGwzewFDw951CDWcwj35vMNf2fcj7xQWOctq1F2i1jkDdVvdFG9kM/BEChymCH36KgjnW0NsL58JYRxw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@socket.io/component-emitter": "~3.1.0",
|
||||
"debug": "~4.4.1",
|
||||
"engine.io-parser": "~5.2.1",
|
||||
"ws": "~8.18.3",
|
||||
"xmlhttprequest-ssl": "~2.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/engine.io-parser": {
|
||||
"version": "5.2.3",
|
||||
"resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
|
||||
"integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/enhanced-resolve": {
|
||||
"version": "5.18.3",
|
||||
"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
|
||||
@@ -13938,6 +13967,34 @@
|
||||
"integrity": "sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/socket.io-client": {
|
||||
"version": "4.8.3",
|
||||
"resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.3.tgz",
|
||||
"integrity": "sha512-uP0bpjWrjQmUt5DTHq9RuoCBdFJF10cdX9X+a368j/Ft0wmaVgxlrjvK3kjvgCODOMMOz9lcaRzxmso0bTWZ/g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@socket.io/component-emitter": "~3.1.0",
|
||||
"debug": "~4.4.1",
|
||||
"engine.io-client": "~6.6.1",
|
||||
"socket.io-parser": "~4.2.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/socket.io-parser": {
|
||||
"version": "4.2.5",
|
||||
"resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.5.tgz",
|
||||
"integrity": "sha512-bPMmpy/5WWKHea5Y/jYAP6k74A+hvmRCQaJuJB6I/ML5JZq/KfNieUVo/3Mh7SAqn7TyFdIo6wqYHInG1MU1bQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@socket.io/component-emitter": "~3.1.0",
|
||||
"debug": "~4.4.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map": {
|
||||
"version": "0.7.6",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz",
|
||||
@@ -16344,6 +16401,14 @@
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/xmlhttprequest-ssl": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz",
|
||||
"integrity": "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==",
|
||||
"engines": {
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/y18n": {
|
||||
"version": "5.0.8",
|
||||
"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
|
||||
|
||||
@@ -26,6 +26,7 @@
|
||||
"radix-vue": "^1.4.1",
|
||||
"reka-ui": "^2.6.1",
|
||||
"shadcn-nuxt": "^2.3.3",
|
||||
"socket.io-client": "^4.8.3",
|
||||
"tailwind-merge": "^2.2.1",
|
||||
"vue": "^3.4.15",
|
||||
"vue-router": "^4.2.5",
|
||||
|
||||
169
frontend/pages/settings/integrations.vue
Normal file
169
frontend/pages/settings/integrations.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<div class="max-w-4xl mx-auto space-y-6">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold">Integrations</h1>
|
||||
<p class="text-muted-foreground mt-2">
|
||||
Configure third-party service integrations for your tenant
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Twilio Configuration -->
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle class="flex items-center gap-2">
|
||||
<Phone class="w-5 h-5" />
|
||||
Twilio Voice
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Configure Twilio for voice calling capabilities
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="twilio-account-sid">Account SID</Label>
|
||||
<Input
|
||||
id="twilio-account-sid"
|
||||
v-model="twilioConfig.accountSid"
|
||||
placeholder="ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<Label for="twilio-auth-token">Auth Token</Label>
|
||||
<Input
|
||||
id="twilio-auth-token"
|
||||
v-model="twilioConfig.authToken"
|
||||
type="password"
|
||||
placeholder="Enter your Twilio auth token"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<Label for="twilio-phone-number">Phone Number</Label>
|
||||
<Input
|
||||
id="twilio-phone-number"
|
||||
v-model="twilioConfig.phoneNumber"
|
||||
placeholder="+1234567890"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- OpenAI Configuration -->
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle class="flex items-center gap-2">
|
||||
<Bot class="w-5 h-5" />
|
||||
OpenAI Realtime
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Configure OpenAI for AI-assisted calling features
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="openai-api-key">API Key</Label>
|
||||
<Input
|
||||
id="openai-api-key"
|
||||
v-model="openaiConfig.apiKey"
|
||||
type="password"
|
||||
placeholder="sk-..."
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<Label for="openai-model">Model</Label>
|
||||
<Input
|
||||
id="openai-model"
|
||||
v-model="openaiConfig.model"
|
||||
placeholder="gpt-4o-realtime-preview"
|
||||
/>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
Default: gpt-4o-realtime-preview
|
||||
</p>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<Label for="openai-voice">Voice</Label>
|
||||
<Input
|
||||
id="openai-voice"
|
||||
v-model="openaiConfig.voice"
|
||||
placeholder="alloy"
|
||||
/>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
Options: alloy, echo, fable, onyx, nova, shimmer
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Save Button -->
|
||||
<div class="flex justify-end">
|
||||
<Button @click="saveConfig" :disabled="saving">
|
||||
<Save class="w-4 h-4 mr-2" />
|
||||
{{ saving ? 'Saving...' : 'Save Configuration' }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '~/components/ui/card';
|
||||
import { Input } from '~/components/ui/input';
|
||||
import { Label } from '~/components/ui/label';
|
||||
import { Button } from '~/components/ui/button';
|
||||
import { Phone, Bot, Save } from 'lucide-vue-next';
|
||||
import { useApi } from '~/composables/useApi';
|
||||
import { toast } from 'vue-sonner';
|
||||
|
||||
const { api } = useApi();
|
||||
|
||||
const twilioConfig = ref({
|
||||
accountSid: '',
|
||||
authToken: '',
|
||||
phoneNumber: '',
|
||||
});
|
||||
|
||||
const openaiConfig = ref({
|
||||
apiKey: '',
|
||||
model: 'gpt-4o-realtime-preview',
|
||||
voice: 'alloy',
|
||||
});
|
||||
|
||||
const saving = ref(false);
|
||||
const loading = ref(true);
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const response = await api.get('/tenant/integrations');
|
||||
if (response.data) {
|
||||
if (response.data.twilio) {
|
||||
twilioConfig.value = { ...twilioConfig.value, ...response.data.twilio };
|
||||
}
|
||||
if (response.data.openai) {
|
||||
openaiConfig.value = { ...openaiConfig.value, ...response.data.openai };
|
||||
}
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('Failed to load configuration:', error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
const saveConfig = async () => {
|
||||
saving.value = true;
|
||||
|
||||
try {
|
||||
const integrationsConfig = {
|
||||
twilio: twilioConfig.value,
|
||||
openai: openaiConfig.value,
|
||||
};
|
||||
|
||||
await api.put('/tenant/integrations', { integrationsConfig });
|
||||
|
||||
toast.success('Configuration saved successfully');
|
||||
} catch (error: any) {
|
||||
toast.error(error.message || 'Failed to save configuration');
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user