Upload 67 files

components/ai/ChatPanel.tsx

@@ -48,7 +48,11 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({ currentUser }) => {
     const audioContextRef = useRef<AudioContext | null>(null);
     const currentSourceRef = useRef<AudioBufferSourceNode | null>(null);
     const messagesEndRef = useRef<HTMLDivElement>(null);
+    const scrollContainerRef = useRef<HTMLDivElement>(null); // New Ref for Scroll Container
     const fileInputRef = useRef<HTMLInputElement>(null);
+    
+    // Abort Controller Ref
+    const abortControllerRef = useRef<AbortController | null>(null);
 
     // Initialize AudioContext
     useEffect(() => {
@@ -73,8 +77,22 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({ currentUser }) => {
         } catch (e) {}
     }, [messages]);
 
+    // SMART SCROLL LOGIC
     useEffect(() => {
-        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' });
+        if (!scrollContainerRef.current || !messagesEndRef.current) return;
+        
+        const container = scrollContainerRef.current;
+        const { scrollTop, scrollHeight, clientHeight } = container;
+        
+        // Threshold: If user is within 100px of the bottom, auto-scroll.
+        // Also force scroll if it's a brand new user message (we assume user wants to see their own msg)
+        const isNearBottom = scrollHeight - scrollTop - clientHeight < 150;
+        const lastMsg = messages[messages.length - 1];
+        const isUserMsg = lastMsg?.role === 'user';
+
+        if (isNearBottom || (isUserMsg && !isChatProcessing)) {
+            messagesEndRef.current.scrollIntoView({ behavior: 'smooth', block: 'end' });
+        }
     }, [messages, isChatProcessing, isThinkingExpanded]);
 
     const stopPlayback = () => {
@@ -86,6 +104,15 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({ currentUser }) => {
         setPlayingMessageId(null);
     };
 
+    const handleStopGeneration = () => {
+        if (abortControllerRef.current) {
+            abortControllerRef.current.abort();
+            abortControllerRef.current = null;
+            setIsChatProcessing(false);
+            setToast({ show: true, message: '已停止生成', type: 'error' });
+        }
+    };
+
     const playAudio = async (msg: AIChatMessage) => {
         stopPlayback();
         // 1. Try playing pre-generated audio (Gemini TTS)
@@ -188,6 +215,9 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({ currentUser }) => {
         }
         
         setIsChatProcessing(true);
+        
+        // Init Abort Controller
+        abortControllerRef.current = new AbortController();
 
         // Fix: Use UUID to avoid collision
         const newAiMsgId = crypto.randomUUID(); 
@@ -208,6 +238,12 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({ currentUser }) => {
             const newAiMsg: AIChatMessage = { id: newAiMsgId, role: 'model', text: '', thought: '', timestamp: Date.now(), isSearching: enableSearch };
 
             setMessages(prev => [...prev, newUserMsg, newAiMsg]);
+            
+            // Force scroll to bottom when new user message is added
+            setTimeout(() => {
+                messagesEndRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' });
+            }, 100);
+
             if (enableThinking) setIsThinkingExpanded(prev => ({ ...prev, [newAiMsgId]: true }));
 
             const response = await fetch('/api/ai/chat', {
@@ -225,7 +261,8 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({ currentUser }) => {
                     history: messages.filter(m => m.id !== 'welcome').map(m => ({ role: m.role, text: m.text })),
                     enableThinking,
                     enableSearch
-                })
+                }),
+                signal: abortControllerRef.current.signal
             });
 
             if (!response.ok) throw new Error(response.statusText);
@@ -289,13 +326,18 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({ currentUser }) => {
                     }
                 }
             }
-            // Final cleanup
-            setMessages(prev => prev.map(m => m.id === newAiMsgId ? { ...m, isSearching: false } : m));
 
         } catch (error: any) {
-            setMessages(prev => prev.map(m => m.id === newAiMsgId ? { ...m, text: '抱歉，连接断开或发生错误。', isSearching: false } : m));
+            if (error.name === 'AbortError') {
+                // Ignore abort errors
+            } else {
+                setMessages(prev => prev.map(m => m.id === newAiMsgId ? { ...m, text: '抱歉，连接断开或发生错误。', isSearching: false } : m));
+            }
         } finally { 
-            setIsChatProcessing(false); 
+            // CRITICAL: Ensure states are cleared even if error occurs or stream finishes
+            setMessages(prev => prev.map(m => m.id === newAiMsgId ? { ...m, isSearching: false, isGeneratingAudio: false } : m));
+            setIsChatProcessing(false);
+            abortControllerRef.current = null;
         }
     };
 
@@ -312,8 +354,8 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({ currentUser }) => {
                     <Trash2 size={14}/> 清除
                 </button>
             </div>
-            {/* Chat History */}
-            <div className="flex-1 overflow-y-auto p-4 space-y-4 pb-4 custom-scrollbar">
+            {/* Chat History with Ref for Scroll Container */}
+            <div ref={scrollContainerRef} className="flex-1 overflow-y-auto p-4 space-y-4 pb-4 custom-scrollbar">
                 {messages.map(msg => (
                     <div key={msg.id} className={`flex gap-3 ${msg.role === 'user' ? 'flex-row-reverse' : ''}`}>
                         <div className={`w-10 h-10 rounded-full flex items-center justify-center shrink-0 ${msg.role === 'model' ? 'bg-blue-100 text-blue-600' : 'bg-gray-200 text-gray-600'}`}>
@@ -478,9 +520,13 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({ currentUser }) => {
                             )}
                         </div>
                         {/* Right Actions */}
-                        {(textInput.trim() || audioAttachment || selectedImages.length > 0) ? (
-                            <button onClick={handleSubmit} disabled={isChatProcessing} className="p-2 bg-blue-600 text-white rounded-full hover:bg-blue-700 transition-all shrink-0 shadow-sm disabled:opacity-50">
-                                {isChatProcessing ? <Loader2 className="animate-spin" size={20}/> : <Send size={20}/>}
+                        {isChatProcessing ? (
+                            <button onClick={handleStopGeneration} className="p-2 bg-red-500 text-white rounded-full hover:bg-red-600 transition-all shrink-0 shadow-sm animate-pulse" title="停止生成">
+                                <Square size={20} fill="currentColor"/>
+                            </button>
+                        ) : ((textInput.trim() || audioAttachment || selectedImages.length > 0) ? (
+                            <button onClick={handleSubmit} className="p-2 bg-blue-600 text-white rounded-full hover:bg-blue-700 transition-all shrink-0 shadow-sm disabled:opacity-50">
+                                <Send size={20}/>
                             </button>
                         ) : (
                             <button 
@@ -493,7 +539,7 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({ currentUser }) => {
                             >
                                 {isRecording ? <StopCircle size={22}/> : <Mic size={22}/>}
                             </button>
-                        )}
+                        ))}
                     </div>
                     {isRecording && <div className="text-center text-xs text-red-500 font-bold animate-pulse">正在录音... 松开发送到输入框</div>}
                 </div>

components/ai/WorkAssistantPanel.tsx

@@ -1,7 +1,7 @@
 
 import React, { useState, useRef, useEffect } from 'react';
 import { AIChatMessage, User } from '../../types';
-import { Bot, Send, Sparkles, Loader2, Image as ImageIcon, X, Trash2, Brain, ChevronDown, ChevronRight, Copy, Check, FileText, Plus, Paperclip, File, Globe } from 'lucide-react';
+import { Bot, Send, Sparkles, Loader2, Image as ImageIcon, X, Trash2, Brain, ChevronDown, ChevronRight, Copy, Check, FileText, Plus, Paperclip, File, Globe, Square } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { compressImage } from '../../utils/mediaHelpers';
@@ -161,11 +161,26 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
     const [isThinkingExpanded, setIsThinkingExpanded] = useState<Record<string, boolean>>({});
     
     const messagesEndRef = useRef<HTMLDivElement>(null);
+    const scrollContainerRef = useRef<HTMLDivElement>(null); // New Scroll Container
     const fileInputRef = useRef<HTMLInputElement>(null);
     const docInputRef = useRef<HTMLInputElement>(null);
+    const abortControllerRef = useRef<AbortController | null>(null);
 
+    // Smart Scroll
     useEffect(() => {
-        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' });
+        if (!scrollContainerRef.current || !messagesEndRef.current) return;
+        
+        const container = scrollContainerRef.current;
+        const { scrollTop, scrollHeight, clientHeight } = container;
+        
+        // Auto scroll if user is near bottom OR if it's a new user prompt (start of turn)
+        const isNearBottom = scrollHeight - scrollTop - clientHeight < 150;
+        const lastMsg = messages[messages.length - 1];
+        const isUserMsg = lastMsg?.role === 'user';
+
+        if (isNearBottom || (isUserMsg && !isProcessing)) {
+            messagesEndRef.current.scrollIntoView({ behavior: 'smooth', block: 'end' });
+        }
     }, [messages, isProcessing, isThinkingExpanded]);
 
     const handleImageSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -204,6 +219,15 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
         setToast({ show: true, message: '内容已复制', type: 'success' });
     };
 
+    const handleStopGeneration = () => {
+        if (abortControllerRef.current) {
+            abortControllerRef.current.abort();
+            abortControllerRef.current = null;
+            setIsProcessing(false);
+            setToast({ show: true, message: '已停止生成', type: 'error' });
+        }
+    };
+
     const handleSubmit = async () => {
         if ((!textInput.trim() && selectedImages.length === 0 && !docContent) || isProcessing) return;
         
@@ -217,6 +241,8 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
         setTextInput('');
         setSelectedImages([]);
         clearDoc();
+        
+        abortControllerRef.current = new AbortController();
 
         const userMsgId = crypto.randomUUID();
         const aiMsgId = crypto.randomUUID();
@@ -247,6 +273,11 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
 
             setMessages(prev => [...prev, newUserMsg, newAiMsg]);
             
+            // Force scroll to bottom on submit
+            setTimeout(() => {
+                messagesEndRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' });
+            }, 100);
+            
             if (enableThinking) {
                 setIsThinkingExpanded(prev => ({ ...prev, [aiMsgId]: true }));
             }
@@ -285,7 +316,8 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
                     enableSearch,
                     overrideSystemPrompt: dynamicSystemPrompt, 
                     disableAudio: true 
-                })
+                }),
+                signal: abortControllerRef.current.signal
             });
 
             if (!response.ok) throw new Error(response.statusText);
@@ -332,13 +364,15 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
                     }
                 }
             }
-            // Cleanup
-            setMessages(prev => prev.map(m => m.id === aiMsgId ? { ...m, isSearching: false } : m));
 
         } catch (error: any) {
-            setMessages(prev => prev.map(m => m.id === aiMsgId ? { ...m, text: `抱歉，处理失败: ${error.message}`, isSearching: false } : m));
+            if (error.name !== 'AbortError') {
+                setMessages(prev => prev.map(m => m.id === aiMsgId ? { ...m, text: `抱歉，处理失败: ${error.message}`, isSearching: false } : m));
+            }
         } finally {
+            setMessages(prev => prev.map(m => m.id === aiMsgId ? { ...m, isSearching: false } : m));
             setIsProcessing(false);
+            abortControllerRef.current = null;
         }
     };
 
@@ -463,8 +497,8 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
                 </div>
             </div>
 
-            {/* Chat Area */}
-            <div className="flex-1 overflow-y-auto p-6 space-y-6 custom-scrollbar">
+            {/* Chat Area with Ref for Scroll Container */}
+            <div ref={scrollContainerRef} className="flex-1 overflow-y-auto p-6 space-y-6 custom-scrollbar">
                 {messages.length === 0 && (
                     <div className="flex flex-col items-center justify-center h-full text-gray-400 opacity-60">
                         <FileText size={48} className="mb-4 text-indigo-300"/>
@@ -616,13 +650,23 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
                             onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSubmit(); } }}
                         />
 
-                        <button 
-                            onClick={handleSubmit} 
-                            disabled={(!textInput.trim() && selectedImages.length === 0 && !docFile) || isProcessing || docLoading}
-                            className={`p-3 rounded-xl transition-all shrink-0 shadow-sm ${(!textInput.trim() && selectedImages.length === 0 && !docFile) || isProcessing || docLoading ? 'bg-gray-200 text-gray-400 cursor-not-allowed' : 'bg-indigo-600 text-white hover:bg-indigo-700 hover:scale-105'}`}
-                        >
-                            {isProcessing || docLoading ? <Loader2 className="animate-spin" size={20}/> : <Send size={20}/>}
-                        </button>
+                        {isProcessing ? (
+                            <button 
+                                onClick={handleStopGeneration} 
+                                className="p-3 bg-red-500 text-white rounded-xl shadow-sm hover:bg-red-600 transition-all shrink-0 animate-pulse"
+                                title="停止生成"
+                            >
+                                <Square size={20} fill="currentColor"/>
+                            </button>
+                        ) : (
+                            <button 
+                                onClick={handleSubmit} 
+                                disabled={(!textInput.trim() && selectedImages.length === 0 && !docFile) || isProcessing || docLoading}
+                                className={`p-3 rounded-xl transition-all shrink-0 shadow-sm ${(!textInput.trim() && selectedImages.length === 0 && !docFile) || isProcessing || docLoading ? 'bg-gray-200 text-gray-400 cursor-not-allowed' : 'bg-indigo-600 text-white hover:bg-indigo-700 hover:scale-105'}`}
+                            >
+                                {isProcessing || docLoading ? <Loader2 className="animate-spin" size={20}/> : <Send size={20}/>}
+                            </button>
+                        )}
                     </div>
                     <div className="flex justify-between text-xs text-gray-400 px-1">
                         <span>* 支持上传 Word/PDF/Txt 解析内容</span>