feat(chat): 基于 RAG 的笔记内容 AI 问答功能

实现类似 Google NotebookLM 的效果：笔记生成后自动向量化，
用户可针对笔记内容进行 LLM 问答。

### 后端
- 新增 VectorStoreManager（ChromaDB），按标题/转录分块建立向量索引
- 新增 chat_service.py RAG 问答：检索相关片段 → 构建 prompt → 调用 LLM
- 新增 /chat/index, /chat/ask, /chat/status API 端点
- 笔记生成完成后自动建立向量索引

### 前端
- 使用 @ant-design/x Bubble.List + Sender 组件构建聊天面板
- 新增 chatStore（Zustand + persist）持久化聊天记录
- MarkdownViewer 右侧嵌入 ChatPanel，通过"AI 问答"按钮切换
- 首次打开自动检查/触发索引，支持重新索引

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

BillNote_frontend/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@ant-design/x": "^2.4.0",
     "@hookform/resolvers": "^5.0.1",
     "@lobehub/icons": "^1.97.1",
     "@lobehub/icons-static-svg": "^1.45.0",

BillNote_frontend/src/pages/HomePage/components/ChatPanel.tsx

@@ -0,0 +1,257 @@
+import { useState, useEffect, useCallback, useMemo } from 'react'
+import { Bubble, Sender } from '@ant-design/x'
+import type { BubbleProps } from '@ant-design/x'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Loader2, Trash2, ChevronDown, ChevronUp, BookOpen, UserRound, Bot } from 'lucide-react'
+import { toast } from 'react-hot-toast'
+import { useChatStore } from '@/store/chatStore'
+import { useTaskStore } from '@/store/taskStore'
+import { askQuestion, getChatStatus, indexTask, type ChatSource } from '@/services/chat'
+
+interface ChatPanelProps {
+  taskId: string
+}
+
+function SourceBadges({ sources }: { sources: ChatSource[] }) {
+  const [expanded, setExpanded] = useState(false)
+
+  if (!sources || sources.length === 0) return null
+
+  return (
+    <div className="mt-1.5">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="flex items-center gap-1 text-xs text-neutral-400 hover:text-neutral-600"
+      >
+        <BookOpen className="h-3 w-3" />
+        <span>引用来源 ({sources.length})</span>
+        {expanded ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
+      </button>
+      {expanded && (
+        <div className="mt-1 flex flex-wrap gap-1">
+          {sources.map((s, i) => (
+            <Badge key={i} variant="outline" className="text-xs font-normal">
+              {s.source_type === 'markdown'
+                ? s.section_title || '笔记'
+                : `${(s.start_time ?? 0).toFixed(0)}s ~ ${(s.end_time ?? 0).toFixed(0)}s`}
+            </Badge>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default function ChatPanel({ taskId }: ChatPanelProps) {
+  const [input, setInput] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [indexing, setIndexing] = useState(false)
+  const [indexed, setIndexed] = useState<boolean | null>(null)
+
+  const messages = useChatStore(state => state.chatHistory[taskId] || [])
+  const addMessage = useChatStore(state => state.addMessage)
+  const clearChat = useChatStore(state => state.clearChat)
+
+  const currentTask = useTaskStore(state => state.getCurrentTask())
+
+  // 检查索引状态
+  useEffect(() => {
+    if (!taskId) return
+    let cancelled = false
+
+    const check = async () => {
+      try {
+        const res = await getChatStatus(taskId)
+        if (cancelled) return
+        if (res.indexed) {
+          setIndexed(true)
+        } else {
+          setIndexing(true)
+          await indexTask(taskId)
+          if (!cancelled) {
+            setIndexed(true)
+            setIndexing(false)
+          }
+        }
+      } catch {
+        if (!cancelled) {
+          setIndexed(false)
+          setIndexing(false)
+        }
+      }
+    }
+
+    check()
+    return () => {
+      cancelled = true
+    }
+  }, [taskId])
+
+  const handleSend = useCallback(
+    async (value: string) => {
+      const question = value.trim()
+      if (!question || loading) return
+
+      const providerId = currentTask?.formData?.provider_id
+      const modelName = currentTask?.formData?.model_name
+      if (!providerId || !modelName) {
+        toast.error('无法获取模型配置，请确认任务已完成')
+        return
+      }
+
+      addMessage(taskId, { role: 'user', content: question })
+      setInput('')
+      setLoading(true)
+
+      try {
+        const history = messages.map(m => ({ role: m.role, content: m.content }))
+        const res = await askQuestion({
+          task_id: taskId,
+          question,
+          history,
+          provider_id: providerId,
+          model_name: modelName,
+        })
+        addMessage(taskId, {
+          role: 'assistant',
+          content: res.answer,
+          sources: res.sources,
+        })
+      } catch {
+        toast.error('问答请求失败')
+      } finally {
+        setLoading(false)
+      }
+    },
+    [loading, taskId, currentTask, messages, addMessage],
+  )
+
+  // 转换为 Bubble.List 的数据格式
+  const bubbleItems = useMemo(() => {
+    const items = messages.map((msg, i) => ({
+      key: `msg-${i}`,
+      role: msg.role === 'user' ? ('user' as const) : ('ai' as const),
+      content: msg.content,
+      footer:
+        msg.role === 'assistant' && msg.sources ? (
+          <SourceBadges sources={msg.sources} />
+        ) : undefined,
+    }))
+
+    if (loading) {
+      items.push({
+        key: 'loading',
+        role: 'ai' as const,
+        content: '思考中...',
+        loading: true,
+      } as any)
+    }
+
+    return items
+  }, [messages, loading])
+
+  // Bubble 角色配置
+  const roles: BubbleProps['roles'] = useMemo(
+    () => ({
+      user: {
+        placement: 'end',
+        avatar: {
+          icon: <UserRound className="h-4 w-4" />,
+          style: { background: '#3b82f6' },
+        },
+      },
+      ai: {
+        placement: 'start',
+        avatar: {
+          icon: <Bot className="h-4 w-4" />,
+          style: { background: '#6b7280' },
+        },
+        typing: { step: 5, interval: 50 },
+      },
+    }),
+    [],
+  )
+
+  if (indexing) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-2 text-neutral-400">
+        <Loader2 className="h-5 w-5 animate-spin" />
+        <span className="text-sm">正在索引笔记内容...</span>
+      </div>
+    )
+  }
+
+  if (indexed === false) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-2 text-neutral-400">
+        <span className="text-sm">索引失败，请重试</span>
+        <Button
+          size="sm"
+          variant="outline"
+          onClick={async () => {
+            setIndexing(true)
+            try {
+              await indexTask(taskId)
+              setIndexed(true)
+            } catch {
+              toast.error('索引失败')
+            } finally {
+              setIndexing(false)
+            }
+          }}
+        >
+          重新索引
+        </Button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex h-full flex-col border-l">
+      {/* 头部 */}
+      <div className="flex items-center justify-between border-b px-3 py-2">
+        <span className="text-sm font-medium">AI 问答</span>
+        {messages.length > 0 && (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 px-2 text-neutral-400 hover:text-red-500"
+            onClick={() => clearChat(taskId)}
+          >
+            <Trash2 className="h-3.5 w-3.5" />
+          </Button>
+        )}
+      </div>
+
+      {/* 消息列表 */}
+      <div className="flex-1 overflow-hidden">
+        {messages.length === 0 && !loading ? (
+          <div className="flex h-full items-center justify-center text-center text-sm text-neutral-400">
+            <div>
+              <p>针对笔记内容提问</p>
+              <p className="mt-1 text-xs">例如：这个视频的核心观点是什么？</p>
+            </div>
+          </div>
+        ) : (
+          <Bubble.List
+            items={bubbleItems}
+            roles={roles}
+            style={{ height: '100%' }}
+          />
+        )}
+      </div>
+
+      {/* 输入区域 */}
+      <div className="border-t px-3 py-2">
+        <Sender
+          value={input}
+          onChange={setInput}
+          onSubmit={handleSend}
+          loading={loading}
+          placeholder="输入你的问题..."
+        />
+      </div>
+    </div>
+  )
+}

BillNote_frontend/src/pages/HomePage/components/MarkdownHeader.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { Copy, Download, BrainCircuit } from 'lucide-react'
+import { Copy, Download, BrainCircuit, MessageSquare } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
@@ -28,6 +28,8 @@ interface NoteHeaderProps {
   onDownload: () => void
   createAt?: string | Date
   setShowTranscribe: (show: boolean) => void
+  showChat?: boolean
+  setShowChat?: (show: boolean) => void
 }
 
 export function MarkdownHeader({
@@ -43,6 +45,8 @@ export function MarkdownHeader({
   createAt,
   showTranscribe,
   setShowTranscribe,
+  showChat,
+  setShowChat,
   viewMode,
   setViewMode,
 }: NoteHeaderProps) {
@@ -183,6 +187,24 @@ export function MarkdownHeader({
             <TooltipContent>原文参照</TooltipContent>
           </Tooltip>
         </TooltipProvider>
+        {setShowChat && (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  onClick={() => setShowChat(!showChat)}
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 px-2"
+                >
+                  <MessageSquare className="mr-1.5 h-4 w-4" />
+                  <span className="text-sm">AI 问答</span>
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>基于笔记内容的 AI 问答</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )}
       </div>
     </div>
   )

BillNote_frontend/src/pages/HomePage/components/MarkdownViewer.tsx

@@ -23,6 +23,7 @@ import { noteStyles } from '@/constant/note.ts'
 import { MarkdownHeader } from '@/pages/HomePage/components/MarkdownHeader.tsx'
 import TranscriptViewer from '@/pages/HomePage/components/transcriptViewer.tsx'
 import MarkmapEditor from '@/pages/HomePage/components/MarkmapComponent.tsx'
+import ChatPanel from '@/pages/HomePage/components/ChatPanel.tsx'
 
 interface VersionNote {
   ver_id: string
@@ -60,6 +61,7 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
   const retryTask = useTaskStore.getState().retryTask
   const isMultiVersion = Array.isArray(currentTask?.markdown)
   const [showTranscribe, setShowTranscribe] = useState(false)
+  const [showChat, setShowChat] = useState(false)
   const [viewMode, setViewMode] = useState<'map' | 'preview'>('preview')
   const svgRef = useRef<SVGSVGElement>(null)
   // 多版本内容处理
@@ -198,6 +200,8 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
         createAt={createTime}
         showTranscribe={showTranscribe}
         setShowTranscribe={setShowTranscribe}
+        showChat={showChat}
+        setShowChat={setShowChat}
         viewMode={viewMode}
         setViewMode={setViewMode}
       />
@@ -472,6 +476,11 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
                   <TranscriptViewer />
                 </div>
               )}
+              {showChat && currentTask && (
+                <div className="ml-2 w-2/5">
+                  <ChatPanel taskId={currentTask.id} />
+                </div>
+              )}
             </>
           ) : (
             <div className="flex h-full w-full items-center justify-center">

BillNote_frontend/src/services/chat.ts

@@ -0,0 +1,41 @@
+import request from '@/utils/request'
+
+export interface ChatMessage {
+  role: 'user' | 'assistant'
+  content: string
+}
+
+export interface ChatSource {
+  text: string
+  source_type: 'markdown' | 'transcript'
+  section_title?: string
+  start_time?: number
+  end_time?: number
+}
+
+export interface AskResponse {
+  answer: string
+  sources: ChatSource[]
+}
+
+export interface ChatStatusResponse {
+  indexed: boolean
+}
+
+export const indexTask = async (taskId: string): Promise<void> => {
+  return await request.post('/chat/index', { task_id: taskId })
+}
+
+export const askQuestion = async (data: {
+  task_id: string
+  question: string
+  history: ChatMessage[]
+  provider_id: string
+  model_name: string
+}): Promise<AskResponse> => {
+  return await request.post('/chat/ask', data, { timeout: 60000 })
+}
+
+export const getChatStatus = async (taskId: string): Promise<ChatStatusResponse> => {
+  return await request.get(`/chat/status?task_id=${taskId}`)
+}

BillNote_frontend/src/store/chatStore/index.ts

@@ -0,0 +1,43 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+import type { ChatSource } from '@/services/chat'
+
+export interface ChatMessage {
+  role: 'user' | 'assistant'
+  content: string
+  sources?: ChatSource[]
+}
+
+interface ChatState {
+  chatHistory: Record<string, ChatMessage[]>
+  addMessage: (taskId: string, msg: ChatMessage) => void
+  clearChat: (taskId: string) => void
+  getMessages: (taskId: string) => ChatMessage[]
+}
+
+export const useChatStore = create<ChatState>()(
+  persist(
+    (set, get) => ({
+      chatHistory: {},
+
+      addMessage: (taskId, msg) =>
+        set(state => ({
+          chatHistory: {
+            ...state.chatHistory,
+            [taskId]: [...(state.chatHistory[taskId] || []), msg],
+          },
+        })),
+
+      clearChat: (taskId) =>
+        set(state => {
+          const { [taskId]: _, ...rest } = state.chatHistory
+          return { chatHistory: rest }
+        }),
+
+      getMessages: (taskId) => get().chatHistory[taskId] || [],
+    }),
+    {
+      name: 'bilinote-chat-storage',
+    },
+  ),
+)