Update components/ai/ChatPanel.tsx

components/ai/ChatPanel.tsx

@@ -1,7 +1,7 @@
 
 import React, { useState, useRef, useEffect } from 'react';
 import { AIChatMessage, User } from '../../types';
-import { Bot, Mic, Square, Volume2, Send, Sparkles, Loader2, Image as ImageIcon, Trash2, X, StopCircle, Globe, Brain, Search } from 'lucide-react';
+import { Bot, Mic, Square, Volume2, Send, Sparkles, Loader2, Image as ImageIcon, Trash2, X, StopCircle, Globe, Brain, Search, Copy, ChevronDown, ChevronRight } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { blobToBase64, base64ToUint8Array, decodePCM, cleanTextForTTS, compressImage } from '../../utils/mediaHelpers';
@@ -164,6 +164,11 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({ currentUser }) => {
         }
     };
 
+    const handleCopy = (text: string) => {
+        navigator.clipboard.writeText(text);
+        setToast({ show: true, message: '已复制', type: 'success' });
+    };
+
     const handleSubmit = async () => {
         if ((!textInput.trim() && !audioAttachment && selectedImages.length === 0) || isChatProcessing) return;
         
@@ -200,7 +205,7 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({ currentUser }) => {
                 timestamp: Date.now() 
             };
             
-            const newAiMsg: AIChatMessage = { id: newAiMsgId, role: 'model', text: '', thought: '', timestamp: Date.now() };
+            const newAiMsg: AIChatMessage = { id: newAiMsgId, role: 'model', text: '', thought: '', timestamp: Date.now(), isSearching: enableSearch };
 
             setMessages(prev => [...prev, newUserMsg, newAiMsg]);
             if (enableThinking) setIsThinkingExpanded(prev => ({ ...prev, [newAiMsgId]: true }));
@@ -259,7 +264,7 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({ currentUser }) => {
                                 setMessages(prev => prev.map(m => m.id === newAiMsgId ? { ...m, thought: aiThoughtAccumulated } : m));
                             }
                             else if (data.type === 'search') {
-                                // Enable search visual
+                                // Enable search visual explicitly
                                 setMessages(prev => prev.map(m => m.id === newAiMsgId ? { ...m, isSearching: true } : m));
                             }
                             else if (data.type === 'status' && data.status === 'tts') {
@@ -284,6 +289,9 @@ 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));
         } finally { 
@@ -304,7 +312,6 @@ 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">
                 {messages.map(msg => (
@@ -330,11 +337,11 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({ currentUser }) => {
                                     )}
                                 </div>
                             )}
-
-                            {/* Search Status Bubble */}
+                            
+                            {/* Search Status Bubble (Added) */}
                             {msg.role === 'model' && msg.isSearching && (
-                                <div className="flex items-center gap-2 bg-blue-50 text-blue-600 px-3 py-2 rounded-xl mb-2 text-xs border border-blue-100 animate-pulse">
-                                    <Globe size={14} className="animate-spin-slow"/>
+                                <div className="flex items-center gap-2 bg-blue-50 text-blue-600 px-3 py-2 rounded-xl mb-2 text-xs border border-blue-100 animate-pulse w-fit">
+                                    <Globe size={14} className="animate-spin"/>
                                     <span>正在联网搜索相关信息...</span>
                                 </div>
                             )}
@@ -363,17 +370,26 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({ currentUser }) => {
                                 )}
                                 
                                 {(msg.role === 'model' && (msg.text || msg.audio) && !isChatProcessing && !msg.isGeneratingAudio) && (
-                                    <button 
-                                        onClick={() => playingMessageId === msg.id ? stopPlayback() : playAudio(msg)} 
-                                        className={`mt-2 flex items-center gap-2 text-xs px-3 py-1.5 rounded-full border transition-colors w-fit ${
-                                            playingMessageId === msg.id 
-                                            ? 'bg-blue-100 text-blue-600 border-blue-200 animate-pulse' 
-                                            : 'bg-gray-50 text-gray-600 hover:bg-gray-100 border border-gray-200'
-                                        }`}
-                                    >
-                                        {playingMessageId === msg.id ? <Square size={14} fill="currentColor"/> : <Volume2 size={14}/>}
-                                        {playingMessageId === msg.id ? '朗读中...' : '朗读'}
-                                    </button>
+                                    <div className="flex gap-2 mt-2">
+                                        <button 
+                                            onClick={() => playingMessageId === msg.id ? stopPlayback() : playAudio(msg)} 
+                                            className={`flex items-center gap-2 text-xs px-3 py-1.5 rounded-full border transition-colors w-fit ${
+                                                playingMessageId === msg.id 
+                                                ? 'bg-blue-100 text-blue-600 border-blue-200 animate-pulse' 
+                                                : 'bg-gray-50 text-gray-600 hover:bg-gray-100 border border-gray-200'
+                                            }`}
+                                        >
+                                            {playingMessageId === msg.id ? <Square size={14} fill="currentColor"/> : <Volume2 size={14}/>}
+                                            {playingMessageId === msg.id ? '朗读中...' : '朗读'}
+                                        </button>
+                                        <button 
+                                            onClick={() => handleCopy(msg.text || '')} 
+                                            className="flex items-center gap-2 text-xs px-3 py-1.5 rounded-full border bg-gray-50 text-gray-600 hover:bg-gray-100 border-gray-200 transition-colors w-fit"
+                                            title="复制"
+                                        >
+                                            <Copy size={14}/>
+                                        </button>
+                                    </div>
                                 )}
                             </div>
                         </div>
@@ -382,7 +398,7 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({ currentUser }) => {
                 <div ref={messagesEndRef} />
             </div>
             
-            {/* Improved Input Area */}
+            {/* Input Area */}
             <div className="p-4 bg-white border-t border-gray-200 shrink-0 z-20">
                 <div className="max-w-4xl mx-auto flex flex-col gap-2">
                     
@@ -399,13 +415,12 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({ currentUser }) => {
                             <button 
                                 onClick={() => setEnableSearch(!enableSearch)}
                                 className={`flex items-center gap-1 text-xs px-2 py-1 rounded-md border transition-all ${enableSearch ? 'bg-blue-50 text-blue-600 border-blue-200' : 'bg-gray-50 text-gray-500 border-transparent hover:bg-gray-100'}`}
-                                title="开启后AI将联网搜索最新信息 (Doubao模型支持)"
+                                title="开启后AI将联网搜索最新信息 (仅部分模型支持)"
                             >
                                 <Globe size={14}/> 联网搜索
                             </button>
                         </div>
                     </div>
-
                     {/* Attachments Preview */}
                     {(selectedImages.length > 0 || audioAttachment) && (
                         <div className="flex gap-2 overflow-x-auto pb-2">
@@ -426,7 +441,6 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({ currentUser }) => {
                             )}
                         </div>
                     )}
-
                     <div className="flex items-end gap-2 bg-gray-100 p-2 rounded-2xl border border-gray-200">
                         {/* Image Button */}
                         <button onClick={() => fileInputRef.current?.click()} className="p-2 text-gray-500 hover:bg-white hover:text-blue-600 rounded-full transition-colors shrink-0">
@@ -441,7 +455,6 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({ currentUser }) => {
                             onChange={handleImageSelect}
                             onClick={(e) => (e.currentTarget.value = '')} // RESET VALUE
                         />
-
                         {/* Input Area */}
                         <div className="flex-1 min-h-[40px] flex items-center">
                             {audioAttachment ? (
@@ -464,7 +477,6 @@ 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">