Update web/src/components/ChatArea.tsx

web/src/components/ChatArea.tsx

@@ -1,3 +1,4 @@
+// web/src/components/ChatArea.tsx
 import React, { useState, useRef, useEffect } from 'react';
 import { Button } from './ui/button';
 import { Textarea } from './ui/textarea';
@@ -7,16 +8,11 @@ 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';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from './ui/dropdown-menu';
 
 interface ChatAreaProps {
   messages: MessageType[];
-  onSendMessage: (content: string) => Promise<void> | void;
+  onSendMessage: (content: string) => void;
   uploadedFiles: UploadedFile[];
   onFileUpload: (files: File[]) => void;
   onRemoveFile: (index: number) => void;
@@ -27,7 +23,6 @@ interface ChatAreaProps {
   onClearConversation: () => void;
   onLearningModeChange: (mode: LearningMode) => void;
   spaceType: SpaceType;
-  isTyping: boolean;
 }
 
 export function ChatArea({
@@ -43,9 +38,9 @@ export function ChatArea({
   onClearConversation,
   onLearningModeChange,
   spaceType,
-  isTyping,
 }: 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);
@@ -56,7 +51,7 @@ export function ChatArea({
 
   useEffect(() => {
     scrollToBottom();
-  }, [messages, isTyping]);
+  }, [messages]);
 
   useEffect(() => {
     const handleScroll = () => {
@@ -71,19 +66,20 @@ export function ChatArea({
     return () => container?.removeEventListener('scroll', handleScroll);
   }, []);
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     if (!input.trim() || !isLoggedIn) return;
 
-    const text = input;
+    onSendMessage(input);
     setInput('');
-    await onSendMessage(text);
+    setIsTyping(true);
+    setTimeout(() => setIsTyping(false), 1200);
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
-      void handleSubmit(e as any);
+      handleSubmit(e);
     }
   };
 
@@ -100,9 +96,9 @@ export function ChatArea({
       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');
     }
   };
 
@@ -111,7 +107,6 @@ export function ChatArea({
       toast.info('No conversation to share');
       return;
     }
-
     const conversationText = messages
       .map((msg) => `${msg.role === 'user' ? 'You' : 'Clare'}: ${msg.content}`)
       .join('\n\n');
@@ -124,9 +119,7 @@ export function ChatArea({
 
   return (
     <div className="flex flex-col h-full">
-      {/* Chat Area with Floating Input */}
       <div className="flex-1 relative border-b-2 border-border">
-        {/* Action Buttons - Fixed at top right */}
         {messages.length > 1 && (
           <div className="absolute top-4 right-12 z-10 flex gap-2">
             <Button
@@ -152,7 +145,6 @@ export function ChatArea({
           </div>
         )}
 
-        {/* Messages Area */}
         <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) => (
@@ -178,7 +170,6 @@ export function ChatArea({
           </div>
         </div>
 
-        {/* Scroll to Bottom Button - Floating above input */}
         {showScrollButton && (
           <div className="absolute bottom-24 left-1/2 -translate-x-1/2 z-20">
             <Button
@@ -192,12 +183,10 @@ export function ChatArea({
           </div>
         )}
 
-        {/* Floating Input Area */}
         <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">
-                {/* Mode Selector */}
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild>
                     <Button
@@ -213,57 +202,16 @@ export function ChatArea({
                       </svg>
                     </Button>
                   </DropdownMenuTrigger>
-
                   <DropdownMenuContent align="start" className="w-56">
-                    <DropdownMenuItem
-                      onClick={() => onLearningModeChange('concept')}
-                      className={learningMode === 'concept' ? 'bg-accent' : ''}
-                    >
-                      <div className="flex flex-col">
-                        <span className="font-medium">Concept Explainer</span>
-                        <span className="text-xs text-muted-foreground">Get detailed explanations of concepts</span>
-                      </div>
-                    </DropdownMenuItem>
-
-                    <DropdownMenuItem
-                      onClick={() => onLearningModeChange('socratic')}
-                      className={learningMode === 'socratic' ? 'bg-accent' : ''}
-                    >
-                      <div className="flex flex-col">
-                        <span className="font-medium">Socratic Tutor</span>
-                        <span className="text-xs text-muted-foreground">Learn through guided questions</span>
-                      </div>
-                    </DropdownMenuItem>
-
-                    <DropdownMenuItem
-                      onClick={() => onLearningModeChange('exam')}
-                      className={learningMode === 'exam' ? 'bg-accent' : ''}
-                    >
-                      <div className="flex flex-col">
-                        <span className="font-medium">Exam Prep</span>
-                        <span className="text-xs text-muted-foreground">Practice with quiz questions</span>
-                      </div>
-                    </DropdownMenuItem>
-
-                    <DropdownMenuItem
-                      onClick={() => onLearningModeChange('assignment')}
-                      className={learningMode === 'assignment' ? 'bg-accent' : ''}
-                    >
-                      <div className="flex flex-col">
-                        <span className="font-medium">Assignment Helper</span>
-                        <span className="text-xs text-muted-foreground">Get help with assignments</span>
-                      </div>
-                    </DropdownMenuItem>
-
-                    <DropdownMenuItem
-                      onClick={() => onLearningModeChange('summary')}
-                      className={learningMode === 'summary' ? 'bg-accent' : ''}
-                    >
-                      <div className="flex flex-col">
-                        <span className="font-medium">Quick Summary</span>
-                        <span className="text-xs text-muted-foreground">Get concise summaries</span>
-                      </div>
-                    </DropdownMenuItem>
+                    {(['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>
 
@@ -281,7 +229,6 @@ export function ChatArea({
                   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>
@@ -291,7 +238,6 @@ export function ChatArea({
         </div>
       </div>
 
-      {/* Course Materials Section */}
       <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">