Update web/src/components/ChatArea.tsx

web/src/components/ChatArea.tsx

@@ -133,7 +133,7 @@ interface PendingFile {
   type: FileType;
 }
 
-// ✅ NEW: File viewer content (image full preview + pdf iframe; others download)
+// File viewer content (image full preview + pdf iframe; others download)
 function isImageFile(name: string) {
   const n = name.toLowerCase();
   return [".jpg", ".jpeg", ".png", ".gif", ".webp"].some((e) => n.endsWith(e));
@@ -173,7 +173,7 @@ function FileViewerContent({ file }: { file: File }) {
   }
 
   if (isPdfFile(file.name)) {
-    // Force pdf MIME to avoid browser blocking when file.type is empty
+    // Force PDF MIME, in case file.type is empty and the browser blocks preview.
     const pdfBlob = new Blob([file], { type: "application/pdf" });
     const pdfUrl = URL.createObjectURL(pdfBlob);
 
@@ -182,8 +182,7 @@ function FileViewerContent({ file }: { file: File }) {
         <object data={pdfUrl} type="application/pdf" className="w-full h-full">
           <div className="p-3 space-y-2">
             <div className="text-sm text-muted-foreground">
-              PDF preview is blocked by your browser. Please open it in a new tab
-              or download.
+              PDF preview is blocked by your browser. Please open it in a new tab or download.
             </div>
             <div className="flex gap-2">
               <a
@@ -217,8 +216,7 @@ function FileViewerContent({ file }: { file: File }) {
   return (
     <div className="space-y-3">
       <div className="text-sm text-muted-foreground">
-        Preview is not available for this {kind} format in the browser without
-        conversion.
+        Preview is not available for this {kind} format in the browser without conversion.
       </div>
       <a
         href={url}
@@ -231,61 +229,6 @@ function FileViewerContent({ file }: { file: File }) {
   );
 }
 
-// --------------------------
-// ✅ Profile Init Flow (Ask mode)
-// --------------------------
-type InitStatus = "idle" | "offered" | "asking" | "generating" | "done";
-
-type InitQ = {
-  id: string;
-  title: string;
-  placeholder?: string;
-};
-
-const INIT_QUESTIONS: InitQ[] = [
-  {
-    id: "course_goal",
-    title: "What’s the single most important outcome you want from this course?",
-    placeholder:
-      "e.g., understand LLM basics, build a project, prep for an exam, apply to work…",
-  },
-  {
-    id: "background",
-    title: "What’s your current background (major, job, or anything relevant)?",
-    placeholder: "One sentence is totally fine.",
-  },
-  {
-    id: "ai_experience",
-    title: "Have you worked with AI/LLMs before? If yes, at what level?",
-    placeholder: "e.g., none / used ChatGPT / built small projects / research…",
-  },
-  {
-    id: "python_level",
-    title: "How comfortable are you with Python? (Beginner / Intermediate / Advanced)",
-    placeholder: "Type one: Beginner / Intermediate / Advanced",
-  },
-  {
-    id: "preferred_format",
-    title: "What helps you learn best? (You can list multiple, separated by commas)",
-    placeholder: "Step-by-step, examples, visuals, concise answers, Socratic questions…",
-  },
-  {
-    id: "pace",
-    title: "What pace do you prefer from me? (Fast / Steady / Very detailed)",
-    placeholder: "Type one: Fast / Steady / Very detailed",
-  },
-  {
-    id: "biggest_pain",
-    title: "Where do you typically get stuck when learning technical topics?",
-    placeholder: "Concepts, tools, task breakdown, math, confidence, time management…",
-  },
-  {
-    id: "support_pref",
-    title: "When you’re unsure, how should I support you?",
-    placeholder: "Hints first / guided questions / direct answer / ask then answer…",
-  },
-];
-
 export function ChatArea({
   messages,
   onSendMessage,
@@ -352,16 +295,69 @@ export function ChatArea({
   const [targetWorkspaceId, setTargetWorkspaceId] = useState<string>("");
 
   // --------------------------
-  // ✅ Profile Init Flow state
+  // Profile Init Flow (Ask mode)
   // --------------------------
+  type InitStatus = "idle" | "offered" | "asking" | "generating" | "done";
+
+  type InitQ = {
+    id: string;
+    title: string;
+    placeholder?: string;
+  };
+
+  const INIT_QUESTIONS: InitQ[] = [
+    {
+      id: "course_goal",
+      title: "What’s the single most important outcome you want from this course?",
+      placeholder: "e.g., understand LLM basics, build a project, prep for an exam, apply to work…",
+    },
+    {
+      id: "background",
+      title: "What’s your current background (major, job, or anything relevant)?",
+      placeholder: "One sentence is totally fine.",
+    },
+    {
+      id: "ai_experience",
+      title: "Have you worked with AI/LLMs before? If yes, at what level?",
+      placeholder: "e.g., none / used ChatGPT / built small projects / research…",
+    },
+    {
+      id: "python_level",
+      title: "How comfortable are you with Python? (Beginner / Intermediate / Advanced)",
+      placeholder: "Type one: Beginner / Intermediate / Advanced",
+    },
+    {
+      id: "preferred_format",
+      title: "What helps you learn best? (You can list multiple, separated by commas)",
+      placeholder: "Step-by-step, examples, visuals, concise answers, Socratic questions…",
+    },
+    {
+      id: "pace",
+      title: "What pace do you prefer from me? (Fast / Steady / Very detailed)",
+      placeholder: "Type one: Fast / Steady / Very detailed",
+    },
+    {
+      id: "biggest_pain",
+      title: "Where do you typically get stuck when learning technical topics?",
+      placeholder: "Concepts, tools, task breakdown, math, confidence, time management…",
+    },
+    {
+      id: "support_pref",
+      title: "When you’re unsure, how should I support you?",
+      placeholder: "Hints first / guided questions / direct answer / ask then answer…",
+    },
+  ];
+
   const [initStatus, setInitStatus] = useState<InitStatus>("idle");
   const [initNeedOffer, setInitNeedOffer] = useState(false);
   const [initStep, setInitStep] = useState(0);
   const [initAnswers, setInitAnswers] = useState<Record<string, any>>({});
   const [generatedBio, setGeneratedBio] = useState<string>("");
 
-  const initLocked =
-    chatMode === "ask" && (initStatus === "asking" || initStatus === "generating");
+  // IMPORTANT: allow typing during "asking"; lock typing only during "generating"
+  const initInputLocked = chatMode === "ask" && initStatus === "generating";
+  // Use this to block other actions (uploads / drag-drop / etc.) during asking+generating
+  const initBlockActions = chatMode === "ask" && (initStatus === "asking" || initStatus === "generating");
 
   const courses =
     availableCourses.length > 0
@@ -377,7 +373,7 @@ export function ChatArea({
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
-  // ✅ Composer measured height (dynamic) to reserve bottom padding for messages
+  // Composer measured height (dynamic) to reserve bottom padding for messages
   const composerRef = useRef<HTMLDivElement>(null);
   const [composerHeight, setComposerHeight] = useState<number>(160);
 
@@ -423,8 +419,7 @@ export function ChatArea({
     if (messages.length > previousMessagesLength.current) {
       const el = scrollContainerRef.current;
       if (el) {
-        const nearBottom =
-          el.scrollHeight - el.scrollTop - el.clientHeight < 240;
+        const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 240;
         if (nearBottom) scrollToBottom("smooth");
       }
     }
@@ -447,33 +442,20 @@ export function ChatArea({
     return () => container.removeEventListener("scroll", handleScroll);
   }, []);
 
-  // ✅ Check if we should run profile init flow (Ask mode only)
+  // Check if we should run profile init flow (Ask mode only)
   useEffect(() => {
-    // Leaving Ask: reset in-progress init to avoid stale state on other tabs
-    if (chatMode !== "ask") {
-      if (initStatus === "asking" || initStatus === "generating") {
-        setInitStatus("idle");
-        setInitNeedOffer(false);
-        setInitStep(0);
-        setInitAnswers({});
-        setGeneratedBio("");
-      }
-      return;
-    }
-
     if (!isLoggedIn) return;
+    if (chatMode !== "ask") return;
     if (!currentUserId) return;
 
-    // already decided this session
+    // If already completed in this session, do nothing
     if (initStatus !== "idle") return;
 
     let cancelled = false;
 
     (async () => {
       try {
-        const r = await fetch(
-          `/api/profile/status?user_id=${encodeURIComponent(currentUserId)}`
-        );
+        const r = await fetch(`/api/profile/status?user_id=${encodeURIComponent(currentUserId)}`);
         if (!r.ok) return;
         const j = await r.json();
         if (cancelled) return;
@@ -496,22 +478,12 @@ export function ChatArea({
     e.preventDefault();
     if (!isLoggedIn) return;
 
-    // ✅ INIT FLOW: treat input as the answer to the current init question
+    // INIT FLOW: treat input as the answer to the current init question
     if (chatMode === "ask" && initStatus === "asking") {
       const text = input.trim();
       if (!text) return;
 
       const q = INIT_QUESTIONS[initStep];
-      if (!q) {
-        // safety: out of range => reset
-        setInitStatus("idle");
-        setInitNeedOffer(false);
-        setInitStep(0);
-        setInitAnswers({});
-        setGeneratedBio("");
-        return;
-      }
-
       const nextAnswers = { ...initAnswers, [q.id]: text };
 
       setInitAnswers(nextAnswers);
@@ -519,19 +491,10 @@ export function ChatArea({
 
       const nextStep = initStep + 1;
 
-      // Ensure next bubble visible
-      setTimeout(() => scrollToBottom("smooth"), 0);
-
       // finished -> generate bio + save to backend
       if (nextStep >= INIT_QUESTIONS.length) {
         setInitStatus("generating");
 
-        if (!currentUserId) {
-          toast.error("Missing user id. Please re-login and try again.");
-          setInitStatus("asking");
-          return;
-        }
-
         try {
           const r = await fetch("/api/profile/init_submit", {
             method: "POST",
@@ -550,11 +513,9 @@ export function ChatArea({
           setInitStatus("done");
           setInitNeedOffer(false);
 
-          // reset for future sessions if needed
+          // reset
           setInitStep(0);
           setInitAnswers({});
-
-          setTimeout(() => scrollToBottom("smooth"), 0);
         } catch {
           toast.error("Sorry — I couldn’t generate your Bio. Please try again.");
           setInitStatus("asking");
@@ -568,9 +529,7 @@ export function ChatArea({
       return;
     }
 
-    // ---------------------------
     // ORIGINAL behavior (unchanged)
-    // ---------------------------
     const hasText = !!input.trim();
     const hasFiles = uploadedFiles.length > 0;
 
@@ -800,7 +759,7 @@ export function ChatArea({
     e.preventDefault();
     e.stopPropagation();
     if (!isLoggedIn) return;
-    if (initLocked) return;
+    if (initBlockActions) return; // block drag UI during init
     setIsDragging(true);
   };
 
@@ -812,15 +771,12 @@ export function ChatArea({
 
   const MAX_UPLOAD_FILES = 10;
 
-  // --------------------
-  // handleDrop
-  // --------------------
   const handleDrop = (e: React.DragEvent) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragging(false);
     if (!isLoggedIn) return;
-    if (initLocked) return;
+    if (initBlockActions) return; // block file drop during init
 
     const fileList = e.dataTransfer.files;
     const files: File[] = [];
@@ -850,7 +806,7 @@ export function ChatArea({
       return;
     }
 
-    // ✅ limit total files per conversation
+    // limit total files per conversation
     const currentCount = uploadedFiles.length + pendingFiles.length;
     const remaining = MAX_UPLOAD_FILES - currentCount;
 
@@ -863,12 +819,10 @@ export function ChatArea({
     const rejected = validFiles.length - accepted.length;
 
     if (rejected > 0) {
-      toast.warning(
-        `Only the first ${accepted.length} file(s) were added (max ${MAX_UPLOAD_FILES}).`
-      );
+      toast.warning(`Only the first ${accepted.length} file(s) were added (max ${MAX_UPLOAD_FILES}).`);
     }
 
-    // ✅ append, do NOT overwrite existing pending
+    // append, do NOT overwrite existing pending
     setPendingFiles((prev) => [
       ...prev,
       ...accepted.map((file) => ({ file, type: "other" as FileType })),
@@ -877,10 +831,12 @@ export function ChatArea({
     setShowTypeDialog(true);
   };
 
-  // --------------------
-  // handleFileSelect
-  // --------------------
   const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (initBlockActions) {
+      e.target.value = "";
+      return;
+    }
+
     const files = Array.from(e.target.files || []) as File[];
 
     if (files.length === 0) {
@@ -924,9 +880,7 @@ export function ChatArea({
     const rejected = validFiles.length - accepted.length;
 
     if (rejected > 0) {
-      toast.warning(
-        `Only the first ${accepted.length} file(s) were added (max ${MAX_UPLOAD_FILES}).`
-      );
+      toast.warning(`Only the first ${accepted.length} file(s) were added (max ${MAX_UPLOAD_FILES}).`);
     }
 
     // append, do NOT overwrite existing pending
@@ -961,9 +915,7 @@ export function ChatArea({
   };
 
   const handlePendingFileTypeChange = (index: number, type: FileType) => {
-    setPendingFiles((prev) =>
-      prev.map((pf, i) => (i === index ? { ...pf, type } : pf))
-    );
+    setPendingFiles((prev) => prev.map((pf, i) => (i === index ? { ...pf, type } : pf)));
   };
 
   // File helpers
@@ -972,8 +924,7 @@ export function ChatArea({
     if (ext.endsWith(".pdf")) return FileText;
     if (ext.endsWith(".docx") || ext.endsWith(".doc")) return File;
     if (ext.endsWith(".pptx") || ext.endsWith(".ppt")) return Presentation;
-    if ([".jpg", ".jpeg", ".png", ".gif", ".webp"].some((e) => ext.endsWith(e)))
-      return ImageIcon;
+    if ([".jpg", ".jpeg", ".png", ".gif", ".webp"].some((e) => ext.endsWith(e))) return ImageIcon;
     return File;
   };
 
@@ -992,7 +943,7 @@ export function ChatArea({
 
   const { getOrCreate } = useObjectUrlCache(allThumbFiles);
 
-  // NEW: a compact "chip" UI
+  // a compact "chip" UI (the one with left Trash)
   const FileChip = ({
     file,
     index,
@@ -1003,9 +954,7 @@ export function ChatArea({
     source: "uploaded" | "pending";
   }) => {
     const ext = file.name.toLowerCase();
-    const isImage = [".jpg", ".jpeg", ".png", ".gif", ".webp"].some((e) =>
-      ext.endsWith(e)
-    );
+    const isImage = [".jpg", ".jpeg", ".png", ".gif", ".webp"].some((e) => ext.endsWith(e));
 
     const isPdf = ext.endsWith(".pdf");
     const isPpt = ext.endsWith(".ppt") || ext.endsWith(".pptx");
@@ -1050,6 +999,7 @@ export function ChatArea({
           <div className="text-xs text-muted-foreground">{label}</div>
         </div>
 
+        {/* Thumbnail (image preview or file icon) */}
         <div className="relative h-10 w-10 flex-shrink-0 rounded-lg overflow-hidden border border-border bg-muted">
           {isImage ? (
             thumbUrl ? (
@@ -1079,6 +1029,11 @@ export function ChatArea({
 
   const bottomPad = Math.max(24, composerHeight + 24);
 
+  const initPlaceholder =
+    initStatus === "asking"
+      ? "Type your answer here and press Enter / Send..."
+      : undefined;
+
   return (
     <div className="relative flex flex-col h-full min-h-0 w-full overflow-hidden">
       {/* Top Bar */}
@@ -1166,24 +1121,18 @@ export function ChatArea({
             variant="ghost"
             size="icon"
             onClick={handleSaveClick}
-            disabled={!isLoggedIn || initLocked}
-            className={`h-8 w-8 rounded-md hover:bg-muted/50 ${
-              isCurrentChatSaved() ? "text-primary" : ""
-            }`}
+            disabled={!isLoggedIn || initBlockActions}
+            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" : ""
-              }`}
-            />
+            <Bookmark className={`h-4 w-4 ${isCurrentChatSaved() ? "fill-primary text-primary" : ""}`} />
           </Button>
 
           <Button
             variant="ghost"
             size="icon"
             onClick={handleOpenDownloadDialog}
-            disabled={!isLoggedIn || initLocked}
+            disabled={!isLoggedIn || initBlockActions}
             className="h-8 w-8 rounded-md hover:bg-muted/50"
             title="Download"
           >
@@ -1194,7 +1143,7 @@ export function ChatArea({
             variant="ghost"
             size="icon"
             onClick={handleShareClick}
-            disabled={!isLoggedIn || initLocked}
+            disabled={!isLoggedIn || initBlockActions}
             className="h-8 w-8 rounded-md hover:bg-muted/50"
             title="Share"
           >
@@ -1204,7 +1153,7 @@ export function ChatArea({
           <Button
             variant="outline"
             onClick={handleClearClick}
-            disabled={!isLoggedIn || initLocked}
+            disabled={!isLoggedIn || initBlockActions}
             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"
           >
@@ -1228,9 +1177,7 @@ export function ChatArea({
                   message={message}
                   showSenderInfo={spaceType === "group"}
                   isFirstGreeting={
-                    (message.id === "1" ||
-                      message.id === "review-1" ||
-                      message.id === "quiz-1") &&
+                    (message.id === "1" || message.id === "review-1" || message.id === "quiz-1") &&
                     message.role === "assistant"
                   }
                   showNextButton={message.showNextButton && !isAppTyping}
@@ -1241,22 +1188,14 @@ export function ChatArea({
                   docType={docType}
                 />
 
-                {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>
-                  )}
+                  </div>
+                )}
 
                 {chatMode === "quiz" &&
                   message.id === "quiz-1" &&
@@ -1265,10 +1204,7 @@ export function ChatArea({
                   !quizState.waitingForAnswer &&
                   !isAppTyping && (
                     <div className="flex justify-center py-4">
-                      <Button
-                        onClick={onStartQuiz}
-                        className="bg-red-500 hover:bg-red-600 text-white"
-                      >
+                      <Button onClick={onStartQuiz} className="bg-red-500 hover:bg-red-600 text-white">
                         Start Quiz
                       </Button>
                     </div>
@@ -1276,38 +1212,34 @@ export function ChatArea({
               </React.Fragment>
             ))}
 
-            {/* ✅ Profile Init Offer (Ask mode only) */}
+            {/* Profile Init Offer (Ask mode only) */}
             {chatMode === "ask" && initNeedOffer && initStatus === "offered" && (
               <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"
-                  />
+                  <img src={clareAvatar} alt="Clare" className="w-full h-full object-cover" />
                 </div>
 
                 <div className="w-full" style={{ maxWidth: "min(770px, calc(100% - 2rem))" }}>
                   <div className="rounded-2xl border bg-card px-4 py-3 space-y-3">
-                    <div className="font-semibold">
-                      Quick intro so I can personalize your experience
-                    </div>
+                    <div className="font-semibold">Quick intro so I can personalize your experience</div>
                     <div className="text-sm text-muted-foreground leading-relaxed">
-                      I’m Clare, your AI teaching assistant. If you’d like, we can
-                      answer a few short questions so I can tailor explanations,
-                      pacing, and practice to you. Your answers will be summarized
-                      into your Profile Bio and used only inside this platform.
+                      I’m Clare, your AI teaching assistant. If you’d like, we can answer a few short questions so I can
+                      tailor explanations, pacing, and practice to you. Your answers will be summarized into your Profile Bio
+                      and used only inside this platform.
                     </div>
                     <div className="flex gap-2">
                       <Button
                         type="button"
                         onClick={() => {
-                          setInitNeedOffer(false);
                           setInitStatus("asking");
                           setInitStep(0);
                           setInitAnswers({});
                           setGeneratedBio("");
-                          setTimeout(() => scrollToBottom("smooth"), 0);
+                          // Keep focus in the composer for immediate typing
+                          setTimeout(() => {
+                            const ta = document.querySelector("textarea");
+                            (ta as HTMLTextAreaElement | null)?.focus?.();
+                          }, 0);
                         }}
                       >
                         Yes — let’s start
@@ -1317,13 +1249,11 @@ export function ChatArea({
                         variant="outline"
                         onClick={async () => {
                           try {
-                            if (currentUserId) {
-                              await fetch("/api/profile/dismiss", {
-                                method: "POST",
-                                headers: { "Content-Type": "application/json" },
-                                body: JSON.stringify({ user_id: currentUserId, days: 7 }),
-                              });
-                            }
+                            await fetch("/api/profile/dismiss", {
+                              method: "POST",
+                              headers: { "Content-Type": "application/json" },
+                              body: JSON.stringify({ user_id: currentUserId, days: 7 }),
+                            });
                           } catch {}
                           setInitNeedOffer(false);
                           setInitStatus("idle");
@@ -1337,15 +1267,11 @@ export function ChatArea({
               </div>
             )}
 
-            {/* ✅ Current init question bubble */}
+            {/* Current init question bubble */}
             {chatMode === "ask" && initStatus === "asking" && (
               <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"
-                  />
+                  <img src={clareAvatar} alt="Clare" className="w-full h-full object-cover" />
                 </div>
 
                 <div
@@ -1356,8 +1282,7 @@ export function ChatArea({
                     {INIT_QUESTIONS[initStep]?.title}
                   </div>
                   <div className="text-xs text-muted-foreground">
-                    {INIT_QUESTIONS[initStep]?.placeholder ||
-                      "Just type your answer and press Send."}
+                    {INIT_QUESTIONS[initStep]?.placeholder || "Just type your answer and press Send."}
                   </div>
                   <div className="text-xs text-muted-foreground mt-2">
                     Question {initStep + 1} of {INIT_QUESTIONS.length}
@@ -1366,33 +1291,23 @@ export function ChatArea({
               </div>
             )}
 
-            {/* ✅ Generating bubble */}
+            {/* Generating bubble */}
             {chatMode === "ask" && initStatus === "generating" && (
               <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"
-                  />
+                  <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="text-sm">
-                    Thanks — I’m generating your Profile Bio now…
-                  </div>
+                  <div className="text-sm">Thanks — I’m generating your Profile Bio now…</div>
                 </div>
               </div>
             )}
 
-            {/* ✅ Done bubble with bio */}
+            {/* Done bubble with bio */}
             {chatMode === "ask" && initStatus === "done" && !!generatedBio && (
               <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"
-                  />
+                  <img src={clareAvatar} alt="Clare" className="w-full h-full object-cover" />
                 </div>
 
                 <div className="w-full" style={{ maxWidth: "min(770px, calc(100% - 2rem))" }}>
@@ -1402,8 +1317,7 @@ export function ChatArea({
                     </div>
                     <div className="text-sm whitespace-pre-wrap">{generatedBio}</div>
                     <div className="text-xs text-muted-foreground">
-                      You can update it anytime. I’ll use this to adapt explanations,
-                      pacing, and practice.
+                      You can update it anytime. I’ll use this to adapt explanations, pacing, and practice.
                     </div>
                   </div>
                 </div>
@@ -1413,11 +1327,7 @@ export function ChatArea({
             {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"
-                  />
+                  <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">
@@ -1460,10 +1370,7 @@ export function ChatArea({
       )}
 
       {/* Composer */}
-      <div
-        ref={composerRef}
-        className="flex-shrink-0 bg-background/95 backdrop-blur-sm z-20 border-t border-border"
-      >
+      <div ref={composerRef} className="flex-shrink-0 bg-background/95 backdrop-blur-sm z-20 border-t border-border">
         <div className="max-w-4xl mx-auto px-4 py-4">
           {/* Uploaded Files Preview */}
           {(uploadedFiles.length > 0 || pendingFiles.length > 0) && (
@@ -1502,6 +1409,7 @@ export function ChatArea({
                     className="flex items-center justify-between gap-2 rounded-md border px-3 py-2 cursor-pointer hover:bg-muted/40"
                     title="Click to preview"
                   >
+                    {/* Thumbnail (image preview or file icon) */}
                     <div className="h-10 w-10 flex-shrink-0 rounded-lg overflow-hidden border border-border bg-muted">
                       {isImage ? (
                         thumbUrl ? (
@@ -1536,11 +1444,11 @@ export function ChatArea({
                       size="icon"
                       onClick={(e) => {
                         e.preventDefault();
-                        e.stopPropagation();
+                        e.stopPropagation(); // don't open viewer
                         onRemoveFile(i);
                       }}
                       title="Remove"
-                      disabled={initLocked}
+                      disabled={initBlockActions}
                     >
                       <Trash2 className="h-4 w-4" />
                     </Button>
@@ -1577,7 +1485,7 @@ export function ChatArea({
                         variant="ghost"
                         size="sm"
                         className="gap-1.5 h-8 px-2 text-xs hover:bg-muted/50"
-                        disabled={!isLoggedIn || initLocked}
+                        disabled={!isLoggedIn || initBlockActions}
                         type="button"
                       >
                         <span>{modeLabels[learningMode]}</span>
@@ -1678,7 +1586,7 @@ export function ChatArea({
                   variant="ghost"
                   disabled={
                     !isLoggedIn ||
-                    initLocked ||
+                    initBlockActions ||
                     (chatMode === "quiz" && !quizState.waitingForAnswer)
                   }
                   className="h-8 w-8 hover:bg-muted/50"
@@ -1694,7 +1602,8 @@ export function ChatArea({
                 onChange={(e) => setInput(e.target.value)}
                 onKeyDown={handleKeyDown}
                 placeholder={
-                  !isLoggedIn
+                  initPlaceholder ??
+                  (!isLoggedIn
                     ? "Please log in on the right to start chatting..."
                     : chatMode === "quiz"
                     ? quizState.waitingForAnswer
@@ -1706,11 +1615,11 @@ export function ChatArea({
                     ? "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..."
+                    : "Ask Clare anything about the course or drag files here...")
                 }
                 disabled={
                   !isLoggedIn ||
-                  initLocked ||
+                  initInputLocked || // key fix: DO NOT lock input during "asking"
                   (chatMode === "quiz" && !quizState.waitingForAnswer)
                 }
                 className={`min-h-[80px] pl-4 pr-20 resize-none bg-background border-2 ${
@@ -1723,10 +1632,9 @@ export function ChatArea({
                   type="submit"
                   size="icon"
                   disabled={
+                    (!input.trim() && uploadedFiles.length === 0) ||
                     !isLoggedIn ||
-                    (chatMode === "ask" && initStatus === "asking"
-                      ? !input.trim()
-                      : !input.trim() && uploadedFiles.length === 0)
+                    initInputLocked
                   }
                   className="h-8 w-8 rounded-full"
                 >
@@ -1741,14 +1649,14 @@ export function ChatArea({
                 accept=".pdf,.docx,.pptx,.doc,.ppt,.jpg,.jpeg,.png,.gif,.webp"
                 onChange={handleFileSelect}
                 className="hidden"
-                disabled={!isLoggedIn || initLocked}
+                disabled={!isLoggedIn || initBlockActions}
               />
             </div>
           </form>
         </div>
       </div>
 
-      {/* ✅ NEW: File Viewer Dialog */}
+      {/* File Viewer Dialog */}
       <Dialog
         open={showFileViewer}
         onOpenChange={(open) => {
@@ -1801,17 +1709,10 @@ export function ChatArea({
           </AlertDialogHeader>
 
           <AlertDialogFooter className="flex-col sm:flex-row gap-2 sm:justify-end">
-            <Button
-              variant="outline"
-              onClick={() => onConfirmClear(false)}
-              className="sm:flex-1 sm:max-w-[200px]"
-            >
+            <Button variant="outline" onClick={() => onConfirmClear(false)} className="sm:flex-1 sm:max-w-[200px]">
               Start New (Don't Save)
             </Button>
-            <AlertDialogAction
-              onClick={() => onConfirmClear(true)}
-              className="sm:flex-1 sm:max-w-[200px]"
-            >
+            <AlertDialogAction onClick={() => onConfirmClear(true)} className="sm:flex-1 sm:max-w-[200px]">
               Save & Start New
             </AlertDialogAction>
           </AlertDialogFooter>
@@ -1867,9 +1768,7 @@ export function ChatArea({
               <Checkbox
                 id="download-chat"
                 checked={downloadOptions.chat}
-                onCheckedChange={(checked) =>
-                  setDownloadOptions({ ...downloadOptions, chat: checked === true })
-                }
+                onCheckedChange={(checked) => setDownloadOptions({ ...downloadOptions, chat: checked === true })}
               />
               <label htmlFor="download-chat" className="text-sm font-medium cursor-pointer">
                 Download chat
@@ -1879,9 +1778,7 @@ export function ChatArea({
               <Checkbox
                 id="download-summary"
                 checked={downloadOptions.summary}
-                onCheckedChange={(checked) =>
-                  setDownloadOptions({ ...downloadOptions, summary: checked === true })
-                }
+                onCheckedChange={(checked) => setDownloadOptions({ ...downloadOptions, summary: checked === true })}
               />
               <label htmlFor="download-summary" className="text-sm font-medium cursor-pointer">
                 Download summary
@@ -1970,40 +1867,13 @@ export function ChatArea({
         </AlertDialogContent>
       </AlertDialog>
 
-      {/* File Viewer Dialog (kept as in your original; redundant but unchanged) */}
-      <Dialog open={showFileViewer} onOpenChange={setShowFileViewer}>
-        <DialogContent className="max-w-4xl max-h-[85vh] flex flex-col overflow-hidden">
-          <DialogHeader className="min-w-0 flex-shrink-0">
-            <DialogTitle
-              className="pr-8 break-words break-all overflow-wrap-anywhere leading-relaxed"
-              style={{
-                wordBreak: "break-all",
-                overflowWrap: "anywhere",
-                maxWidth: "100%",
-                lineHeight: "1.6",
-              }}
-            >
-              {selectedFile?.file.name}
-            </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>
-        </DialogContent>
-      </Dialog>
-
       {/* File Type Selection Dialog */}
       {showTypeDialog && (
         <Dialog open={showTypeDialog} onOpenChange={setShowTypeDialog}>
           <DialogContent className="sm:max-w-[425px]" style={{ zIndex: 99999 }}>
             <DialogHeader>
               <DialogTitle>Select File Types</DialogTitle>
-              <DialogDescription>
-                Please select the type for each file you are uploading.
-              </DialogDescription>
+              <DialogDescription>Please select the type for each file you are uploading.</DialogDescription>
             </DialogHeader>
 
             <div className="space-y-3 max-h-64 overflow-y-auto">
@@ -2015,9 +1885,7 @@ export function ChatArea({
                       <Icon className="h-4 w-4 text-muted-foreground flex-shrink-0" />
                       <div className="flex-1 min-w-0">
                         <p className="text-sm truncate">{pendingFile.file.name}</p>
-                        <p className="text-xs text-muted-foreground">
-                          {formatFileSize(pendingFile.file.size)}
-                        </p>
+                        <p className="text-xs text-muted-foreground">{formatFileSize(pendingFile.file.size)}</p>
                       </div>
                     </div>
 
@@ -2025,24 +1893,15 @@ export function ChatArea({
                       <label className="text-xs text-muted-foreground">File Type</label>
                       <Select
                         value={pendingFile.type}
-                        onValueChange={(value) =>
-                          handlePendingFileTypeChange(index, value as FileType)
-                        }
+                        onValueChange={(value) => handlePendingFileTypeChange(index, value as FileType)}
                       >
                         <SelectTrigger className="h-8 text-xs">
                           <SelectValue />
                         </SelectTrigger>
-                        <SelectContent
-                          className="!z-[100000] !bg-background !text-foreground"
-                          style={{ zIndex: 100000 }}
-                        >
+                        <SelectContent className="!z-[100000] !bg-background !text-foreground" style={{ zIndex: 100000 }}>
                           <SelectItem value="syllabus">Syllabus</SelectItem>
-                          <SelectItem value="lecture-slides">
-                            Lecture Slides / PPT
-                          </SelectItem>
-                          <SelectItem value="literature-review">
-                            Literature Review / Paper
-                          </SelectItem>
+                          <SelectItem value="lecture-slides">Lecture Slides / PPT</SelectItem>
+                          <SelectItem value="literature-review">Literature Review / Paper</SelectItem>
                           <SelectItem value="other">Other Course Document</SelectItem>
                         </SelectContent>
                       </Select>