调整内容显示

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@kangc/v-md-editor": "^2.3.15",
     "axios": "^1.4.0",
     "element-plus": "^2.3.4",
     "sass": "^1.62.1",

src/components/chat.vue

@@ -46,8 +46,9 @@ export default {
   methods: {
     handleSend() {
       if (!!this.inputText) {
+        const ai = this.settings.model
         const myMsg = {
-          headImg: USER_AVATAR,
+          avatar: USER_AVATAR,
           name: "我",
           time: dayjs().format("YYYY-MM-DD HH:mm:ss"),
           msg: this.inputText,
@@ -56,11 +57,67 @@ export default {
         }
         this.chatHistory.push(myMsg)
         this.loading = true
-        this.settings.model.chat().finally(() => this.loading = false)
+        const aiMsg = {
+          avatar: ai.avatar,
+          name: ai.name,
+          time: dayjs().format("YYYY-MM-DD HH:mm:ss"),
+          msg: '',
+          chatType: 0, //信息类型，0文字，1图片
+          uid: "ai", //uid
+        }
+        this.chatHistory.push(aiMsg)
+        ai.chat(this.chatHistory).finally(() => this.loading = false)
       } else {
         this.$message.error("请不要发送空消息!")
       }
-    }
+    },
+    readStream(reader, _this, currentResLocation, type) {
+      return reader.read().then(({done, value}) => {
+        if (done) {
+          return;
+        }
+        if (!_this.chatList[currentResLocation].reminder) {
+          _this.chatList[currentResLocation].reminder = "";
+        }
+        let decoded = new TextDecoder().decode(value);
+        decoded = _this.chatList[currentResLocation].reminder + decoded;
+        let decodedArray = decoded.split("data: ");
+        let longstr = "";
+        decodedArray.forEach(decoded => {
+          try {
+            decoded = decoded.trim();
+            if (longstr == "") {
+              JSON.parse(decoded);
+            } else {
+              decoded = longstr + decoded;
+              longstr = "";
+              JSON.parse(decoded);
+            }
+          } catch (e) {
+            longstr = decoded;
+            decoded = "";
+          }
+          if (decoded !== "") {
+            if (decoded.trim() === "[DONE]") {
+              return;
+            } else {
+              const choices = JSON.parse(decoded).choices
+              if (choices && choices.length > 0) {
+                if (type === "chat") {
+                  const response = choices[0].delta.content ? choices[0].delta.content : "";
+                  _this.chatList[currentResLocation].msg = _this.chatList[currentResLocation].msg + response
+                  _this.scrollBottom();
+                } else {
+                  const response = choices[0].text;
+                  _this.chatList[currentResLocation].msg = _this.chatList[currentResLocation].msg + response
+                }
+              }
+            }
+          }
+        })
+        return this.readStream(reader, _this, currentResLocation, type);
+      });
+    },
   }
 }
 </script>

src/components/chatContent.vue

@@ -3,21 +3,15 @@
     <div class="chat-wrapper" v-for="item in list" :key="item.id">
       <div class="chat-friend" v-if="item.uid !== 'me'">
         <div class="chat-text" v-if="item.chatType == 0">
-          <icon-copy @click="$copy(item.msg, '已复制')"/>
-          <markdown-it-vue :content="item.msg.trim()"/>
+          <icon-copy @click="copy(item.msg, '已复制')"/>
+          <v-md-preview-html :html="item.msg.trim()" preview-class="vuepress-markdown-body"/>
         </div>
         <div class="chat-img" v-if="item.chatType == 1">
           <img :src="item.msg" alt="表情" v-if="item.extend.imgType == 1" style="width: 100px; height: 100px"/>
-          <el-image style="border-radius: 10px" :src="item.msg" :preview-src-list="srcImgList" v-else>
-          </el-image>
-        </div>
-        <div class="chat-img" v-if="item.chatType == 2">
-          <div class="word-file">
-            <FileCard :fileType="item.extend.fileType" :file="item.msg"></FileCard>
-          </div>
+          <el-image style="border-radius: 10px" :src="item.msg" :preview-src-list="srcImgList" v-else/>
         </div>
         <div class="info-time">
-          <img :src="item.headImg" alt=""/>
+          <img :src="item.avatar" alt=""/>
           <span>{{ item.name }}</span>
           <span>{{ item.time }}</span>
         </div>
@@ -29,7 +23,7 @@
         <div class="info-time">
           <span>{{ item.name }}</span>
           <span>{{ item.time }}</span>
-          <img :src="item.headImg" alt=""/>
+          <img :src="item.avatar" alt=""/>
         </div>
       </div>
     </div>
@@ -37,6 +31,7 @@
 </template>
 
 <script>
+import {copyToClipboard} from "src/utils/tools";
 import IconCopy from "../icons/iconCopy";
 
 export default {
@@ -54,6 +49,11 @@ export default {
       // 当滚动到底部，设置 isAutoScroll 为 true
       this.isAutoScroll = scrollTop + offsetHeight === scrollHeight;
     },
+    copy(msg) {
+      if (copyToClipboard(msg)) {
+        this.$message.success("已复制")
+      }
+    }
   },
   created() {
 

src/main.js

@@ -1,3 +1,6 @@
+import VMdPreviewHtml from '@kangc/v-md-editor/lib/preview-html';
+import '@kangc/v-md-editor/lib/style/preview-html.css';
+import '@kangc/v-md-editor/lib/theme/style/vuepress';
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import {createApp} from 'vue'
@@ -7,4 +10,5 @@ import axios from "./utils/axios";
 const app = createApp(App)
 app.config.globalProperties.$http = axios
 app.use(ElementPlus)
+app.use(VMdPreviewHtml);
 app.mount('#app')

src/utils/axios.js

@@ -1,6 +1,11 @@
 import axios from "axios";
 
 const ins = axios.create({
-
+  headers: {
+    'Access-Control-Allow-Origin': '*',
+    'Access-Control-Allow-Methods': 'GET, POST',
+    'Access-Control-Allow-Headers': 'Content-Type, Access-Control-Allow-Headers, Authorization'
+  },
+  responseType: 'json'
 })
 export default ins

src/utils/models.js

@@ -1,3 +1,4 @@
+import axios from "./axios";
 import {AI_AVATAR} from "./env";
 
 class BaseModel {
@@ -17,8 +18,9 @@ export class ChatGPT extends BaseModel {
       desc: "ChatGPT-3.5所基于的模型"
     });
   }
-  async chat(){
 
+  async chat(history, callback) {
+    return await axios.post("")
   }
 }