Update web/src/components/ChatArea.tsx

web/src/components/ChatArea.tsx

@@ -1,12 +1,10 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { Button } from './ui/button';
 import { Textarea } from './ui/textarea';
-import { Send, ArrowDown, AlertCircle, Trash2, Share2 } from 'lucide-react';
+import { Send, ArrowDown, Trash2, Share2 } from 'lucide-react';
 import { Message } from './Message';
 import { FileUploadArea } from './FileUploadArea';
 import { MemoryLine } from './MemoryLine';
-import { Alert, AlertDescription } from './ui/alert';
-import { Badge } from './ui/badge';
 import type { Message as MessageType, LearningMode, UploadedFile, FileType, SpaceType } from '../App';
 import { toast } from 'sonner';
 import {
@@ -18,7 +16,7 @@ import {
 
 interface ChatAreaProps {
   messages: MessageType[];
-  onSendMessage: (content: string) => void;
+  onSendMessage: (content: string) => Promise<void> | void;
   uploadedFiles: UploadedFile[];
   onFileUpload: (files: File[]) => void;
   onRemoveFile: (index: number) => void;
@@ -29,6 +27,7 @@ interface ChatAreaProps {
   onClearConversation: () => void;
   onLearningModeChange: (mode: LearningMode) => void;
   spaceType: SpaceType;
+  isTyping: boolean;
 }
 
 export function ChatArea({
@@ -44,9 +43,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);
@@ -57,7 +56,7 @@ export function ChatArea({
 
   useEffect(() => {
     scrollToBottom();
-  }, [messages]);
+  }, [messages, isTyping]);
 
   useEffect(() => {
     const handleScroll = () => {
@@ -72,20 +71,19 @@ export function ChatArea({
     return () => container?.removeEventListener('scroll', handleScroll);
   }, []);
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!input.trim() || !isLoggedIn) return;
 
-    onSendMessage(input);
+    const text = input;
     setInput('');
-    setIsTyping(true);
-    setTimeout(() => setIsTyping(false), 1500);
+    await onSendMessage(text);
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
-      handleSubmit(e);
+      void handleSubmit(e as any);
     }
   };
 
@@ -102,10 +100,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');
     }
   };
 
@@ -114,18 +111,15 @@ export function ChatArea({
       toast.info('No conversation to share');
       return;
     }
-    
-    // Create a shareable text version of the conversation
+
     const conversationText = messages
-      .map(msg => `${msg.sender === 'user' ? 'You' : 'Clare'}: ${msg.content}`)
+      .map((msg) => `${msg.role === 'user' ? 'You' : 'Clare'}: ${msg.content}`)
       .join('\n\n');
-    
-    // Copy to clipboard
-    navigator.clipboard.writeText(conversationText).then(() => {
-      toast.success('Conversation copied to clipboard!');
-    }).catch(() => {
-      toast.error('Failed to copy conversation');
-    });
+
+    navigator.clipboard
+      .writeText(conversationText)
+      .then(() => toast.success('Conversation copied to clipboard!'))
+      .catch(() => toast.error('Failed to copy conversation'));
   };
 
   return (
@@ -159,19 +153,12 @@ export function ChatArea({
         )}
 
         {/* Messages Area */}
-        <div 
-          ref={scrollContainerRef}
-          className="h-full max-h-[600px] overflow-y-auto px-4 py-6 pb-36"
-        >
+        <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'}
-              />
+              <Message key={message.id} message={message} showSenderInfo={spaceType === 'group'} />
             ))}
-            
+
             {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">
@@ -186,7 +173,7 @@ export function ChatArea({
                 </div>
               </div>
             )}
-            
+
             <div ref={messagesEndRef} />
           </div>
         </div>
@@ -210,7 +197,7 @@ export function ChatArea({
           <div className="max-w-4xl mx-auto px-4 py-4">
             <form onSubmit={handleSubmit}>
               <div className="relative">
-                {/* Mode Selector - ChatGPT style at bottom left */}
+                {/* Mode Selector */}
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild>
                     <Button
@@ -221,21 +208,12 @@ export function ChatArea({
                       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 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">
                     <DropdownMenuItem
                       onClick={() => onLearningModeChange('concept')}
@@ -243,53 +221,47 @@ export function ChatArea({
                     >
                       <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>
+                        <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>
+                        <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>
+                        <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>
+                        <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>
+                        <span className="text-xs text-muted-foreground">Get concise summaries</span>
                       </div>
                     </DropdownMenuItem>
                   </DropdownMenuContent>
@@ -302,19 +274,15 @@ export function ChatArea({
                   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..."
+                        ? '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"
-                >
+
+                <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>
@@ -340,4 +308,4 @@ export function ChatArea({
       </div>
     </div>
   );
-}
+}