90 lines
3.3 KiB
TypeScript
90 lines
3.3 KiB
TypeScript
import React from 'react';
|
|
import { ChatMessage, AppState, AnalysisResult, ExpertResult } from '../types';
|
|
import ChatMessageItem from './ChatMessage';
|
|
import ProcessFlow from './ProcessFlow';
|
|
|
|
interface ChatAreaProps {
|
|
messages: ChatMessage[];
|
|
appState: AppState;
|
|
managerAnalysis: AnalysisResult | null;
|
|
experts: ExpertResult[];
|
|
finalOutput: string;
|
|
processStartTime: number | null;
|
|
processEndTime: number | null;
|
|
}
|
|
|
|
const ChatArea = ({
|
|
messages,
|
|
appState,
|
|
managerAnalysis,
|
|
experts,
|
|
finalOutput,
|
|
processStartTime,
|
|
processEndTime
|
|
}: ChatAreaProps) => {
|
|
return (
|
|
<div className="flex-1 overflow-y-auto custom-scrollbar scroll-smooth">
|
|
<div className="pb-40">
|
|
{messages.length === 0 && appState === 'idle' && (
|
|
<div className="h-full flex flex-col items-center justify-center pt-32 opacity-50 px-4 text-center">
|
|
<div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl mb-6 shadow-lg rotate-3 flex items-center justify-center text-white font-bold text-2xl">
|
|
Pr
|
|
</div>
|
|
<p className="text-lg font-medium">Prisma</p>
|
|
<p className="text-sm">Ask a complex question to start.</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* History */}
|
|
{messages.map((msg, idx) => (
|
|
<ChatMessageItem
|
|
key={msg.id}
|
|
message={msg}
|
|
isLast={idx === messages.length - 1}
|
|
/>
|
|
))}
|
|
|
|
{/* Active Generation (Ghost Message) */}
|
|
{appState !== 'idle' && appState !== 'completed' && (
|
|
<div className="group w-full bg-transparent text-slate-800">
|
|
<div className="max-w-6xl mx-auto px-4 py-8 flex gap-6">
|
|
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-white border border-blue-200 shadow-sm flex items-center justify-center">
|
|
<div className="animate-spin w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full"></div>
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="font-semibold text-sm text-slate-900 mb-2">Prisma</div>
|
|
|
|
{/* Active Thinking Process */}
|
|
<div className="mb-4 bg-white border border-blue-100 rounded-xl p-4 shadow-sm">
|
|
<ProcessFlow
|
|
appState={appState}
|
|
managerAnalysis={managerAnalysis}
|
|
experts={experts}
|
|
processStartTime={processStartTime}
|
|
processEndTime={processEndTime}
|
|
/>
|
|
</div>
|
|
|
|
{/* Streaming Output */}
|
|
{finalOutput && (
|
|
<div className="prose prose-slate max-w-none">
|
|
<ChatMessageItem
|
|
message={{
|
|
id: 'streaming',
|
|
role: 'model',
|
|
content: finalOutput,
|
|
isThinking: false
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ChatArea; |