Simplifying User Input with JavaScript Message Suggestions

Welcome back! In the previous lesson, you learned how to integrate API requests to create a dynamic chat interface. This allowed for real-time communication between the user and the server, enhancing the interactivity of our application. Today, we will build on that foundation by adding message suggestions to our chat interface. Message suggestions are predefined prompts that users can select to quickly send common queries. This feature not only improves the user experience by making interactions more efficient but also guides users in formulating their questions.

To implement message suggestions, we will dynamically create and manipulate DOM elements using JavaScript. This approach allows us to add suggestion buttons to the chat interface programmatically, making our application more flexible and maintainable.

First, we will create a div element to hold our suggestion buttons. This div will be positioned above the chat container and input elements to ensure easy accessibility for users. We will then create buttons for common queries such as asking about services, business hours, or contact information. These buttons will be appended to the div and will trigger a function to handle the user's selection.

Here's how you can add these buttons using JavaScript:

document.addEventListener('DOMContentLoaded', () => {
    const suggestionsDiv = document.createElement('div');
    suggestionsDiv.className = 'suggestions';

    const suggestions = [
        { text: 'Our Services', query: 'What services do you offer?' },
        { text: 'Business Hours', query: 'What are your business hours?' },
        { text: 'Contact Email', query: 'What is your contact email?' }
    ];

    suggestions.forEach(suggestion => {
        const button = document.createElement('button');
        button.className = 'suggestion-btn';
        button.textContent = suggestion.text;
        button.addEventListener('click', () => usePrompt(suggestion.query));
        suggestionsDiv.appendChild(button);
    });

    document.body.insertBefore(suggestionsDiv, document.querySelector('.chat-container'));
});

In this code, we use document.createElement to create the div and buttons, and addEventListener to handle button clicks. The suggestions array holds our predefined queries, which are used to populate the buttons dynamically.