Update web/src/components/ChatArea.tsx

web/src/components/ChatArea.tsx

@@ -86,7 +86,8 @@ interface ChatAreaProps {
   uploadedFiles: UploadedFile[];
   onFileUpload: (files: File[]) => void;
   onRemoveFile: (index: number) => void;
-  onProfileBioUpdate?: (bio: string) => void; // ✅ NEW
+
+  onProfileBioUpdate?: (bio: string) => void; // still allowed (ProfileEditor / future AI updates)
 
   onFileTypeChange: (index: number, type: FileType) => void;
   memoryProgress: number;
@@ -174,7 +175,6 @@ function FileViewerContent({ file }: { file: File }) {
   }
 
   if (isPdfFile(file.name)) {
-    // 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);
 
@@ -296,71 +296,6 @@ export function ChatArea({
   const [shareLink, setShareLink] = useState("");
   const [targetWorkspaceId, setTargetWorkspaceId] = useState<string>("");
 
-  // --------------------------
-  // 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>("");
-
-  // 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
       ? availableCourses
@@ -444,96 +379,10 @@ export function ChatArea({
     return () => container.removeEventListener("scroll", handleScroll);
   }, []);
 
-  // Check if we should run profile init flow (Ask mode only)
-  useEffect(() => {
-    if (!isLoggedIn) return;
-    if (chatMode !== "ask") return;
-    if (!currentUserId) return;
-
-    // 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)}`);
-        if (!r.ok) return;
-        const j = await r.json();
-        if (cancelled) return;
-
-        if (j?.need_init) {
-          setInitNeedOffer(true);
-          setInitStatus("offered");
-        }
-      } catch {
-        // ignore
-      }
-    })();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [isLoggedIn, chatMode, currentUserId, initStatus]);
-
   const handleSubmit = async (e: React.FormEvent | React.KeyboardEvent) => {
     e.preventDefault();
     if (!isLoggedIn) return;
 
-    // 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];
-      const nextAnswers = { ...initAnswers, [q.id]: text };
-
-      setInitAnswers(nextAnswers);
-      setInput("");
-
-      const nextStep = initStep + 1;
-
-      // finished -> generate bio + save to backend
-      if (nextStep >= INIT_QUESTIONS.length) {
-        setInitStatus("generating");
-
-        try {
-          const r = await fetch("/api/profile/init_submit", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({
-              user_id: currentUserId,
-              answers: nextAnswers,
-              language_preference: "English",
-            }),
-          });
-
-          if (!r.ok) throw new Error("init_submit failed");
-          const j = await r.json();
-
-          setGeneratedBio(j?.bio || "");
-          onProfileBioUpdate?.(j?.bio || ""); // ✅ NEW: sync into user profile
-
-          setInitStatus("done");
-          setInitNeedOffer(false);
-
-          // reset
-          setInitStep(0);
-          setInitAnswers({});
-        } catch {
-          toast.error("Sorry — I couldn’t generate your Bio. Please try again.");
-          setInitStatus("asking");
-        }
-
-        return;
-      }
-
-      // go next question
-      setInitStep(nextStep);
-      return;
-    }
-
-    // ORIGINAL behavior (unchanged)
     const hasText = !!input.trim();
     const hasFiles = uploadedFiles.length > 0;
 
@@ -744,7 +593,6 @@ export function ChatArea({
     const saved = isCurrentChatSaved();
 
     if (saved) {
-      // keep behavior
       onConfirmClear(false as any);
       return;
     }
@@ -763,7 +611,6 @@ export function ChatArea({
     e.preventDefault();
     e.stopPropagation();
     if (!isLoggedIn) return;
-    if (initBlockActions) return; // block drag UI during init
     setIsDragging(true);
   };
 
@@ -780,7 +627,6 @@ export function ChatArea({
     e.stopPropagation();
     setIsDragging(false);
     if (!isLoggedIn) return;
-    if (initBlockActions) return; // block file drop during init
 
     const fileList = e.dataTransfer.files;
     const files: File[] = [];
@@ -810,7 +656,6 @@ export function ChatArea({
       return;
     }
 
-    // limit total files per conversation
     const currentCount = uploadedFiles.length + pendingFiles.length;
     const remaining = MAX_UPLOAD_FILES - currentCount;
 
@@ -826,7 +671,6 @@ export function ChatArea({
       toast.warning(`Only the first ${accepted.length} file(s) were added (max ${MAX_UPLOAD_FILES}).`);
     }
 
-    // append, do NOT overwrite existing pending
     setPendingFiles((prev) => [
       ...prev,
       ...accepted.map((file) => ({ file, type: "other" as FileType })),
@@ -836,11 +680,6 @@ export function ChatArea({
   };
 
   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) {
@@ -870,7 +709,6 @@ export function ChatArea({
       return;
     }
 
-    // limit total files per conversation
     const currentCount = uploadedFiles.length + pendingFiles.length;
     const remaining = MAX_UPLOAD_FILES - currentCount;
 
@@ -887,7 +725,6 @@ export function ChatArea({
       toast.warning(`Only the first ${accepted.length} file(s) were added (max ${MAX_UPLOAD_FILES}).`);
     }
 
-    // append, do NOT overwrite existing pending
     setPendingFiles((prev) => [
       ...prev,
       ...accepted.map((file) => ({ file, type: "other" as FileType })),
@@ -922,7 +759,6 @@ export function ChatArea({
     setPendingFiles((prev) => prev.map((pf, i) => (i === index ? { ...pf, type } : pf)));
   };
 
-  // File helpers
   const getFileIcon = (filename: string) => {
     const ext = filename.toLowerCase();
     if (ext.endsWith(".pdf")) return FileText;
@@ -940,14 +776,12 @@ export function ChatArea({
 
   const fileKey = (f: File) => `${f.name}::${f.size}::${f.lastModified}`;
 
-  // useObjectUrlCache: for image thumbnails (uploaded + pending)
   const allThumbFiles = useMemo(() => {
     return [...uploadedFiles.map((u) => u.file), ...pendingFiles.map((p) => p.file)];
   }, [uploadedFiles, pendingFiles]);
 
   const { getOrCreate } = useObjectUrlCache(allThumbFiles);
 
-  // a compact "chip" UI (the one with left Trash)
   const FileChip = ({
     file,
     index,
@@ -1003,7 +837,6 @@ 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 ? (
@@ -1033,11 +866,6 @@ 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 */}
@@ -1125,7 +953,7 @@ export function ChatArea({
             variant="ghost"
             size="icon"
             onClick={handleSaveClick}
-            disabled={!isLoggedIn || initBlockActions}
+            disabled={!isLoggedIn}
             className={`h-8 w-8 rounded-md hover:bg-muted/50 ${isCurrentChatSaved() ? "text-primary" : ""}`}
             title={isCurrentChatSaved() ? "Unsave" : "Save"}
           >
@@ -1136,7 +964,7 @@ export function ChatArea({
             variant="ghost"
             size="icon"
             onClick={handleOpenDownloadDialog}
-            disabled={!isLoggedIn || initBlockActions}
+            disabled={!isLoggedIn}
             className="h-8 w-8 rounded-md hover:bg-muted/50"
             title="Download"
           >
@@ -1147,7 +975,7 @@ export function ChatArea({
             variant="ghost"
             size="icon"
             onClick={handleShareClick}
-            disabled={!isLoggedIn || initBlockActions}
+            disabled={!isLoggedIn}
             className="h-8 w-8 rounded-md hover:bg-muted/50"
             title="Share"
           >
@@ -1157,7 +985,7 @@ export function ChatArea({
           <Button
             variant="outline"
             onClick={handleClearClick}
-            disabled={!isLoggedIn || initBlockActions}
+            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"
           >
@@ -1216,118 +1044,6 @@ export function ChatArea({
               </React.Fragment>
             ))}
 
-            {/* 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" />
-                </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="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.
-                    </div>
-                    <div className="flex gap-2">
-                      <Button
-                        type="button"
-                        onClick={() => {
-                          setInitStatus("asking");
-                          setInitStep(0);
-                          setInitAnswers({});
-                          setGeneratedBio("");
-                          // Keep focus in the composer for immediate typing
-                          setTimeout(() => {
-                            const ta = document.querySelector("textarea");
-                            (ta as HTMLTextAreaElement | null)?.focus?.();
-                          }, 0);
-                        }}
-                      >
-                        Yes — let’s start
-                      </Button>
-                      <Button
-                        type="button"
-                        variant="outline"
-                        onClick={async () => {
-                          try {
-                            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");
-                        }}
-                      >
-                        Maybe later
-                      </Button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            )}
-
-            {/* 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" />
-                </div>
-
-                <div
-                  className="bg-muted rounded-2xl px-4 py-3 w-full"
-                  style={{ maxWidth: "min(770px, calc(100% - 2rem))" }}
-                >
-                  <div className="text-sm font-medium mb-1">
-                    {INIT_QUESTIONS[initStep]?.title}
-                  </div>
-                  <div className="text-xs text-muted-foreground">
-                    {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}
-                  </div>
-                </div>
-              </div>
-            )}
-
-            {/* 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" />
-                </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>
-              </div>
-            )}
-
-            {/* 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" />
-                </div>
-
-                <div className="w-full" style={{ maxWidth: "min(770px, calc(100% - 2rem))" }}>
-                  <div className="bg-muted rounded-2xl px-4 py-3 space-y-2">
-                    <div className="text-sm font-medium">
-                      Thank you — I’ve saved this to your Profile Bio.
-                    </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.
-                    </div>
-                  </div>
-                </div>
-              </div>
-            )}
-
             {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">
@@ -1413,7 +1129,6 @@ 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 ? (
@@ -1448,11 +1163,10 @@ export function ChatArea({
                       size="icon"
                       onClick={(e) => {
                         e.preventDefault();
-                        e.stopPropagation(); // don't open viewer
+                        e.stopPropagation();
                         onRemoveFile(i);
                       }}
                       title="Remove"
-                      disabled={initBlockActions}
                     >
                       <Trash2 className="h-4 w-4" />
                     </Button>
@@ -1489,7 +1203,7 @@ export function ChatArea({
                         variant="ghost"
                         size="sm"
                         className="gap-1.5 h-8 px-2 text-xs hover:bg-muted/50"
-                        disabled={!isLoggedIn || initBlockActions}
+                        disabled={!isLoggedIn}
                         type="button"
                       >
                         <span>{modeLabels[learningMode]}</span>
@@ -1590,7 +1304,6 @@ export function ChatArea({
                   variant="ghost"
                   disabled={
                     !isLoggedIn ||
-                    initBlockActions ||
                     (chatMode === "quiz" && !quizState.waitingForAnswer)
                   }
                   className="h-8 w-8 hover:bg-muted/50"
@@ -1606,8 +1319,7 @@ export function ChatArea({
                 onChange={(e) => setInput(e.target.value)}
                 onKeyDown={handleKeyDown}
                 placeholder={
-                  initPlaceholder ??
-                  (!isLoggedIn
+                  !isLoggedIn
                     ? "Please log in on the right to start chatting..."
                     : chatMode === "quiz"
                     ? quizState.waitingForAnswer
@@ -1619,11 +1331,10 @@ 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 ||
-                  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 ${
@@ -1637,8 +1348,7 @@ export function ChatArea({
                   size="icon"
                   disabled={
                     (!input.trim() && uploadedFiles.length === 0) ||
-                    !isLoggedIn ||
-                    initInputLocked
+                    !isLoggedIn
                   }
                   className="h-8 w-8 rounded-full"
                 >
@@ -1653,7 +1363,7 @@ export function ChatArea({
                 accept=".pdf,.docx,.pptx,.doc,.ppt,.jpg,.jpeg,.png,.gif,.webp"
                 onChange={handleFileSelect}
                 className="hidden"
-                disabled={!isLoggedIn || initBlockActions}
+                disabled={!isLoggedIn}
               />
             </div>
           </form>