HTML如何制作聊天机器人？对话框怎么设计？

<div class="chat-container">
    <div class="chat-messages">
        <!-- 消息会在这里动态加载 -->
        <div class="message user-message">你好！</div>
        <div class="message bot-message">我是机器人，有什么可以帮您？</div>
    </div>
    <div class="chat-input-area">
        <input type="text" id="messageInput" placeholder="请输入消息...">
        <button id="sendMessageBtn">发送</button>
    </div>
</div>

chat-container

chat-messages

div

div

user-message

bot-message

chat-input-area

input

button

chat-container

.chat-container {
    width: 360px;
    height: 500px;
    border: 1px solid #ddd;
    border-radius: 8px;
    display: flex; /* 使用Flexbox布局 */
    flex-direction: column; /* 垂直排列子元素 */
    overflow: hidden; /* 隐藏超出部分 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f9f9f9;
}

chat-messages

.chat-messages {
    flex-grow: 1; /* 占据剩余空间 */
    padding: 15px;
    overflow-y: auto; /* 垂直滚动 */
    scroll-behavior: smooth; /* 平滑滚动效果 */
    /* 滚动条美化 (Webkit browsers) */
    &::-webkit-scrollbar {
        width: 8px;
    }
    &::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 4px;
    }
    &::-webkit-scrollbar-track {
        background-color: #f1f1f1;
    }
}

display: flex

justify-content

float

.message {
    max-width: 75%; /* 限制消息宽度 */
    padding: 10px 14px;
    border-radius: 18px;
    margin-bottom: 10px;
    line-height: 1.4;
    word-wrap: break-word; /* 自动换行 */
}

.user-message {
    background-color: #007bff; /* 用户消息蓝色 */
    color: white;
    margin-left: auto; /* 推到右边 */
    border-bottom-right-radius: 4px; /* 底部右侧小圆角 */
}

.bot-message {
    background-color: #e0e0e0; /* 机器人消息灰色 */
    color: #333;
    margin-right: auto; /* 推到左边 */
    border-bottom-left-radius: 4px; /* 底部左侧小圆角 */
}

.chat-input-area {
    display: flex;
    padding: 10px 15px;
    border-top: 1px solid #eee;
    background-color: #fff;
}

#messageInput {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 20px;
    outline: none;
    font-size: 14px;
}

#sendMessageBtn {
    background-color: #28a745; /* 发送按钮绿色 */
    color: white;
    border: none;
    border-radius: 20px;
    padding: 10px 18px;
    margin-left: 10px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

#sendMessageBtn:hover {
    background-color: #218838;
}

document.addEventListener('DOMContentLoaded', () => {
    const messageInput = document.getElementById('messageInput');
    const sendMessageBtn = document.getElementById('sendMessageBtn');
    const chatMessages = document.querySelector('.chat-messages');

    // 函数：添加消息到聊天界面
    function addMessage(text, sender) {
        const messageDiv = document.createElement('div');
        messageDiv.classList.add('message', `${sender}-message`);
        messageDiv.textContent = text;
        chatMessages.appendChild(messageDiv);
        // 滚动到底部
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }

    // 函数：处理用户发送消息
    function handleSendMessage() {
        const userMessage = messageInput.value.trim();
        if (userMessage === '') return; // 如果消息为空，则不发送

        addMessage(userMessage, 'user'); // 显示用户消息
        messageInput.value = ''; // 清空输入框

        // 模拟机器人回复
        setTimeout(() => {
            let botReply = '抱歉，我暂时无法理解您的意思。';
            if (userMessage.includes('你好')) {
                botReply = '您好！有什么可以帮助您的吗？';
            } else if (userMessage.includes('天气')) {
                botReply = '抱歉，我无法查询实时天气信息。';
            } else if (userMessage.includes('谢谢')) {
                botReply = '不客气！很高兴能为您服务。';
            }
            addMessage(botReply, 'bot'); // 显示机器人回复
        }, 800); // 模拟网络延迟
    }

    // 监听发送按钮点击事件
    sendMessageBtn.addEventListener('click', handleSendMessage);

    // 监听输入框回车键事件
    messageInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            handleSendMessage();
        }
    });

    // 初始欢迎语
    addMessage('您好！我是您的专属机器人助手。', 'bot');
});

setTimeout

fetch