diff --git a/static/ai-chat1.html b/static/ai-chat1.html
new file mode 100644
index 0000000..743fbb6
--- /dev/null
+++ b/static/ai-chat1.html
@@ -0,0 +1,260 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>AI 聊天对话</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+        }
+
+        .container {
+            display: flex;
+            height: 100vh;
+        }
+
+        .left-panel {
+            flex: 15%;
+            background-color: #f2f2f2;
+            padding: 10px;
+        }
+
+        .right-panel {
+            flex: 85%;
+            background-color: #ffffff;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .chat-log {
+            flex: 1;
+            overflow-y: auto;
+            padding: 20px;
+        }
+
+        .chat-bubble {
+            display: flex;
+            align-items: center;
+            margin-bottom: 10px;
+        }
+
+        .user-bubble {
+            justify-content: flex-end;
+        }
+
+        .bubble-content {
+            padding: 10px 15px;
+            border-radius: 20px;
+        }
+
+        .user-bubble .bubble-content {
+            background-color: #d6eaff;
+            color: #000000;
+        }
+
+        .ai-bubble .bubble-content {
+            background-color: #e5ece7;
+            color: #000;
+        }
+
+        .input-area {
+            display: flex;
+            align-items: center;
+            padding: 20px;
+        }
+
+        .input-text {
+            flex: 1;
+            padding: 10px;
+            margin-right: 10px;
+        }
+
+        .submit-button {
+            padding: 10px 20px;
+            background-color: #2196f3;
+            color: #ffffff;
+            border: none;
+            cursor: pointer;
+        }
+
+        li {
+            margin-top: 10px;
+        }
+
+        a {
+            text-decoration: none;
+        }
+
+        table {
+            border: 1px solid #000;
+            border-collapse: collapse;
+        }
+
+        table td, table th {
+            border: 1px solid #000;
+        }
+
+        table td, table th {
+            padding: 10px;
+        }
+
+        .language-sql {
+            width: 95%;
+            background-color: #F6F6F6;
+            padding: 10px;
+            font-weight: bold;
+            border-radius: 5px;
+            word-wrap: break-word;
+            white-space: pre-line;
+            /* overflow-wrap: break-word; */
+            display: block;
+        }
+
+        select {
+            width: 100%;
+            height: 30px;
+            border: 2px solid #6089a4;
+            font-size: 15px;
+            margin-top: 5px;
+        }
+        .recommendation{
+            color: #1c4cf3;
+            margin-top: 10px;
+        }
+
+    </style>
+</head>
+<body>
+<div class="container">
+    <div class="left-panel">
+        <h2>智能问答助手</h2>
+        <h3>常用问题</h3>
+        <div class="recommendation">帮我写一个Java快速排序</div>
+        <div class="recommendation">Java 8有什么新特性</div>
+        <div class="recommendation">JVM优化建议</div>
+        <div class="recommendation">内存占用高,如何优化</div>
+        <div class="recommendation">MySQL优化建议</div>
+        <div class="recommendation">MySQL如何查看执行计划</div>
+    </div>
+    <div class="right-panel">
+        <div class="chat-log" id="chat-log">
+
+        </div>
+        <div class="input-area">
+            <input type="text" id="user-input" class="input-text" placeholder="请输入您的问题,回车或点击发送确定。">
+            <button id="submit" style="margin-left: 10px;width: 100px" onclick="sendMessage()" class="submit-button">
+                发送
+            </button>
+            <button style="margin-left: 20px;width: 100px;background-color: red" onclick="clearChat()"
+                    class="submit-button">清除记录
+            </button>
+        </div>
+    </div>
+</div>
+<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.0.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+<script>
+    // 聊天历史记录
+    var messageHistory = [];
+
+    // 添加AI信息
+    function addAIMessage(message) {
+        $("#chat-log").append(
+            "<div class=\"chat-bubble ai-bubble\">\n" +
+            "    <div class=\"bubble-content\">" + message + "</div>\n" +
+            "</div>"
+        )
+    }
+
+    // 添加人类信息
+    function addUserMessage(message) {
+        $("#chat-log").append(
+            "<div class=\"chat-bubble user-bubble\">\n" +
+            "    <div class=\"bubble-content\">" + message + "</div>\n" +
+            "</div>"
+        )
+    }
+
+    // 滑动到底部
+    function slideBottom() {
+        let chatlog = document.getElementById("chat-log");
+        chatlog.scrollTop = chatlog.scrollHeight;
+    }
+
+    // 调用api
+    function chatApi(message) {
+        slideBottom();
+        data = {
+            questions: message,
+            history: messageHistory
+        };
+        $.ajax({
+            url: "http://127.0.0.1:8081/assistant",
+            type: "POST",
+            contentType: "application/json",
+            dataType: "json",
+            data: JSON.stringify(data),
+            success: function (res) {
+                if (res.code === 200) {
+                    let answer = res.answer;
+                    answer = marked.parse(answer);
+                    addAIMessage(answer);
+                    messageHistory = res.history;
+                } else {
+                    addAIMessage("服务接口调用错误。");
+                }
+            },
+            error: function (e) {
+                addAIMessage("服务接口调用异常。");
+            }
+        });
+    }
+
+    // 发送消息
+    function sendMessage() {
+        let userInput = $('#user-input');
+        let userMessage = userInput.val();
+        if (userMessage.trim() === '') {
+            return;
+        }
+        userInput.val("");
+        addUserMessage(userMessage);
+        chatApi(userMessage);
+    }
+
+    // 清空聊天记录
+    function clearChat() {
+        $("#chat-log").empty();
+        messageHistory = [];
+        addAIMessage("你好，请输入你想问的问题。");
+    }
+
+    // 初始化
+    function init() {
+        addAIMessage("你好，请输入你想问的问题。");
+        var submit = $("#submit");
+        var userInput = $("#user-input");
+        var focus = false;
+        // 监听输入框焦点
+        userInput.focus(function () {
+            focus = true;
+        }).blur(function () {
+            focus = false;
+        });
+        // 回车监听事件
+        document.addEventListener("keydown", function (event) {
+            if (event.keyCode === 13) {
+                console.log(focus);
+                if (focus) {
+                    submit.click();
+                }
+            }
+        });
+    }
+    init();
+</script>
+</body>
+</html>
+
