Update web/src/components/ChatArea.tsx

web/src/components/ChatArea.tsx

@@ -1,10 +1,11 @@
-// 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 { Send, ArrowDown, AlertCircle, Trash2, Share2 } from 'lucide-react';
 import { Message } from './Message';
 import { FileUploadArea } from './FileUploadArea';
+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 {
@@ -15,13 +16,7 @@ import {
 } from './ui/dropdown-menu';
 import clareAvatar from '../assets/dfe44dab3ad8cd93953eac4a3e68bd1a5f999653.png';
 
-// ✅ NEW: ApiUser type for feedback submission
-import type { User as ApiUser } from '../lib/api';
-
 interface ChatAreaProps {
-  // ✅ NEW: user passed from App (ApiUser)
-  user?: ApiUser | null;
-
   messages: MessageType[];
   onSendMessage: (content: string) => void;
   uploadedFiles: UploadedFile[];
@@ -37,7 +32,6 @@ interface ChatAreaProps {
 }
 
 export function ChatArea({
-  user = null,
   messages,
   onSendMessage,
   uploadedFiles,
@@ -121,22 +115,17 @@ export function ChatArea({
       return;
     }
 
+    // Create a shareable text version of the conversation
     const conversationText = messages
-      .map((msg) => `${msg.role === 'user' ? (msg.sender?.name ?? 'You') : 'Clare'}: ${msg.content}`)
+      .map(msg => `${msg.role === 'user' ? (msg.sender?.name ?? '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'));
-  };
-
-  // ✅ helper: find previous user message for an assistant message at index i
-  const getPrevUserText = (i: number) => {
-    for (let j = i - 1; j >= 0; j--) {
-      if (messages[j]?.role === 'user') return messages[j].content || '';
-    }
-    return '';
+    // Copy to clipboard
+    navigator.clipboard.writeText(conversationText).then(() => {
+      toast.success('Conversation copied to clipboard!');
+    }).catch(() => {
+      toast.error('Failed to copy conversation');
+    });
   };
 
   return (
@@ -183,6 +172,7 @@ export function ChatArea({
             const isAtTop = scrollTop === 0;
             const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
 
+            // If scrolling up at top or down at bottom, prevent default to stop propagation
             if (isScrollable && ((isAtTop && e.deltaY < 0) || (isAtBottom && e.deltaY > 0))) {
               e.preventDefault();
             }
@@ -192,16 +182,11 @@ export function ChatArea({
           }}
         >
           <div className="max-w-4xl mx-auto space-y-6">
-            {messages.map((message, idx) => (
+            {messages.map((message) => (
               <Message
                 key={message.id}
                 message={message}
                 showSenderInfo={spaceType === 'group'}
-                // ✅ critical: pass user to Message so feedback can submit
-                user={user ?? null}
-                learningMode={learningMode}
-                docType={'Syllabus'}
-                getContextUserText={() => getPrevUserText(idx)}
               />
             ))}
 
@@ -224,7 +209,7 @@ export function ChatArea({
           </div>
         </div>
 
-        {/* Scroll to Bottom Button */}
+        {/* Scroll to Bottom Button - Floating above input */}
         {showScrollButton && (
           <div className="absolute bottom-24 left-1/2 -translate-x-1/2 z-20">
             <Button
@@ -243,6 +228,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 */}
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild>
                     <Button
@@ -253,40 +239,75 @@ 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')} className={learningMode === 'concept' ? 'bg-accent' : ''}>
+                    <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>
+                        <span className="text-xs text-muted-foreground">
+                          Get detailed explanations of concepts
+                        </span>
                       </div>
                     </DropdownMenuItem>
-                    <DropdownMenuItem onClick={() => onLearningModeChange('socratic')} className={learningMode === 'socratic' ? 'bg-accent' : ''}>
+                    <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' : ''}>
+                    <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' : ''}>
+                    <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' : ''}>
+                    <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>
@@ -334,4 +355,4 @@ export function ChatArea({
       </div>
     </div>
   );
-}
+}