How to add Free Voice Translator to A Chat Bot?

At first you have to go to https://responsivevoice.org/ and sign up for a free account. Then import the javascript file to your project

  <script src="https://code.responsivevoice.org/responsivevoice.js"></script>

Now we will create a function called handleSubmit()

The objective of this function is to Retrieve User Input, Validate Input, Display User's Message, Send Message to Server, Process Server Response, Speak the Assistant's Response, Scroll Chat to Bottom, Clear Input Field.

Get the User's Message:

var userMessage = document.getElementById('userMessage').value;
if (!userMessage) return; // Prevent empty submissions

Display the User's Message:

var chatMessages = document.getElementById('chat-messages');

var userDiv = document.createElement('div');
userDiv.className = 'message user';
userDiv.textContent = userMessage;
chatMessages.appendChild(userDiv);

• Gets the element that contains the chat messages (chatMessages).
• Creates a new div element (userDiv) for the user's message.
• Sets the class of this div to message user for styling purposes.
• Sets the text content of this div to the user's message.
• Appends this div to the chatMessages container, so the user's message is displayed in the chat.

Send the User's Message to the Server:

fetch('', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: 'userMessage=' + encodeURIComponent(userMessage)
})
.then(response => response.json())
.then(data => {

• Uses the fetch API to send a POST request to the server.
• The request headers specify that the content type is application/x-www-form-urlencoded.
• The body of the request contains the user's message, URL-encoded for safe transmission.
• The response is then parsed as JSON.

Display the Assistant's Response:

var assistantDiv = document.createElement('div');
assistantDiv.className = 'message assistant';
assistantDiv.innerHTML = data.message.replace(/\
/g, '<br>'); // Replace line breaks with <br> tags
chatMessages.appendChild(assistantDiv);

• Creates a new div element (assistantDiv) for the assistant's response.
• Sets the class of this div to message assistant for styling purposes.
• Sets the HTML content of this div to the assistant's response, replacing any newline characters with <br> tags to preserve line breaks.
• Appends this div to the chatMessages container, so the assistant's response is displayed in the chat.

Speak the Assistant's Response (Optional):

responsiveVoice.speak(data.message, "Hindi Male"); // You can change the voice as needed

• Uses the ResponsiveVoice library to speak the assistant's response aloud.
• The response text is taken from data.message.
• The voice used is "Hindi Male," but this can be changed to any available voice in the ResponsiveVoice library.

Scroll to the Bottom of the Chat:

chatMessages.scrollTop = chatMessages.scrollHeight;

Ensures that the chat container scrolls to the bottom so that the latest messages are visible.

Clear the Input Field:

document.getElementById('userMessage').value = '';

Clears the input field for the next message.

Complete Code

function handleSubmit() {
            var userMessage = document.getElementById('userMessage').value;
            if (!userMessage) return; // Prevent empty submissions
            var chatMessages = document.getElementById('chat-messages');

            var userDiv = document.createElement('div');
            userDiv.className = 'message user';
            userDiv.textContent = userMessage;
            chatMessages.appendChild(userDiv);

            // Use fetch to send the POST request
            fetch('', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'userMessage=' + encodeURIComponent(userMessage)
            })
            .then(response => response.json())
            .then(data => {
                var assistantDiv = document.createElement('div');
                assistantDiv.className = 'message assistant';
                assistantDiv.innerHTML = data.message.replace(/\
/g, '<br>'); // Replace line breaks with <br> tags
                chatMessages.appendChild(assistantDiv);

                // Speak the assistant's response using ResponsiveVoice
                
                responsiveVoice.speak(data.message, "Hindi Male"); // You can change the voice as needed


                // Scroll to the bottom of the chat messages container
                chatMessages.scrollTop = chatMessages.scrollHeight;
            });
            document.getElementById('userMessage').value = '';
        }

Final HTML CODE

<div class="chat-container">
        <div class="chat-header">Chat with Panda AI</div>
        <div class="chat-messages" id="chat-messages">
            <?php foreach ($conversation as $message): ?>
                <?php if ($message['role'] !== 'system'): ?>
                    <div class="message <?php echo $message['role']; ?>">
                        <?php echo $message['content']; ?>
                    </div>
                <?php endif; ?>
            <?php endforeach; ?>
        </div>
        <form id="chat-form" class="chat-input" method="POST">
            <select id="language" class="chat-input input">
                <option value="en-US">English</option>
                <option value="hi-IN">Hindi</option>
                 
                <!-- Add more options as needed -->
            </select>
             

            <button type="button" id="voice-button" onmousedown="startRecording()" onmouseup="stopRecording()"><i class="fa-solid fa-microphone"></i></button>


            <input type="text" class="chat-input" name="userMessage" id="userMessage" placeholder="Type your message or speak..." required>
            <button type="submit"><i class="fa-regular fa-paper-plane"></i></button>
        </form>
    </div>