Merge pull request #299 from JefferyHcool/feature/note-qa-chat-optimize

Feature/note qa chat optimize
2026-05-15 12:28:06 +08:00 · 2026-03-23 16:00:15 +08:00
parent 63b8ac7e2b 795615f0f7
commit a2ab457f75
15 changed files with 1197 additions and 4 deletions
--- a/BillNote_frontend/src/pages/HomePage/components/ChatPanel.tsx
+++ b/BillNote_frontend/src/pages/HomePage/components/ChatPanel.tsx
@@ -0,0 +1,294 @@
+import { useState, useEffect, useCallback, useMemo } from 'react'
+import { Bubble, Sender } from '@ant-design/x'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Loader2, Trash2, ChevronDown, ChevronUp, BookOpen, UserRound, Bot, Maximize2, Minimize2 } 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, type IndexStatus } from '@/services/chat'
+
+type ChatMode = 'half' | 'full'
+
+interface ChatPanelProps {
+  taskId: string
+  mode: ChatMode
+  onModeChange: (mode: ChatMode) => void
+}
+
+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, mode, onModeChange }: ChatPanelProps) {
+  const [input, setInput] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [indexStatus, setIndexStatus] = useState<IndexStatus | null>(null)
+
+  const messages = useChatStore(state => state.chatHistory[taskId]) ?? []
+  const addMessage = useChatStore(state => state.addMessage)
+  const clearChat = useChatStore(state => state.clearChat)
+
+  const currentTaskId = useTaskStore(state => state.currentTaskId)
+  const tasks = useTaskStore(state => state.tasks)
+  const currentTask = useMemo(
+    () => tasks.find(t => t.id === currentTaskId) ?? null,
+    [tasks, currentTaskId],
+  )
+
+  // 检查索引状态，未索引时自动触发，indexing 时轮询
+  useEffect(() => {
+    if (!taskId) return
+    let cancelled = false
+    let timer: ReturnType<typeof setTimeout> | null = null
+
+    const poll = async () => {
+      try {
+        const res = await getChatStatus(taskId)
+        if (cancelled) return
+        setIndexStatus(res.status)
+
+        if (res.status === 'idle') {
+          // 未索引，触发后台索引
+          await indexTask(taskId)
+          if (!cancelled) setIndexStatus('indexing')
+        }
+
+        // indexing 状态持续轮询
+        if (res.status === 'indexing' || res.status === 'idle') {
+          timer = setTimeout(poll, 2000)
+        }
+      } catch {
+        if (!cancelled) setIndexStatus('failed')
+      }
+    }
+
+    poll()
+    return () => {
+      cancelled = true
+      if (timer) clearTimeout(timer)
+    }
+  }, [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 = useMemo(
+    () => ({
+      user: {
+        placement: 'end' as const,
+        avatar: (
+          <div className="flex h-7 w-7 items-center justify-center rounded-full bg-blue-500 text-white">
+            <UserRound className="h-4 w-4" />
+          </div>
+        ),
+        variant: 'filled' as const,
+        styles: { content: { background: '#3b82f6', color: '#fff' } },
+      },
+      ai: {
+        placement: 'start' as const,
+        avatar: (
+          <div className="flex h-7 w-7 items-center justify-center rounded-full bg-neutral-500 text-white">
+            <Bot className="h-4 w-4" />
+          </div>
+        ),
+        variant: 'outlined' as const,
+        contentRender: (content: any) => (
+          <div className="markdown-body prose prose-sm max-w-none prose-p:my-1 prose-li:my-0.5 prose-headings:my-2">
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>
+              {typeof content === 'string' ? content : String(content)}
+            </ReactMarkdown>
+          </div>
+        ),
+      },
+    }),
+    [],
+  )
+
+  if (indexStatus === null || indexStatus === 'indexing' || indexStatus === 'idle') {
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-3 text-neutral-400">
+        <Loader2 className="h-6 w-6 animate-spin" />
+        <div className="text-center">
+          <p className="text-sm font-medium">正在索引笔记内容...</p>
+          <p className="mt-1 text-xs">首次使用需下载 Embedding 模型（约 80MB），请耐心等待</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (indexStatus === 'failed') {
+    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 () => {
+            setIndexStatus('indexing')
+            try {
+              await indexTask(taskId)
+            } catch {
+              toast.error('索引请求失败')
+              setIndexStatus('failed')
+            }
+          }}
+        >
+          重新索引
+        </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>
+        <div className="flex items-center gap-1">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 px-2 text-neutral-400 hover:text-neutral-600"
+            onClick={() => onModeChange(mode === 'half' ? 'full' : 'half')}
+            title={mode === 'half' ? '全屏' : '半屏'}
+          >
+            {mode === 'half' ? (
+              <Maximize2 className="h-3.5 w-3.5" />
+            ) : (
+              <Minimize2 className="h-3.5 w-3.5" />
+            )}
+          </Button>
+          {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>
+
+      {/* 消息列表 */}
+      <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}
+            role={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>
+  )
+}
--- a/BillNote_frontend/src/pages/HomePage/components/MarkdownHeader.tsx
+++ b/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?: false | 'half' | 'full'
+  setShowChat?: (mode: false | 'half' | 'full') => 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 ? false : 'half')}
+                  variant={showChat ? 'default' : '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>
  )
--- a/BillNote_frontend/src/pages/HomePage/components/MarkdownViewer.tsx
+++ b/BillNote_frontend/src/pages/HomePage/components/MarkdownViewer.tsx
@@ -22,6 +22,8 @@ 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'
+import VideoBanner from '@/pages/HomePage/components/VideoBanner.tsx'

 interface VersionNote {
  ver_id: string
@@ -280,6 +282,7 @@ const MarkdownViewer: FC<MarkdownViewerProps> = memo(({ status }) => {
  const retryTask = useTaskStore.getState().retryTask
  const isMultiVersion = Array.isArray(currentTask?.markdown)
  const [showTranscribe, setShowTranscribe] = useState(false)
+  const [showChat, setShowChat] = useState<false | 'half' | 'full'>(false)
  const [viewMode, setViewMode] = useState<'map' | 'preview'>('preview')
  const svgRef = useRef<SVGSVGElement>(null)

@@ -422,6 +425,8 @@ const MarkdownViewer: FC<MarkdownViewerProps> = memo(({ status }) => {
        createAt={createTime}
        showTranscribe={showTranscribe}
        setShowTranscribe={setShowTranscribe}
+        showChat={showChat}
+        setShowChat={setShowChat}
        viewMode={viewMode}
        setViewMode={setViewMode}
      />
@@ -441,14 +446,26 @@ const MarkdownViewer: FC<MarkdownViewerProps> = memo(({ status }) => {
        <div className="flex flex-1 overflow-hidden bg-white py-2">
          {selectedContent && selectedContent !== 'loading' && selectedContent !== 'empty' ? (
            <>
-              <ScrollArea className="w-full">
+              {showChat === 'full' && currentTask ? (
+                <div className="h-full w-full">
+                  <ChatPanel taskId={currentTask.id} mode="full" onModeChange={setShowChat} />
+                </div>
+              ) : (
+              <>
+              <ScrollArea className="min-w-0 flex-1">
+                <div className="px-2">
+                  <VideoBanner
+                    audioMeta={currentTask?.audioMeta}
+                    videoUrl={currentTask?.formData?.video_url}
+                  />
+                </div>
                <div className={'markdown-body w-full px-2'}>
                  <ReactMarkdown
                    remarkPlugins={remarkPlugins}
                    rehypePlugins={rehypePlugins}
                    components={markdownComponents}
                  >
-                    {selectedContent}
+                    {selectedContent.replace(/^>\s*来源链接：[^\n]*\n*/m, '')}
                  </ReactMarkdown>
                </div>
              </ScrollArea>
@@ -457,6 +474,14 @@ const MarkdownViewer: FC<MarkdownViewerProps> = memo(({ status }) => {
                  <TranscriptViewer />
                </div>
              )}
+              {/* 侧边问答模式：markdown + ChatPanel 各占一半 */}
+              {showChat === 'half' && currentTask && (
+                <div className="ml-2 h-full w-1/2 shrink-0">
+                  <ChatPanel taskId={currentTask.id} mode="half" onModeChange={setShowChat} />
+                </div>
+              )}
+              </>
+              )}
            </>
          ) : (
            <div className="flex h-full w-full items-center justify-center">
--- a/BillNote_frontend/src/pages/HomePage/components/VideoBanner.tsx
+++ b/BillNote_frontend/src/pages/HomePage/components/VideoBanner.tsx
@@ -0,0 +1,86 @@
+import { ExternalLink } from 'lucide-react'
+import type { AudioMeta } from '@/store/taskStore'
+
+interface VideoBannerProps {
+  audioMeta?: AudioMeta
+  videoUrl?: string
+}
+
+/** 平台 label 映射 */
+const platformLabel: Record<string, string> = {
+  bilibili: '哔哩哔哩',
+  youtube: 'YouTube',
+  douyin: '抖音',
+  xiaohongshu: '小红书',
+}
+
+export default function VideoBanner({ audioMeta, videoUrl }: VideoBannerProps) {
+  if (!audioMeta) return null
+
+  const rawCover = audioMeta.cover_url
+  // 通过后端代理加载封面，避免跨域/Referrer 限制
+  const apiBase = String(import.meta.env.VITE_API_BASE_URL || 'api').replace(/\/$/, '')
+  const coverUrl = rawCover
+    ? `${apiBase}/image_proxy?url=${encodeURIComponent(rawCover)}`
+    : ''
+  const title = audioMeta.title
+  const uploader = audioMeta.raw_info?.uploader || ''
+  const platform = platformLabel[audioMeta.platform] || audioMeta.platform || ''
+  const originalUrl = videoUrl || audioMeta.raw_info?.webpage_url || ''
+
+  return (
+    <div className="relative mb-4 overflow-hidden rounded-lg">
+      {/* 模糊背景封面 */}
+      <div className="absolute inset-0">
+        {coverUrl ? (
+          <img
+            src={coverUrl}
+            alt=""
+            referrerPolicy="no-referrer"
+            className="h-full w-full object-cover blur-md brightness-[0.4] scale-110"
+          />
+        ) : (
+          <div className="h-full w-full bg-gradient-to-r from-blue-600 to-indigo-700" />
+        )}
+      </div>
+
+      {/* 内容层 */}
+      <div className="relative flex items-center gap-4 px-5 py-4">
+        {/* 封面缩略图 */}
+        {coverUrl && (
+          <img
+            src={coverUrl}
+            alt={title}
+            referrerPolicy="no-referrer"
+            className="h-16 w-28 shrink-0 rounded-md object-cover shadow-md"
+          />
+        )}
+
+        {/* 文字信息 */}
+        <div className="min-w-0 flex-1">
+          <h2 className="truncate text-base font-bold text-white" title={title}>
+            {title}
+          </h2>
+          <div className="mt-1 flex flex-wrap items-center gap-2 text-sm text-white/70">
+            {uploader && <span>{uploader}</span>}
+            {uploader && platform && <span className="text-white/40">·</span>}
+            {platform && <span>{platform}</span>}
+          </div>
+        </div>
+
+        {/* 跳转原视频 */}
+        {originalUrl && (
+          <a
+            href={originalUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex shrink-0 items-center gap-1.5 rounded-full bg-white/15 px-3 py-1.5 text-xs font-medium text-white backdrop-blur-sm transition-colors hover:bg-white/25"
+          >
+            <ExternalLink className="h-3.5 w-3.5" />
+            <span>原视频</span>
+          </a>
+        )}
+      </div>
+    </div>
+  )
+}
--- a/BillNote_frontend/src/services/chat.ts
+++ b/BillNote_frontend/src/services/chat.ts
@@ -0,0 +1,44 @@
+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 type IndexStatus = 'idle' | 'indexing' | 'indexed' | 'failed'
+
+export interface ChatStatusResponse {
+  indexed: boolean
+  status: IndexStatus
+}
+
+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}`)
+}
--- a/BillNote_frontend/src/store/chatStore/index.ts
+++ b/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',
+    },
+  ),
+)