Merge branch 'master' of https://gitlab.gsstcloud.com/poc/poc-fe into shirlyn

src/app.vue

 <script setup lang="ts">
-import { zhCN, dateZhCN } from 'naive-ui'
+import { zhCN, dateZhCN, zhTW, dateZhTW, enUS, dateEnUS } from 'naive-ui'
 import { provide, ref } from 'vue'
 import mitt from 'mitt'
 import { themeOverrides } from '@/config/theme-config'
@@ -7,16 +7,20 @@ import { useResizeObserver } from '@vueuse/core'
 import { useDesignSettingStore } from '@/store/modules/design-setting'
 import { useUserStore } from './store/modules/user'
 import MessageTipModal from '@/components/message-tip-modal/message-tip-modal.vue'
+import { useSystemLanguageStore } from '@/store/modules/system-language'
 
 const designSettingStore = useDesignSettingStore()
 const userStore = useUserStore()
+const systemLanguageStore = useSystemLanguageStore()
 
 const emitter = mitt<MittEvents>()
 
 provide('emitter', emitter)
 
-const currentLocale = ref(zhCN)
-const currentDateLocale = ref(dateZhCN)
+// const currentLocale = ref(zhCN)
+const currentLocale = ref(localeParser())
+// const currentDateLocale = ref(dateZhCN)
+const currentDateLocale = ref(dateLocaleParser())
 
 const rootContainer = ref<HTMLDivElement | null>(null)
 
@@ -40,11 +44,35 @@ useResizeObserver(rootContainer, (entries) => {
     designSettingStore.toggleSidebarDisplayStatus('expand')
   }
 })
+
+/* created */
 ;(function () {
   if (userStore.isLogin) {
     userStore.fetchUpdateUserInfo()
   }
 })()
+
+function localeParser() {
+  switch (systemLanguageStore.currentLanguageInfo.key) {
+    case 'zh-CN':
+      return zhCN
+    case 'zh-HK':
+      return zhTW
+    case 'en':
+      return enUS
+  }
+}
+
+function dateLocaleParser() {
+  switch (systemLanguageStore.currentLanguageInfo.key) {
+    case 'zh-CN':
+      return dateZhCN
+    case 'zh-HK':
+      return dateZhTW
+    case 'en':
+      return dateEnUS
+  }
+}
 </script>
 
 <template>

src/views/personal-space/personal-app-setting/components/agent-associated-knowledge.vue

@@ -5,10 +5,11 @@ import { Plus, RightOne } from '@icon-park/vue-next'
 import { fetchGetKnowledgeListByKdIds } from '@/apis/knowledge'
 import AssociatedKnowledgeModal from './associated-knowledge-modal.vue'
 import { KnowledgeItem } from '../../personal-knowledge/types'
+import { PersonalAppConfigState } from '@/store/types/personal-app-config'
 
 const { t } = useI18n()
 
-const knowledgeConfig = defineModel<{ knowledgeIds: number[] }>('knowledgeConfig', { required: true })
+const knowledgeConfig = defineModel<PersonalAppConfigState['knowledgeConfig']>('knowledgeConfig', { required: true })
 
 const isShowAssociatedKnowledgeModel = ref(false)
 const knowledgeConfigExpandedNames = ref<string[]>([])
@@ -19,16 +20,18 @@ watch(
   () => knowledgeConfig.value.knowledgeIds,
   async (newKdIds) => {
     if (newKdIds.length > 0) {
-      knowledgeConfigExpandedNames.value = ['knowledge']
       await handleGetKnowledgeListByIds()
 
-      knowledgeConfig.value.knowledgeIds = []
-      selectKnowledgeList.value.forEach((knowledgeItem) => {
-        knowledgeConfig.value.knowledgeIds.push(knowledgeItem.id)
-      })
+      if (selectKnowledgeList.value.length !== newKdIds.length) {
+        knowledgeConfig.value.knowledgeIds = []
+        selectKnowledgeList.value.forEach((knowledgeItem) => {
+          knowledgeConfig.value.knowledgeIds.push(knowledgeItem.id)
+        })
+      }
+      knowledgeConfig.value.knowledgeIds.length && (knowledgeConfigExpandedNames.value = ['knowledge'])
     }
   },
-  { once: true },
+  { once: true, immediate: true },
 )
 
 const isHoverKnowledgeItem = computed(() => (kdId: number) => {

src/views/personal-space/personal-app-setting/components/agent-memory-setting.vue

 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { Plus, Help, MoreOne, Edit, Copy, ReduceOne, RightOne } from '@icon-park/vue-next'
 import MemoryVariableModal, { MemoryVariableForm } from './memory-variable-modal.vue'
@@ -16,20 +16,10 @@ const isOpenLongMemory = ref(false)
 const isShowMemoryVariableModal = ref(false)
 const memoryVariableModal = ref<InstanceType<typeof MemoryVariableModal> | null>(null)
 
-watch(
-  () => isLongMemory.value,
-  (newValue) => {
-    isOpenLongMemory.value = newValue === 'Y'
-  },
-  { once: true },
-)
-
-watch(
-  () => variableStructure.value,
-  (newValue) => {
-    newValue?.length && (memoryExpandedNames.value = ['memoryVariable'])
-  },
-)
+onMounted(() => {
+  isOpenLongMemory.value = isLongMemory.value === 'Y'
+  variableStructure.value?.length && (memoryExpandedNames.value = ['memoryVariable'])
+})
 
 function handleUpdateMemoryExpandedNames(expandedNames: string[]) {
   memoryExpandedNames.value = expandedNames

src/views/personal-space/personal-app-setting/components/agent-model-setting.vue

 <script setup lang="ts">
-import { computed, h, onMounted, reactive, VNodeChild } from 'vue'
+import { computed, h, onMounted, reactive, ref, VNodeChild } from 'vue'
 import { SelectOption } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { Help, Down } from '@icon-park/vue-next'
 import { PersonalAppConfigState } from '@/store/types/personal-app-config'
 import { DiversityModeItem, diversityModeList } from '@/data/agent-setting-data'
-import { fetchGetLargeModelList } from '@/apis/agent-application'
+import { fetchGetLargeModelInfo, fetchGetLargeModelList } from '@/apis/agent-application'
 
 const { t } = useI18n()
 
 let modalListOptions = reactive<SelectOption[]>([])
 let modalListRenderLabel: (option: SelectOption) => VNodeChild
 
-const personalAppConfig = defineModel<PersonalAppConfigState>('personalAppConfig', { required: true })
-const currentDiversityMode = defineModel<string>('currentDiversityMode', { required: true })
-const currentLargeModelIcon = defineModel<string>('currentLargeModelIcon', { required: true })
+const commModelConfig = defineModel<PersonalAppConfigState['commModelConfig']>('commModelConfig', { required: true })
+
+const currentLargeModelIcon = ref('')
+const currentDiversityMode = ref('balance')
 
 const isDisabledCommModelConfig = computed(() => {
   return currentDiversityMode.value !== 'custom'
@@ -22,6 +23,23 @@ const isDisabledCommModelConfig = computed(() => {
 
 onMounted(() => {
   handleGetLargeModelList()
+  handleGetLargeModelInfo()
+
+  const { temperature, topP } = commModelConfig.value
+
+  switch (temperature) {
+    case 0.1:
+      currentDiversityMode.value = topP === 0.1 ? 'accurate' : 'custom'
+      break
+    case 0.5:
+      currentDiversityMode.value = topP === 0.7 ? 'balance' : 'custom'
+      break
+    case 0.95:
+      currentDiversityMode.value = topP === 0.7 ? 'creative' : 'custom'
+      break
+    default:
+      currentDiversityMode.value = 'custom'
+  }
 })
 
 // 获取大模型列表
@@ -64,6 +82,15 @@ async function handleGetLargeModelList() {
   }
 }
 
+// 获取当前大模型信息
+async function handleGetLargeModelInfo() {
+  const res = await fetchGetLargeModelInfo<{ icon: string }>(commModelConfig.value.largeModel)
+
+  if (res.code === 0) {
+    currentLargeModelIcon.value = res.data.icon
+  }
+}
+
 // 更换大模型
 function handleUpdateLargeModel(_value: string, option: SelectOption) {
   currentLargeModelIcon.value = option.icon as string
@@ -72,9 +99,9 @@ function handleUpdateLargeModel(_value: string, option: SelectOption) {
 function handleDiversityModeChange(diversityModeItem: DiversityModeItem) {
   const { value, topP, temperature, communicationTurn } = diversityModeItem
   currentDiversityMode.value = value
-  personalAppConfig.value.commModelConfig.topP = topP
-  personalAppConfig.value.commModelConfig.temperature = temperature
-  personalAppConfig.value.commModelConfig.communicationTurn = communicationTurn
+  commModelConfig.value.topP = topP
+  commModelConfig.value.temperature = temperature
+  commModelConfig.value.communicationTurn = communicationTurn
 }
 </script>
 
@@ -87,7 +114,7 @@ function handleDiversityModeChange(diversityModeItem: DiversityModeItem) {
         >
           <img :src="currentLargeModelIcon || '@/assets/images/lingjing-icon.png'" class="mr-1 h-4 w-4" />
           <span class="line-clamp-1 w-[100px] text-xs text-[#5c5f66]">
-            {{ personalAppConfig.commModelConfig.largeModel }}
+            {{ commModelConfig.largeModel }}
           </span>
           <Down theme="outline" size="16" fill="#333" class="ml-1.5 text-base outline-none" />
         </div>
@@ -103,7 +130,7 @@ function handleDiversityModeChange(diversityModeItem: DiversityModeItem) {
         </span>
       </div>
       <NSelect
-        v-model:value="personalAppConfig.commModelConfig.largeModel"
+        v-model:value="commModelConfig.largeModel"
         class="model-select"
         :options="modalListOptions"
         :render-label="modalListRenderLabel"
@@ -157,18 +184,18 @@ function handleDiversityModeChange(diversityModeItem: DiversityModeItem) {
 
           <div class="mx-5 flex flex-1">
             <NSlider
-              v-model:value="personalAppConfig.commModelConfig.topP"
+              v-model:value="commModelConfig.topP"
               :default-value="0"
               :step="0.01"
               :min="0"
               :max="1"
               :disabled="isDisabledCommModelConfig"
             />
-            <span class="ml-4 w-8">{{ personalAppConfig.commModelConfig.topP }}</span>
+            <span class="ml-4 w-8">{{ commModelConfig.topP }}</span>
           </div>
 
           <NInputNumber
-            v-model:value="personalAppConfig.commModelConfig.topP"
+            v-model:value="commModelConfig.topP"
             placeholder=""
             :step="0.01"
             :min="0"
@@ -206,18 +233,18 @@ function handleDiversityModeChange(diversityModeItem: DiversityModeItem) {
 
           <div class="mx-5 flex flex-1">
             <NSlider
-              v-model:value="personalAppConfig.commModelConfig.temperature"
+              v-model:value="commModelConfig.temperature"
               :default-value="0"
               :step="0.01"
               :min="0.01"
               :max="1"
               :disabled="isDisabledCommModelConfig"
             />
-            <span class="ml-4 w-[32px]">{{ personalAppConfig.commModelConfig.temperature }}</span>
+            <span class="ml-4 w-[32px]">{{ commModelConfig.temperature }}</span>
           </div>
 
           <NInputNumber
-            v-model:value="personalAppConfig.commModelConfig.temperature"
+            v-model:value="commModelConfig.temperature"
             placeholder=""
             :step="0.01"
             :min="0"
@@ -255,16 +282,16 @@ function handleDiversityModeChange(diversityModeItem: DiversityModeItem) {
 
           <div class="mx-5 flex flex-1">
             <NSlider
-              v-model:value="personalAppConfig.commModelConfig.communicationTurn"
+              v-model:value="commModelConfig.communicationTurn"
               :default-value="3"
               :step="1"
               :min="0"
               :max="100"
             />
-            <span class="ml-4 w-8">{{ personalAppConfig.commModelConfig.communicationTurn }}</span>
+            <span class="ml-4 w-8">{{ commModelConfig.communicationTurn }}</span>
           </div>
           <NInputNumber
-            v-model:value="personalAppConfig.commModelConfig.communicationTurn"
+            v-model:value="commModelConfig.communicationTurn"
             :step="1"
             :min="0"
             :max="100"

src/views/personal-space/personal-app-setting/components/app-preview.vue

 <script setup lang="ts">
-import { ref } from 'vue'
+import { inject, onMounted, onUnmounted, ref } from 'vue'
 import Preamble from './preamble.vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
+import { Emitter } from 'mitt'
 import MessageList from './message-list.vue'
 import FooterInput from './footer-input.vue'
 import { fetchCreateContinueQuestions } from '@/apis/agent-application'
@@ -16,6 +17,8 @@ const router = useRouter()
 
 const personalAppConfigStore = usePersonalAppConfigStore()
 
+const emitter = inject<Emitter<MittEvents>>('emitter')
+
 const messageListRef = ref<InstanceType<typeof MessageList> | null>(null)
 const footerInputRef = ref<InstanceType<typeof FooterInput> | null>(null)
 
@@ -27,6 +30,17 @@ const continuousQuestionList = ref<string[]>([])
 const isShowMemoryPreviewModal = ref(false)
 const selectedMemoryTabName = ref('memoryVariable')
 
+onMounted(() => {
+  emitter?.on('resetAgent', () => {
+    footerInputRef.value?.blockMessageResponse()
+    messageList.value = []
+  })
+})
+
+onUnmounted(() => {
+  emitter?.off('resetAgent')
+})
+
 function handleAddMessageItem(messageItem: ConversationMessageItem) {
   messageList.value.push(messageItem)
 }

src/views/personal-space/personal-app-setting/components/message-item.vue

@@ -23,7 +23,9 @@ const useAvatar = computed(() => {
   return userStore.userInfo.avatarUrl || 'https://gsst-poe-sit.gz.bcebos.com/data/20240910/1725952917468.png'
 })
 
-const assistantAvatar = personalAppConfigStore.baseInfo.agentAvatar
+const assistantAvatar = computed(() => {
+  return personalAppConfigStore.baseInfo.agentAvatar
+})
 </script>
 
 <template>

src/views/personal-space/personal-app-setting/components/page-narbar.vue

@@ -2,6 +2,7 @@
 import { computed, h, onMounted, readonly, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+import { storeToRefs } from 'pinia'
 import CustomIcon from '@/components/custom-icon/custom-icon.vue'
 import { useUserStore } from '@/store/modules/user'
 import { usePersonalAppConfigStore } from '@/store/modules/personal-app-config'
@@ -23,6 +24,8 @@ const router = useRouter()
 const userStore = useUserStore()
 const personalAppConfigStore = usePersonalAppConfigStore()
 
+const { baseInfo } = storeToRefs(personalAppConfigStore)
+
 const avatarOptions = readonly([
   {
     label: () => h('span', {}, t('common_module.logout')),
@@ -52,8 +55,6 @@ const agentAppOptionList = [
   },
 ]
 
-const personalAppConfig = computed(() => personalAppConfigStore.$state)
-
 const isShowModifiedTime = computed(() => {
   return isUpdateAgentAppConfig.value && personalAppConfigStore.baseInfo.agentId
 })
@@ -73,7 +74,7 @@ const isAllowClickPublish = computed(() => {
 })
 
 watch(
-  () => personalAppConfig.value,
+  () => personalAppConfigStore.$state,
   () => {
     if (isInitGetAgentAppDetail.value) {
       isInitGetAgentAppDetail.value = false
@@ -86,14 +87,6 @@ watch(
   { deep: true },
 )
 
-watch(
-  () => personalAppConfig.value.knowledgeConfig.knowledgeIds,
-  (newKnowledgeIds) => {
-    newKnowledgeIds.length && (isInitGetAgentAppDetail.value = true)
-  },
-  { once: true },
-)
-
 onMounted(() => {
   if (router.currentRoute.value.params.agentId) {
     isInitGetAgentAppDetail.value = true
@@ -118,7 +111,7 @@ function handleDropdownSelect(key: string) {
   }
 }
 
-function handleSwtichAgentAppOption(currentTabKey: string) {
+function handleSwitchAgentAppOption(currentTabKey: string) {
   if (!isAllowClickPublish.value) return
 
   currentAgentAppTabKey.value = currentTabKey
@@ -133,14 +126,16 @@ function handleSwtichAgentAppOption(currentTabKey: string) {
 }
 
 async function handlePublishApplication() {
-  if (!personalAppConfig.value.baseInfo.agentTitle) {
+  if (!baseInfo.value.agentTitle) {
     window.$message.warning(t('personal_space_module.agent_module.agent_setting_module.missing_agent_title_message'))
     return
   }
 
   publishBtnLoading.value = true
 
-  const res = await fetchPublishApplication(personalAppConfig.value).finally(() => (publishBtnLoading.value = false))
+  const res = await fetchPublishApplication(personalAppConfigStore.$state).finally(
+    () => (publishBtnLoading.value = false),
+  )
 
   if (res.code === 0) {
     window.$message.success(t('common_module.publish_success_message'))
@@ -149,10 +144,10 @@ async function handlePublishApplication() {
     router.replace({
       name: router.currentRoute.value.name as string,
       query: { tabKey: 'publish' },
-      params: { agentId: personalAppConfig.value.baseInfo.agentId },
+      params: { agentId: baseInfo.value.agentId },
     })
 
-    personalAppConfig.value.baseInfo.agentPublishStatus = 'publish'
+    baseInfo.value.agentPublishStatus = 'publish'
 
     emit('changeAgentAppTabKey', 'publish')
   }
@@ -210,7 +205,7 @@ async function handlePublishApplication() {
           currentAgentAppTabKey === optionItem.value ? 'text-theme-color bg-white' : 'text-[#84868c]',
           isAllowClickPublish ? 'hover:text-theme-color cursor-pointer' : 'cursor-not-allowed',
         ]"
-        @click="handleSwtichAgentAppOption(optionItem.value)"
+        @click="handleSwitchAgentAppOption(optionItem.value)"
       >
         <NPopover v-if="!isAllowClickPublish" trigger="hover">
           <template #trigger>
@@ -228,7 +223,7 @@ async function handlePublishApplication() {
         type="primary"
         class="min-w-20!"
         :bordered="false"
-        :disabled="!personalAppConfig.baseInfo.agentId"
+        :disabled="!baseInfo.agentId"
         :loading="publishBtnLoading"
         @click="handlePublishApplication"
       >

src/views/personal-space/personal-app-setting/personal-app-setting.vue

 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue'
+import { inject, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
+import { Emitter } from 'mitt'
+import { useI18n } from 'vue-i18n'
 import PageNarBar from './components/page-narbar.vue'
 import AppSetting from './components/app-setting.vue'
 import AppPreview from './components/app-preview.vue'
 import AppPublish from './components/app-publish.vue'
 import { usePersonalAppConfigStore } from '@/store/modules/personal-app-config'
+import { PersonalAppConfigState } from '@/store/types/personal-app-config'
+import { fetchGetDebugApplicationInfo } from '@/apis/agent-application'
+
+const { t } = useI18n()
 
 const router = useRouter()
 
 const personalAppConfigStore = usePersonalAppConfigStore()
 
-const currentAgentAppTabKey = ref('config')
+const emitter = inject<Emitter<MittEvents>>('emitter')
+
+const currentAgentAppTabKey = ref('')
+const isAgentInitLoading = ref(false)
+
+watch(
+  () => currentAgentAppTabKey.value,
+  () => {
+    nextTick(() => {
+      emitter?.emit('isGetAgentDetail')
+    })
+  },
+)
+
+onMounted(async () => {
+  if (router.currentRoute.value.params.agentId) {
+    await handleGetAgentDetail(router.currentRoute.value.params.agentId as string)
+  }
 
-onMounted(() => {
   if (router.currentRoute.value.query.tabKey) {
     currentAgentAppTabKey.value = router.currentRoute.value.query.tabKey as string
+  } else {
+    currentAgentAppTabKey.value = 'config'
   }
 })
 
@@ -23,13 +47,34 @@ onUnmounted(() => {
   personalAppConfigStore.resetPersonalAppConfigState()
 })
 
+async function handleGetAgentDetail(agentId: string) {
+  isAgentInitLoading.value = true
+  await fetchGetDebugApplicationInfo<PersonalAppConfigState>(agentId)
+    .then((res) => {
+      if (res.code === 0) {
+        isAgentInitLoading.value = false
+        personalAppConfigStore.updatePersonalAppConfigState({
+          ...res.data,
+          baseInfo: {
+            ...res.data.baseInfo,
+            agentAvatar:
+              res.data.baseInfo.agentAvatar || 'https://gsst-poe-sit.gz.bcebos.com/data/20240911/1726041369632.webp',
+          },
+        })
+      }
+    })
+    .catch(() => {
+      router.replace({ name: 'Home' })
+    })
+}
+
 function handleChangeAgentAppTabKey(currentTabKey: string) {
   currentAgentAppTabKey.value = currentTabKey
 }
 </script>
 
 <template>
-  <main class="h-full min-w-[1280px]">
+  <main class="relative h-full min-w-[1280px]">
     <PageNarBar @change-agent-app-tab-key="handleChangeAgentAppTabKey" />
 
     <div class="h-content flex w-full flex-1">
@@ -43,5 +88,30 @@ function handleChangeAgentAppTabKey(currentTabKey: string) {
         <AppPublish />
       </div>
     </div>
+
+    <Transition name="mask" mode="out-in">
+      <div
+        v-show="isAgentInitLoading"
+        class="z-100 bg-background-color absolute inset-0 flex flex-col items-center justify-center"
+      >
+        <n-spin :size="38" />
+
+        <div class="text-theme-color mt-[30px] text-[14px]">{{ t('common_module.loading') }}...</div>
+      </div>
+    </Transition>
   </main>
 </template>
+
+<style lang="scss" scoped>
+.mask-enter-active,
+.mask-leave-active {
+  transition-timing-function: ease-in-out;
+  transition-duration: 0.2s;
+  transition-property: opacity;
+}
+
+.mask-enter-from,
+.mask-leave-to {
+  opacity: 0;
+}
+</style>

src/views/personal-space/personal-knowledge/document-detail.vue

 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { ScrollbarInst } from 'naive-ui'
@@ -23,7 +23,7 @@ const { t } = useI18n()
 
 const router = useRouter()
 
-const { paginationData, handlePageNoChange, handlePageSizeChange } = usePagination()
+const { paginationData } = usePagination()
 
 const currentKdId = ref(0)
 const currentKnowledgeDocumentName = ref('')
@@ -61,11 +61,6 @@ const emptyKnowledgeChunkListText = computed(() => {
   return isSearchEmptyList.value ? t('common_module.search_empty_data') : t('common_module.empty_data')
 })
 
-watch([() => paginationData.pageNo, () => paginationData.pageSize], async () => {
-  await handleGetKnowledgeChunkList()
-  scrollBarRef.value?.scrollTo({ top: 0 })
-})
-
 onMounted(async () => {
   if (!router.currentRoute.value.params.kdId) {
     window.$message.warning(t('personal_space_module.knowledge_module.not_find_knowledge_document_message'))
@@ -201,6 +196,19 @@ async function handleUpdateOpenKnowledgeChunk(chunkItem: KnowledgeChunkItem) {
     chunkItem.isOpen = isOpen === 'Y' ? 'N' : 'Y'
   }
 }
+
+async function handleGetKnowledgeChunkListUpdatePageNo(pageNo: number) {
+  paginationData.pageNo = pageNo
+  await handleGetKnowledgeChunkList()
+  scrollBarRef.value?.scrollTo({ top: 0 })
+}
+
+async function handleGetKnowledgeChunkListUpdatePageSize(pageSize: number) {
+  paginationData.pageNo = 1
+  paginationData.pageSize = pageSize
+  await handleGetKnowledgeChunkList()
+  scrollBarRef.value?.scrollTo({ top: 0 })
+}
 </script>
 
 <template>
@@ -247,22 +255,24 @@ async function handleUpdateOpenKnowledgeChunk(chunkItem: KnowledgeChunkItem) {
     </div>
 
     <n-spin :show="knowledgeChunkListLoading" class="w-full flex-1 overflow-hidden" content-class="flex w-full h-full">
-      <div v-if="knowledgeChunkList.length && !knowledgeChunkListLoading" class="flex flex-1">
-        <n-scrollbar ref="scrollBarRef" class="grid w-full flex-1 overflow-hidden">
-          <div class="grid gap-5">
-            <KnowledgeChuckItem
-              v-for="chunkItem in knowledgeChunkList"
-              :key="chunkItem.chunkRelationId"
-              :chunk-item="chunkItem"
-              :total-chunk="totalChunk"
-              @edit="handleEditKnowledgeChunkModal"
-              @up-add-chunk="handleShowUpAddChunkModal"
-              @down-add-chunk="handleShowDownAddChunkModal"
-              @delete="handleDeleteKnowledgeChunk"
-              @update-open="handleUpdateOpenKnowledgeChunk"
-            />
-          </div>
-        </n-scrollbar>
+      <div v-if="knowledgeChunkList.length" class="flex flex-1">
+        <div v-show="!knowledgeChunkListLoading" class="flex flex-1">
+          <n-scrollbar ref="scrollBarRef" class="grid w-full flex-1 overflow-hidden">
+            <div class="grid gap-5">
+              <KnowledgeChuckItem
+                v-for="chunkItem in knowledgeChunkList"
+                :key="chunkItem.chunkRelationId"
+                :chunk-item="chunkItem"
+                :total-chunk="totalChunk"
+                @edit="handleEditKnowledgeChunkModal"
+                @up-add-chunk="handleShowUpAddChunkModal"
+                @down-add-chunk="handleShowDownAddChunkModal"
+                @delete="handleDeleteKnowledgeChunk"
+                @update-open="handleUpdateOpenKnowledgeChunk"
+              />
+            </div>
+          </n-scrollbar>
+        </div>
       </div>
 
       <div
@@ -282,8 +292,8 @@ async function handleUpdateOpenKnowledgeChunk(chunkItem: KnowledgeChunkItem) {
     <div class="mt-4 flex justify-end">
       <CustomPagination
         :paging-info="paginationData"
-        @update-page-no="handlePageNoChange"
-        @update-page-size="handlePageSizeChange"
+        @update-page-no="handleGetKnowledgeChunkListUpdatePageNo"
+        @update-page-size="handleGetKnowledgeChunkListUpdatePageSize"
       />
     </div>
 

types/mitt-events.d.ts

 declare type MittEvents = {
   selectQuestion: string
+  isGetAgentDetail: void
+  resetAgent: void
 }