提交

src/api/chatGpt.js

@@ -1,6 +1,7 @@
 import ajax from '@/utils/request.js';
 export function ChartGpt(data) {
   return ajax({
+    noLoad: true,
     url: 'completions',
     method: 'POST',
     urlType: 'chat',

src/config/index.js

@@ -3,12 +3,12 @@ const base = {
 	// slikRoad: "http://172.17.17.201:9000/operate/",
 	slikRoad: "https://topic.smcic.net/operate/",
     authorization: "https://bytedance.sxtvs.net/",
-    chat:"http://8.210.89.70/",
+    chat:"https://gpt.smcic.net/",
     default: ""
 }
 
 if(process.env.VUE_APP_ENV==="Dev"){
-    base.chat= "http://192.168.255.30"
+    base.chat= "http://172.17.17.206/"
 }
 
 

src/view/chatGptChat/index.vue

@@ -1,12 +1,19 @@
 <template>
-  <div class="chatGptChat">
-    <div class="chat">
-      <van-image width="35px" height="35px" fit="contain" :src="robot" />
-      <div class="cahtText">你好！</div>
+  <div class="chatGptChat" ref="chatEle">
+    <div v-for="(item, index) in chat" :key="index">
+      <div v-if="item.text && item.type === 'robot'" class="chat">
+        <van-image width="35px" height="35px" fit="contain" :src="robot" />
+        <div class="cahtText" v-html="item.text"></div>
+      </div>
+      <div v-if="item.text && item.type === 'user'" class="chat chatRight">
+        <div class="cahtText" v-text="item.text"></div>
+        <van-image width="35px" height="35px" fit="contain" :src="user" />
+      </div>
     </div>
-    <div class="chat chatRight">
-      <div class="cahtText">你好！</div>
-      <van-image width="35px" height="35px" fit="contain" :src="user" />
+    <div class="loading" v-if="load">
+      <div class="loadSun"></div>
+      <div class="loadSun" style="animation-delay:0.2s;"></div>
+      <div class="loadSun" style="animation-delay:0.4s;"></div>
     </div>
     <van-field
       v-model="inputText"
@@ -17,7 +24,7 @@
       type="textarea"
     >
       <template #button>
-        <van-button size="small" type="success" @click="saveText">
+        <van-button :loading="load"  size="small" type="success" @click="saveText">
           发送
         </van-button>
       </template>
@@ -27,7 +34,7 @@
 <script setup>
 import robot from '../../assets/img/chat/robot_2.png';
 import user from '../../assets/img/chat/user.png';
-import { ref } from 'vue';
+import { ref, nextTick } from 'vue';
 
 import { ChartGpt } from '@/api/chatGpt';
 // import { onMounted, reactive } from "vue";
@@ -38,15 +45,49 @@ import { ChartGpt } from '@/api/chatGpt';
  * window.$originData.urlParames url参数
  */
 console.log(window.$originData);
+const chat = ref([]);
+const load = ref(false);
+const chatEle = ref(null);
 const inputText = ref('');
 function saveText() {
   if (!inputText.value) return;
-  console.log(inputText.value);
-  ChartGpt({
-    prompt: inputText.value,
-  }).then(r => {
-    console.log(r);
+  chat.value.push({
+    text: inputText.value,
+    type: 'user',
+  });
+  nextTick(() => {
+    // 滚动到最底层
+    if (chatEle.value.scrollHeight > chatEle.value.clientHeight) {
+      chatEle.value.scrollTop = chatEle.value.scrollHeight;
+    }
+    load.value = true;
   });
+  inputText.value = '';
+  let prompt = [];
+  const startIndex = chat.value.length > 10 ? chat.value.length - 10 : 0;
+  for (let i = startIndex; i < chat.value.length; i++) {
+    prompt.push(chat.value[i]);
+  }
+  ChartGpt({
+    prompt,
+  })
+    .then(r => {
+      console.log(r);
+      load.value = false;
+      chat.value.push({
+        text: (r.result || '').replace(/\n/g, '<br />'),
+        type: 'robot',
+      });
+      nextTick(() => {
+        // 滚动到最底层
+        if (chatEle.value.scrollHeight > chatEle.value.clientHeight) {
+          chatEle.value.scrollTop = chatEle.value.scrollHeight;
+        }
+      });
+    })
+    .catch(() => {
+      load.value = false;
+    });
 }
 </script>
 <style lang="scss">
@@ -59,9 +100,10 @@ function saveText() {
   position: relative;
   padding-bottom: 55px;
   background-color: #dddddd;
+  overflow-y: auto;
   .van-field {
     background-color: #eee;
-    position: absolute;
+    position: fixed;
     bottom: 0;
     left: 0;
     .van-field__control {
@@ -71,13 +113,14 @@ function saveText() {
   }
 
   .chat {
-    padding: 0.2em 0;
+    padding: 0.5em 0;
     width: 100%;
     .cahtText {
       text-align: left;
+      line-height: 1.5em;
       border-radius: 5px;
       background-color: #ffffff;
-      padding: 0.5em 0.2em;
+      padding: 0.5em;
       display: inline-block;
       max-width: calc(100% - 40px);
       vertical-align: middle;
@@ -94,5 +137,35 @@ function saveText() {
   .chatRight {
     text-align: right;
   }
+
+  .loading {
+    border-radius: 2em;
+    background-color: #aaa;
+    width: 3em;
+    height: 1em;
+    line-height: 1em;
+    text-align: center;
+    margin: 1em auto 0 auto;
+
+    .loadSun {
+      background-color: #ffffff;
+      border-radius: 50%;
+      width: 0.6em;
+      height: 0.6em;
+      display: inline-block;
+      animation: 0.5s load infinite alternate;
+      &:not(:last-child) {
+        margin-right: 3px;
+      }
+    }
+  }
+}
+@keyframes load {
+  from {
+    background-color: #aaa;
+  }
+  to {
+    background-color: #ffffff;
+  }
 }
 </style>