handleSearchChange(e.target.value)}
className="flex-1 px-3 py-1.5 text-xs rounded-lg border border-[var(--color-border)] bg-[var(--color-bg)] text-[var(--color-text)] placeholder:text-[var(--color-text-muted)] focus:outline-none focus:border-[var(--color-accent)]"
/>
diff --git a/web/src/pages/SearchAgent.tsx b/web/src/pages/SearchAgent.tsx
index fea4f83..2e5da96 100644
--- a/web/src/pages/SearchAgent.tsx
+++ b/web/src/pages/SearchAgent.tsx
@@ -1,6 +1,6 @@
import { useState, useRef, useEffect, useCallback, lazy, Suspense } from 'react';
import { useSearchParams } from 'react-router-dom';
-import { streamPost, postJSON, deleteAPI, downloadFile } from '../api/client';
+import { streamPost, postJSON, deleteAPI, downloadFile as fetchDownloadFile } from '../api/client';
import ChatMessage from '../components/ChatMessage';
import VideoCard from '../components/VideoCard';
import ProgressBar from '../components/ProgressBar';
@@ -11,6 +11,15 @@ import { Send, Trash2, Loader2, Search, FileText, MessageCircle, Globe, ChevronD
const MarkmapView = lazy(() => import('../components/MarkmapView'));
+async function downloadFile(filename: string) {
+ try {
+ await fetchDownloadFile(filename);
+ toast('文件已下载', 'success');
+ } catch (error) {
+ toast(error instanceof Error ? error.message : '下载失败', 'error');
+ }
+}
+
interface ChatMsg {
id: string;
role: 'user' | 'assistant';
diff --git a/web/src/pages/VideoNote.tsx b/web/src/pages/VideoNote.tsx
index c670518..154e7ba 100644
--- a/web/src/pages/VideoNote.tsx
+++ b/web/src/pages/VideoNote.tsx
@@ -1,7 +1,10 @@
import { useState, useCallback, useRef, useEffect, lazy, Suspense } from 'react';
import { useNavigate } from 'react-router-dom';
import { postFormData, fetchJSON, postJSON, deleteAPI, downloadFile, extractBilibiliUrl, proxyImageUrl, createSSE } from '../api/client';
-import { useSSE } from '../hooks/useSSE';
+import { useTaskProgress } from '../hooks/useTaskProgress';
+import { monitorProgress } from '../api/progress';
+import type { ProgressConnection } from '../api/progress';
+import { getArtifactFilename, readStoredId, writeStoredId } from '../utils/taskRecovery';
import ProgressBar from '../components/ProgressBar';
import ProgressSteps from '../components/ProgressSteps';
import { SUBTITLE_STEPS } from '../components/progressStepData';
@@ -12,6 +15,9 @@ import type { TaskStatus, VideoInfo, BatchStatus, BatchTaskInfo, ScanResult, Sca
import { Play, Download, Square, Sparkles, BrainCircuit, List, CheckCircle2, XCircle, Loader2, Clock, FolderSearch, Layers } from 'lucide-react';
const MarkmapView = lazy(() => import('../components/MarkmapView'));
+const noteTaskKey = 'vinote.note.task-id';
+const batchTaskKey = 'vinote.note.batch-id';
+const focusedTaskKey = 'vinote.note.focused-id';
const LANGUAGES = [
{ value: 'zh', label: '中文' },
@@ -73,14 +79,17 @@ function batchTaskStatusText(task: BatchTaskInfo): string {
export default function VideoNote() {
const navigate = useNavigate();
- const [isBatch, setIsBatch] = useState(false);
+ const [isBatch, setIsBatch] = useState(() => {
+ const batch = readStoredId(batchTaskKey);
+ return Boolean(batch && (!readStoredId(noteTaskKey) || readStoredId(focusedTaskKey) === batch));
+ });
const [input, setInput] = useState('');
const [batchInput, setBatchInput] = useState('');
const [language, setLanguage] = useState('zh');
const [preview, setPreview] = useState
(null);
- const [taskId, setTaskId] = useState(null);
+ const [taskId, setTaskId] = useState(() => readStoredId(noteTaskKey));
const [task, setTask] = useState(null);
- const [loading, setLoading] = useState(false);
+ const [loading, setLoading] = useState(() => Boolean(readStoredId(noteTaskKey)));
const [activeTab, setActiveTab] = useState('script');
const [currentStep, setCurrentStep] = useState('');
const [completedSteps, setCompletedSteps] = useState([]);
@@ -92,15 +101,15 @@ export default function VideoNote() {
const [downloadStatus, setDownloadStatus] = useState<'idle' | 'downloading' | 'completed' | 'error'>('idle');
const [downloadSpeed, setDownloadSpeed] = useState('');
const downloadSSERef = useRef(null);
- const { connect, disconnect } = useSSE();
+ const previousTaskStatus = useRef(null);
// Batch state
- const [batchId, setBatchId] = useState(null);
+ const [batchId, setBatchId] = useState(() => readStoredId(batchTaskKey));
const [batchStatus, setBatchStatus] = useState(null);
- const [batchLoading, setBatchLoading] = useState(false);
+ const [batchLoading, setBatchLoading] = useState(() => Boolean(readStoredId(batchTaskKey)));
const [selectedBatchTask, setSelectedBatchTask] = useState(null);
const [batchTaskContent, setBatchTaskContent] = useState(null);
- const batchPollRef = useRef | null>(null);
+ const [batchConnection, setBatchConnection] = useState('checking');
// Directory scan state
const [showDirScan, setShowDirScan] = useState(false);
@@ -113,28 +122,64 @@ export default function VideoNote() {
const [playlistLoading, setPlaylistLoading] = useState(false);
const [selectedPlaylistUrls, setSelectedPlaylistUrls] = useState>(new Set());
- // Poll batch status
+ const handleTaskUpdate = useCallback((t: TaskStatus) => {
+ setTask(t);
+ const step = stepFromMessage(t.message || '');
+ if (step === 'subtitle_done') setUseSubtitleFlow(true);
+ if (step) {
+ const mapped = step === 'subtitle' ? 'download' : step === 'subtitle_done' ? 'transcribe' : step;
+ setCurrentStep(mapped);
+ const steps = ['download', 'transcribe', 'optimize', 'summarize', 'complete'];
+ setCompletedSteps(steps.slice(0, steps.indexOf(mapped)));
+ }
+ setLoading(t.status === 'queued' || t.status === 'processing');
+ if (t.status === 'completed') {
+ setCompletedSteps(['download', 'transcribe', 'optimize', 'summarize', 'complete']);
+ setCurrentStep('');
+ if (previousTaskStatus.current === 'processing' || previousTaskStatus.current === 'queued') {
+ toast(t.warnings?.length ? '笔记已生成，部分 AI 能力已降级' : '笔记生成完成！', t.warnings?.length ? 'info' : 'success');
+ }
+ } else if (t.status === 'error' && previousTaskStatus.current !== 'error') {
+ toast(t.error || '生成失败', 'error');
+ }
+ previousTaskStatus.current = t.status;
+ }, []);
+ const handleTaskUnavailable = useCallback((error: Error) => {
+ writeStoredId(noteTaskKey, null);
+ setTaskId(null);
+ setTask(null);
+ setLoading(false);
+ toast(error.message, 'error');
+ }, []);
+ const taskConnection = useTaskProgress(taskId, handleTaskUpdate, handleTaskUnavailable);
+
+ // A serial poll also restores batches after navigation or reload.
useEffect(() => {
- if (!batchId || !batchLoading) return;
- const poll = () => {
- fetchJSON(`/api/batch-status/${batchId}`)
- .then((data) => {
- setBatchStatus(data);
- if (data.processing === 0) {
- setBatchLoading(false);
- if (batchPollRef.current) clearInterval(batchPollRef.current);
- const summary = `批量处理结束: ${data.completed} 完成, ${data.failed} 失败, ${data.cancelled} 取消`;
- toast(summary, data.failed > 0 ? 'error' : data.cancelled > 0 ? 'info' : 'success');
- }
- })
- .catch(() => {});
- };
- poll();
- batchPollRef.current = setInterval(poll, 3000);
- return () => {
- if (batchPollRef.current) clearInterval(batchPollRef.current);
- };
- }, [batchId, batchLoading]);
+ if (!batchId) return;
+ let wasProcessing = false;
+ return monitorProgress({
+ load: (signal) => fetchJSON(`/api/batch-status/${encodeURIComponent(batchId)}`, { signal }),
+ isTerminal: (data) => data.processing === 0,
+ onUpdate: (data) => {
+ setBatchStatus(data);
+ setBatchLoading(data.processing > 0);
+ if (wasProcessing && data.processing === 0) {
+ toast(`批量处理结束: ${data.completed} 完成, ${data.failed} 失败, ${data.cancelled} 取消`, data.failed > 0 ? 'error' : data.cancelled > 0 ? 'info' : 'success');
+ }
+ wasProcessing = data.processing > 0;
+ },
+ onConnectionChange: setBatchConnection,
+ onUnavailable: (error) => {
+ writeStoredId(batchTaskKey, null);
+ setBatchId(null);
+ setBatchStatus(null);
+ setBatchLoading(false);
+ toast(error.message, 'error');
+ },
+ });
+ }, [batchId]);
+
+ useEffect(() => () => downloadSSERef.current?.close(), []);
// ── Batch handlers ────────────────────────────────
const handleBatchSubmit = async () => {
@@ -148,6 +193,8 @@ export default function VideoNote() {
const res = await postJSON<{ batch_id: string; task_ids: string[]; total: number }>(
'/api/batch-process', { urls, summary_language: language },
);
+ writeStoredId(batchTaskKey, res.batch_id);
+ writeStoredId(focusedTaskKey, res.batch_id);
setBatchId(res.batch_id);
toast(`已创建批量任务: ${res.total} 个`, 'success');
} catch (e) {
@@ -160,7 +207,6 @@ export default function VideoNote() {
if (!batchId) return;
try {
await deleteAPI(`/api/batch/${batchId}`);
- if (batchPollRef.current) clearInterval(batchPollRef.current);
setBatchLoading(false);
toast('批量任务已取消', 'info');
fetchJSON(`/api/batch-status/${batchId}`)
@@ -221,6 +267,8 @@ export default function VideoNote() {
const res = await postJSON<{ batch_id: string; task_ids: string[]; total: number }>(
'/api/batch-process', { urls: paths, summary_language: language },
);
+ writeStoredId(batchTaskKey, res.batch_id);
+ writeStoredId(focusedTaskKey, res.batch_id);
setBatchId(res.batch_id);
toast(`已创建批量任务: ${res.total} 个文件`, 'success');
} catch (e) {
@@ -268,38 +316,12 @@ export default function VideoNote() {
).then((res) => setPreview(res.data)).catch(() => {});
}
setLoading(true); setTask(null); setCurrentStep(''); setCompletedSteps([]); setUseSubtitleFlow(false);
+ previousTaskStatus.current = 'processing';
try {
const res = await postFormData<{ task_id: string }>('/api/process-video', { url, summary_language: language });
+ writeStoredId(noteTaskKey, res.task_id);
+ writeStoredId(focusedTaskKey, res.task_id);
setTaskId(res.task_id);
- connect(`/api/task-stream/${res.task_id}`, {
- onMessage: (data) => {
- const t = data as TaskStatus;
- setTask(t);
- const step = stepFromMessage(t.message || '');
- if (step === 'subtitle_done') setUseSubtitleFlow(true);
- if (step) {
- let mapped = step;
- if (step === 'subtitle') mapped = 'download';
- if (step === 'subtitle_done') mapped = 'transcribe';
- setCurrentStep(mapped);
- setCompletedSteps(() => {
- const steps = ['download', 'transcribe', 'optimize', 'summarize', 'complete'];
- let m = step;
- if (step === 'subtitle') m = 'download';
- if (step === 'subtitle_done') m = 'transcribe';
- return steps.slice(0, steps.indexOf(m));
- });
- }
- if (t.status === 'completed') {
- setCompletedSteps(['download', 'transcribe', 'optimize', 'summarize', 'complete']);
- setCurrentStep(''); disconnect(); setLoading(false);
- toast(t.warnings?.length ? '笔记已生成，部分 AI 能力已降级' : '笔记生成完成！', t.warnings?.length ? 'info' : 'success');
- } else if (t.status === 'error') {
- disconnect(); setLoading(false); toast(t.error || '生成失败', 'error');
- }
- },
- onError: () => { setLoading(false); toast('连接中断', 'error'); },
- });
} catch (e) {
toast(e instanceof Error ? e.message : '生成失败', 'error'); setLoading(false);
}
@@ -309,7 +331,7 @@ export default function VideoNote() {
if (!taskId) return;
try {
await deleteAPI(`/api/task/${taskId}`);
- disconnect(); setLoading(false);
+ setTaskId(null); writeStoredId(noteTaskKey, null); setLoading(false);
setTask((prev) => (prev ? { ...prev, status: 'cancelled', message: '已取消' } : null));
toast('已取消', 'info');
} catch (error) {
@@ -317,8 +339,13 @@ export default function VideoNote() {
}
};
- const handleDownloadFile = useCallback((filename: string) => {
- downloadFile(filename); toast('开始下载', 'success');
+ const handleDownloadFile = useCallback(async (filename: string) => {
+ try {
+ await downloadFile(filename);
+ toast('文件已下载', 'success');
+ } catch (error) {
+ toast(error instanceof Error ? error.message : '下载失败', 'error');
+ }
}, []);
const handleStartDownload = async () => {
@@ -379,15 +406,7 @@ export default function VideoNote() {
};
const getTabFilename = (key: TabKey): string => {
- if (!activeTask?.short_id || !activeTask?.safe_title) return '';
- const prefix = `${activeTask.short_id}_${activeTask.safe_title}`;
- switch (key) {
- case 'script': return `${prefix}_笔记.md`;
- case 'summary': return `${prefix}_摘要.md`;
- case 'mindmap': return activeTask.mindmap_filename || '';
- case 'raw': return activeTask.raw_script_filename || '';
- case 'translation': return activeTask.translation_filename || '';
- }
+ return getArtifactFilename(activeTask, key);
};
const showCompleted = (isBatch && batchTaskContent?.status === 'completed') || (!isBatch && task?.status === 'completed');
@@ -400,7 +419,7 @@ export default function VideoNote() {
{/* 单条 / 批量 toggle */}
{/* ── 进度区域（共享） ──────────────────────── */}
+ {((isBatch && batchLoading && batchConnection === 'retrying') || (!isBatch && loading && taskConnection === 'retrying')) && (
+
+ 状态连接暂时中断，正在自动恢复。任务仍可能在后台运行，请勿重复提交。
+
+ )}
+ {!isBatch && loading && taskConnection === 'polling' && (
+ 已恢复状态查询，正在同步任务进度。
+ )}
{!isBatch && (loading || task) && (
diff --git a/web/src/pages/VideoQA.tsx b/web/src/pages/VideoQA.tsx
index c84e7d0..0308bb9 100644
--- a/web/src/pages/VideoQA.tsx
+++ b/web/src/pages/VideoQA.tsx
@@ -1,12 +1,15 @@
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, useCallback } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { postFormData, fetchJSON, deleteAPI, extractBilibiliUrl, proxyImageUrl, streamPost } from '../api/client';
-import { useSSE } from '../hooks/useSSE';
+import { useTaskProgress } from '../hooks/useTaskProgress';
+import { readStoredId, writeStoredId } from '../utils/taskRecovery';
import ProgressBar from '../components/ProgressBar';
import ChatMessage from '../components/ChatMessage';
import { toast } from '../components/toastStore';
-import type { QASession, TaskStatus, VideoInfo } from '../types';
-import { Loader2, Send, Trash2, Square } from 'lucide-react';
+import type { QASession, QASessionSummary, TaskStatus, VideoInfo } from '../types';
+import { Loader2, Send, Trash2, Square, Plus, RefreshCw, MessageCircle } from 'lucide-react';
+
+const qaTaskKey = 'vinote.qa.task-id';
interface Message {
id: string;
@@ -22,18 +25,43 @@ export default function VideoQA() {
const [input, setInput] = useState('');
const [transcript, setTranscript] = useState('');
const [videoTitle, setVideoTitle] = useState('');
- const [taskId, setTaskId] = useState
(null);
+ const [taskId, setTaskId] = useState(() => readStoredId(qaTaskKey));
const [task, setTask] = useState(null);
- const [preprocessLoading, setPreprocessLoading] = useState(false);
+ const [preprocessLoading, setPreprocessLoading] = useState(() => Boolean(readStoredId(qaTaskKey)));
const [messages, setMessages] = useState([]);
const [question, setQuestion] = useState('');
const [answering, setAnswering] = useState(false);
const [preview, setPreview] = useState(null);
const [session, setSession] = useState(null);
- const [sessionLoading, setSessionLoading] = useState(Boolean(sessionId));
+ const [sessionError, setSessionError] = useState<{ id: string; message: string } | null>(null);
+ const [sessionReload, setSessionReload] = useState(0);
+ const [messageSessionId, setMessageSessionId] = useState(sessionId);
+ const [recentSessions, setRecentSessions] = useState([]);
+ const [recentLoading, setRecentLoading] = useState(true);
+ const [recentError, setRecentError] = useState('');
+ const [deletingSessionId, setDeletingSessionId] = useState(null);
const msgEndRef = useRef(null);
const abortRef = useRef(null);
- const { connect, disconnect } = useSSE();
+ const activeSession = session?.id === sessionId ? session : null;
+ const sessionLoading = Boolean(sessionId && !activeSession && sessionError?.id !== sessionId);
+ const readyToAsk = sessionId ? Boolean(activeSession?.sources.length) : Boolean(transcript);
+ const visibleMessages = messageSessionId === sessionId ? messages : [];
+ const isAnswering = answering && messageSessionId === sessionId;
+
+ const loadRecentSessions = useCallback(async () => {
+ setRecentLoading(true);
+ try {
+ const data = await fetchJSON<{ sessions: QASessionSummary[] }>('/api/qa/sessions');
+ setRecentSessions(data.sessions);
+ setRecentError('');
+ } catch (error) {
+ setRecentError(error instanceof Error ? error.message : '加载最近会话失败');
+ } finally {
+ setRecentLoading(false);
+ }
+ }, []);
+
+ useEffect(() => { void loadRecentSessions(); }, [loadRecentSessions]);
useEffect(() => {
msgEndRef.current?.scrollIntoView({ behavior: 'smooth' });
@@ -41,11 +69,14 @@ export default function VideoQA() {
useEffect(() => {
if (!sessionId) return;
- fetchJSON(`/api/qa/sessions/${sessionId}`)
+ const controller = new AbortController();
+ fetchJSON(`/api/qa/sessions/${encodeURIComponent(sessionId)}`, { signal: controller.signal })
.then((data) => {
+ if (controller.signal.aborted) return;
setSession(data);
- setTranscript(data.sources.map((source) => source.title).join('\n'));
- setVideoTitle(data.title);
+ setAnswering(false);
+ setSessionError(null);
+ setMessageSessionId(sessionId);
setMessages(data.messages.map((message) => ({
id: String(message.id),
role: message.role,
@@ -53,9 +84,31 @@ export default function VideoQA() {
timestamp: new Date(`${message.created_at}Z`),
})));
})
- .catch((error) => toast(error instanceof Error ? error.message : '加载问答会话失败', 'error'))
- .finally(() => setSessionLoading(false));
- }, [sessionId]);
+ .catch((error) => {
+ if (!controller.signal.aborted) setSessionError({ id: sessionId, message: error instanceof Error ? error.message : '加载问答会话失败' });
+ });
+ return () => controller.abort();
+ }, [sessionId, sessionReload]);
+
+ useEffect(() => () => abortRef.current?.abort(), [sessionId]);
+
+ const handleTaskUpdate = useCallback((t: TaskStatus) => {
+ setTask(t);
+ setPreprocessLoading(t.status === 'queued' || t.status === 'processing');
+ if (t.status === 'completed') {
+ setTranscript(t.transcript || t.raw_script || t.script || '');
+ setVideoTitle(t.video_title || '');
+ } else if (t.status === 'error') {
+ toast(t.error || '预处理失败', 'error');
+ }
+ }, []);
+ const handleTaskUnavailable = useCallback((error: Error) => {
+ setTaskId(null);
+ writeStoredId(qaTaskKey, null);
+ setPreprocessLoading(false);
+ toast(error.message, 'error');
+ }, []);
+ const taskConnection = useTaskProgress(sessionId ? null : taskId, handleTaskUpdate, handleTaskUnavailable);
const handlePreprocess = async () => {
const url = extractBilibiliUrl(input.trim());
@@ -71,28 +124,8 @@ export default function VideoQA() {
setTranscript('');
try {
const res = await postFormData<{ task_id: string }>('/api/transcribe-only', { url });
+ writeStoredId(qaTaskKey, res.task_id);
setTaskId(res.task_id);
- connect(`/api/task-stream/${res.task_id}`, {
- onMessage: (data) => {
- const t = data as TaskStatus;
- setTask(t);
- if (t.status === 'completed') {
- setTranscript(t.transcript || '');
- setVideoTitle(t.video_title || '');
- disconnect();
- setPreprocessLoading(false);
- toast('预处理完成，可以开始提问', 'success');
- } else if (t.status === 'error') {
- disconnect();
- setPreprocessLoading(false);
- toast(t.error || '预处理失败', 'error');
- }
- },
- onError: () => {
- setPreprocessLoading(false);
- toast('连接中断', 'error');
- },
- });
} catch (e) {
toast(e instanceof Error ? e.message : '预处理失败', 'error');
setPreprocessLoading(false);
@@ -103,7 +136,8 @@ export default function VideoQA() {
if (!taskId) return;
try {
await deleteAPI(`/api/task/${taskId}`);
- disconnect();
+ setTaskId(null);
+ writeStoredId(qaTaskKey, null);
setPreprocessLoading(false);
toast('已取消预处理', 'info');
} catch (error) {
@@ -112,12 +146,13 @@ export default function VideoQA() {
};
const handleAsk = () => {
- if (!question.trim() || !transcript || answering) return;
+ if (!question.trim() || !readyToAsk || isAnswering) return;
const q = question.trim();
setQuestion('');
const userMsg: Message = { id: `u-${Date.now()}`, role: 'user', content: q, timestamp: new Date() };
const aiMsg: Message = { id: `a-${Date.now()}`, role: 'assistant', content: '', timestamp: new Date() };
- setMessages((prev) => [...prev, userMsg, aiMsg]);
+ setMessages((prev) => [...(messageSessionId === sessionId ? prev : []), userMsg, aiMsg]);
+ setMessageSessionId(sessionId);
setAnswering(true);
let fullAnswer = '';
@@ -128,52 +163,81 @@ export default function VideoQA() {
const d = data as { content?: string; error?: string };
if (d.error) {
fullAnswer = `错误: ${d.error}`;
- setMessages((prev) => {
- const copy = [...prev];
- copy[copy.length - 1] = { ...copy[copy.length - 1], content: fullAnswer };
- return copy;
- });
+ setMessages((prev) => prev.map((message) => message.id === aiMsg.id ? { ...message, content: fullAnswer } : message));
return;
}
if (d.content) {
fullAnswer += d.content;
- setMessages((prev) => {
- const copy = [...prev];
- copy[copy.length - 1] = { ...copy[copy.length - 1], content: fullAnswer };
- return copy;
- });
+ setMessages((prev) => prev.map((message) => message.id === aiMsg.id ? { ...message, content: fullAnswer } : message));
}
},
- () => setAnswering(false),
+ () => { setAnswering(false); if (sessionId) void loadRecentSessions(); },
(err) => {
- setMessages((prev) => [
- ...prev.slice(0, -1),
- { ...prev[prev.length - 1], content: `错误: ${err.message}` },
- ]);
+ setMessages((prev) => prev.map((message) => message.id === aiMsg.id ? { ...message, content: `错误: ${err.message}` } : message));
setAnswering(false);
},
);
};
- const handleClear = async () => {
+ const handleNewConversation = () => {
+ abortRef.current?.abort();
+ setAnswering(false);
+ setSession(null);
+ setSessionError(null);
+ setTaskId(null);
+ writeStoredId(qaTaskKey, null);
+ setTask(null);
+ setPreprocessLoading(false);
+ setTranscript('');
+ setInput('');
+ setPreview(null);
+ setVideoTitle('');
+ setQuestion('');
+ setMessageSessionId(null);
+ setMessages([]);
+ navigate('/qa');
+ };
+
+ const handleOpenSession = (id: string) => {
+ abortRef.current?.abort();
+ setAnswering(false);
+ setSessionError(null);
+ setQuestion('');
+ navigate(`/qa?sessionId=${encodeURIComponent(id)}`);
+ };
+
+ const handleDeleteSession = async (id: string) => {
+ if (!confirm('确认删除此问答会话及全部消息？此操作不可撤销。')) return;
+ setDeletingSessionId(id);
+ try {
+ await deleteAPI(`/api/qa/sessions/${encodeURIComponent(id)}`);
+ setRecentSessions((previous) => previous.filter((item) => item.id !== id));
+ if (id === sessionId) handleNewConversation();
+ toast('问答会话已删除', 'success');
+ } catch (error) {
+ toast(error instanceof Error ? error.message : '删除会话失败', 'error');
+ } finally {
+ setDeletingSessionId(null);
+ }
+ };
+
+ const handleClear = () => {
if (sessionId) {
- try {
- await deleteAPI(`/api/qa/sessions/${sessionId}`);
- setSession(null);
- setTranscript('');
- navigate('/qa', { replace: true });
- } catch (error) {
- toast(error instanceof Error ? error.message : '删除会话失败', 'error');
- return;
- }
+ void handleDeleteSession(sessionId);
+ return;
}
+ abortRef.current?.abort();
+ setAnswering(false);
setMessages([]);
};
return (
-
AI视频问答
+
{sessionId && sessionLoading && (
@@ -182,11 +246,18 @@ export default function VideoQA() {
)}
- {session && (
+ {sessionId && sessionError?.id === sessionId && (
+
+
{sessionError.message}
+
+
+ )}
+
+ {activeSession && (
-
{session.title}
-
知识来源（{session.sources.length}）
- {session.sources.map((source) => (
+
{activeSession.title}
+
知识来源（{activeSession.sources.length}）
+ {activeSession.sources.map((source) => (
{source.title}
@@ -230,6 +301,8 @@ export default function VideoQA() {
{task?.message || '预处理中...'}
+ {taskConnection === 'retrying' &&
状态连接中断，正在自动恢复，请勿重复提交。
}
+ {taskConnection === 'polling' &&
已恢复状态查询，正在同步进度。
}
)}
+
+
+
最近会话
+
+
+ {recentError && {recentError}，可点击刷新重试。
}
+ {!recentLoading && !recentError && recentSessions.length === 0 && 还没有保存的会话。可在历史记录中选择笔记发起知识问答。
}
+
+ {recentSessions.map((item) => (
+
+
+
+
+ ))}
+
- {transcript ? '对话' : '等待预处理...'}
+ {readyToAsk ? '对话' : sessionId ? '请选择或恢复问答会话' : '等待预处理...'}
- {messages.length > 0 && (
+ {visibleMessages.length > 0 && (
- {messages.length === 0 && (
+ {visibleMessages.length === 0 && (
- {transcript ? '输入问题开始提问' : '请先完成视频预处理'}
+ {readyToAsk ? '输入问题开始提问' : sessionId ? '正在等待会话内容' : '请先完成视频预处理'}
)}
- {messages.map((m, i) => (
+ {visibleMessages.map((m, i) => (
))}
@@ -304,16 +399,16 @@ export default function VideoQA() {
value={question}
onChange={(e) => setQuestion(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && handleAsk()}
- placeholder={transcript ? '输入你的问题...' : '请先完成预处理'}
- disabled={!transcript}
+ placeholder={readyToAsk ? '输入你的问题...' : '请先选择会话或完成预处理'}
+ disabled={!readyToAsk}
className="flex-1 border border-[var(--color-border)] rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-[var(--color-accent)] focus:ring-1 focus:ring-[var(--color-accent)]/20 disabled:bg-[var(--color-bg)] disabled:text-[var(--color-text-muted)]"
/>
diff --git a/web/src/types/index.ts b/web/src/types/index.ts
index 7c29ad1..bc2b83e 100644
--- a/web/src/types/index.ts
+++ b/web/src/types/index.ts
@@ -16,6 +16,8 @@ export interface TaskStatus {
transcript?: string;
script_path?: string;
summary_path?: string;
+ transcript_filename?: string;
+ summary_filename?: string;
short_id?: string;
safe_title?: string;
detected_language?: string;
@@ -189,6 +191,15 @@ export interface QASession {
messages: QAMessage[];
}
+export interface QASessionSummary {
+ id: string;
+ title: string;
+ created_at: string;
+ updated_at: string;
+ source_count: number;
+ message_count: number;
+}
+
// Category types
export interface Category {
id: number;
diff --git a/web/src/utils/taskRecovery.ts b/web/src/utils/taskRecovery.ts
new file mode 100644
index 0000000..7f8a7e5
--- /dev/null
+++ b/web/src/utils/taskRecovery.ts
@@ -0,0 +1,48 @@
+import type { TaskStatus } from '../types';
+
+type IdStorage = Pick
;
+export type ArtifactTab = 'script' | 'summary' | 'mindmap' | 'raw' | 'translation';
+
+/** Read a task ID without requiring browser storage to be available. */
+export function readStoredId(key: string, storage?: IdStorage): string | null {
+ try {
+ const value = (storage ?? window.localStorage).getItem(key);
+ return value && /^[a-zA-Z0-9-]{1,64}$/.test(value) ? value : null;
+ } catch {
+ return null;
+ }
+}
+
+/** Persist only an opaque ID; never retain input URLs or generated content. */
+export function writeStoredId(key: string, value: string | null, storage?: IdStorage): void {
+ try {
+ const target = storage ?? window.localStorage;
+ if (value && /^[a-zA-Z0-9-]{1,64}$/.test(value)) target.setItem(key, value);
+ else target.removeItem(key);
+ } catch {
+ // Private browsing or a full storage quota must not prevent task execution.
+ }
+}
+
+/** Resolve current API filenames and older task responses to a download basename. */
+export function getArtifactFilename(task: Partial | null, tab: ArtifactTab): string {
+ if (!task) return '';
+ const explicit = {
+ script: task.transcript_filename,
+ summary: task.summary_filename,
+ mindmap: task.mindmap_filename,
+ raw: task.raw_script_filename,
+ translation: task.translation_filename,
+ }[tab];
+ if (explicit) return /^[^/\\]+\.md$/.test(explicit) && !explicit.includes('..') ? explicit : '';
+ const legacyPath = { script: task.script_path, summary: task.summary_path, translation: task.translation_path };
+ const path = tab in legacyPath ? legacyPath[tab as keyof typeof legacyPath] : undefined;
+ if (path) {
+ const basename = path.split(/[/\\]/).pop() || '';
+ if (basename.endsWith('.md') && !basename.includes('..')) return basename;
+ }
+ if (!task.short_id || !task.safe_title) return '';
+ const prefix = { script: 'transcript', summary: 'summary', mindmap: 'mindmap', raw: 'raw', translation: 'translation' }[tab];
+ const basename = `${prefix}_${task.safe_title}_${task.short_id}.md`;
+ return !/[/\\]/.test(basename) && !basename.includes('..') ? basename : '';
+}
diff --git a/web/tests/load-typescript.mjs b/web/tests/load-typescript.mjs
new file mode 100644
index 0000000..d146743
--- /dev/null
+++ b/web/tests/load-typescript.mjs
@@ -0,0 +1,8 @@
+import { readFile } from 'node:fs/promises';
+import ts from 'typescript';
+
+export async function loadTypeScript(relativePath) {
+ const source = await readFile(new URL(relativePath, import.meta.url), 'utf8');
+ const code = ts.transpileModule(source, { compilerOptions: { module: ts.ModuleKind.ESNext, target: ts.ScriptTarget.ES2022 } }).outputText;
+ return import(`data:text/javascript;base64,${Buffer.from(code).toString('base64')}`);
+}
diff --git a/web/tests/reliability.test.mjs b/web/tests/reliability.test.mjs
new file mode 100644
index 0000000..a795504
--- /dev/null
+++ b/web/tests/reliability.test.mjs
@@ -0,0 +1,166 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { loadTypeScript } from './load-typescript.mjs';
+
+const { getArtifactFilename, readStoredId, writeStoredId } = await loadTypeScript('../src/utils/taskRecovery.ts');
+const { monitorProgress } = await loadTypeScript('../src/api/progress.ts');
+const { downloadFile, HttpError, streamPost } = await loadTypeScript('../src/api/client.ts');
+
+const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+async function waitFor(predicate, timeoutMs = 2000) {
+ const deadline = performance.now() + timeoutMs;
+ while (!predicate()) {
+ assert.ok(performance.now() < deadline, 'expected progress did not arrive before timeout');
+ await delay(5);
+ }
+}
+
+test('downloads prefer returned names and support existing task responses', () => {
+ const task = { short_id: 'abc123', safe_title: '示例视频', transcript_filename: 'actual.md' };
+ assert.equal(getArtifactFilename(task, 'script'), 'actual.md');
+ assert.equal(getArtifactFilename(task, 'summary'), 'summary_示例视频_abc123.md');
+ assert.equal(getArtifactFilename({ script_path: '/tmp/legacy.md' }, 'script'), 'legacy.md');
+ assert.equal(getArtifactFilename({ transcript_filename: '../secret.md' }, 'script'), '');
+});
+
+test('recovery storage holds only validated IDs and tolerates blocked storage', () => {
+ const values = new Map();
+ const storage = { getItem: (key) => values.get(key) ?? null, setItem: (key, value) => values.set(key, value), removeItem: (key) => values.delete(key) };
+ writeStoredId('task', 'ab12-cd34', storage);
+ assert.equal(readStoredId('task', storage), 'ab12-cd34');
+ writeStoredId('task', 'https://example.com/private', storage);
+ assert.equal(readStoredId('task', storage), null);
+ const blocked = { getItem() { throw new Error('blocked'); }, setItem() { throw new Error('blocked'); }, removeItem() { throw new Error('blocked'); } };
+ assert.equal(readStoredId('task', blocked), null);
+ assert.doesNotThrow(() => writeStoredId('task', 'abc123', blocked));
+});
+
+test('a download 404 is reported before creating a browser download', async (t) => {
+ t.mock.method(globalThis, 'fetch', async () => new Response(JSON.stringify({ detail: '文件不存在' }), { status: 404 }));
+ await assert.rejects(downloadFile('missing.md'), (error) => error instanceof HttpError && error.status === 404 && error.message === '文件不存在');
+});
+
+test('successful downloads use a blob and retain the actual filename', async (t) => {
+ let requested;
+ let clicked = false;
+ const anchor = { click() { clicked = true; } };
+ t.mock.method(globalThis, 'fetch', async (url) => { requested = url; return new Response('# 笔记'); });
+ t.mock.method(URL, 'createObjectURL', () => 'blob:download-fixture');
+ const previousDocument = globalThis.document;
+ globalThis.document = { createElement: () => anchor, body: { appendChild() {}, removeChild() {} } };
+ try {
+ await downloadFile('transcript_示例_ab12.md');
+ assert.equal(requested, `/api/download/${encodeURIComponent('transcript_示例_ab12.md')}`);
+ assert.equal(anchor.href, 'blob:download-fixture');
+ assert.equal(anchor.download, 'transcript_示例_ab12.md');
+ assert.equal(clicked, true);
+ } finally {
+ if (previousDocument === undefined) delete globalThis.document;
+ else globalThis.document = previousDocument;
+ }
+});
+
+test('aborting a chat stream prevents buffered events from altering another conversation', async (t) => {
+ let push;
+ t.mock.method(globalThis, 'fetch', async () => new Response(new ReadableStream({ start(controller) { push = controller; } })));
+ const controller = streamPost('/api/qa/sessions/example/messages/stream', { question: '示例' }, () => assert.fail('aborted stream delivered content'), () => assert.fail('aborted stream completed'));
+ await delay(1);
+ controller.abort();
+ push.enqueue(new TextEncoder().encode('data: {"content":"late"}\n\n'));
+ push.close();
+ await delay(2);
+});
+
+test('chat streams still deliver split unicode and a final event without a newline', async (t) => {
+ const bytes = new TextEncoder().encode('data: {"content":"回答"}\r\n\r\ndata: {"done":true}');
+ t.mock.method(globalThis, 'fetch', async () => new Response(new ReadableStream({
+ start(controller) {
+ controller.enqueue(bytes.slice(0, 20));
+ controller.enqueue(bytes.slice(20));
+ controller.close();
+ },
+ })));
+ const events = [];
+ await new Promise((resolve, reject) => streamPost('/api/example', {}, (event) => events.push(event), resolve, reject));
+ assert.deepEqual(events, [{ content: '回答' }, { done: true }]);
+});
+
+test('a broken stream falls back to polling without inventing a failed task', async (t) => {
+ const updates = [];
+ const connections = [];
+ let disconnect;
+ let calls = 0;
+ const stop = monitorProgress({
+ load: async () => ({ status: ++calls > 1 ? 'completed' : 'processing' }),
+ subscribe: (_onUpdate, onError) => { disconnect = onError; return { close() {} }; },
+ isTerminal: (data) => data.status === 'completed',
+ onUpdate: (data) => updates.push(data.status),
+ onConnectionChange: (state) => connections.push(state),
+ onUnavailable: () => assert.fail('network interruption is not a missing task'),
+ intervalMs: 2,
+ });
+ t.after(stop);
+ await waitFor(() => updates.length === 1 && typeof disconnect === 'function');
+ disconnect();
+ await waitFor(() => updates.includes('completed'));
+ stop();
+ assert.deepEqual(updates, ['processing', 'completed']);
+ assert.ok(connections.includes('retrying'));
+});
+
+test('polls do not overlap and retry transient failures', async (t) => {
+ let active = 0;
+ let peak = 0;
+ let attempts = 0;
+ const updates = [];
+ const stop = monitorProgress({
+ load: async () => {
+ peak = Math.max(peak, ++active);
+ await delay(20);
+ active--;
+ if (++attempts === 1) throw new Error('offline');
+ return { done: attempts === 3 };
+ },
+ isTerminal: (data) => data.done,
+ onUpdate: (data) => updates.push(data.done),
+ onConnectionChange() {},
+ onUnavailable: () => assert.fail('transient error'),
+ intervalMs: 2,
+ });
+ t.after(stop);
+ await waitFor(() => updates.includes(true));
+ stop();
+ assert.equal(peak, 1);
+ assert.equal(attempts, 3);
+ assert.deepEqual(updates, [false, true]);
+});
+
+test('missing tasks stop retrying and disposed requests cannot update the page', async () => {
+ let missingCalls = 0;
+ let unavailable = 0;
+ const stopMissing = monitorProgress({
+ load: async () => { missingCalls++; throw Object.assign(new Error('任务不存在'), { status: 404 }); },
+ isTerminal: () => false,
+ onUpdate: () => assert.fail('missing task'),
+ onConnectionChange() {},
+ onUnavailable: () => unavailable++,
+ intervalMs: 1,
+ });
+ await delay(10);
+ stopMissing();
+ assert.equal(missingCalls, 1);
+ assert.equal(unavailable, 1);
+
+ let finish;
+ const stop = monitorProgress({
+ load: () => new Promise((resolve) => { finish = resolve; }),
+ isTerminal: () => false,
+ onUpdate: () => assert.fail('disposed observer updated page'),
+ onConnectionChange() {},
+ onUnavailable() {},
+ });
+ stop();
+ finish({ status: 'completed' });
+ await delay(1);
+});