Update web/src/components/ChatArea.tsx

web/src/components/ChatArea.tsx

@@ -50,6 +50,8 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from ".
 import { SmartReview } from "./SmartReview";
 import clareAvatar from "../assets/dfe44dab3ad8cd93953eac4a3e68bd1a5f999653.png";
 
+type ReviewEventType = "send_message" | "review_topic" | "review_all";
+
 interface ChatAreaProps {
   messages: MessageType[];
   onSendMessage: (content: string) => void;
@@ -86,6 +88,9 @@ interface ChatAreaProps {
   onCourseChange?: (courseId: string) => void;
   availableCourses?: Array<{ id: string; name: string }>;
   showReviewBanner?: boolean;
+
+  // ✅ NEW: for Review star brightness (daily)
+  onReviewActivity?: (event: ReviewEventType) => void;
 }
 
 interface PendingFile {
@@ -125,6 +130,7 @@ export function ChatArea({
   onCourseChange,
   availableCourses = [],
   showReviewBanner = false,
+  onReviewActivity,
 }: ChatAreaProps) {
   const [input, setInput] = useState("");
   const [showScrollButton, setShowScrollButton] = useState(false);
@@ -240,6 +246,9 @@ export function ChatArea({
     e.preventDefault();
     if (!input.trim() || !isLoggedIn) return;
 
+    // ✅ Review activity: user sent a message in Review tab
+    if (chatMode === "review") onReviewActivity?.("send_message");
+
     onSendMessage(input);
     setInput("");
   };
@@ -270,6 +279,9 @@ export function ChatArea({
     weight: number;
     lastReviewed: string;
   }) => {
+    // ✅ Review activity: clicked Review this topic
+    onReviewActivity?.("review_topic");
+
     const userMessage = `Please help me review: ${item.title}`;
     const reviewData = `REVIEW_TOPIC:${item.title}|${item.previousQuestion}|${item.memoryRetention}|${item.schedule}|${item.status}|${item.weight}|${item.lastReviewed}`;
     (window as any).__lastReviewData = reviewData;
@@ -277,6 +289,9 @@ export function ChatArea({
   };
 
   const handleReviewAll = () => {
+    // ✅ Review activity: clicked Review all
+    onReviewActivity?.("review_all");
+
     (window as any).__lastReviewData = "REVIEW_ALL";
     onSendMessage("Please help me review all topics that need attention.");
   };
@@ -593,7 +608,11 @@ export function ChatArea({
 
     if (isImage) {
       return (
-        <div className="relative cursor-pointer w-16 h-16 flex-shrink-0" onClick={onPreview} style={{ width: 64, height: 64 }}>
+        <div
+          className="relative cursor-pointer w-16 h-16 flex-shrink-0"
+          onClick={onPreview}
+          style={{ width: 64, height: 64 }}
+        >
           <div className="w-full h-full relative bg-card border border-border rounded-lg hover:border-primary/50 transition-colors">
             <div className="w-full h-full overflow-hidden rounded-lg absolute inset-0">
               {imageLoading ? (
@@ -729,11 +748,7 @@ export function ChatArea({
       );
     }
 
-    return (
-      <div className="whitespace-pre-wrap text-sm font-mono p-4 bg-muted rounded-lg max-h-[60vh] overflow-y-auto">
-        {content}
-      </div>
-    );
+    return <div className="whitespace-pre-wrap text-sm font-mono p-4 bg-muted rounded-lg max-h-[60vh] overflow-y-auto">{content}</div>;
   };
 
   // ✅ Reserve space for composer so last message is never hidden
@@ -784,12 +799,7 @@ export function ChatArea({
 
         {/* Chat Mode Tabs - Center */}
         <div className="absolute left-1/2 -translate-x-1/2 flex-shrink-0">
-          <Tabs
-            value={chatMode}
-            onValueChange={(value) => onChatModeChange(value as ChatMode)}
-            className="w-auto"
-            orientation="horizontal"
-          >
+          <Tabs value={chatMode} onValueChange={(value) => onChatModeChange(value as ChatMode)} className="w-auto" orientation="horizontal">
             <TabsList className="inline-flex h-8 items-center justify-center rounded-xl bg-muted p-1 text-muted-foreground">
               <TabsTrigger value="ask" className="w-[140px] px-3 text-sm">
                 Ask
@@ -865,11 +875,7 @@ export function ChatArea({
       {/* =========================
           1) Scroll Container (ONLY this scrolls)
          ========================= */}
-      <div
-        ref={scrollContainerRef}
-        className="flex-1 min-h-0 overflow-y-auto overscroll-contain"
-        style={{ overscrollBehavior: "contain" }}
-      >
+      <div ref={scrollContainerRef} className="flex-1 min-h-0 overflow-y-auto overscroll-contain" style={{ overscrollBehavior: "contain" }}>
         {/* Messages */}
         <div className="py-6" style={{ paddingBottom: bottomPad }}>
           <div className="w-full space-y-6 max-w-4xl mx-auto">
@@ -879,8 +885,7 @@ export function ChatArea({
                   message={message}
                   showSenderInfo={spaceType === "group"}
                   isFirstGreeting={
-                    (message.id === "1" || message.id === "review-1" || message.id === "quiz-1") &&
-                    message.role === "assistant"
+                    (message.id === "1" || message.id === "review-1" || message.id === "quiz-1") && message.role === "assistant"
                   }
                   showNextButton={message.showNextButton && !isAppTyping}
                   onNextQuestion={onNextQuestion}
@@ -933,10 +938,7 @@ export function ChatArea({
           2) Scroll-to-bottom button (positioned above composer)
          ========================= */}
       {showScrollButton && (
-        <div
-          className="absolute z-30 left-0 right-0 flex justify-center pointer-events-none"
-          style={{ bottom: composerHeight + 16 }}
-        >
+        <div className="absolute z-30 left-0 right-0 flex justify-center pointer-events-none" style={{ bottom: composerHeight + 16 }}>
           <Button
             variant="secondary"
             size="icon"
@@ -1013,21 +1015,30 @@ export function ChatArea({
                       </Button>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent align="start" className="w-56">
-                      <DropdownMenuItem onClick={() => onLearningModeChange("general")} className={learningMode === "general" ? "bg-accent" : ""}>
+                      <DropdownMenuItem
+                        onClick={() => onLearningModeChange("general")}
+                        className={learningMode === "general" ? "bg-accent" : ""}
+                      >
                         <div className="flex flex-col">
                           <span className="font-medium">General</span>
                           <span className="text-xs text-muted-foreground">Answer various questions (context required)</span>
                         </div>
                       </DropdownMenuItem>
 
-                      <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>
                         </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>
@@ -1041,14 +1052,20 @@ export function ChatArea({
                         </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>
                         </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>
@@ -1091,7 +1108,9 @@ export function ChatArea({
                     : "Ask Clare anything about the course or drag files here..."
                 }
                 disabled={!isLoggedIn || (chatMode === "quiz" && !quizState.waitingForAnswer)}
-                className={`min-h-[80px] pl-4 pr-20 resize-none bg-background border-2 ${isDragging ? "border-primary border-dashed" : "border-border"}`}
+                className={`min-h-[80px] pl-4 pr-20 resize-none bg-background border-2 ${
+                  isDragging ? "border-primary border-dashed" : "border-border"
+                }`}
               />
 
               <div className="absolute bottom-2 right-2 flex gap-1">
@@ -1119,9 +1138,7 @@ export function ChatArea({
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle>Start New Conversation</AlertDialogTitle>
-            <AlertDialogDescription>
-              Would you like to save the current chat before starting a new conversation?
-            </AlertDialogDescription>
+            <AlertDialogDescription>Would you like to save the current chat before starting a new conversation?</AlertDialogDescription>
 
             <Button
               variant="ghost"
@@ -1173,7 +1190,13 @@ export function ChatArea({
           <div className="border rounded-lg bg-muted/40 flex flex-col max-h-64">
             <div className="flex items-center justify-between p-4 sticky top-0 bg-muted/40 border-b z-10">
               <span className="text-sm font-medium">Preview</span>
-              <Button variant="outline" size="sm" className="h-7 px-2 text-xs gap-1.5" onClick={handleCopyPreview} title="Copy preview">
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-7 px-2 text-xs gap-1.5"
+                onClick={handleCopyPreview}
+                title="Copy preview"
+              >
                 <Copy className="h-3 w-3" />
                 Copy
               </Button>
@@ -1248,9 +1271,7 @@ export function ChatArea({
                   ))}
                 </SelectContent>
               </Select>
-              <p className="text-xs text-muted-foreground">
-                Sends this conversation to the selected workspace&apos;s Saved Files.
-              </p>
+              <p className="text-xs text-muted-foreground">Sends this conversation to the selected workspace&apos;s Saved Files.</p>
               <Button onClick={handleShareSendToWorkspace} className="w-full">
                 Send
               </Button>
@@ -1326,7 +1347,10 @@ export function ChatArea({
 
                     <div className="space-y-1">
                       <label className="text-xs text-muted-foreground">File Type</label>
-                      <Select value={pendingFile.type} onValueChange={(value) => handlePendingFileTypeChange(index, value as FileType)}>
+                      <Select
+                        value={pendingFile.type}
+                        onValueChange={(value) => handlePendingFileTypeChange(index, value as FileType)}
+                      >
                         <SelectTrigger className="h-8 text-xs">
                           <SelectValue />
                         </SelectTrigger>