Update web/src/components/ChatArea.tsx

web/src/components/ChatArea.tsx

@@ -137,7 +137,7 @@ export function ChatArea({
   workspaces,
   currentWorkspaceId,
   onSaveFile,
-  leftPanelVisible = false, // kept for props compatibility; not used for positioning anymore
+  leftPanelVisible = false, // kept for props compatibility
   currentCourseId,
   onCourseChange,
   availableCourses = [],
@@ -176,6 +176,8 @@ export function ChatArea({
           { id: "course4", name: "Web Development" },
         ];
 
+  // IMPORTANT:
+  // messagesEndRef is used to scroll inside the scroll container
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -184,7 +186,8 @@ export function ChatArea({
   const previousMessagesLength = useRef(messages.length);
 
   const scrollToBottom = () => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    // scrollIntoView works as long as messagesEndRef is inside scrollContainerRef
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
   };
 
   // Only auto-scroll when new messages are added (not on initial load)
@@ -193,6 +196,7 @@ export function ChatArea({
       isInitialMount.current = false;
       previousMessagesLength.current = messages.length;
 
+      // Keep at top on initial load (your old behavior)
       if (scrollContainerRef.current) {
         scrollContainerRef.current.scrollTop = 0;
       }
@@ -212,7 +216,7 @@ export function ChatArea({
       if (!el) return;
 
       const { scrollTop, scrollHeight, clientHeight } = el;
-      const isAtBottom = scrollHeight - scrollTop - clientHeight < 100;
+      const isAtBottom = scrollHeight - scrollTop - clientHeight < 120;
       setShowScrollButton(!isAtBottom);
       setShowTopBorder(scrollTop > 0);
     };
@@ -733,395 +737,424 @@ export function ChatArea({
     );
   };
 
+  // ==============
+  // Layout constants
+  // ==============
+  // This reserves enough space so the last message won't be hidden behind the bottom composer.
+  // If your composer grows, bump this value.
+  const MESSAGES_BOTTOM_PADDING = "13rem";
+
   return (
-    // IMPORTANT: relative enables internal absolute overlays (input + scroll button)
+    // IMPORTANT: This component must be a column with NO outer scroll.
     <div className="relative flex flex-col h-full min-h-0 overflow-hidden">
-      <div className="flex-1 relative min-h-0 flex flex-col overflow-hidden">
-        {/* Messages Area is the ONLY scroll container */}
+      {/* =========================
+          1) Scroll Container (ONLY this area scrolls)
+         ========================= */}
+      <div
+        ref={scrollContainerRef}
+        className="flex-1 min-h-0 overflow-y-auto"
+        style={{ overscrollBehavior: "contain" }}
+      >
+        {/* Top Bar - Sticky (stays at top inside the scroll container) */}
         <div
-          ref={scrollContainerRef}
-          className="flex-1 min-h-0 overflow-y-auto"
-          style={{ overscrollBehavior: "contain" }}
+          className={`sticky top-0 flex items-center justify-between px-4 z-20 bg-card ${
+            showTopBorder ? "border-b border-border" : ""
+          }`}
+          style={{ height: "4.5rem", margin: 0, padding: "1rem 1rem", boxSizing: "border-box" }}
         >
-          {/* Top Bar - Sticky */}
-          <div
-            className={`sticky top-0 flex items-center justify-between px-4 z-20 bg-card ${
-              showTopBorder ? "border-b border-border" : ""
-            }`}
-            style={{ height: "4.5rem", margin: 0, padding: "1rem 1rem", boxSizing: "border-box" }}
-          >
-            {/* Course Selector - Left */}
-            <div className="flex-shrink-0">
-              {(() => {
-                const current = workspaces.find((w) => w.id === currentWorkspaceId);
-                if (current?.type === "group") {
-                  if (current.category === "course" && current.courseName) {
-                    return (
-                      <div className="h-9 px-3 inline-flex items-center rounded-md border font-semibold">
-                        {current.courseName}
-                      </div>
-                    );
-                  }
-                  return null;
+          {/* Course Selector - Left */}
+          <div className="flex-shrink-0">
+            {(() => {
+              const current = workspaces.find((w) => w.id === currentWorkspaceId);
+              if (current?.type === "group") {
+                if (current.category === "course" && current.courseName) {
+                  return (
+                    <div className="h-9 px-3 inline-flex items-center rounded-md border font-semibold">
+                      {current.courseName}
+                    </div>
+                  );
                 }
+                return null;
+              }
+
+              return (
+                <Select
+                  value={currentCourseId || "course1"}
+                  onValueChange={(val) => onCourseChange && onCourseChange(val)}
+                >
+                  <SelectTrigger className="w-[200px] h-9 font-semibold">
+                    <SelectValue placeholder="Select course" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {courses.map((course) => (
+                      <SelectItem key={course.id} value={course.id}>
+                        {course.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              );
+            })()}
+          </div>
 
-                return (
-                  <Select value={currentCourseId || "course1"} onValueChange={(val) => onCourseChange && onCourseChange(val)}>
-                    <SelectTrigger className="w-[200px] h-9 font-semibold">
-                      <SelectValue placeholder="Select course" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {courses.map((course) => (
-                        <SelectItem key={course.id} value={course.id}>
-                          {course.name}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                );
-              })()}
-            </div>
-
-            {/* 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"
-              >
-                <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
-                  </TabsTrigger>
-                  <TabsTrigger value="review" className="w-[140px] px-3 text-sm relative">
-                    Review
-                    <span
-                      className="absolute top-0 right-0 bg-red-500 rounded-full border-2"
-                      style={{
-                        width: "10px",
-                        height: "10px",
-                        transform: "translate(25%, -25%)",
-                        zIndex: 10,
-                        borderColor: "var(--muted)",
-                      }}
-                    />
-                  </TabsTrigger>
-                  <TabsTrigger value="quiz" className="w-[140px] px-3 text-sm">
-                    Quiz
-                  </TabsTrigger>
-                </TabsList>
-              </Tabs>
-            </div>
+          {/* 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"
+            >
+              <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
+                </TabsTrigger>
+                <TabsTrigger value="review" className="w-[140px] px-3 text-sm relative">
+                  Review
+                  <span
+                    className="absolute top-0 right-0 bg-red-500 rounded-full border-2"
+                    style={{
+                      width: "10px",
+                      height: "10px",
+                      transform: "translate(25%, -25%)",
+                      zIndex: 10,
+                      borderColor: "var(--muted)",
+                    }}
+                  />
+                </TabsTrigger>
+                <TabsTrigger value="quiz" className="w-[140px] px-3 text-sm">
+                  Quiz
+                </TabsTrigger>
+              </TabsList>
+            </Tabs>
+          </div>
 
-            {/* Action Buttons - Right */}
-            <div className="flex items-center gap-2 flex-shrink-0">
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={handleSaveClick}
-                disabled={!isLoggedIn}
-                className={`h-8 w-8 rounded-md hover:bg-muted/50 ${isCurrentChatSaved() ? "text-primary" : ""}`}
-                title={isCurrentChatSaved() ? "Unsave" : "Save"}
-              >
-                <Bookmark className={`h-4 w-4 ${isCurrentChatSaved() ? "fill-primary text-primary" : ""}`} />
-              </Button>
+          {/* Action Buttons - Right */}
+          <div className="flex items-center gap-2 flex-shrink-0">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={handleSaveClick}
+              disabled={!isLoggedIn}
+              className={`h-8 w-8 rounded-md hover:bg-muted/50 ${isCurrentChatSaved() ? "text-primary" : ""}`}
+              title={isCurrentChatSaved() ? "Unsave" : "Save"}
+            >
+              <Bookmark className={`h-4 w-4 ${isCurrentChatSaved() ? "fill-primary text-primary" : ""}`} />
+            </Button>
 
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={handleOpenDownloadDialog}
-                disabled={!isLoggedIn}
-                className="h-8 w-8 rounded-md hover:bg-muted/50"
-                title="Download"
-              >
-                <Download className="h-4 w-4" />
-              </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={handleOpenDownloadDialog}
+              disabled={!isLoggedIn}
+              className="h-8 w-8 rounded-md hover:bg-muted/50"
+              title="Download"
+            >
+              <Download className="h-4 w-4" />
+            </Button>
 
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={handleShareClick}
-                disabled={!isLoggedIn}
-                className="h-8 w-8 rounded-md hover:bg-muted/50"
-                title="Share"
-              >
-                <Share2 className="h-4 w-4" />
-              </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={handleShareClick}
+              disabled={!isLoggedIn}
+              className="h-8 w-8 rounded-md hover:bg-muted/50"
+              title="Share"
+            >
+              <Share2 className="h-4 w-4" />
+            </Button>
 
-              <Button
-                variant="outline"
-                onClick={handleClearClick}
-                disabled={!isLoggedIn}
-                className="h-8 px-3 gap-2 rounded-md border border-border disabled:opacity-60 !bg-[var(--card)] !text-[var(--card-foreground)] hover:!opacity-90 [&_svg]:!text-[var(--card-foreground)] [&_span]:!text-[var(--card-foreground)]"
-                title="New Chat"
-              >
-                <Plus className="h-4 w-4" />
-                <span className="text-sm font-medium">New chat</span>
-              </Button>
-            </div>
+            <Button
+              variant="outline"
+              onClick={handleClearClick}
+              disabled={!isLoggedIn}
+              className="h-8 px-3 gap-2 rounded-md border border-border disabled:opacity-60 !bg-[var(--card)] !text-[var(--card-foreground)] hover:!opacity-90 [&_svg]:!text-[var(--card-foreground)] [&_span]:!text-[var(--card-foreground)]"
+              title="New Chat"
+            >
+              <Plus className="h-4 w-4" />
+              <span className="text-sm font-medium">New chat</span>
+            </Button>
           </div>
+        </div>
 
-          {/* Messages Content */}
-          <div className="py-6" style={{ paddingBottom: "12rem" }}>
-            <div className="w-full space-y-6 max-w-4xl mx-auto">
-              {messages.map((message) => (
-                <React.Fragment key={message.id}>
-                  <Message
-                    message={message}
-                    showSenderInfo={spaceType === "group"}
-                    isFirstGreeting={
-                      (message.id === "1" || message.id === "review-1" || message.id === "quiz-1") &&
-                      message.role === "assistant"
-                    }
-                    showNextButton={message.showNextButton && !isAppTyping}
-                    onNextQuestion={onNextQuestion}
-                    chatMode={chatMode}
-                  />
+        {/* Messages Content */}
+        <div className="py-6" style={{ paddingBottom: MESSAGES_BOTTOM_PADDING }}>
+          <div className="w-full space-y-6 max-w-4xl mx-auto">
+            {messages.map((message) => (
+              <React.Fragment key={message.id}>
+                <Message
+                  message={message}
+                  showSenderInfo={spaceType === "group"}
+                  isFirstGreeting={
+                    (message.id === "1" || message.id === "review-1" || message.id === "quiz-1") &&
+                    message.role === "assistant"
+                  }
+                  showNextButton={message.showNextButton && !isAppTyping}
+                  onNextQuestion={onNextQuestion}
+                  chatMode={chatMode}
+                />
 
-                  {chatMode === "review" && message.id === "review-1" && message.role === "assistant" && (
-                    <div className="flex gap-2 justify-start px-4">
-                      <div className="w-10 h-10 flex-shrink-0" />
-                      <div className="w-full" style={{ maxWidth: "min(770px, calc(100% - 2rem))" }}>
-                        <SmartReview onReviewTopic={handleReviewTopic} onReviewAll={handleReviewAll} />
-                      </div>
+                {chatMode === "review" && message.id === "review-1" && message.role === "assistant" && (
+                  <div className="flex gap-2 justify-start px-4">
+                    <div className="w-10 h-10 flex-shrink-0" />
+                    <div className="w-full" style={{ maxWidth: "min(770px, calc(100% - 2rem))" }}>
+                      <SmartReview onReviewTopic={handleReviewTopic} onReviewAll={handleReviewAll} />
                     </div>
-                  )}
-
-                  {chatMode === "quiz" &&
-                    message.id === "quiz-1" &&
-                    message.role === "assistant" &&
-                    quizState.currentQuestion === 0 &&
-                    !quizState.waitingForAnswer &&
-                    !isAppTyping && (
-                      <div className="flex justify-center py-4">
-                        <Button onClick={onStartQuiz} className="bg-red-500 hover:bg-red-600 text-white">
-                          Start Quiz
-                        </Button>
-                      </div>
-                    )}
-                </React.Fragment>
-              ))}
-
-              {isAppTyping && (
-                <div className="flex gap-2 justify-start px-4">
-                  <div className="w-10 h-10 rounded-full overflow-hidden bg-white flex items-center justify-center flex-shrink-0">
-                    <img src={clareAvatar} alt="Clare" className="w-full h-full object-cover" />
                   </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" }} />
+                )}
+
+                {chatMode === "quiz" &&
+                  message.id === "quiz-1" &&
+                  message.role === "assistant" &&
+                  quizState.currentQuestion === 0 &&
+                  !quizState.waitingForAnswer &&
+                  !isAppTyping && (
+                    <div className="flex justify-center py-4">
+                      <Button onClick={onStartQuiz} className="bg-red-500 hover:bg-red-600 text-white">
+                        Start Quiz
+                      </Button>
                     </div>
+                  )}
+              </React.Fragment>
+            ))}
+
+            {isAppTyping && (
+              <div className="flex gap-2 justify-start px-4">
+                <div className="w-10 h-10 rounded-full overflow-hidden bg-white flex items-center justify-center flex-shrink-0">
+                  <img src={clareAvatar} alt="Clare" className="w-full h-full object-cover" />
+                </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 ref={messagesEndRef} />
-            </div>
+            {/* MUST be inside scroll container */}
+            <div ref={messagesEndRef} />
           </div>
         </div>
+      </div>
 
-        {/* Scroll to Bottom Button (NOW absolute inside ChatArea) */}
-        {showScrollButton && (
-          <div
-            className="absolute z-30 left-0 right-0 flex justify-center pointer-events-none"
-            style={{ bottom: "120px" }}
+      {/* =========================
+          2) Scroll-to-bottom button (fixed relative to ChatArea, NOT inside scroll)
+         ========================= */}
+      {showScrollButton && (
+        <div className="absolute z-30 left-0 right-0 flex justify-center pointer-events-none" style={{ bottom: "132px" }}>
+          <Button
+            variant="secondary"
+            size="icon"
+            className="rounded-full shadow-lg hover:shadow-xl transition-shadow bg-background border border-border pointer-events-auto w-10 h-10"
+            onClick={scrollToBottom}
+            title="Scroll to bottom"
           >
-            <Button
-              variant="secondary"
-              size="icon"
-              className="rounded-full shadow-lg hover:shadow-xl transition-shadow bg-background border border-border pointer-events-auto w-10 h-10"
-              onClick={scrollToBottom}
-              title="Scroll to bottom"
-            >
-              <ArrowDown className="h-5 w-5" />
-            </Button>
-          </div>
-        )}
-
-        {/* Floating Input Area (NOW absolute inside ChatArea) */}
-        <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">
-            {uploadedFiles.length > 0 && (
-              <div className="mb-2 flex flex-wrap gap-2 max-h-32 overflow-y-auto">
-                {uploadedFiles.map((uploadedFile, index) => {
-                  const Icon = getFileIcon(uploadedFile.file.name);
-                  const fileInfo = getFileTypeInfo(uploadedFile.file.name);
-                  const isImage = ["jpg", "jpeg", "png", "gif", "webp"].some((ext) =>
-                    uploadedFile.file.name.toLowerCase().endsWith(`.${ext}`)
-                  );
-
-                  return (
-                    <div key={index}>
-                      <FileThumbnail
-                        file={uploadedFile.file}
-                        Icon={Icon}
-                        fileInfo={fileInfo}
-                        isImage={isImage}
-                        onPreview={() => {
-                          setSelectedFile({ file: uploadedFile.file, index });
-                          setShowFileViewer(true);
-                        }}
-                        onRemove={(e) => {
-                          e.stopPropagation();
-                          setFileToDelete(index);
-                          setShowDeleteDialog(true);
-                        }}
-                      />
-                    </div>
-                  );
-                })}
-              </div>
-            )}
-
-            <form
-              onSubmit={handleSubmit}
-              onDragOver={handleDragOver}
-              onDragLeave={handleDragLeave}
-              onDrop={handleDrop}
-              className={isDragging ? "opacity-75" : ""}
-            >
-              <div className="relative">
-                {/* Mode Selector + Upload */}
-                <div className="absolute bottom-3 left-2 flex items-center gap-1 z-10">
-                  {chatMode === "ask" && (
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className="gap-1.5 h-8 px-2 text-xs hover:bg-muted/50"
-                          disabled={!isLoggedIn}
-                          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>
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align="start" className="w-56">
-                        <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" : ""}
-                        >
-                          <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>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  )}
+            <ArrowDown className="h-5 w-5" />
+          </Button>
+        </div>
+      )}
 
-                  <Button
-                    type="button"
-                    size="icon"
-                    variant="ghost"
-                    disabled={!isLoggedIn || (chatMode === "quiz" && !quizState.waitingForAnswer)}
-                    className="h-8 w-8 hover:bg-muted/50"
-                    onClick={() => fileInputRef.current?.click()}
-                    title="Upload files"
-                  >
-                    <Upload className="h-4 w-4" />
-                  </Button>
-                </div>
+      {/* =========================
+          3) Composer (pinned to bottom of ChatArea)
+             NOTE: moved from absolute -> sticky footer container.
+         ========================= */}
+      <div className="flex-shrink-0 sticky bottom-0 left-0 right-0 bg-background/95 backdrop-blur-sm z-20 border-t border-border">
+        <div className="max-w-4xl mx-auto px-4 py-4">
+          {uploadedFiles.length > 0 && (
+            <div className="mb-2 flex flex-wrap gap-2 max-h-32 overflow-y-auto">
+              {uploadedFiles.map((uploadedFile, index) => {
+                const Icon = getFileIcon(uploadedFile.file.name);
+                const fileInfo = getFileTypeInfo(uploadedFile.file.name);
+                const isImage = ["jpg", "jpeg", "png", "gif", "webp"].some((ext) =>
+                  uploadedFile.file.name.toLowerCase().endsWith(`.${ext}`)
+                );
 
-                <Textarea
-                  value={input}
-                  onChange={(e) => setInput(e.target.value)}
-                  onKeyDown={handleKeyDown}
-                  placeholder={
-                    !isLoggedIn
-                      ? "Please log in on the right to start chatting..."
-                      : chatMode === "quiz"
-                      ? quizState.waitingForAnswer
-                        ? "Type your answer here..."
-                        : quizState.currentQuestion > 0
-                        ? "Click 'Next Question' to continue..."
-                        : "Click 'Start Quiz' to begin..."
-                      : spaceType === "group"
-                      ? "Type a message or drag files here... (mention @Clare to get AI assistance)"
-                      : learningMode === "general"
-                      ? "Ask me anything! Please provide context about your question..."
-                      : "Ask Clare anything about the course or drag files here..."
-                  }
+                return (
+                  <div key={index}>
+                    <FileThumbnail
+                      file={uploadedFile.file}
+                      Icon={Icon}
+                      fileInfo={fileInfo}
+                      isImage={isImage}
+                      onPreview={() => {
+                        setSelectedFile({ file: uploadedFile.file, index });
+                        setShowFileViewer(true);
+                      }}
+                      onRemove={(e) => {
+                        e.stopPropagation();
+                        setFileToDelete(index);
+                        setShowDeleteDialog(true);
+                      }}
+                    />
+                  </div>
+                );
+              })}
+            </div>
+          )}
+
+          <form
+            onSubmit={handleSubmit}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+            className={isDragging ? "opacity-75" : ""}
+          >
+            <div className="relative">
+              {/* Mode Selector + Upload */}
+              <div className="absolute bottom-3 left-2 flex items-center gap-1 z-10">
+                {chatMode === "ask" && (
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="gap-1.5 h-8 px-2 text-xs hover:bg-muted/50"
+                        disabled={!isLoggedIn}
+                        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>
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="start" className="w-56">
+                      <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" : ""}
+                      >
+                        <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>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                )}
+
+                <Button
+                  type="button"
+                  size="icon"
+                  variant="ghost"
                   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="h-8 w-8 hover:bg-muted/50"
+                  onClick={() => fileInputRef.current?.click()}
+                  title="Upload files"
+                >
+                  <Upload className="h-4 w-4" />
+                </Button>
+              </div>
 
-                <div className="absolute bottom-2 right-2 flex gap-1">
-                  <Button type="submit" size="icon" disabled={!input.trim() || !isLoggedIn} className="h-8 w-8 rounded-full">
-                    <Send className="h-4 w-4" />
-                  </Button>
-                </div>
+              <Textarea
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder={
+                  !isLoggedIn
+                    ? "Please log in on the right to start chatting..."
+                    : chatMode === "quiz"
+                    ? quizState.waitingForAnswer
+                      ? "Type your answer here..."
+                      : quizState.currentQuestion > 0
+                      ? "Click 'Next Question' to continue..."
+                      : "Click 'Start Quiz' to begin..."
+                    : spaceType === "group"
+                    ? "Type a message or drag files here... (mention @Clare to get AI assistance)"
+                    : learningMode === "general"
+                    ? "Ask me anything! Please provide context about your question..."
+                    : "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"
+                }`}
+              />
 
-                <input
-                  ref={fileInputRef}
-                  type="file"
-                  multiple
-                  accept=".pdf,.docx,.pptx,.doc,.ppt,.jpg,.jpeg,.png,.gif,.webp"
-                  onChange={handleFileSelect}
-                  className="hidden"
-                  disabled={!isLoggedIn}
-                />
+              <div className="absolute bottom-2 right-2 flex gap-1">
+                <Button
+                  type="submit"
+                  size="icon"
+                  disabled={!input.trim() || !isLoggedIn}
+                  className="h-8 w-8 rounded-full"
+                >
+                  <Send className="h-4 w-4" />
+                </Button>
               </div>
-            </form>
-          </div>
+
+              <input
+                ref={fileInputRef}
+                type="file"
+                multiple
+                accept=".pdf,.docx,.pptx,.doc,.ppt,.jpg,.jpeg,.png,.gif,.webp"
+                onChange={handleFileSelect}
+                className="hidden"
+                disabled={!isLoggedIn}
+              />
+            </div>
+          </form>
         </div>
       </div>
 
@@ -1184,7 +1217,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>
@@ -1259,7 +1298,9 @@ 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>
@@ -1274,7 +1315,9 @@ export function ChatArea({
           <AlertDialogHeader>
             <AlertDialogTitle>Delete File</AlertDialogTitle>
             <AlertDialogDescription>
-              Are you sure you want to delete &quot;{fileToDelete !== null ? uploadedFiles[fileToDelete]?.file.name : ""}&quot;? This action cannot be undone.
+              Are you sure you want to delete &quot;
+              {fileToDelete !== null ? uploadedFiles[fileToDelete]?.file.name : ""}
+              &quot;? This action cannot be undone.
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
@@ -1306,7 +1349,9 @@ export function ChatArea({
             </DialogTitle>
             <DialogDescription>File size: {selectedFile ? formatFileSize(selectedFile.file.size) : ""}</DialogDescription>
           </DialogHeader>
-          <div className="flex-1 min-h-0 overflow-y-auto mt-4">{selectedFile && <FileViewerContent file={selectedFile.file} />}</div>
+          <div className="flex-1 min-h-0 overflow-y-auto mt-4">
+            {selectedFile && <FileViewerContent file={selectedFile.file} />}
+          </div>
         </DialogContent>
       </Dialog>
 
@@ -1334,7 +1379,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>