整理聊天函数

package-lock.json

@@ -454,9 +454,9 @@
       }
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.4.15",
+      "version": "1.4.14",
-      "resolved": "http://192.168.1.87:4873/@jridgewell%2fsourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+      "resolved": "http://192.168.1.87:4873/@jridgewell%2fsourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
+      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.18",
@@ -468,12 +468,6 @@
         "@jridgewell/sourcemap-codec": "1.4.14"
       }
     },
-    "node_modules/@jridgewell/trace-mapping/node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.4.14",
-      "resolved": "http://192.168.1.87:4873/@jridgewell%2fsourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
-      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
-      "peer": true
-    },
     "node_modules/@popperjs/core": {
       "name": "@sxzz/popperjs-es",
       "version": "2.11.7",
@@ -2257,9 +2251,9 @@
       }
     },
     "@jridgewell/sourcemap-codec": {
-      "version": "1.4.15",
+      "version": "1.4.14",
-      "resolved": "http://192.168.1.87:4873/@jridgewell%2fsourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+      "resolved": "http://192.168.1.87:4873/@jridgewell%2fsourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
+      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
     },
     "@jridgewell/trace-mapping": {
       "version": "0.3.18",
@@ -2269,14 +2263,6 @@
       "requires": {
         "@jridgewell/resolve-uri": "3.1.0",
         "@jridgewell/sourcemap-codec": "1.4.14"
-      },
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": {
-          "version": "1.4.14",
-          "resolved": "http://192.168.1.87:4873/@jridgewell%2fsourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
-          "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
-          "peer": true
-        }
       }
     },
     "@popperjs/core": {

src/components/chat.vue

@@ -15,7 +15,7 @@
       </el-row>
     </el-row>
     <thinking-bar v-show="loading"/>
-    <chat-content class="fill"/>
+    <chat-content class="fill" :list="chatHistory"/>
     <el-row class="mar-t8" align="middle">
       <chat-input class="fill mar-r8" v-model="inputText"/>
       <el-button type="primary" @click="handleSend">发送</el-button>
@@ -24,9 +24,11 @@
 </template>
 
 <script>
+import {dayjs} from "element-plus";
 import ChatContent from "../components/chatContent";
 import ChatInput from "../components/chatInput";
 import ThinkingBar from "../components/thinkingBar";
+import {USER_AVATAR} from "../utils/env";
 
 export default {
   name: "chat",
@@ -38,11 +40,26 @@ export default {
     return {
       loading: false,
       inputText: "",
+      chatHistory: []
     }
   },
   methods: {
     handleSend() {
-
+      if (!!this.inputText) {
+        const myMsg = {
+          headImg: USER_AVATAR,
+          name: "我",
+          time: dayjs().format("YYYY-MM-DD HH:mm:ss"),
+          msg: this.inputText,
+          chatType: 0, //信息类型，0文字，1图片
+          uid: "me", //uid
+        }
+        this.chatHistory.push(myMsg)
+        this.loading = true
+        this.settings.model.chat().finally(() => this.loading = false)
+      } else {
+        this.$message.error("请不要发送空消息!")
+      }
     }
   }
 }

src/components/chatContent.vue

@@ -1,21 +1,9 @@
 <template>
   <section class="chatContent" @scroll="onScroll">
     <div class="chat-wrapper" v-for="item in list" :key="item.id">
-      <div class="chat-friend" v-if="item.uid !== 'jcm'">
+      <div class="chat-friend" v-if="item.uid !== 'me'">
         <div class="chat-text" v-if="item.chatType == 0">
-          <el-row :gutter="20">
+          <icon-copy @click="$copy(item.msg, '已复制')"/>
-            <el-col :span="2">
-              <svg t="1679666016648" @click="$copy(item.msg, '已复制')" class="icon" viewBox="0 0 1024 1024"
-                   version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6241" width="22" height="22">
-                <path
-                    d="M661.333333 234.666667A64 64 0 0 1 725.333333 298.666667v597.333333a64 64 0 0 1-64 64h-469.333333A64 64 0 0 1 128 896V298.666667a64 64 0 0 1 64-64z m-21.333333 85.333333H213.333333v554.666667h426.666667v-554.666667z m191.829333-256a64 64 0 0 1 63.744 57.856l0.256 6.144v575.701333a42.666667 42.666667 0 0 1-85.034666 4.992l-0.298667-4.992V149.333333H384a42.666667 42.666667 0 0 1-42.368-37.674666L341.333333 106.666667a42.666667 42.666667 0 0 1 37.674667-42.368L384 64h447.829333z"
-                    fill="#909399" p-id="6242"></path>
-              </svg>
-            </el-col>
-            <el-col :span="21">
-            </el-col>
-          </el-row>
-
           <markdown-it-vue :content="item.msg.trim()"/>
         </div>
         <div class="chat-img" v-if="item.chatType == 1">
@@ -36,18 +24,7 @@
       </div>
       <div class="chat-me" v-else>
         <div class="chat-text" v-if="item.chatType == 0">
-          <span style="font-size:16px">{{ item.msg }}</span>
+          <span v-text="item.msg"/>
-        </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="max-width: 300px; 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>
         </div>
         <div class="info-time">
           <span>{{ item.name }}</span>
@@ -60,12 +37,13 @@
 </template>
 
 <script>
+import IconCopy from "../icons/iconCopy";
+
 export default {
   name: "chatContent",
-  data() {
+  components: {IconCopy},
-    return {
+  props: {
-      list:[]
+    list: {default: () => []}
-    }
   },
   methods: {
     onScroll() {
@@ -90,5 +68,125 @@ export default {
   padding: 16px;
   box-sizing: border-box;
   overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 3px;
+    /* 设置滚动条宽度 */
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgb(66, 70, 86);
+    /* 设置滚动条滑块的背景色 */
+    border-radius: 50%;
+    /* 设置滑块的圆角 */
+  }
+
+  .chat-friend {
+    width: 100%;
+    float: left;
+    margin-bottom: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-start;
+
+    .chat-text {
+      float: left;
+      padding: 15px;
+      max-width: max(650px, 90%);
+      border-radius: 4px;
+      background-color: #fff;
+    }
+
+    .chat-img {
+      img {
+        max-width: 300px;
+        max-height: 200px;
+        border-radius: 4px;
+      }
+    }
+
+    .info-time {
+      margin: 10px 0;
+      color: #fff;
+      font-size: 14px;
+      display: flex;
+      justify-content: flex-start;
+
+      img {
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        vertical-align: middle;
+        margin-right: 10px;
+      }
+
+      span {
+        line-height: 30px;
+      }
+
+      span:last-child {
+        color: rgb(101, 104, 115);
+        margin-left: 10px;
+        vertical-align: middle;
+      }
+    }
+  }
+
+  .chat-me {
+    width: 100%;
+    float: right;
+    margin-bottom: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-end;
+
+    .chat-text {
+      float: right;
+      max-width: 90%;
+      padding: 15px;
+      border-radius: 4px;
+      background-color: #95ec69;
+      color: #000;
+      word-break: break-all;
+    }
+
+    .chat-img {
+      img {
+        max-width: 300px;
+        max-height: 200px;
+        border-radius: 4px;
+      }
+    }
+
+    .info-time {
+      margin: 10px 0;
+      color: #fff;
+      font-size: 14px;
+      display: flex;
+      justify-content: flex-end;
+
+      img {
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        vertical-align: middle;
+        margin-left: 10px;
+      }
+
+      span {
+        line-height: 30px;
+      }
+
+      span:first-child {
+        color: rgb(101, 104, 115);
+        margin-right: 10px;
+        vertical-align: middle;
+      }
+    }
+  }
 }
 </style>

src/components/chatInput.vue

@@ -17,9 +17,6 @@ export default {
       text: ""
     }
   },
-  methods: {},
-  created() {
-  }
 }
 </script>
 
@@ -36,6 +33,10 @@ export default {
       background-color: rgb(66, 70, 86);
       color: white;
       border-color: #999;
+
+      &:focus {
+        outline: none;
+      }
     }
   }
 }

src/icons/iconCopy.vue

@@ -0,0 +1,22 @@
+<template>
+  <section class="iconCopy">
+    <svg t="1679666016648" class="icon" viewBox="0 0 1024 1024"
+         version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6241" width="22" height="22">
+      <path
+          d="M661.333333 234.666667A64 64 0 0 1 725.333333 298.666667v597.333333a64 64 0 0 1-64 64h-469.333333A64 64 0 0 1 128 896V298.666667a64 64 0 0 1 64-64z m-21.333333 85.333333H213.333333v554.666667h426.666667v-554.666667z m191.829333-256a64 64 0 0 1 63.744 57.856l0.256 6.144v575.701333a42.666667 42.666667 0 0 1-85.034666 4.992l-0.298667-4.992V149.333333H384a42.666667 42.666667 0 0 1-42.368-37.674666L341.333333 106.666667a42.666667 42.666667 0 0 1 37.674667-42.368L384 64h447.829333z"
+          fill="#909399" p-id="6242"></path>
+    </svg>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "iconCopy",
+  props: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.iconCopy {
+}
+</style>

src/utils/models.js

@@ -17,6 +17,9 @@ export class ChatGPT extends BaseModel {
       desc: "ChatGPT-3.5所基于的模型"
     });
   }
+  async chat(){
+
+  }
 }
 
 export class ChatGLM extends BaseModel {