Question 199047 in Html Question posted in
Some basic documentation can be found here.

Dynamic HTML Chat CSS

I want to build an interface for a chat. The original site that i retrieve code is https://www.florin-pop.com/blog/2019/04/chat-interface/ The elements of the page will work properly this way:

<div class="chat-container">
    <ul class="chat">
        <li class="message left">
            <img class="logo" src="https://randomuser.me/api/portraits/women/17.jpg" alt="">
            <p>I'm hungry!</p>
        </li>
    </ul>
    <ul class="chat">
        <li class="message right">
            <img class="logo" src="https://randomuser.me/api/portraits/men/67.jpg" alt="">
            <p>Hi hungry ok, nice to meet you. I'm Dad.</p>
        </li>
    </ul>
</div>

But when a I the followin code, the html is not built properly, The complete code that is building html improperly:

<!DOCTYPE html>
<html>
<head>
    <title>Interface com Rasa</title>
    <link rel="stylesheet" href="http://cientistaspatentes.com.br/css/codepen8.css">
</head>
<body>
    <div class="chat-container">
        <ul class="chat"></ul>
        <div class="input-group mb-3">
            <input type="text" class="form-control" id="entrada_texto" placeholder="Digite sua mensagem">
            <div class="input-group-append">
                <button class="btn btn-primary" type="button" id="send-button">Enviar</button>
            </div>
        </div>
    </div>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script>
        document.getElementById('send-button').addEventListener('click', function() {
            enviarMensagem();
        });

        document.getElementById('entrada_texto').addEventListener('keyup', function(event) {
            if (event.keyCode === 13) {
                enviarMensagem();
            }
        });

        function enviarMensagem() {
            var mensagem = document.getElementById("entrada_texto").value;
            if (mensagem.trim() !== '') {
                enviarRequisicaoRasa(mensagem);
            }
        }

        function exibirResposta(resposta) {
            var userInput = document.getElementById("entrada_texto").value;
            var chatMessages = document.getElementById('chat');

            var userMessageElement = createMessageElement(userInput, 'message left', 'avatar.png');
            chatMessages.appendChild(userMessageElement);

            var botMessageElement = createMessageElement(resposta, 'message right', 'chatbot.png');
            chatMessages.appendChild(botMessageElement);

            document.getElementById('entrada_texto').value = '';
        }

        function createMessageElement(message, className, icon) {

            var messageContainer = document.createElement('li');
            messageContainer.className = className;

            var imageUrl = icon;
            var imageElement = document.createElement('img');
            imageElement.src = "https://cientistaspatentes.com.br/imagens/" + imageUrl;
            imageElement.width = 60;
            imageElement.align = 'middle';
            imageElement.className = 'logo';
            messageContainer.appendChild(imageElement);

            if (message.trim() !== '') {
                var textElement = document.createElement('p');
                textElement.innerText = "  " + message;
                messageContainer.appendChild(textElement);
            }

            return messageContainer;

        }

        function enviarRequisicaoRasa(mensagem) {
            var url = "http://localhost:5005/webhooks/rest/webhook";
            var payload = {
                "sender": "user",
                "message": mensagem
            };
            var xhr = new XMLHttpRequest();
            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var respostas = JSON.parse(xhr.responseText);
                    if (respostas.length > 0) {
                        var resposta = respostas[0].text;
                        exibirResposta(resposta);
                    }
                }
            };
            xhr.send(JSON.stringify(payload));
        }
    </script>
<!-- colocar transparencia em imagens https://picwish.com/pt/remove-background -->
</body>
</html>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    id is missing at element chat the answer is:

    <ul class="chat" id="chat"></ul>

  2. 0 
     <ul class="chat" id="chat"></ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search