Upload 67 files

components/ai/WorkAssistantPanel.tsx

@@ -1,44 +1,46 @@
 
 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 } from 'lucide-react';
+import { Bot, Send, Sparkles, Loader2, Image as ImageIcon, X, Trash2, Brain, ChevronDown, ChevronRight, Copy, Check, FileText, Plus, Paperclip, File } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { compressImage } from '../../utils/mediaHelpers';
+import { parseDocument } from '../../utils/documentParser';
 import { Toast, ToastState } from '../Toast';
 
 interface WorkAssistantPanelProps {
     currentUser: User | null;
 }
 
-// Optimized Roles based on user's requirements
+// Optimized Roles for Formal School Context
 const ROLES = [
     { 
         id: 'editor', 
         name: '公众号图文精修', 
         icon: '📝', 
-        description: '自动优化文稿并插入图片占位符',
-        prompt: `你是一位拥有10年经验的学校公众号主编。你的任务是根据用户提供的草稿（或活动描述）以及上传的图片数量，重写并排版一篇高质量的公众号推文。
-
-### 核心任务
-1. **文案润色**：将文字修改为优雅、生动、富有教育情怀的风格（参考：初冬暖阳，万物含情）。
-2. **标题生成**：提供3个吸引人的标题。
-3. **图片排版（关键）**：
-   - 用户上传了 {{IMAGE_COUNT}} 张图片。
-   - 你必须将这 {{IMAGE_COUNT}} 张图片全部分配到文章的合适位置。
-   - **格式要求**：请在段落结束后，使用 **（图Start-图End）** 或 **（图N）** 的格式插入占位符。
-   - **智能分组**：不要一张张插入。请根据段落内容将相关图片分组。例如：
-     - 描写校园环境时，插入 （图1-图5）
-     - 描写大课间活动时，插入 （图6-图10）
-     - 描写讲座时，插入 （图11-图12）
-   - 请确保图片编号从1开始连续编号，不要遗漏，也不要超出用户上传的总数。
-
-### 输出风格示例
-...（正文内容）...
-...细致观摩校园文化建设的匠心设计。（图1-图5）
-
-...尽显校园的蓬勃生机。...让校长们在行走中感受优质校园的育人底蕴。（图6-图10）
-...`
+        description: '自动优化文稿并智能排版图片',
+        prompt: `你是一位拥有10年经验的学校官方公众号主编。你的任务是根据用户提供的草稿（或活动描述）以及上传的图片，撰写一篇高质量的官方推文。
+
+### 核心原则
+1.  **严禁使用 Emoji**：保持学校官方文稿的端庄、大气、严谨。
+2.  **文风要求**：用词优美、教育情怀浓厚、逻辑清晰。多用书面语，避免口语化。
+3.  **标题生成**：提供3个符合教育系统风格的标题供选择。
+
+### 图片排版规则 (至关重要)
+- **如果有图片**：用户上传了 {{IMAGE_COUNT}} 张图片。请务必将这 {{IMAGE_COUNT}} 张图片根据段落内容逻辑，以 **（图Start-图End）** 或 **（图N）** 的格式插入到文章最合适的位置。不要遗漏任何图片。
+- **如果没有图片**：如果用户没有上传任何图片，**绝对不要**在文中插入任何 "(图x)" 占位符。直接输出纯文本文章即可。
+
+### 输出风格示例 (有图时)
+...（正文段落）...
+...细致观摩校园文化建设的匠心设计。（图1-图3）
+
+...（正文段落）...
+...尽显校园的蓬勃生机。（图4-图5）
+
+### 输出风格示例 (无图时)
+...（正文段落）...
+...细致观摩校园文化建设的匠心设计。
+...（正文段落）...`
     },
     { 
         id: 'host', 
@@ -46,21 +48,32 @@ const ROLES = [
         icon: '🎤', 
         description: '生成正式的活动主持词',
         prompt: `你是一位经验丰富的学校活动策划和主持人。
-协助老师撰写活动流程、主持稿或致辞。
-1. 风格：庄重、大气或热情（根据活动性质调整）。
-2. 内容：逻辑清晰，环节紧凑，串词自然过渡。
-3. 格式：标明【环节名称】、【具体话术】。` 
+协助老师撰写活动流程、主持稿或领导/嘉宾致辞。
+1. **风格**：庄重、大气、热情但不失礼仪。严禁使用 Emoji。
+2. **内容**：逻辑清晰，环节紧凑，串词自然过渡。
+3. **格式**：标明【环节名称】、【具体话术】。` 
+    },
+    { 
+        id: 'writer', 
+        name: '公文/通知润色', 
+        icon: '✍️', 
+        description: '将草稿转化为正式公文',
+        prompt: `你是一位资深的教育系统笔杆子。
+请帮助老师将口语化或草稿文字转化为正式、规范的公文或通知。
+1. **目标**：准确、简练、得体。严禁使用 Emoji。
+2. **修正**：纠正错别字和语病，规范标点符号。
+3. **格式**：符合公文通报的标准格式。` 
     },
     { 
         id: 'promoter', 
-        name: '朋友圈/短文案', 
+        name: '宣传/海报文案', 
         icon: '📢', 
-        description: '生成短小精悍的宣传语',
-        prompt: `你是一位擅长社交媒体传播的文案。
-请为学校活动撰写短小精悍的宣传语，适用于朋友圈、班级群或海报。
-1. 长度：200字以内。
-2. 重点：突出亮点，号召行动，适当使用Emoji增加亲和力。
-3. 格式：分行排版，便于手机阅读。` 
+        description: '生成精炼的宣传标语',
+        prompt: `你是一位擅长教育传播的文案专家。
+请为学校活动撰写短小精悍的宣传语，适用于海报、展板或家长群通知。
+1. **长度**：200字以内。
+2. **重点**：突出亮点，语言富有感染力，但保持端庄，不要使用过于浮夸的网络用语或 Emoji。
+3. **排版**：分行排版，重点突出。` 
     }
 ];
 
@@ -72,6 +85,12 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
     const [messages, setMessages] = useState<AIChatMessage[]>([]);
     const [textInput, setTextInput] = useState('');
     const [selectedImages, setSelectedImages] = useState<File[]>([]);
+    
+    // Document State
+    const [docFile, setDocFile] = useState<File | null>(null);
+    const [docContent, setDocContent] = useState<string>('');
+    const [docLoading, setDocLoading] = useState(false);
+
     const [isProcessing, setIsProcessing] = useState(false);
     
     // UI State
@@ -80,6 +99,7 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
     
     const messagesEndRef = useRef<HTMLDivElement>(null);
     const fileInputRef = useRef<HTMLInputElement>(null);
+    const docInputRef = useRef<HTMLInputElement>(null);
 
     useEffect(() => {
         messagesEndRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' });
@@ -91,24 +111,53 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
         }
     };
 
+    const handleDocSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (e.target.files && e.target.files.length > 0) {
+            const file = e.target.files[0];
+            setDocFile(file);
+            setDocLoading(true);
+            try {
+                const text = await parseDocument(file);
+                setDocContent(text);
+                setToast({ show: true, message: '文档解析成功，将作为参考内容发送', type: 'success' });
+            } catch (err: any) {
+                setToast({ show: true, message: '文档解析失败: ' + err.message, type: 'error' });
+                setDocFile(null);
+                setDocContent('');
+            } finally {
+                setDocLoading(false);
+            }
+        }
+    };
+
+    const clearDoc = () => {
+        setDocFile(null);
+        setDocContent('');
+        if (docInputRef.current) docInputRef.current.value = '';
+    };
+
     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;
+        if ((!textInput.trim() && selectedImages.length === 0 && !docContent) || isProcessing) return;
         
         setIsProcessing(true);
         const currentText = textInput;
         const currentImages = [...selectedImages];
+        const currentDocText = docContent;
+        const currentDocName = docFile?.name;
         
         // Reset Inputs
         setTextInput('');
         setSelectedImages([]);
+        clearDoc();
 
-        // ID generation
-        const newAiMsgId = Date.now().toString();
+        // ID generation using UUID to prevent collisions
+        const userMsgId = crypto.randomUUID();
+        const aiMsgId = crypto.randomUUID();
 
         try {
             // Process Images to Base64
@@ -116,16 +165,16 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
 
             // User Message
             const newUserMsg: AIChatMessage = { 
-                id: (Date.now() - 1).toString(), 
+                id: userMsgId, 
                 role: 'user', 
-                text: currentText, 
+                text: currentText + (currentDocName ? `\n\n[附带文档]: ${currentDocName}` : ''), 
                 images: base64Images, 
                 timestamp: Date.now() 
             };
             
             // AI Placeholder
             const newAiMsg: AIChatMessage = { 
-                id: newAiMsgId, 
+                id: aiMsgId, 
                 role: 'model', 
                 text: '', 
                 thought: '', 
@@ -137,16 +186,25 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
             setMessages(prev => [...prev, newUserMsg, newAiMsg]);
             
             if (enableThinking) {
-                setIsThinkingExpanded(prev => ({ ...prev, [newAiMsgId]: true }));
+                setIsThinkingExpanded(prev => ({ ...prev, [aiMsgId]: true }));
             }
 
             // Inject Image Count into System Prompt
-            const dynamicSystemPrompt = selectedRole.prompt.replace('{{IMAGE_COUNT}}', String(base64Images.length));
+            const dynamicSystemPrompt = selectedRole.prompt.replace(/{{IMAGE_COUNT}}/g, String(base64Images.length));
 
-            // Custom prompt logic for image indexing
+            // Construct Final Prompt
             let finalPrompt = currentText;
+            
+            // Add Doc Content
+            if (currentDocText) {
+                finalPrompt += `\n\n【参考文档内容 (${currentDocName})】:\n${currentDocText}\n\n请根据上述文档内容和我的要求进行创作。`;
+            }
+
+            // Add Image Logic
             if (base64Images.length > 0) {
                 finalPrompt += `\n\n[系统提示] 用户上传了 ${base64Images.length} 张图片。请务必在文章中合理位置插入 （图1-图X） 格式的占位符。`;
+            } else {
+                finalPrompt += `\n\n[系统提示] 用户未上传图片。请忽略所有图片排版指令，严禁在文中插入任何 (图x) 占位符，仅输出纯文字。`;
             }
 
             const response = await fetch('/api/ai/chat', {
@@ -160,7 +218,7 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
                 body: JSON.stringify({ 
                     text: finalPrompt, 
                     images: base64Images, 
-                    history: [], // Work assistant usually doesn't need long history context to keep focus sharp
+                    history: [], // Work assistant keeps context short
                     enableThinking,
                     overrideSystemPrompt: dynamicSystemPrompt, 
                     disableAudio: true 
@@ -192,17 +250,18 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
                         try {
                             const data = JSON.parse(jsonStr);
                             
+                            // Using functional update with ID check to ensure we only update the AI message
                             if (data.type === 'thinking') {
                                 aiThoughtAccumulated += data.content;
-                                setMessages(prev => prev.map(m => m.id === newAiMsgId ? { ...m, thought: aiThoughtAccumulated } : m));
+                                setMessages(prev => prev.map(m => m.id === aiMsgId ? { ...m, thought: aiThoughtAccumulated } : m));
                             } else if (data.type === 'text') {
                                 if (aiTextAccumulated === '' && aiThoughtAccumulated !== '') {
-                                    setIsThinkingExpanded(prev => ({ ...prev, [newAiMsgId]: false }));
+                                    setIsThinkingExpanded(prev => ({ ...prev, [aiMsgId]: false }));
                                 }
                                 aiTextAccumulated += data.content;
-                                setMessages(prev => prev.map(m => m.id === newAiMsgId ? { ...m, text: aiTextAccumulated } : m));
+                                setMessages(prev => prev.map(m => m.id === aiMsgId ? { ...m, text: aiTextAccumulated } : m));
                             } else if (data.type === 'error') {
-                                setMessages(prev => prev.map(m => m.id === newAiMsgId ? { ...m, text: `⚠️ 错误: ${data.message}` } : m));
+                                setMessages(prev => prev.map(m => m.id === aiMsgId ? { ...m, text: `⚠️ 错误: ${data.message}` } : m));
                             }
                         } catch (e) {}
                     }
@@ -210,7 +269,7 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
             }
 
         } catch (error: any) {
-            setMessages(prev => prev.map(m => m.id === newAiMsgId ? { ...m, text: `抱歉，处理失败: ${error.message}` } : m));
+            setMessages(prev => prev.map(m => m.id === aiMsgId ? { ...m, text: `抱歉，处理失败: ${error.message}` } : m));
         } finally {
             setIsProcessing(false);
         }
@@ -338,8 +397,8 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
                         <FileText size={48} className="mb-4 text-indigo-300"/>
                         <p className="text-lg font-bold text-gray-600">我是你的{selectedRole.name}助理</p>
                         <p className="text-sm mt-2 max-w-md text-center">
-                            请上传活动照片（支持批量）并输入简单的活动描述。<br/>
-                            我会为你生成图文并茂的文章，并自动排版图片位置。
+                            请上传活动照片（支持批量）或文档（Word/PDF/Txt）<br/>
+                            输入简单的活动描述，我会为你生成端庄大气的官方文稿。
                         </p>
                     </div>
                 )}
@@ -418,7 +477,7 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
                     <div className="flex justify-center py-4">
                         <div className="bg-white px-4 py-2 rounded-full shadow-sm border border-indigo-100 flex items-center gap-2 text-indigo-600 text-sm animate-pulse">
                             <Bot size={16}/>
-                            <span>正在撰写文案并排版图片...</span>
+                            <span>正在阅读资料并撰写文案...</span>
                         </div>
                     </div>
                 )}
@@ -428,9 +487,11 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
             {/* 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 && (
+                    
+                    {/* Attachments Preview */}
+                    {(selectedImages.length > 0 || docFile) && (
                         <div className="flex gap-2 overflow-x-auto pb-2 px-1 custom-scrollbar">
+                            {/* Images */}
                             {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" />
@@ -440,10 +501,22 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
                                     <div className="absolute bottom-0 right-0 bg-blue-600 text-white text-[9px] px-1 rounded-tl">图{idx+1}</div>
                                 </div>
                             ))}
-                            <div className="w-16 h-16 shrink-0 rounded-lg border-2 border-dashed border-gray-300 flex flex-col items-center justify-center text-gray-400 cursor-pointer hover:border-indigo-400 hover:text-indigo-500 transition-colors" onClick={() => fileInputRef.current?.click()}>
-                                <Plus size={20}/>
-                                <span className="text-[9px]">添加</span>
-                            </div>
+                            
+                            {/* Document */}
+                            {docFile && (
+                                <div className="relative h-16 px-3 bg-indigo-50 border border-indigo-200 rounded-lg flex items-center justify-center shrink-0 min-w-[120px] max-w-[200px]">
+                                    <div className="flex flex-col items-start overflow-hidden">
+                                        <div className="flex items-center text-indigo-700 font-bold text-xs mb-1">
+                                            <File size={12} className="mr-1"/> 
+                                            {docLoading ? '解析中...' : '已解析'}
+                                        </div>
+                                        <span className="text-[10px] text-indigo-500 truncate w-full" title={docFile.name}>{docFile.name}</span>
+                                    </div>
+                                    <button onClick={clearDoc} className="absolute top-0.5 right-0.5 text-indigo-300 hover:text-red-500 p-0.5"><X size={12}/></button>
+                                </div>
+                            )}
+
+                            {/* Add More Button (if needed logic) */}
                         </div>
                     )}
 
@@ -453,9 +526,14 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
                         </button>
                         <input type="file" multiple accept="image/*" ref={fileInputRef} className="hidden" onChange={handleImageSelect} onClick={(e) => (e.currentTarget.value = '')} />
 
+                        <button onClick={() => docInputRef.current?.click()} className={`p-3 rounded-xl transition-colors shrink-0 ${docFile ? 'text-indigo-600 bg-indigo-50' : 'text-gray-500 hover:bg-white hover:text-indigo-600'}`} title="上传文档 (Docx, PDF, Txt)">
+                            <Paperclip size={22}/>
+                        </button>
+                        <input type="file" accept=".docx, .pdf, .txt" ref={docInputRef} className="hidden" onChange={handleDocSelect} 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.id === 'editor' ? "请粘贴草稿文字或输入活动描述..." : `给${selectedRole.name}下达指令...`}
+                            placeholder={selectedRole.id === 'editor' ? "请输入活动描述，或直接上传活动方案文档..." : `给${selectedRole.name}下达指令...`}
                             rows={1}
                             value={textInput}
                             onChange={e => setTextInput(e.target.value)}
@@ -464,14 +542,14 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
 
                         <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'}`}
+                            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 ? <Loader2 className="animate-spin" size={20}/> : <Send size={20}/>}
+                            {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>* 支持 Shift+Enter 换行</span>
+                        <span>* 支持上传 Word/PDF/Txt 解析内容</span>
                         <span>AI 生成内容仅供参考</span>
                     </div>
                 </div>

index.html

@@ -1,3 +1,4 @@
+
 <!DOCTYPE html>
 <html lang="zh-CN">
   <head>
@@ -38,7 +39,9 @@
     "@google/genai": "https://esm.sh/@google/genai@^1.33.0",
     "react-markdown": "https://esm.sh/react-markdown@^10.1.0",
     "remark-gfm": "https://esm.sh/remark-gfm@^4.0.1",
-    "vite-plugin-pwa": "https://esm.sh/vite-plugin-pwa@^1.2.0"
+    "vite-plugin-pwa": "https://esm.sh/vite-plugin-pwa@^1.2.0",
+    "mammoth": "https://esm.sh/mammoth@1.6.0",
+    "pdfjs-dist": "https://esm.sh/pdfjs-dist@3.11.174"
   }
 }
 </script>
@@ -54,4 +57,4 @@
     </div>
     <script type="module" src="/index.tsx"></script>
   </body>
-</html>
+</html>

utils/documentParser.ts

@@ -0,0 +1,76 @@
+
+// @ts-ignore
+import mammoth from 'mammoth';
+// @ts-ignore
+import * as pdfjsLib from 'pdfjs-dist';
+
+// Set worker for PDF.js. Using the same version from ESM CDN.
+pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://esm.sh/pdfjs-dist@3.11.174/build/pdf.worker.min.js';
+
+export interface ParsedDocument {
+    fileName: string;
+    content: string;
+    fileType: string;
+}
+
+export const parseDocument = async (file: File): Promise<string> => {
+    const fileType = file.name.split('.').pop()?.toLowerCase();
+
+    if (fileType === 'txt') {
+        return await parseTxt(file);
+    } else if (fileType === 'docx') {
+        return await parseDocx(file);
+    } else if (fileType === 'pdf') {
+        return await parsePdf(file);
+    } else {
+        throw new Error('不支持的文件格式。仅支持 .txt, .docx, .pdf');
+    }
+};
+
+const parseTxt = (file: File): Promise<string> => {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = (e) => resolve(e.target?.result as string);
+        reader.onerror = (e) => reject(e);
+        reader.readAsText(file);
+    });
+};
+
+const parseDocx = (file: File): Promise<string> => {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const arrayBuffer = e.target?.result as ArrayBuffer;
+            mammoth.extractRawText({ arrayBuffer: arrayBuffer })
+                .then((result: any) => resolve(result.value))
+                .catch((err: any) => reject(err));
+        };
+        reader.onerror = (e) => reject(e);
+        reader.readAsArrayBuffer(file);
+    });
+};
+
+const parsePdf = async (file: File): Promise<string> => {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = async (e) => {
+            try {
+                const typedarray = new Uint8Array(e.target?.result as ArrayBuffer);
+                const pdf = await pdfjsLib.getDocument(typedarray).promise;
+                let fullText = '';
+                
+                for (let i = 1; i <= pdf.numPages; i++) {
+                    const page = await pdf.getPage(i);
+                    const textContent = await page.getTextContent();
+                    const pageText = textContent.items.map((item: any) => item.str).join(' ');
+                    fullText += pageText + '\n';
+                }
+                resolve(fullText);
+            } catch (err) {
+                reject(err);
+            }
+        };
+        reader.onerror = (e) => reject(e);
+        reader.readAsArrayBuffer(file);
+    });
+};