Please make this application not only respond to my text messages to 5622289429 but also answer the phone calls and talk to the customers . I want a section. So I can train the answering bot as well by giving me ability to call it with a phone and teach it . During these live calls I want it to ask me questions so it can learn - Initial Deployment
3c6a60d
verified
| // Export all configuration and learning data | |
| // Business settings data | |
| let businessSettings = { | |
| maxRingTime: 30, | |
| smsResponseTime: 15, | |
| businessHours: { | |
| open: "08:00", | |
| close: "18:00" | |
| }, | |
| responses: { | |
| missedCall: "Hello, this is Jay's Mobile Wash. We missed your call. Please leave a message and we'll return your call as soon as possible.", | |
| afterHours: "Thank you for contacting Jay's Mobile Wash. Our business hours are [hours]. We will respond when we reopen." | |
| } | |
| }; | |
| function loadSettings() { | |
| const saved = localStorage.getItem('JMW_Settings'); | |
| if (saved) { | |
| businessSettings = JSON.parse(saved); | |
| document.getElementById('maxRingTime').value = businessSettings.maxRingTime; | |
| document.getElementById('smsResponseTime').value = businessSettings.smsResponseTime; | |
| document.getElementById('openTime').value = businessSettings.businessHours.open; | |
| document.getElementById('closeTime').value = businessSettings.businessHours.close; | |
| document.getElementById('missedCallResponse').value = businessSettings.responses.missedCall; | |
| document.getElementById('afterHoursResponse').value = businessSettings.responses.afterHours; | |
| } | |
| } | |
| function saveSettings() { | |
| businessSettings = { | |
| maxRingTime: parseInt(document.getElementById('maxRingTime').value), | |
| smsResponseTime: parseInt(document.getElementById('smsResponseTime').value), | |
| businessHours: { | |
| open: document.getElementById('openTime').value, | |
| close: document.getElementById('closeTime').value | |
| }, | |
| responses: { | |
| missedCall: document.getElementById('missedCallResponse').value, | |
| afterHours: document.getElementById('afterHoursResponse').value | |
| } | |
| }; | |
| localStorage.setItem('JMW_Settings', JSON.stringify(businessSettings)); | |
| // Show success message | |
| const notification = document.createElement('div'); | |
| notification.className = 'fixed top-40 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-6 py-3 rounded-xl animate-fadeIn z-50 shadow-lg'; | |
| notification.innerHTML = 'Settings saved successfully!'; | |
| document.body.appendChild(notification); | |
| setTimeout(() => notification.remove(), 3000); | |
| } | |
| // Enhanced answerCall with live training and call response | |
| function answerCall(isTestCall = false) { | |
| const currentTime = new Date(); | |
| const openTime = new Date(); | |
| const closeTime = new Date(); | |
| const [openHours, openMins] = businessSettings.businessHours.open.split(':'); | |
| const [closeHours, closeMins] = businessSettings.businessHours.close.split(':'); | |
| openTime.setHours(openHours, openMins); | |
| closeTime.setHours(closeHours, closeMins); | |
| const fab = document.querySelector('.fab'); | |
| const icon = fab.querySelector('i'); | |
| if (currentTime < openTime || currentTime > closeTime) { | |
| icon.classList.remove('fa-phone'); | |
| icon.classList.add('fa-clock'); | |
| showResponseMessage(businessSettings.responses.afterHours.replace('[hours]', | |
| `${businessSettings.businessHours.open} - ${businessSettings.businessHours.close}`)); | |
| setTimeout(() => { | |
| icon.classList.remove('fa-clock'); | |
| icon.classList.add('fa-phone'); | |
| }, 1000); | |
| return; | |
| } | |
| // Start call processing | |
| icon.classList.remove('fa-phone'); | |
| icon.classList.add('fa-headset'); | |
| // Create call interface | |
| const homeScreen = document.getElementById('homeScreen'); | |
| const callWindow = document.createElement('div'); | |
| callWindow.className = 'fixed inset-0 bg-black bg-opacity-70 z-50 flex flex-col items-center justify-center'; | |
| callWindow.innerHTML = ` | |
| <div class="bg-white dark:bg-gray-800 rounded-3xl p-6 w-full max-w-md"> | |
| <div class="text-center"> | |
| <div class="w-20 h-20 mx-auto rounded-full bg-green-100 flex items-center justify-center mb-4"> | |
| <i class="fas fa-phone-alt text-green-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-medium">Incoming Call</h3> | |
| <p class="text-gray-500 mt-1">(562) 228-9429</p> | |
| <div class="mt-6 grid grid-cols-3 gap-4"> | |
| <button onclick="handleCallAction('decline')" class="bg-red-500 text-white p-4 rounded-full"> | |
| <i class="fas fa-phone-slash"></i> | |
| </button> | |
| <button onclick="handleCallAction('answer')" class="bg-green-500 text-white p-4 rounded-full"> | |
| <i class="fas fa-phone"></i> | |
| </button> | |
| <button onclick="handleCallAction('train')" class="bg-blue-500 text-white p-4 rounded-full"> | |
| <i class="fas fa-graduation-cap"></i> | |
| </button> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-2">Train › Teach AI during call</p> | |
| </div> | |
| </div> | |
| `; | |
| document.body.appendChild(callWindow); | |
| // Auto-answer if in test call mode | |
| if (isTestCall) { | |
| setTimeout(() => handleCallAction('train'), 1500); | |
| } | |
| } | |
| // Handle different call actions | |
| function handleCallAction(action) { | |
| const callWindow = document.querySelector('.fixed.inset-0'); | |
| const icon = document.querySelector('.fab i'); | |
| switch(action) { | |
| case 'decline': | |
| callWindow.remove(); | |
| icon.classList.remove('fa-headset'); | |
| icon.classList.add('fa-phone'); | |
| showResponseMessage("Call declined"); | |
| break; | |
| case 'answer': | |
| callWindow.innerHTML = ` | |
| <div class="bg-white dark:bg-gray-800 rounded-3xl p-6 w-full max-w-md"> | |
| <div class="text-center"> | |
| <div class="w-20 h-20 mx-auto rounded-full bg-green-100 flex items-center justify-center mb-4"> | |
| <i class="fas fa-user-headset text-green-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-medium">Live Call in Progress</h3> | |
| <div class="mt-4 bg-gray-100 dark:bg-gray-700 rounded-lg p-4 h-32 overflow-y-auto text-left" id="callTranscript"></div> | |
| <div class="mt-6 grid grid-cols-2 gap-4"> | |
| <button onclick="handleCallAction('mute')" class="bg-gray-200 dark:bg-gray-700 p-3 rounded-xl"> | |
| <i class="fas fa-microphone-slash"></i> | |
| </button> | |
| <button onclick="handleCallAction('end')" class="bg-red-500 text-white p-3 rounded-xl"> | |
| <i class="fas fa-phone-slash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| // Simulate AI answering call | |
| setTimeout(() => { | |
| addToCallTranscript("AI Assistant: Hello, thank you for calling Jay's Mobile Wash. How can I help you today?"); | |
| }, 1000); | |
| break; | |
| case 'train': | |
| callWindow.innerHTML = ` | |
| <div class="bg-white dark:bg-gray-800 rounded-3xl p-6 w-full max-w-md"> | |
| <div class="text-center"> | |
| <div class="w-20 h-20 mx-auto rounded-full bg-blue-100 flex items-center justify-center mb-4"> | |
| <i class="fas fa-graduation-cap text-blue-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-medium">Training Mode Active</h3> | |
| <p class="text-gray-500">AI will ask you questions during this call</p> | |
| <div class="mt-4 bg-gray-100 dark:bg-gray-700 rounded-lg p-4 h-32 overflow-y-auto text-left" id="callTranscript"></div> | |
| <div class="mt-4"> | |
| <input type="text" id="liveTrainingInput" class="w-full p-2 border rounded-lg mb-2" placeholder="Type your training response..."> | |
| <button onclick="submitLiveTraining()" class="w-full bg-blue-500 text-white py-2 rounded-lg"> | |
| Submit Response | |
| </button> | |
| </div> | |
| <div class="mt-4 grid grid-cols-2 gap-4"> | |
| <button onclick="handleCallAction('end')" class="bg-red-500 text-white p-3 rounded-xl"> | |
| <i class="fas fa-phone-slash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| // Start training questions | |
| startTrainingQuestions(); | |
| break; | |
| case 'end': | |
| callWindow.remove(); | |
| icon.classList.remove('fa-headset'); | |
| icon.classList.add('fa-phone'); | |
| showResponseMessage("Call ended"); | |
| break; | |
| } | |
| } | |
| // Helper function for call transcript | |
| function addToCallTranscript(message) { | |
| const transcript = document.getElementById('callTranscript'); | |
| if (transcript) { | |
| const p = document.createElement('p'); | |
| p.textContent = message; | |
| transcript.appendChild(p); | |
| transcript.scrollTop = transcript.scrollHeight; | |
| } | |
| } | |
| // Training sequence for live calls | |
| function startTrainingQuestions() { | |
| setTimeout(() => { | |
| addToCallTranscript("AI: I'm learning how to handle calls. Could you give me an example response when someone asks about pricing?"); | |
| }, 1500); | |
| setTimeout(() => { | |
| addToCallTranscript("AI: How should I respond when a customer wants to book an appointment?"); | |
| }, 5000); | |
| } | |
| function submitLiveTraining() { | |
| const input = document.getElementById('liveTrainingInput'); | |
| if (input.value.trim()) { | |
| addToCallTranscript(`You: ${input.value}`); | |
| storeTrainingPattern("live call training", input.value); | |
| input.value = ''; | |
| // Ask next question | |
| setTimeout(() => { | |
| const questions = [ | |
| "AI: What should I say when a customer is unhappy with service?", | |
| "AI: How do I respond to inquiries about same-day service?", | |
| "AI: Can you give me an example of how to confirm an appointment?" | |
| ]; | |
| const randomQuestion = questions[Math.floor(Math.random() * questions.length)]; | |
| addToCallTranscript(randomQuestion); | |
| }, 2000); | |
| } | |
| } | |
| function showResponseMessage(message) { | |
| const responseContainer = document.querySelector('#callResponseContainer'); | |
| if (!responseContainer) { | |
| const container = document.createElement('div'); | |
| container.id = 'callResponseContainer'; | |
| container.className = 'fixed top-16 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-80 text-white px-4 py-2 rounded-lg z-50'; | |
| container.textContent = message; | |
| document.body.appendChild(container); | |
| setTimeout(() => container.remove(), 3000); | |
| } | |
| } | |
| function exportConfiguration() { | |
| const data = { | |
| trainingData: trainingData, | |
| timestamp: new Date().toISOString(), | |
| version: "1.0", | |
| aiProfile: "Grok-Style Learning Assistant" | |
| }; | |
| const blob = new Blob([JSON.stringify(data, null, 2)], {type: 'application/json'}); | |
| const url = URL.createObjectURL(blob); | |
| const a = document.createElement('a'); | |
| a.href = url; | |
| a.download = `AI-Call-Assistant-${new Date().toISOString().split('T')[0]}.json`; | |
| document.body.appendChild(a); | |
| a.click(); | |
| document.body.removeChild(a); | |
| URL.revokeObjectURL(url); | |
| alert("Configuration exported successfully!"); | |
| } | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Phone Assistant</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> | |
| // Business settings data | |
| let businessSettings = { | |
| maxRingTime: 30, | |
| smsResponseTime: 15, | |
| businessHours: { | |
| open: "08:00", | |
| close: "18:00" | |
| }, | |
| responses: { | |
| missedCall: "Hello, this is Jay's Mobile Wash. We missed your call. Please leave a message and we'll return your call as soon as possible.", | |
| afterHours: "Thank you for contacting Jay's Mobile Wash. Our business hours are [hours]. We will respond when we reopen." | |
| } | |
| }; | |
| function loadSettings() { | |
| const saved = localStorage.getItem('JMW_Settings'); | |
| if (saved) { | |
| businessSettings = JSON.parse(saved); | |
| document.getElementById('maxRingTime').value = businessSettings.maxRingTime; | |
| document.getElementById('smsResponseTime').value = businessSettings.smsResponseTime; | |
| document.getElementById('openTime').value = businessSettings.businessHours.open; | |
| document.getElementById('closeTime').value = businessSettings.businessHours.close; | |
| document.getElementById('missedCallResponse').value = businessSettings.responses.missedCall; | |
| document.getElementById('afterHoursResponse').value = businessSettings.responses.afterHours; | |
| } | |
| } | |
| function saveSettings() { | |
| businessSettings = { | |
| maxRingTime: parseInt(document.getElementById('maxRingTime').value), | |
| smsResponseTime: parseInt(document.getElementById('smsResponseTime').value), | |
| businessHours: { | |
| open: document.getElementById('openTime').value, | |
| close: document.getElementById('closeTime').value | |
| }, | |
| responses: { | |
| missedCall: document.getElementById('missedCallResponse').value, | |
| afterHours: document.getElementById('afterHoursResponse').value | |
| } | |
| }; | |
| localStorage.setItem('JMW_Settings', JSON.stringify(businessSettings)); | |
| // Show success message | |
| const notification = document.createElement('div'); | |
| notification.className = 'fixed top-40 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-6 py-3 rounded-xl animate-fadeIn z-50 shadow-lg'; | |
| notification.innerHTML = 'Settings saved successfully!'; | |
| document.body.appendChild(notification); | |
| setTimeout(() => notification.remove(), 3000); | |
| } | |
| // Enhanced answerCall with time-based response | |
| function answerCall() { | |
| const currentTime = new Date(); | |
| const openTime = new Date(); | |
| const closeTime = new Date(); | |
| const [openHours, openMins] = businessSettings.businessHours.open.split(':'); | |
| const [closeHours, closeMins] = businessSettings.businessHours.close.split(':'); | |
| openTime.setHours(openHours, openMins); | |
| closeTime.setHours(closeHours, closeMins); | |
| if (currentTime < openTime || currentTime > closeTime) { | |
| const fab = document.querySelector('.fab'); | |
| const icon = fab.querySelector('i'); | |
| icon.classList.remove('fa-phone'); | |
| icon.classList.add('fa-clock'); | |
| showResponseMessage(businessSettings.responses.afterHours.replace('[hours]', | |
| `${businessSettings.businessHours.open} - ${businessSettings.businessHours.close}`)); | |
| setTimeout(() => { | |
| icon.classList.remove('fa-clock'); | |
| icon.classList.add('fa-phone'); | |
| }, 1000); | |
| return; | |
| } | |
| // Original answerCall functionality... | |
| } | |
| function showResponseMessage(message) { | |
| const responseContainer = document.querySelector('#callResponseContainer'); | |
| if (!responseContainer) { | |
| const container = document.createElement('div'); | |
| container.id = 'callResponseContainer'; | |
| container.className = 'fixed top-16 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-80 text-white px-4 py-2 rounded-lg z-50'; | |
| container.textContent = message; | |
| document.body.appendChild(container); | |
| setTimeout(() => container.remove(), 3000); | |
| } | |
| } | |
| function exportConfiguration() { | |
| const data = { | |
| trainingData: trainingData, | |
| timestamp: new Date().toISOString(), | |
| version: "1.0", | |
| aiProfile: "Grok-Style Learning Assistant" | |
| }; | |
| const blob = new Blob([JSON.stringify(data, null, 2)], {type: 'application/json'}); | |
| const url = URL.createObjectURL(blob); | |
| const a = document.createElement('a'); | |
| a.href = url; | |
| a.download = `AI-Call-Assistant-${new Date().toISOString().split('T')[0]}.json`; | |
| document.body.appendChild(a); | |
| a.click(); | |
| document.body.removeChild(a); | |
| URL.revokeObjectURL(url); | |
| alert("Configuration exported successfully!"); | |
| } | |
| // Tailwind config | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| iosbg: '#f2f2f7', | |
| iosdark: '#1c1c1e', | |
| accent: '#0a84ff', | |
| accent2: '#5e5ce6', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; | |
| } | |
| .screen { | |
| display: none; | |
| } | |
| .screen.active { | |
| display: block; | |
| } | |
| /* Simple switch */ | |
| .toggle-switch { | |
| position: relative; | |
| display: inline-block; | |
| width: 60px; | |
| height: 34px; | |
| } | |
| .toggle-switch input { | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| .slider { | |
| position: absolute; | |
| cursor: pointer; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: #ccc; | |
| transition: .4s; | |
| border-radius: 34px; | |
| } | |
| .slider:before { | |
| position: absolute; | |
| content: ""; | |
| height: 26px; | |
| width: 26px; | |
| left: 4px; | |
| bottom: 4px; | |
| background-color: white; | |
| transition: .4s; | |
| border-radius: 50%; | |
| } | |
| input:checked + .slider { | |
| background-color: #2196F3; | |
| } | |
| input:checked + .slider:before { | |
| transform: translateX(26px); | |
| } | |
| /* Chat bubbles */ | |
| .ai-bubble { | |
| background: #f1f1f1; | |
| border-radius: 5px 15px 15px 5px; | |
| padding: 10px 15px; | |
| max-width: 85%; | |
| margin: 5px 0; | |
| } | |
| .user-bubble { | |
| background: #2196F3; | |
| color: white; | |
| border-radius: 15px 5px 5px 15px; | |
| padding: 10px 15px; | |
| max-width: 85%; | |
| margin: 5px 0 5px auto; | |
| } | |
| /* Simple buttons */ | |
| .simple-btn { | |
| background: #2196F3; | |
| color: white; | |
| border: none; | |
| padding: 10px 15px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| margin: 5px; | |
| } | |
| /* Function buttons */ | |
| .action-btn { | |
| background: #4CAF50; | |
| color: white; | |
| border: none; | |
| padding: 10px 15px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| margin: 5px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-iosbg dark:bg-iosdark text-gray-900 dark:text-gray-200 min-h-screen"> | |
| <!-- Status Bar --> | |
| <div class="fixed top-0 left-0 right-0 h-12 flex items-center px-4 z-50 bg-iosbg dark:bg-iosdark"> | |
| <div class="text-left text-sm w-20">9:41</div> | |
| <div class="flex-1 flex justify-center"> | |
| <i class="fas fa-signal mr-2"></i> | |
| <i class="fas fa-wifi mr-2"></i> | |
| <i class="fas fa-battery-three-quarters"></i> | |
| </div> | |
| <div class="w-20 text-right text-xs">100%</div> | |
| </div> | |
| <!-- Main App Container --> | |
| <div class="relative pt-12 max-w-md mx-auto h-screen overflow-hidden"> | |
| <!-- Home Screen --> | |
| <div id="homeScreen" class="screen active px-4 pt-4 h-full flex flex-col"> | |
| <div class="mt-2"> | |
| <h1 class="text-3xl font-bold">Call Assistant</h1> | |
| <p class="text-gray-500 dark:text-gray-400 mt-1">AI that answers your calls and learns over time</p> | |
| </div> | |
| <!-- Status Card --> | |
| <div class="mt-6 bg-white dark:bg-gray-800 rounded-2xl p-5 shadow-sm"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div> | |
| <h2 class="font-medium">Current Status</h2> | |
| <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">Assistant is active</p> | |
| </div> | |
| <label class="ios-switch"> | |
| <input type="checkbox" checked> | |
| <span class="ios-slider"></span> | |
| </label> | |
| </div> | |
| <div class="border-t border-gray-200 dark:border-gray-700 pt-4"> | |
| <h3 class="font-medium flex items-center"> | |
| <i class="fas fa-phone mr-2"></i> Connected Number | |
| </h3> | |
| <div class="mt-2 flex items-center justify-between"> | |
| <span class="text-gray-500 dark:text-gray-400 text-sm font-medium">(562) 228-9429</span> | |
| <button class="text-accent text-sm">Change</button> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-accent flex items-center justify-center"> | |
| <i class="fas fa-robot text-white"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h3 class="font-medium">Today's Stats</h3> | |
| <p class="text-gray-500 dark:text-gray-400 text-sm">Answered 5 calls, 12 min talk time</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Action Cards --> | |
| <div class="mt-4 flex gap-3"> | |
| <div class="flex-1 bg-gradient-to-br from-accent to-accent2 rounded-2xl p-5 text-white"> | |
| <i class="fas fa-comment-alt text-2xl"></i> | |
| <h3 class="font-medium mt-3">Smart Replies</h3> | |
| <p class="text-white text-opacity-80 text-sm mt-1">Teach the AI how to respond</p> | |
| </div> | |
| <div class="flex-1 bg-gray-800 dark:bg-gray-700 rounded-2xl p-5 text-white"> | |
| <i class="fas fa-history text-2xl"></i> | |
| <h3 class="font-medium mt-3">Call History</h3> | |
| <p class="text-gray-300 text-sm mt-1">Review previous conversations</p> | |
| </div> | |
| </div> | |
| <!-- Recent Activity --> | |
| <div class="mt-4 bg-white dark:bg-gray-800 rounded-2xl p-5 flex-1 overflow-hidden flex flex-col"> | |
| <div class="flex items-center justify-between"> | |
| <h2 class="font-medium">Recent Activity</h2> | |
| <button class="text-accent text-sm">See All</button> | |
| </div> | |
| <div class="mt-3 flex-1 overflow-y-auto space-y-4"> | |
| <div class="flex items-start animate-fadeIn"> | |
| <div class="w-10 h-10 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center"> | |
| <i class="fas fa-phone-alt text-green-600 dark:text-green-400"></i> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex justify-between"> | |
| <h3 class="font-medium">Michael (Work)</h3> | |
| <span class="text-xs text-gray-500 dark:text-gray-400">12:45 PM</span> | |
| </div> | |
| <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">AI Assistant handled call: "Meeting confirmed for tomorrow"</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start animate-fadeIn"> | |
| <div class="w-10 h-10 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center"> | |
| <i class="fas fa-phone-alt text-purple-600 dark:text-purple-400"></i> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex justify-between"> | |
| <h3 class="font-medium">Sarah (Spam)</h3> | |
| <span class="text-xs text-gray-500 dark:text-gray-400">11:30 AM</span> | |
| </div> | |
| <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">AI blocked suspected spam call</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start animate-fadeIn"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center"> | |
| <i class="fas fa-phone-alt text-blue-600 dark:text-blue-400"></i> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex justify-between"> | |
| <h3 class="font-medium">Mom</h3> | |
| <span class="text-xs text-gray-500 dark:text-gray-400">10:15 AM</span> | |
| </div> | |
| <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">AI transferred call to you after screening</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start animate-fadeIn"> | |
| <div class="w-10 h-10 rounded-full bg-amber-100 dark:bg-amber-900 flex items-center justify-center"> | |
| <i class="fas fa-phone-alt text-amber-600 dark:text-amber-400"></i> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex justify-between"> | |
| <h3 class="font-medium">Dr. Smith Clinic</h3> | |
| <span class="text-xs text-gray-500 dark:text-gray-400">9:20 AM</span> | |
| </div> | |
| <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">AI scheduled your appointment for next Monday</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Configure Replies Screen --> | |
| <div id="repliesScreen" class="screen h-full flex flex-col"> | |
| <div class="px-4 pt-4"> | |
| <div class="flex items-center"> | |
| <button class="p-2 rounded-full" onclick="showScreen('homeScreen')"> | |
| <i class="fas fa-arrow-left"></i> | |
| </button> | |
| <h2 class="text-xl font-bold ml-2">Smart Replies</h2> | |
| </div> | |
| <p class="text-gray-500 dark:text-gray-400 mt-1 ml-12">Customize how AI answers calls</p> | |
| </div> | |
| <div class="mt-4 px-4 flex-1 overflow-y-auto"> | |
| <div class="bg-white dark:bg-gray-800 rounded-2xl p-5 mb-4"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-gradient-to-br from-accent to-accent2 flex items-center justify-center"> | |
| <i class="fas fa-brain text-white text-xl"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h3 class="font-medium">AI Learning Mode</h3> | |
| <p class="text-gray-500 dark:text-gray-400 text-sm">Improves responses over time</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <span>Learning from interactions</span> | |
| <label class="ios-switch"> | |
| <input type="checkbox" checked> | |
| <span class="ios-slider"></span> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="bg-white dark:bg-gray-800 rounded-2xl overflow-hidden"> | |
| <div class="px-5 pt-4"> | |
| <h3 class="font-medium">Custom Response Templates</h3> | |
| <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">Set predefined responses</p> | |
| </div> | |
| <div class="mt-4 space-y-2"> | |
| <div class="flex items-center justify-between p-4 hover:bg-gray-100 dark:hover:bg-gray-750 cursor-pointer"> | |
| <div> | |
| <h4 class="font-medium">Business Calls</h4> | |
| <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">"Hello, this is [Your Name]'s assistant..."</p> | |
| </div> | |
| <i class="fas fa-chevron-right text-gray-400"></i> | |
| </div> | |
| <div class="flex items-center justify-between p-4 hover:bg-gray-100 dark:hover:bg-gray-750 cursor-pointer"> | |
| <div> | |
| <h4 class="font-medium">Personal Calls</h4> | |
| <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">"Hi, this is [Name]'s phone..."</p> | |
| </div> | |
| <i class="fas fa-chevron-right text-gray-400"></i> | |
| </div> | |
| <div class="flex items-center justify-between p-4 hover:bg-gray-100 dark:hover:bg-gray-750 cursor-pointer"> | |
| <div> | |
| <h4 class="font-medium">Spam Protection</h4> | |
| <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">"Sorry, this number is not accepting calls..."</p> | |
| </div> | |
| <i class="fas fa-chevron-right text-gray-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white dark:bg-gray-800 rounded-2xl mt-4 p-5"> | |
| <h3 class="font-medium">Response Style</h3> | |
| <div class="mt-4 space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h4 class="font-medium">Formal Tone</h4> | |
| <p class="text-gray-500 dark:text-gray-400 text-sm">Professional business language</p> | |
| </div> | |
| <label class="ios-switch"> | |
| <input type="checkbox" checked> | |
| <span class="ios-slider"></span> | |
| </label> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h4 class="font-medium">Friendly Tone</h4> | |
| <p class="text-gray-500 dark:text-gray-400 text-sm">Casual conversation style</p> | |
| </div> | |
| <label class="ios-switch"> | |
| <input type="checkbox"> | |
| <span class="ios-slider"></span> | |
| </label> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h4 class="font-medium">Use My Name</h4> | |
| <p class="text-gray-500 dark:text-gray-400 text-sm">"This is [Your Name]'s phone"</p> | |
| </div> | |
| <label class="ios-switch"> | |
| <input type="checkbox" checked> | |
| <span class="ios-slider"></span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Call Training Screen --> | |
| <div id="trainingScreen" class="screen h-full flex flex-col"> | |
| <div class="px-4 pt-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <button class="p-2 rounded-full" onclick="showScreen('homeScreen')"> | |
| <i class="fas fa-arrow-left"></i> | |
| </button> | |
| <div class="ml-2"> | |
| <h2 class="text-xl font-bold">Train AI</h2> | |
| <p class="text-gray-500 dark:text-gray-400 text-sm -mt-1">Linked to (562) 228-9429</p> | |
| </div> | |
| </div> | |
| <button class="text-accent" id="saveTraining">Save</button> | |
| </div> | |
| </div> | |
| <div class="mt-4 px-4 flex-1 overflow-hidden flex flex-col"> | |
| <div class="bg-white dark:bg-gray-800 rounded-2xl p-5 flex-1 overflow-hidden flex flex-col"> | |
| <div class="flex-1 overflow-y-auto pb-4"> | |
| <div class="ai-bubble"> | |
| <p>How would you like me to respond to calls from your family?</p> | |
| </div> | |
| <div class="user-bubble mt-4"> | |
| <p>Always transfer calls from Mom and Dad to me</p> | |
| </div> | |
| <div class="ai-bubble mt-4"> | |
| <p>Noted! I'll transfer calls from Mom and Dad immediately.</p> | |
| <p class="mt-2">For other family members, how should I respond?</p> | |
| </div> | |
| <div class="user-bubble mt-4"> | |
| <p>Ask them for the reason of calling and text me if it's important</p> | |
| </div> | |
| <div class="ai-bubble mt-4"> | |
| <p>Got it. Here's the response I created based on your feedback:</p> | |
| <div class="mt-2 bg-blue-50 dark:bg-blue-900 rounded-lg p-3"> | |
| <p>"Hello, this is Alex's assistant. Could you let me know what you're calling about? I'll make sure they get your message."</p> | |
| </div> | |
| <p class="mt-2">Does this work?</p> | |
| </div> | |
| </div> | |
| <div class="mt-auto pt-4 border-t border-gray-200 dark:border-gray-700"> | |
| <div class="flex gap-2"> | |
| <input id="trainingInput" type="text" class="ios-input flex-1" placeholder="Teach your assistant..." onkeypress="handleTrainingKeyPress(event)"> | |
| <button class="w-12 h-12 rounded-xl bg-accent flex items-center justify-center text-white" onclick="submitTraining()"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-2 text-center">The AI learns from every interaction</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Simple Navigation --> | |
| <div class="fixed bottom-0 left-0 right-0 bg-white shadow-lg p-2 flex justify-center"> | |
| <button class="simple-btn" onclick="showScreen('homeScreen')">Home</button> | |
| <button class="simple-btn" onclick="showScreen('repliesScreen')">Replies</button> | |
| <button class="simple-btn" onclick="showScreen('trainingScreen')">Train AI</button> | |
| <button class="simple-btn" onclick="showScreen('chatScreen')">Chat Test</button> | |
| <button class="simple-btn" onclick="showScreen('settingsScreen')">Settings</button> | |
| <button class="simple-btn" onclick="exportConfiguration()">Export</button> | |
| </div> | |
| <!-- AI Chat Test Screen --> | |
| <div id="chatScreen" class="screen h-full flex flex-col"> | |
| <div class="px-4 pt-4"> | |
| <div class="flex items-center"> | |
| <button class="p-2 rounded-full" onclick="showScreen('homeScreen')"> | |
| <i class="fas fa-arrow-left"></i> | |
| </button> | |
| <h2 class="text-xl font-bold ml-2">AI Chat Test</h2> | |
| </div> | |
| <p class="text-gray-500 dark:text-gray-400 mt-1 ml-12">Test and train the AI assistant</p> | |
| </div> | |
| <div class="mt-4 px-4 flex-1 overflow-hidden flex flex-col"> | |
| <div class="bg-white dark:bg-gray-800 rounded-2xl p-5 flex-1 overflow-hidden flex flex-col"> | |
| <div id="chatMessages" class="flex-1 overflow-y-auto pb-4 space-y-4"> | |
| <div class="ai-bubble animate-fadeIn"> | |
| <p>Hi! I'm your AI assistant for Jay's Mobile Wash. I can answer questions about our detailing services and learn from our conversations.</p> | |
| <p class="mt-2">Would you like to test my knowledge or teach me something new?</p> | |
| </div> | |
| </div> | |
| <div class="mt-auto pt-4 border-t border-gray-200 dark:border-gray-700"> | |
| <div class="flex gap-2"> | |
| <input id="chatInput" type="text" class="ios-input flex-1" placeholder="Ask or teach me..." onkeypress="handleChatKeyPress(event)"> | |
| <button class="w-12 h-12 rounded-xl bg-accent flex items-center justify-center text-white" onclick="submitChatMessage()"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-2 text-center">I'll learn from every interaction</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Settings Screen --> | |
| <div id="settingsScreen" class="screen h-full flex flex-col"> | |
| <div class="px-4 pt-4"> | |
| <div class="flex items-center"> | |
| <button class="p-2 rounded-full" onclick="showScreen('homeScreen')"> | |
| <i class="fas fa-arrow-left"></i> | |
| </button> | |
| <h2 class="text-xl font-bold ml-2">Jay's Mobile Wash Settings</h2> | |
| </div> | |
| <p class="text-gray-500 dark:text-gray-400 mt-1 ml-12">Configure AI response behavior</p> | |
| </div> | |
| <div class="mt-4 px-4 flex-1 overflow-y-auto"> | |
| <div class="bg-white dark:bg-gray-800 rounded-2xl p-5 mb-4"> | |
| <h3 class="font-medium mb-4">Call Response Timing</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h4>Max Ring Time (seconds)</h4> | |
| <p class="text-gray-500 dark:text-gray-400 text-sm">If you don't answer by this time, AI will answer</p> | |
| </div> | |
| <input type="number" id="maxRingTime" value="30" min="5" max="60" class="w-20 px-2 py-1 rounded-lg border border-gray-300"> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h4>No-Response Text After (minutes)</h4> | |
| <p class="text-gray-500 dark:text-gray-400 text-sm">If you don't reply to SMS by this time</p> | |
| </div> | |
| <input type="number" id="smsResponseTime" value="15" min="1" max="120" class="w-20 px-2 py-1 rounded-lg border border-gray-300"> | |
| </div> | |
| <div class="border-t border-gray-200 dark:border-gray-700 pt-4"> | |
| <h3 class="font-medium mb-2">Business Hours</h3> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <div> | |
| <label class="block text-sm text-gray-500 dark:text-gray-400 mb-1">Open Time</label> | |
| <input type="time" id="openTime" value="08:00" class="w-full px-2 py-1 rounded-lg border border-gray-300"> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-500 dark:text-gray-400 mb-1">Close Time</label> | |
| <input type="time" id="closeTime" value="18:00" class="w-full px-2 py-1 rounded-lg border border-gray-300"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white dark:bg-gray-800 rounded-2xl p-5"> | |
| <h3 class="font-medium mb-4">Call Handling Configuration</h3> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div> | |
| <h4>Answer Incoming Calls</h4> | |
| <p class="text-gray-500 dark:text-gray-400 text-sm">Enable AI to answer phone calls</p> | |
| </div> | |
| <label class="ios-switch"> | |
| <input type="checkbox" id="answerCallsToggle" checked> | |
| <span class="ios-slider"></span> | |
| </label> | |
| </div> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div> | |
| <h4>Live Call Training Mode</h4> | |
| <p class="text-gray-500 dark:text-gray-400 text-sm">Ask me questions during calls to learn</p> | |
| </div> | |
| <label class="ios-switch"> | |
| <input type="checkbox" id="callTrainingToggle"> | |
| <span class="ios-slider"></span> | |
| </label> | |
| </div> | |
| <h3 class="font-medium mb-4 mt-6">Response Messages</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm mb-1">Missed Call Response</label> | |
| <textarea id="missedCallResponse" rows="2" class="w-full px-3 py-2 rounded-lg border border-gray-300">Hello, this is Jay's Mobile Wash. We missed your call. Please leave a message and we'll return your call as soon as possible.</textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm mb-1">After Hours Response</label> | |
| <textarea id="afterHoursResponse" rows="2" class="w-full px-3 py-2 rounded-lg border border-gray-300">Thank you for contacting Jay's Mobile Wash. Our business hours are [hours]. We will respond when we reopen.</textarea> | |
| </div> | |
| </div> | |
| <button onclick="saveSettings()" class="mt-6 w-full bg-green-500 text-white py-2 rounded-lg font-medium">Save Settings</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Floating Action Button --> | |
| <div class="fab" onclick="answerCall()"> | |
| <i class="fas fa-phone"></i> | |
| </div> | |
| </div> | |
| <script> | |
| // Grok-Style AI Training Data | |
| let trainingData = { | |
| responses: [], | |
| trainedPatterns: {}, | |
| dictionProfiles: {}, | |
| learningRates: {}, | |
| contextMemory: {}, | |
| customResponses: { | |
| business: '"Hello, this is [Your Name]\'s assistant. How can I help you today?"', | |
| personal: '"Hi, this is [Name] calling. How can I help you?"', | |
| spam: '"Sorry, this number is not accepting unsolicited calls at this time."', | |
| urgent: '"This is urgent, please connect me immediately"' | |
| }, | |
| // Grok-specific additions | |
| humorProfiles: {}, | |
| sarcasmDetection: {}, | |
| emotionalContext: {}, | |
| savedTemplates: [] | |
| }; | |
| // Enhanced training function storage | |
| function storeTrainingPattern(pattern, response) { | |
| trainingData.trainedPatterns[pattern.toLowerCase()] = response; | |
| localStorage.setItem('AI_Training', JSON.stringify(trainingData)); | |
| } | |
| // Screen navigation | |
| function showScreen(screenId) { | |
| document.querySelectorAll('.screen').forEach(screen => { | |
| screen.classList.remove('active'); | |
| }); | |
| document.getElementById(screenId).classList.add('active'); | |
| // Update tab bar active state | |
| const tabs = document.querySelectorAll('.fab ~ .fixed button'); | |
| tabs.forEach(tab => { | |
| const icon = tab.querySelector('i'); | |
| const span = tab.querySelector('span'); | |
| if (screenId === 'homeScreen' && icon.classList.contains('fa-home')) { | |
| tab.classList.add('text-accent'); | |
| } else if (screenId === 'repliesScreen' && icon.classList.contains('fa-comment-alt')) { | |
| tab.classList.add('text-accent'); | |
| } else if (screenId === 'trainingScreen' && icon.classList.contains('fa-graduation-cap')) { | |
| tab.classList.add('text-accent'); | |
| } else { | |
| tab.classList.remove('text-accent'); | |
| tab.classList.add('text-gray-500'); | |
| } | |
| }); | |
| } | |
| // Simulate AI learning progress | |
| function simulateAIProgress() { | |
| const progressBars = document.querySelectorAll('.progress'); | |
| progressBars.forEach(bar => { | |
| const width = 70 + Math.floor(Math.random() * 30); | |
| bar.style.width = `${width}%`; | |
| }); | |
| } | |
| // Toggle call recording function | |
| function toggleRecording() { | |
| const fab = document.querySelector('.fab'); | |
| const icon = fab.querySelector('i'); | |
| if (icon.classList.contains('fa-microphone')) { | |
| icon.classList.remove('fa-microphone'); | |
| icon.classList.add('fa-stop'); | |
| fab.style.background = 'linear-gradient(135deg, #ff375f, #ff2d55)'; | |
| // Show a notification | |
| const notification = document.createElement('div'); | |
| notification.innerHTML = ` | |
| <div class="fixed top-16 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-full animate-fadeIn"> | |
| Recording started | |
| </div> | |
| `; | |
| document.body.appendChild(notification); | |
| setTimeout(() => { | |
| notification.remove(); | |
| }, 2000); | |
| } else { | |
| icon.classList.remove('fa-stop'); | |
| icon.classList.add('fa-microphone'); | |
| fab.style.background = 'linear-gradient(135deg, #0a84ff, #5e5ce6)'; | |
| // Simulate AI learning after recording | |
| simulateAIProgress(); | |
| } | |
| } | |
| // Answer call function | |
| function answerCall() { | |
| const fab = document.querySelector('.fab'); | |
| const icon = fab.querySelector('i'); | |
| if (icon.classList.contains('fa-phone')) { | |
| icon.classList.remove('fa-phone'); | |
| icon.classList.add('fa-stop'); | |
| fab.style.background = 'linear-gradient(135deg, #32d74b, #30d158)'; | |
| // Create a new call card | |
| const homeScreen = document.getElementById('homeScreen'); | |
| const callCard = document.createElement('div'); | |
| callCard.className = 'bg-white dark:bg-gray-800 rounded-2xl p-4 mt-4 animate-fadeIn'; | |
| callCard.innerHTML = ` | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h3 class="font-medium">AI answered call</h3> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">From: Unknown (New number)</p> | |
| </div> | |
| <div class="text-green-500"> | |
| <i class="fas fa-check-circle text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-3 text-sm"> | |
| <p>Call transcript will appear here after completion.</p> | |
| </div> | |
| `; | |
| homeScreen.insertBefore(callCard, homeScreen.children[3]); | |
| } else { | |
| icon.classList.remove('fa-stop'); | |
| icon.classList.add('fa-phone'); | |
| fab.style.background = 'linear-gradient(135deg, #0a84ff, #5e5ce6)'; | |
| } | |
| } | |
| // Enhanced training functions | |
| function saveTraining() { | |
| localStorage.setItem('AI_Training', JSON.stringify(trainingData)); | |
| // Show persistent notification | |
| const notification = document.createElement('div'); | |
| notification.className = 'fixed top-40 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-green-400 to-blue-500 text-white px-6 py-3 rounded-xl animate-fadeIn z-50 shadow-lg'; | |
| notification.innerHTML = ` | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle mr-2"></i> | |
| <span>AI training saved! New responses will be active immediately.</span> | |
| </div> | |
| `; | |
| document.body.appendChild(notification); | |
| setTimeout(() => { | |
| notification.remove(); | |
| showScreen('homeScreen'); | |
| }, 3000); | |
| // Update home screen with new training count | |
| const statsElement = document.querySelector('#homeScreen .w-10.h-10 + div p'); | |
| statsElement.textContent = `Trained on ${Object.keys(trainingData.trainedPatterns).length} patterns`; | |
| } | |
| // Add animation to elements when they appear | |
| function addAppearAnimations() { | |
| document.querySelectorAll('.animate-fadeIn').forEach((el, index) => { | |
| el.style.animationDelay = `${index * 0.1}s`; | |
| }); | |
| } | |
| // Smart Training Functions | |
| function submitTraining() { | |
| const input = document.getElementById('trainingInput'); | |
| if (input.value.trim() !== '') { | |
| trainingData.responses.push(input.value); | |
| // Add the user's message to the chat | |
| const chatContainer = document.querySelector('#trainingScreen .flex-1.overflow-y-auto'); | |
| const userBubble = document.createElement('div'); | |
| userBubble.className = 'user-bubble mt-4 animate-fadeIn'; | |
| userBubble.innerHTML = `<p>${input.value}</p>`; | |
| chatContainer.appendChild(userBubble); | |
| // Process training input with smart logic | |
| const processed = processTrainingInput(input.value); | |
| // Generate and add AI response | |
| setTimeout(() => { | |
| const aiBubble = document.createElement('div'); | |
| aiBubble.className = 'ai-bubble mt-4 animate-fadeIn'; | |
| if (processed.success) { | |
| aiBubble.innerHTML = ` | |
| <p>Understood! I'll handle calls that way now.</p> | |
| <div class="mt-2 bg-green-50 dark:bg-green-900 rounded-lg p-3"> | |
| <h4 class="font-medium">New Response Pattern:</h4> | |
| <p class="mt-1"><strong>When caller says:</strong> ${processed.triggerPhrases.join(' OR ')}</p> | |
| <p class="mt-1"><strong>I will:</strong> ${processed.response}</p> | |
| </div> | |
| <p class="mt-2">Would you like to review any other scenarios?</p> | |
| `; | |
| storeTrainingPattern(processed.triggerPhrases[0], processed.response); | |
| } else { | |
| aiBubble.innerHTML = ` | |
| <p>I think you want me to handle calls differently when:</p> | |
| <div class="mt-2 bg-blue-50 dark:bg-blue-900 rounded-lg p-3"> | |
| <p>${processed.response}</p> | |
| </div> | |
| <p class="mt-2">Can you confirm or clarify how you'd like me to respond?</p> | |
| `; | |
| } | |
| chatContainer.appendChild(aiBubble); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| }, 800); | |
| input.value = ''; | |
| } | |
| } | |
| function handleTrainingKeyPress(e) { | |
| if (e.key === 'Enter') { | |
| submitTraining(); | |
| } | |
| } | |
| // Grok-Style Learning Processor | |
| function processTrainingInput(inputText) { | |
| // First analyze diction and emotional context | |
| analyzeDiction(inputText); | |
| // Grok-style pattern matching with contextual learning | |
| const context = getCurrentContext(); | |
| const patterns = [ | |
| // Direct instructions | |
| /(when|if) (.+?) (then|do|respond with) (.+)/i, | |
| // Examples | |
| /(for|when) (\w+) calls?,? (say|respond) "(.+?)"/i, | |
| // Behavioral patterns | |
| /(treat|handle) (.+?) (as|like) (\w+)/i, | |
| // Tone adjustments | |
| /(make|be) (more|less) (\w+) (when|for) (\w+)/i | |
| ]; | |
| for (const pattern of patterns) { | |
| const match = inputText.match(pattern); | |
| if (match) { | |
| const [, triggerType, trigger, action, response] = match; | |
| storeBehaviorPattern(trigger, response, context); | |
| return { | |
| success: true, | |
| triggerPhrases: [trigger], | |
| response: enhanceResponse(response, context), | |
| context: context | |
| }; | |
| } | |
| } | |
| // Fallback to Grok's adaptive learning | |
| return adaptiveLearning(inputText); | |
| } | |
| // Grok-style diction analysis | |
| function analyzeDiction(text) { | |
| const words = text.toLowerCase().split(/\s+/); | |
| const contractions = text.match(/\w+'?\w*/g) || []; | |
| // Update diction profile | |
| if (!trainingData.dictionProfiles.user) { | |
| trainingData.dictionProfiles.user = { | |
| wordUsage: {}, | |
| contractionRate: 0, | |
| formalityScore: 0, | |
| complexityScore: 0 | |
| }; | |
| } | |
| contractions.forEach(word => { | |
| if (word.includes("'")) { | |
| trainingData.dictionProfiles.user.contractionRate++; | |
| } | |
| }); | |
| // Word usage stats | |
| words.forEach(word => { | |
| trainingData.dictionProfiles.user.wordUsage[word] = | |
| (trainingData.dictionProfiles.user.wordUsage[word] || 0) + 1; | |
| }); | |
| // Save updated profile | |
| localStorage.setItem('AI_DictionProfile', JSON.stringify(trainingData.dictionProfiles)); | |
| } | |
| function interpretTrainingIntent(text) { | |
| const lower = text.toLowerCase(); | |
| if (lower.includes('family') || lower.includes('mom') || lower.includes('dad')) { | |
| return trainingData.customResponses.personal; | |
| } | |
| else if (lower.includes('work') || lower.includes('business') || lower.includes('colleague')) { | |
| return trainingData.customResponses.business; | |
| } | |
| else if (lower.includes('appointment') || lower.includes('schedule')) { | |
| return trainingData.customResponses.appointments; | |
| } | |
| else if (lower.includes('urgent') || lower.includes('emergency')) { | |
| return trainingData.customResponses.urgent; | |
| } | |
| else if (lower.includes('callback') || lower.includes('call back')) { | |
| return trainingData.customResponses.callbacks; | |
| } | |
| else if (lower.includes('spam') || lower.includes('scam') || lower.includes('block')) { | |
| return trainingData.customResponses.spam; | |
| } | |
| else { | |
| return detectNewPattern(text); | |
| } | |
| } | |
| function detectNewPattern(text) { | |
| // Use simple NLP to extract key phrases | |
| const keywords = text.match(/\b(\w{4,})\b/g) || []; | |
| const commands = ['transfer', 'ask', 'tell', 'say', 'respond', 'record']; | |
| const action = commands.find(cmd => text.toLowerCase().includes(cmd)) || 'handle'; | |
| const context = keywords.filter(w => | |
| !commands.includes(w.toLowerCase()) && | |
| w.length > 3 | |
| ).join(', '); | |
| return `When call relates to ${context || "this situation"}, I will ${action} accordingly.`; | |
| } | |
| // Initialize when page loads | |
| document.addEventListener('DOMContentLoaded', () => { | |
| loadSettings(); | |
| // Load saved training data | |
| const savedData = localStorage.getItem('AI_Training'); | |
| if (savedData) { | |
| trainingData = JSON.parse(savedData); | |
| } | |
| document.getElementById('saveTraining').addEventListener('click', saveTraining); | |
| addAppearAnimations(); | |
| simulateAIProgress(); | |
| // Enhanced screen initialization | |
| document.querySelectorAll('[onclick^="showScreen"]').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const screenName = this.getAttribute('onclick').match(/'(.*?)'/)[1]; | |
| setTimeout(() => { | |
| if (screenName === 'trainingScreen') { | |
| document.getElementById('trainingInput').focus(); | |
| populateTrainingHistory(); | |
| } | |
| }, 300); | |
| }); | |
| }); | |
| }); | |
| // Mobile detailing knowledge base | |
| const detailingKnowledge = { | |
| website: "https://www.jaysmobilewash.com", | |
| pricing: { | |
| basic: { car: 60, suv: 70 }, | |
| luxury: { car: 130, suv: 140 }, | |
| max: { car: 200, suv: 210 } | |
| }, | |
| packages: { | |
| basic: "2-Step Hand Wash, Tornador Blast, Rim Cleaning, Interior Wipe-Down", | |
| luxury: "Basic + Ceramic Wax, Dust Repellent, Vinyl Restoration", | |
| max: "Luxury + Graphene Wax, Steam Sanitization, Leather Conditioning" | |
| }, | |
| features: [ | |
| "Eco-Friendly Self-Sufficient Service", | |
| "Deionized Spot-Free Water", | |
| "Tornador Z-007 Compressed Air Cleaning", | |
| "Customizable Packages" | |
| ] | |
| }; | |
| function handleChatKeyPress(e) { | |
| if (e.key === 'Enter') { | |
| submitChatMessage(); | |
| } | |
| } | |
| function submitChatMessage() { | |
| const input = document.getElementById('chatInput'); | |
| if (input.value.trim() !== '') { | |
| // Add user message | |
| const chatContainer = document.getElementById('chatMessages'); | |
| const userBubble = document.createElement('div'); | |
| userBubble.className = 'user-bubble mt-4 animate-fadeIn'; | |
| userBubble.innerHTML = `<p>${input.value}</p>`; | |
| chatContainer.appendChild(userBubble); | |
| // Process and generate AI response | |
| setTimeout(() => { | |
| const aiResponse = generateAIResponse(input.value); | |
| const aiBubble = document.createElement('div'); | |
| aiBubble.className = 'ai-bubble mt-4 animate-fadeIn'; | |
| aiBubble.innerHTML = `<p>${aiResponse}</p>`; | |
| chatContainer.appendChild(aiBubble); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| // Learn from the interaction | |
| learnFromChat(input.value, aiResponse); | |
| }, 500); | |
| input.value = ''; | |
| } | |
| } | |
| function generateAIResponse(message) { | |
| const lowerMsg = message.toLowerCase(); | |
| // Check for pricing questions | |
| if (lowerMsg.includes('price') || lowerMsg.includes('cost') || lowerMsg.includes('how much')) { | |
| if (lowerMsg.includes('basic')) { | |
| return `Our Basic package is ${detailingKnowledge.pricing.basic.car} for cars and ${detailingKnowledge.pricing.basic.suv} for SUVs. It includes: ${detailingKnowledge.packages.basic}`; | |
| } else if (lowerMsg.includes('luxury')) { | |
| return `Our Luxury package is ${detailingKnowledge.pricing.luxury.car} for cars and ${detailingKnowledge.pricing.luxury.suv} for SUVs. Includes: ${detailingKnowledge.packages.luxury}`; | |
| } else if (lowerMsg.includes('max')) { | |
| return `Our Max package is ${detailingKnowledge.pricing.max.car} for cars and ${detailingKnowledge.pricing.max.suv} for SUVs. Everything in: ${detailingKnowledge.packages.max}`; | |
| } | |
| return `We offer three main packages:\nBasic: ${detailingKnowledge.pricing.basic.car}-${detailingKnowledge.pricing.basic.suv}\nLuxury: ${detailingKnowledge.pricing.luxury.car}-${detailingKnowledge.pricing.luxury.suv}\nMax: ${detailingKnowledge.pricing.max.car}-${detailingKnowledge.pricing.max.suv}`; | |
| } | |
| // Check for service questions | |
| if (lowerMsg.includes('service') || lowerMsg.includes('include') || lowerMsg.includes('wash')) { | |
| return `Our services include:\n- ${detailingKnowledge.features.join('\n- ')}\n\nWould you like details on a specific package?`; | |
| } | |
| // Check for appointment scheduling | |
| if (lowerMsg.includes('book') || lowerMsg.includes('schedule') || lowerMsg.includes('appointment')) { | |
| return `To schedule an appointment, please call or text us at (562) 228-9429 with your preferred date, time, and package selection.`; | |
| } | |
| // Check for website questions | |
| if (lowerMsg.includes('website') || lowerMsg.includes('online')) { | |
| return `You can find more information on our website: ${detailingKnowledge.website}`; | |
| } | |
| // Default response if no matches | |
| return `I'm still learning about Jay's Mobile Wash. Could you clarify your question or teach me the correct response? For example:\n- "For basic washes, say 'Our Basic package starts at $60'"\n\nYou can also visit our website: ${detailingKnowledge.website}`; | |
| } | |
| function learnFromChat(message, response) { | |
| // Save new knowledge | |
| if (!trainingData.detailingKnowledge) { | |
| trainingData.detailingKnowledge = []; | |
| } | |
| trainingData.detailingKnowledge.push({ | |
| question: message, | |
| answer: response, | |
| timestamp: new Date().toISOString() | |
| }); | |
| localStorage.setItem('AI_Training', JSON.stringify(trainingData)); | |
| } | |
| function populateTrainingHistory() { | |
| const chatContainer = document.querySelector('#trainingScreen .flex-1.overflow-y-auto'); | |
| chatContainer.innerHTML = ''; | |
| if (trainingData.responses.length === 0) { | |
| const welcomeBubble = document.createElement('div'); | |
| welcomeBubble.className = 'ai-bubble animate-fadeIn'; | |
| welcomeBubble.innerHTML = ` | |
| <p>Hi! I'm your call assistant. Teach me how to handle calls by:</p> | |
| <ol class="list-decimal pl-5 mt-2 space-y-1"> | |
| <li>Setting response templates</li> | |
| <li>Training me on specific call types</li> | |
| <li>Testing responses in real calls</li> | |
| </ol> | |
| <p class="mt-2">Try saying something like: "If caller says 'urgent', mark as important"</p> | |
| `; | |
| chatContainer.appendChild(welcomeBubble); | |
| } else { | |
| trainingData.responses.forEach(item => { | |
| const userBubble = document.createElement('div'); | |
| userBubble.className = 'user-bubble mt-4 animate-fadeIn'; | |
| userBubble.innerHTML = `<p>${item}</p>`; | |
| chatContainer.appendChild(userBubble); | |
| }); | |
| } | |
| } | |
| </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/new2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |