Spaces:

jjmandog
/

tester

Running

App Files Files Community

jjmandog commited on Jun 9

Commit

67b4bb9

verified ·

1 Parent(s): 80717dc

Twilio client script still not working - Follow Up Deployment

Browse files

Files changed (2) hide show

index.html +248 -276
prompts.txt +12 -1

index.html CHANGED Viewed

@@ -1,4 +1,38 @@
@@ -8,6 +42,25 @@
 <!DOCTYPE html>
 <html lang="en">
 =======
@@ -40,58 +93,6 @@
 =======
-        // Initialize on page load
-        document.addEventListener('DOMContentLoaded', function() {
-            // Close when clicking outside modals
-            document.querySelectorAll('.modal-overlay').forEach(modal => {
-                modal.addEventListener('click', (e) => {
-                    if (e.target === modal) {
-                        modal.classList.add('hidden');
-                    }
-                });
-            });
-            // Initialize Twilio device with default settings
-            if (typeof Twilio !== 'undefined') {
-                const defaultToken = generateDefaultTwilioToken();
-                initializeTwilioDevice(defaultToken);
-            }
-            // Check for saved settings
-            const savedSettings = localStorage.getItem('aiCallSettings');
-            if (savedSettings) {
-                const config = JSON.parse(savedSettings);
-                // Update phone number displays
-                document.querySelectorAll('.phone-number-display').forEach(el => {
-                    el.textContent = formatPhoneNumber(config.phoneNumber);
-                });
-                // Update stats with saved data
-                if (config.callStats) {
-                    document.getElementById('callStatsCount').textContent = config.callStats;
-                }
-                if (config.textStats) {
-                    document.getElementById('textStatsCount').textContent = config.textStats;
-                }
-            }
-            // Initialize Twilio device if token exists
-            const twilioSettings = localStorage.getItem('twilioSettings');
-            if (twilioSettings) {
-                const { token } = JSON.parse(twilioSettings);
-                initializeTwilioDevice(token);
-            }
-        });
-        function formatPhoneNumber(phoneNumberString) {
-            // Format phone number for display
-            const cleaned = ('' + phoneNumberString).replace(/\D/g, '');
-            const match = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/);
-            if (match) {
-                return ['(', match[2], ') ', match[3], '-', match[4]].join('');
-            }
-            return phoneNumberString;
-        }
 =======
@@ -194,8 +195,20 @@
         <header class="flex justify-between items-center mb-6">
             <h1 class="text-2xl font-bold bg-gradient-to-r from-blue-600 to-violet-600 bg-clip-text text-transparent">Call AI Pro</h1>
             <div class="flex items-center space-x-3">
-                <div class="h-2 w-2 rounded-full bg-green-500 animate-pulse"></div>
-                <span class="text-sm font-medium text-gray-500">Active</span>
             </div>
         </header>
@@ -451,7 +464,7 @@
     <div id="jitsi-container" style="display: none;"></div>
     <!-- Training Modal -->
-    <div id="trainingModal" class="modal-overlay fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden">
         <div class="bg-white rounded-xl shadow-xl w-full max-w-md max-h-screen overflow-y-auto">
             <div class="p-6">
                 <div class="flex justify-between items-center mb-4">
@@ -567,7 +580,7 @@ You: Your order will ship within 24 hours and typically arrives in 2-3 business
     </div>
     <!-- Settings Modal -->
-    <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden">
         <div class="bg-white rounded-xl shadow-xl w-full max-w-md max-h-screen overflow-y-auto">
             <div class="p-6">
                 <div class="flex justify-between items-center mb-4">
@@ -664,143 +677,6 @@ You: Your order will ship within 24 hours and typically arrives in 2-3 business
     </div>
     <script>
-        // Twilio Client Setup
-        const twilioDevice = new Twilio.Device();
-        let activeConnection = null;
-        let currentCallSid = null;
-        // Initialize Twilio device
-        function initializeTwilioDevice(token) {
-            twilioDevice.setup(token, {
-                closeProtection: true,
-                logLevel: 1,
-                codecPreferences: ['opus', 'pcmu']
-            });
-            twilioDevice.on('ready', () => {
-                updateConnectionStatus('Connected', 'green-500');
-            });
-            twilioDevice.on('error', (error) => {
-                updateConnectionStatus(`Error: ${error.message}`, 'red-500');
-            });
-            twilioDevice.on('disconnect', () => {
-                updateConnectionStatus('Disconnected', 'red-500');
-            });
-            // Incoming call handling
-            twilioDevice.on('incoming', (connection) => {
-                incomingCall(connection);
-            });
-        }
-        function updateConnectionStatus(text, color) {
-            const statusEl = document.getElementById('twilioStatus');
-            const iconEl = document.getElementById('connectionStatusIcon');
-            const textEl = document.getElementById('connectionStatusText');
-            statusEl.classList.remove('hidden');
-            textEl.textContent = text;
-            iconEl.className = `fas fa-circle text-${color} mr-2`;
-        }
-        function incomingCall(connection) {
-            activeConnection = connection;
-            currentCallSid = connection.parameters.CallSid;
-            // Show incoming call UI
-            const callModal = document.createElement('div');
-            callModal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50';
-            callModal.innerHTML = `
-                <div class="bg-white rounded-xl shadow-lg w-full max-w-sm">
-                    <div class="p-6">
-                        <div class="text-center mb-4">
-                            <div class="call-animation mx-auto mb-4"></div>
-                            <h3 class="text-lg font-medium text-gray-900">Incoming Call</h3>
-                            <p class="text-sm text-gray-500">From: ${connection.parameters.From}</p>
-                        </div>
-                        <div class="grid grid-cols-2 gap-2">
-                            <button id="answerBtn" class="py-3 bg-green-500 hover:bg-green-600 text-white rounded-lg">
-                                <i class="fas fa-phone"></i> Answer
-                            </button>
-                            <button id="declineBtn" class="py-3 bg-red-500 hover:bg-red-600 text-white rounded-lg">
-                                <i class="fas fa-phone-slash"></i> Decline
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            `;
-            document.body.appendChild(callModal);
-            // Set up button handlers
-            document.getElementById('answerBtn').addEventListener('click', () => {
-                connection.accept();
-                setupActiveCallUI(connection);
-                document.body.removeChild(callModal);
-            });
-            document.getElementById('declineBtn').addEventListener('click', () => {
-                connection.reject();
-                document.body.removeChild(callModal);
-                addToCallLog('Missed call from ' + connection.parameters.From);
-            });
-        }
-        function setupActiveCallUI(connection) {
-            const callUI = document.createElement('div');
-            callUI.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50';
-            callUI.innerHTML = `
-                <div class="bg-white rounded-xl shadow-lg w-full max-w-sm">
-                    <div class="p-6">
-                        <div class="text-center mb-4">
-                            <h3 class="text-lg font-medium text-gray-900">Ongoing Call</h3>
-                            <p class="text-sm text-gray-500" id="callStatus">Connected</p>
-                            <p class="text-sm text-gray-500" id="callNumber">${connection.parameters.From}</p>
-                        </div>
-                        <div class="grid grid-cols-3 gap-2">
-                            <button id="muteBtn" class="py-3 bg-gray-100 hover:bg-gray-200 rounded-lg">
-                                <i class="fas fa-microphone"></i>
-                            </button>
-                            <button id="holdBtn" class="py-3 bg-gray-100 hover:bg-gray-200 rounded-lg">
-                                <i class="fas fa-pause"></i>
-                            </button>
-                            <button id="endBtn" class="py-3 bg-red-500 hover:bg-red-600 text-white rounded-lg">
-                                <i class="fas fa-phone-slash"></i>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            `;
-            document.body.appendChild(callUI);
-            // Set up button handlers
-            document.getElementById('endBtn').addEventListener('click', () => {
-                connection.disconnect();
-                document.body.removeChild(callUI);
-                addToCallLog('Call with ' + connection.parameters.From + ' ended');
-            });
-            document.getElementById('muteBtn').addEventListener('click', (e) => {
-                if (connection.isMuted()) {
-                    connection.mute(false);
-                    e.target.classList.remove('bg-gray-200');
-                } else {
-                    connection.mute(true);
-                    e.target.classList.add('bg-gray-200');
-                }
-            });
-            connection.on('disconnect', () => {
-                if (document.body.contains(callUI)) {
-                    document.body.removeChild(callUI);
-                }
-            });
-        }
         function addToCallLog(entry) {
             const callLog = document.querySelector('.space-y-3.max-h-60');
@@ -823,71 +699,6 @@ You: Your order will ship within 24 hours and typically arrives in 2-3 business
         }
-        // Client Setup
-        let jitsiClient;
-        let callSocket;
-        let trillionClient = null;
-        async function initializeJitsiClient() {
-            try {
-                // Initialize Jitsi Meet API client
-                jitsiClient = {
-                    makeCall: async (options) => {
-                        return new Promise((resolve) => {
-                            console.log('Initiating Jitsi call to:', options.to);
-                            const domain = 'meet.jit.si';
-                            const options = {
-                                roomName: `call-${Date.now()}`,
-                                parentNode: document.querySelector('#jitsi-container'),
-                                userInfo: {
-                                    displayName: 'AI Call Manager'
-                                }
-                            };
-                            // Create Jitsi Meet API instance
-                            const api = new JitsiMeetExternalAPI(domain, options);
-                            setTimeout(() => resolve({id: `jitsi-${Date.now()}`, api}), 1000);
-                        });
-                    }
-                };
-                // Use a simple WebSocket connection (you would replace with your own endpoint)
-                callSocket = new WebSocket('wss://realtime.trillion.ventures/ws');
-                setTimeout(() => {
-                    if (callSocket.onopen) callSocket.onopen();
-                }, 500);
-                callSocket.onopen = () => {
-                    console.log('Connected to Trillion real-time service');
-                    callSocket.send(JSON.stringify({
-                        type: 'authenticate',
-                        token: authToken
-                    }));
-                };
-                callSocket.onmessage = handleSocketMessage;
-                callSocket.onclose = () => console.log('Disconnected from real-time service');
-                return true;
-            } catch (error) {
-                console.error("Failed to initialize Trillion client:", error);
-                return false;
-            }
-        }
-        function handleSocketMessage(event) {
-            const data = JSON.parse(event.data);
-            switch(data.type) {
-                case 'call_update':
-                    updateCallUI(data.status, data.transcript);
-                    break;
-                case 'message':
-                    console.log("New message:", data.content);
-                    break;
-                case 'call_ended':
-                    endCallUI(data.callId);
-                    break;
-            }
-        }
         async function sendSMS(to, message) {
             try {
@@ -1117,11 +928,185 @@ You: Your order will ship within 24 hours and typically arrives in 2-3 business
         });
 =======
-        // Helper function to generate a default Twilio token
-        function generateDefaultTwilioToken() {
-            // In a real implementation, this would come from your backend
-            // For demo purposes, we'll return a mock token
-            return `eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkFJIENhbGwgTWFuYWdlciIsImlhdCI6MTUxNjIzOTAyMn0.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c`;
         }
         // Training sections
@@ -1295,19 +1280,6 @@ Or contact support at help@trillion.ventures`);
             // Rest of DOMContentLoaded...
 =======
-            const savedSettings = localStorage.getItem('aiCallSettings');
-            if (savedSettings) {
-                const config = JSON.parse(savedSettings);
-                // Update phone number displays
-                document.querySelectorAll('.phone-number-display').forEach(el => {
-                    el.textContent = config.twilioNum || config.phoneNum || '+1 (858) 263-4276';
-                });
-                // Update stats section with saved data
-                document.querySelector('#callStatsCount').textContent = localStorage.getItem('callStats') || '128';
-                document.querySelector('#textStatsCount').textContent = localStorage.getItem('textStats') || '342';
-            }
         });
         // Function to update call UI with real data

+    <script>
+        // Initialize DOM elements after page loads
+        document.addEventListener('DOMContentLoaded', function() {
+            // Set up modals
+            const setupModal = (modalId, openBtnId, closeBtnId) => {
+                const modal = document.getElementById(modalId);
+                const openBtn = document.getElementById(openBtnId);
+                const closeBtn = document.getElementById(closeBtnId);
+                if (openBtn) openBtn.addEventListener('click', () => modal.classList.remove('hidden'));
+                if (closeBtn) closeBtn.addEventListener('click', () => modal.classList.add('hidden'));
+                // Close when clicking outside modal content
+                modal.addEventListener('click', (e) => {
+                    if (e.target === modal) modal.classList.add('hidden');
+                });
+            };
+            setupModal('trainingModal', 'trainBtn', 'closeTraining');
+            setupModal('settingsModal', 'settingsBtn', 'closeSettings');
+            // Format phone numbers on page
+            document.querySelectorAll('.phone-number-display').forEach(el => {
+                const formatNumber = (num) => {
+                    const cleaned = ('' + num).replace(/\D/g, '');
+                    const match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
+                    return match ? `(${match[1]}) ${match[2]}-${match[3]}` : num;
+                };
+                el.textContent = formatNumber(el.textContent.trim());
+            });
+        });
+    </script>
 <!DOCTYPE html>
 <html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AI Call Manager</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <!-- Load Twilio Client directly from CDN -->
+  <script src="https://sdk.twilio.com/js/client/releases/1.14.0/twilio.min.js"></script>
+  <style>
+    .call-animation {
+      animation: pulse 1.5s infinite;
+    }
+    @keyframes pulse {
+      0% { transform: scale(0.95); opacity: 0.7; }
+      70% { transform: scale(1.1); opacity: 0.3; }
+      100% { transform: scale(0.95); opacity: 0.7; }
+    }
+  </style>
+</head>
 =======
 =======
 =======
         <header class="flex justify-between items-center mb-6">
             <h1 class="text-2xl font-bold bg-gradient-to-r from-blue-600 to-violet-600 bg-clip-text text-transparent">Call AI Pro</h1>
             <div class="flex items-center space-x-3">
+                <button id="initTwilioBtn" class="text-sm bg-blue-100 hover:bg-blue-200 text-blue-800 px-3 py-1 rounded-lg transition-all duration-300 border border-transparent">
+                    <i class="fas fa-phone mr-1"></i>
+                    <span>Init Twilio</span>
+                </button>
+                <button id="settingsBtn" class="text-sm bg-purple-100 hover:bg-purple-200 text-purple-800 px-3 py-1 rounded-lg">
+                    <i class="fas fa-cog mr-1"></i> Settings
+                </button>
+                <button id="trainBtn" class="text-sm bg-green-100 hover:bg-green-200 text-green-800 px-3 py-1 rounded-lg">
+                    <i class="fas fa-brain mr-1"></i> Train
+                </button>
+                <div id="connectionStatus" class="flex items-center hidden">
+                    <i id="connectionStatusIcon" class="fas fa-circle text-gray-500 mr-2"></i>
+                    <span id="connectionStatusText" class="text-sm font-medium text-gray-500">Not connected</span>
+                </div>
             </div>
         </header>
     <div id="jitsi-container" style="display: none;"></div>
     <!-- Training Modal -->
+    <div id="trainingModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden z-50">
         <div class="bg-white rounded-xl shadow-xl w-full max-w-md max-h-screen overflow-y-auto">
             <div class="p-6">
                 <div class="flex justify-between items-center mb-4">
     </div>
     <!-- Settings Modal -->
+    <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden z-50">
         <div class="bg-white rounded-xl shadow-xl w-full max-w-md max-h-screen overflow-y-auto">
             <div class="p-6">
                 <div class="flex justify-between items-center mb-4">
     </div>
     <script>
         function addToCallLog(entry) {
             const callLog = document.querySelector('.space-y-3.max-h-60');
         }
         async function sendSMS(to, message) {
             try {
         });
 =======
+        // Initialize all button handlers after DOM loads
+        document.addEventListener('DOMContentLoaded', function() {
+            // Enhanced Twilio init button
+            document.getElementById('initTwilioBtn').addEventListener('click', async function() {
+                try {
+                    this.disabled = true;
+                    const btnText = this.querySelector('span');
+                    const originalText = btnText.textContent;
+                    btnText.textContent = 'Initializing...';
+                    if (typeof Twilio === 'undefined') {
+                        throw new Error('Twilio SDK not loaded');
+                    }
+                    const twilioSettings = localStorage.getItem('twilioSettings');
+                    if (!twilioSettings) {
+                        throw new Error('Twilio settings not configured');
+                    }
+                    const { token } = JSON.parse(twilioSettings);
+                    // Visual feedback
+                    this.classList.remove('bg-blue-100', 'hover:bg-blue-200');
+                    this.classList.add('bg-blue-200', 'animate-pulse');
+                    // Initialize with timeout
+                    await Promise.race([
+                        initializeTwilioDevice(token),
+                        new Promise((_, reject) =>
+                            setTimeout(() => reject(new Error('Connection timeout')), 10000)
+                        )
+                    ]);
+                    // Update UI on success
+                    this.classList.remove('bg-blue-200', 'animate-pulse');
+                    this.classList.add('bg-green-100', 'border-green-300');
+                    btnText.textContent = 'Connected';
+                    updateConnectionStatus('Connected', 'fas fa-check-circle text-green-600');
+                } catch (error) {
+                    console.error('Twilio init failed:', error);
+                    this.classList.remove('bg-blue-200', 'animate-pulse');
+                    this.classList.add('bg-red-100', 'border-red-300');
+                    this.querySelector('span').textContent = 'Failed!';
+                    updateConnectionStatus('Failed', 'fas fa-times-circle text-red-600');
+                    // Show settings modal if no credentials
+                    if (error.message.includes('not configured')) {
+                        document.getElementById('settingsBtn').click();
+                    }
+                } finally {
+                    setTimeout(() => {
+                        this.disabled = false;
+                        this.querySelector('span').textContent = 'Init Twilio';
+                        this.classList.remove('bg-red-100', 'border-red-300');
+                    }, 3000);
+                }
+            });
+            function updateConnectionStatus(text, iconClass) {
+                const statusElement = document.getElementById('connectionStatus');
+                const iconElement = document.getElementById('connectionStatusIcon');
+                const textElement = document.getElementById('connectionStatusText');
+                statusElement.classList.remove('hidden');
+                iconElement.className = iconClass;
+                textElement.textContent = text;
+            }
+            // Modal close handlers
+            document.getElementById('closeTraining').addEventListener('click', () => {
+                document.getElementById('trainingModal').classList.add('hidden');
+            });
+            document.getElementById('closeSettings').addEventListener('click', () => {
+                document.getElementById('settingsModal').classList.add('hidden');
+            });
+            // Training mode buttons
+            document.querySelectorAll('.trainingModeBtn').forEach(btn => {
+                btn.addEventListener('click', function() {
+                    const mode = this.dataset.mode;
+                    document.querySelectorAll('.trainingSection').forEach(s =>
+                        s.classList.add('hidden')
+                    );
+                    document.getElementById(`${mode}Training`).classList.remove('hidden');
+                    // Update active button style
+                    document.querySelectorAll('.trainingModeBtn').forEach(b =>
+                        b.classList.remove('bg-purple-100', 'border-purple-300', 'text-purple-800')
+                    );
+                    this.classList.add('bg-purple-100', 'border-purple-300', 'text-purple-800');
+                });
+            });
+            // Call purpose toggle
+            document.getElementById('callPurpose').addEventListener('change', function() {
+                document.getElementById('trainingOptions').style.display =
+                    this.value === 'training' ? 'block' : 'none';
+            });
+        });
+        document.getElementById('initSettingsBtn').addEventListener('click', function() {
+            const savedSettings = localStorage.getItem('aiCallSettings');
+            if (savedSettings) {
+                const config = JSON.parse(savedSettings);
+                document.querySelectorAll('.phone-number-display').forEach(el => {
+                    el.textContent = formatPhoneNumber(config.phoneNumber);
+                });
+                if (config.callStats) {
+                    document.getElementById('callStatsCount').textContent = config.callStats;
+                }
+                if (config.textStats) {
+                    document.getElementById('textStatsCount').textContent = config.textStats;
+                }
+                alert('Settings loaded successfully');
+            } else {
+                alert('No saved settings found');
+            }
+        });
+        // Initialize Twilio Device
+        let twilioDevice = null;
+        function initializeTwilioDevice(token) {
+            return new Promise((resolve, reject) => {
+                try {
+                    // Setup Twilio Device
+                    twilioDevice = new Twilio.Device(token, {
+                        codecPreferences: ['opus', 'pcmu'],
+                        fakeLocalDTMF: true,
+                        enableRingingState: true,
+                    });
+                    // Setup event handlers
+                    twilioDevice.on('ready', (device) => {
+                        console.log('Twilio device ready');
+                        resolve();
+                    });
+                    twilioDevice.on('error', (error) => {
+                        console.error('Twilio device error:', error);
+                        reject(error);
+                    });
+                    twilioDevice.on('disconnect', (conn) => {
+                        console.log('Call ended');
+                        updateCallUI('Disconnected', 'Call ended');
+                    });
+                    // Set up incoming call handler
+                    twilioDevice.on('incoming', (conn) => {
+                        const callerId = conn.parameters.From;
+                        console.log('Incoming call from:', callerId);
+                        // Show call interface
+                        const isTraining = confirm('Is this a training call?');
+                        showCallInterface(
+                            callerId,
+                            isTraining,
+                            isTraining ? 'conversation' : null,
+                            conn.parameters.CallSid
+                        );
+                        // Auto-answer after delay
+                        const delay = parseInt(document.getElementById('callDelay').value) * 1000 || 30000;
+                        setTimeout(() => {
+                            conn.accept();
+                            updateCallUI('In Progress', `Connected with ${callerId}`);
+                        }, delay);
+                    });
+                    twilioDevice.register();
+                } catch (error) {
+                    reject(error);
+                }
+            });
         }
         // Training sections
             // Rest of DOMContentLoaded...
 =======
         });
         // Function to update call UI with real data

prompts.txt CHANGED Viewed

@@ -10,4 +10,15 @@ Buttons are still broken. Remove every broken code and rework until
 Buttons are still broken. Remove every broken code and rework until it does work. I
 Remove everyone that is causing errors
 Now reinstall scripts applications everything needed for this to work but remove the buttons .
-Recode ui update all

 Buttons are still broken. Remove every broken code and rework until it does work. I
 Remove everyone that is causing errors
 Now reinstall scripts applications everything needed for this to work but remove the buttons .
+Recode ui update all
+The whole app is now broken can you please recode with no errors insure everything is functioning and not just a simulation but a working application
+Remove the initializing when app
+Remove the initializing when app open but instead create working buttons that do the same thing
+Something is still wrong because  when I click the buttons you made nothing opens
+Pass the code and figure out why the buttons are not working
+Remove broken codes and scripts and install new  . Remove everying that initializes as app opens
+Remove broken codes and scripts and install new  . Remove everying that initializes as app opens
+The init twilio still isn’t functioning and needs to be fixed
+Twilio client script still not working
+Twilio client script still not working
+Twilio client script still not working