913: Document Viewer improvements

backend/src/controller/levelController.ts

@@ -1,27 +1,26 @@
 import { Response } from 'express';
 
+import { getSandboxDocumentMetas } from '@src/document';
 import { LevelGetRequest } from '@src/models/api/LevelGetRequest';
-import { LEVEL_NAMES, isValidLevel } from '@src/models/level';
+import { LEVEL_NAMES } from '@src/models/level';
 
-function handleLoadLevel(req: LevelGetRequest, res: Response) {
-	const { level } = req.query;
+import { validateLevel } from './requestValidators';
 
-	if (level === undefined) {
-		res.status(400).send('Level not provided');
-		return;
-	}
+function handleLoadLevel(req: LevelGetRequest, res: Response) {
+	const level = validateLevel(res, req.query.level);
+	if (level === null) return;
 
-	if (!isValidLevel(level)) {
-		res.status(400).send('Invalid level');
-		return;
-	}
+	const chatModel =
+		level === LEVEL_NAMES.SANDBOX ? req.session.chatModel : undefined;
+	const availableDocs =
+		level === LEVEL_NAMES.SANDBOX ? getSandboxDocumentMetas() : undefined;
 
 	res.send({
 		emails: req.session.levelState[level].sentEmails,
 		chatHistory: req.session.levelState[level].chatHistory,
 		defences: req.session.levelState[level].defences,
-		chatModel:
-			level === LEVEL_NAMES.SANDBOX ? req.session.chatModel : undefined,
+		chatModel,
+		availableDocs,
 	});
 }
 

backend/src/controller/requestValidators.ts

@@ -0,0 +1,18 @@
+import { Response } from 'express';
+
+import { sendErrorResponse } from '@src/controller/handleError';
+import { isValidLevel, LEVEL_NAMES } from '@src/models/level';
+
+export function validateLevel(response: Response, level?: LEVEL_NAMES) {
+	if (level === undefined) {
+		sendErrorResponse(response, 400, 'Level not provided');
+		return null;
+	}
+
+	if (!isValidLevel(level)) {
+		sendErrorResponse(response, 400, 'Invalid level');
+		return null;
+	}
+
+	return level;
+}

backend/src/controller/resetController.ts

@@ -1,51 +1,41 @@
 import { Response } from 'express';
 
-import { LevelGetRequest } from '@src/models/api/LevelGetRequest';
+import { getSandboxDocumentMetas } from '@src/document';
 import { LevelResetRequest } from '@src/models/api/LevelResetRequest';
+import { ProgressResetRequest } from '@src/models/api/ProgressResetRequest';
 import { defaultChatModel } from '@src/models/chat';
 import { ChatInfoMessage } from '@src/models/chatMessage';
-import {
-	LEVEL_NAMES,
-	getInitialLevelStates,
-	isValidLevel,
-} from '@src/models/level';
-
-function handleResetProgress(req: LevelGetRequest, res: Response) {
-	const { level } = req.query;
-
-	if (level === undefined) {
-		res.status(400).send('Level not provided');
-		return;
-	}
-
-	if (!isValidLevel(level)) {
-		res.status(400).send('Invalid level');
-		return;
-	}
-
-	console.debug('Resetting progress for all levels', req.session.levelState);
+import { LEVEL_NAMES, getInitialLevelStates } from '@src/models/level';
+
+import { validateLevel } from './requestValidators';
+
+function handleResetProgress(req: ProgressResetRequest, res: Response) {
+	const level = validateLevel(res, req.query.level);
+	if (level === null) return;
+
+	console.debug('Resetting progress for all levels');
 	req.session.levelState = getInitialLevelStates();
 	req.session.chatModel = defaultChatModel;
+
+	const chatModel =
+		level === LEVEL_NAMES.SANDBOX ? req.session.chatModel : undefined;
+	const availableDocs =
+		level === LEVEL_NAMES.SANDBOX ? getSandboxDocumentMetas() : undefined;
+
 	res.send({
 		emails: req.session.levelState[level].sentEmails,
 		chatHistory: req.session.levelState[level].chatHistory,
 		defences: req.session.levelState[level].defences,
-		chatModel:
-			level === LEVEL_NAMES.SANDBOX ? req.session.chatModel : undefined,
+		chatModel,
+		availableDocs,
 	});
 }
 
 function handleResetLevel(req: LevelResetRequest, res: Response) {
-	const { level: levelStr } = req.params;
-
-	const level = Number(levelStr) as LEVEL_NAMES;
-
-	if (!isValidLevel(level)) {
-		res.status(400).send('Invalid level');
-		return;
-	}
+	const level = validateLevel(res, Number(req.params.level) as LEVEL_NAMES);
+	if (level === null) return;
 
-	console.debug('Resetting progress for level ', level);
+	console.debug(`Resetting progress for level ${level}`);
 	req.session.levelState[level].chatHistory = [];
 	req.session.levelState[level].sentEmails = [];
 	res.send({

backend/src/controller/startController.ts

@@ -1,32 +1,28 @@
 import { Response } from 'express';
 
+import { getSandboxDocumentMetas } from '@src/document';
 import {
 	StartGetRequest,
 	StartResponse,
 } from '@src/models/api/StartGetRequest';
-import { LEVEL_NAMES, isValidLevel } from '@src/models/level';
+import { LEVEL_NAMES } from '@src/models/level';
 import { getValidOpenAIModels } from '@src/openai';
 import {
 	systemRoleLevel1,
 	systemRoleLevel2,
 	systemRoleLevel3,
 } from '@src/promptTemplates';
 
-import { sendErrorResponse } from './handleError';
+import { validateLevel } from './requestValidators';
 
 function handleStart(req: StartGetRequest, res: Response) {
-	const { level } = req.query;
-
-	if (level === undefined) {
-		sendErrorResponse(res, 400, 'Level not provided');
-		return;
-	}
-
-	if (!isValidLevel(level)) {
-		sendErrorResponse(res, 400, 'Invalid level');
-		return;
-	}
+	const level = validateLevel(res, req.query.level);
+	if (level === null) return;
 
+	const chatModel =
+		level === LEVEL_NAMES.SANDBOX ? req.session.chatModel : undefined;
+	const availableDocs =
+		level === LEVEL_NAMES.SANDBOX ? getSandboxDocumentMetas() : undefined;
 	const systemRoles = [
 		{ level: LEVEL_NAMES.LEVEL_1, systemRole: systemRoleLevel1 },
 		{ level: LEVEL_NAMES.LEVEL_2, systemRole: systemRoleLevel2 },
@@ -37,10 +33,10 @@ function handleStart(req: StartGetRequest, res: Response) {
 		emails: req.session.levelState[level].sentEmails,
 		chatHistory: req.session.levelState[level].chatHistory,
 		defences: req.session.levelState[level].defences,
+		chatModel,
+		availableDocs,
 		availableModels: getValidOpenAIModels(),
 		systemRoles,
-		chatModel:
-			level === LEVEL_NAMES.SANDBOX ? req.session.chatModel : undefined,
 	} as StartResponse);
 }
 

backend/src/document.ts

@@ -58,19 +58,16 @@ function getSandboxDocumentMetas() {
 	return [...getDocumentMetas('common'), ...getDocumentMetas('sandbox')];
 }
 
-function getDocumentMetas(folder: string) {
+function getDocumentMetas(folder: string): DocumentMeta[] {
 	const filepath = `resources/documents/${folder}`;
-	const documentMetas: DocumentMeta[] = [];
-
-	fs.readdirSync(filepath).forEach((file) => {
+	return fs.readdirSync(filepath).map((file) => {
 		const fileType = file.split('.').pop() ?? '';
-		documentMetas.push({
+		return {
 			fileName: file,
 			fileType: fileType === 'csv' ? 'text/csv' : fileType,
 			folder,
-		});
+		};
 	});
-	return documentMetas;
 }
 
 // store vectorised documents for each level as array

backend/src/models/api/LevelGetRequest.ts

@@ -3,6 +3,7 @@ import { Request } from 'express';
 import { ChatModel } from '@src/models/chat';
 import { ChatMessage } from '@src/models/chatMessage';
 import { Defence } from '@src/models/defence';
+import { DocumentMeta } from '@src/models/document';
 import { EmailInfo } from '@src/models/email';
 import { LEVEL_NAMES } from '@src/models/level';
 
@@ -13,6 +14,7 @@ export type LevelGetRequest = Request<
 		chatHistory: ChatMessage[];
 		defences: Defence[];
 		chatModel?: ChatModel;
+		availableDocs?: DocumentMeta[];
 	},
 	never,
 	{

backend/src/models/api/ProgressResetRequest.ts

@@ -0,0 +1,23 @@
+import { Request } from 'express';
+
+import { ChatModel } from '@src/models/chat';
+import { ChatMessage } from '@src/models/chatMessage';
+import { Defence } from '@src/models/defence';
+import { DocumentMeta } from '@src/models/document';
+import { EmailInfo } from '@src/models/email';
+import { LEVEL_NAMES } from '@src/models/level';
+
+export type ProgressResetRequest = Request<
+	never,
+	{
+		emails: EmailInfo[];
+		chatHistory: ChatMessage[];
+		defences?: Defence[];
+		chatModel?: ChatModel;
+		availableDocs?: DocumentMeta[];
+	},
+	never,
+	{
+		level?: LEVEL_NAMES;
+	}
+>;

backend/src/models/api/StartGetRequest.ts

@@ -3,6 +3,7 @@ import { Request } from 'express';
 import { ChatModel } from '@src/models/chat';
 import { ChatMessage } from '@src/models/chatMessage';
 import { Defence } from '@src/models/defence';
+import { DocumentMeta } from '@src/models/document';
 import { EmailInfo } from '@src/models/email';
 import { LEVEL_NAMES } from '@src/models/level';
 
@@ -16,6 +17,7 @@ export type StartResponse = {
 		systemRole: string;
 	}[];
 	chatModel?: ChatModel;
+	availableDocs?: DocumentMeta[];
 };
 
 export type StartGetRequest = Request<

backend/src/server/nonSessionRoutes.ts

@@ -1,7 +1,6 @@
 import express from 'express';
 import { fileURLToPath } from 'node:url';
 
-import { handleGetDocuments } from '@src/controller/documentController';
 import { handleHealthCheck } from '@src/controller/healthController';
 
 import { importMetaUrl } from './importMetaUtils';
@@ -20,5 +19,4 @@ export default express
 			}
 		)
 	)
-	.get('/documents', handleGetDocuments)
 	.get('/health', handleHealthCheck);

frontend/src/App.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useRef, useState, JSX } from 'react';
 
-import DocumentViewBox from './components/DocumentViewer/DocumentViewBox';
 import MainComponent from './components/MainComponent/MainComponent';
 import LevelsComplete from './components/Overlay/LevelsComplete';
 import MissionInformation from './components/Overlay/MissionInformation';
@@ -98,9 +97,6 @@ function App() {
 			/>
 		);
 	}
-	function openDocumentViewer() {
-		openOverlay(<DocumentViewBox closeOverlay={closeOverlay} />);
-	}
 
 	// set the start level for a user who clicks beginner/expert
 	function setStartLevel(startLevel: LEVEL_NAMES) {
@@ -123,7 +119,6 @@ function App() {
 				numCompletedLevels={numCompletedLevels}
 				closeOverlay={closeOverlay}
 				updateNumCompletedLevels={updateNumCompletedLevels}
-				openDocumentViewer={openDocumentViewer}
 				openOverlay={openOverlay}
 				openInformationOverlay={openInformationOverlay}
 				openLevelsCompleteOverlay={openLevelsCompleteOverlay}

frontend/src/components/DocumentViewer/DocumentViewBox.css

@@ -46,12 +46,19 @@
 .view-documents-main .document-viewer-container {
 	flex-grow: 1;
 	overflow-y: auto;
-	width: 32.5rem;
 	background-color: var(--document-viewer-background-colour);
 }
 
+.view-documents-main .document-viewer-container,
+.view-documents-main .loading,
 .view-documents-main .error-message {
-	width: 32.5rem;
+	width: 34rem;
+}
+
+.view-documents-main .loading {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 }
 
 @media (width < 87.5rem) {