// AI API credit: https://deepai.org/api-docs

document.write(`
    <!-- Title -->
    <h1 style="font-family: Arial, sans-serif; color: navy;">Chat Bot using DeepAI API</h1>

    <!-- User API key input -->
    <div>
        <label for="apiKeyInput" style="font-family: Arial, sans-serif;">Enter API Key:</label>
        
        <!-- API key input field, hides input -->
        <input type="password" id="apiKeyInput" placeholder="Please enter your API Key" style="font-family: Arial, sans-serif; width: 300px;">
    </div>

    <!-- User message input -->
    <div style="margin-top: 10px;">
    
        <!-- User's message -->
        <input type="text" id="userInput" placeholder="Please enter your message" style="font-family: Arial, sans-serif;">
        
        <!-- Button to send message -->
        <button onclick="sendMessage()" style="font-family: Arial, sans-serif;">Send Message</button>
    </div>

    <!-- Container to display API results -->
    <div id="chatResult" style="font-family: 'Courier New', monospace; color: green; margin-top: 10px;"></div>
    
    <!-- Container to show API missing error to the user -->
    <div id="userMessage" style="font-family: Arial, sans-serif; color: red; margin-top: 5px;"></div>

    <!-- jQuery library for AJAX requests -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    
        // Sends the message
        function sendMessage() {
        
            // Retrieves the API key entered by the user
            var apiKey = document.getElementById('apiKeyInput').value;
            
            // Show error if API key is not entered
            if (!apiKey) {
                document.getElementById('userMessage').innerHTML = 'API key is missing. Please enter your API key.';
                console.log('API key is missing.'); 
                return;
            }
            document.getElementById('userMessage').innerHTML = ''; // Clear the message

        
            // Gets the user's message
            var userMessage = document.getElementById('userInput').value;
            
            // DeepAI API endpoint
            var url = 'https://api.deepai.org/api/text-generator';
        
            // AJAX POST request to DeepAI API
            $.ajax({
                url: url,
                type: 'POST',
                data: {
                    text: userMessage
                },
                headers: {
                    'Api-Key': apiKey
                },
                success: function(data) {
                    // Displays response from DeepAI in the chatResult 
                    var reply = data.output;
                    document.getElementById('chatResult').innerHTML += '<p style="color: blue;"><b>You:</b> ' + userMessage + '</p>';
                    document.getElementById('chatResult').innerHTML += '<p style="color: red;"><b>AI:</b> ' + reply + '</p>';
                },
                error: function(xhr, status, error) {
                    // Handling any errors
                    var errorMessage = xhr.status + ': ' + xhr.statusText;
                    document.getElementById('chatResult').innerHTML += '<p style="color: red;">Error - ' + errorMessage + '</p>';
                }
            });
        
            // Clears the input field after the message is sent
            document.getElementById('userInput').value = '';
        }

    </script>
`);