<!--CONTENT CONTAINER--> <div id="content-container"> <!--Page content--> <div id="page-content"> <h4 class="text-main pad-btm bord-btm">《伤寒论》知识图谱问答系统</h4> </div> <!--End page content--> </div> <!--END CONTENT CONTAINER-->在这段代码中添加一个可以实现多轮问答的聊天框

您可以按照以下步骤添加一个多轮问答的聊天框：

1. 在 `<div id="page-content">` 标签后添加一个新的 `<div>` 标签，用于包裹聊天框。

<div id="page-content">
    <h4 class="text-main pad-btm bord-btm">《伤寒论》知识图谱问答系统</h4>
    <div id="chat-box"></div> <!-- 新添加的聊天框 -->
</div>

2. 在 JavaScript 文件中添加以下代码，用于实现聊天框的多轮问答功能。

var chatBox = document.getElementById("chat-box");

function addMessage(msg, isUser) {
    var messageDiv = document.createElement("div");
    messageDiv.classList.add("chat-message");
    messageDiv.classList.add(isUser ? "user-message" : "bot-message");
    messageDiv.innerText = msg;
    chatBox.appendChild(messageDiv);
}

function sendMessage() {
    var inputBox = document.getElementById("input-box");
    var message = inputBox.value;
    inputBox.value = "";

    addMessage(message, true);

    // TODO: 调用 AI 接口获取回复
    var reply = "这是 AI 的回复";

    addMessage(reply, false);
}

var inputBox = document.createElement("input");
inputBox.setAttribute("type", "text");
inputBox.setAttribute("id", "input-box");
inputBox.setAttribute("placeholder", "请输入您的问题");
inputBox.addEventListener("keydown", function (event) {
    if (event.keyCode === 13) {
        sendMessage();
    }
});

var sendButton = document.createElement("button");
sendButton.setAttribute("id", "send-button");
sendButton.innerText = "发送";
sendButton.addEventListener("click", sendMessage);

chatBox.appendChild(inputBox);
chatBox.appendChild(sendButton);

3. 在 CSS 文件中添加以下样式，用于美化聊天框。

#chat-box {
    max-height: 300px;
    overflow-y: auto;
    padding: 10px;
}

.chat-message {
    margin-bottom: 10px;
}

.user-message {
    text-align: right;
}

.bot-message {
    text-align: left;
}

#input-box {
    width: calc(100% - 60px);
    border: none;
    border-radius: 5px;
    padding: 10px;
    margin-right: 10px;
}

#send-button {
    border: none;
    border-radius: 5px;
    padding: 10px;
    background-color: #007bff;
    color: white;
}

#send-button:hover {
    cursor: pointer;
}

这样就可以在页面中添加一个多轮问答的聊天框了。您可以根据需要调整样式和实现方式。