参考Florin Pop聊天界面代码构建Rasa聊天界面时HTML渲染异常求助

问题分析 #

你的代码无法正常构建HTML并运行，主要存在以下几个问题：

• 聊天消息容器<ul class="chat">未设置id="chat"，导致JS中document.getElementById('chat')无法找到该元素，消息无法渲染。
• 缺少Bootstrap CSS文件引入，使用了Bootstrap的表单组件类（如input-group、form-control）但没有对应的样式支持，界面布局会混乱。
• exibirResposta函数中直接从输入框获取用户消息，若请求过程中用户修改输入框内容，会导致显示错误的消息。
• 使用了过时的align="middle"属性，应改用CSS控制图片对齐。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Interface com Rasa</title>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://cientistaspatentes.com.br/css/codepen8.css">
</head>
<body>
    <div class="chat-container">
        <!-- 为ul添加id="chat" -->
        <ul class="chat" id="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.trim();
            if (mensagem) {
                // 保存用户消息，传给请求函数
                enviarRequisicaoRasa(mensagem);
                // 清空输入框
                document.getElementById("entrada_texto").value = '';
            }
        }

        function exibirResposta(userInput, resposta) {
            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);

            // 滚动到底部，显示最新消息
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        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.className = 'logo align-middle'; // 用Bootstrap的align-middle类替代过时属性
            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) {
                    if (xhr.status === 200) {
                        var respostas = JSON.parse(xhr.responseText);
                        if (respostas.length > 0) {
                            var resposta = respostas[0].text;
                            // 传入保存的用户消息
                            exibirResposta(mensagem, resposta);
                        }
                    } else {
                        // 处理请求失败的情况
                        exibirResposta(mensagem, "抱歉，暂时无法获取回复，请稍后再试。");
                    }
                }
            };
            xhr.send(JSON.stringify(payload));
        }
    </script>
</body>
</html>

关键修复点说明 #

1. 添加容器ID：给<ul class="chat">加上id="chat"，确保JS能正确获取到消息容器。
2. 引入Bootstrap CSS：补充Bootstrap样式文件，保证表单组件正常显示。
3. 优化消息传递：在enviarMensagem中保存用户消息，直接传给exibirResposta，避免输入框内容被修改导致的显示错误。
4. 替换过时属性：用Bootstrap的align-middle类替代align="middle"属性，符合现代HTML规范。
5. 添加滚动逻辑：消息渲染后自动滚动到容器底部，确保用户能看到最新消息。
6. 错误处理：增加请求失败的提示，提升用户体验。

内容的提问来源于stack exchange，提问作者Antonio Abrantes