Trouble Displaying Buttons in Rasa UI HTML Code

Rasa Open Source
1

I’m reaching out because I’ve encountered a problem with displaying buttons in my Rasa UI HTML code, and despite several attempts, I haven’t been able to resolve it. I’m hoping that someone in the community might be able to offer some insight or guidance.

Below is the HTML code I’m currently using:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chatbot</title>
    <link rel="stylesheet" href="/static/styles.css">
</head>
<body>
    <div id="chat-container">
        <div id="chat-display"></div>
        <div id="input-container">
            <input type="text" id="user-input" placeholder="Type your message...">
            <img src="/static/icons8-right-arrow-48.png" alt="Send" id="send-button" onclick="sendMessage()">
        </div>
    </div>

    <script>
        // JavaScript functions here
    </script>
</body>
</html>

In this code, I’ve attempted to incorporate functionality to display buttons alongside the chat messages. However, despite my efforts, the buttons aren’t appearing as intended.

I suspect the issue may lie in how I’m handling the button display in the JavaScript portion of the code. Here’s the relevant part:

        function displayButtons(buttons) {
            var chatDisplay = document.getElementById("chat-display");
            var buttonContainer = document.createElement("div");
            buttonContainer.className = "button-container";

            buttons.forEach(button => {
                var buttonElement = document.createElement("button");
                buttonElement.textContent = button.title;
                buttonElement.className = "bot-button";
                buttonElement.addEventListener("click", function() {
                    sendMessageButton(button.payload);
                });
                buttonContainer.appendChild(buttonElement);
            });

            chatDisplay.appendChild(buttonContainer);
            chatDisplay.scrollTop = chatDisplay.scrollHeight; // Auto scroll to bottom
        }

        function sendMessageButton(payload) {
            displayMessage(payload, true);
            sendMessage(payload);
        }

I’ve tried debugging the code and ensuring that the necessary elements are being created and appended to the DOM correctly, but I’m still unable to get the buttons to show up.

If anyone has experience with implementing buttons in Rasa UI HTML code or has encountered a similar issue before, I would greatly appreciate any advice or suggestions you might have.

Thank you in advance for your help!

Here is the whole code for reference :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chatbot</title>
    <link rel="stylesheet" href="/static/styles.css">
</head>
<body>
    <div id="chat-container">
        <div id="chat-display"></div>
        <div id="input-container">
            <input type="text" id="user-input" placeholder="Type your message...">
            <img src="/static/icons8-right-arrow-48.png" alt="Send" id="send-button" onclick="sendMessage()">
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Add event listener for "Enter" key
            document.getElementById("user-input").addEventListener("keydown", function(event) {
                if (event.key === "Enter") {
                    sendMessage();
                }
            });
        });

        function sendMessage(userMessage) {
            userMessage = userMessage || document.getElementById("user-input").value; // Use provided message or input value
            if (userMessage.trim() === "") return; // Don't send empty messages
            displayMessage(userMessage, true);
            document.getElementById("user-input").value = "";
            
            fetch('http://localhost:5005/webhooks/rest/webhook', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ message: userMessage })
            })
            .then(response => response.json())
            .then(data => {
                if (data && data.length > 0) {
                    data.forEach(response => {
                        if (response.hasOwnProperty('text')) {
                            displayMessage(response.text, false);
                        } else if (response.hasOwnProperty('buttons')) {
                            displayButtons(response.buttons);
                        }
                    });
                }
            })
            .catch(error => console.error('Error:', error));
        }

        function displayMessage(message, isUser) {
            var chatDisplay = document.getElementById("chat-display");
            var messageElement = document.createElement("div");
            messageElement.textContent = message;
            messageElement.className = isUser ? "user-message" : "bot-message";
            chatDisplay.appendChild(messageElement);
            chatDisplay.scrollTop = chatDisplay.scrollHeight; // Auto scroll to bottom
        }

        function displayButtons(buttons) {
            var chatDisplay = document.getElementById("chat-display");
            var buttonContainer = document.createElement("div");
            buttonContainer.className = "button-container";

            buttons.forEach(button => {
                var buttonElement = document.createElement("button");
                buttonElement.textContent = button.title;
                buttonElement.className = "bot-button";
                buttonElement.addEventListener("click", function() {
                    sendMessageButton(button.payload);
                });
                buttonContainer.appendChild(buttonElement);
            });

            chatDisplay.appendChild(buttonContainer);
            chatDisplay.scrollTop = chatDisplay.scrollHeight; // Auto scroll to bottom
        }

        function sendMessageButton(payload) {
            displayMessage(payload, true);
            sendMessage(payload);
        }
    </script>
</body>
</html>