feat(知识库切片返回): pc端应用分享页支持显示知识库切片&&切片样式调整

src/views/personal-space/personal-app-setting/components/agent-config/agent-preview/components/hit-knowledge-item.vue

@@ -17,6 +17,11 @@ const isExpandContent = ref(false)
 
 const ELLIPSIS_HIGHT = 100
 
+const documentIcon = (documentName: string) => {
+  const type = documentName.split('.')?.pop()?.toLowerCase()
+  return type ? `https://gsst-poe-sit.gz.bcebos.com/icon/${type}.svg` : ''
+}
+
 onMounted(() => {
   nextTick(() => {
     if (knowledgeContentRef.value) {
@@ -32,27 +37,35 @@ function handleClickExpand() {
 
 <template>
   <div
-    class="rounded-theme border bg-white px-[15px] py-4"
-    :class="isExpandContent ? 'border-theme-color' : 'border-inactive-border-color'"
+    class="group overflow-hidden rounded-[10px] border"
+    :class="
+      isExpandContent
+        ? 'border-theme-color bg-[#f1f2ff]'
+        : 'hover:border-theme-color border-[#ededee] bg-[#fafaff] hover:bg-[#f1f2ff]'
+    "
   >
-    <div class="flex-center text-gray-font-color font-family-medium flex-shrink-0 justify-between gap-[10px]">
-      <div class="flex flex-1 items-center gap-[5px]">
+    <div class="flex-center h-9 flex-shrink-0 justify-between gap-[18px] overflow-hidden bg-[#e2e4ff] px-[10px]">
+      <div class="text-font-color flex flex-1 items-center gap-[5px] overflow-hidden">
+        <div
+          class="h-[18px] w-[18px] flex-shrink-0 bg-cover bg-center bg-no-repeat"
+          :style="{ backgroundImage: `url(${documentIcon(contentResultItem.documentName)})` }"
+        />
+        <n-ellipsis>
+          {{ contentResultItem.documentName }}
+        </n-ellipsis>
+      </div>
+
+      <div class="text-gray-font-color flex flex-1 items-center justify-end gap-[5px] overflow-hidden">
         <span class="flex-shrink-0">
           {{ t('personal_space_module.agent_module.agent_setting_module.agent_config_module.from_knowledge_base') }}:
         </span>
-        <n-ellipsis class="w-full!">
+        <n-ellipsis>
           {{ contentResultItem.knowledgeName }}
         </n-ellipsis>
       </div>
-
-      <div class="flex flex-shrink-0 items-center gap-[5px]">
-        <span>{{ t('personal_space_module.agent_module.agent_setting_module.agent_config_module.score') }}:</span>
-
-        <span>{{ (Math.floor(contentResultItem.score * 100) / 100).toFixed(2) }}</span>
-      </div>
     </div>
 
-    <div class="text-font-color relative mt-3 leading-4">
+    <div class="text-font-color relative mt-3 px-[15px] leading-4">
       <span
         ref="knowledgeContentRef"
         class="whitespace-pre-wrap break-all leading-4"
@@ -63,8 +76,8 @@ function handleClickExpand() {
 
       <div
         v-show="isContentExceed"
-        class="text-gray-font-color flex-center mt-4 h-[16px] w-[72px] cursor-pointer gap-[5px] bg-white pr-2 leading-4 hover:text-[rgba(153,153,153,0.8)]"
-        :class="isExpandContent ? 'ml-auto items-baseline' : 'flex w-full justify-end'"
+        class="text-gray-font-color flex-center ml-auto mt-3 h-[16px] w-[72px] cursor-pointer items-baseline gap-[5px] pr-2 leading-4 hover:text-[rgba(153,153,153,0.8)] group-hover:bg-[#f1f2ff]"
+        :class="isExpandContent ? 'bg-[#f1f2ff]' : 'bg-[#fafaff]'"
         @click="handleClickExpand"
       >
         <span class="inline-block leading-4">
@@ -76,5 +89,11 @@ function handleClickExpand() {
         />
       </div>
     </div>
+
+    <div class="font-family-medium text-gray-font-color mb-3 flex flex-shrink-0 items-center gap-[5px] px-[15px]">
+      <span>{{ t('personal_space_module.agent_module.agent_setting_module.agent_config_module.score') }}:</span>
+
+      <span>{{ (Math.floor(contentResultItem.score * 100) / 100).toFixed(2) }}</span>
+    </div>
   </div>
 </template>

src/views/personal-space/personal-app-setting/components/agent-config/agent-preview/components/hit-knowledge.vue

@@ -4,6 +4,7 @@ import HitKnowledgeItem from './hit-knowledge-item.vue'
 
 interface Props {
   knowledgeContentResult: KnowledgeContentResultItem[]
+  to: string | HTMLElement
 }
 
 defineProps<Props>()
@@ -20,8 +21,8 @@ const isShowDrawer = defineModel<boolean>('isShowDrawer', { required: true })
     :show-mask="'transparent'"
     :trap-focus="false"
     :block-scroll="false"
+    :to="to"
     class="shadow-[0_0_20px_rgba(0,4,65,0.07)]! rounded-[10px]!"
-    to="#agent-config-target"
   >
     <n-drawer-content
       :title="t('personal_space_module.agent_module.agent_setting_module.agent_config_module.back_chunk_content')"

src/views/personal-space/personal-app-setting/components/agent-config/agent-preview/components/message-list.vue

@@ -104,6 +104,7 @@ function handleShowKnowledgeResult(knowledgeContentResult: KnowledgeContentResul
     <HitKnowledge
       v-model:is-show-drawer="isShowKnowledgeContent"
       :knowledge-content-result="currentKnowledgeContentResult!"
+      :to="'#agent-config-target'"
     />
   </main>
 </template>

src/views/share/components/footer-input.vue

@@ -288,6 +288,13 @@ function handleMessageSend(lastQuestionContent?: string) {
         emit('updatePageScroll')
       }
 
+      // 知识库
+      if (data.knowledgeContentResult) {
+        emit('updateSpecifyMessageItem', latestAssistantMessageKey, {
+          knowledgeContentResult: data.knowledgeContentResult,
+        })
+      }
+
       // 数据库
       if (data.dbChainResult && data.dbChainResult?.[0]) {
         emit('updateSpecifyMessageItem', latestAssistantMessageKey, {

src/views/share/components/message-item.vue

@@ -28,6 +28,7 @@ const props = defineProps<Props>()
 const emit = defineEmits<{
   audioPlay: []
   audioPause: []
+  showKnowledgeResult: []
 }>()
 
 const userStore = useUserStore()
@@ -299,7 +300,14 @@ const handleContentCopy = throttle(
 
         <!-- 仅pc端展示操作 -->
         <div v-show="!isMobile" class="flex w-full items-center justify-between">
-          <div></div>
+          <div
+            v-show="isAgentMessage && messageItem.knowledgeContentResult.length"
+            class="flex-center rounded-theme h-8 cursor-pointer gap-[5px] px-[13px] font-['Microsoft_YaHei_UI'] text-[#0B7DFF] hover:opacity-80"
+            @click="emit('showKnowledgeResult')"
+          >
+            <i class="iconfont icon-knowledge" />
+            <span>{{ t('common_module.knowledge') }}</span>
+          </div>
 
           <div
             v-show="isAgentMessage && messageItem.textContent && !messageItem.isAnswerResponseLoading"

src/views/share/components/message-list.vue

 <script setup lang="ts">
-import { computed, nextTick, provide, useTemplateRef, watch } from 'vue'
+import { computed, nextTick, provide, ref, useTemplateRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useElementVisibility } from '@vueuse/core'
 import MessageItem from './message-item.vue'
@@ -7,6 +7,7 @@ import ContinueQuestion from './continue-question.vue'
 import { useScroll } from '@/composables/useScroll'
 import { PersonalAppConfigState } from '@/store/types/personal-app-config'
 import { useLayoutConfig } from '@/composables/useLayoutConfig'
+import HitKnowledge from '@/views/personal-space/personal-app-setting/components/agent-config/agent-preview/components/hit-knowledge.vue'
 
 interface Props {
   messageList: Map<string, ConversationMessageItem>
@@ -40,6 +41,9 @@ provide('updateSpecifyMessageItem', {
   },
 })
 
+const isShowKnowledgeContent = ref(false)
+const currentKnowledgeContentResult = ref<KnowledgeContentResultItem[]>([])
+
 const isShowContinueQuestion = computed(() => {
   return (
     props.continuousQuestionStatus === 'default' &&
@@ -70,6 +74,11 @@ function handleScrollToBottom() {
     isNotShowBackBottomBtn.value && scrollToBottom()
   })
 }
+
+function handleShowKnowledgeResult(knowledgeContentResult: KnowledgeContentResultItem[]) {
+  isShowKnowledgeContent.value = true
+  currentKnowledgeContentResult.value = knowledgeContentResult
+}
 </script>
 
 <template>
@@ -83,6 +92,7 @@ function handleScrollToBottom() {
         :agent-application-config="agentApplicationConfig"
         @audio-play="() => $emit('audioPlay', messageItem)"
         @audio-pause="() => $emit('audioPause')"
+        @show-knowledge-result="handleShowKnowledgeResult(messageItem.knowledgeContentResult)"
       />
 
       <p v-show="isMobile && isAnswerResponseLoading" class="ml-1 mt-[7px] text-xs text-[#84868c]">
@@ -105,6 +115,12 @@ function handleScrollToBottom() {
         <i class="iconfont icon-huidaodibu text-sm" />
       </div>
     </Transition>
+
+    <HitKnowledge
+      v-model:is-show-drawer="isShowKnowledgeContent"
+      :knowledge-content-result="currentKnowledgeContentResult!"
+      :to="'#share-agent-web-container'"
+    />
   </main>
 </template>
 

src/views/share/share-application-web.vue

@@ -336,7 +336,7 @@ function onSmartFormsStatusFreezeCheck(smartFormType: SmartFormTypes) {
         @to-create-application="handleCreateApplicationPage"
       />
 
-      <div class="h-[calc(100%-68px)] w-full bg-[#f2f5f9]">
+      <div id="share-agent-web-container" class="relative h-[calc(100%-68px)] w-full overflow-hidden bg-[#f2f5f9]">
         <div class="relative mx-auto flex h-full w-[1000px] flex-col overflow-hidden">
           <div v-show="isEnableVoice" class="absolute right-10 top-7 flex select-none items-center gap-2">
             <span>{{ t('common_module.voice_auto_play') }}</span>