${data.message}
`;\n \n // Clear messages container and add AI message\n messagesContainer.innerHTML = '';\n messagesContainer.appendChild(aiMessageElement);\n \n // Add audio element to the message if available\n if (data.audio_url) {\n // Create audio element\n const audioElement = document.createElement('audio');\n audioElement.style.display = 'none';\n audioElement.src = data.audio_url;\n \n // Add audio element to message\n aiMessageElement.appendChild(audioElement);\n \n // Create audio controls\n const audioControls = document.createElement('div');\n audioControls.className = 'audio-controls';\n \n // Create listen button (using emoji)\n const listenButton = document.createElement('span');\n listenButton.className = 'listen-audio-btn';\n listenButton.innerHTML = 'đ';\n listenButton.style.marginTop = '5px';\n listenButton.style.marginRight = '10px';\n listenButton.style.cursor = 'pointer';\n \n // Create stop button (initially hidden, using emoji)\n const stopButton = document.createElement('span');\n stopButton.className = 'stop-audio-btn';\n stopButton.innerHTML = 'âšī¸';\n stopButton.style.display = 'none';\n stopButton.style.marginTop = '5px';\n stopButton.style.marginRight = '10px';\n stopButton.style.cursor = 'pointer';\n \n // Create explain button (using emoji)\n const explainButton = document.createElement('span');\n explainButton.className = 'explain-btn';\n explainButton.innerHTML = 'â';\n explainButton.style.marginTop = '5px';\n explainButton.style.cursor = 'pointer';\n explainButton.title = 'Sign up to unlock the full experience';\n \n // Add buttons to controls\n audioControls.appendChild(listenButton);\n audioControls.appendChild(stopButton);\n audioControls.appendChild(explainButton);\n \n // Add controls to message\n aiMessageElement.appendChild(audioControls);\n \n // Add event listeners to buttons\n listenButton.addEventListener('click', function() {\n playAudio(audioElement);\n });\n stopButton.addEventListener('click', function() {\n stopAudio(audioElement);\n });\n explainButton.addEventListener('click', function() {\n showSignUpOverlay();\n });\n \n // Play audio automatically\n playAudio(audioElement);\n }\n \n // Save the current conversation state\n if (!window.miniConversationStates) {\n window.miniConversationStates = {};\n }\n window.miniConversationStates[currentLanguage] = {\n messages: messagesContainer.innerHTML,\n buttonState: {\n text: recordButton.textContent,\n isRecording: isRecording,\n hasClass: recordButton.classList.contains('continue-button')\n }\n };\n })\n .catch(error => {\n console.error('Error loading initial message:', error);\n messagesContainer.innerHTML = '';\n });\n }\n \n // Start recording audio\n function startRecording() {\n console.log('Starting recording');\n // Request microphone access\n navigator.mediaDevices.getUserMedia({ audio: true })\n .then(stream => {\n // Update button state\n isRecording = true;\n recordButton.textContent = 'Stop';\n recordButton.classList.add('recording');\n \n // Update button onclick to only stop recording\n recordButton.onclick = function() {\n console.log('Stop button clicked');\n stopRecording();\n };\n \n // Initialize media recorder\n mediaRecorder = new MediaRecorder(stream);\n audioChunks = [];\n \n // Handle data available event\n mediaRecorder.addEventListener('dataavailable', event => {\n audioChunks.push(event.data);\n });\n \n // Handle recording stop event\n mediaRecorder.addEventListener('stop', () => {\n // Create audio blob\n const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });\n \n // Send audio to server\n sendAudioToServer(audioBlob);\n \n // Release microphone\n stream.getTracks().forEach(track => track.stop());\n });\n \n // Start recording\n mediaRecorder.start();\n })\n .catch(error => {\n console.error('Error accessing microphone:', error);\n alert('Please allow microphone access to use this feature.');\n });\n }\n \n // Stop recording audio\n function stopRecording() {\n if (mediaRecorder && isRecording) {\n // Update button state\n isRecording = false;\n recordButton.textContent = 'Loading...';\n recordButton.classList.remove('recording');\n \n // Stop recording\n mediaRecorder.stop();\n }\n }\n \n // Send audio to server\n function sendAudioToServer(audioBlob) {\n console.log('sendAudioToServer called');\n // Create form data\n const formData = new FormData();\n formData.append('audio', audioBlob);\n formData.append('language_code', currentLanguage);\n \n // Add loading message from user\n const userMessageElement = document.createElement('div');\n userMessageElement.className = 'message user-message';\n userMessageElement.innerHTML = '...
';\n messagesContainer.appendChild(userMessageElement);\n \n // Scroll to bottom of messages container\n messagesContainer.scrollTop = messagesContainer.scrollHeight;\n \n // Send audio to server\n fetch('/landing/message', {\n method: 'POST',\n headers: {\n 'X-CSRF-Token': document.querySelector('meta[name=\"csrf-token\"]').content\n },\n body: formData\n })\n .then(response => {\n if (response.status === 403) {\n // Handle 403 Forbidden (message limit reached)\n console.log('MESSAGE LIMIT REACHED: Server returned 403 Forbidden');\n userMessageElement.remove(); // Remove the loading message\n showSignUpOverlay();\n throw new Error('Message limit reached');\n }\n \n if (!response.ok) {\n throw new Error(`Server responded with status: ${response.status}`);\n }\n return response.json();\n })\n .then(data => {\n if (data.transcription) {\n console.log('User message received, setting Continue button');\n // Update user message with transcription\n userMessageElement.innerHTML = `${data.transcription}
`;\n \n // Add explain button to user message\n const explainButton = document.createElement('span');\n explainButton.className = 'explain-btn';\n explainButton.innerHTML = 'â';\n explainButton.style.marginTop = '5px';\n explainButton.style.cursor = 'pointer';\n explainButton.title = 'Sign up to unlock the full experience';\n \n // Create controls container\n const controlsContainer = document.createElement('div');\n controlsContainer.className = 'audio-controls';\n controlsContainer.appendChild(explainButton);\n \n // Add controls to message\n userMessageElement.appendChild(controlsContainer);\n \n // Add click event to explain button\n explainButton.addEventListener('click', function() {\n showSignUpOverlay();\n });\n \n // Increment message count when a user message is displayed\n messageCount++;\n console.log(`MESSAGE COUNT INCREMENTED: ${messageCount}/${MAX_MESSAGES} user messages displayed`);\n \n // Check if message limit reached and show overlay immediately\n if (messageCount >= MAX_MESSAGES) {\n console.log('MESSAGE LIMIT REACHED: Showing sign-up overlay immediately');\n showSignUpOverlay();\n return;\n }\n \n // Update record button to continue button\n recordButton.textContent = 'Continue';\n recordButton.classList.add('continue-button');\n \n // Set onclick to a separate function that ONLY calls getAIResponse\n recordButton.onclick = function() {\n console.log('Continue button clicked, changing to Loading...');\n recordButton.textContent = 'Loading...';\n getAIResponse();\n };\n \n // Save the current conversation state\n if (!window.miniConversationStates) {\n window.miniConversationStates = {};\n }\n window.miniConversationStates[currentLanguage] = {\n messages: messagesContainer.innerHTML,\n buttonState: {\n text: recordButton.textContent,\n isRecording: isRecording,\n hasClass: recordButton.classList.contains('continue-button')\n }\n };\n \n // Scroll to bottom of messages container\n messagesContainer.scrollTop = messagesContainer.scrollHeight;\n } else if (data.error) {\n // Handle error\n console.error('Error from server:', data.error);\n userMessageElement.innerHTML = 'Sorry, there was an error processing your message.
';\n if (data.message_limit_reached) {\n console.log('MESSAGE LIMIT REACHED: Showing sign-up overlay due to server error');\n showSignUpOverlay();\n } else {\n // Reset record button\n recordButton.textContent = 'Speak!';\n recordButton.classList.remove('continue-button');\n recordButton.onclick = function() {\n startRecording();\n };\n }\n } else {\n // Handle unknown response\n userMessageElement.innerHTML = 'Sorry, I couldn\\'t understand that.
';\n // Reset record button\n recordButton.textContent = 'Speak!';\n recordButton.classList.remove('continue-button');\n recordButton.onclick = function() {\n startRecording();\n };\n }\n })\n .catch(error => {\n console.error('Error sending audio to server:', error);\n userMessageElement.innerHTML = 'Sorry, there was an error processing your message.
';\n // Reset record button\n recordButton.textContent = 'Speak!';\n recordButton.classList.remove('continue-button');\n recordButton.onclick = function() {\n startRecording();\n };\n });\n }\n \n // Get AI response\n function getAIResponse() {\n console.log('getAIResponse called');\n // Update button to show loading state\n recordButton.textContent = 'Loading...';\n recordButton.classList.remove('continue-button');\n \n // Create AI message element\n const aiMessageElement = document.createElement('div');\n aiMessageElement.className = 'message ai-message';\n aiMessageElement.innerHTML = '...
';\n messagesContainer.appendChild(aiMessageElement);\n \n // Scroll to bottom of messages container\n messagesContainer.scrollTop = messagesContainer.scrollHeight;\n \n // Create form data with language code\n const formData = new FormData();\n formData.append('language_code', currentLanguage);\n \n // Get AI response from server\n fetch('/landing/continue', {\n method: 'POST',\n headers: {\n 'X-CSRF-Token': document.querySelector('meta[name=\"csrf-token\"]').content\n },\n body: formData\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`Server responded with status: ${response.status}`);\n }\n return response.json();\n })\n .then(data => {\n if (data.success && data.ai_message) {\n console.log('AI response received, setting Record button');\n // Update AI message with response\n aiMessageElement.innerHTML = `${data.ai_message.content}
`;\n \n // Add audio element to the message\n if (data.ai_message.audio_url) {\n console.log('Adding audio element with URL:', data.ai_message.audio_url);\n \n // Create audio element\n const audioElement = document.createElement('audio');\n audioElement.style.display = 'none';\n audioElement.src = data.ai_message.audio_url;\n \n // Add audio element to message\n aiMessageElement.appendChild(audioElement);\n \n // Create audio controls\n const audioControls = document.createElement('div');\n audioControls.className = 'audio-controls';\n \n // Create listen button (using emoji)\n const listenButton = document.createElement('span');\n listenButton.className = 'listen-audio-btn';\n listenButton.innerHTML = 'đ';\n listenButton.style.marginTop = '5px';\n listenButton.style.marginRight = '10px';\n listenButton.style.cursor = 'pointer';\n \n // Create stop button (initially hidden, using emoji)\n const stopButton = document.createElement('span');\n stopButton.className = 'stop-audio-btn';\n stopButton.innerHTML = 'âšī¸';\n stopButton.style.display = 'none';\n stopButton.style.marginTop = '5px';\n stopButton.style.marginRight = '10px';\n stopButton.style.cursor = 'pointer';\n \n // Create explain button (using emoji)\n const explainButton = document.createElement('span');\n explainButton.className = 'explain-btn';\n explainButton.innerHTML = 'â';\n explainButton.style.marginTop = '5px';\n explainButton.style.cursor = 'pointer';\n explainButton.title = 'Sign up to unlock the full experience';\n \n // Add buttons to controls\n audioControls.appendChild(listenButton);\n audioControls.appendChild(stopButton);\n audioControls.appendChild(explainButton);\n \n // Add controls to message\n aiMessageElement.appendChild(audioControls);\n \n // Add event listeners to buttons\n listenButton.addEventListener('click', function() {\n playAudio(audioElement);\n });\n stopButton.addEventListener('click', function() {\n stopAudio(audioElement);\n });\n explainButton.addEventListener('click', function() {\n showSignUpOverlay();\n });\n \n // Play audio automatically\n playAudio(audioElement);\n }\n \n // Check if message limit reached\n if (messageCount >= MAX_MESSAGES) {\n console.log('MESSAGE LIMIT REACHED: Showing sign-up overlay after AI response');\n showSignUpOverlay();\n return;\n }\n \n // Reset record button for next message\n recordButton.textContent = 'Speak!';\n \n // IMPORTANT: Set onclick handler to ONLY start recording when clicked\n recordButton.onclick = function() {\n console.log('Record button clicked');\n startRecording();\n };\n \n // Save the current conversation state\n if (!window.miniConversationStates) {\n window.miniConversationStates = {};\n }\n window.miniConversationStates[currentLanguage] = {\n messages: messagesContainer.innerHTML,\n buttonState: {\n text: recordButton.textContent,\n isRecording: isRecording,\n hasClass: recordButton.classList.contains('continue-button')\n }\n };\n \n // Scroll to bottom of messages container\n messagesContainer.scrollTop = messagesContainer.scrollHeight;\n } else if (data.error) {\n // Handle specific error\n console.error('Error from server:', data.error);\n aiMessageElement.innerHTML = 'Sorry, there was an error generating a response.
';\n // Reset record button\n recordButton.textContent = 'Speak!';\n recordButton.onclick = function() {\n startRecording();\n };\n } else {\n // Handle unknown response\n aiMessageElement.innerHTML = 'Sorry, I couldn\\'t generate a response.
';\n // Reset record button\n recordButton.textContent = 'Speak!';\n recordButton.onclick = function() {\n startRecording();\n };\n }\n })\n .catch(error => {\n console.error('Error getting AI response:', error);\n aiMessageElement.innerHTML = 'Sorry, there was an error generating a response.
';\n // Reset record button\n recordButton.textContent = 'Speak!';\n recordButton.onclick = function() {\n startRecording();\n };\n });\n }\n \n // Function to play audio\n function playAudio(audioElement) {\n if (!audioElement) return;\n \n console.log('Playing audio');\n \n // Keep track of currently playing audio\n if (window.currentlyPlayingAudio && window.currentlyPlayingAudio !== audioElement) {\n window.currentlyPlayingAudio.pause();\n window.currentlyPlayingAudio.currentTime = 0;\n \n // Reset UI for previously playing audio\n const previousMessage = window.currentlyPlayingAudio.closest('.message');\n if (previousMessage) {\n const previousListenBtn = previousMessage.querySelector('.listen-audio-btn');\n const previousStopBtn = previousMessage.querySelector('.stop-audio-btn');\n \n if (previousListenBtn) previousListenBtn.style.display = 'inline-block';\n if (previousStopBtn) previousStopBtn.style.display = 'none';\n }\n }\n \n // Set as currently playing audio\n window.currentlyPlayingAudio = audioElement;\n \n // Update UI for this audio\n const message = audioElement.closest('.message');\n let listenBtn, stopBtn;\n \n if (message) {\n listenBtn = message.querySelector('.listen-audio-btn');\n stopBtn = message.querySelector('.stop-audio-btn');\n }\n \n // Play the audio\n audioElement.play()\n .then(() => {\n console.log('Audio playback started');\n // Only hide listen button and show stop button if playback actually started\n if (listenBtn) listenBtn.style.display = 'none';\n if (stopBtn) stopBtn.style.display = 'inline-block';\n })\n .catch(error => {\n console.error('Audio playback failed:', error);\n // Reset currently playing audio since it failed\n window.currentlyPlayingAudio = null;\n // Keep listen button visible in case of error\n if (listenBtn) listenBtn.style.display = 'inline-block';\n if (stopBtn) stopBtn.style.display = 'none';\n });\n \n // Add ended event listener\n audioElement.onended = function() {\n console.log('Audio playback ended');\n window.currentlyPlayingAudio = null;\n \n // Reset UI\n if (message) {\n const listenBtn = message.querySelector('.listen-audio-btn');\n const stopBtn = message.querySelector('.stop-audio-btn');\n \n if (listenBtn) listenBtn.style.display = 'inline-block';\n if (stopBtn) stopBtn.style.display = 'none';\n }\n };\n }\n \n // Function to stop audio playback\n function stopAudio(audioElement) {\n if (!audioElement) return;\n \n console.log('Stopping audio');\n \n // Pause and reset audio\n audioElement.pause();\n audioElement.currentTime = 0;\n \n // Clear currently playing audio\n window.currentlyPlayingAudio = null;\n \n // Update UI\n const message = audioElement.closest('.message');\n if (message) {\n const listenBtn = message.querySelector('.listen-audio-btn');\n const stopBtn = message.querySelector('.stop-audio-btn');\n \n if (listenBtn) listenBtn.style.display = 'inline-block';\n if (stopBtn) stopBtn.style.display = 'none';\n }\n }\n \n // Show sign-up overlay\n function showSignUpOverlay() {\n console.log('Showing sign-up overlay - message limit reached');\n \n // Create overlay if it doesn't exist\n if (!conversationOverlay) {\n conversationOverlay = document.createElement('div');\n conversationOverlay.id = 'mini-conversation-overlay';\n conversationOverlay.className = 'conversation-overlay';\n conversationOverlay.innerHTML = `\n \n `;\n document.querySelector('.mini-conversation-container').appendChild(conversationOverlay);\n }\n \n // Show overlay\n conversationOverlay.style.display = 'flex';\n \n // Disable record button\n if (recordButton) {\n recordButton.disabled = true;\n recordButton.classList.add('disabled');\n recordButton.onclick = function(e) {\n e.preventDefault();\n return false;\n };\n }\n \n // Disable language buttons\n languageButtons.forEach(button => {\n button.disabled = true;\n button.classList.add('disabled');\n button.onclick = function(e) {\n e.preventDefault();\n return false;\n };\n });\n }\n \n initializeRecordButton();\n});\n"],"sourceRoot":""}