简易聊天框

MyGPT 是一个简单的聊天应用程序，设计用于展示如何创建一个用户登录系统以及实现一个基本的聊天功能。项目分为两个主要部分：用户登录界面 和 聊天功能界面。在这个项目中，我们使用了 HTML、CSS 和 JavaScript 来实现页面布局、样式和功能交互。

项目结构

1. HTML 结构：

   • 登录页面：用户通过输入用户名和密码登录。登录成功后，会进入聊天页面。
   • 聊天页面：用户可以在该页面与聊天机器人进行对话，机器人会根据用户的输入生成响应。

2. CSS 样式：

   • 页面布局：通过使用 flexbox 等布局技术，我们将页面内容居中显示，并确保输入框和按钮样式美观。
   • 聊天框：设计了一个聊天框，可以容纳用户和机器人的消息，并且支持滚动查看历史消息。

3. JavaScript 功能实现：

   • 用户认证：通过简单的用户名和密码验证，控制用户是否能够进入聊天页面。
   • 消息发送和接收：用户输入的消息会显示在聊天框中，机器人会根据用户的输入提供模拟的回复。

详细功能和实现步骤

1. 用户登录功能

登录界面是项目的起点。在登录框中，用户需要输入一个用户名和密码。当点击 Login 按钮时，JavaScript 会检查用户是否输入了有效的用户名和密码。如果输入有效，则隐藏登录界面，显示聊天界面。

<!-- 登录界面 -->
<div class="login-container" id="login-container">
    <div class="login-box">
        <h2>Login</h2>
        <input type="text" id="username" placeholder="Username" />
        <input type="password" id="password" placeholder="Password" />
        <button id="login-btn">Login</button>
    </div>
</div>

在 JavaScript 中实现用户登录验证：

document.getElementById("login-btn").addEventListener("click", function () {
    const username = document.getElementById("username").value.trim();
    const password = document.getElementById("password").value.trim();

    if (username && password) {
        // 模拟登录过程
        document.getElementById("login-container").style.display = "none";  // 隐藏登录界面
        document.getElementById("chat-container").style.display = "flex";   // 显示聊天界面
    } else {
        alert("Please enter both username and password.");
    }
});

2. 聊天功能

当用户成功登录后，进入 聊天界面，并可以开始与聊天机器人进行交互。用户输入的每条消息都会通过一个 send 按钮发送，机器人会在输入框下方生成对应的回复。

• 新建聊天 按钮：点击后清空聊天内容，重新开始一轮新的对话。

<!-- 聊天页面 -->
<div class="chat-container" id="chat-container" style="display: none;">
    <button id="new-chat-btn" class="new-chat-btn">New Chat</button>
    <div class="chat-header">
        <h3>MyGPT</h3>
    </div>
    <div class="chat-box" id="chat-box"></div>
    <div class="input-container">
        <input type="text" id="user-input" placeholder="Type your message..." />
        <button id="send-btn">Send</button>
    </div>
</div>

JavaScript 中的聊天功能处理逻辑：

document.getElementById("send-btn").addEventListener("click", function () {
    const userInput = document.getElementById("user-input").value.trim();
    if (userInput) {
        displayMessage(userInput, "user");
        document.getElementById("user-input").value = "";  // 清空输入框

        // 模拟机器人回复
        setTimeout(function () {
            const botResponse = "Bot: " + generateBotResponse(userInput);
            displayMessage(botResponse, "bot");
        }, 1000);
    }
});

document.getElementById("new-chat-btn").addEventListener("click", function () {
    // 清空聊天框，开始新聊天
    document.getElementById("chat-box").innerHTML = "";
});

function displayMessage(message, sender) {
    const chatBox = document.getElementById("chat-box");
    const messageElement = document.createElement("div");
    messageElement.classList.add("message", sender === "user" ? "user-message" : "bot-message");

    const messageContent = document.createElement("p");
    messageContent.innerText = message;
    messageElement.appendChild(messageContent);

    chatBox.appendChild(messageElement);
    chatBox.scrollTop = chatBox.scrollHeight;  // 自动滚动到最底部
}

function generateBotResponse(userMessage) {
    // 简单的模拟机器人响应
    return "You said: " + userMessage;
}

3. 聊天消息展示

消息显示的样式设计为用户消息和机器人的消息有不同的外观，用户消息右对齐，机器人的消息左对齐。这通过 CSS 样式实现：

/* 聊天消息的样式 */
.chat-box .user-message p {
    background-color: #4CAF50;
    color: white;
    display: inline-block;
    border-radius: 15px 15px 0 15px;
}

.chat-box .bot-message p {
    background-color: #e0e0e0;
    color: #333;
    display: inline-block;
    border-radius: 15px 15px 15px 0;
}

4. 布局与样式

我们使用 CSS 实现了简洁的布局，使得 登录界面 居中显示，聊天界面则占据整个屏幕，并且聊天框和输入框都具有自适应的样式。

/* 布局与样式 */
body, html {
    height: 100%;
    width: 100%;
    font-family: 'Arial', sans-serif;
    background-color: #f7f7f7;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chat-container {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    position: relative;
}

---