Enhancing the Chatbot Interface with JavaScript | CodeSignal Learn

Enhancing the Chatbot Interface with JavaScript | CodeSignal Learn

Enhancing the Chatbot Interface with JavaScript

Welcome back! In the previous lesson, you enhanced your chatbot application by adding message suggestions, making it more user-friendly and efficient. Today, we will focus on enhancing the interface to make it more interactive and professional using JavaScript . Interactivity is crucial in web applications as it enhances user experience by providing a dynamic and intuitive interface. We will use JavaScript to achieve this, ensuring that our chatbot not only functions well but also provides a seamless user experience.

Dynamically Creating and Manipulating DOM Elements

To enhance our chatbot interface, we need to dynamically create and manipulate DOM elements using JavaScript. This allows us to modify the structure and content of our application in response to user interactions. Let's start by creating a JavaScript file named script.js in the app/static directory. This directory is where we store static files like JavaScript and images. Here is the project structure showing the location of the script.js file: app/ ├── static/ │ └── script.js └── public/ └── chat.html Once the JavaScript file is created, we need to link it to our HTML template. Open your chat.html file and structure it as follows: HTML<!DOCTYPE html> <html> <head> <title>Customer Service Chat</title> <script src="{{ url_for('static', filename='script.js') }}" defer></script> </head> <body> <div id="header" class="header">Customer Service Chat</div> <div id="suggestions" class="suggestions"></div> <div id="chat-container"> <div id="messages"></div> <div class="input-container"> <input type="text" id="message-input" placeholder="Type your message here..."> <button id="send-btn">Send</button> <button id="new-chat-btn">New Chat</button> </div> </div> </body> </html> This structure includes a <script> tag within the <head> section, which uses Flask's url_for function to generate the correct URL for the JavaScript file, ensuring that the script is executed after the HTML content is loaded. The defer attribute in the <script> tag ensures that the JavaScript file is executed only after the entire HTML document has been parsed. Without defer, if the script runs before HTML elements are fully available, getElementById calls could fail because the elements don't exist yet.

Sign up

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Enhancing the Header and Suggestions Section

Next, let's enhance the header and suggestions section to make them interactive and easy to interact with. In your script.js file, add the following JavaScript code: document.addEventListener('DOMContentLoaded', () => {const suggestionsContainer = document.getElementById('suggestions'); const suggestionTexts = ['How can I help you?', 'What are your hours?', 'Where are you located?']; suggestionTexts.forEach(text => {const button = document.createElement('button'); button.className = 'suggestion-btn'; button.textContent = text; button.addEventListener('click', () => {document.getElementById('message-input').value = text;}); suggestionsContainer.appendChild(button);});}); This code dynamically creates suggestion buttons and appends them to the suggestions container. Each button is assigned a click event listener that populates the message input field with the corresponding suggestion text.

Enhancing the Chat Container and Messages

Let's enhance the chat container and messages to ensure they are responsive and user-friendly. Add the following JavaScript code to your script.js file: document.addEventListener('DOMContentLoaded', () => {const messagesContainer = document.getElementById('messages'); const sendButton = document.getElementById('send-btn'); const messageInput = document.getElementById('message-input'); sendButton.addEventListener('click', () => {const messageText = messageInput.value.trim(); if (messageText) {const messageElement = document.createElement('div'); messageElement.className = 'message user'; messageElement.textContent = messageText; messagesContainer.appendChild(messageElement); messageInput.value = ''; messagesContainer.scrollTop = messagesContainer.scrollHeight;}});}); This code adds an event listener to the send button, which creates a new message element and appends it to the messages container when clicked. The message input field is cleared after sending, and the messages container is scrolled to the bottom to show the latest message.

Enhancing the Input Section

Finally, let's enhance the input section to ensure it is functional and visually consistent with the rest of the interface. Add the following JavaScript code to your script.js file: document.addEventListener('DOMContentLoaded', () => {const newChatButton = document.getElementById('new-chat-btn'); const messagesContainer = document.getElementById('messages'); newChatButton.addEventListener('click', () => {messagesContainer.innerHTML = '';});}); This code adds an event listener to the new chat button, which clears all messages from the messages container when clicked, allowing the user to start a new chat session.

JavaScript

document.addEventListener('DOMContentLoaded', () => {
    const suggestionsContainer = document.getElementById('suggestions');
    const suggestionTexts = ['How can I help you?', 'What are your hours?', 'Where are you located?'];

    suggestionTexts.forEach(text => {
        const button = document.createElement('button');
        button.className = 'suggestion-btn';
        button.textContent = text;
        button.addEventListener('click', () => {
            document.getElementById('message-input').value = text;
        });
        suggestionsContainer.appendChild(button);
    });
});

JavaScript

document.addEventListener('DOMContentLoaded', () => {
    const messagesContainer = document.getElementById('messages');
    const sendButton = document.getElementById('send-btn');
    const messageInput = document.getElementById('message-input');

    sendButton.addEventListener('click', () => {
        const messageText = messageInput.value.trim();
        if (messageText) {
            const messageElement = document.createElement('div');
            messageElement.className = 'message user';
            messageElement.textContent = messageText;
            messagesContainer.appendChild(messageElement);
            messageInput.value = '';
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
        }
    });
});

JavaScript

document.addEventListener('DOMContentLoaded', () => {
    const newChatButton = document.getElementById('new-chat-btn');
    const messagesContainer = document.getElementById('messages');

    newChatButton.addEventListener('click', () => {
        messagesContainer.innerHTML = '';
    });
});