[feat][ai问答][ai聊天界面]

src/views/xjc-integratedmachine/common/ai/chat.vue

@@ -19,13 +19,11 @@
                 </div>
                 <div class="content-box">
                     <div v-html="streamHtmlData"></div>
-                    <!--                <span>{{streamData}}</span>-->
                     <span class="loading-dots"></span>
                     <span class="dot"></span>
                     <span class="dot"></span>
                 </div>
                 <el-button @click="stopMessage">停止回答</el-button>
-
             </div>
             <div class="input-container">
                 <el-input
@@ -33,9 +31,7 @@
                         placeholder="请输入消息"
                         @keyup.enter="sendMessage"
                 ></el-input>
-                <el-button @click="sendMessage" :disabled="isSending" type="primary"
-                >发送</el-button
-                >
+                <el-button @click="sendMessage" :disabled="isSending" type="primary">发送</el-button>
             </div>
         </div>
         <div class="control-bar">
@@ -63,13 +59,18 @@
     import { marked } from 'marked'
 
     // 聊天记录
-    let chatRecordList = ref()
-    //
-    const streamData = ref(''); // 存储流式数据
-    let streamHtmlData = ref(''); // 存储流式数据
-    const isLoading = ref(false); // 加载状态
-    let reader = null; // 读取器实例
-    let controller = null; // AbortController用于中止请求
+    let chatRecordList = ref([])
+    // md流式数据
+    const streamData = ref('');
+    // html流式数据
+    let streamHtmlData = ref('');
+    // 流式加载状态
+    const isLoading = ref(false);
+    // 读取器实例
+    let reader = null;
+    // AbortController用于中止请求
+    let controller = null;
+    // 输入的问题
     const inputMessage = ref('')
 
     // 查看所有聊天记录
@@ -81,7 +82,22 @@
         })
     }
 
-    const sendMessage = async() => {
+    const sendMessage = () => {
+        if (inputMessage.value.trim()) {
+            sendRequest(inputMessage.value.trim())
+            inputMessage.value = ''
+        }
+    }
+
+    const sendRequest = async(message) => {
+        // 用户信息
+        const userMessage = {
+            isUser: true,
+            content: message,
+            isTyping: false
+        }
+        // 消息加入聊天记录
+        // chatRecordList.value.push(userMessage)
         try{
             isLoading.value = true;
             streamData.value = ''; // 清空之前的数据
@@ -91,7 +107,7 @@
 
             // 请求体
             let form = {
-                "content": "我的学习压力大，每天睡不好怎么办？"
+                "content": message? message: "你是谁？"
             }
             // 发送fetch请求
             const response = await fetch('/dev-api/ai/chat/stream', {
@@ -127,6 +143,7 @@
         } finally {
             streamHtmlData.value = marked(streamData.value)
             isLoading.value = false;
+            console.log("==============");
         }
     }
 
@@ -173,7 +190,8 @@
     }
 
     .main-content {
-        width:60vw;
+        width: 70vw;
+        height: 100vh;
         flex: 1;
         padding: 20px;
         overflow-y: auto;
@@ -181,7 +199,8 @@
     .chat-container {
         display: flex;
         flex-direction: column;
-        height: 100%;
+        height: 90vh;
+        /*overflow-y: auto;*/
     }
 
     .logo-section {
@@ -192,7 +211,7 @@
 
     /*控制区*/
     .control-bar{
-        width: 20vw;
+        width: 10vw;
         background-color: #f4f4f9;
         padding: 20px;
 /*        display: flex;
@@ -213,14 +232,36 @@
 
     }
 
+    /*聊天列表*/
     .message-list{
+        flex: 1;
+        overflow-y: auto;
+        padding: 10px;
+        border: 1px solid #e0e0e0;
+        border-radius: 4px;
+        background-color: #fff;
+        margin-bottom: 10px;
+        display: flex;
+        flex-direction: column;
+    }
 
+    .user-message {
+        max-width: 70%;
+        background-color: #e1f5fe;
+        align-self: flex-end;
+        flex-direction: row-reverse;
+    }
+
+    .bot-message {
+        max-width: 100%;
+        background-color: #f1f8e9;
+        align-self: flex-start;
     }
 
     /* 内容区 */
     .content-box {
         /*max-height: 300px;*/
-        width: 50vw;
+        width: 60vw;
         overflow-y: auto;
         border: 1px solid #eee;
         padding: 10px;
@@ -261,9 +302,7 @@
         }
     }
 
-
     /*输入框*/
-
     .input-container {
         display: flex;
     }