feat: 对话增加历史记录

ui/src/components/ai-chat/index.vue

@@ -213,7 +213,7 @@ const props = defineProps({
   } // 历史记录Id
 })
 
-const emit = defineEmits(['refresh'])
+const emit = defineEmits(['refresh', 'scroll'])
 
 const { application } = useStore()
 
@@ -564,6 +564,7 @@ const handleScrollTop = ($event: any) => {
   } else {
     scorll.value = false
   }
+  emit('scroll', $event)
 }
 
 const handleScroll = () => {
@@ -578,6 +579,11 @@ const handleScroll = () => {
   }
 }
 
+function setScrollBottom() {
+  // 将滚动条滚动到最下面
+  scrollDiv.value.setScrollTop(getMaxHeight())
+}
+
 watch(
   chatList,
   () => {
@@ -585,6 +591,10 @@ watch(
   },
   { deep: true, immediate: true }
 )
+
+defineExpose({
+  setScrollBottom
+})
 </script>
 <style lang="scss" scoped>
 .ai-chat {

ui/src/views/chat/pc/index.vue

@@ -50,12 +50,14 @@
         <div class="right-height">
           <!-- 对话 -->
           <AiChat
+            ref="AiChatRef"
             v-model:data="applicationDetail"
             :available="applicationAvailable"
             :appId="applicationDetail?.id"
             :record="currentRecordList"
             :chatId="currentChatId"
             @refresh="refresh"
+            @scroll="handleScroll"
           ></AiChat>
         </div>
       </div>
@@ -63,7 +65,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { reactive, ref, onMounted } from 'vue'
+import { reactive, ref, onMounted, nextTick } from 'vue'
 import { useRoute } from 'vue-router'
 import applicationApi from '@/api/application'
 import useStore from '@/stores'
@@ -80,6 +82,7 @@ const newObj = {
   abstract: '新建对话'
 }
 
+const AiChatRef = ref()
 const loading = ref(false)
 const applicationDetail = ref<any>({})
 const applicationAvailable = ref<boolean>(true)
@@ -95,6 +98,13 @@ const currentRecordList = ref<any>([])
 const currentChatId = ref('new') // 当前历史记录Id 默认为'new'
 const currentChatName = ref('新建对话')
 
+function handleScroll(event: any) {
+  if (event.scrollTop === 0 && paginationConfig.total > currentRecordList.value.length) {
+    paginationConfig.current_page += 1
+    getChatRecord()
+  }
+}
+
 function getAccessToken(token: string) {
   application
     .asyncAppAuthentication(token, loading)
@@ -150,7 +160,13 @@ function getChatRecord() {
       list.map((v: any) => {
         v['write_ed'] = true
       })
-      currentRecordList.value = [...currentRecordList.value, ...list]
+      currentRecordList.value = [...list, ...currentRecordList.value]
+      if (paginationConfig.current_page === 1) {
+        nextTick(() => {
+          // 将滚动条滚动到最下面
+          AiChatRef.value.setScrollBottom()
+        })
+      }
     })
 }
 const clickListHandle = (item: any) => {
@@ -210,6 +226,7 @@ onMounted(() => {
     }
     .right-height {
       height: calc(100vh - var(--app-header-height) * 2 - 24px);
+      overflow: scroll;
     }
   }