From 3e4aac355780d2384e385b235d148e787f7dee27 Mon Sep 17 00:00:00 2001
From: teukkk <mengyuan.lv@fit2cloud.com>
Date: Mon, 30 Jun 2025 16:05:14 +0800
Subject: [PATCH] feat: openKnowledgeSource for chat

---
 ui/src/components/ai-chat/KnowledgeSource.vue |  6 +++-
 .../ai-chat/ParagraphSourceDialog.vue         | 23 ++------------
 .../component/ParagraphSourceContent.vue      | 30 +++++++++++++++++++
 .../component/answer-content/index.vue        |  3 +-
 ui/src/components/ai-chat/index.vue           |  3 +-
 ui/src/views/chat/pc/index.vue                | 27 +++++++++++++----
 6 files changed, 63 insertions(+), 29 deletions(-)
 create mode 100644 ui/src/components/ai-chat/component/ParagraphSourceContent.vue

diff --git a/ui/src/components/ai-chat/KnowledgeSource.vue b/ui/src/components/ai-chat/KnowledgeSource.vue
index d80f26535..034d5a6c9 100644
--- a/ui/src/components/ai-chat/KnowledgeSource.vue
+++ b/ui/src/components/ai-chat/KnowledgeSource.vue
@@ -88,11 +88,15 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['openExecutionDetail'])
+const emit = defineEmits(['openExecutionDetail', 'openParagraph'])
 
 const ParagraphSourceDialogRef = ref()
 const ExecutionDetailDialogRef = ref()
 function openParagraph(row: any, id?: string) {
+  if (props.executionIsRightPanel) {
+    emit('openParagraph')
+    return
+  }
   ParagraphSourceDialogRef.value.open(row, id)
 }
 function openExecutionDetail(row: any) {
diff --git a/ui/src/components/ai-chat/ParagraphSourceDialog.vue b/ui/src/components/ai-chat/ParagraphSourceDialog.vue
index dcccbf440..95a320282 100644
--- a/ui/src/components/ai-chat/ParagraphSourceDialog.vue
+++ b/ui/src/components/ai-chat/ParagraphSourceDialog.vue
@@ -10,26 +10,7 @@
     :close-on-press-escape="false"
   >
     <div class="mb-8">
-      <el-scrollbar>
-        <div class="paragraph-source-height p-16 pb-0">
-          <el-form label-position="top">
-            <el-form-item :label="$t('chat.paragraphSource.question')">
-              <el-input v-model="detail.problem_text" disabled />
-            </el-form-item>
-            <el-form-item :label="$t('chat.paragraphSource.optimizationQuestion')">
-              <el-input v-model="detail.padding_problem_text" disabled />
-            </el-form-item>
-            <el-form-item :label="$t('chat.KnowledgeSource.referenceParagraph')">
-              <div v-if="detail.paragraph_list.length > 0" class="w-full">
-                <template v-for="(item, index) in detail.paragraph_list" :key="index">
-                  <ParagraphCard :data="item" :content="item.content" :index="index" />
-                </template>
-              </div>
-              <span v-else> - </span>
-            </el-form-item>
-          </el-form>
-        </div>
-      </el-scrollbar>
+      <ParagraphSourceContent :detail="detail"/>
     </div>
   </el-dialog>
 </template>
@@ -37,7 +18,7 @@
 import { ref, watch, onBeforeUnmount } from 'vue'
 import { cloneDeep } from 'lodash'
 import { arraySort } from '@/utils/utils'
-import ParagraphCard from './component/ParagraphCard.vue'
+import ParagraphSourceContent from './component/ParagraphSourceContent.vue'
 const emit = defineEmits(['refresh'])
 
 const dialogVisible = ref(false)
diff --git a/ui/src/components/ai-chat/component/ParagraphSourceContent.vue b/ui/src/components/ai-chat/component/ParagraphSourceContent.vue
new file mode 100644
index 000000000..9ec214c92
--- /dev/null
+++ b/ui/src/components/ai-chat/component/ParagraphSourceContent.vue
@@ -0,0 +1,30 @@
+<template>
+  <el-scrollbar>
+    <div class="paragraph-source-height p-16 pb-0">
+      <el-form label-position="top">
+        <el-form-item :label="$t('chat.paragraphSource.question')">
+          <el-input :value="props.detail?.problem_text" disabled />
+        </el-form-item>
+        <el-form-item :label="$t('chat.paragraphSource.optimizationQuestion')">
+          <el-input :value="props.detail?.padding_problem_text" disabled />
+        </el-form-item>
+        <el-form-item :label="$t('chat.KnowledgeSource.referenceParagraph')">
+          <div v-if="props.detail?.paragraph_list.length > 0" class="w-full">
+            <template v-for="(item, index) in props.detail.paragraph_list" :key="index">
+              <ParagraphCard :data="item" :content="item.content" :index="index" />
+            </template>
+          </div>
+          <span v-else> - </span>
+        </el-form-item>
+      </el-form>
+    </div>
+  </el-scrollbar>
+</template>
+
+<script setup lang="ts">
+import ParagraphCard from '@/components/ai-chat/component/ParagraphCard.vue'
+
+const props = defineProps<{
+  detail?: any
+}>()
+</script>
\ No newline at end of file
diff --git a/ui/src/components/ai-chat/component/answer-content/index.vue b/ui/src/components/ai-chat/component/answer-content/index.vue
index 9c9220144..e85039a8d 100644
--- a/ui/src/components/ai-chat/component/answer-content/index.vue
+++ b/ui/src/components/ai-chat/component/answer-content/index.vue
@@ -45,6 +45,7 @@
             :type="application.type"
             :executionIsRightPanel="props.executionIsRightPanel"
             @open-execution-detail="emit('openExecutionDetail')"
+            @openParagraph="emit('openParagraph')"
             v-if="showSource(chatRecord) && index === chatRecord.answer_text_list.length - 1"
           />
         </el-card>
@@ -90,7 +91,7 @@ const props = defineProps<{
 
 const { user } = useStore()
 
-const emit = defineEmits(['update:chatRecord', 'openExecutionDetail'])
+const emit = defineEmits(['update:chatRecord', 'openExecutionDetail', 'openParagraph'])
 
 const showAvatar = computed(() => {
   return user.isEnterprise() ? props.application.show_avatar : true
diff --git a/ui/src/components/ai-chat/index.vue b/ui/src/components/ai-chat/index.vue
index 41311ef57..5003404f2 100644
--- a/ui/src/components/ai-chat/index.vue
+++ b/ui/src/components/ai-chat/index.vue
@@ -50,6 +50,7 @@
               :chat-management="ChatManagement"
               :executionIsRightPanel="props.executionIsRightPanel"
               @open-execution-detail="emit('openExecutionDetail', chatList[index])"
+              @openParagraph="emit('openParagraph', chatList[index])"
             ></AnswerContent>
           </template>
           <TransitionContent
@@ -129,7 +130,7 @@ const props = withDefaults(
     type: 'ai-chat',
   },
 )
-const emit = defineEmits(['refresh', 'scroll', 'openExecutionDetail'])
+const emit = defineEmits(['refresh', 'scroll', 'openExecutionDetail', 'openParagraph'])
 const { application, common } = useStore()
 const isMobile = computed(() => {
   return common.isMobile() || mode === 'embed' || mode === 'mobile'
diff --git a/ui/src/views/chat/pc/index.vue b/ui/src/views/chat/pc/index.vue
index 5e26ae73a..3de1a58f5 100644
--- a/ui/src/views/chat/pc/index.vue
+++ b/ui/src/views/chat/pc/index.vue
@@ -232,17 +232,19 @@
                 @refresh="refresh"
                 @scroll="handleScroll"
                 @open-execution-detail="openExecutionDetail"
+                @openParagraph="openKnowledgeSource"
               >
               </AiChat>
             </div>
           </el-splitter-panel>
           <el-splitter-panel class="execution-detail-panel" v-model:size="rightPanelSize"  :resizable="false" collapsible>
             <div class="p-16 flex-between border-b">
-              <h4 class="medium">{{ $t('chat.executionDetails.title') }}</h4>
+              <h4 class="medium">{{ rightPanelTitle }}</h4>
               <el-icon size="20" class="cursor" @click="closeExecutionDetail"><Close /></el-icon>
             </div>
-            <div class="execution-detail-content" v-loading="executionLoading">
-              <ExecutionDetailContent :detail="executionDetail" />
+            <div class="execution-detail-content" v-loading="rightPanelLoading">
+              <ParagraphSourceContent v-if="rightPanelType === 'knowledgeSource'" :detail="rightPanelDetail" />
+              <ExecutionDetailContent v-if="rightPanelType === 'executionDetail'" :detail="executionDetail" />
             </div>
           </el-splitter-panel>
         </el-splitter>
@@ -274,6 +276,7 @@ import ResetPassword from '@/layout/layout-header/avatar/ResetPassword.vue'
 import { t } from '@/locales'
 import type { ResetCurrentUserPasswordRequest } from '@/api/type/user'
 import ExecutionDetailContent from '@/components/ai-chat/component/ExecutionDetailContent.vue'
+import ParagraphSourceContent from '@/components/ai-chat/component/ParagraphSourceContent.vue'
 import { cloneDeep } from 'lodash'
 
 useResize()
@@ -530,17 +533,31 @@ onMounted(() => {
 })
 
 const rightPanelSize = ref(0)
+const rightPanelTitle = ref('')
+const rightPanelType = ref('')
+const rightPanelLoading = ref(false)
 const executionDetail = ref<any[]>([])
-const executionLoading = ref(false)
+const rightPanelDetail = ref<any>()
 async function openExecutionDetail(row: any) {
   rightPanelSize.value = 400
+  rightPanelTitle.value = t('chat.executionDetails.title')
+  rightPanelType.value = 'executionDetail'
   if (row.execution_details) {
     executionDetail.value = cloneDeep(row.execution_details)
   } else {
-    const res = await chatAPI.getChatRecord(row.chat_id, row.record_id, executionLoading)
+    const res = await chatAPI.getChatRecord(row.chat_id, row.record_id, rightPanelLoading)
     executionDetail.value = cloneDeep(res.data.execution_details)
   }
 }
+
+async function openKnowledgeSource (row: any) {
+  rightPanelTitle.value = t('chat.KnowledgeSource.title')
+  rightPanelType.value = 'knowledgeSource'
+  // TODO 数据
+  rightPanelDetail.value = row
+  rightPanelSize.value = 400
+}
+
 function closeExecutionDetail() {
   rightPanelSize.value = 0
 }