Merge pull request #589 from AnishSarkar22/feature/note-management

Feature: Note Management system

surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx

@@ -150,7 +150,7 @@ export function DocumentsTableShell({
 				<>
 					<div className="hidden md:block max-h-[60vh] overflow-auto">
 						<Table className="table-fixed w-full">
-							<TableHeader className="sticky top-0 bg-background z-10">
+							<TableHeader className="sticky top-0 bg-background">
 								<TableRow className="hover:bg-transparent">
 									<TableHead style={{ width: 28 }}>
 										<Checkbox

surfsense_web/app/dashboard/[search_space_id]/editor/[documentId]/page.tsx

@@ -1,27 +1,75 @@
 "use client";
 
-import { AlertCircle, FileText, Loader2, Save, X } from "lucide-react";
+import { useQueryClient } from "@tanstack/react-query";
+import { AlertCircle, ArrowLeft, FileText, Loader2, Save } from "lucide-react";
 import { motion } from "motion/react";
 import { useParams, useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { BlockNoteEditor } from "@/components/DynamicBlockNoteEditor";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
+import { notesApiService } from "@/lib/apis/notes-api.service";
 import { authenticatedFetch, getBearerToken, redirectToLogin } from "@/lib/auth-utils";
+import { useLogs } from "@/hooks/use-logs";
 
 interface EditorContent {
 	document_id: number;
 	title: string;
+	document_type?: string;
 	blocknote_document: any;
 	updated_at: string | null;
 }
 
+// Helper function to extract title from BlockNote document
+// Takes the text content from the first block (should be a heading for notes)
+function extractTitleFromBlockNote(blocknoteDocument: any[] | null | undefined): string {
+	if (!blocknoteDocument || !Array.isArray(blocknoteDocument) || blocknoteDocument.length === 0) {
+		return "Untitled";
+	}
+
+	const firstBlock = blocknoteDocument[0];
+	if (!firstBlock) {
+		return "Untitled";
+	}
+
+	// Extract text from block content
+	// BlockNote blocks have a content array with inline content
+	if (firstBlock.content && Array.isArray(firstBlock.content)) {
+		const textContent = firstBlock.content
+			.map((item: any) => {
+				if (typeof item === "string") return item;
+				if (item?.text) return item.text;
+				return "";
+			})
+			.join("")
+			.trim();
+		return textContent || "Untitled";
+	}
+
+	return "Untitled";
+}
+
 export default function EditorPage() {
 	const params = useParams();
 	const router = useRouter();
+	const queryClient = useQueryClient();
 	const documentId = params.documentId as string;
+	const searchSpaceId = Number(params.search_space_id);
+	const isNewNote = documentId === "new";
+
+	const { createLog } = useLogs(searchSpaceId);
 
 	const [document, setDocument] = useState<EditorContent | null>(null);
 	const [loading, setLoading] = useState(true);
@@ -29,10 +77,26 @@ export default function EditorPage() {
 	const [editorContent, setEditorContent] = useState<any>(null);
 	const [error, setError] = useState<string | null>(null);
 	const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+	const [showUnsavedDialog, setShowUnsavedDialog] = useState(false);
 
 	// Fetch document content - DIRECT CALL TO FASTAPI
+	// Skip fetching if this is a new note
 	useEffect(() => {
 		async function fetchDocument() {
+			// For new notes, initialize with empty state
+			if (isNewNote) {
+				setDocument({
+					document_id: 0,
+					title: "Untitled",
+					document_type: "NOTE",
+					blocknote_document: null,
+					updated_at: null,
+				});
+				setEditorContent(null);
+				setLoading(false);
+				return;
+			}
+
 			const token = getBearerToken();
 			if (!token) {
 				console.error("No auth token found");
@@ -51,28 +115,101 @@ export default function EditorPage() {
 					const errorData = await response
 						.json()
 						.catch(() => ({ detail: "Failed to fetch document" }));
-					throw new Error(errorData.detail || "Failed to fetch document");
+					const errorMessage = errorData.detail || "Failed to fetch document";
+					
+					// Log fetch error
+					try {
+						await createLog({
+							level: "ERROR",
+							status: "FAILED",
+							message: `Failed to fetch document: ${errorMessage}`,
+							source: "editor",
+							search_space_id: searchSpaceId,
+							log_metadata: {
+								document_id: documentId,
+								error_type: "fetch_error",
+								http_status: response.status,
+							},
+						});
+					} catch (err) {
+						console.error("Failed to create log:", err);
+					}
+					
+					throw new Error(errorMessage);
 				}
 
 				const data = await response.json();
 
 				// Check if blocknote_document exists
 				if (!data.blocknote_document) {
-					setError(
-						"This document does not have BlockNote content. Please re-upload the document to enable editing."
-					);
+					const errorMsg = "This document does not have BlockNote content. Please re-upload the document to enable editing.";
+					
+					// Log missing BlockNote content
+					try {
+						await createLog({
+							level: "WARNING",
+							status: "FAILED",
+							message: `Document ${documentId} does not have BlockNote content`,
+							source: "editor",
+							search_space_id: searchSpaceId,
+							log_metadata: {
+								document_id: documentId,
+								error_type: "missing_blocknote_content",
+							},
+						});
+					} catch (err) {
+						console.error("Failed to create log:", err);
+					}
+					
+					setError(errorMsg);
 					setLoading(false);
 					return;
 				}
 
+				// Log successful fetch
+				try {
+					await createLog({
+						level: "INFO",
+						status: "SUCCESS",
+						message: `Document ${documentId} loaded successfully`,
+						source: "editor",
+						search_space_id: searchSpaceId,
+						log_metadata: {
+							document_id: documentId,
+							document_type: data.document_type,
+							title: data.title,
+						},
+					});
+				} catch (err) {
+					console.error("Failed to create log:", err);
+				}
+
 				setDocument(data);
 				setEditorContent(data.blocknote_document);
 				setError(null);
 			} catch (error) {
 				console.error("Error fetching document:", error);
-				setError(
-					error instanceof Error ? error.message : "Failed to fetch document. Please try again."
-				);
+				const errorMessage =
+					error instanceof Error ? error.message : "Failed to fetch document. Please try again.";
+				
+				// Log general fetch error
+				try {
+					await createLog({
+						level: "ERROR",
+						status: "FAILED",
+						message: `Error fetching document: ${errorMessage}`,
+						source: "editor",
+						search_space_id: searchSpaceId,
+						log_metadata: {
+							document_id: documentId,
+							error_type: "fetch_exception",
+						},
+					});
+				} catch (err) {
+					console.error("Failed to create log:", err);
+				}
+				
+				setError(errorMessage);
 			} finally {
 				setLoading(false);
 			}
@@ -81,7 +218,7 @@ export default function EditorPage() {
 		if (documentId) {
 			fetchDocument();
 		}
-	}, [documentId, params.search_space_id]);
+	}, [documentId, params.search_space_id, isNewNote, searchSpaceId, createLog]);
 
 	// Track changes to mark as unsaved
 	useEffect(() => {
@@ -90,9 +227,21 @@ export default function EditorPage() {
 		}
 	}, [editorContent, document]);
 
+	// Check if this is a NOTE type document
+	const isNote = isNewNote || document?.document_type === "NOTE";
+
+	// Extract title dynamically from editor content for notes, otherwise use document title
+	const displayTitle = useMemo(() => {
+		if (isNote && editorContent) {
+			return extractTitleFromBlockNote(editorContent);
+		}
+		return document?.title || "Untitled";
+	}, [isNote, editorContent, document?.title]);
+
 	// TODO: Maybe add Auto-save every 30 seconds - DIRECT CALL TO FASTAPI
 
 	// Save and exit - DIRECT CALL TO FASTAPI
+	// For new notes, create the note first, then save
 	const handleSave = async () => {
 		const token = getBearerToken();
 		if (!token) {
@@ -101,57 +250,217 @@ export default function EditorPage() {
 			return;
 		}
 
-		if (!editorContent) {
-			toast.error("No content to save");
-			return;
-		}
-
 		setSaving(true);
+		setError(null);
+
 		try {
-			// Save blocknote_document and trigger reindexing in background
-			const response = await authenticatedFetch(
-				`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/search-spaces/${params.search_space_id}/documents/${documentId}/save`,
-				{
-					method: "POST",
-					headers: { "Content-Type": "application/json" },
-					body: JSON.stringify({ blocknote_document: editorContent }),
+			// If this is a new note, create it first
+			if (isNewNote) {
+				const title = extractTitleFromBlockNote(editorContent);
+
+				// Create the note first
+				const note = await notesApiService.createNote({
+					search_space_id: searchSpaceId,
+					title: title,
+					blocknote_document: editorContent || undefined,
+				});
+
+				// If there's content, save it properly and trigger reindexing
+				if (editorContent) {
+					const response = await authenticatedFetch(
+						`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/search-spaces/${searchSpaceId}/documents/${note.id}/save`,
+						{
+							method: "POST",
+							headers: { "Content-Type": "application/json" },
+							body: JSON.stringify({ blocknote_document: editorContent }),
+						}
+					);
+
+					if (!response.ok) {
+						const errorData = await response
+							.json()
+							.catch(() => ({ detail: "Failed to save document" }));
+						
+						// Log save error
+						try {
+							await createLog({
+								level: "ERROR",
+								status: "FAILED",
+								message: `Failed to save new note: ${errorData.detail || "Unknown error"}`,
+								source: "editor",
+								search_space_id: searchSpaceId,
+								log_metadata: {
+									document_id: note.id,
+									is_new_note: true,
+									action: "save",
+									http_status: response.status,
+								},
+							});
+						} catch (err) {
+							console.error("Failed to create log:", err);
+						}
+						
+						throw new Error(errorData.detail || "Failed to save document");
+					}
 				}
-			);
 
-			if (!response.ok) {
-				const errorData = await response
-					.json()
-					.catch(() => ({ detail: "Failed to save document" }));
-				throw new Error(errorData.detail || "Failed to save document");
+				// Log successful note creation
+				try {
+					await createLog({
+						level: "INFO",
+						status: "SUCCESS",
+						message: `Note created successfully: ${title}`,
+						source: "editor",
+						search_space_id: searchSpaceId,
+						log_metadata: {
+							document_id: note.id,
+							is_new_note: true,
+							action: "save",
+							title: title,
+						},
+					});
+				} catch (err) {
+					console.error("Failed to create log:", err);
+				}
+
+				setHasUnsavedChanges(false);
+				toast.success("Note created successfully! Reindexing in background...");
+
+				// Invalidate notes query to refresh the sidebar
+				queryClient.invalidateQueries({
+					queryKey: ["notes", String(searchSpaceId)],
+				});
+
+				// Update URL to reflect the new document ID without navigation
+				window.history.replaceState({}, "", `/dashboard/${searchSpaceId}/editor/${note.id}`);
+				// Update document state to reflect the new ID
+				setDocument({
+					document_id: note.id,
+					title: title,
+					document_type: "NOTE",
+					blocknote_document: editorContent,
+					updated_at: new Date().toISOString(),
+				});
+			} else {
+				// Existing document - save normally
+				if (!editorContent) {
+					toast.error("No content to save");
+					setSaving(false);
+					return;
+				}
+
+				// Save blocknote_document and trigger reindexing in background
+				const response = await authenticatedFetch(
+					`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/search-spaces/${params.search_space_id}/documents/${documentId}/save`,
+					{
+						method: "POST",
+						headers: { "Content-Type": "application/json" },
+						body: JSON.stringify({ blocknote_document: editorContent }),
+					}
+				);
+
+				if (!response.ok) {
+					const errorData = await response
+						.json()
+						.catch(() => ({ detail: "Failed to save document" }));
+					
+					// Log save error
+					try {
+						await createLog({
+							level: "ERROR",
+							status: "FAILED",
+							message: `Failed to save document ${documentId}: ${errorData.detail || "Unknown error"}`,
+							source: "editor",
+							search_space_id: searchSpaceId,
+							log_metadata: {
+								document_id: documentId,
+								action: "save",
+								http_status: response.status,
+							},
+						});
+					} catch (err) {
+						console.error("Failed to create log:", err);
+					}
+					
+					throw new Error(errorData.detail || "Failed to save document");
+				}
+
+				// Log successful save
+				try {
+					await createLog({
+						level: "INFO",
+						status: "SUCCESS",
+						message: `Document ${documentId} saved successfully`,
+						source: "editor",
+						search_space_id: searchSpaceId,
+						log_metadata: {
+							document_id: documentId,
+							action: "save",
+							title: document?.title,
+						},
+					});
+				} catch (err) {
+					console.error("Failed to create log:", err);
+				}
+
+				setHasUnsavedChanges(false);
+				toast.success("Document saved! Reindexing in background...");
+
+				// Invalidate notes query when updating notes to refresh the sidebar
+				if (isNote) {
+					queryClient.invalidateQueries({
+						queryKey: ["notes", String(searchSpaceId)],
+					});
+				}
 			}
-
-			setHasUnsavedChanges(false);
-			toast.success("Document saved! Reindexing in background...");
-
-			// Small delay before redirect to show success message
-			setTimeout(() => {
-				router.push(`/dashboard/${params.search_space_id}/documents`);
-			}, 500);
 		} catch (error) {
 			console.error("Error saving document:", error);
-			toast.error(
-				error instanceof Error ? error.message : "Failed to save document. Please try again."
-			);
+			const errorMessage =
+				error instanceof Error
+					? error.message
+					: isNewNote
+						? "Failed to create note. Please try again."
+						: "Failed to save document. Please try again.";
+			
+			// Log save error
+			try {
+				await createLog({
+					level: "ERROR",
+					status: "FAILED",
+					message: `Error saving document: ${errorMessage}`,
+					source: "editor",
+					search_space_id: searchSpaceId,
+					log_metadata: {
+						document_id: isNewNote ? null : documentId,
+						is_new_note: isNewNote,
+						action: "save",
+						error_type: "save_exception",
+					},
+				});
+			} catch (err) {
+				console.error("Failed to create log:", err);
+			}
+			
+			setError(errorMessage);
+			toast.error(errorMessage);
 		} finally {
 			setSaving(false);
 		}
 	};
 
-	const handleCancel = () => {
+	const handleBack = () => {
 		if (hasUnsavedChanges) {
-			if (confirm("You have unsaved changes. Are you sure you want to leave?")) {
-				router.back();
-			}
+			setShowUnsavedDialog(true);
 		} else {
-			router.back();
+			router.push(`/dashboard/${searchSpaceId}/researcher`);
 		}
 	};
 
+	const handleConfirmLeave = () => {
+		setShowUnsavedDialog(false);
+		router.push(`/dashboard/${searchSpaceId}/researcher`);
+	};
+
 	if (loading) {
 		return (
 			<div className="flex items-center justify-center min-h-[400px] p-6">
@@ -182,9 +491,13 @@ export default function EditorPage() {
 							<CardDescription>{error}</CardDescription>
 						</CardHeader>
 						<CardContent>
-							<Button onClick={() => router.back()} variant="outline" className="w-full">
-								<X className="mr-2 h-4 w-4" />
-								Go Back
+							<Button
+								onClick={() => router.push(`/dashboard/${searchSpaceId}/researcher`)}
+								variant="outline"
+								className="gap-2"
+							>
+								<ArrowLeft className="h-4 w-4" />
+								Back
 							</Button>
 						</CardContent>
 					</Card>
@@ -193,7 +506,7 @@ export default function EditorPage() {
 		);
 	}
 
-	if (!document) {
+	if (!document && !isNewNote) {
 		return (
 			<div className="flex items-center justify-center min-h-[400px] p-6">
 				<Card className="w-full max-w-md">
@@ -217,26 +530,26 @@ export default function EditorPage() {
 				<div className="flex items-center gap-3 flex-1 min-w-0">
 					<FileText className="h-5 w-5 text-muted-foreground shrink-0" />
 					<div className="flex flex-col min-w-0">
-						<h1 className="text-lg font-semibold truncate">{document.title}</h1>
+						<h1 className="text-lg font-semibold truncate">{displayTitle}</h1>
 						{hasUnsavedChanges && <p className="text-xs text-muted-foreground">Unsaved changes</p>}
 					</div>
 				</div>
 				<Separator orientation="vertical" className="h-6" />
 				<div className="flex items-center gap-2">
-					<Button variant="outline" onClick={handleCancel} disabled={saving} className="gap-2">
-						<X className="h-4 w-4" />
-						Cancel
+					<Button variant="outline" onClick={handleBack} disabled={saving} className="gap-2">
+						<ArrowLeft className="h-4 w-4" />
+						Back
 					</Button>
 					<Button onClick={handleSave} disabled={saving} className="gap-2">
 						{saving ? (
 							<>
 								<Loader2 className="h-4 w-4 animate-spin" />
-								Saving...
+								{isNewNote ? "Creating..." : "Saving..."}
 							</>
 						) : (
 							<>
 								<Save className="h-4 w-4" />
-								Save & Exit
+								Save
 							</>
 						)}
 					</Button>
@@ -246,11 +559,43 @@ export default function EditorPage() {
 			{/* Editor Container */}
 			<div className="flex-1 overflow-hidden relative">
 				<div className="h-full w-full overflow-auto p-6">
+					{error && (
+						<motion.div
+							initial={{ opacity: 0, y: -10 }}
+							animate={{ opacity: 1, y: 0 }}
+							className="mb-6 max-w-4xl mx-auto"
+						>
+							<div className="flex items-center gap-2 p-4 rounded-lg border border-destructive/50 bg-destructive/10 text-destructive">
+								<AlertCircle className="h-5 w-5 shrink-0" />
+								<p className="text-sm">{error}</p>
+							</div>
+						</motion.div>
+					)}
 					<div className="max-w-4xl mx-auto">
-						<BlockNoteEditor initialContent={editorContent} onChange={setEditorContent} />
+						<BlockNoteEditor
+							initialContent={isNewNote ? undefined : editorContent}
+							onChange={setEditorContent}
+							useTitleBlock={isNote}
+						/>
 					</div>
 				</div>
 			</div>
+
+			{/* Unsaved Changes Dialog */}
+			<AlertDialog open={showUnsavedDialog} onOpenChange={setShowUnsavedDialog}>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Unsaved Changes</AlertDialogTitle>
+						<AlertDialogDescription>
+							You have unsaved changes. Are you sure you want to leave?
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<AlertDialogAction onClick={handleConfirmLeave}>OK</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
 		</motion.div>
 	);
 }

surfsense_web/app/dashboard/page.tsx

@@ -156,7 +156,12 @@ const DashboardPage = () => {
 		},
 	};
 
-	const { data: searchSpaces = [], isLoading: loading, error, refetch: refreshSearchSpaces } = useAtomValue(searchSpacesAtom);
+	const {
+		data: searchSpaces = [],
+		isLoading: loading,
+		error,
+		refetch: refreshSearchSpaces,
+	} = useAtomValue(searchSpacesAtom);
 	const { mutateAsync: deleteSearchSpace } = useAtomValue(deleteSearchSpaceMutationAtom);
 
 	const { data: user, isPending: isLoadingUser, error: userError } = useAtomValue(currentUserAtom);
@@ -171,7 +176,7 @@ const DashboardPage = () => {
 	};
 
 	if (loading) return <LoadingScreen />;
-	if (error) return <ErrorScreen message={error?.message || 'Failed to load search spaces'} />;
+	if (error) return <ErrorScreen message={error?.message || "Failed to load search spaces"} />;
 
 	const handleDeleteSearchSpace = async (id: number) => {
 		await deleteSearchSpace({ id });