WIP - some progress making phone calls from softphone, we need https to test

frontend/composables/useSoftphone.ts

@@ -1,5 +1,6 @@
-import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { ref, computed, onMounted, onUnmounted, shallowRef } from 'vue';
 import { io, Socket } from 'socket.io-client';
+import { Device, Call as TwilioCall } from '@twilio/voice-sdk';
 import { useAuth } from './useAuth';
 import { toast } from 'vue-sonner';
 
@@ -27,6 +28,8 @@ interface AiSuggestion {
 
 // Module-level shared state for global access
 const socket = ref<Socket | null>(null);
+const twilioDevice = shallowRef<Device | null>(null);
+const twilioCall = shallowRef<TwilioCall | null>(null);
 const isConnected = ref(false);
 const isOpen = ref(false);
 const currentCall = ref<Call | null>(null);
@@ -35,6 +38,8 @@ const transcript = ref<CallTranscript[]>([]);
 const aiSuggestions = ref<AiSuggestion[]>([]);
 const callHistory = ref<Call[]>([]);
 const isInitialized = ref(false);
+const isMuted = ref(false);
+const volume = ref(100);
 
 export function useSoftphone() {
   const auth = useAuth();
@@ -55,6 +60,136 @@ export function useSoftphone() {
   const hasIncomingCall = computed(() => incomingCall.value !== null);
   const callStatus = computed(() => currentCall.value?.status || 'idle');
 
+  /**
+   * Request microphone permission explicitly
+   */
+  const requestMicrophonePermission = async () => {
+    try {
+      // Check if mediaDevices is supported
+      if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+        toast.error('Microphone access requires HTTPS. Please access the app via https:// or use localhost for testing.');
+        console.error('navigator.mediaDevices not available. This typically means the page is not served over HTTPS.');
+        return false;
+      }
+
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      // Stop the stream immediately, we just wanted the permission
+      stream.getTracks().forEach(track => track.stop());
+      return true;
+    } catch (error: any) {
+      console.error('Microphone permission denied:', error);
+      if (error.name === 'NotAllowedError') {
+        toast.error('Microphone access denied. Please allow microphone access in your browser settings.');
+      } else if (error.name === 'NotFoundError') {
+        toast.error('No microphone found. Please connect a microphone and try again.');
+      } else {
+        toast.error('Microphone access is required for calls. Please ensure you are using HTTPS or localhost.');
+      }
+      return false;
+    }
+  };
+
+  /**
+   * Initialize Twilio Device
+   */
+  const initializeTwilioDevice = async () => {
+    try {
+      // First, explicitly request microphone permission
+      const hasPermission = await requestMicrophonePermission();
+      if (!hasPermission) {
+        return;
+      }
+
+      const { api } = useApi();
+      const response = await api.get('/voice/token');
+      const token = response.data.token;
+
+      twilioDevice.value = new Device(token, {
+        logLevel: 1,
+        codecPreferences: ['opus', 'pcmu'],
+        enableImprovedSignalingErrorPrecision: true,
+        // Specify audio constraints
+        edge: 'ashburn',
+      });
+
+      // Device events
+      twilioDevice.value.on('registered', () => {
+        console.log('Twilio Device registered');
+        toast.success('Softphone ready');
+      });
+
+      twilioDevice.value.on('error', (error) => {
+        console.error('Twilio Device error:', error);
+        toast.error('Device error: ' + error.message);
+      });
+
+      twilioDevice.value.on('incoming', (call: TwilioCall) => {
+        console.log('Incoming call:', call.parameters);
+        twilioCall.value = call;
+        
+        // Update state
+        incomingCall.value = {
+          callSid: call.parameters.CallSid || '',
+          direction: 'inbound',
+          fromNumber: call.parameters.From || '',
+          toNumber: call.parameters.To || '',
+          status: 'ringing',
+        };
+
+        // Setup call handlers
+        setupCallHandlers(call);
+      });
+
+      // Register the device
+      await twilioDevice.value.register();
+      
+    } catch (error: any) {
+      console.error('Failed to initialize Twilio Device:', error);
+      toast.error('Failed to initialize voice device: ' + error.message);
+    }
+  };
+
+  /**
+   * Setup handlers for a Twilio call
+   */
+  const setupCallHandlers = (call: TwilioCall) => {
+    call.on('accept', () => {
+      console.log('Call accepted');
+      currentCall.value = {
+        callSid: call.parameters.CallSid || '',
+        direction: twilioCall.value === call ? 'inbound' : 'outbound',
+        fromNumber: call.parameters.From || '',
+        toNumber: call.parameters.To || '',
+        status: 'in-progress',
+        startedAt: new Date().toISOString(),
+      };
+      incomingCall.value = null;
+    });
+
+    call.on('disconnect', () => {
+      console.log('Call disconnected');
+      currentCall.value = null;
+      twilioCall.value = null;
+    });
+
+    call.on('cancel', () => {
+      console.log('Call cancelled');
+      incomingCall.value = null;
+      twilioCall.value = null;
+    });
+
+    call.on('reject', () => {
+      console.log('Call rejected');
+      incomingCall.value = null;
+      twilioCall.value = null;
+    });
+
+    call.on('error', (error) => {
+      console.error('Call error:', error);
+      toast.error('Call error: ' + error.message);
+    });
+  };
+
   /**
    * Initialize WebSocket connection
    */
@@ -91,6 +226,9 @@ export function useSoftphone() {
     socket.value.on('connect', () => {
       console.log('Softphone WebSocket connected');
       isConnected.value = true;
+      
+      // Initialize Twilio Device after WebSocket connects
+      initializeTwilioDevice();
     });
 
     socket.value.on('disconnect', () => {
@@ -151,102 +289,110 @@ export function useSoftphone() {
   };
 
   /**
-   * Initiate outbound call
+   * Initiate outbound call using Twilio Device
    */
   const initiateCall = async (toNumber: string) => {
-    if (!socket.value?.connected) {
-      toast.error('Not connected to voice service');
+    if (!twilioDevice.value) {
+      toast.error('Voice device not initialized');
       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));
+    try {
+      // Make call using Twilio Device
+      const call = await twilioDevice.value.connect({
+        params: {
+          To: toNumber,
         }
       });
-    });
+
+      twilioCall.value = call;
+      setupCallHandlers(call);
+
+      toast.success('Calling ' + toNumber);
+    } catch (error: any) {
+      console.error('Failed to initiate call:', error);
+      toast.error('Failed to initiate call: ' + error.message);
+      throw error;
+    }
   };
 
   /**
    * Accept incoming call
    */
   const acceptCall = async (callSid: string) => {
-    if (!socket.value?.connected) {
-      toast.error('Not connected to voice service');
+    if (!twilioCall.value) {
+      toast.error('No incoming call');
       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));
-        }
-      });
-    });
+    try {
+      await twilioCall.value.accept();
+      toast.success('Call accepted');
+    } catch (error: any) {
+      console.error('Failed to accept call:', error);
+      toast.error('Failed to accept call: ' + error.message);
+    }
   };
 
   /**
    * Reject incoming call
    */
   const rejectCall = async (callSid: string) => {
-    if (!socket.value?.connected) {
-      toast.error('Not connected to voice service');
+    if (!twilioCall.value) {
+      toast.error('No incoming call');
       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));
-        }
-      });
-    });
+    try {
+      twilioCall.value.reject();
+      incomingCall.value = null;
+      twilioCall.value = null;
+      toast.info('Call rejected');
+    } catch (error: any) {
+      console.error('Failed to reject call:', error);
+      toast.error('Failed to reject call: ' + error.message);
+    }
   };
 
   /**
    * End active call
    */
   const endCall = async (callSid: string) => {
-    if (!socket.value?.connected) {
-      toast.error('Not connected to voice service');
+    if (!twilioCall.value) {
+      toast.error('No active call');
       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));
-        }
-      });
-    });
+    try {
+      twilioCall.value.disconnect();
+      currentCall.value = null;
+      twilioCall.value = null;
+      toast.info('Call ended');
+    } catch (error: any) {
+      console.error('Failed to end call:', error);
+      toast.error('Failed to end call: ' + error.message);
+    }
+  };
+
+  /**
+   * Toggle mute
+   */
+  const toggleMute = () => {
+    if (!twilioCall.value) return;
+    
+    isMuted.value = !isMuted.value;
+    twilioCall.value.mute(isMuted.value);
   };
 
   /**
    * Send DTMF tone
    */
   const sendDtmf = async (callSid: string, digit: string) => {
-    if (!socket.value?.connected) {
+    if (!twilioCall.value) {
       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));
-        }
-      });
-    });
+    twilioCall.value.sendDigits(digit);
   };
 
   // Event handlers
@@ -402,20 +548,23 @@ export function useSoftphone() {
     hasIncomingCall,
     currentCall,
     incomingCall,
-    callStatus,
     transcript,
     aiSuggestions,
+    callStatus,
     callHistory,
+    isMuted,
+    volume,
 
-    // Methods
+    // Actions
     open,
     close,
-    connect,
-    disconnect,
     initiateCall,
     acceptCall,
     rejectCall,
     endCall,
     sendDtmf,
+    toggleMute,
+    connect,
+    disconnect,
   };
 }

frontend/package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@internationalized/date": "^3.10.1",
     "@nuxtjs/tailwindcss": "^6.11.4",
+    "@twilio/voice-sdk": "^2.11.2",
     "@vueuse/core": "^10.11.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",

frontend/pages/settings/integrations.vue

@@ -53,6 +53,31 @@
                 placeholder="+1234567890"
               />
             </div>
+            <div class="space-y-2">
+              <Label for="twilio-api-key">API Key SID (for browser calls)</Label>
+              <Input
+                id="twilio-api-key"
+                v-model="twilioConfig.apiKey"
+                placeholder="SKxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+              />
+            </div>
+            <div class="space-y-2">
+              <Label for="twilio-api-secret">API Secret</Label>
+              <Input
+                id="twilio-api-secret"
+                v-model="twilioConfig.apiSecret"
+                type="password"
+                placeholder="Enter your API Key Secret"
+              />
+            </div>
+            <div class="space-y-2">
+              <Label for="twilio-twiml-app">TwiML App SID</Label>
+              <Input
+                id="twilio-twiml-app"
+                v-model="twilioConfig.twimlAppSid"
+                placeholder="APxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+              />
+            </div>
           </CardContent>
         </Card>
 
@@ -123,6 +148,9 @@ const twilioConfig = ref({
   accountSid: '',
   authToken: '',
   phoneNumber: '',
+  apiKey: '',
+  apiSecret: '',
+  twimlAppSid: '',
 });
 
 const openaiConfig = ref({