|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
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')); |
|
|
|
|
|
|
|
|
modal.addEventListener('click', (e) => { |
|
|
if (e.target === modal) modal.classList.add('hidden'); |
|
|
}); |
|
|
}; |
|
|
|
|
|
setupModal('trainingModal', 'trainBtn', 'closeTraining'); |
|
|
setupModal('settingsModal', 'settingsBtn', 'closeSettings'); |
|
|
|
|
|
|
|
|
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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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::-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 { |
|
|
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 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 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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div id="jitsi-container" style="display: none;"></div> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function updateCallStats() { |
|
|
const callStats = parseInt(localStorage.getItem('callStats')) || 128; |
|
|
localStorage.setItem('callStats', callStats + 1); |
|
|
document.querySelector('#callStatsCount').textContent = callStats + 1; |
|
|
} |
|
|
|
|
|
|
|
|
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." }; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
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'; |
|
|
|
|
|
|
|
|
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); |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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 { |
|
|
|
|
|
|
|
|
const generatedToken = await generateTwilioToken(accountSid, authToken, appSid); |
|
|
|
|
|
|
|
|
const settings = { |
|
|
accountSid, |
|
|
authToken, |
|
|
appSid, |
|
|
token: generatedToken.token, |
|
|
expiry: generatedToken.expiry |
|
|
}; |
|
|
localStorage.setItem('twilioSettings', JSON.stringify(settings)); |
|
|
|
|
|
|
|
|
updateTokenDisplay(generatedToken.token, generatedToken.expiry); |
|
|
alert('Settings saved and token generated!'); |
|
|
|
|
|
|
|
|
if (twilioDevice) { |
|
|
twilioDevice.destroy(); |
|
|
initializeTwilioDevice(generatedToken.token); |
|
|
} |
|
|
} catch (error) { |
|
|
console.error('Token generation failed:', error); |
|
|
alert('Failed to generate token: ' + error.message); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
const settings = JSON.parse(localStorage.getItem('twilioSettings') || '{}'); |
|
|
settings.token = generatedToken.token; |
|
|
settings.expiry = generatedToken.expiry; |
|
|
localStorage.setItem('twilioSettings', JSON.stringify(settings)); |
|
|
|
|
|
|
|
|
if (twilioDevice) { |
|
|
twilioDevice.destroy(); |
|
|
initializeTwilioDevice(generatedToken.token); |
|
|
} |
|
|
} catch (error) { |
|
|
console.error('Token generation failed:', error); |
|
|
alert('Failed to generate new token: ' + error.message); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
function updateTokenDisplay(token, expiryDate) { |
|
|
twilioToken = token; |
|
|
tokenExpiry = new Date(expiryDate); |
|
|
|
|
|
|
|
|
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; |
|
|
} |
|
|
|
|
|
|
|
|
async function generateTwilioToken(accountSid, authToken, appSid) { |
|
|
return new Promise((resolve) => { |
|
|
|
|
|
setTimeout(() => { |
|
|
const expiryDate = new Date(); |
|
|
expiryDate.setDate(expiryDate.getDate() + 1); |
|
|
|
|
|
|
|
|
const mockToken = `eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiIsImN0eSI6InR3aWxpby1mcGE7dj0xIn0.${btoa(JSON.stringify({ |
|
|
account_sid: accountSid, |
|
|
exp: Math.floor(expiryDate.getTime() / 1000) |
|
|
}))}.FAKETOKEN`; |
|
|
|
|
|
resolve({ |
|
|
token: mockToken, |
|
|
expiry: expiryDate.toISOString() |
|
|
}); |
|
|
}, 1000); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
const originalHTML = this.innerHTML; |
|
|
this.innerHTML = '<i class="fas fa-check"></i>'; |
|
|
setTimeout(() => { |
|
|
this.innerHTML = originalHTML; |
|
|
}, 2000); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
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>'; |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
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'; |
|
|
}); |
|
|
|
|
|
======= |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
this.classList.remove('bg-blue-100', 'hover:bg-blue-200'); |
|
|
this.classList.add('bg-blue-200', 'animate-pulse'); |
|
|
|
|
|
|
|
|
await Promise.race([ |
|
|
initializeTwilioDevice(token), |
|
|
new Promise((_, reject) => |
|
|
setTimeout(() => reject(new Error('Connection timeout')), 10000) |
|
|
) |
|
|
]); |
|
|
|
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
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; |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('closeTraining').addEventListener('click', () => { |
|
|
document.getElementById('trainingModal').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
document.getElementById('closeSettings').addEventListener('click', () => { |
|
|
document.getElementById('settingsModal').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
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'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
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'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
let twilioDevice = null; |
|
|
|
|
|
function initializeTwilioDevice(token) { |
|
|
return new Promise((resolve, reject) => { |
|
|
try { |
|
|
|
|
|
twilioDevice = new Twilio.Device(token, { |
|
|
codecPreferences: ['opus', 'pcmu'], |
|
|
fakeLocalDTMF: true, |
|
|
enableRingingState: true, |
|
|
}); |
|
|
|
|
|
|
|
|
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'); |
|
|
}); |
|
|
|
|
|
|
|
|
twilioDevice.on('incoming', (conn) => { |
|
|
const callerId = conn.parameters.From; |
|
|
console.log('Incoming call from:', callerId); |
|
|
|
|
|
|
|
|
const isTraining = confirm('Is this a training call?'); |
|
|
showCallInterface( |
|
|
callerId, |
|
|
isTraining, |
|
|
isTraining ? 'conversation' : null, |
|
|
conn.parameters.CallSid |
|
|
); |
|
|
|
|
|
|
|
|
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); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
const trainingModeBtns = document.querySelectorAll('.trainingModeBtn'); |
|
|
trainingModeBtns.forEach(btn => { |
|
|
btn.addEventListener('click', () => { |
|
|
const mode = btn.dataset.mode; |
|
|
showTrainingSection(mode); |
|
|
|
|
|
|
|
|
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'); |
|
|
} |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
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}`); |
|
|
} |
|
|
}); |
|
|
|
|
|
======= |
|
|
|
|
|
|
|
|
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 |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
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'); |
|
|
} |
|
|
|
|
|
======= |
|
|
|
|
|
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'); |
|
|
}); |
|
|
|
|
|
|
|
|
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!'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
======= |
|
|
}); |
|
|
|
|
|
|
|
|
function updateCallUI(status, transcript) { |
|
|
const statusElement = document.querySelector('#callStatus'); |
|
|
if (statusElement) { |
|
|
statusElement.textContent = status; |
|
|
} |
|
|
|
|
|
const transcriptElement = document.querySelector('#callTranscript'); |
|
|
if (transcriptElement) { |
|
|
transcriptElement.textContent = transcript; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
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'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
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); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
app.post('/api/message-webhook', async (req, res) => { |
|
|
const { source, from, message } = req.body; |
|
|
|
|
|
|
|
|
if (from.includes('15622289429')) { |
|
|
|
|
|
|
|
|
if (source === 'imessage') { |
|
|
|
|
|
try { |
|
|
const imResponse = await appleChatAPI.send({ |
|
|
to: from, |
|
|
message: `ACK: ${message}`, |
|
|
type: 'text' |
|
|
}); |
|
|
} catch (e) { |
|
|
console.error('iMessage error:', e); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
pusher.trigger(`incoming_15622289429`, 'new_message', { |
|
|
from, |
|
|
message, |
|
|
source |
|
|
}); |
|
|
} |
|
|
|
|
|
res.status(200).send(); |
|
|
}); |
|
|
|
|
|
|
|
|
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' }); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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 { |
|
|
|
|
|
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."; |
|
|
|
|
|
|
|
|
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}`; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
function enhanceAILearning() { |
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
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; |
|
|
|
|
|
analyzeTrainingPhrase(transcript); |
|
|
}; |
|
|
} |
|
|
|
|
|
function analyzeTrainingPhrase(phrase) { |
|
|
|
|
|
alert(`AI learned from your phrase: "${phrase}"`); |
|
|
|
|
|
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!"); |
|
|
} |
|
|
|
|
|
|
|
|
async function handleIncomingCall() { |
|
|
const greeting = document.getElementById('greetingMessage').value; |
|
|
|
|
|
const call = await jitsiClient.makeCall({ |
|
|
learningMode: true, |
|
|
greeting, |
|
|
context: aiPersona |
|
|
}); |
|
|
|
|
|
|
|
|
callSocket.send(JSON.stringify({ |
|
|
type: 'enable_learning', |
|
|
callId: call.id |
|
|
})); |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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'; |
|
|
|
|
|
|
|
|
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'; |
|
|
} |
|
|
|
|
|
|
|
|
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> |
