839 optionally return chat model in start controller and level contro…

…ller (#858) * return chatModel in level and start controllers * removes getModel endpoint * frontend start and leveServices now get the chatModel from the response * save chatModel in MainComponent * chatModel is drilled down to the components that need it * now sets the chatModelId so that the message updates * change a null to an undefined for brevity * remove old comment * remove getModel method from chatService * changes chatModel in LevelGetRequest to be optional * conditionally render the chat model selection * move default configs out of function * wraps comment line * improve config update method
ScottLogic · Apr 8, 2024 · 8d5eee1 · 8d5eee1
1 parent 06d9650
commit 8d5eee1
Show file tree

Hide file tree

Showing 17 changed files with 194 additions and 155 deletions.
diff --git a/backend/src/controller/levelController.ts b/backend/src/controller/levelController.ts
@@ -1,7 +1,7 @@
 import { Response } from 'express';
 
 import { LevelGetRequest } from '@src/models/api/LevelGetRequest';
-import { isValidLevel } from '@src/models/level';
+import { LEVEL_NAMES, isValidLevel } from '@src/models/level';
 
 function handleLoadLevel(req: LevelGetRequest, res: Response) {
 	const { level } = req.query;
@@ -20,6 +20,8 @@ function handleLoadLevel(req: LevelGetRequest, res: Response) {
 		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,
 	});
 }
 

diff --git a/backend/src/controller/modelController.ts b/backend/src/controller/modelController.ts
@@ -1,6 +1,5 @@
 import { Response } from 'express';
 
-import { OpenAIGetModelRequest } from '@src/models/api/OpenAIGetModelRequest';
 import { OpenAiConfigureModelRequest } from '@src/models/api/OpenAiConfigureModelRequest';
 import { OpenAiSetModelRequest } from '@src/models/api/OpenAiSetModelRequest';
 import { MODEL_CONFIG } from '@src/models/chat';
@@ -32,8 +31,4 @@ function handleConfigureModel(req: OpenAiConfigureModelRequest, res: Response) {
 	}
 }
 
-function handleGetModel(req: OpenAIGetModelRequest, res: Response) {
-	res.send(req.session.chatModel);
-}
-
-export { handleSetModel, handleConfigureModel, handleGetModel };
+export { handleSetModel, handleConfigureModel };
diff --git a/backend/src/controller/startController.ts b/backend/src/controller/startController.ts
@@ -39,6 +39,8 @@ function handleStart(req: StartGetRequest, res: Response) {
 		defences: req.session.levelState[level].defences,
 		availableModels: getValidOpenAIModels(),
 		systemRoles,
+		chatModel:
+			level === LEVEL_NAMES.SANDBOX ? req.session.chatModel : undefined,
 	} as StartResponse);
 }
 

diff --git a/backend/src/models/api/LevelGetRequest.ts b/backend/src/models/api/LevelGetRequest.ts
@@ -1,5 +1,6 @@
 import { Request } from 'express';
 
+import { ChatModel } from '@src/models/chat';
 import { ChatMessage } from '@src/models/chatMessage';
 import { Defence } from '@src/models/defence';
 import { EmailInfo } from '@src/models/email';
@@ -11,6 +12,7 @@ export type LevelGetRequest = Request<
 		emails: EmailInfo[];
 		chatHistory: ChatMessage[];
 		defences: Defence[];
+		chatModel?: ChatModel;
 	},
 	never,
 	{

diff --git a/backend/src/models/api/OpenAIGetModelRequest.ts b/backend/src/models/api/OpenAIGetModelRequest.ts
diff --git a/backend/src/models/api/StartGetRequest.ts b/backend/src/models/api/StartGetRequest.ts
@@ -1,5 +1,6 @@
 import { Request } from 'express';
 
+import { ChatModel } from '@src/models/chat';
 import { ChatMessage } from '@src/models/chatMessage';
 import { Defence } from '@src/models/defence';
 import { EmailInfo } from '@src/models/email';
@@ -14,6 +15,7 @@ export type StartResponse = {
 		level: LEVEL_NAMES;
 		systemRole: string;
 	}[];
+	chatModel?: ChatModel;
 };
 
 export type StartGetRequest = Request<

diff --git a/backend/src/sessionRoutes.ts b/backend/src/sessionRoutes.ts
@@ -18,7 +18,6 @@ import { handleClearEmails } from './controller/emailController';
 import { handleLoadLevel } from './controller/levelController';
 import {
 	handleConfigureModel,
-	handleGetModel,
 	handleSetModel,
 } from './controller/modelController';
 import { handleResetProgress } from './controller/resetController';
@@ -102,7 +101,6 @@ router.post('/openai/addInfoToHistory', handleAddInfoToChatHistory);
 router.post('/openai/clear', handleClearChatHistory);
 
 // model configurations
-router.get('/openai/model', handleGetModel);
 router.post('/openai/model', handleSetModel);
 router.post('/openai/model/configure', handleConfigureModel);
 

diff --git a/frontend/src/components/ControlPanel/ControlPanel.tsx b/frontend/src/components/ControlPanel/ControlPanel.tsx
@@ -2,6 +2,7 @@ import { DEFENCES_HIDDEN_LEVEL3_IDS, MODEL_DEFENCES } from '@src/Defences';
 import DefenceBox from '@src/components/DefenceBox/DefenceBox';
 import DocumentViewButton from '@src/components/DocumentViewer/DocumentViewButton';
 import ModelBox from '@src/components/ModelBox/ModelBox';
+import { ChatModel } from '@src/models/chat';
 import {
 	DEFENCE_ID,
 	DefenceConfigItem,
@@ -15,6 +16,8 @@ import './ControlPanel.css';
 function ControlPanel({
 	currentLevel,
 	defences,
+	chatModel,
+	setChatModelId,
 	chatModelOptions,
 	toggleDefence,
 	resetDefenceConfiguration,
@@ -24,6 +27,8 @@ function ControlPanel({
 }: {
 	currentLevel: LEVEL_NAMES;
 	defences: Defence[];
+	chatModel?: ChatModel;
+	setChatModelId: (modelId: string) => void;
 	chatModelOptions: string[];
 	toggleDefence: (defence: Defence) => void;
 	resetDefenceConfiguration: (
@@ -94,6 +99,8 @@ function ControlPanel({
 						{/* only show model box in sandbox mode */}
 						{showConfigurations && (
 							<ModelBox
+								chatModel={chatModel}
+								setChatModelId={setChatModelId}
 								chatModelOptions={chatModelOptions}
 								addInfoMessage={addInfoMessage}
 							/>

diff --git a/frontend/src/components/MainComponent/MainBody.tsx b/frontend/src/components/MainComponent/MainBody.tsx
@@ -1,7 +1,7 @@
 import ChatBox from '@src/components/ChatBox/ChatBox';
 import ControlPanel from '@src/components/ControlPanel/ControlPanel';
 import EmailBox from '@src/components/EmailBox/EmailBox';
-import { ChatMessage } from '@src/models/chat';
+import { ChatMessage, ChatModel } from '@src/models/chat';
 import {
 	DEFENCE_ID,
 	DefenceConfigItem,
@@ -18,7 +18,9 @@ function MainBody({
 	defences,
 	emails,
 	messages,
+	chatModel,
 	chatModels,
+	setChatModelId,
 	addChatMessage,
 	addInfoMessage,
 	addSentEmails,
@@ -34,6 +36,8 @@ function MainBody({
 	defences: Defence[];
 	emails: EmailInfo[];
 	messages: ChatMessage[];
+	chatModel?: ChatModel;
+	setChatModelId: (modelId: string) => void;
 	chatModels: string[];
 	addChatMessage: (message: ChatMessage) => void;
 	addInfoMessage: (message: string) => void;
@@ -59,6 +63,8 @@ function MainBody({
 				<ControlPanel
 					currentLevel={currentLevel}
 					defences={defences}
+					chatModel={chatModel}
+					setChatModelId={setChatModelId}
 					chatModelOptions={chatModels}
 					toggleDefence={toggleDefence}
 					resetDefenceConfiguration={resetDefenceConfiguration}

diff --git a/frontend/src/components/MainComponent/MainComponent.tsx b/frontend/src/components/MainComponent/MainComponent.tsx
@@ -4,7 +4,7 @@ import { DEFAULT_DEFENCES } from '@src/Defences';
 import HandbookOverlay from '@src/components/HandbookOverlay/HandbookOverlay';
 import LevelMissionInfoBanner from '@src/components/LevelMissionInfoBanner/LevelMissionInfoBanner';
 import ResetLevelOverlay from '@src/components/Overlay/ResetLevel';
-import { ChatMessage } from '@src/models/chat';
+import { ChatMessage, ChatModel } from '@src/models/chat';
 import {
 	DEFENCE_ID,
 	DefenceConfigItem,
@@ -58,6 +58,7 @@ function MainComponent({
 	const [emails, setEmails] = useState<EmailInfo[]>([]);
 	const [chatModels, setChatModels] = useState<string[]>([]);
 	const [systemRoles, setSystemRoles] = useState<LevelSystemRole[]>([]);
+	const [chatModel, setChatModel] = useState<ChatModel | undefined>(undefined);
 
 	const isFirstRender = useRef(true);
 
@@ -81,11 +82,23 @@ function MainComponent({
 
 	async function loadBackendData() {
 		try {
-			const { availableModels, defences, emails, chatHistory, systemRoles } =
-				await startService.start(currentLevel);
+			const {
+				availableModels,
+				defences,
+				emails,
+				chatHistory,
+				systemRoles,
+				chatModel,
+			} = await startService.start(currentLevel);
 			setChatModels(availableModels);
 			setSystemRoles(systemRoles);
-			processBackendLevelData(currentLevel, emails, chatHistory, defences);
+			processBackendLevelData(
+				currentLevel,
+				emails,
+				chatHistory,
+				defences,
+				chatModel
+			);
 		} catch (err) {
 			console.warn(err);
 			setMessages([
@@ -152,17 +165,17 @@ function MainComponent({
 
 	// for going switching level without clearing progress
 	async function setNewLevel(newLevel: LEVEL_NAMES) {
-		const { emails, chatHistory, defences } = await levelService.loadLevel(
-			newLevel
-		);
-		processBackendLevelData(newLevel, emails, chatHistory, defences);
+		const { emails, chatHistory, defences, chatModel } =
+			await levelService.loadLevel(newLevel);
+		processBackendLevelData(newLevel, emails, chatHistory, defences, chatModel);
 	}
 
 	function processBackendLevelData(
 		level: LEVEL_NAMES,
 		emails: EmailInfo[],
 		chatHistory: ChatMessage[],
-		defences: Defence[]
+		defences: Defence[],
+		chatModel?: ChatModel
 	) {
 		setEmails(emails);
 
@@ -172,6 +185,9 @@ function MainComponent({
 			: setMessages(chatHistory);
 
 		setDefences(defences);
+
+		// we will only update the chatModel if it is defined in the backend response. It will only defined for the sandbox level.
+		setChatModel(chatModel);
 		setMainBodyKey(MainBodyKey + 1);
 	}
 
@@ -289,6 +305,16 @@ function MainComponent({
 		setMessages((messages: ChatMessage[]) => [resetMessage, ...messages]);
 	}
 
+	function setChatModelId(modelId: string) {
+		if (!chatModel) {
+			console.error(
+				'You are trying to change the id of the chatModel but it has not been loaded yet'
+			);
+			return;
+		}
+		setChatModel({ ...chatModel, id: modelId });
+	}
+
 	return (
 		<div className="main-component">
 			<MainHeader
@@ -311,6 +337,8 @@ function MainComponent({
 				key={MainBodyKey}
 				currentLevel={currentLevel}
 				defences={defences}
+				chatModel={chatModel}
+				setChatModelId={setChatModelId}
 				chatModels={chatModels}
 				emails={emails}
 				messages={messages}

diff --git a/frontend/src/components/ModelBox/ModelBox.tsx b/frontend/src/components/ModelBox/ModelBox.tsx
@@ -1,22 +1,33 @@
+import { ChatModel } from '@src/models/chat';
+
 import ModelConfiguration from './ModelConfiguration';
 import ModelSelection from './ModelSelection';
 
 import './ModelBox.css';
 
 function ModelBox({
+	chatModel,
+	setChatModelId,
 	chatModelOptions,
 	addInfoMessage,
 }: {
+	chatModel?: ChatModel;
+	setChatModelId: (modelId: string) => void;
 	chatModelOptions: string[];
 	addInfoMessage: (message: string) => void;
 }) {
 	return (
 		<div className="model-box">
 			<ModelSelection
+				chatModel={chatModel}
+				setChatModelId={setChatModelId}
 				chatModelOptions={chatModelOptions}
 				addInfoMessage={addInfoMessage}
 			/>
-			<ModelConfiguration addInfoMessage={addInfoMessage} />
+			<ModelConfiguration
+				chatModel={chatModel}
+				addInfoMessage={addInfoMessage}
+			/>
 		</div>
 	);
 }