Update web/src/components/ChatArea.tsx

web/src/components/ChatArea.tsx

@@ -1,257 +1,286 @@
-// web/src/components/ChatArea.tsx
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import type { FileType, Message, UploadedFile, LearningMode, SpaceType } from '../App';
 import { Button } from './ui/button';
-import { Textarea } from './ui/textarea';
-import { Send, ArrowDown, Trash2, Share2 } from 'lucide-react';
-import { Message } from './Message';
-import { FileUploadArea } from './FileUploadArea';
-import { MemoryLine } from './MemoryLine';
-import type { Message as MessageType, LearningMode, UploadedFile, FileType, SpaceType } from '../App';
-import { toast } from 'sonner';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from './ui/dropdown-menu';
 
-interface ChatAreaProps {
-  messages: MessageType[];
+type Props = {
+  messages: Message[];
   onSendMessage: (content: string) => void;
+
   uploadedFiles: UploadedFile[];
   onFileUpload: (files: File[]) => void;
   onRemoveFile: (index: number) => void;
   onFileTypeChange: (index: number, type: FileType) => void;
+
+  // ✅ 新增：真正触发上传
+  onUploadSingle: (index: number) => void;
+  onUploadAllPending: () => void;
+
   memoryProgress: number;
   isLoggedIn: boolean;
+
   learningMode: LearningMode;
   onClearConversation: () => void;
-  onLearningModeChange: (mode: LearningMode) => void;
-  spaceType: SpaceType;
-}
-
-export function ChatArea({
-  messages,
-  onSendMessage,
-  uploadedFiles,
-  onFileUpload,
-  onRemoveFile,
-  onFileTypeChange,
-  memoryProgress,
-  isLoggedIn,
-  learningMode,
-  onClearConversation,
-  onLearningModeChange,
-  spaceType,
-}: ChatAreaProps) {
-  const [input, setInput] = useState('');
-  const [isTyping, setIsTyping] = useState(false);
-  const [showScrollButton, setShowScrollButton] = useState(false);
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  onLearningModeChange: (m: LearningMode) => void;
 
-  const scrollToBottom = () => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  };
+  spaceType: SpaceType;
+};
 
-  useEffect(() => {
-    scrollToBottom();
-  }, [messages]);
+const FILE_TYPE_OPTIONS: Array<{ value: FileType; label: string }> = [
+  { value: 'syllabus', label: 'Syllabus' },
+  { value: 'lecture-slides', label: 'Lecture Slides' },
+  { value: 'literature-review', label: 'Literature Review / Paper' },
+  { value: 'other', label: 'Other' },
+];
 
-  useEffect(() => {
-    const handleScroll = () => {
-      if (scrollContainerRef.current) {
-        const { scrollTop, scrollHeight, clientHeight } = scrollContainerRef.current;
-        setShowScrollButton(scrollHeight - scrollTop - clientHeight > 100);
-      }
-    };
+export function ChatArea(props: Props) {
+  const {
+    messages,
+    onSendMessage,
+    uploadedFiles,
+    onFileUpload,
+    onRemoveFile,
+    onFileTypeChange,
+    onUploadSingle,
+    onUploadAllPending,
+    memoryProgress,
+    learningMode,
+    onClearConversation,
+  } = props;
 
-    const container = scrollContainerRef.current;
-    container?.addEventListener('scroll', handleScroll);
-    return () => container?.removeEventListener('scroll', handleScroll);
-  }, []);
+  const [input, setInput] = useState('');
+  const [showFileTypeModal, setShowFileTypeModal] = useState(false);
 
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!input.trim() || !isLoggedIn) return;
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
 
-    onSendMessage(input);
-    setInput('');
-    setIsTyping(true);
-    setTimeout(() => setIsTyping(false), 1200);
-  };
+  const pendingFileIndexes = useMemo(() => {
+    return uploadedFiles
+      .map((f, i) => ({ f, i }))
+      .filter(x => !x.f.uploaded)
+      .map(x => x.i);
+  }, [uploadedFiles]);
 
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      handleSubmit(e);
+  // 有 pending 文件就自动打开选择类型弹窗
+  useEffect(() => {
+    if (pendingFileIndexes.length > 0) {
+      setShowFileTypeModal(true);
     }
-  };
+  }, [pendingFileIndexes.length]);
 
-  const modeLabels: Record<LearningMode, string> = {
-    concept: 'Concept Explainer',
-    socratic: 'Socratic Tutor',
-    exam: 'Exam Prep',
-    assignment: 'Assignment Helper',
-    summary: 'Quick Summary',
+  const handlePickFiles = () => {
+    fileInputRef.current?.click();
   };
 
-  const handleClearClick = () => {
-    if (messages.length <= 1) {
-      toast.info('No conversation to clear');
-      return;
-    }
-    if (window.confirm('Are you sure you want to clear the conversation? This cannot be undone.')) {
-      onClearConversation();
-      toast.success('Conversation cleared');
-    }
+  const handleFilesChosen = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []);
+    if (files.length) onFileUpload(files);
+    e.target.value = ''; // 允许再���选同一个文件
   };
 
-  const handleShareClick = () => {
-    if (messages.length <= 1) {
-      toast.info('No conversation to share');
-      return;
-    }
-    const conversationText = messages
-      .map((msg) => `${msg.role === 'user' ? 'You' : 'Clare'}: ${msg.content}`)
-      .join('\n\n');
-
-    navigator.clipboard
-      .writeText(conversationText)
-      .then(() => toast.success('Conversation copied to clipboard!'))
-      .catch(() => toast.error('Failed to copy conversation'));
+  const handleSend = () => {
+    const trimmed = input.trim();
+    if (!trimmed) return;
+    onSendMessage(trimmed);
+    setInput('');
   };
 
   return (
-    <div className="flex flex-col h-full">
-      <div className="flex-1 relative border-b-2 border-border">
-        {messages.length > 1 && (
-          <div className="absolute top-4 right-12 z-10 flex gap-2">
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={handleShareClick}
-              disabled={!isLoggedIn}
-              className="gap-2 bg-background/95 backdrop-blur-sm shadow-sm hover:shadow-md transition-all group"
-            >
-              <Share2 className="h-4 w-4" />
-              <span className="hidden group-hover:inline">Share</span>
-            </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={handleClearClick}
-              disabled={!isLoggedIn}
-              className="gap-2 bg-background/95 backdrop-blur-sm shadow-sm hover:shadow-md transition-all group"
-            >
-              <Trash2 className="h-4 w-4" />
-              <span className="hidden group-hover:inline">Clear</span>
-            </Button>
+    <div className="flex-1 flex flex-col min-w-0">
+      {/* Top bar inside chat area */}
+      <div className="flex items-center justify-between px-4 py-3 border-b border-border bg-background">
+        <div className="flex items-center gap-3">
+          <div className="text-sm text-muted-foreground">
+            Mode: <span className="font-medium text-foreground">{learningMode}</span>
           </div>
-        )}
+          <div className="text-sm text-muted-foreground">
+            Memory: <span className="font-medium text-foreground">{memoryProgress}%</span>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" onClick={onClearConversation}>
+            Clear
+          </Button>
+          <Button variant="outline" onClick={() => setShowFileTypeModal(true)} disabled={uploadedFiles.length === 0}>
+            Files
+          </Button>
+        </div>
+      </div>
 
-        <div ref={scrollContainerRef} className="h-full max-h-[600px] overflow-y-auto px-4 py-6 pb-36">
-          <div className="max-w-4xl mx-auto space-y-6">
-            {messages.map((message) => (
-              <Message key={message.id} message={message} showSenderInfo={spaceType === 'group'} />
-            ))}
+      {/* Messages */}
+      <div className="flex-1 overflow-auto px-4 py-4 space-y-4">
+        {messages.map(m => (
+          <div key={m.id} className={`max-w-3xl ${m.role === 'user' ? 'ml-auto' : 'mr-auto'}`}>
+            <div
+              className={`rounded-2xl px-4 py-3 text-sm leading-relaxed shadow-sm border ${
+                m.role === 'user'
+                  ? 'bg-primary text-primary-foreground border-primary/30'
+                  : 'bg-card text-card-foreground border-border'
+              }`}
+            >
+              {m.content}
+            </div>
 
-            {isTyping && (
-              <div className="flex gap-3">
-                <div className="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center flex-shrink-0">
-                  <span className="text-white text-sm">C</span>
-                </div>
-                <div className="bg-muted rounded-2xl px-4 py-3">
-                  <div className="flex gap-1">
-                    <div className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce" style={{ animationDelay: '0ms' }} />
-                    <div className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce" style={{ animationDelay: '150ms' }} />
-                    <div className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce" style={{ animationDelay: '300ms' }} />
-                  </div>
-                </div>
+            {m.references && m.references.length > 0 && (
+              <div className="mt-2 text-xs text-muted-foreground">
+                <div className="font-medium mb-1">References</div>
+                <ul className="list-disc pl-5 space-y-1">
+                  {m.references.map((r, idx) => (
+                    <li key={`${m.id}-ref-${idx}`}>{r}</li>
+                  ))}
+                </ul>
               </div>
             )}
-
-            <div ref={messagesEndRef} />
           </div>
-        </div>
+        ))}
+      </div>
 
-        {showScrollButton && (
-          <div className="absolute bottom-24 left-1/2 -translate-x-1/2 z-20">
-            <Button
-              variant="secondary"
-              size="icon"
-              className="rounded-full shadow-lg hover:shadow-xl transition-shadow bg-background"
-              onClick={scrollToBottom}
-            >
-              <ArrowDown className="h-4 w-4" />
-            </Button>
+      {/* Composer + Upload area */}
+      <div className="border-t border-border bg-background p-4 space-y-3">
+        {/* Course Materials box */}
+        <div className="rounded-xl border border-dashed border-border p-4 bg-card">
+          <div className="flex items-center justify-between">
+            <div>
+              <div className="text-sm font-medium">Course Materials</div>
+              <div className="text-xs text-muted-foreground">Upload .pdf / .docx / .pptx</div>
+            </div>
+            <div className="flex items-center gap-2">
+              <Button variant="outline" onClick={handlePickFiles}>
+                Add files
+              </Button>
+              <input
+                ref={fileInputRef}
+                type="file"
+                className="hidden"
+                multiple
+                accept=".pdf,.docx,.pptx"
+                onChange={handleFilesChosen}
+              />
+            </div>
           </div>
-        )}
 
-        <div className="absolute bottom-0 left-0 right-0 bg-background/95 backdrop-blur-sm z-10">
-          <div className="max-w-4xl mx-auto px-4 py-4">
-            <form onSubmit={handleSubmit}>
-              <div className="relative">
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="absolute bottom-3 left-2 gap-1.5 h-8 px-2 text-xs z-10 hover:bg-muted/50"
-                      disabled={!isLoggedIn}
-                      type="button"
-                    >
-                      <span>{modeLabels[learningMode]}</span>
-                      <svg className="h-3 w-3 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                      </svg>
+          {uploadedFiles.length > 0 && (
+            <div className="mt-3 space-y-2">
+              {uploadedFiles.map((f, idx) => (
+                <div key={`${f.file.name}-${idx}`} className="flex items-center justify-between gap-3 rounded-lg border border-border px-3 py-2">
+                  <div className="min-w-0">
+                    <div className="text-sm truncate">{f.file.name}</div>
+                    <div className="text-xs text-muted-foreground">
+                      {Math.round(f.file.size / 1024 / 1024 * 10) / 10} MB · Type: {f.type}{' '}
+                      {f.uploaded ? `· Uploaded (+${f.uploadedChunks ?? 0} chunks)` : '· Pending'}
+                    </div>
+                  </div>
+
+                  <div className="flex items-center gap-2">
+                    <Button variant="outline" size="sm" onClick={() => onRemoveFile(idx)}>
+                      Remove
                     </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="start" className="w-56">
-                    {(['concept', 'socratic', 'exam', 'assignment', 'summary'] as LearningMode[]).map((m) => (
-                      <DropdownMenuItem
-                        key={m}
-                        onClick={() => onLearningModeChange(m)}
-                        className={learningMode === m ? 'bg-accent' : ''}
-                      >
-                        <span className="font-medium">{modeLabels[m]}</span>
-                      </DropdownMenuItem>
-                    ))}
-                  </DropdownMenuContent>
-                </DropdownMenu>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
 
-                <Textarea
-                  value={input}
-                  onChange={(e) => setInput(e.target.value)}
-                  onKeyDown={handleKeyDown}
-                  placeholder={
-                    isLoggedIn
-                      ? spaceType === 'group'
-                        ? 'Type a message... (mention @Clare to get AI assistance)'
-                        : 'Ask Clare anything about the course...'
-                      : 'Please log in on the right to start chatting...'
-                  }
-                  disabled={!isLoggedIn}
-                  className="min-h-[80px] pl-4 pr-12 resize-none bg-background border-2 border-border"
-                />
-                <Button type="submit" size="icon" disabled={!input.trim() || !isLoggedIn} className="absolute bottom-2 right-2 rounded-full">
-                  <Send className="h-4 w-4" />
-                </Button>
-              </div>
-            </form>
+        {/* Input */}
+        <div className="flex items-end gap-2">
+          <div className="flex-1">
+            <textarea
+              value={input}
+              onChange={e => setInput(e.target.value)}
+              placeholder="Ask Clare anything about the course..."
+              className="w-full min-h-[44px] max-h-[180px] rounded-xl border border-border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary/30 resize-none"
+              onKeyDown={e => {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                  e.preventDefault();
+                  handleSend();
+                }
+              }}
+            />
           </div>
+          <Button onClick={handleSend} className="rounded-xl">
+            Send
+          </Button>
         </div>
       </div>
 
-      <div className="bg-card">
-        <div className="max-w-4xl mx-auto px-4 py-4">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-            <FileUploadArea
-              uploadedFiles={uploadedFiles}
-              onFileUpload={onFileUpload}
-              onRemoveFile={onRemoveFile}
-              onFileTypeChange={onFileTypeChange}
-              disabled={!isLoggedIn}
-            />
-            <MemoryLine progress={memoryProgress} />
+      {/* File Type Modal */}
+      {showFileTypeModal && (
+        <div className="fixed inset-0 z-[80] flex items-center justify-center bg-black/40 p-4">
+          <div className="w-full max-w-2xl rounded-2xl bg-card border border-border shadow-xl">
+            <div className="flex items-center justify-between px-5 py-4 border-b border-border">
+              <div>
+                <div className="text-base font-semibold">Select File Types</div>
+                <div className="text-sm text-muted-foreground">
+                  Select a type for each file, then click Upload. This ensures `doc_type` is correct.
+                </div>
+              </div>
+              <Button variant="outline" onClick={() => setShowFileTypeModal(false)}>
+                Close
+              </Button>
+            </div>
+
+            <div className="p-5 space-y-3 max-h-[60vh] overflow-auto">
+              {uploadedFiles.length === 0 && (
+                <div className="text-sm text-muted-foreground">No files yet.</div>
+              )}
+
+              {uploadedFiles.map((f, idx) => (
+                <div key={`modal-${f.file.name}-${idx}`} className="rounded-xl border border-border p-4">
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="min-w-0">
+                      <div className="text-sm font-medium truncate">{f.file.name}</div>
+                      <div className="text-xs text-muted-foreground mt-1">
+                        {Math.round(f.file.size / 1024 / 1024 * 10) / 10} MB · {f.uploaded ? 'Uploaded' : 'Pending'}
+                        {f.uploaded ? ` (+${f.uploadedChunks ?? 0} chunks)` : ''}
+                      </div>
+                    </div>
+
+                    <div className="flex items-center gap-2">
+                      {!f.uploaded && (
+                        <Button onClick={() => onUploadSingle(idx)} className="rounded-xl">
+                          Upload
+                        </Button>
+                      )}
+                      <Button variant="outline" onClick={() => onRemoveFile(idx)} className="rounded-xl">
+                        Remove
+                      </Button>
+                    </div>
+                  </div>
+
+                  <div className="mt-3 flex items-center gap-3">
+                    <div className="text-sm text-muted-foreground w-24">File Type</div>
+                    <select
+                      value={f.type}
+                      onChange={e => onFileTypeChange(idx, e.target.value as FileType)}
+                      className="flex-1 rounded-xl border border-border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary/30"
+                      disabled={!!f.uploaded}
+                    >
+                      {FILE_TYPE_OPTIONS.map(opt => (
+                        <option key={opt.value} value={opt.value}>
+                          {opt.label}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            <div className="px-5 py-4 border-t border-border flex items-center justify-between">
+              <div className="text-sm text-muted-foreground">
+                Pending files: <span className="font-medium text-foreground">{pendingFileIndexes.length}</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button variant="outline" onClick={() => setShowFileTypeModal(false)}>
+                  Cancel
+                </Button>
+                <Button onClick={onUploadAllPending} disabled={pendingFileIndexes.length === 0}>
+                  Upload All Pending
+                </Button>
+              </div>
+            </div>
           </div>
         </div>
-      </div>
+      )}
     </div>
   );
 }