310 lines
9.8 KiB
TypeScript
310 lines
9.8 KiB
TypeScript
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
|
import { useSession } from '@/hooks/useSession';
|
|
import { useTheme } from '../../../contexts/ThemeContext';
|
|
import ConfigPanel from './components/ConfigPanel';
|
|
import Sidebar from './components/Sidebar';
|
|
import Timeline from './components/Timeline';
|
|
import ProgressSidebar from './components/ProgressSidebar';
|
|
import ScenarioConfigPage from './components/ScenarioConfigPage';
|
|
import './MopeChat.css';
|
|
|
|
type StartConfig = {
|
|
task_context?: string;
|
|
[key: string]: any;
|
|
};
|
|
|
|
type SessionError = {
|
|
agent_id?: string;
|
|
error?: string;
|
|
};
|
|
|
|
type SessionHistoryPayload = {
|
|
typeName: string;
|
|
templateName: string;
|
|
resultJson: Record<string, any>;
|
|
};
|
|
|
|
const MOPE_HISTORY_API_BASE = '/api/mope/history';
|
|
|
|
/**
|
|
* 保存模型完整生成结果。
|
|
*
|
|
* 接口暂未提供，先把调用方法和请求体结构固定下来：
|
|
* - typeName：类型名字，目前使用用户输入的任务背景。
|
|
* - templateName：用户选择的生成模板名称。
|
|
* - resultJson：完整结果 JSON，包含 timeline、agentStates、reportSchema、finalReport 等恢复页面所需数据。
|
|
*/
|
|
async function saveMopeHistory(payload: SessionHistoryPayload) {
|
|
const response = await fetch(MOPE_HISTORY_API_BASE, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`保存 MOPE 历史失败：HTTP ${response.status}`);
|
|
}
|
|
|
|
return response.json().catch(() => null);
|
|
}
|
|
|
|
/**
|
|
* 获取当前用户最近一次 MOPE 生成历史。
|
|
*
|
|
* 接口暂未提供，先约定返回值就是保存时的 resultJson。
|
|
* 如果接口没有历史数据，应返回 null / 空对象 / 404，页面会保持当前未生成状态。
|
|
*/
|
|
async function fetchMopeHistory(): Promise<Record<string, any> | null> {
|
|
const response = await fetch(MOPE_HISTORY_API_BASE, { method: 'GET' });
|
|
|
|
if (response.status === 404 || response.status === 204) return null;
|
|
if (!response.ok) {
|
|
throw new Error(`获取 MOPE 历史失败：HTTP ${response.status}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
return data?.resultJson || data || null;
|
|
}
|
|
|
|
export default function MopeChat() {
|
|
const session = useSession() as any;
|
|
const { theme } = useTheme() as { theme?: string };
|
|
const isDark = theme === 'dark';
|
|
const [taskContext, setTaskContext] = useState<string>('');
|
|
const [idlePage, setIdlePage] = useState<string>('home');
|
|
const [isLeftSidebarCollapsed, setIsLeftSidebarCollapsed] = useState(false);
|
|
const [isRightSidebarCollapsed, setIsRightSidebarCollapsed] = useState(false);
|
|
|
|
const {
|
|
status,
|
|
phase,
|
|
coordinatorMode,
|
|
currentRound,
|
|
divergeRounds,
|
|
reportSchema,
|
|
agents,
|
|
agentStates,
|
|
timeline,
|
|
sharedMemory,
|
|
finalReportPartial,
|
|
currentFinalField,
|
|
pendingReview,
|
|
reviewSubmitting,
|
|
reviewRevising,
|
|
errors,
|
|
startSession,
|
|
stopSession,
|
|
approveCoordinator,
|
|
reviseCoordinator,
|
|
hydrateFromSnapshot,
|
|
reset,
|
|
} = session;
|
|
|
|
const historyLoadedRef = useRef(false);
|
|
const savedHistoryKeyRef = useRef<string | null>(null);
|
|
const currentConfigRef = useRef<StartConfig | null>(null);
|
|
|
|
const buildHistorySnapshot = useCallback(() => ({
|
|
status,
|
|
phase,
|
|
coordinatorMode,
|
|
currentRound,
|
|
divergeRounds,
|
|
reportSchema,
|
|
agents,
|
|
agentStates,
|
|
timeline,
|
|
sharedMemory,
|
|
finalReportPartial,
|
|
currentFinalField,
|
|
config: currentConfigRef.current,
|
|
}), [
|
|
status,
|
|
phase,
|
|
coordinatorMode,
|
|
currentRound,
|
|
divergeRounds,
|
|
reportSchema,
|
|
agents,
|
|
agentStates,
|
|
timeline,
|
|
sharedMemory,
|
|
finalReportPartial,
|
|
currentFinalField,
|
|
]);
|
|
|
|
const handleStart = (config: StartConfig, backendUrl: string) => {
|
|
currentConfigRef.current = config;
|
|
savedHistoryKeyRef.current = null;
|
|
setTaskContext(config.task_context || '');
|
|
startSession(config, backendUrl);
|
|
};
|
|
|
|
const handleStop = () => {
|
|
stopSession();
|
|
};
|
|
|
|
const handleReset = () => {
|
|
reset();
|
|
currentConfigRef.current = null;
|
|
savedHistoryKeyRef.current = null;
|
|
setTaskContext('');
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (historyLoadedRef.current) return;
|
|
historyLoadedRef.current = true;
|
|
|
|
void fetchMopeHistory()
|
|
.then((snapshot) => {
|
|
if (!snapshot || !Array.isArray(snapshot.timeline) || snapshot.timeline.length === 0) return;
|
|
currentConfigRef.current = snapshot.config || null;
|
|
setTaskContext(snapshot.config?.task_context || snapshot.typeName || '');
|
|
hydrateFromSnapshot(snapshot);
|
|
})
|
|
.catch((error) => {
|
|
console.warn('MOPE 历史记录获取失败，保持默认空状态:', error);
|
|
});
|
|
}, [hydrateFromSnapshot]);
|
|
|
|
useEffect(() => {
|
|
if (status !== 'done' || !timeline?.length) return;
|
|
const snapshot = buildHistorySnapshot();
|
|
const templateName = currentConfigRef.current?.template_name || '未命名模板';
|
|
const typeName = taskContext || currentConfigRef.current?.task_context || '未命名任务';
|
|
const saveKey = `${typeName}::${templateName}::${timeline.length}`;
|
|
if (savedHistoryKeyRef.current === saveKey) return;
|
|
savedHistoryKeyRef.current = saveKey;
|
|
|
|
void saveMopeHistory({
|
|
typeName,
|
|
templateName,
|
|
resultJson: {
|
|
...snapshot,
|
|
typeName,
|
|
templateName,
|
|
savedAt: new Date().toISOString(),
|
|
},
|
|
}).catch((error) => {
|
|
console.warn('MOPE 历史记录保存失败:', error);
|
|
savedHistoryKeyRef.current = null;
|
|
});
|
|
}, [status, timeline, taskContext, buildHistorySnapshot]);
|
|
|
|
if (status === 'idle') {
|
|
if (idlePage === 'scenario_config') {
|
|
return (
|
|
<div className={`mope-chat app-idle app-idle-scroll ${isDark ? 'mope-chat-dark' : 'mope-chat-light'}`}>
|
|
<ScenarioConfigPage onBack={() => setIdlePage('home')} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={`mope-chat app-idle ${isDark ? 'mope-chat-dark' : 'mope-chat-light'}`}>
|
|
<ConfigPanel
|
|
onStart={handleStart}
|
|
isRunning={false}
|
|
onStop={handleStop}
|
|
onOpenScenarioConfig={() => setIdlePage('scenario_config')}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={`mope-chat app-running ${isDark ? 'mope-chat-dark' : 'mope-chat-light'}`}>
|
|
<header className="app-header">
|
|
<span className="app-header-logo">MOPE</span>
|
|
<span className="app-header-task">
|
|
{taskContext ? `"${taskContext.slice(0, 80)}${taskContext.length > 80 ? '…' : ''}"` : '分析中…'}
|
|
</span>
|
|
<span className="badge badge-default">
|
|
{coordinatorMode === 'human_review' ? '人工确认' : '全自动'}
|
|
</span>
|
|
{status === 'waiting_human' && (
|
|
<span className="badge badge-diverging">等待人工确认</span>
|
|
)}
|
|
<div className="app-header-actions">
|
|
{(status === 'running' || status === 'waiting_human') && (
|
|
<button className="btn-danger" onClick={handleStop}>
|
|
停止
|
|
</button>
|
|
)}
|
|
{(status === 'done' || status === 'error') && (
|
|
<button className="btn-secondary" onClick={handleReset}>
|
|
重新开始
|
|
</button>
|
|
)}
|
|
</div>
|
|
</header>
|
|
|
|
<div className="app-body">
|
|
<aside className={`app-sidebar app-side-panel${isLeftSidebarCollapsed ? ' collapsed' : ''}`}>
|
|
<button
|
|
type="button"
|
|
className="app-side-toggle app-side-toggle-left"
|
|
onClick={() => setIsLeftSidebarCollapsed(v => !v)}
|
|
aria-label={isLeftSidebarCollapsed ? '展开左侧栏' : '收起左侧栏'}
|
|
title={isLeftSidebarCollapsed ? '展开左侧栏' : '收起左侧栏'}
|
|
>
|
|
{isLeftSidebarCollapsed ? <ChevronRight size={16} /> : <ChevronLeft size={16} />}
|
|
</button>
|
|
{!isLeftSidebarCollapsed && (
|
|
<Sidebar
|
|
agents={agents}
|
|
agentStates={agentStates}
|
|
phase={phase}
|
|
currentRound={currentRound}
|
|
divergeRounds={divergeRounds}
|
|
/>
|
|
)}
|
|
</aside>
|
|
|
|
<main className="app-main">
|
|
{errors.length > 0 && errors.map((e: SessionError, i: number) => (
|
|
<div key={i} className="error-banner">
|
|
{e.agent_id ? `[${e.agent_id}] ` : ''}{e.error}
|
|
</div>
|
|
))}
|
|
<Timeline
|
|
timeline={timeline}
|
|
agentStates={agentStates}
|
|
reportSchema={reportSchema}
|
|
pendingReview={pendingReview}
|
|
onApproveReview={approveCoordinator}
|
|
onReviseReview={reviseCoordinator}
|
|
reviewSubmitting={reviewSubmitting}
|
|
reviewRevising={reviewRevising}
|
|
/>
|
|
</main>
|
|
|
|
<aside className={`app-progress-sidebar app-side-panel${isRightSidebarCollapsed ? ' collapsed' : ''}`}>
|
|
<button
|
|
type="button"
|
|
className="app-side-toggle app-side-toggle-right"
|
|
onClick={() => setIsRightSidebarCollapsed(v => !v)}
|
|
aria-label={isRightSidebarCollapsed ? '展开右侧栏' : '收起右侧栏'}
|
|
title={isRightSidebarCollapsed ? '展开右侧栏' : '收起右侧栏'}
|
|
>
|
|
{isRightSidebarCollapsed ? <ChevronLeft size={16} /> : <ChevronRight size={16} />}
|
|
</button>
|
|
{!isRightSidebarCollapsed && (
|
|
<ProgressSidebar
|
|
phase={phase}
|
|
status={status}
|
|
currentRound={currentRound}
|
|
divergeRounds={divergeRounds}
|
|
reportSchema={reportSchema}
|
|
sharedMemory={sharedMemory}
|
|
finalReportPartial={finalReportPartial}
|
|
currentFinalField={currentFinalField}
|
|
/>
|
|
)}
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|