Update web/src/components/ChatArea.tsx

web/src/components/ChatArea.tsx

@@ -1,286 +1,257 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import type { FileType, Message, UploadedFile, LearningMode, SpaceType } from '../App';
+// web/src/components/ChatArea.tsx
+import React, { useState, useRef, useEffect } from 'react';
 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';
 
-type Props = {
-  messages: Message[];
+interface ChatAreaProps {
+  messages: MessageType[];
   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: (m: LearningMode) => void;
-
+  onLearningModeChange: (mode: LearningMode) => void;
   spaceType: SpaceType;
-};
-
-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' },
-];
-
-export function ChatArea(props: Props) {
-  const {
-    messages,
-    onSendMessage,
-    uploadedFiles,
-    onFileUpload,
-    onRemoveFile,
-    onFileTypeChange,
-    onUploadSingle,
-    onUploadAllPending,
-    memoryProgress,
-    learningMode,
-    onClearConversation,
-  } = props;
+}
 
+export function ChatArea({
+  messages,
+  onSendMessage,
+  uploadedFiles,
+  onFileUpload,
+  onRemoveFile,
+  onFileTypeChange,
+  memoryProgress,
+  isLoggedIn,
+  learningMode,
+  onClearConversation,
+  onLearningModeChange,
+  spaceType,
+}: ChatAreaProps) {
   const [input, setInput] = useState('');
-  const [showFileTypeModal, setShowFileTypeModal] = useState(false);
+  const [isTyping, setIsTyping] = useState(false);
+  const [showScrollButton, setShowScrollButton] = useState(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
 
-  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
 
-  const pendingFileIndexes = useMemo(() => {
-    return uploadedFiles
-      .map((f, i) => ({ f, i }))
-      .filter(x => !x.f.uploaded)
-      .map(x => x.i);
-  }, [uploadedFiles]);
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
 
-  // 有 pending 文件就自动打开选择类型弹窗
   useEffect(() => {
-    if (pendingFileIndexes.length > 0) {
-      setShowFileTypeModal(true);
-    }
-  }, [pendingFileIndexes.length]);
+    const handleScroll = () => {
+      if (scrollContainerRef.current) {
+        const { scrollTop, scrollHeight, clientHeight } = scrollContainerRef.current;
+        setShowScrollButton(scrollHeight - scrollTop - clientHeight > 100);
+      }
+    };
+
+    const container = scrollContainerRef.current;
+    container?.addEventListener('scroll', handleScroll);
+    return () => container?.removeEventListener('scroll', handleScroll);
+  }, []);
 
-  const handlePickFiles = () => {
-    fileInputRef.current?.click();
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!input.trim() || !isLoggedIn) return;
+
+    onSendMessage(input);
+    setInput('');
+    setIsTyping(true);
+    setTimeout(() => setIsTyping(false), 1200);
   };
 
-  const handleFilesChosen = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = Array.from(e.target.files || []);
-    if (files.length) onFileUpload(files);
-    e.target.value = ''; // 允许再次选同一个文件
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e);
+    }
   };
 
-  const handleSend = () => {
-    const trimmed = input.trim();
-    if (!trimmed) return;
-    onSendMessage(trimmed);
-    setInput('');
+  const modeLabels: Record<LearningMode, string> = {
+    concept: 'Concept Explainer',
+    socratic: 'Socratic Tutor',
+    exam: 'Exam Prep',
+    assignment: 'Assignment Helper',
+    summary: 'Quick Summary',
   };
 
-  return (
-    <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>
+  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');
+    }
+  };
 
-      {/* 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>
+  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');
 
-            {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>
-        ))}
-      </div>
+    navigator.clipboard
+      .writeText(conversationText)
+      .then(() => toast.success('Conversation copied to clipboard!'))
+      .catch(() => toast.error('Failed to copy conversation'));
+  };
 
-      {/* 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>
+  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>
+        )}
 
-          {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 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'} />
+            ))}
 
-                  <div className="flex items-center gap-2">
-                    <Button variant="outline" size="sm" onClick={() => onRemoveFile(idx)}>
-                      Remove
-                    </Button>
+            {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>
-              ))}
-            </div>
-          )}
-        </div>
+              </div>
+            )}
 
-        {/* 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 ref={messagesEndRef} />
           </div>
-          <Button onClick={handleSend} className="rounded-xl">
-            Send
-          </Button>
         </div>
-      </div>
-
-      {/* 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>
+        {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>
+          </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}
+        <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"
                     >
-                      {FILE_TYPE_OPTIONS.map(opt => (
-                        <option key={opt.value} value={opt.value}>
-                          {opt.label}
-                        </option>
-                      ))}
-                    </select>
-                  </div>
-                </div>
-              ))}
-            </div>
+                      <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>
+                    </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 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
+                <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>
-            </div>
+            </form>
           </div>
         </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} />
+          </div>
+        </div>
+      </div>
     </div>
   );
 }