Upload 66 files

ai-routes.js

@@ -97,7 +97,7 @@ function isQuotaError(e) {
 }
 
 // Streaming Helpers
-async function streamGemini(baseParams, res) {
+async function streamGemini(baseParams, res, enableThinking = false) {
     const { GoogleGenAI } = await import("@google/genai");
     const models = ['gemini-2.5-flash', 'gemini-2.5-flash-lite'];
     const keys = await getKeyPool('gemini');
@@ -108,7 +108,16 @@ async function streamGemini(baseParams, res) {
         for (const modelName of models) {
             try {
                 console.log(`[AI] 🚀 Attempting Gemini Model: ${modelName} (Key ends with ...${apiKey.slice(-4)})`);
-                const result = await client.models.generateContentStream({ ...baseParams, model: modelName });
+                
+                // Add thinking config if requested
+                const requestParams = { ...baseParams, model: modelName };
+                if (enableThinking) {
+                    requestParams.config = requestParams.config || {};
+                    // Gemini 2.5 Flash supports thinking config (set budget)
+                    requestParams.config.thinkingConfig = { thinkingBudget: 1024 }; 
+                }
+
+                const result = await client.models.generateContentStream(requestParams);
                 
                 let hasStarted = false;
                 let fullText = "";
@@ -119,9 +128,13 @@ async function streamGemini(baseParams, res) {
                         recordUsage(modelName, PROVIDERS.GEMINI);
                         hasStarted = true;
                     }
+                    
+                    // Check for thought content (provider specific, Gemini SDK usually keeps it in candidates)
+                    // Note: Current Google GenAI Node SDK might not separate thought perfectly in stream without checking complex response structure.
+                    // For now, we assume Gemini just streams text. If Gemini adds explicit thought parts in future SDKs, we parse here.
+                    
                     if (chunk.text) {
                         fullText += chunk.text;
-                        // FIX: Use { type: 'text', content: ... }
                         res.write(`data: ${JSON.stringify({ type: 'text', content: chunk.text })}\n\n`);
                         if (res.flush) res.flush();
                     }
@@ -142,7 +155,7 @@ async function streamGemini(baseParams, res) {
 
 // --- DOUBAO DIRECT STREAMING (Axios) ---
 
-async function streamDoubao(baseParams, res, userId, mode = 'chat', config) {
+async function streamDoubao(baseParams, res, userId, mode = 'chat', config, enableThinking = false) {
     const keys = await getKeyPool('doubao');
     if (keys.length === 0) throw new Error("No Doubao API keys configured");
     
@@ -160,14 +173,14 @@ async function streamDoubao(baseParams, res, userId, mode = 'chat', config) {
 
     for (const apiKey of keys) {
         try {
-            console.log(`[AI] 🚀 Calling Doubao API (Axios): ${endpointId}`);
+            console.log(`[AI] 🚀 Calling Doubao API (Axios): ${endpointId}, Thinking: ${enableThinking}`);
             
             // Payload matching user's CURL example
             const payload = {
                 model: endpointId,
                 messages: messages,
                 stream: true,
-                thinking: { type: "disabled" } // Explicitly disable thinking
+                thinking: { type: enableThinking ? "enabled" : "disabled" } 
             };
 
             const response = await axios.post(
@@ -187,6 +200,7 @@ async function streamDoubao(baseParams, res, userId, mode = 'chat', config) {
             recordUsage(modelId, PROVIDERS.DOUBAO);
 
             let fullText = "";
+            let fullThought = "";
             let hasStarted = false;
             let buffer = "";
 
@@ -208,11 +222,20 @@ async function streamDoubao(baseParams, res, userId, mode = 'chat', config) {
                         try {
                             const jsonStr = trimmed.substring(6);
                             const json = JSON.parse(jsonStr);
-                            const content = json.choices?.[0]?.delta?.content || '';
+                            const delta = json.choices?.[0]?.delta;
+                            
+                            // Handle Thinking Content (DeepSeek/Doubao format usually puts it in reasoning_content)
+                            const reasoning = delta?.reasoning_content;
+                            const content = delta?.content;
+
+                            if (reasoning) {
+                                fullThought += reasoning;
+                                res.write(`data: ${JSON.stringify({ type: 'thinking', content: reasoning })}\n\n`);
+                                if (res.flush) res.flush();
+                            }
                             
                             if (content) {
                                 fullText += content;
-                                // FIX: Ensure format is { type: 'text', content: ... }
                                 res.write(`data: ${JSON.stringify({ type: 'text', content: content })}\n\n`);
                                 if (res.flush) res.flush();
                             }
@@ -260,7 +283,8 @@ async function streamOpenRouter(baseParams, res) {
             // If user uses Doubao via OpenRouter/Custom Proxy, also try to apply cache/thinking params
             if (modelName.toLowerCase().includes('doubao')) {
                 extraBody.caching = { type: "enabled", prefix: true };
-                extraBody.thinking = { type: "disabled" };
+                // We rely on the request passing thinking enabled, but OpenRouter implementation might vary
+                // For now, standard OpenRouter doesn't support 'thinking' param standardly, mostly handled via model choice (e.g. R1)
             }
 
             try {
@@ -337,7 +361,7 @@ async function streamGemma(baseParams, res) {
     throw new Error("Gemma stream failed");
 }
 
-async function streamContentWithSmartFallback(baseParams, res, userId, mode = 'chat') {
+async function streamContentWithSmartFallback(baseParams, res, userId, mode = 'chat', enableThinking = false) {
     let hasAudio = false;
     const contentsArray = Array.isArray(baseParams.contents) ? baseParams.contents : [baseParams.contents];
     
@@ -350,7 +374,7 @@ async function streamContentWithSmartFallback(baseParams, res, userId, mode = 'c
     if (hasAudio) {
         try { 
             console.log(`[AI] 🎤 Audio detected, forcing Gemini provider.`);
-            return await streamGemini(baseParams, res); 
+            return await streamGemini(baseParams, res, enableThinking); 
         } catch(e) { 
             console.error(`[AI] ❌ Audio Processing Failed: ${e.message}`);
             deprioritizeProvider(PROVIDERS.GEMINI); 
@@ -371,10 +395,10 @@ async function streamContentWithSmartFallback(baseParams, res, userId, mode = 'c
     let finalError = null;
     for (const provider of runtimeProviderOrder) {
         try {
-            console.log(`[AI] 👉 Trying Provider: ${provider}... Mode: ${mode}`);
-            if (provider === PROVIDERS.GEMINI) return await streamGemini(baseParams, res);
+            console.log(`[AI] 👉 Trying Provider: ${provider}... Mode: ${mode}, Thinking: ${enableThinking}`);
+            if (provider === PROVIDERS.GEMINI) return await streamGemini(baseParams, res, enableThinking);
             else if (provider === PROVIDERS.OPENROUTER) return await streamOpenRouter(baseParams, res);
-            else if (provider === PROVIDERS.DOUBAO) return await streamDoubao(baseParams, res, userId, mode, config);
+            else if (provider === PROVIDERS.DOUBAO) return await streamDoubao(baseParams, res, userId, mode, config, enableThinking);
             else if (provider === PROVIDERS.GEMMA) return await streamGemma(baseParams, res);
         } catch (e) {
             console.error(`[AI] ❌ Provider ${provider} Failed: ${e.message}`);
@@ -436,13 +460,14 @@ router.post('/reset-pool', checkAIAccess, (req, res) => {
 // --- PERSISTENT CHAT HISTORY HANDLER ---
 // Instead of relying on client-side 'history', we use MongoDB to ensure cross-device memory.
 router.post('/chat', async (req, res) => {
-    const { text, audio, images, history } = req.body; // Added images
+    const { text, audio, images, history, enableThinking, overrideSystemPrompt } = req.body; // Added images, enableThinking, overrideSystemPrompt
     const userRole = req.headers['x-user-role'];
     const username = req.headers['x-user-username'];
     const schoolId = req.headers['x-school-id'];
 
     // ... (Keep Context building logic same) ...
-    const systemInstruction = await buildUserContext(username, userRole, schoolId);
+    // If overrideSystemPrompt is provided (Work Assistant), use it. Otherwise build standard context.
+    const systemInstruction = overrideSystemPrompt || await buildUserContext(username, userRole, schoolId);
 
     // Build History
     // Filter out messages with empty text to prevent API errors
@@ -509,9 +534,11 @@ router.post('/chat', async (req, res) => {
             config: {
                 systemInstruction: systemInstruction
             }
-        }, res);
+        }, res, req.headers['x-user-username'], 'chat', enableThinking);
         
         // 2. Save User Message to DB
+        // For Work Assistant, we might want to segregate history, but for simplicity we save all to same collection
+        // Client-side can filter or use distinct states
         await ChatHistoryModel.create({
             userId: req.headers['x-user-username'], 
             role: 'user',
@@ -520,8 +547,9 @@ router.post('/chat', async (req, res) => {
         });
 
         // 3. Generate TTS (Independent of Text Model)
-        // Only generate audio if text is sufficient length and not just punctuation
-        if (fullText && fullText.length > 2) {
+        // Only generate audio if text is sufficient length, not just punctuation, AND NO Thinking logic (Work Assistant disables audio usually)
+        // Check req.body.disableAudio which might be passed by Work Assistant
+        if (fullText && fullText.length > 2 && !req.body.disableAudio) {
             res.write(`data: ${JSON.stringify({ type: 'status', status: 'tts' })}\n\n`);
             try {
                 const { GoogleGenAI } = await import("@google/genai");

components/ai/WorkAssistantPanel.tsx

@@ -0,0 +1,417 @@
+
+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 } from 'lucide-react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { compressImage } from '../../utils/mediaHelpers';
+import { Toast, ToastState } from '../Toast';
+
+interface WorkAssistantPanelProps {
+    currentUser: User | null;
+}
+
+// Pre-defined Roles
+const ROLES = [
+    { 
+        id: 'editor', 
+        name: '公众号小编', 
+        icon: '📝', 
+        prompt: `你是一位专业的微信公众号小编。
+请根据用户提供的图片和描述撰写一篇图文并茂的文章。
+1. 风格：生动活泼、有感染力，适当使用 Emoji。
+2. 标题：提供3个吸引人的标题供选择。
+3. 图片排版：在文章中合适的位置插入图片占位符。格式必须为：**[图片N]** (例如：**[图片1]**, **[图片2]**)。请根据图片内容逻辑安排顺序，并标注是哪张图片。
+4. 结构：包含开头引导、正文内容、结尾互动。`
+    },
+    { 
+        id: 'host', 
+        name: '活动主持/策划', 
+        icon: '🎤', 
+        prompt: `你是一位经验丰富的学校活动策划和主持人。
+协助老师撰写活动流程、主持稿或致辞。
+1. 风格：庄重、大气或热情（根据活动性质调整）。
+2. 内容：逻辑清晰，环节紧凑。
+3. 格式：标明【环节名称】、【时长预估】、【具体话术】。` 
+    },
+    { 
+        id: 'writer', 
+        name: '文案润色专家', 
+        icon: '✍️', 
+        prompt: `你是一位资深的文字编辑。
+请帮助老师优化、润色草稿或口语化的文字。
+1. 目标：使文字更加通顺、优雅、符合书面语规范。
+2. 修正：纠正错别字和语病。
+3. 提升：优化修辞，增强表现力，但保持原意不变。` 
+    },
+    { 
+        id: 'promoter', 
+        name: '宣传文案/朋友圈', 
+        icon: '📢', 
+        prompt: `你是一位擅长社交媒体传播的文案。
+请为学校活动撰写短小精悍的宣传语，适用于朋友圈、班级群或海报。
+1. 长度：200字以内。
+2. 重点：突出亮点，号召行动。
+3. 格式：分行排版，便于手机阅读。` 
+    }
+];
+
+export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentUser }) => {
+    const [selectedRole, setSelectedRole] = useState(ROLES[0]);
+    const [enableThinking, setEnableThinking] = useState(false);
+    
+    // Chat State
+    const [messages, setMessages] = useState<AIChatMessage[]>([]);
+    const [textInput, setTextInput] = useState('');
+    const [selectedImages, setSelectedImages] = useState<File[]>([]);
+    const [isProcessing, setIsProcessing] = useState(false);
+    
+    // UI State
+    const [toast, setToast] = useState<ToastState>({ show: false, message: '', type: 'success' });
+    const [isThinkingExpanded, setIsThinkingExpanded] = useState<Record<string, boolean>>({});
+    
+    const messagesEndRef = useRef<HTMLDivElement>(null);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' });
+    }, [messages, isProcessing, isThinkingExpanded]);
+
+    const handleImageSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (e.target.files) {
+            setSelectedImages(prev => [...prev, ...Array.from(e.target.files!)]);
+        }
+    };
+
+    const handleCopy = (text: string) => {
+        navigator.clipboard.writeText(text);
+        setToast({ show: true, message: '内容已复制', type: 'success' });
+    };
+
+    const handleSubmit = async () => {
+        if ((!textInput.trim() && selectedImages.length === 0) || isProcessing) return;
+        
+        setIsProcessing(true);
+        const currentText = textInput;
+        const currentImages = [...selectedImages];
+        
+        // Reset Inputs
+        setTextInput('');
+        setSelectedImages([]);
+
+        // ID generation
+        const newAiMsgId = Date.now().toString();
+
+        try {
+            // Process Images to Base64
+            const base64Images = await Promise.all(currentImages.map(f => compressImage(f)));
+
+            // User Message
+            const newUserMsg: AIChatMessage = { 
+                id: (Date.now() - 1).toString(), 
+                role: 'user', 
+                text: currentText, 
+                images: base64Images, 
+                timestamp: Date.now() 
+            };
+            
+            // AI Placeholder
+            const newAiMsg: AIChatMessage = { 
+                id: newAiMsgId, 
+                role: 'model', 
+                text: '', 
+                thought: '', 
+                timestamp: Date.now(),
+                images: base64Images // Pass images to AI message for rendering placeholders locally if needed, but actually we use user's images
+            };
+
+            setMessages(prev => [...prev, newUserMsg, newAiMsg]);
+            
+            // Default expand thinking
+            if (enableThinking) {
+                setIsThinkingExpanded(prev => ({ ...prev, [newAiMsgId]: true }));
+            }
+
+            // Build history context (Simplified: just role context + recent messages)
+            const historyContext = messages.slice(-5).map(m => ({ role: m.role, text: m.text }));
+
+            // Custom prompt logic for image indexing
+            let finalPrompt = currentText;
+            if (base64Images.length > 0) {
+                finalPrompt += `\n\n(附带了 ${base64Images.length} 张图片。在文章中插入时请使用 **[图片1]**, **[图片2]** 等占位符来对应第1、第2张图)`;
+            }
+
+            const response = await fetch('/api/ai/chat', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'x-user-username': currentUser?.username || '',
+                    'x-user-role': currentUser?.role || '',
+                    'x-school-id': currentUser?.schoolId || ''
+                },
+                body: JSON.stringify({ 
+                    text: finalPrompt, 
+                    images: base64Images, 
+                    history: historyContext,
+                    enableThinking,
+                    overrideSystemPrompt: selectedRole.prompt, // Inject specific role prompt
+                    disableAudio: true // No TTS for work assistant
+                })
+            });
+
+            if (!response.ok) throw new Error(response.statusText);
+            if (!response.body) throw new Error('No response body');
+
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder();
+            let aiTextAccumulated = '';
+            let aiThoughtAccumulated = '';
+            let buffer = '';
+
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done) break;
+                
+                buffer += decoder.decode(value, { stream: true });
+                const parts = buffer.split('\n\n');
+                buffer = parts.pop() || ''; 
+                
+                for (const line of parts) {
+                    if (line.startsWith('data: ')) {
+                        const jsonStr = line.replace('data: ', '').trim();
+                        if (jsonStr === '[DONE]') break;
+                        
+                        try {
+                            const data = JSON.parse(jsonStr);
+                            
+                            if (data.type === 'thinking') {
+                                aiThoughtAccumulated += data.content;
+                                setMessages(prev => prev.map(m => m.id === newAiMsgId ? { ...m, thought: aiThoughtAccumulated } : m));
+                            } else if (data.type === 'text') {
+                                // Once text starts, collapse thinking
+                                if (aiTextAccumulated === '' && aiThoughtAccumulated !== '') {
+                                    setIsThinkingExpanded(prev => ({ ...prev, [newAiMsgId]: false }));
+                                }
+                                aiTextAccumulated += data.content;
+                                setMessages(prev => prev.map(m => m.id === newAiMsgId ? { ...m, text: aiTextAccumulated } : m));
+                            } else if (data.type === 'error') {
+                                setMessages(prev => prev.map(m => m.id === newAiMsgId ? { ...m, text: `⚠️ 错误: ${data.message}` } : m));
+                            }
+                        } catch (e) {}
+                    }
+                }
+            }
+
+        } catch (error: any) {
+            setMessages(prev => prev.map(m => m.id === newAiMsgId ? { ...m, text: `抱歉，处理失败: ${error.message}` } : m));
+        } finally {
+            setIsProcessing(false);
+        }
+    };
+
+    // Custom Renderer for [图片N]
+    const renderContent = (text: string, sourceImages: string[] | undefined) => {
+        // Split by image placeholders: **[图片N]** or [图片N]
+        const parts = text.split(/(\*\*\[图片\d+\]\*\*|\[图片\d+\])/g);
+        
+        return (
+            <div>
+                {parts.map((part, idx) => {
+                    const match = part.match(/\d+/);
+                    if ((part.startsWith('[图片') || part.startsWith('**[图片')) && match && sourceImages) {
+                        const imgIndex = parseInt(match[0]) - 1;
+                        if (sourceImages[imgIndex]) {
+                            return (
+                                <div key={idx} className="my-4">
+                                    <img 
+                                        src={`data:image/jpeg;base64,${sourceImages[imgIndex]}`} 
+                                        className="max-w-full md:max-w-md rounded-lg shadow-sm border border-gray-200" 
+                                        alt={`Image ${imgIndex + 1}`} 
+                                    />
+                                    <div className="text-center text-xs text-gray-400 mt-1">图 {imgIndex + 1}</div>
+                                </div>
+                            );
+                        }
+                    }
+                    return <ReactMarkdown key={idx} remarkPlugins={[remarkGfm]} components={{p: ({node, ...props}) => <p className="mb-2 last:mb-0" {...props}/>}}>{part}</ReactMarkdown>;
+                })}
+            </div>
+        );
+    };
+
+    return (
+        <div className="flex flex-col h-full bg-slate-50 relative">
+            {toast.show && <Toast message={toast.message} type={toast.type} onClose={()=>setToast({...toast, show: false})}/>}
+            
+            {/* Toolbar */}
+            <div className="bg-white px-6 py-3 border-b border-gray-200 flex flex-wrap gap-4 items-center justify-between shadow-sm shrink-0 z-20">
+                <div className="flex items-center gap-2">
+                    <span className="text-sm font-bold text-gray-700">工作场景:</span>
+                    <div className="relative group">
+                        <button className="flex items-center gap-2 px-3 py-1.5 bg-indigo-50 text-indigo-700 rounded-lg text-sm font-bold border border-indigo-100 hover:bg-indigo-100 transition-colors">
+                            <span>{selectedRole.icon} {selectedRole.name}</span>
+                            <ChevronDown size={14}/>
+                        </button>
+                        <div className="absolute top-full left-0 mt-1 w-56 bg-white border border-gray-200 rounded-xl shadow-xl overflow-hidden hidden group-hover:block z-50">
+                            {ROLES.map(role => (
+                                <button 
+                                    key={role.id}
+                                    onClick={() => setSelectedRole(role)}
+                                    className={`w-full text-left px-4 py-3 text-sm hover:bg-indigo-50 flex items-center gap-2 ${selectedRole.id === role.id ? 'bg-indigo-50 text-indigo-700 font-bold' : 'text-gray-700'}`}
+                                >
+                                    <span>{role.icon}</span>
+                                    <span>{role.name}</span>
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+
+                <div className="flex items-center gap-4">
+                    <div className="flex items-center gap-2" title="仅支持部分高级模型 (如 Doubao Pro, Gemini Flash)">
+                        <span className="text-sm text-gray-600 font-medium flex items-center gap-1">
+                            <Brain size={16} className={enableThinking ? "text-purple-600" : "text-gray-400"}/> 深度思考
+                        </span>
+                        <label className="relative inline-flex items-center cursor-pointer">
+                            <input type="checkbox" checked={enableThinking} onChange={e => setEnableThinking(e.target.checked)} className="sr-only peer"/>
+                            <div className="w-9 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-purple-600"></div>
+                        </label>
+                    </div>
+                    <button onClick={() => setMessages([])} className="text-gray-400 hover:text-red-500 p-2 rounded-full hover:bg-red-50 transition-colors">
+                        <Trash2 size={18}/>
+                    </button>
+                </div>
+            </div>
+
+            {/* Chat Area */}
+            <div 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">
+                        <Bot size={48} className="mb-4"/>
+                        <p className="text-lg font-bold">我是你的{selectedRole.name}</p>
+                        <p className="text-sm">上传图片或输入要求，开始工作吧</p>
+                    </div>
+                )}
+                
+                {messages.map((msg, index) => {
+                    // Find the user message immediately preceding this AI message to get source images for placeholders
+                    let sourceImages: string[] = [];
+                    if (msg.role === 'model') {
+                        // Look back for the connected user message (usually index - 1)
+                        const prevMsg = messages[index - 1];
+                        if (prevMsg && prevMsg.role === 'user' && prevMsg.images) {
+                            sourceImages = prevMsg.images;
+                        }
+                    } else if (msg.role === 'user' && msg.images) {
+                        sourceImages = msg.images;
+                    }
+
+                    return (
+                        <div key={msg.id} className={`flex gap-4 ${msg.role === 'user' ? 'flex-row-reverse' : ''} max-w-4xl mx-auto w-full`}>
+                            <div className={`w-10 h-10 rounded-full flex items-center justify-center shrink-0 shadow-sm ${msg.role === 'model' ? 'bg-white border border-indigo-100 text-indigo-600' : 'bg-blue-600 text-white'}`}>
+                                {msg.role === 'model' ? <Sparkles size={20}/> : <span className="font-bold text-xs">ME</span>}
+                            </div>
+                            
+                            <div className={`flex flex-col gap-2 max-w-[85%] ${msg.role === 'user' ? 'items-end' : 'items-start'}`}>
+                                {msg.role === 'model' && msg.thought && (
+                                    <div className="w-full bg-purple-50 rounded-xl border border-purple-100 overflow-hidden mb-2">
+                                        <button 
+                                            onClick={() => setIsThinkingExpanded(prev => ({ ...prev, [msg.id]: !prev[msg.id] }))}
+                                            className="w-full px-4 py-2 flex items-center justify-between text-xs font-bold text-purple-700 bg-purple-100/50 hover:bg-purple-100 transition-colors"
+                                        >
+                                            <span className="flex items-center gap-2"><Brain size={14}/> 深度思考过程</span>
+                                            {isThinkingExpanded[msg.id] ? <ChevronDown size={14}/> : <ChevronRight size={14}/>}
+                                        </button>
+                                        {isThinkingExpanded[msg.id] && (
+                                            <div className="p-4 text-xs text-purple-800 whitespace-pre-wrap leading-relaxed border-t border-purple-100 font-mono bg-white/50">
+                                                {msg.thought}
+                                            </div>
+                                        )}
+                                    </div>
+                                )}
+
+                                <div className={`p-4 rounded-2xl shadow-sm text-sm overflow-hidden relative group ${msg.role === 'user' ? 'bg-blue-600 text-white rounded-tr-none' : 'bg-white text-gray-800 border border-gray-100 rounded-tl-none'}`}>
+                                    {/* User Image Preview Grid */}
+                                    {msg.role === 'user' && sourceImages.length > 0 && (
+                                        <div className="grid grid-cols-3 gap-2 mb-3">
+                                            {sourceImages.map((img, i) => (
+                                                <div key={i} className="relative aspect-square">
+                                                    <img src={`data:image/jpeg;base64,${img}`} className="w-full h-full object-cover rounded-lg border border-white/20" />
+                                                    <div className="absolute bottom-0 right-0 bg-black/50 text-white text-[10px] px-1.5 rounded-tl-lg">图{i+1}</div>
+                                                </div>
+                                            ))}
+                                        </div>
+                                    )}
+
+                                    {/* Content Rendering */}
+                                    <div className={`markdown-body ${msg.role === 'user' ? 'text-white' : ''}`}>
+                                        {msg.role === 'model' ? renderContent(msg.text || '', sourceImages) : <p className="whitespace-pre-wrap">{msg.text}</p>}
+                                    </div>
+
+                                    {/* Copy Button for Model */}
+                                    {msg.role === 'model' && !isProcessing && (
+                                        <button 
+                                            onClick={() => handleCopy(msg.text || '')} 
+                                            className="absolute top-2 right-2 p-1.5 text-gray-400 hover:text-blue-600 bg-white/80 backdrop-blur rounded-lg opacity-0 group-hover:opacity-100 transition-all shadow-sm border border-gray-100"
+                                            title="复制内容"
+                                        >
+                                            <Copy size={14}/>
+                                        </button>
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+                    );
+                })}
+                <div ref={messagesEndRef} />
+            </div>
+
+            {/* Input Area */}
+            <div className="bg-white border-t border-gray-200 p-4 z-20">
+                <div className="max-w-4xl mx-auto flex flex-col gap-3">
+                    {/* Image Preview */}
+                    {selectedImages.length > 0 && (
+                        <div className="flex gap-2 overflow-x-auto pb-2 px-1">
+                            {selectedImages.map((file, idx) => (
+                                <div key={idx} className="relative w-16 h-16 shrink-0 group rounded-lg overflow-hidden border border-gray-200 shadow-sm">
+                                    <img src={URL.createObjectURL(file)} className="w-full h-full object-cover" />
+                                    <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                                        <button onClick={() => setSelectedImages(prev => prev.filter((_, i) => i !== idx))} className="text-white hover:text-red-400"><X size={16}/></button>
+                                    </div>
+                                    <div className="absolute bottom-0 right-0 bg-blue-600 text-white text-[9px] px-1 rounded-tl">图{idx+1}</div>
+                                </div>
+                            ))}
+                        </div>
+                    )}
+
+                    <div className="flex gap-2 items-end bg-gray-50 p-2 rounded-2xl border border-gray-200 focus-within:ring-2 focus-within:ring-indigo-100 focus-within:border-indigo-300 transition-all">
+                        <button onClick={() => fileInputRef.current?.click()} className="p-3 text-gray-500 hover:bg-white hover:text-indigo-600 rounded-xl transition-colors shrink-0" title="上传图片">
+                            <ImageIcon size={22}/>
+                        </button>
+                        <input type="file" multiple accept="image/*" ref={fileInputRef} className="hidden" onChange={handleImageSelect} onClick={(e) => (e.currentTarget.value = '')} />
+
+                        <textarea 
+                            className="flex-1 bg-transparent border-none outline-none text-sm resize-none max-h-32 py-3 px-2"
+                            placeholder={`给${selectedRole.name}下达指令... (支持 Shift+Enter 换行)`}
+                            rows={1}
+                            value={textInput}
+                            onChange={e => setTextInput(e.target.value)}
+                            onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSubmit(); } }}
+                        />
+
+                        <button 
+                            onClick={handleSubmit} 
+                            disabled={(!textInput.trim() && selectedImages.length === 0) || isProcessing}
+                            className={`p-3 rounded-xl transition-all shrink-0 shadow-sm ${(!textInput.trim() && selectedImages.length === 0) || isProcessing ? 'bg-gray-200 text-gray-400 cursor-not-allowed' : 'bg-indigo-600 text-white hover:bg-indigo-700 hover:scale-105'}`}
+                        >
+                            {isProcessing ? <Loader2 className="animate-spin" size={20}/> : <Send size={20}/>}
+                        </button>
+                    </div>
+                    <div className="text-center text-xs text-gray-400">
+                        * AI 生成内容仅供参考，请人工审核后使用
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};

pages/AIAssistant.tsx

@@ -2,10 +2,11 @@
 import React, { useState, useEffect } from 'react';
 import { api } from '../services/api';
 import { UserRole } from '../types';
-import { Bot, Mic, Loader2 } from 'lucide-react';
+import { Bot, Mic, Loader2, Briefcase } from 'lucide-react';
 import { AdminPanel } from '../components/ai/AdminPanel';
 import { ChatPanel } from '../components/ai/ChatPanel';
 import { AssessmentPanel } from '../components/ai/AssessmentPanel';
+import { WorkAssistantPanel } from '../components/ai/WorkAssistantPanel';
 
 export const AIAssistant: React.FC = () => {
     const currentUser = api.auth.getCurrentUser();
@@ -13,7 +14,7 @@ export const AIAssistant: React.FC = () => {
     
     const [loading, setLoading] = useState(true);
     const [isEnabled, setIsEnabled] = useState(false);
-    const [activeTab, setActiveTab] = useState<'chat' | 'assessment'>('chat');
+    const [activeTab, setActiveTab] = useState<'chat' | 'assessment' | 'work'>('chat');
 
     useEffect(() => {
         checkStatus();
@@ -50,21 +51,26 @@ export const AIAssistant: React.FC = () => {
 
     return (
         <div className="h-full flex flex-col bg-slate-50 overflow-hidden relative">
-            <div className="bg-white border-b border-gray-200 px-6 pt-4 flex justify-between shrink-0 shadow-sm z-10">
-                <div className="flex gap-6">
+            <div className="bg-white border-b border-gray-200 px-6 pt-4 flex justify-between shrink-0 shadow-sm z-10 overflow-x-auto">
+                <div className="flex gap-6 min-w-max">
                     <button onClick={() => setActiveTab('chat')} className={`pb-3 text-sm font-bold border-b-2 transition-colors flex items-center gap-2 ${activeTab === 'chat' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'}`}>
                         <Bot size={18} className={activeTab === 'chat' ? 'text-blue-500' : ''}/> AI 助教 (问答)
                     </button>
                     <button onClick={() => setActiveTab('assessment')} className={`pb-3 text-sm font-bold border-b-2 transition-colors flex items-center gap-2 ${activeTab === 'assessment' ? 'border-purple-500 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700'}`}>
                         <Mic size={18} className={activeTab === 'assessment' ? 'text-purple-500' : ''}/> 口语/背诵测评
                     </button>
+                    <button onClick={() => setActiveTab('work')} className={`pb-3 text-sm font-bold border-b-2 transition-colors flex items-center gap-2 ${activeTab === 'work' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700'}`}>
+                        <Briefcase size={18} className={activeTab === 'work' ? 'text-indigo-500' : ''}/> 工作助理 (文案/策划)
+                    </button>
                 </div>
             </div>
 
             {activeTab === 'chat' ? (
                 <ChatPanel currentUser={currentUser} />
-            ) : (
+            ) : activeTab === 'assessment' ? (
                 <AssessmentPanel currentUser={currentUser} />
+            ) : (
+                <WorkAssistantPanel currentUser={currentUser} />
             )}
         </div>
     );

services/api.ts

@@ -271,7 +271,7 @@ export const api = {
   },
 
   ai: {
-      chat: (data: { text?: string, audio?: string, history?: { role: string, text?: string }[] }) => request('/ai/chat', { method: 'POST', body: JSON.stringify(data) }),
+      chat: (data: { text?: string, audio?: string, history?: { role: string, text?: string }[], enableThinking?: boolean, overrideSystemPrompt?: string, disableAudio?: boolean }) => request('/ai/chat', { method: 'POST', body: JSON.stringify(data) }),
       evaluate: (data: { question: string, audio?: string, image?: string }) => request('/ai/evaluate', { method: 'POST', body: JSON.stringify(data) }),
       resetPool: () => request('/ai/reset-pool', { method: 'POST' }), 
       getStats: () => request('/ai/stats'), // NEW Detailed Stats
@@ -283,4 +283,4 @@ export const api = {
       update: (id: string, data: Partial<Todo>) => request(`/todos/${id}`, { method: 'PUT', body: JSON.stringify(data) }),
       delete: (id: string) => request(`/todos/${id}`, { method: 'DELETE' }),
   }
-};
+};

types.ts

@@ -400,6 +400,7 @@ export interface AIChatMessage {
   id: string;
   role: 'user' | 'model';
   text?: string;
+  thought?: string; // New: For Deep Thinking Chain of Thought
   audio?: string;
   images?: string[]; 
   isAudioMessage?: boolean;