feat: 实现引用功能并优化相关组件

codedogQBY · codedogQBY · commit d0bf4a2bb3aa · 2026-03-03T00:55:28.000+08:00
diff --git a/packages/app/src/components/chat/ChatPage.tsx b/packages/app/src/components/chat/ChatPage.tsx
@@ -5,6 +5,7 @@ import { useStreamingChat } from "@/hooks/use-streaming-chat";
 import { convertToMessageV2, mergeMessagesWithStreaming } from "@/lib/chat-utils";
 import { useChatReaderStore } from "@/stores/chat-reader-store";
 import { useChatStore } from "@/stores/chat-store";
+import type { CitationPart } from "@/types";
 import {
   BookOpen,
   Brain,
@@ -207,6 +208,12 @@ export function ChatPage() {
     setGeneralActiveThread(null);
   }, [setGeneralActiveThread]);
 
+  const handleCitationClick = useCallback((citation: CitationPart) => {
+    // TODO: Navigate to reader page with this citation
+    // For now, log to console. Future enhancement: use router to navigate to /reader/${citation.bookId}?cfi=${citation.cfi}
+    console.log('Citation clicked:', citation);
+  }, []);
+
   const displayMessages = convertToMessageV2(activeThread?.messages || []);
   const allMessages = mergeMessagesWithStreaming(displayMessages, currentMessage, isStreaming);
 
@@ -249,11 +256,12 @@ export function ChatPage() {
         {/* Message list or empty state - consistent container structure */}
         <div className="flex-1 overflow-hidden">
           {allMessages.length > 0 ? (
-            <MessageList 
-              messages={allMessages} 
+            <MessageList
+              messages={allMessages}
               isStreaming={isStreaming}
               currentStep={currentStep}
               onStop={stopStream}
+              onCitationClick={handleCitationClick}
             />
           ) : (
             <EmptyState onSuggestionClick={handleSend} />
diff --git a/packages/app/src/components/chat/ChatPanel.tsx b/packages/app/src/components/chat/ChatPanel.tsx
@@ -4,7 +4,7 @@
 import { useStreamingChat } from "@/hooks/use-streaming-chat";
 import { convertToMessageV2, mergeMessagesWithStreaming } from "@/lib/chat-utils";
 import { useChatStore } from "@/stores/chat-store";
-import type { Book } from "@/types";
+import type { Book, CitationPart } from "@/types";
 import { Brain, History, MessageCirclePlus, Trash2 } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -14,6 +14,7 @@ import { ModelSelector } from "./ModelSelector";
 
 interface ChatPanelProps {
   book?: Book | null;
+  onNavigateToCitation?: (citation: CitationPart) => void;
 }
 
 function formatRelativeTime(ts: number, t: (key: string) => string): string {
@@ -29,7 +30,7 @@ function formatRelativeTime(ts: number, t: (key: string) => string): string {
   return `${months}mo`;
 }
 
-export function ChatPanel({ book }: ChatPanelProps) {
+export function ChatPanel({ book, onNavigateToCitation }: ChatPanelProps) {
   const { t } = useTranslation();
   const bookId = book?.id;
 
@@ -266,11 +267,12 @@ export function ChatPanel({ book }: ChatPanelProps) {
       {/* Messages or empty state */}
       <div className="flex-1 overflow-hidden">
         {allMessages.length > 0 ? (
-          <MessageList 
-            messages={allMessages} 
+          <MessageList
+            messages={allMessages}
             isStreaming={isStreaming}
             currentStep={currentStep}
             onStop={stopStream}
+            onCitationClick={onNavigateToCitation}
           />
         ) : (
           <div className="flex h-full flex-col items-start justify-end gap-3 overflow-y-auto p-4 pb-6">
diff --git a/packages/app/src/components/chat/MarkdownRenderer.tsx b/packages/app/src/components/chat/MarkdownRenderer.tsx
@@ -5,7 +5,7 @@
  * - Mermaid diagrams via beautiful-mermaid (synchronous SVG rendering)
  */
 import { renderMermaidSVG } from "beautiful-mermaid";
-import { Check, Copy } from "lucide-react";
+import { Check, Copy, ArrowUpRight } from "lucide-react";
 import React, { useMemo, useState } from "react";
 import Markdown from "react-markdown";
 import rehypeHighlight from "rehype-highlight";
@@ -108,6 +108,7 @@ function processCitationText(
                 title={`${citation.chapterTitle}: ${citation.text.slice(0, 50)}${citation.text.length > 50 ? "..." : ""}`}
               >
                 [{num}]
+                <ArrowUpRight className="inline h-2.5 w-2.5 ml-0.5" />
               </button>
             );
           }
diff --git a/packages/app/src/components/chat/PartRenderer.tsx b/packages/app/src/components/chat/PartRenderer.tsx
@@ -76,7 +76,9 @@ export function PartRenderer({ part, citations, onCitationClick }: PartProps) {
     case "tool_call":
       return <ToolCallPartView part={part} />;
     case "citation":
-      return <CitationPartView part={part} onCitationClick={onCitationClick} />;
+      // Don't render citation parts as standalone cards
+      // Citations are rendered inline in text via MarkdownRenderer
+      return null;
     case "mindmap":
       return <MindmapPartView part={part} />;
     default:
diff --git a/packages/app/src/components/reader/ReaderView.tsx b/packages/app/src/components/reader/ReaderView.tsx
@@ -27,7 +27,7 @@ import { useLibraryStore } from "@/stores/library-store";
 import { useReaderStore } from "@/stores/reader-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { useNotebookStore } from "@/stores/notebook-store";
-import type { HighlightColor } from "@/types";
+import type { HighlightColor, CitationPart } from "@/types";
 import { X } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -939,6 +939,25 @@ export function ReaderView({ bookId, tabId }: ReaderViewProps) {
     });
   }, []);
 
+  const handleNavigateToCitation = useCallback((citation: CitationPart) => {
+    // Validate CFI before attempting navigation
+    if (!citation.cfi || citation.cfi.trim() === "") {
+      console.warn("Citation has no valid CFI, cannot navigate:", {
+        chapterTitle: citation.chapterTitle,
+        chapterIndex: citation.chapterIndex,
+        text: citation.text.slice(0, 50),
+      });
+      // TODO: Consider fallback navigation using chapter index
+      return;
+    }
+
+    try {
+      foliateRef.current?.goToCFI(citation.cfi);
+    } catch (error) {
+      console.error("Failed to navigate to citation:", error, citation);
+    }
+  }, []);
+
   if (!readerTab) {
     return <div className="flex h-full items-center justify-center">{t("common.loading")}</div>;
   }
@@ -1180,7 +1199,7 @@ export function ReaderView({ bookId, tabId }: ReaderViewProps) {
             </button>
           </div>
           <div className="flex-1 overflow-hidden">
-            <ChatPanel book={book} />
+            <ChatPanel book={book} onNavigateToCitation={handleNavigateToCitation} />
           </div>
         </div>
       )}
diff --git a/packages/app/src/hooks/use-streaming-chat.ts b/packages/app/src/hooks/use-streaming-chat.ts
@@ -3,14 +3,15 @@ import { useChatStore } from "@/stores/chat-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { getSkills as getDbSkills } from "@/lib/db/database";
 import { getBuiltinSkills } from "@/lib/ai/skills/builtin-skills";
-import type { Book, SemanticContext, Skill, Thread, Part, TextPart, ToolCallPart, MessageV2, ReasoningPart } from "@/types";
+import type { Book, SemanticContext, Skill, Thread, Part, TextPart, ToolCallPart, MessageV2, ReasoningPart, CitationPart } from "@/types";
 import { useCallback, useRef, useState } from "react";
 import {
   createTextPart,
   createReasoningPart,
   createToolCallPart,
   createQuotePart,
   createMindmapPart,
+  createCitationPart,
 } from "@/types/message";
 import type { AttachedQuote } from "@/components/chat/ChatInput";
 
@@ -241,6 +242,17 @@ export function useStreamingChat(options?: StreamingChatOptions) {
                   markdown: (p as import("@/types/message").MindmapPart).markdown,
                 };
               }
+              if (p.type === "citation") {
+                // Store citation data so it can be reconstructed from database
+                return {
+                  ...base,
+                  bookId: (p as CitationPart).bookId,
+                  chapterTitle: (p as CitationPart).chapterTitle,
+                  chapterIndex: (p as CitationPart).chapterIndex,
+                  cfi: (p as CitationPart).cfi,
+                  text: (p as CitationPart).text,
+                };
+              }
               return base;
             });
 
@@ -301,11 +313,33 @@ export function useStreamingChat(options?: StreamingChatOptions) {
               .map((p) => (p as TextPart).text)
               .join("\n");
 
-            const partsOrder = currentParts.map((p) => ({
-              type: p.type as "text" | "reasoning" | "tool_call" | "citation" | "mindmap",
-              id: p.id,
-              ...(p.type === "text" ? { text: (p as TextPart).text } : {}),
-            }));
+            const partsOrder = currentParts.map((p) => {
+              const base = {
+                type: p.type as "text" | "reasoning" | "tool_call" | "citation" | "mindmap",
+                id: p.id,
+              };
+              if (p.type === "text") {
+                return { ...base, text: (p as TextPart).text };
+              }
+              if (p.type === "mindmap") {
+                return {
+                  ...base,
+                  title: (p as import("@/types/message").MindmapPart).title,
+                  markdown: (p as import("@/types/message").MindmapPart).markdown,
+                };
+              }
+              if (p.type === "citation") {
+                return {
+                  ...base,
+                  bookId: (p as CitationPart).bookId,
+                  chapterTitle: (p as CitationPart).chapterTitle,
+                  chapterIndex: (p as CitationPart).chapterIndex,
+                  cfi: (p as CitationPart).cfi,
+                  text: (p as CitationPart).text,
+                };
+              }
+              return base;
+            });
 
             const errorMessage = {
               id: messageId,
@@ -408,6 +442,23 @@ export function useStreamingChat(options?: StreamingChatOptions) {
               currentStep: "thinking",
             }));
           },
+          onCitation: (citation) => {
+            // Create a CitationPart for each citation event
+            const citationPart = createCitationPart(
+              citation.bookId,
+              citation.chapterTitle,
+              citation.chapterIndex,
+              citation.cfi,
+              citation.text
+            );
+            currentParts.push(citationPart);
+            setState((prev) => ({
+              ...prev,
+              currentMessage: prev.currentMessage
+                ? { ...prev.currentMessage, parts: [...currentParts] }
+                : null,
+            }));
+          },
         });
       } catch (err) {
         setError(err instanceof Error ? err : new Error("Unknown error"));
diff --git a/packages/app/src/lib/ai/agents/reading-agent.ts b/packages/app/src/lib/ai/agents/reading-agent.ts
@@ -27,7 +27,17 @@ export type AgentStreamEvent =
       content: string;
       stepType: "thinking" | "planning" | "analyzing" | "deciding";
     }
-  | { type: "citation"; citation: { id: string; chapterTitle: string; text: string; cfi: string } }
+  | {
+      type: "citation";
+      citation: {
+        id: string;
+        bookId: string;
+        chapterTitle: string;
+        chapterIndex: number;
+        cfi: string;
+        text: string;
+      };
+    }
   | { type: "error"; error: string };
 
 export interface ReadingAgentOptions {
@@ -319,6 +329,25 @@ export async function* streamReadingAgent(
         } catch {
           /* keep as string */
         }
+
+        // Emit citation event for addCitation tool results
+        if (event.name === "addCitation" && result && typeof result === "object") {
+          const citationData = result as Record<string, unknown>;
+          if (citationData.type === "citation") {
+            yield {
+              type: "citation",
+              citation: {
+                id: `citation-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+                bookId: citationData.bookId as string,
+                chapterTitle: citationData.chapterTitle as string,
+                chapterIndex: citationData.chapterIndex as number,
+                cfi: citationData.cfi as string,
+                text: citationData.text as string,
+              },
+            };
+          }
+        }
+
         yield { type: "tool_result", name: event.name, result };
       }
     }
diff --git a/packages/app/src/lib/ai/streaming.ts b/packages/app/src/lib/ai/streaming.ts
@@ -24,6 +24,14 @@ export interface StreamingOptions {
   onToolCall?: (toolName: string, args: Record<string, unknown>) => void;
   onToolResult?: (toolName: string, result: unknown) => void;
   onReasoning?: (content: string, type?: "thinking" | "planning" | "analyzing" | "deciding") => void;
+  onCitation?: (citation: {
+    id: string;
+    bookId: string;
+    chapterTitle: string;
+    chapterIndex: number;
+    cfi: string;
+    text: string;
+  }) => void;
 }
 
 export class StreamingChat {
@@ -97,6 +105,7 @@ export class StreamingChat {
             break;
 
           case "citation":
+            options.onCitation?.(event.citation);
             break;
 
           case "error":
diff --git a/packages/app/src/lib/ai/tools.ts b/packages/app/src/lib/ai/tools.ts
@@ -105,7 +105,7 @@ function createRagContextTool(bookId: string): ToolDefinition {
   return {
     name: "ragContext",
     description:
-      "Get surrounding text context for a specific chapter. Use this when the user asks about content near a specific location.",
+      "Get surrounding text context for a specific chapter. Use this when the user asks about content near a specific location. Returns chunks with CFI information - use the CFI from the chunk containing your quoted text when calling addCitation.",
     parameters: {
       chapterIndex: { type: "number", description: "The chapter index", required: true },
       range: {
@@ -125,7 +125,12 @@ function createRagContextTool(bookId: string): ToolDefinition {
 
       return {
         chapterTitle: chapterChunks[0]?.chapterTitle || "Unknown",
+        chapterIndex: chapterIndex,
         context: contextChunks.map((c) => c.content).join("\n\n"),
+        chunks: contextChunks.map((c) => ({
+          content: c.content,
+          cfi: c.startCfi || "",
+        })),
         chunksIncluded: contextChunks.length,
       };
     },
diff --git a/packages/app/src/lib/chat-utils.ts b/packages/app/src/lib/chat-utils.ts
@@ -90,6 +90,19 @@ export function convertToMessageV2(messages: any[]): MessageV2[] {
             }
             break;
           }
+          case "citation":
+            parts.push({
+              id: entry.id,
+              type: "citation",
+              bookId: entry.bookId,
+              chapterTitle: entry.chapterTitle,
+              chapterIndex: entry.chapterIndex,
+              cfi: entry.cfi,
+              text: entry.text,
+              status: "completed",
+              createdAt: m.createdAt,
+            });
+            break;
           case "mindmap":
             parts.push({
               id: entry.id,
diff --git a/packages/app/src/lib/rag/vectorize-trigger.ts b/packages/app/src/lib/rag/vectorize-trigger.ts
@@ -67,7 +67,7 @@ export async function triggerVectorizeBook(
         targetTokens: 300,
         minTokens: 50,
         overlapRatio: 0.2,
-      });
+      }, chapter.segments);
       allChunks.push(...chunks);
     }
 
