From e8b2b253f03f14aafdb3775bd479d1474b4ce5ad Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Sun, 27 Apr 2025 18:59:38 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=86=20refs=20=E7=A7=BB=E5=8A=A8=E5=88=B0?=
 =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/package.json                        |   2 +-
 web/src/components/ChatComponent.vue    |  85 ++++-
 web/src/components/GraphContainer.vue   | 153 ++++++++-
 web/src/components/MessageComponent.vue |   9 +-
 web/src/components/RefsComponent.vue    | 321 ++----------------
 web/src/components/RefsSidebar.vue      | 426 ++++++++++++++++++++++++
 6 files changed, 689 insertions(+), 307 deletions(-)
 create mode 100644 web/src/components/RefsSidebar.vue

diff --git a/web/package.json b/web/package.json
index 2a496842..157f14bb 100644
--- a/web/package.json
+++ b/web/package.json
@@ -26,7 +26,7 @@
     "less": "^4.1.3",
     "marked": "^13.0.2",
     "marked-highlight": "^2.1.4",
-    "md-editor-v3": "^4.16.7",
+    "md-editor-v3": "^4.21.3",
     "pinia": "^2.0.32",
     "vue": "^3.5.13",
     "vue-router": "^4.1.6"
diff --git a/web/src/components/ChatComponent.vue b/web/src/components/ChatComponent.vue
index a4fe2578..3e1737f9 100644
--- a/web/src/components/ChatComponent.vue
+++ b/web/src/components/ChatComponent.vue
@@ -81,13 +81,15 @@
     </div>
     <div class="chat-box" :class="{ 'wide-screen': meta.wideScreen, 'font-smaller': meta.fontSize === 'smaller', 'font-larger': meta.fontSize === 'larger' }">
       <MessageComponent
-        v-for="message in conv.messages"
+        v-for="(message, index) in conv.messages"
         :message="message"
         :key="message.id"
         :is-processing="isStreaming"
-        :show-refs="true"
+        :show-refs="['copy', 'regenerate', 'subGraph', 'webSearch', 'knowledgeBase']"
+        :is-latest-message="isLatestMessage(index)"
         @retry="retryMessage(message.id)"
         @retryStoppedMessage="retryStoppedMessage(message.id)"
+        @openRefs="handleOpenRefs"
       >
       </MessageComponent>
     </div>
@@ -142,6 +144,13 @@
         <p class="note">请注意辨别内容的可靠性 By {{ configStore.config?.model_provider }}: {{ configStore.config?.model_name }}</p>
       </div>
     </div>
+    <!-- 添加全局Refs侧边栏 -->
+    <RefsSidebar
+      ref="refsSidebarRef"
+      :visible="refsSidebarVisible"
+      :latestRefs="currentRefs"
+      @update:visible="refsSidebarVisible = $event"
+    />
   </div>
 </template>
 
@@ -178,6 +187,7 @@ import { useConfigStore } from '@/stores/config'
 import { message } from 'ant-design-vue'
 import MessageInputComponent from '@/components/MessageInputComponent.vue'
 import MessageComponent from '@/components/MessageComponent.vue'
+import RefsSidebar from '@/components/RefsSidebar.vue'
 
 const props = defineProps({
   conv: Object,
@@ -222,6 +232,41 @@ const meta = reactive(JSON.parse(localStorage.getItem('meta')) || {
   wideScreen: false,
 })
 
+// 添加全局refs状态
+const refsSidebarVisible = ref(false)
+const currentRefs = ref({})
+
+// 处理打开refs侧边栏
+const handleOpenRefs = ({ type, refs }) => {
+  console.log('ChatComponent handleOpenRefs called with type:', type);
+  console.log('Refs data structure:', JSON.stringify(refs));
+
+  // 先更新引用数据，确保数据在设置标签页之前已更新
+  currentRefs.value = Object.assign({}, refs);
+
+  // 强制在下一个tick更新，确保数据已经被正确应用
+  nextTick(() => {
+    // 显示抽屉
+    refsSidebarVisible.value = true;
+
+    // 再次检查引用是否正确
+    console.log('Updated refs data:', JSON.stringify(currentRefs.value));
+
+    // 根据type自动选择标签页
+    if (refsSidebarRef.value) {
+      console.log('Setting active tab to:', type);
+      // 延迟50毫秒设置标签页，确保抽屉已打开
+      setTimeout(() => {
+        refsSidebarRef.value.setActiveTab(type);
+      }, 50);
+    } else {
+      console.error('refsSidebarRef is not available');
+    }
+  });
+}
+
+// 添加对RefsSidebar的ref
+const refsSidebarRef = ref(null)
 
 const consoleMsg = (msg) => console.log(msg)
 onClickOutside(panel, () => setTimeout(() => opts.showPanel = false, 30))
@@ -358,6 +403,11 @@ const updateMessage = (info) => {
       propertiesToUpdate.forEach(prop => {
         if (info[prop] != null && (typeof info[prop] !== 'string' || info[prop] !== '')) {
           msg[prop] = info[prop];
+
+          // 如果更新了refs，同时更新全局refs
+          if (prop === 'refs' && info.refs) {
+            currentRefs.value = info.refs;
+          }
         }
       });
 
@@ -446,6 +496,12 @@ const fetchChatResponse = (user_input, cur_res_id) => {
           console.log(msg)
           groupRefs(cur_res_id);
           updateMessage({showThinking: "no", id: cur_res_id});
+          // 更新全局refs为最新消息的refs
+          if (msg && msg.refs) {
+            // 深拷贝refs以确保不会出现引用问题
+            currentRefs.value = JSON.parse(JSON.stringify(msg.refs));
+            console.log('Updated currentRefs on response completion:', currentRefs.value);
+          }
           isStreaming.value = false;
           if (conv.value.messages.length === 2) { renameTitle(); }
           return;
@@ -571,6 +627,11 @@ onMounted(() => {
     const parsedMeta = JSON.parse(storedMeta);
     Object.assign(meta, parsedMeta);
   }
+
+  // 检查refsSidebarRef是否正确挂载
+  nextTick(() => {
+    console.log('Is refsSidebarRef mounted?', !!refsSidebarRef.value);
+  });
 });
 
 onUnmounted(() => {
@@ -642,6 +703,26 @@ const selectModel = (provider, name) => {
   configStore.setConfigValue('model_name', name)
   // message.success(`已切换到模型: ${name} | ${provider}`)
 }
+
+// 判断是否是最新的助手消息
+const isLatestMessage = (index) => {
+  // 找到最后一条助手消息的索引
+  const lastAssistantMsgIndex = findLastIndex(conv.value.messages,
+    msg => (msg.role === 'received' || msg.role === 'assistant') && msg.status === 'finished');
+
+  // 如果当前索引等于最后一条助手消息的索引，则为最新消息
+  return index === lastAssistantMsgIndex;
+}
+
+// 辅助函数：从后向前查找满足条件的元素索引
+const findLastIndex = (array, predicate) => {
+  for (let i = array.length - 1; i >= 0; i--) {
+    if (predicate(array[i])) {
+      return i;
+    }
+  }
+  return -1;
+}
 </script>
 
 <style lang="less" scoped>
diff --git a/web/src/components/GraphContainer.vue b/web/src/components/GraphContainer.vue
index 41794cdb..2b8f0557 100644
--- a/web/src/components/GraphContainer.vue
+++ b/web/src/components/GraphContainer.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { Graph } from "@antv/g6";
-import { onMounted, watch, ref } from 'vue';
+import { onMounted, watch, ref, onUnmounted } from 'vue';
 
 const props = defineProps({
   graphData: {
@@ -16,21 +16,49 @@ const props = defineProps({
 
 const container = ref(null);
 let graphInstance = null;
+let resizeObserver = null;
 
 const initGraph = () => {
+  // 确保容器大小已经稳定
+  const width = container.value.offsetWidth;
+  const height = container.value.offsetHeight;
+
+  if (width < 100) {
+    // 如果容器宽度太小，可能是抽屉还在展开中，稍后重试
+    setTimeout(initGraph, 100);
+    return;
+  }
+
+  // 确保容器干净，没有残留元素
+  if (container.value) {
+    container.value.innerHTML = '';
+  }
+
+  // 确保没有已存在的实例
+  if (graphInstance) {
+    graphInstance.destroy();
+    graphInstance = null;
+  }
+
   graphInstance = new Graph({
     container: container.value,
-    width: container.value.offsetWidth,
-    height: container.value.offsetHeight,
+    width: width,
+    height: height,
     autoFit: true,
     autoResize: true,
     layout: {
       type: 'd3-force',
       preventOverlap: true,
-      kr: 20,
+      kr: 30,
+      linkDistance: 200,
+      nodeStrength: -100,
       collide: {
-        strength: 1.0,
+        strength: 1.5,
+        radius: 60,
       },
+      alpha: 0.8,
+      alphaDecay: 0.028,
+      center: [width / 2, height / 2],
     },
     node: {
       type: 'circle',
@@ -56,10 +84,51 @@ const initGraph = () => {
 };
 
 const renderGraph = () => {
+  // 如果已有实例且容器大小发生明显变化，则销毁重建
+  if (graphInstance && container.value) {
+    const currentWidth = container.value.offsetWidth;
+    const currentHeight = container.value.offsetHeight;
+    let graphWidth = 0;
+    let graphHeight = 0;
+
+    // 安全地获取图表宽高
+    try {
+      if (typeof graphInstance.getWidth === 'function') {
+        graphWidth = graphInstance.getWidth();
+      } else if (graphInstance.cfg && graphInstance.cfg.width) {
+        graphWidth = graphInstance.cfg.width;
+      }
+
+      if (typeof graphInstance.getHeight === 'function') {
+        graphHeight = graphInstance.getHeight();
+      } else if (graphInstance.cfg && graphInstance.cfg.height) {
+        graphHeight = graphInstance.cfg.height;
+      }
+    } catch (e) {
+      console.error('Error getting graph dimensions:', e);
+    }
+
+    // 如果宽度变化超过50px，重新初始化图表
+    if (Math.abs(currentWidth - graphWidth) > 50 || Math.abs(currentHeight - graphHeight) > 50) {
+      graphInstance.destroy();
+      graphInstance = null;
+
+      // 清理容器内容
+      if (container.value) {
+        container.value.innerHTML = '';
+      }
+    }
+  }
+
   if (!graphInstance) {
     initGraph();
   }
 
+  if (!graphInstance) {
+    // 初始化可能推迟执行，此时直接返回
+    return;
+  }
+
   const formattedData = {
     nodes: props.graphData.nodes.map(node => ({
       id: node.id,
@@ -74,14 +143,86 @@ const renderGraph = () => {
 
   graphInstance.setData(formattedData);
   graphInstance.render();
+
+  // 确保图表正确居中和适应视图
+  setTimeout(() => {
+    if (graphInstance) {
+      graphInstance.fitCenter();
+      graphInstance.fitView();
+    }
+  }, 300);
 };
 
+// 添加供父组件调用的刷新方法
+const refreshGraph = () => {
+  // 销毁现有图表实例
+  if (graphInstance) {
+    graphInstance.destroy();
+    graphInstance = null;
+  }
+
+  // 清理容器内容
+  if (container.value) {
+    container.value.innerHTML = '';
+  }
+
+  // 延迟重新渲染，确保容器大小已经稳定
+  setTimeout(() => {
+    renderGraph();
+  }, 100);
+};
+
+// 向父组件暴露方法
+defineExpose({
+  refreshGraph
+});
+
 onMounted(() => {
+  // 使用ResizeObserver监听容器大小变化
+  if (window.ResizeObserver) {
+    resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.target === container.value) {
+          renderGraph();
+        }
+      }
+    });
+
+    if (container.value) {
+      resizeObserver.observe(container.value);
+    }
+  }
+
   renderGraph();
   window.addEventListener('resize', renderGraph);
 });
 
-watch(() => props.graphData, renderGraph, { deep: true });
+// 添加组件卸载时的清理
+onUnmounted(() => {
+  window.removeEventListener('resize', renderGraph);
+
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+    resizeObserver = null;
+  }
+
+  if (graphInstance) {
+    graphInstance.destroy();
+    graphInstance = null;
+  }
+
+  // 确保清理容器内容
+  if (container.value) {
+    container.value.innerHTML = '';
+  }
+});
+
+watch(() => props.graphData, (newData, oldData) => {
+  // 强制重新渲染图表
+  if (newData !== oldData) {
+    refreshGraph();
+  }
+}, { deep: true });
 </script>
 
 <style scoped>
diff --git a/web/src/components/MessageComponent.vue b/web/src/components/MessageComponent.vue
index a2ed96bc..3eb458b9 100644
--- a/web/src/components/MessageComponent.vue
+++ b/web/src/components/MessageComponent.vue
@@ -67,7 +67,7 @@
 
 
       <div v-if="(message.role=='received' || message.role=='assistant') && message.status=='finished' && showRefs">
-        <RefsComponent :message="message" :show-refs="showRefs" @retry="emit('retry')" />
+        <RefsComponent :message="message" :show-refs="showRefs" :is-latest-message="isLatestMessage" @retry="emit('retry')" @openRefs="emit('openRefs', $event)" />
       </div>
       <!-- 错误消息 -->
     </div>
@@ -111,6 +111,11 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  // 是否为最新消息
+  isLatestMessage: {
+    type: Boolean,
+    default: false
+  }
 });
 
 const editorRef = ref()
@@ -122,7 +127,7 @@ const statusDefination = {
   error: '错误'
 }
 
-const emit = defineEmits(['retry', 'retryStoppedMessage']);
+const emit = defineEmits(['retry', 'retryStoppedMessage', 'openRefs']);
 
 // 推理面板展开状态
 const reasoningActiveKey = ref(['show']);
diff --git a/web/src/components/RefsComponent.vue b/web/src/components/RefsComponent.vue
index f9d5ba22..73d72fc5 100644
--- a/web/src/components/RefsComponent.vue
+++ b/web/src/components/RefsComponent.vue
@@ -11,101 +11,32 @@
         v-if="showKey('regenerate')"
         class="item btn" @click="regenerateMessage()" title="重新生成"><ReloadOutlined /></span>
       <span
-        v-if="showKey('subGraph') && hasSubGraphData(msg)"
+        v-if="isLatestMessage && showKey('subGraph') && hasSubGraphData(msg)"
         class="item btn"
-        @click="openSubGraph(msg)"
+        @click="openGlobalRefs('graph')"
       >
         <DeploymentUnitOutlined /> 关系图
       </span>
       <span
         class="item btn"
-        @click="showWebResult(msg)"
-        v-if="showKey('webSearch') && msg.refs?.web_search.results.length > 0"
+        v-if="isLatestMessage && showKey('webSearch') && msg.refs?.web_search.results.length > 0"
+        @click="openGlobalRefs('webSearch')"
       >
         <GlobalOutlined /> 网页搜索 {{ msg.refs.web_search?.results.length }}
       </span>
-      <span class="filetag item btn"
-        v-for="(results, filename) in msg.groupedResults"
-        :key="filename"
-        @click="toggleDrawer(filename)"
+      <span
+        class="item btn"
+        v-if="isLatestMessage && showKey('knowledgeBase') && hasKnowledgeBaseData(msg)"
+        @click="openGlobalRefs('knowledgeBase')"
       >
-        <FileTextOutlined /> {{ filename }}
-        <a-drawer
-          v-model:open="openDetail[filename]"
-          :title="filename"
-          width="700"
-          :contentWrapperStyle="{ maxWidth: '100%'}"
-          placement="right"
-          class="retrieval-detail"
-          rootClassName="root"
-        >
-          <div class="fileinfo">
-            <p><FileOutlined /> {{ results[0].file.type }}</p>
-            <p><ClockCircleOutlined /> {{ formatDate(results[0].file.created_at) }}</p>
-          </div>
-          <div class="results-list">
-            <div v-for="res in results" :key="res.id" class="result-item">
-              <div class="result-meta">
-                <div class="score-info">
-                  <span>
-                    <strong>相似度：</strong>
-                    <a-progress :percent="getPercent(res.distance)"/>
-                  </span>
-                  <span v-if="res.rerank_score">
-                    <strong>重排序：</strong>
-                    <a-progress :percent="getPercent(res.rerank_score)"/>
-                  </span>
-                </div>
-                <div class="result-id">ID: #{{ res.id }}</div>
-              </div>
-              <div class="result-text">{{ res.entity.text }}</div>
-            </div>
-          </div>
-        </a-drawer>
+        <FileTextOutlined /> 知识库
       </span>
     </div>
-    <a-modal
-      v-model:open="subGraphVisible"
-      title="相关实体与关系"
-      :width="800"
-      :footer="null"
-    >
-      <GraphContainer :graphData="subGraphData" />
-    </a-modal>
-    <a-drawer
-      v-model:open="webResultVisible"
-      title="网页搜索结果"
-      width="700"
-      :contentWrapperStyle="{ maxWidth: '100%'}"
-      placement="right"
-      class="web-result-detail"
-      rootClassName="root"
-    >
-      <div class="results-list">
-        <div v-for="result in webResults" :key="result.url" class="result-item">
-          <div class="result-meta">
-            <div class="score-info">
-              <span>
-                <strong>相关度：</strong>
-                <a-progress :percent="getPercent(result.score)"/>
-              </span>
-            </div>
-            <div class="result-url">
-              <a :href="result.url" target="_blank">{{ result.url }}</a>
-            </div>
-          </div>
-          <div class="result-content">
-            <h3 class="result-title">{{ result.title }}</h3>
-            <div class="result-text">{{ result.content }}</div>
-          </div>
-        </div>
-      </div>
-    </a-drawer>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, reactive } from 'vue'
+import { ref, computed } from 'vue'
 import { useClipboard } from '@vueuse/core'
 import { message } from 'ant-design-vue'
 import {
@@ -114,19 +45,19 @@ import {
   CopyOutlined,
   DeploymentUnitOutlined,
   BulbOutlined,
-  FileOutlined,
-  ClockCircleOutlined,
   ReloadOutlined,
 } from '@ant-design/icons-vue'
-import GraphContainer from './GraphContainer.vue'  // 导入 GraphContainer 组件
 
-
-const emit = defineEmits(['retry']);
+const emit = defineEmits(['retry', 'openRefs']);
 const props = defineProps({
   message: Object,
   showRefs: {
     type: [Array, Boolean],
     default: () => false
+  },
+  isLatestMessage: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -158,58 +89,14 @@ const copyText = async (text) => {
   }
 }
 
-// 其他方法
-const likeThisResponse = (msg) => {
-  console.log('Like this response:', msg)
-}
-
-const dislikeThisResponse = (msg) => {
-  console.log('Dislike this response:', msg)
-}
-
-// 使用 reactive 创建一个响应式对象来存储每个文件的抽屉状态
-const openDetail = reactive({})
-
-// 初始化 openDetail 对象
-for (const filename in msg.value.groupedResults) {
-  openDetail[filename] = false
-}
-
-const toggleDrawer = (filename) => {
-  openDetail[filename] = !openDetail[filename]
-}
-
 const showRefs = computed(() => (msg.value.role=='received' || msg.value.role=='assistant') && msg.value.status=='finished')
 
-const subGraphVisible = ref(false)
-const subGraphData = ref(null)
-
-
-const openSubGraph = (msg) => {
-  if (hasSubGraphData(msg)) {
-    subGraphData.value = msg.refs.graph_base.results
-    subGraphVisible.value = true
-  } else {
-    console.error('无法获取子图数据')
-  }
-}
-
-const closeSubGraph = () => {
-  subGraphVisible.value = false
-}
-
-// 添加网页搜索结果相关变量
-const webResultVisible = ref(false)
-const webResults = ref(null)
-
-// 添加显示网页搜索结果的方法
-const showWebResult = (msg) => {
-  if (msg.refs?.web_search) {
-    webResults.value = msg.refs?.web_search.results
-    webResultVisible.value = true
-  } else {
-    console.error('无法获取网页搜索结果')
-  }
+// 打开全局refs抽屉
+const openGlobalRefs = (type) => {
+  emit('openRefs', {
+    type,
+    refs: msg.value.refs
+  })
 }
 
 const hasSubGraphData = (msg) => {
@@ -218,14 +105,10 @@ const hasSubGraphData = (msg) => {
          msg.refs.graph_base.results.nodes.length > 0;
 }
 
-// 添加日期格式化函数
-const formatDate = (timestamp) => {
-  return new Date(timestamp * 1000).toLocaleString()
-}
-
-// 添加百分比计算函数
-const getPercent = (value) => {
-  return parseFloat((value * 100).toFixed(2))
+const hasKnowledgeBaseData = (msg) => {
+  return msg.refs &&
+         msg.refs.knowledge_base &&
+         msg.refs.knowledge_base.results.length > 0;
 }
 
 // 添加重新生成方法
@@ -265,160 +148,6 @@ const regenerateMessage = () => {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
-
-    .filetag {
-      display: flex;
-      align-items: center;
-      gap: 5px;
-    }
-  }
-}
-
-.retrieval-detail {
-  .fileinfo {
-    display: flex;
-    justify-content: space-between;
-    padding: 12px 16px;
-    background-color: #f5f5f5;
-    border-radius: 4px;
-    margin-bottom: 16px;
-
-    p {
-      margin: 0;
-      color: #666;
-    }
-  }
-
-  .score-info {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 2rem;
-    margin-bottom: 8px;
-
-    span {
-      display: flex;
-      align-items: center;
-
-      strong {
-        margin-right: 8px;
-        white-space: nowrap;
-        color: #666;
-      }
-
-      .ant-progress {
-        width: 170px;
-        margin-bottom: 0;
-        margin-inline: 10px;
-
-        .ant-progress-bg {
-          background-color: #666;
-        }
-      }
-    }
-  }
-
-  .result-id {
-    font-size: 12px;
-    color: #999;
-    margin-bottom: 8px;
-  }
-
-  .result-text {
-    font-size: 14px;
-    line-height: 1.6;
-    white-space: pre-wrap;
-    word-break: break-word;
-    background-color: #f9f9f9;
-    padding: 12px;
-    border-radius: 4px;
-    border: 1px solid #e8e8e8;
-  }
-}
-
-.results-list {
-  .result-item {
-    border-bottom: 1px solid #f0f0f0;
-    padding: 16px 0;
-
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-
-  .result-meta {
-    margin-bottom: 12px;
-  }
-}
-
-.web-result-detail {
-  .results-list {
-    .result-item {
-      border-bottom: 1px solid #f0f0f0;
-      padding: 16px 0;
-
-      &:last-child {
-        border-bottom: none;
-      }
-    }
-
-    .result-meta {
-      margin-bottom: 12px;
-
-      .score-info {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
-        margin-bottom: 8px;
-
-        span {
-          display: flex;
-          align-items: center;
-
-          strong {
-            margin-right: 8px;
-            white-space: nowrap;
-            color: #666;
-          }
-
-          .ant-progress {
-            width: 170px;
-            margin-bottom: 0;
-            margin-inline: 10px;
-
-            .ant-progress-bg {
-              background-color: #666;
-            }
-          }
-        }
-      }
-
-      .result-url {
-        font-size: 12px;
-        color: #1677FF;
-        margin-bottom: 8px;
-        word-break: break-all;
-      }
-    }
-
-    .result-content {
-      .result-title {
-        font-size: 16px;
-        font-weight: bold;
-        margin-bottom: 8px;
-        color: #333;
-      }
-
-      .result-text {
-        font-size: 14px;
-        line-height: 1.6;
-        white-space: pre-wrap;
-        word-break: break-word;
-        background-color: #f9f9f9;
-        padding: 12px;
-        border-radius: 4px;
-        border: 1px solid #e8e8e8;
-      }
-    }
   }
 }
 </style>
\ No newline at end of file
diff --git a/web/src/components/RefsSidebar.vue b/web/src/components/RefsSidebar.vue
new file mode 100644
index 00000000..773b684e
--- /dev/null
+++ b/web/src/components/RefsSidebar.vue
@@ -0,0 +1,426 @@
+<template>
+  <div>
+    <a-drawer
+      :open="visible"
+      title="参考信息"
+      :width="700"
+      :contentWrapperStyle="{ maxWidth: '100%'}"
+      placement="right"
+      class="refs-sidebar"
+      rootClassName="root"
+      @close="$emit('update:visible', false)"
+      @afterOpenChange="handleAfterVisibleChange"
+    >
+      <a-tabs v-model:activeKey="activeTab">
+        <!-- 关系图 -->
+        <a-tab-pane key="graph" tab="关系图" :disabled="!hasGraphData">
+          <div v-if="hasGraphData" class="graph-container">
+            <GraphContainer :graphData="latestRefs.graph_base.results" ref="graphContainerRef" />
+          </div>
+          <div v-else class="empty-data">
+            <p>当前对话没有关系图数据</p>
+          </div>
+        </a-tab-pane>
+
+        <!-- 网页搜索 -->
+        <a-tab-pane key="webSearch" tab="网页搜索" :disabled="!hasWebSearchData">
+          <div v-if="hasWebSearchData" class="results-list">
+            <div v-for="result in latestRefs.web_search.results" :key="result.url" class="result-item">
+              <div class="result-meta">
+                <div class="score-info">
+                  <span>
+                    <strong>相关度：</strong>
+                    <a-progress :percent="getPercent(result.score)"/>
+                  </span>
+                </div>
+              </div>
+              <div class="result-content">
+                <h3 class="result-title">{{ result.title }}</h3>
+                <div class="result-url">
+                  <a :href="result.url" target="_blank">{{ result.url }}</a>
+                </div>
+                <div class="result-text">{{ result.content }}</div>
+              </div>
+            </div>
+          </div>
+          <div v-else class="empty-data">
+            <p>当前对话没有网页搜索数据</p>
+          </div>
+        </a-tab-pane>
+
+        <!-- 知识库 -->
+        <a-tab-pane key="knowledgeBase" tab="知识库" :disabled="!hasKnowledgeBaseData">
+          <div v-if="hasKnowledgeBaseData">
+            <div class="file-list">
+              <a-collapse v-model:activeKey="activeFiles">
+                <a-collapse-panel
+                  v-for="(results, filename) in groupedKnowledgeResults"
+                  :key="filename"
+                  :header="filename"
+                >
+                  <div class="fileinfo" v-if="results.length > 0">
+                    <p><FileOutlined /> {{ results[0].file.type }}</p>
+                    <p><ClockCircleOutlined /> {{ formatDate(results[0].file.created_at) }}</p>
+                  </div>
+                  <div class="results-list">
+                    <div v-for="res in results" :key="res.id" class="result-item">
+                      <div class="result-meta">
+                        <div class="score-info">
+                          <span>
+                            <strong>相似度：</strong>
+                            <a-progress :percent="getPercent(res.distance)"/>
+                          </span>
+                          <span v-if="res.rerank_score">
+                            <strong>重排序：</strong>
+                            <a-progress :percent="getPercent(res.rerank_score)"/>
+                          </span>
+                        </div>
+                        <div class="result-id">ID: #{{ res.id }}</div>
+                      </div>
+                      <div class="result-text">{{ res.entity.text }}</div>
+                    </div>
+                  </div>
+                </a-collapse-panel>
+              </a-collapse>
+            </div>
+          </div>
+          <div v-else class="empty-data">
+            <p>当前对话没有知识库查询数据</p>
+          </div>
+        </a-tab-pane>
+      </a-tabs>
+    </a-drawer>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, reactive, watch, nextTick } from 'vue'
+import {
+  FileOutlined,
+  ClockCircleOutlined,
+} from '@ant-design/icons-vue'
+import GraphContainer from './GraphContainer.vue'
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  latestRefs: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const emit = defineEmits(['update:visible'])
+
+// 标签页相关
+const activeTab = ref('graph')
+const activeFiles = ref([])
+
+// 计算属性：是否有各类数据
+const hasGraphData = computed(() => {
+  try {
+    return !!(props.latestRefs &&
+      props.latestRefs.graph_base &&
+      props.latestRefs.graph_base.results &&
+      props.latestRefs.graph_base.results.nodes &&
+      Array.isArray(props.latestRefs.graph_base.results.nodes) &&
+      props.latestRefs.graph_base.results.nodes.length > 0);
+  } catch (e) {
+    console.error('Error checking graph data:', e);
+    return false;
+  }
+})
+
+const hasWebSearchData = computed(() => {
+  try {
+    // 更加容忍数据结构的不完整
+    return !!(props.latestRefs &&
+      props.latestRefs.web_search &&
+      Array.isArray(props.latestRefs.web_search.results) &&
+      props.latestRefs.web_search.results.length > 0);
+  } catch (e) {
+    console.error('Error checking web search data:', e);
+    return false;
+  }
+})
+
+const hasKnowledgeBaseData = computed(() => {
+  try {
+    return !!(props.latestRefs &&
+      props.latestRefs.knowledge_base &&
+      props.latestRefs.knowledge_base.results &&
+      Array.isArray(props.latestRefs.knowledge_base.results) &&
+      props.latestRefs.knowledge_base.results.length > 0);
+  } catch (e) {
+    console.error('Error checking knowledge base data:', e);
+    return false;
+  }
+})
+
+// 知识库结果按文件分组
+const groupedKnowledgeResults = computed(() => {
+  if (!hasKnowledgeBaseData.value) return {}
+
+  return props.latestRefs.knowledge_base.results
+    .filter(result => result.file && result.file.filename)
+    .reduce((acc, result) => {
+      const { filename } = result.file
+      if (!acc[filename]) {
+        acc[filename] = []
+      }
+      acc[filename].push(result)
+      return acc
+    }, {})
+})
+
+// 自动选择有数据的第一个标签页
+watch(() => props.visible, (newValue) => {
+  console.log('RefsSidebar visible changed to', newValue, 'activeTab is', activeTab.value);
+
+  if (newValue) {
+    console.log('Checking which tabs are available');
+    // 只有在activeTab无效的情况下才自动选择标签页
+    const currentTabValid =
+      (activeTab.value === 'graph' && hasGraphData.value) ||
+      (activeTab.value === 'webSearch' && hasWebSearchData.value) ||
+      (activeTab.value === 'knowledgeBase' && hasKnowledgeBaseData.value);
+
+    if (!currentTabValid) {
+      console.log('Current tab is invalid, finding first available tab');
+      // 当前标签无效，需要寻找一个有效的标签
+      if (hasGraphData.value) {
+        console.log('Selected graph tab');
+        activeTab.value = 'graph';
+      } else if (hasWebSearchData.value) {
+        console.log('Selected webSearch tab');
+        activeTab.value = 'webSearch';
+      } else if (hasKnowledgeBaseData.value) {
+        console.log('Selected knowledgeBase tab');
+        activeTab.value = 'knowledgeBase';
+        // 打开第一个文件
+        if (Object.keys(groupedKnowledgeResults.value).length > 0) {
+          activeFiles.value = [Object.keys(groupedKnowledgeResults.value)[0]];
+        }
+      } else {
+        console.log('No valid tabs available');
+      }
+    } else {
+      console.log('Current tab is valid, keeping it:', activeTab.value);
+    }
+  }
+});
+
+// 百分比计算函数
+const getPercent = (value) => {
+  return parseFloat((value * 100).toFixed(2))
+}
+
+// 日期格式化函数
+const formatDate = (timestamp) => {
+  return new Date(timestamp * 1000).toLocaleString()
+}
+
+// 手动设置活动标签页
+const setActiveTab = (tab) => {
+  console.log('RefsSidebar setActiveTab called with tab:', tab);
+  console.log('Current tabs available:', {
+    graph: hasGraphData.value,
+    webSearch: hasWebSearchData.value,
+    knowledgeBase: hasKnowledgeBaseData.value
+  });
+  console.log('Full latestRefs structure:', JSON.stringify(props.latestRefs));
+
+  // 如果要设置的标签是有效的，直接设置
+  if ((tab === 'graph' && hasGraphData.value) ||
+      (tab === 'webSearch' && hasWebSearchData.value) ||
+      (tab === 'knowledgeBase' && hasKnowledgeBaseData.value)) {
+    console.log('Setting activeTab to:', tab);
+    activeTab.value = tab;
+  } else {
+    console.warn(`Cannot set tab to ${tab}, tab is disabled or invalid`);
+
+    // 如果特定标签数据不可用，但数据存在，尝试强制启用相应标签
+    if (tab === 'webSearch' && props.latestRefs.web_search) {
+      console.log('Forcing webSearch tab even though hasWebSearchData is false');
+      activeTab.value = 'webSearch';
+    } else if (tab === 'knowledgeBase' && props.latestRefs.knowledge_base) {
+      console.log('Forcing knowledgeBase tab even though hasKnowledgeBaseData is false');
+      activeTab.value = 'knowledgeBase';
+    } else if (tab === 'graph' && props.latestRefs.graph_base) {
+      console.log('Forcing graph tab even though hasGraphData is false');
+      activeTab.value = 'graph';
+    }
+  }
+}
+
+// 图表ref
+const graphContainerRef = ref(null);
+
+// 处理抽屉完全打开后的事件
+const handleAfterVisibleChange = (visible) => {
+  console.log('RefsSidebar afterOpenChange fired, visible:', visible, 'activeTab:', activeTab.value);
+
+  if (!visible) return;
+
+  // 根据当前活动标签页执行相应的刷新操作
+  nextTick(() => {
+    if (activeTab.value === 'graph' && hasGraphData.value) {
+      console.log('Refreshing graph after drawer opened');
+      // 触发图表容器的重新布局
+      if (graphContainerRef.value && graphContainerRef.value.refreshGraph) {
+        graphContainerRef.value.refreshGraph();
+      }
+    } else {
+      console.log('Current active tab is', activeTab.value, 'no need to refresh graph');
+    }
+  });
+};
+
+// 监听标签页变化
+watch(activeTab, (newTab) => {
+  if (newTab === 'graph' && hasGraphData.value && props.visible) {
+    // 切换到图表标签时，需要延迟一下重新渲染图表
+    nextTick(() => {
+      if (graphContainerRef.value && graphContainerRef.value.refreshGraph) {
+        graphContainerRef.value.refreshGraph();
+      }
+    });
+  }
+});
+
+// 监视latestRefs的变化，便于调试
+watch(() => props.latestRefs, (newRefs) => {
+  console.log('RefsSidebar latestRefs changed:', {
+    hasGraph: hasGraphData.value,
+    hasWeb: hasWebSearchData.value,
+    hasKB: hasKnowledgeBaseData.value,
+    graph: newRefs.graph_base?.results?.nodes?.length,
+    web: newRefs.web_search?.results?.length,
+    kb: newRefs.knowledge_base?.results?.length
+  });
+}, { deep: true });
+
+// 向父组件暴露方法
+defineExpose({
+  setActiveTab
+})
+</script>
+
+<style lang="less" scoped>
+.refs-sidebar {
+  .empty-data {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 200px;
+    color: #999;
+    font-size: 14px;
+    background-color: #f9f9f9;
+    border-radius: 4px;
+  }
+
+  .graph-container {
+    min-height: 500px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .fileinfo {
+    display: flex;
+    justify-content: space-between;
+    padding: 12px 16px;
+    background-color: #f5f5f5;
+    border-radius: 4px;
+    margin-bottom: 16px;
+
+    p {
+      margin: 0;
+      color: #666;
+    }
+  }
+
+  .results-list {
+    .result-item {
+      border-bottom: 1px solid #f0f0f0;
+      padding: 16px 0;
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+
+    .result-meta {
+      margin-bottom: 12px;
+
+      .score-info {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 2rem;
+        margin-bottom: 8px;
+
+        span {
+          display: flex;
+          align-items: center;
+
+          strong {
+            margin-right: 8px;
+            white-space: nowrap;
+            color: #666;
+          }
+
+          .ant-progress {
+            width: 170px;
+            margin-bottom: 0;
+            margin-inline: 10px;
+
+            .ant-progress-bg {
+              background-color: #666;
+            }
+          }
+        }
+      }
+
+      .result-id {
+        font-size: 12px;
+        color: #999;
+        margin-bottom: 8px;
+      }
+    }
+
+    .result-content {
+      .result-title {
+        font-size: 16px;
+        font-weight: bold;
+        margin-bottom: 8px;
+        color: #333;
+      }
+
+
+      .result-url {
+        font-size: 12px;
+        color: #0563e7;
+        margin-bottom: 8px;
+        a {
+          color: #0563e7;
+          word-break: break-all;
+        }
+      }
+
+      .result-text {
+        font-size: 14px;
+        line-height: 1.6;
+        white-space: pre-wrap;
+        word-break: break-word;
+        background-color: #f9f9f9;
+        padding: 12px;
+        border-radius: 4px;
+        border: 1px solid #e8e8e8;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file