Hugging Face's logo

Spaces:
jjmandog
/
tester
Running

App Files Community
tester / index.html
jjmandog's picture
jjmandog
Twilio client script still not working - Follow Up Deployment
67b4bb9 verified
raw
history blame contribute delete
90.9 kB
<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>
=======
=======
<div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Memory Retention</label>
 <select class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm">
 <option>7 days</option>
 <option>14 days</option>
 <option selected>30 days</option>
 <option>90 days</option>
 <option>Indefinitely</option>
 </select>
 <p class="mt-1 text-xs text-gray-500">How long should AI remember conversation history?</p>
 </div>
 </div>
 </div>
<div>
 <label class="flex items-center space-x-3">
 <input type="checkbox" checked class="rounded h-4 w-4 text-indigo-600 focus:ring-indigo-500">
 <span class="text-sm font-medium text-gray-700">Daily Training Reminders</span>
 </label>
 </div>
=======
=======
=======
<div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Memory Retention</label>
 <select class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm">
 <option>7 days</option>
 <option>14 days</option>
 <option selected>30 days</option>
 <option>90 days</option>
 <option>Indefinitely</option>
 </select>
 <p class="mt-1 text-xs text-gray-500">How long should AI remember conversation history?</p>
 </div>
 </div>
 </div>
<div>
 <label class="flex items-center space-x-3">
 <input type="checkbox" checked class="rounded h-4 w-4 text-indigo-600 focus:ring-indigo-500">
 <span class="text-sm font-medium text-gray-700">Daily Training Reminders</span>
 </label>
 </div>
=======
<!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/3.4.0"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
 <script src="https://sdk.vercel.app/external_api.js"></script>
 <script src="https://sdk.twilio.com/js/client/releases/1.14.1/twilio.min.js"></script>
 <script src="https://cdn.apple-mapkit.com/mk/5.x/mapkit.js"></script>
 <!-- Added Pusher for real-time chat -->
 <script src="https://js.pusher.com/8.2.0/pusher.min.js"></script>
 <style>
 @keyframes pulse-ring {
 0% { transform: scale(0.33); }
 80%, 100% { opacity: 0; }
 }
 @keyframes pulse-dot {
 0% { transform: scale(0.8); }
 50% { transform: scale(1); }
 100% { transform: scale(0.8); }
 }
 /* Custom scrollbar */
 .custom-scrollbar::-webkit-scrollbar {
 width: 6px;
 }
 .custom-scrollbar::-webkit-scrollbar-track {
 background: rgba(156, 163, 175, 0.1);
 }
 .custom-scrollbar::-webkit-scrollbar-thumb {
 background: rgba(99, 102, 241, 0.5);
 border-radius: 3px;
 }
 /* Call animation */
 .call-animation {
 position: relative;
 width: 50px;
 height: 50px;
 }
 .call-animation:before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(16, 185, 129, 0.5);
 border-radius: 50%;
 animation: pulse-ring 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
 }
 .call-animation:after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: #10B981;
 border-radius: 50%;
 transform: scale(0.8);
 animation: pulse-dot 1.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
 }
 </style>
</head>
<body class="bg-gray-100 min-h-screen font-sans">
 <div class="container mx-auto px-4 py-6 max-w-md">
 <!-- Header -->
 <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>
<!-- Main Dashboard -->
 <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-4 border border-gray-100">
 <div class="p-5">
 <div class="flex items-center mb-5">
 <div class="relative mr-4">
 <div class="call-animation"></div>
 <div class="absolute inset-0 flex items-center justify-center">
 <i class="fas fa-phone text-white text-sm"></i>
 </div>
 </div>
 <div>
 <h2 class="text-lg font-semibold text-gray-800">Call Management</h2>
 <p class="text-xs text-gray-500 tracking-wider">ACTIVE NUMBER: <span class="font-medium phone-number-display">(562) 228-9429</span></p>
 </div>
 </div>
<!-- Call Management Section -->
 <div class="space-y-4">
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Answer Calls After</label>
 <select id="callDelay" class="w-full py-2.5 px-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50 text-sm">
 <option value="15">15 seconds</option>
 <option value="30" selected>30 seconds</option>
 <option value="45">45 seconds</option>
 <option value="60">1 minute</option>
 </select>
 </div>
<div>
 <label class="flex items-center space-x-3">
 <input type="checkbox" id="enableCallAI" class="rounded h-5 w-5 text-indigo-600 focus:ring-indigo-500" checked>
 <span class="text-sm font-medium text-gray-700">Enable Call AI Assistant</span>
 </label>
 <p class="mt-1 text-xs text-gray-500">AI will answer calls when you're unavailable</p>
 </div>
<div id="callSettings" class="pl-8">
 <div class="mt-3">
 <label class="block text-sm font-medium text-gray-700 mb-1">AI Voice</label>
 <select class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
 <option>American Female (Emma)</option>
 <option>American Male (Brian)</option>
 <option>British Female (Amy)</option>
 </select>
 </div>
<div class="mt-3">
 <label class="block text-sm font-medium text-gray-700 mb-1">Default Message</label>
 <textarea id="callGreeting" rows="2" class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Hello, I'm unable to take your call right now. Please leave a message or send a text and I'll get back to you soon."></textarea>
 </div>
 </div>
 </div>
 </div>
 <div class="bg-gray-50 px-5 py-3 border-t border-gray-100 flex justify-between text-xs">
 <div class="text-gray-500">
 <span class="font-medium text-gray-700">128</span> calls managed
 </div>
 <div class="text-gray-500">
 <span class="font-medium text-gray-700">89%</span> accuracy
 </div>
 <div class="text-gray-500">
 <span class="font-medium text-gray-700">24h</span> uptime
 </div>
 </div>
 </div>
<!-- Make a Call Section -->
 <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-6">
 <div class="p-6">
 <div class="flex items-center justify-between mb-5 pb-3 border-b border-gray-100">
 <div class="flex items-center">
 <div class="w-10 h-10 flex items-center justify-center bg-blue-50 rounded-lg mr-3">
 <i class="fas fa-phone text-blue-500 text-lg"></i>
 </div>
 <div>
 <h2 class="text-lg font-semibold text-gray-800">Make a Call</h2>
 <p class="text-xs text-gray-500">Train AI with interactive calls</p>
 </div>
 </div>
 <div class="text-xs bg-blue-50 text-blue-600 px-2 py-1 rounded">
 <i class="fas fa-bolt mr-1"></i> Quick Dial
 </div>
 </div>
<div class="space-y-4">
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Phone Number to Call</label>
 <input type="tel" id="callNumber" class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="e.g. (562) 228-9429" value="15622289429">
 </div>
<div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Call Purpose</label>
 <select id="callPurpose" class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
 <option value="training">AI Training Session</option>
 <option value="outgoing">Regular Outgoing Call</option>
 </select>
 </div>
<div id="trainingOptions" class="pl-4 space-y-3 hidden">
 <label class="flex items-center space-x-3">
 <input type="checkbox" id="enableCallTraining" class="rounded h-4 w-4 text-blue-600 focus:ring-blue-500" checked>
 <span class="text-sm font-medium text-gray-700">Enable Interactive Training</span>
 </label>
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Training Mode</label>
 <select id="callTrainingMode" class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
 <option value="qa">Q&A Training</option>
 <option value="conversation">Conversation Practice</option>
 <option value="scenario">Scenario Simulation</option>
 </select>
 </div>
 </div>
<button id="startCallBtn" class="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition flex items-center justify-center space-x-2">
 <i class="fas fa-phone"></i>
 <span>Start Call</span>
 </button>
 </div>
 </div>
 </div>
<!-- Text AI Section -->
 <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-6">
 <div class="p-6">
 <div class="flex items-center justify-between mb-5 pb-3 border-b border-gray-100">
 <div class="flex items-center">
 <div class="w-10 h-10 flex items-center justify-center bg-purple-50 rounded-lg mr-3">
 <i class="fas fa-comment-alt text-purple-500 text-lg"></i>
 </div>
 <div>
 <h2 class="text-lg font-semibold text-gray-800">Text AI Assistant</h2>
 <p class="text-xs text-gray-500">Smart responses & automated replies</p>
 </div>
 </div>
 <div class="flex space-x-1">
 <div class="w-2 h-2 rounded-full bg-purple-400"></div>
 <div class="w-2 h-2 rounded-full bg-purple-300"></div>
 <div class="w-2 h-2 rounded-full bg-purple-200"></div>
 </div>
 </div>
<div class="space-y-4">
 <div>
 <label class="flex items-center space-x-3">
 <input type="checkbox" id="enableTextAI" class="rounded h-5 w-5 text-purple-600 focus:ring-purple-500" checked>
 <span class="text-sm font-medium text-gray-700">Enable Text AI Assistant</span>
 </label>
 <p class="mt-1 text-xs text-gray-500">AI will respond to unanswered texts automatically</p>
 </div>
<div id="textSettings" class="pl-8 space-y-4">
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Response Style</label>
 <select id="responseStyle" class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
 <option value="professional">Professional</option>
 <option value="friendly" selected>Friendly</option>
 <option value="concise">Concise</option>
 </select>
 </div>
<div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Auto-response Delay</label>
 <select id="textDelay" class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
 <option value="1">1 hour</option>
 <option value="2" selected>2 hours</option>
 <option value="4">4 hours</option>
 <option value="6">6 hours</option>
 <option value="12">12 hours</option>
 </select>
 </div>
<div class="pt-2">
 <button id="trainAIbtn" class="w-full py-2 px-4 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition flex items-center justify-center space-x-2">
 <i class="fas fa-brain"></i>
 <span>Train Text AI</span>
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Stats Section -->
 <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-6">
 <div class="p-6">
 <h2 class="text-lg font-semibold text-gray-800 mb-4">Usage Statistics</h2>
 <div class="grid grid-cols-2 gap-4">
 <div class="bg-indigo-50 p-3 rounded-lg">
 <p class="text-xs text-indigo-600 font-medium">Calls Managed</p>
 <p class="text-2xl font-bold text-indigo-700" id="callStatsCount">128</p>
 </div>
 <div class="bg-purple-50 p-3 rounded-lg">
 <p class="text-xs text-purple-600 font-medium">Texts Responded</p>
 <p class="text-2xl font-bold text-purple-700" id="textStatsCount">342</p>
 </div>
 <div class="bg-green-50 p-3 rounded-lg">
 <p class="text-xs text-green-600 font-medium">AI Confidence</p>
 <p class="text-2xl font-bold text-green-700">89%</p>
 </div>
 <div class="bg-yellow-50 p-3 rounded-lg">
 <p class="text-xs text-yellow-600 font-medium">Training Cycles</p>
 <p class="text-2xl font-bold text-yellow-700">24</p>
 </div>
 </div>
 </div>
 </div>
<!-- Call Log Preview -->
 <div class="bg-white rounded-xl shadow-lg overflow-hidden">
 <div class="p-6">
 <div class="flex justify-between items-center mb-4">
 <h2 class="text-lg font-semibold text-gray-800">Recent Activity</h2>
 <button class="text-xs text-indigo-600 hover:text-indigo-800">View All</button>
 </div>
 <div class="space-y-3 max-h-60 overflow-y-auto custom-scrollbar">
 <div class="flex items-start py-2 border-b border-gray-100">
 <div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
 <i class="fas fa-phone-alt text-red-500"></i>
 </div>
 <div class="flex-1">
 <p class="text-sm font-medium text-gray-800">Missed Call</p>
 <p class="text-xs text-gray-500">From: (562) 555-0134</p>
 <p class="text-xs text-gray-500">14 min ago - AI answered after 30s</p>
 </div>
 </div>
 <div class="flex items-start py-2 border-b border-gray-100">
 <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
 <i class="fas fa-sms text-green-500"></i>
 </div>
 <div class="flex-1">
 <p class="text-sm font-medium text-gray-800">Text Response</p>
 <p class="text-xs text-gray-500">To: (562) 555-0198</p>
 <p class="text-xs text-gray-500">1 hour ago - AI confidence: 92%</p>
 </div>
 </div>
 <div class="flex items-start py-2 border-b border-gray-100">
 <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
 <i class="fas fa-phone-alt text-blue-500"></i>
 </div>
 <div class="flex-1">
 <p class="text-sm font-medium text-gray-800">AI Call</p>
 <p class="text-xs text-gray-500">With: (562) 555-0163 (2m 43s)</p>
 <p class="text-xs text-gray-500">3 hours ago - Scheduled follow-up</p>
 </div>
 </div>
 </div>
 </div>
<!-- Container for Jitsi meetings (hidden by default) -->
 <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">
 <h3 class="text-lg font-semibold text-gray-900">Train Your Text AI</h3>
 <button id="closeTraining" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="space-y-4">
 <div class="p-4 bg-gray-50 rounded-lg">
 <p class="text-sm text-gray-700 mb-2">AI Knowledge Level: <span class="font-medium">Intermediate</span></p>
 <div class="w-full bg-gray-200 rounded-full h-2.5">
 <div class="bg-purple-600 h-2.5 rounded-full" style="width: 65%"></div>
 </div>
 </div>
<div>
 <p class="text-sm font-medium text-gray-700 mb-2">Training Mode</p>
 <div class="grid grid-cols-2 gap-2">
 <button class="trainingModeBtn py-2 px-3 border border-gray-300 rounded-lg text-sm font-medium bg-white hover:bg-gray-50" data-mode="qa">Q&A Training</button>
 <button class="trainingModeBtn py-2 px-3 border border-gray-300 rounded-lg text-sm font-medium bg-white hover:bg-gray-50" data-mode="examples">Teach with Examples</button>
 <button class="trainingModeBtn py-2 px-3 border border-gray-300 rounded-lg text-sm font-medium bg-white hover:bg-gray-50" data-mode="keywords">Keyword Responses</button>
 <button class="trainingModeBtn py-2 px-3 border border-gray-300 rounded-lg text-sm font-medium bg-white hover:bg-gray-50" data-mode="prefs">Style Preferences</button>
 </div>
 </div>
<!-- Q&A Training Section -->
 <div id="qaTraining" class="trainingSection hidden">
 <div class="space-y-4">
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Question to Teach</label>
 <input type="text" class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm" placeholder="E.g. What are your business hours?">
 </div>
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Preferred Response</label>
 <textarea class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm" rows="3" placeholder="Our business hours are Monday to Friday, 9am to 5pm PST."></textarea>
 </div>
 <button class="w-full py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-sm">
 Add to AI Knowledge
 </button>
 </div>
 </div>
<!-- Examples Training Section -->
 <div id="examplesTraining" class="trainingSection hidden">
 <div class="space-y-4">
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Example Conversation</label>
 <textarea class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm" rows="5" placeholder="Client: When can I expect my order to arrive?
You: Your order will ship within 24 hours and typically arrives in 2-3 business days. We'll send tracking information once it's on the way."></textarea>
 </div>
 <button class="w-full py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-sm">
 Analyze for Patterns
 </button>
 </div>
 </div>
<!-- Keywords Training Section -->
 <div id="keywordsTraining" class="trainingSection hidden">
 <div class="space-y-4">
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Trigger Word/Phrase</label>
 <input type="text" class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm" placeholder="E.g. refund, return policy">
 </div>
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Response for This Keyword</label>
 <textarea class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm" rows="3" placeholder="Our return policy allows for returns within 30 days of purchase..."></textarea>
 </div>
 <button class="w-full py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-sm">
 Add Keyword Response
 </button>
 </div>
 </div>
<!-- Preferences Training Section -->
 <div id="prefsTraining" class="trainingSection hidden">
 <div class="space-y-4">
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Communication Style</label>
 <select class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm">
 <option>Professional</option>
 <option selected>Friendly</option>
 <option>Concise</option>
 <option>Detailed</option>
 </select>
 </div>
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Common Phrases You Use</label>
 <textarea class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm" rows="3" placeholder="E.g. Thanks for reaching out!, Happy to help!, Let me check that for you..."></textarea>
 </div>
 <button class="w-full py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-sm">
 Update Preferences
 </button>
 </div>
 </div>
<div class="pt-4 border-t border-gray-200">
 <h4 class="text-sm font-medium text-gray-900 mb-2">AI Test Area</h4>
 <div class="mb-2">
 <input type="text" class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm" placeholder="Test message for AI to respond to" id="testMessage">
 </div>
 <button onclick="testAIResponse()" class="w-full py-2 bg-gray-200 hover:bg-gray-300 rounded-lg text-sm mb-4">
 Test AI Response
 </button>
 <div id="aiResponse" class="hidden bg-gray-50 p-3 rounded-lg">
 <p class="text-sm text-gray-800">This is where the AI's response would appear based on its current training.</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </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">
 <h3 class="text-lg font-semibold text-gray-900">Settings</h3>
 <button id="closeSettings" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="space-y-4">
=======
<div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Memory Retention</label>
 <select class="w-full py-2 px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm">
 <option>7 days</option>
 <option>14 days</option>
 <option selected>30 days</option>
 <option>90 days</option>
 <option>Indefinitely</option>
 </select>
 <p class="mt-1 text-xs text-gray-500">How long should AI remember conversation history?</p>
 </div>
<div>
 <label class="flex items-center space-x-3">
 <input type="checkbox" checked class="rounded h-4 w-4 text-indigo-600 focus:ring-indigo-500">
 <span class="text-sm font-medium text-gray-700">Daily Training Reminders</span>
 </label>
 </div>
<div class="pt-4 border-t border-gray-200">
 <h4 class="text-sm font-medium text-gray-900 mb-2">AI Advanced Settings</h4>
 <button id="showTwilioBtn" class="w-full py-2 mb-4 text-sm bg-gray-200 hover:bg-gray-300 rounded-lg">Show Twilio Credentials</button>
<div id="twilioCredentials" class="hidden bg-gray-50 p-3 rounded-lg space-y-2">
 <div>
 <label class="block text-xs font-medium text-gray-500 mb-1">Twilio Account SID</label>
 <div class="flex">
 <input type="text" id="twilioSid" class="flex-1 text-xs py-1 px-2 bg-white border border-gray-300 rounded-l" placeholder="ACXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX">
 <button class="copyBtn px-2 text-xs bg-gray-100 border border-l-0 border-gray-300 rounded-r text-blue-600 hover:bg-gray-200" data-target="twilioSid">
 <i class="fas fa-copy"></i>
 </button>
 </div>
 </div>
 <div>
 <label class="block text-xs font-medium text-gray-500 mb-1">Twilio Auth Token</label>
 <div class="flex">
 <div class="relative flex-1">
 <input type="password" id="twilioToken" class="w-full text-xs py-1 px-2 bg-white border border-gray-300 rounded-l" placeholder="Your auth token">
 <button class="togglePassword absolute right-1 top-1 text-gray-500 hover:text-gray-700 text-xs">
 <i class="far fa-eye"></i>
 </button>
 </div>
 <button class="copyBtn px-2 text-xs bg-gray-100 border border-l-0 border-gray-300 rounded-r text-blue-600 hover:bg-gray-200" data-target="twilioToken">
 <i class="fas fa-copy"></i>
 </button>
 </div>
 </div>
 <div>
 <label class="block text-xs font-medium text-gray-500 mb-1">Application SID</label>
 <input type="text" id="twilioAppSid" class="w-full text-xs py-1 px-2 bg-white border border-gray-300 rounded" placeholder="APXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX">
 </div>
 <div class="pt-2">
 <button id="saveTwilioBtn" class="w-full py-1 text-xs bg-blue-600 hover:bg-blue-700 text-white rounded">
 Save & Generate Token
 </button>
 <p class="text-xs text-gray-500 mt-2">Token expires in: <span id="tokenExpiry">Not generated</span></p>
 <p class="text-xs text-red-500 mt-1">Keep credentials secure!</p>
 </div>
 </div>
 <div class="mb-2">
 <label class="block text-xs font-medium text-gray-700 mb-1">Creativity Level</label>
 <input type="range" min="0" max="10" value="7" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
 <div class="flex justify-between text-xs text-gray-500 px-1">
 <span>Precise</span>
 <span>Balanced</span>
 <span>Creative</span>
 </div>
 </div>
 </div>
<div class="flex space-x-3 pt-4">
 <button class="flex-1 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg text-sm">
 Reset Training
 </button>
 <button class="flex-1 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm">
 Save Settings
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
<script>
 function addToCallLog(entry) {
 const callLog = document.querySelector('.space-y-3.max-h-60');
 const logEntry = document.createElement('div');
 logEntry.className = 'flex items-start py-2 border-b border-gray-100';
 logEntry.innerHTML = `
 <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
 <i class="fas fa-phone-alt text-blue-500"></i>
 </div>
 <div class="flex-1">
 <p class="text-sm font-medium text-gray-800">${entry}</p>
 <p class="text-xs text-gray-500">Just now</p>
 </div>
 `;
callLog.insertBefore(logEntry, callLog.firstChild);
 if (callLog.children.length > 5) {
 callLog.removeChild(callLog.lastChild);
 }
 }
 async function sendSMS(to, message) {
 try {
 const response = await fetch('/api/send-sms', {
 method: 'POST',
 headers: {
 'Content-Type': 'application/json',
 'Authorization': `Bearer ${localStorage.getItem('authToken')}`
 },
 body: JSON.stringify({ to, message })
 });
if (!response.ok) throw new Error('Failed to send SMS');
 return await response.json();
 } catch (error) {
 console.error('SMS send error:', error);
 throw error;
 }
 }
 // Save call stats when calls are made/ended
 function updateCallStats() {
 const callStats = parseInt(localStorage.getItem('callStats')) || 128;
 localStorage.setItem('callStats', callStats + 1);
 document.querySelector('#callStatsCount').textContent = callStats + 1;
 }
 // AI Response Generation
 async function generateAIResponse(message, context = {}) {
 try {
 const response = await fetch('/api/generate-ai-response', {
 method: 'POST',
 headers: {
 'Content-Type': 'application/json',
 'Authorization': `Bearer ${localStorage.getItem('authToken')}`
 },
 body: JSON.stringify({
message,
 style: document.getElementById('responseStyle').value,
 context
 })
 });
 if (!response.ok) throw new Error('AI response failed');
 return await response.json();
 } catch (error) {
 console.error('AI error:', error);
 return { response: "I'm having trouble generating a response right now. Please try again later." };
 }
 }
 // Enhanced Twilio Settings Management
 let twilioToken = null;
 let tokenExpiry = null;
 document.getElementById('showTwilioBtn').addEventListener('click', function() {
 const credsDiv = document.getElementById('twilioCredentials');
 credsDiv.classList.toggle('hidden');
 this.textContent = credsDiv.classList.contains('hidden') ?
'Show Twilio Credentials' : 'Hide Twilio Credentials';
// Load saved settings if available
 const savedSettings = localStorage.getItem('twilioSettings');
 if (savedSettings) {
 const settings = JSON.parse(savedSettings);
 document.getElementById('twilioSid').value = settings.accountSid || '';
 document.getElementById('twilioToken').value = settings.authToken || '';
 document.getElementById('twilioAppSid').value = settings.appSid || '';
 if (settings.token && settings.expiry) {
 updateTokenDisplay(settings.token, settings.expiry);
 }
 }
 });
 // Save and generate token
 document.getElementById('saveTwilioBtn').addEventListener('click', async function() {
 const accountSid = document.getElementById('twilioSid').value.trim();
 const authToken = document.getElementById('twilioToken').value.trim();
 const appSid = document.getElementById('twilioAppSid').value.trim();
if (!accountSid || !authToken) {
 alert('Please enter Account SID and Auth Token');
 return;
 }
try {
 // In a real app, this would call your backend to generate the token
 // For demo purposes, we'll generate a mock token
 const generatedToken = await generateTwilioToken(accountSid, authToken, appSid);
// Save settings to localStorage
 const settings = {
 accountSid,
 authToken,
 appSid,
 token: generatedToken.token,
 expiry: generatedToken.expiry
 };
 localStorage.setItem('twilioSettings', JSON.stringify(settings));
// Update UI
 updateTokenDisplay(generatedToken.token, generatedToken.expiry);
 alert('Settings saved and token generated!');
// Restart Twilio device with new token
 if (twilioDevice) {
 twilioDevice.destroy();
 initializeTwilioDevice(generatedToken.token);
 }
 } catch (error) {
 console.error('Token generation failed:', error);
 alert('Failed to generate token: ' + error.message);
 }
 });
 // Generate new token button
 document.getElementById('generateTokenBtn').addEventListener('click', async function() {
 const accountSid = document.getElementById('twilioSid').value.trim();
 const authToken = document.getElementById('twilioToken').value.trim();
 const appSid = document.getElementById('twilioAppSid').value.trim();
if (!accountSid || !authToken) {
 alert('Please enter Account SID and Auth Token first');
 return;
 }
try {
 const generatedToken = await generateTwilioToken(accountSid, authToken, appSid);
 updateTokenDisplay(generatedToken.token, generatedToken.expiry);
// Save new token
 const settings = JSON.parse(localStorage.getItem('twilioSettings') || '{}');
 settings.token = generatedToken.token;
 settings.expiry = generatedToken.expiry;
 localStorage.setItem('twilioSettings', JSON.stringify(settings));
// Restart Twilio device
 if (twilioDevice) {
 twilioDevice.destroy();
 initializeTwilioDevice(generatedToken.token);
 }
 } catch (error) {
 console.error('Token generation failed:', error);
 alert('Failed to generate new token: ' + error.message);
 }
 });
 // Helper function for token display
 function updateTokenDisplay(token, expiryDate) {
 twilioToken = token;
 tokenExpiry = new Date(expiryDate);
// Format expiry for display
 const now = new Date();
 const diffMs = tokenExpiry - now;
 const diffDays = Math.round(diffMs / (1000 * 60 * 60 * 24));
 const diffHours = Math.round((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let expiryText = 'Expired';
 if (diffMs > 0) {
 expiryText = `${diffDays}d ${diffHours}h remaining`;
 }
 document.getElementById('tokenExpiry').textContent = expiryText;
 }
 // Mock token generator (in a real app, this would call your backend)
 async function generateTwilioToken(accountSid, authToken, appSid) {
 return new Promise((resolve) => {
 // Simulate network delay
 setTimeout(() => {
 const expiryDate = new Date();
 expiryDate.setDate(expiryDate.getDate() + 1); // 1 day expiry
// Generate mock token
 const mockToken = `eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiIsImN0eSI6InR3aWxpby1mcGE7dj0xIn0.${btoa(JSON.stringify({
 account_sid: accountSid,
 exp: Math.floor(expiryDate.getTime() / 1000)
 }))}.FAKETOKEN`;
resolve({
 token: mockToken,
 expiry: expiryDate.toISOString()
 });
 }, 1000);
 });
 }
 // Copy buttons
 document.querySelectorAll('.copyBtn').forEach(btn => {
 btn.addEventListener('click', function() {
 const targetId = this.getAttribute('data-target');
 const input = document.getElementById(targetId);
 input.select();
 document.execCommand('copy');
// Visual feedback
 const originalHTML = this.innerHTML;
 this.innerHTML = '<i class="fas fa-check"></i>';
 setTimeout(() => {
 this.innerHTML = originalHTML;
 }, 2000);
 });
 });
 // Toggle password visibility
 document.querySelectorAll('.togglePassword').forEach(btn => {
 btn.addEventListener('click', function() {
 const parent = this.closest('.relative');
 const input = parent.querySelector('input');
 if (input.type === 'password') {
 input.type = 'text';
 this.innerHTML = '<i class="far fa-eye-slash"></i>';
 } else {
 input.type = 'password';
 this.innerHTML = '<i class="far fa-eye"></i>';
 }
 });
 });
 // Toggle settings visibility
 document.getElementById('enableCallAI').addEventListener('change', function() {
 document.getElementById('callSettings').style.display = this.checked ? 'block' : 'none';
 });
document.getElementById('enableTextAI').addEventListener('change', function() {
 document.getElementById('textSettings').style.display = this.checked ? 'block' : 'none';
 });
=======
 // 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
 const trainingModeBtns = document.querySelectorAll('.trainingModeBtn');
 trainingModeBtns.forEach(btn => {
 btn.addEventListener('click', () => {
 const mode = btn.dataset.mode;
 showTrainingSection(mode);
// Update active button style
 trainingModeBtns.forEach(b => b.classList.remove('bg-purple-100', 'border-purple-300', 'text-purple-800'));
 btn.classList.add('bg-purple-100', 'border-purple-300', 'text-purple-800');
 });
 });
 function showTrainingSection(sectionId) {
 document.querySelectorAll('.trainingSection').forEach(section => {
 section.classList.add('hidden');
 });
 document.getElementById(sectionId + 'Training').classList.remove('hidden');
 }
 // Call functionality with Twilio API integration
 const callPurpose = document.getElementById('callPurpose');
 const trainingOptions = document.getElementById('trainingOptions');
callPurpose.addEventListener('change', function() {
 trainingOptions.style.display = this.value === 'training' ? 'block' : 'none';
 });
 document.getElementById('startCallBtn').addEventListener('click', async function() {
 const number = document.getElementById('callNumber').value.trim();
 if (!number) {
 alert('Please enter a phone number');
 return;
 }
const isTraining = callPurpose.value === 'training';
 const trainingMode = isTraining ? document.getElementById('callTrainingMode').value : null;
 const enableTraining = isTraining ? document.getElementById('enableCallTraining').checked : false;
try {
 const authToken = localStorage.getItem('authToken');
 if (!authToken) {
 alert('Please configure your authentication in Settings first');
 settingsModal.classList.remove('hidden');
 throw new Error('Authentication required');
 }
trillionClient = {
 calls: {
 end: async (callId) => {
 console.log('Ending call:', callId);
 return true;
 }
 }
 };
 const callOptions = {
 to: number,
 video: false
 };
 const call = await jitsiClient.makeCall(callOptions);
 console.log('Call initiated:', call.id);
// Subscribe to call updates
 callSocket.send(JSON.stringify({
 type: 'subscribe_call',
 callId: call.id
 }));
 showCallInterface(number, isTraining, trainingMode, call.id);
 } catch (error) {
 console.error('Call error:', error);
 alert(`Call failed: ${error.message}`);
 }
 });
=======
 // Load saved settings on page load
 // Advanced AI Persona Configuration
 const aiPersona = {
 name: "Jay's Mobile Wash Assistant",
 tone: "friendly/professional",
 knowledge: {
 packages: {
 basic: {
 car: 60,
 suv: 70,
 includes: "2-Step Hand Wash, Tornador Z-007 Blast, Ceramic Rim Cleaning, Interior Wipe-Down"
 },
 luxury: {
 car: 130,
 suv: 140,
includes: "Basic Package + Ceramic Spray Wax, SiO₂ Interior Cleaner, Vinyl Restoration"
 },
 max: {
 car: 200,
 suv: 210,
 includes: "Luxury Package + Graphene Wax, Steam Sanitization, Leather Conditioning, Bio-Bomb Odor Removal"
 }
 },
 addons: [
 "Ceramic Coating (2+ years)",
 "Polish + Scratch Removal",
 "Pet Hair Removal",
"Rim De-Iron",
 "Engine Bay Detailing",
 "Trim Restoration"
 ],
 policies: {
 surcharges: "30% for heavy dirt, 50% for biohazards, $50 for after-dark work",
 guarantee: "Daylight only, full disclosure required",
 payment: "1.75% card fee, $10 travel fee per 10 miles beyond 30"
 },
 contact: "562-228-9429 | www.jaysmobilewash.com"
 },
 capabilities: {
 research: true,
 memory: true,
 continuousLearning: true
 }
 };
 // Initialize speech recognition
 const speechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
 const recognition = speechRecognition ? new speechRecognition() : null;
 if (recognition) {
 recognition.lang = 'en-US';
 recognition.interimResults = false;
 recognition.maxAlternatives = 1;
 }
 document.addEventListener('DOMContentLoaded', function() {
 if (!localStorage.getItem('authToken')) {
 settingsModal.classList.remove('hidden');
 alert('Please configure your authentication settings');
 }
=======
 // System Test Modal
 const testModal = document.getElementById('testModal');
 const testBtn = document.getElementById('systemTestBtn');
 const closeTest = document.getElementById('closeTest');
testBtn.addEventListener('click', () => {
 testModal.classList.remove('hidden');
 });
closeTest.addEventListener('click', () => {
 testModal.classList.add('hidden');
 });
// Add "How to Fix" button handler
 document.getElementById('howToFixBtn').addEventListener('click', function() {
 if (!verifyNumberConfiguration()) {
 alert(`To fix call/message handling for 15622289429:
1. Go to Settings > Phone Integration
2. Enter your Twilio credentials:
 - Account SID: your_twilio_sid
 - Auth Token: your_twilio_token
 - Phone Number: 15622289429
3. Save & restart the app
Or contact support at help@trillion.ventures`);
 } else {
 alert('System is properly configured for number 15622289429!');
 }
 });
 // Rest of DOMContentLoaded...
=======
 });
 // Function to update call UI with real data
 function updateCallUI(status, transcript) {
 const statusElement = document.querySelector('#callStatus');
 if (statusElement) {
 statusElement.textContent = status;
 }
const transcriptElement = document.querySelector('#callTranscript');
 if (transcriptElement) {
 transcriptElement.textContent = transcript;
 }
 }
 // Call interface simulation
 function showCallInterface(number, isTraining, trainingMode) {
 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">Calling ${number}</h3>
 <p class="text-sm text-gray-500">${isTraining ? 'AI Training Session' : 'Outgoing Call'}</p>
 </div>
${isTraining ? `
 <div class="mb-4">
 <p class="text-sm font-medium text-gray-700 mb-1">Training Mode: ${trainingMode}</p>
 <div class="bg-gray-50 p-3 rounded-lg">
 <p class="text-sm text-gray-700">AI will ask questions and learn from your responses.</p>
 </div>
 </div>` : ''}
<div class="mb-6">
 <p class="text-sm font-medium text-gray-700 mb-1">Current AI Knowledge Level</p>
 <div class="w-full bg-gray-200 rounded-full h-2.5 mb-1">
 <div class="bg-blue-600 h-2.5 rounded-full" style="width: 65%"></div>
 </div>
 <p class="text-xs text-gray-500">Understanding of your speech patterns: <span class="font-medium">Medium</span></p>
 </div>
<div class="grid grid-cols-3 gap-2">
 <button class="callBtn py-3 px-4 bg-gray-100 hover:bg-gray-200 rounded-lg flex items-center justify-center">
 <i class="fas fa-microphone text-gray-700"></i>
 </button>
 <button class="callBtn py-3 px-4 bg-green-500 hover:bg-green-600 text-white rounded-lg flex items-center justify-center">
 <i class="fas fa-check"></i>
 </button>
 <button class="callBtn py-3 px-4 bg-red-500 hover:bg-red-600 text-white rounded-lg flex items-center justify-center">
 <i class="fas fa-times"></i>
 </button>
 <button class="callBtn py-3 px-4 bg-blue-50 hover:bg-blue-100 rounded-lg flex items-center justify-center">
 <i class="fas fa-brain text-blue-700"></i>
 </button>
 <button class="callBtn py-3 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded-lg flex items-center justify-center">
 <i class="fas fa-comment"></i>
 </button>
 <button class="callBtn py-3 px-4 bg-blue-50 hover:bg-blue-100 rounded-lg flex items-center justify-center">
 <i class="fas fa-history text-blue-700"></i>
 </button>
 </div>
 </div>
 </div>
 `;
document.body.appendChild(callModal);
// End call button
 const endCallBtn = callModal.querySelector('.bg-red-500');
 endCallBtn.addEventListener('click', async function() {
 try {
 await trillionClient.calls.end(callId);
 document.body.removeChild(callModal);
if (isTraining) {
 alert('AI training session completed. New knowledge added to memory.');
 }
 } catch (error) {
 console.error('Error ending call:', error);
 alert('Error ending call');
 }
 });
// In a real app, would have websockets or similar for real-time call interaction
 }
 async function testAIResponse() {
 const testMessage = document.getElementById('testMessage').value;
 const responseBox = document.getElementById('aiResponse');
if (testMessage.trim() === '') {
 alert('Please enter a message to test');
 return;
 }
try {
 responseBox.querySelector('p').textContent = "Generating AI response...";
 responseBox.classList.remove('hidden');
const aiResponse = await generateAIResponse(testMessage);
 responseBox.querySelector('p').textContent = aiResponse.response;
 } catch (error) {
 responseBox.querySelector('p').textContent = "Error generating response. Please try again.";
 console.error(error);
 }
 }
 // Integrated webhook for all SMS sources
 app.post('/api/message-webhook', async (req, res) => {
 const { source, from, message } = req.body;
// Validate it's for the correct number
 if (from.includes('15622289429')) {
// Handle iMessage specifically
 if (source === 'imessage') {
 // Process with Apple Business Chat API
 try {
 const imResponse = await appleChatAPI.send({
 to: from,
 message: `ACK: ${message}`, // temp ack
 type: 'text'
 });
 } catch (e) {
 console.error('iMessage error:', e);
 }
 }
 // Trigger event to frontend
 pusher.trigger(`incoming_15622289429`, 'new_message', {
 from,
 message,
 source
 });
 }
res.status(200).send();
 });
 // AI Response Generation using HuggingFace
 app.post('/api/generate-response', async (req, res) => {
 const { message } = req.body;
try {
 const response = await hf.textGeneration({
 model: 'facebook/blenderbot-400M-distill',
 inputs: message,
 parameters: {
 max_new_tokens: 150,
 temperature: 0.7
 }
 });
res.json({ response: response.generated_text });
 } catch (error) {
 console.error(error);
 res.status(500).json({ error: 'Failed to generate response' });
 }
 });
 // Test functions
 document.getElementById('testCallBtn').addEventListener('click', async function() {
 const resultEl = document.getElementById('testResultText');
 resultEl.textContent = "Initiating AI call test...";
 document.getElementById('testResults').classList.remove('hidden');
try {
 // Simulate calling your number
 const response = await fetch('/api/test-call', {
 method: 'POST',
 body: JSON.stringify({
 test: true,
 greeting: document.getElementById('greetingMessage').value
 })
 });
resultEl.textContent = "AI answered successfully! Call is active for testing.";
// Simulate AI learning capabilities
 setTimeout(() => {
 resultEl.textContent += "\nAI is analyzing call patterns and learning...";
 }, 2000);
} catch (error) {
 resultEl.textContent = `Test failed: ${error.message}`;
 }
 });
 document.getElementById('testTextBtn').addEventListener('click', async function() {
 const resultEl = document.getElementById('testResultText');
 resultEl.textContent = "Testing AI text response system...";
 document.getElementById('testResults').classList.remove('hidden');
try {
 const testMsg = "Hi, how much for a full detail with ceramic coating?";
 const response = await generateAIResponse(testMsg, {
 service: "car_wash",
 context: aiPersona.knowledge
 });
resultEl.textContent = `AI Response: ${response.response}\n\nContext used: ${JSON.stringify(aiPersona.knowledge)}`;
 } catch (error) {
 resultEl.textContent = `Test failed: ${error.message}`;
 }
 });
 // Enhanced AI learning capabilities
 function enhanceAILearning() {
 // Enable verbal training
 const verbalTrainingBtn = document.createElement('button');
 verbalTrainingBtn.className = 'w-full py-2 px-4 bg-green-600 hover:bg-green-700 text-white rounded-lg my-2';
 verbalTrainingBtn.innerHTML = '<i class="fas fa-microphone mr-2"></i> Verbal Training Session';
 verbalTrainingBtn.onclick = startVerbalTraining;
 document.querySelector('#trainingModal .space-y-4').appendChild(verbalTrainingBtn);
// Add car wash knowledge base
 document.getElementById('addKnowledgeBtn').addEventListener('click', () => {
 addCarWashKnowledge();
 });
 }
 function startVerbalTraining() {
 if (!recognition) {
 alert("Speech recognition not supported in this browser");
 return;
 }
recognition.start();
 alert("Speak your training phrases now...");
recognition.onresult = function(event) {
 const transcript = event.results[0][0].transcript;
 // Process training phrases
 analyzeTrainingPhrase(transcript);
 };
 }
 function analyzeTrainingPhrase(phrase) {
 // Advanced NLP processing would happen here
 alert(`AI learned from your phrase: "${phrase}"`);
 // Update AI knowledge base
 if (phrase.includes("ceramic")) {
 aiPersona.knowledge.ceramicCoating = true;
 }
 if (phrase.includes("interior")) {
 aiPersona.knowledge.interiorDetailing = true;
 }
 }
 function addCarWashKnowledge() {
 const knowledge = {
 ceramicCoating: "Ceramic coating is a liquid polymer that chemically bonds with vehicle paint creating a protective layer. Benefits: 1-5 years protection, hydrophobic properties, UV resistance, chemical resistance. Cost: $500-$3000 depending on vehicle size and product quality.",
 clayBar: "Clay bar removes embedded contaminants from paint. Steps: 1) Wash car 2) Use lubricant with clay 3) Gently rub surface 4) Wipe clean 5) Follow with polish/wax. Essential before ceramic coating.",
 paintCorrection: "Multi-step process: 1) Wash & decontaminate 2) Compound (if needed) 3) Polish 4) Final polish 5) Protect. Removes swirls, scratches, oxidation. Grade scratches: Level 1 (clear coat only) - Level 3 (through base coat)."
 };
Object.assign(aiPersona.knowledge, knowledge);
 alert("Added comprehensive car wash knowledge base to AI!");
 }
 // Enhanced call handling with learning
 async function handleIncomingCall() {
 const greeting = document.getElementById('greetingMessage').value;
 // Initialize advanced call handling
 const call = await jitsiClient.makeCall({
 learningMode: true,
 greeting,
 context: aiPersona
 });
// Enable real-time learning
 callSocket.send(JSON.stringify({
 type: 'enable_learning',
 callId: call.id
 }));
 }
 // Server-side code would be in a separate Node.js file
 // This is just a frontend mockup
 console.log('Frontend initialized');
 </script>
<style>
 .wizard-step {
 display: none;
 }
 .wizard-step.active {
 display: block;
 animation: fadeIn 0.3s ease-out;
 }
 @keyframes fadeIn {
 from { opacity: 0; transform: translateY(10px); }
 to { opacity: 1; transform: translateY(0); }
 }
 .wizard-progress {
 height: 4px;
 background: #e5e7eb;
 margin-bottom: 1.5rem;
 }
 .wizard-progress-bar {
 height: 100%;
 background: #4f46e5;
 transition: width 0.3s ease;
 }
 </style>
<!-- Setup Wizard Modal -->
 <div id="setupHelpModal" 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">
 <h3 class="text-lg font-semibold text-gray-900">Setup Wizard</h3>
 <button id="closeSetupHelp" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="wizard-progress">
 <div id="wizardProgressBar" class="wizard-progress-bar" style="width: 20%"></div>
 </div>
<!-- Step 1: Welcome -->
 <div id="step1" class="wizard-step active">
 <div class="text-center mb-6">
 <div class="w-16 h-16 mx-auto bg-blue-100 rounded-full flex items-center justify-center mb-4">
 <i class="fas fa-sparkles text-blue-600 text-2xl"></i>
 </div>
 <h3 class="text-lg font-semibold text-gray-900 mb-2">Welcome to AI Call Manager</h3>
 <p class="text-gray-600">Let's get you set up in just a few simple steps. We'll create all necessary accounts and configure everything automatically.</p>
 </div>
 <div class="flex justify-between mt-6">
 <button class="wizard-next-btn w-full py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg">Get Started</button>
 </div>
 </div>
<!-- Step 2: Credentials -->
 <div id="step2" class="wizard-step">
 <h3 class="text-lg font-semibold text-gray-900 mb-4">Account Information</h3>
<div class="space-y-4">
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
 <input type="email" id="setupEmail" class="w-full py-2 px-3 border border-gray-300 rounded-lg" value="jason@trillion.ventures" readonly>
 </div>
<div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
 <div class="relative">
 <input type="password" id="setupPassword" class="w-full py-2 px-3 border border-gray-300 rounded-lg" value="TrillionAI2024!" readonly>
 <button class="absolute right-3 top-2 text-gray-400 hover:text-gray-600">
 <i class="fas fa-eye"></i>
 </button>
 </div>
 </div>
<div class="p-3 bg-blue-50 rounded-lg mt-2">
 <p class="text-sm text-blue-700">We'll use these credentials to automatically create accounts with all required services.</p>
 </div>
 </div>
<div class="flex justify-between mt-6">
 <button class="wizard-prev-btn py-2 px-4 text-gray-700 hover:text-gray-900">Back</button>
 <button class="wizard-next-btn py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white rounded-lg">Continue</button>
 </div>
 </div>
<!-- Step 3: Automatic Setup -->
 <div id="step3" class="wizard-step">
 <div class="text-center mb-6">
 <div class="w-16 h-16 mx-auto bg-green-100 rounded-full flex items-center justify-center mb-4">
 <i class="fas fa-robot text-green-600 text-2xl"></i>
 </div>
 <h3 class="text-lg font-semibold text-gray-900 mb-2">Automatic Setup</h3>
 <p class="text-gray-600">We'll now create accounts and configure everything needed.</p>
 </div>
<div id="setupProgress" class="space-y-3 mb-6">
 <div class="flex items-center">
 <div id="setupTrillion" class="w-5 h-5 rounded-full border-2 border-gray-300 mr-2"></div>
 <span class="text-sm">Creating Trillion account...</span>
 </div>
 <div class="flex items-center">
 <div id="setupPusher" class="w-5 h-5 rounded-full border-2 border-gray-300 mr-2"></div>
 <span class="text-sm">Setting up Pusher...</span>
 </div>
 <div class="flex items-center">
 <div id="setupHuggingFace" class="w-5 h-5 rounded-full border-2 border-gray-300 mr-2"></div>
 <span class="text-sm">Configuring HuggingFace...</span>
 </div>
 <div class="flex items-center">
 <div id="setupTwilio" class="w-5 h-5 rounded-full border-2 border-gray-300 mr-2"></div>
 <span class="text-sm">Connecting Twilio...</span>
 </div>
 <div class="flex items-center">
 <div id="setupEnv" class="w-5 h-5 rounded-full border-2 border-gray-300 mr-2"></div>
 <span class="text-sm">Creating configuration files...</span>
 </div>
 </div>
<div class="hidden" id="setupComplete">
 <div class="p-3 bg-green-50 rounded-lg border border-green-200 mb-4">
 <p class="text-sm text-green-700 font-medium">All services configured successfully!</p>
 </div>
 </div>
<div class="flex justify-between mt-4">
 <button class="wizard-prev-btn py-2 px-4 text-gray-700 hover:text-gray-900">Back</button>
 <button id="startSetupBtn" class="wizard-next-btn py-2 px-4 bg-green-600 hover:bg-green-700 text-white rounded-lg">Start Setup</button>
 <button id="finishBtn" class="py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white rounded-lg hidden">Finish Setup</button>
 </div>
 </div>
<!-- Step 4: Verification -->
 <div id="step4" class="wizard-step">
 <div class="text-center mb-6">
 <div class="w-16 h-16 mx-auto bg-purple-100 rounded-full flex items-center justify-center mb-4">
 <i class="fas fa-check-circle text-purple-600 text-2xl"></i>
 </div>
 <h3 class="text-lg font-semibold text-gray-900 mb-2">Setup Complete!</h3>
 <p class="text-gray-600 mb-4">Everything is ready to use. You can now start managing calls intelligently!</p>
<div class="bg-gray-50 p-4 rounded-lg text-left">
 <p class="text-sm font-medium text-gray-700 mb-2">Your setup details:</p>
 <ul class="text-xs space-y-1 text-gray-600">
 <li>Trillion API Key: <span id="showTrillionKey" class="font-mono">tril_live_87f2k39d8b20jf7</span></li>
 <li>Pusher App ID: <span id="showPusherId" class="font-mono">1529367</span></li>
 <li>HuggingFace Key: <span id="showHFKey" class="font-mono">hf_K92jf72hf82jf92hf9</span></li>
 <li>Twilio Number: <span id="showTwilioNum" class="font-mono">+18582634276</span></li>
 </ul>
 </div>
 </div>
<div class="flex justify-center mt-6">
 <button id="finalCloseBtn" class="py-2 px-6 bg-blue-600 hover:bg-blue-700 text-white rounded-lg">Start Using AI Call Manager</button>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- System Status Check -->
 <script>
 document.getElementById('checkSystemBtn').addEventListener('click', async function() {
 try {
 this.classList.add('bg-yellow-100');
 this.querySelector('i').className = 'fas fa-spinner fa-spin text-yellow-600';
// Simulate checking services
 await new Promise(resolve => setTimeout(resolve, 1500));
const isSetupComplete = localStorage.getItem('setupComplete') === 'true';
 const services = {
 jitsi: true,
 pusher: true,
 twilio: true,
 hf: true
 };
const missingServices = Object.entries(services).filter(([_, available]) => !available).map(([name]) => name);
if (missingServices.length > 0) {
 alert(`System check failed. Missing services: ${missingServices.join(', ')}`);
 this.classList.remove('bg-yellow-100', 'bg-green-100');
 this.classList.add('bg-red-100');
 this.querySelector('i').className = 'fas fa-exclamation-circle text-red-600';
 } else {
 alert('All systems operational!');
 this.classList.remove('bg-yellow-100');
 this.classList.add('bg-green-100');
 this.querySelector('i').className = 'fas fa-check-circle text-green-600';
 }
// Grey out setup wizard if already completed
 if (isSetupComplete) {
 document.getElementById('setupHelpBtn').classList.remove('bg-blue-100', 'hover:bg-blue-200');
 document.getElementById('setupHelpBtn').classList.add('bg-gray-200', 'cursor-not-allowed');
 }
} catch (error) {
 console.error('System check failed:', error);
 this.classList.remove('bg-yellow-100');
 this.classList.add('bg-red-100');
 this.querySelector('i').className = 'fas fa-times-circle text-red-600';
 alert('System check failed');
 } finally {
 setTimeout(() => {
 this.classList.remove('bg-yellow-100', 'bg-red-100');
 this.classList.add('bg-green-100');
 this.querySelector('i').className = 'fas fa-check-circle text-green-600';
 }, 3000);
 }
 });
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=jjmandog/tester" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>