优化对话自动滚动到底部

src/components/chat.vue

@@ -9,7 +9,7 @@
       </el-row>
     </el-row>
     <thinking-bar v-show="loading"/>
-    <chat-content class="fill" :list="chatHistory"/>
+    <chat-content class="fill" :list="chatHistory" ref="chatContent"/>
     <el-row class="mar-t8" align="middle">
       <chat-input class="fill mar-r8" v-model="inputText" @enter="handleSend"/>
       <el-button type="primary" @click="handleSend">发送</el-button>
@@ -65,16 +65,20 @@ export default {
         }
         this.chatHistory.push(aiMsg)
         if (this.config.stream) {
-          ai.chatStream(this.chatHistory).then(reader => ai.streamOutput(reader, this.chatHistory.at(-1))).finally(() => this.loading = false)
+          ai.chatStream(this.chatHistory).then(reader => ai.streamOutput(reader, this.chatHistory.at(-1))).finally(this.handleAfterSend)
         } else {
           ai.chat(this.chatHistory).then(reply => {
             const decodeArr = reply.split("")
             decodeArr.forEach(e => this.chatHistory.at(-1).msg += e)
-          }).finally(() => this.loading = false)
+          }).finally(this.handleAfterSend)
         }
       } else {
         this.$message.error("请不要发送空消息!")
       }
+    },
+    handleAfterSend() {
+      this.loading = false
+      this.$refs.chatContent.scrollBottom()
     }
   }
 }

src/components/chatContent.vue

@@ -1,12 +1,5 @@
 <template>
   <section class="chatContent" @scroll="onScroll">
-    <div class="chat-wrapper">
-      <div class="chat-friend">
-        <div class="chat-text">
-          <v-md-preview :text="demo"/>
-        </div>
-      </div>
-    </div>
     <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">
@@ -74,6 +67,9 @@ export default {
       this.isAutoScroll = scrollTop + offsetHeight === scrollHeight;
       scrollDom.scrollTop = scrollHeight - scrollDom.clientHeight
     },
+    scrollBottom() {
+      this.$el.scrollTop = this.$el.scrollHeight - this.$el.clientHeight
+    },
     copy(msg) {
       if (copyToClipboard(msg)) {
         this.$message.success("已复制")