From 742180989793563aa53e4d023fd75d142818f087 Mon Sep 17 00:00:00 2001
From: deepinsect <deepinsect@github.com>
Date: Tue, 25 Feb 2025 13:45:34 +0800
Subject: [PATCH] compelete

---
 package.json                                  |  1 +
 src/main/presenter/threadPresenter/index.ts   |  6 ++
 src/renderer/index.html                       |  2 +-
 .../src/components/SearchResultsDrawer.vue    | 71 +++++++++++++++++
 .../message/MessageBlockContent.vue           | 53 ++++++++++++-
 .../components/message/MessageBlockSearch.vue | 18 ++++-
 .../message/MessageItemAssistant.vue          | 19 ++++-
 .../components/message/ReferencePreview.vue   | 79 +++++++++++++++++++
 src/renderer/src/i18n/en-US.json              |  4 +-
 src/renderer/src/i18n/ja-JP.json              |  4 +-
 src/renderer/src/i18n/ko-KR.json              |  4 +-
 src/renderer/src/i18n/ru-RU.json              |  4 +-
 src/renderer/src/i18n/zh-CN.json              |  4 +-
 src/renderer/src/i18n/zh-HK.json              |  4 +-
 src/renderer/src/lib/markdown.helper.ts       | 56 ++++++++++++-
 src/shared/presenter.d.ts                     |  2 +
 16 files changed, 319 insertions(+), 12 deletions(-)
 create mode 100644 src/renderer/src/components/SearchResultsDrawer.vue
 create mode 100644 src/renderer/src/components/message/ReferencePreview.vue

diff --git a/package.json b/package.json
index a431669..76fab6a 100644
--- a/package.json
+++ b/package.json
@@ -75,6 +75,7 @@
     "katex": "^0.16.21",
     "lucide-vue-next": "^0.474.0",
     "markdown-it": "^14.1.0",
+    "markdown-it-footnote": "^4.0.0",
     "markdown-it-mathjax3": "^4.3.2",
     "markdown-it-texmath": "^1.0.0",
     "marked": "^15.0.7",
diff --git a/src/main/presenter/threadPresenter/index.ts b/src/main/presenter/threadPresenter/index.ts
index 47f622c..b74dd34 100644
--- a/src/main/presenter/threadPresenter/index.ts
+++ b/src/main/presenter/threadPresenter/index.ts
@@ -677,6 +677,12 @@ export class ThreadPresenter implements IThreadPresenter {
     return await this.messageManager.getLastUserMessage(conversationId)
   }
 
+  // 从数据库获取搜索结果
+  async getSearchResults(messageId: string): Promise<SearchResult[]> {
+    const results = await this.sqlitePresenter.getMessageAttachments(messageId, 'search_result')
+    return results.map((result) => JSON.parse(result.content) as SearchResult) ?? []
+  }
+
   async startStreamCompletion(conversationId: string, queryMsgId?: string) {
     const state = Array.from(this.generatingMessages.values()).find(
       (state) => state.conversationId === conversationId
diff --git a/src/renderer/index.html b/src/renderer/index.html
index 3e4ebf2..1ea446f 100644
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@@ -6,7 +6,7 @@
     <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
     <meta
       http-equiv="Content-Security-Policy"
-      content="script-src 'self'; style-src 'self' 'unsafe-inline'"
+      content="script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'"
     />
   </head>
 
diff --git a/src/renderer/src/components/SearchResultsDrawer.vue b/src/renderer/src/components/SearchResultsDrawer.vue
new file mode 100644
index 0000000..8047718
--- /dev/null
+++ b/src/renderer/src/components/SearchResultsDrawer.vue
@@ -0,0 +1,71 @@
+<template>
+  <Sheet :open="open" @update:open="$emit('update:open', $event)">
+    <SheetContent
+      class="h-[80vh] overflow-y-auto p-3 sm:p-6 max-w-[600px] rounded-t-lg mx-auto"
+      side="bottom"
+    >
+      <SheetHeader class="space-y-1">
+        <SheetTitle class="text-base sm:text-lg">{{ t('chat.search.title') }}</SheetTitle>
+        <SheetDescription class="text-xs sm:text-sm">
+          {{ t('chat.search.description', [searchResults.length]) }}
+        </SheetDescription>
+      </SheetHeader>
+      <div class="mt-3 sm:mt-4 space-y-3 sm:space-y-4">
+        <div
+          v-for="result in searchResults"
+          :key="result.url"
+          class="p-3 sm:p-4 space-y-1.5 sm:space-y-2 rounded-lg border hover:bg-accent/50 active:bg-accent cursor-pointer transition-colors"
+          @click="openUrl(result.url)"
+        >
+          <div class="flex items-center gap-1.5 sm:gap-2">
+            <img
+              v-if="result.icon"
+              :src="result.icon"
+              class="w-3 h-3 sm:w-4 sm:h-4 rounded"
+              :alt="result.title"
+            />
+            <Icon v-else icon="lucide:globe" class="w-3 h-3 sm:w-4 sm:h-4" />
+            <h3 class="font-medium text-xs sm:text-sm line-clamp-1">{{ result.title }}</h3>
+          </div>
+          <p class="text-xs sm:text-sm text-muted-foreground line-clamp-2">
+            {{ result.description || result.content }}
+          </p>
+          <div
+            class="flex items-center gap-1.5 sm:gap-2 text-[10px] sm:text-xs text-muted-foreground"
+          >
+            <Icon icon="lucide:link" class="w-2.5 h-2.5 sm:w-3 sm:h-3" />
+            <span class="truncate">{{ result.url }}</span>
+          </div>
+        </div>
+      </div>
+    </SheetContent>
+  </Sheet>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { Icon } from '@iconify/vue'
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle
+} from '@/components/ui/sheet'
+import type { SearchResult } from '@shared/presenter'
+
+const { t } = useI18n()
+
+defineProps<{
+  open: boolean
+  searchResults: SearchResult[]
+}>()
+
+defineEmits<{
+  'update:open': [value: boolean]
+}>()
+
+const openUrl = (url: string) => {
+  window.open(url, '_blank')
+}
+</script>
diff --git a/src/renderer/src/components/message/MessageBlockContent.vue b/src/renderer/src/components/message/MessageBlockContent.vue
index 91e1896..93f1a21 100644
--- a/src/renderer/src/components/message/MessageBlockContent.vue
+++ b/src/renderer/src/components/message/MessageBlockContent.vue
@@ -8,14 +8,16 @@
       v-html="renderedContent"
     ></div>
     <LoadingCursor v-show="block.status === 'loading'" ref="loadingCursor" />
+    <ReferencePreview :show="showPreview" :content="previewContent" :rect="previewRect" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, nextTick, watch } from 'vue'
+import { computed, ref, nextTick, watch, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import {
   createCodeBlockRenderer,
+  initReference,
   renderMarkdown
   // enableDebugRendering
 } from '@/lib/markdown.helper'
@@ -49,13 +51,47 @@ import { EditorState } from '@codemirror/state'
 import { v4 as uuidv4 } from 'uuid'
 import { anysphereTheme } from '@/lib/code.theme'
 import LoadingCursor from '@/components/LoadingCursor.vue'
+import { usePresenter } from '@/composables/usePresenter'
+import { SearchResult } from '@shared/presenter'
+import ReferencePreview from './ReferencePreview.vue'
 // import mk from '@vscode/markdown-it-katex'
 // import 'katex/dist/katex.min.css'
 
+const threadPresenter = usePresenter('threadPresenter')
+const searchResults = ref<SearchResult[]>([])
+
 const id = ref(`editor-${uuidv4()}`)
 
 const loadingCursor = ref<InstanceType<typeof LoadingCursor> | null>(null)
 
+const previewContent = ref<SearchResult | undefined>()
+const showPreview = ref(false)
+const previewRect = ref<DOMRect>()
+
+const onReferenceClick = (id: string) => {
+  const index = parseInt(id) - 1
+  if (searchResults.value && searchResults.value[index]) {
+    // Handle navigation or content display
+    // console.log('Navigate to:', searchResults.value[index])
+    window.open(searchResults.value[index].url, '_blank')
+  }
+}
+
+const onReferenceHover = (id: string, isHover: boolean, rect: DOMRect) => {
+  const index = parseInt(id) - 1
+  // console.log(id, isHover, rect)
+  if (searchResults.value && searchResults.value[index]) {
+    if (isHover) {
+      previewContent.value = searchResults.value[index]
+      previewRect.value = rect
+      showPreview.value = true
+    } else {
+      previewContent.value = undefined
+      showPreview.value = false
+    }
+  }
+}
+
 // Store editor instances for cleanup
 const editorInstances = ref<Map<string, EditorView>>(new Map())
 
@@ -69,6 +105,10 @@ const refreshLoadingCursor = () => {
   }
 }
 
+initReference({
+  onClick: onReferenceClick,
+  onHover: onReferenceHover
+})
 // Remove all the markdown-it configuration and setup
 // Instead, just configure the code block renderer
 createCodeBlockRenderer(t)
@@ -251,6 +291,8 @@ const props = defineProps<{
     content: string
     status?: 'loading'
   }
+  messageId: string
+  isSearchResult?: boolean
 }>()
 
 const renderedContent = computed(() => {
@@ -274,6 +316,12 @@ watch(
   },
   { immediate: true }
 )
+
+onMounted(async () => {
+  if (props.isSearchResult) {
+    searchResults.value = await threadPresenter.getSearchResults(props.messageId)
+  }
+})
 </script>
 
 <style>
@@ -355,4 +403,7 @@ watch(
   @apply block my-4;
   text-align: center;
 }
+.prose .reference-link {
+  @apply inline-block text-xs text-muted-foreground bg-muted rounded-md text-center min-w-4 py-0.5 mx-0.5 hover:bg-accent;
+}
 </style>
diff --git a/src/renderer/src/components/message/MessageBlockSearch.vue b/src/renderer/src/components/message/MessageBlockSearch.vue
index 6173f97..a2e40d8 100644
--- a/src/renderer/src/components/message/MessageBlockSearch.vue
+++ b/src/renderer/src/components/message/MessageBlockSearch.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     class="inline-flex z-0 flex-row gap-2 items-center cursor-pointer h-9 text-xs text-muted-foreground hover:bg-accent px-2 rounded-md"
+    @click="openSearchResults"
   >
     <template v-if="block.status === 'success'">
       <div v-if="block.extra.pages" class="flex flex-row ml-1.5">
@@ -32,14 +33,24 @@
       }}</span>
     </template>
   </div>
+  <SearchResultsDrawer v-model:open="isDrawerOpen" :search-results="searchResults" />
 </template>
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { Icon } from '@iconify/vue'
+import { usePresenter } from '@/composables/usePresenter'
+import { SearchResult } from '@shared/presenter'
+import { ref } from 'vue'
+import SearchResultsDrawer from '../SearchResultsDrawer.vue'
+
 const { t } = useI18n()
+const threadPresenter = usePresenter('threadPresenter')
+const isDrawerOpen = ref(false)
+const searchResults = ref<SearchResult[]>([])
 
-defineProps<{
+const props = defineProps<{
+  messageId: string
   block: {
     status: 'success' | 'loading'
     extra: {
@@ -51,4 +62,9 @@ defineProps<{
     }
   }
 }>()
+
+const openSearchResults = async () => {
+  isDrawerOpen.value = true
+  searchResults.value = await threadPresenter.getSearchResults(props.messageId)
+}
 </script>
diff --git a/src/renderer/src/components/message/MessageItemAssistant.vue b/src/renderer/src/components/message/MessageItemAssistant.vue
index 469de32..5fa97e1 100644
--- a/src/renderer/src/components/message/MessageItemAssistant.vue
+++ b/src/renderer/src/components/message/MessageItemAssistant.vue
@@ -17,13 +17,22 @@
       </div>
       <div v-else class="flex flex-col w-full space-y-2">
         <div v-for="block in currentContent" :key="block.id" class="w-full">
-          <MessageBlockContent v-if="block.type === 'content'" :block="block" />
+          <MessageBlockContent
+            v-if="block.type === 'content'"
+            :block="block"
+            :message-id="message.id"
+            :is-search-result="isSearchResult"
+          />
           <MessageBlockThink
             v-else-if="block.type === 'reasoning_content'"
             :block="block"
             :usage="message.usage"
           />
-          <MessageBlockSearch v-else-if="block.type === 'search'" :block="block" />
+          <MessageBlockSearch
+            v-else-if="block.type === 'search'"
+            :message-id="message.id"
+            :block="block"
+          />
           <MessageBlockError v-else-if="block.type === 'error'" :block="block" />
         </div>
       </div>
@@ -105,6 +114,12 @@ watch(
   }
 )
 
+const isSearchResult = computed(() => {
+  return Boolean(
+    currentContent.value?.some((block) => block.type === 'search' && block.status === 'success')
+  )
+})
+
 onMounted(() => {
   // 默认显示最后一个变体
   currentVariantIndex.value = allVariants.value.length
diff --git a/src/renderer/src/components/message/ReferencePreview.vue b/src/renderer/src/components/message/ReferencePreview.vue
new file mode 100644
index 0000000..cb48908
--- /dev/null
+++ b/src/renderer/src/components/message/ReferencePreview.vue
@@ -0,0 +1,79 @@
+<template>
+  <div
+    v-if="show"
+    ref="previewEl"
+    class="reference-preview fixed z-50 max-w-[384px] bg-popover border rounded-lg shadow-lg p-3 sm:p-4"
+    :style="positionStyle"
+  >
+    <!-- 内容区域 -->
+    <div class="space-y-1.5 sm:space-y-2">
+      <!-- 标题区域 -->
+      <div class="flex items-center gap-1.5 sm:gap-2">
+        <img
+          v-if="content?.icon"
+          :src="content.icon"
+          class="w-3 h-3 sm:w-4 sm:h-4 rounded"
+          :alt="content?.title"
+        />
+        <Icon v-else icon="lucide:globe" class="w-3 h-3 sm:w-4 sm:h-4" />
+        <h3 class="font-medium text-xs sm:text-sm line-clamp-1">{{ content?.title }}</h3>
+      </div>
+
+      <!-- 内容预览 -->
+      <p class="text-xs sm:text-sm text-muted-foreground line-clamp-2">
+        {{ content?.description || content?.content }}
+      </p>
+
+      <!-- 链接信息 -->
+      <div class="flex items-center gap-1.5 text-[10px] sm:text-xs text-muted-foreground">
+        <Icon icon="lucide:link" class="w-2.5 h-2.5 sm:w-3 sm:h-3" />
+        <span class="truncate">{{ content?.url }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { Icon } from '@iconify/vue'
+import { SearchResult } from '@shared/presenter'
+
+const props = defineProps<{
+  show: boolean
+  content: SearchResult | undefined
+  rect?: DOMRect
+}>()
+
+const previewEl = ref<HTMLElement>()
+
+const positionStyle = computed(() => {
+  if (!props.rect) return {}
+
+  // 获取视窗大小
+  const viewportWidth = window.innerWidth
+  const viewportHeight = window.innerHeight
+
+  // 预览框的预计尺寸
+  const previewWidth = 384 // w-96 = 24rem = 384px
+  const previewHeight = previewEl.value?.offsetHeight || 200 // 假设最小高度
+
+  // 计算基础位置
+  let top = props.rect.bottom + window.scrollY + 8
+  let left = props.rect.left + window.scrollX
+
+  // 确保不会超出右边界
+  if (left + previewWidth > viewportWidth) {
+    left = viewportWidth - previewWidth - 16 // 16px 作为安全边距
+  }
+
+  // 如果底部空间不足，就显示在上方
+  if (top + previewHeight > viewportHeight + window.scrollY) {
+    top = props.rect.top + window.scrollY - previewHeight - 8
+  }
+
+  return {
+    top: `${top}px`,
+    left: `${left}px`
+  }
+})
+</script>
diff --git a/src/renderer/src/i18n/en-US.json b/src/renderer/src/i18n/en-US.json
index 9a85dec..127262b 100644
--- a/src/renderer/src/i18n/en-US.json
+++ b/src/renderer/src/i18n/en-US.json
@@ -42,7 +42,9 @@
     },
     "search": {
       "results": "Found {0} web pages",
-      "searching": "Searching..."
+      "searching": "Searching...",
+      "title": "Search Results",
+      "description": "Found {0} related results"
     }
   },
   "model": {
diff --git a/src/renderer/src/i18n/ja-JP.json b/src/renderer/src/i18n/ja-JP.json
index f2c756b..d17720b 100644
--- a/src/renderer/src/i18n/ja-JP.json
+++ b/src/renderer/src/i18n/ja-JP.json
@@ -42,7 +42,9 @@
     },
     "search": {
       "results": "{0}件のウェブページが見つかりました",
-      "searching": "検索中..."
+      "searching": "検索中...",
+      "title": "検索結果",
+      "description": "{0}件の関連結果が見つかりました"
     }
   },
   "model": {
diff --git a/src/renderer/src/i18n/ko-KR.json b/src/renderer/src/i18n/ko-KR.json
index e68c4e4..fd5022f 100644
--- a/src/renderer/src/i18n/ko-KR.json
+++ b/src/renderer/src/i18n/ko-KR.json
@@ -42,7 +42,9 @@
     },
     "search": {
       "results": "{0}개의 웹페이지가 검색되었습니다",
-      "searching": "검색 중..."
+      "searching": "검색 중...",
+      "title": "검색 결과",
+      "description": "{0}개의 관련 결과를 찾았습니다"
     }
   },
   "model": {
diff --git a/src/renderer/src/i18n/ru-RU.json b/src/renderer/src/i18n/ru-RU.json
index 88b93fb..710106c 100644
--- a/src/renderer/src/i18n/ru-RU.json
+++ b/src/renderer/src/i18n/ru-RU.json
@@ -42,7 +42,9 @@
     },
     "search": {
       "results": "Найдено {0} веб-страниц",
-      "searching": "Поиск..."
+      "searching": "Поиск...",
+      "title": "Результаты поиска",
+      "description": "Найдено {0} связанных результатов"
     }
   },
   "model": {
diff --git a/src/renderer/src/i18n/zh-CN.json b/src/renderer/src/i18n/zh-CN.json
index 20c0d0b..0ae5d90 100644
--- a/src/renderer/src/i18n/zh-CN.json
+++ b/src/renderer/src/i18n/zh-CN.json
@@ -42,7 +42,9 @@
     },
     "search": {
       "results": "已搜索到{0}个网页",
-      "searching": "搜索中..."
+      "searching": "搜索中...",
+      "title": "搜索结果",
+      "description": "共找到 {0} 条相关结果"
     }
   },
   "model": {
diff --git a/src/renderer/src/i18n/zh-HK.json b/src/renderer/src/i18n/zh-HK.json
index f3f609c..62a59d7 100644
--- a/src/renderer/src/i18n/zh-HK.json
+++ b/src/renderer/src/i18n/zh-HK.json
@@ -42,7 +42,9 @@
     },
     "search": {
       "results": "已搜索到{0}個網頁",
-      "searching": "搜索中..."
+      "searching": "搜索中...",
+      "title": "搜索結果",
+      "description": "共找到 {0} 條相關結果"
     }
   },
   "model": {
diff --git a/src/renderer/src/lib/markdown.helper.ts b/src/renderer/src/lib/markdown.helper.ts
index 53865eb..0f6b15d 100644
--- a/src/renderer/src/lib/markdown.helper.ts
+++ b/src/renderer/src/lib/markdown.helper.ts
@@ -1,6 +1,6 @@
 import MarkdownIt from 'markdown-it'
 import mathjax3 from 'markdown-it-mathjax3'
-
+// import footnote from 'markdown-it-footnote'
 // Create markdown-it instance with configuration
 const md = new MarkdownIt({
   html: true,
@@ -103,4 +103,58 @@ export const enableDebugRendering = () => {
   }
 }
 
+// Custom reference inline rule
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const referenceInline = (state: any, silent: boolean) => {
+  if (state.src[state.pos] !== '[') return false
+
+  const match = /^\[(\d+)\]/.exec(state.src.slice(state.pos))
+  if (!match) return false
+
+  if (!silent) {
+    const id = match[1]
+    const token = state.push('reference', 'span', 0)
+    token.content = id
+    token.markup = match[0]
+  }
+
+  state.pos += match[0].length
+  return true
+}
+
+// Add rendering rule for references
+md.renderer.rules.reference = (tokens, idx) => {
+  const id = tokens[idx].content
+  return `<span class="reference-link" 
+    data-reference-id="${id}" 
+    role="button" 
+    tabindex="0"
+    title="Click to view reference"
+    onclick="window.handleReferenceClick(${id}, event)"
+    onmouseover="window.handleReferenceHover(${id}, true, event)"
+    onmouseout="window.handleReferenceHover(${id}, false, event)">${id}</span>`
+}
+
+// Register custom rule
+md.inline.ruler.before('escape', 'reference', referenceInline)
+
+export const initReference = ({
+  onClick,
+  onHover
+}: {
+  onClick: (id: string, rect: DOMRect) => void
+  onHover: (id: string, isHover: boolean, rect: DOMRect) => void
+}) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ;(window as any).handleReferenceClick = (id: string, event: MouseEvent) => {
+    const rect = (event.target as HTMLElement).getBoundingClientRect()
+    onClick(id, rect)
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ;(window as any).handleReferenceHover = (id: string, isHover: boolean, event: MouseEvent) => {
+    const rect = (event.target as HTMLElement).getBoundingClientRect()
+    onHover(id, isHover, rect)
+  }
+}
+
 export const renderMarkdown = (content: string) => md.render(content)
diff --git a/src/shared/presenter.d.ts b/src/shared/presenter.d.ts
index 1fea6f0..2828964 100644
--- a/src/shared/presenter.d.ts
+++ b/src/shared/presenter.d.ts
@@ -245,6 +245,8 @@ export interface IThreadPresenter {
   setActiveConversation(conversationId: string): Promise<void>
   getActiveConversation(): Promise<CONVERSATION | null>
 
+  getSearchResults(messageId: string): Promise<SearchResult[]>
+
   // 消息操作
   getMessages(
     conversationId: string,