Update web/src/components/ChatArea.tsx

web/src/components/ChatArea.tsx

@@ -133,6 +133,75 @@ interface PendingFile {
   type: FileType;
 }
 
+// ✅ NEW: 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));
+}
+function isPdfFile(name: string) {
+  return name.toLowerCase().endsWith(".pdf");
+}
+function isDocFile(name: string) {
+  const n = name.toLowerCase();
+  return n.endsWith(".doc") || n.endsWith(".docx");
+}
+function isPptFile(name: string) {
+  const n = name.toLowerCase();
+  return n.endsWith(".ppt") || n.endsWith(".pptx");
+}
+
+function FileViewerContent({ file }: { file: File }) {
+  const [url, setUrl] = React.useState<string>("");
+
+  React.useEffect(() => {
+    const u = URL.createObjectURL(file);
+    setUrl(u);
+    return () => URL.revokeObjectURL(u);
+  }, [file]);
+
+  if (isImageFile(file.name)) {
+    return (
+      <div className="w-full">
+        <img
+          src={url}
+          alt={file.name}
+          className="w-full h-auto rounded-lg border"
+          draggable={false}
+        />
+      </div>
+    );
+  }
+
+  if (isPdfFile(file.name)) {
+    return (
+      <div className="w-full h-[70vh] border rounded-lg overflow-hidden">
+        <iframe title={file.name} src={url} className="w-full h-full" />
+      </div>
+    );
+  }
+
+  const kind = isDocFile(file.name)
+    ? "Word document"
+    : isPptFile(file.name)
+    ? "PowerPoint"
+    : "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.
+      </div>
+      <a
+        href={url}
+        download={file.name}
+        className="inline-flex items-center justify-center h-9 px-3 rounded-md border hover:bg-muted"
+      >
+        Download to view
+      </a>
+    </div>
+  );
+}
+
 export function ChatArea({
   messages,
   onSendMessage,
@@ -959,7 +1028,24 @@ export function ChatArea({
                 const thumbUrl = isImage ? getOrCreate(uf.file) : null;
 
                 return (
-                  <div key={key} className="flex items-center justify-between gap-2 rounded-md border px-3 py-2">
+                  <div
+                    key={key}
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => {
+                      setSelectedFile({ file: uf.file, index: i });
+                      setShowFileViewer(true);
+                    }}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        setSelectedFile({ file: uf.file, index: i });
+                        setShowFileViewer(true);
+                      }
+                    }}
+                    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 ? (
@@ -990,7 +1076,16 @@ export function ChatArea({
                       <div className="text-xs text-muted-foreground">{uf.type}</div>
                     </div>
 
-                    <Button variant="ghost" size="icon" onClick={() => onRemoveFile(i)} title="Remove">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation(); // ✅ don't open viewer
+                        onRemoveFile(i);
+                      }}
+                      title="Remove"
+                    >
                       <Trash2 className="h-4 w-4" />
                     </Button>
                   </div>
@@ -1125,10 +1220,7 @@ export function ChatArea({
                   type="button"
                   size="icon"
                   variant="ghost"
-                  disabled={
-                    !isLoggedIn ||
-                    (chatMode === "quiz" && !quizState.waitingForAnswer)
-                  }
+                  disabled={!isLoggedIn || (chatMode === "quiz" && !quizState.waitingForAnswer)}
                   className="h-8 w-8 hover:bg-muted/50"
                   onClick={() => fileInputRef.current?.click()}
                   title="Upload files"
@@ -1156,22 +1248,14 @@ export function ChatArea({
                     ? "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)
-                }
+                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"
                 }`}
               />
 
               <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"
-                >
+                <Button type="submit" size="icon" disabled={!input.trim() || !isLoggedIn} className="h-8 w-8 rounded-full">
                   <Send className="h-4 w-4" />
                 </Button>
               </div>
@@ -1190,6 +1274,44 @@ export function ChatArea({
         </div>
       </div>
 
+      {/* ✅ NEW: File Viewer Dialog */}
+      <Dialog
+        open={showFileViewer}
+        onOpenChange={(open) => {
+          setShowFileViewer(open);
+          if (!open) setSelectedFile(null);
+        }}
+      >
+        <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>
+
+
+
+
+
+
+
       {/* Start New Conversation Confirmation Dialog */}
       <AlertDialog open={showClearDialog} onOpenChange={onCancelClear}>
         <AlertDialogContent>