优化AI聊天组件样式与交互逻辑

src/views/components/aiChat/aiArgenChat.vue

@@ -10,14 +10,14 @@
                                 <p v-for="(name, index) in knowledge_search_list" style="margin-bottom:10px;"
                                     :key="index">
                                     <el-tag size="mini">{{ name
-                                        }}</el-tag>
+                                    }}</el-tag>
                                 </p>
                             </div>
                             <el-button type="text" size="medium" slot="reference">{{ knowledge_search_list.length
-                                }}个</el-button>
+                            }}个</el-button>
                         </el-popover>
                     </p>
-                    <el-button type="text" @click="clearContext" class="clearContext">清除上下文</el-button>
+                    <el-button type="text" @click="clearContextComfion" class="clearContext">清除上下文</el-button>
                 </div>
             </div>
         </div>
@@ -25,7 +25,7 @@
             <!-- v-loadingChat="loading" -->
             <div ref="ai-box" v-debounce="paperScroll" class="msg-box columnFlex flex1">
                 <div>
-                    <div v-if="!isHistory" class="rowFlex rowCenter linkStyle">
+                    <div class="rowFlex rowCenter linkStyle">
                         <div class="rowFlex columnCenter">
                             <div class="line"></div>
                             <svg-icon icon-class="start" style="margin-left:5px;" />
@@ -91,7 +91,7 @@
                                             </div>
                                         </div>
                                         <!-- 复制客户的消息 -->
-                                        <div class="likeBtn rowFlex " v-if="i.send_type == 2">
+                                        <div class=" rowFlex likeBtn " v-if="i.send_type == 2">
                                             <span v-if="!i.loading"
                                                 style="color:#87909c;font-size:12px;margin-right:5px;">{{
                                                     i.response_time }} ms</span>
@@ -162,8 +162,11 @@ export default {
             recordMessage: [],
             aiText: '',
             aiAnswer: {},
-            isHistory: false,
             knowledge_search_list: [],
+            page_info: {
+                page: 1,
+                page_size: 20
+            },
             answerItem: {
                 session_id: '',
                 create_time: '',
@@ -232,7 +235,7 @@ export default {
                 this.recordMessage.unshift(welcomeItem)
             }
         },
-        async clearContext() {
+        async clearContextComfion() {
             this.$confirm('确定清除上下文吗？', '提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
@@ -302,16 +305,14 @@ export default {
             }
         },
         async Aihistory() {
-            this.recordMessage = []
             const data = {
                 cser_id: this.userInfo.cser_id,
-                page: 1,
-                page_size: 20
+                ...this.page_info
             }
             const res = await corp_beta_question_log_index(data)
             if (res.status_code === 1 && res?.data?.data?.length > 0) {
+                this.page_info.page++
                 res.data.data.forEach(item => {
-                    console.log(item, 'item')
                     item.to = {
                         cser: {
                             avatar: this.chatUserInfo.avatar,
@@ -328,9 +329,12 @@ export default {
                     item.loading = false
                     item.is_retry = false
                 })
-                this.isHistory = true
                 this.recordMessage = res.data.data.reverse().concat(this.recordMessage)
-                this.scrollBottm()
+                if (this.page_info.page == 1) {
+                    this.scrollBottm()
+                }
+            } else {
+                this.$message.warning('没有更多数据了')
             }
         },
         // 复制消息
@@ -432,16 +436,19 @@ export default {
             })
         },
         paperScroll() {
-            // 监听滚动事件
-            const el = this.$refs['ai-box']
-            if (el.scrollTop <= 5 && this.isMoreRecord) {
-                this.messageList()
-            } else if (!this.isMoreRecord) {
-                // this.$message({
-                //   type: 'error',
-                //   message: '没有更多数据了'
-                // })
+            if (this.userInfo.userid) {
+                // 监听滚动事件
+                const el = this.$refs['ai-box']
+                if (el.scrollTop <= 5 && this.isMoreRecord) {
+                    this.messageList()
+                } else if (!this.isMoreRecord) {
+                    // this.$message({
+                    //   type: 'error',
+                    //   message: '没有更多数据了'
+                    // })
+                }
             }
+
         }
     }
 }
@@ -531,11 +538,9 @@ export default {
             .chatItemBox {
                 border-radius: 10px;
                 position: relative;
-                width: 100%;
             }
 
             .user-msg {
-                width: 100%;
                 word-break: break-all;
                 font-size: 14px;
                 line-height: 20px;
@@ -677,9 +682,9 @@ export default {
     .likeBtn {
         position: absolute;
         bottom: 5px;
+        right: 10px;
         display: flex;
         flex-direction: row-reverse;
-        width: 100%;
     }
 }