1

prisma/components/ChatArea.tsx

@@ -0,0 +1,90 @@
+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;