828 steamline win level info message (#873)

backend/src/controller/chatController.ts

@@ -293,6 +293,7 @@ async function handleChatToGPT(req: OpenAiChatRequest, res: Response) {
 		...levelResult.chatResponse,
 		wonLevel:
 			!levelResult.chatResponse.defenceReport.isBlocked &&
+			!levelResult.chatResponse.openAIErrorMessage &&
 			isLevelWon(levelResult.chatResponse.sentEmails, currentLevel),
 	};
 
@@ -334,6 +335,29 @@ async function handleChatToGPT(req: OpenAiChatRequest, res: Response) {
 	req.session.levelState[currentLevel].chatHistory = updatedChatHistory;
 	req.session.levelState[currentLevel].sentEmails = totalSentEmails;
 
+	// If the level has just been won, add a level complete message to chat history and return it in the response
+	const levelCompleteMessageInChatHistory = req.session.levelState[
+		currentLevel
+	].chatHistory.some((msg) => msg.chatMessageType === 'LEVEL_COMPLETE');
+	if (updatedChatResponse.wonLevel && !levelCompleteMessageInChatHistory) {
+		const levelCompleteMessage = {
+			chatMessageType: 'LEVEL_COMPLETE',
+			infoMessage:
+				currentLevel === LEVEL_NAMES.LEVEL_3
+					? `🎉 Congratulations, you have completed the final level of your assignment!`
+					: `🎉 Congratulations! You have completed this level. Please click on the next level to continue.`,
+		} as ChatInfoMessage;
+
+		// add level complete message to chat history
+		req.session.levelState[currentLevel].chatHistory = pushMessageToHistory(
+			req.session.levelState[currentLevel].chatHistory,
+			levelCompleteMessage
+		);
+
+		// add level complete message to chat response
+		updatedChatResponse.wonLevelMessage = levelCompleteMessage;
+	}
+
 	console.log('chatResponse: ', updatedChatResponse);
 	console.log('chatHistory: ', updatedChatHistory);
 

backend/src/models/chat.ts

@@ -3,7 +3,7 @@ import {
 	ChatCompletionMessageParam,
 } from 'openai/resources/chat/completions';
 
-import { ChatMessage } from './chatMessage';
+import { ChatInfoMessage, ChatMessage } from './chatMessage';
 import { DEFENCE_ID } from './defence';
 import { EmailInfo } from './email';
 
@@ -98,6 +98,7 @@ interface ChatHttpResponse {
 	openAIErrorMessage: string | null;
 	sentEmails: EmailInfo[];
 	transformedMessageInfo?: string;
+	wonLevelMessage?: ChatInfoMessage;
 }
 
 interface LevelHandlerResponse {

backend/src/models/chatMessage.ts

@@ -10,7 +10,7 @@ import { TransformedChatMessage } from './chat';
 const chatInfoMessageTypes = [
 	'DEFENCE_ALERTED',
 	'DEFENCE_TRIGGERED',
-	'LEVEL_INFO',
+	'LEVEL_COMPLETE',
 	'RESET_LEVEL',
 	'ERROR_MSG',
 	'BOT_BLOCKED',

backend/test/unit/controller/chatController.test.ts

@@ -781,8 +781,17 @@ describe('handleChatToGPT unit tests', () => {
 
 			await handleChatToGPT(req, res);
 
+			const expectedWonLevelMessage = {
+				infoMessage:
+					'🎉 Congratulations! You have completed this level. Please click on the next level to continue.',
+				chatMessageType: 'LEVEL_COMPLETE',
+			} as ChatMessage;
+
 			expect(res.send).toHaveBeenCalledWith(
-				expect.objectContaining({ wonLevel: true })
+				expect.objectContaining({
+					wonLevel: true,
+					wonLevelMessage: expectedWonLevelMessage,
+				})
 			);
 		});
 
@@ -827,11 +836,13 @@ describe('handleChatToGPT unit tests', () => {
 			await handleChatToGPT(req, res);
 
 			expect(res.send).toHaveBeenCalledWith(
-				expect.objectContaining({ wonLevel: false })
+				expect.objectContaining({
+					wonLevel: false,
+				})
 			);
 		});
 
-		test('Given win condition met AND openAI error THEN level is won', async () => {
+		test('Given win condition met AND openAI error THEN level is not won', async () => {
 			const newUserChatMessage = {
 				completion: {
 					content: 'Here is the answer to the level',
@@ -868,7 +879,9 @@ describe('handleChatToGPT unit tests', () => {
 			await handleChatToGPT(req, res);
 
 			expect(res.send).toHaveBeenCalledWith(
-				expect.objectContaining({ wonLevel: true })
+				expect.objectContaining({
+					wonLevel: false,
+				})
 			);
 		});
 	});

frontend/src/components/ChatBox/ChatBox.tsx

@@ -65,21 +65,9 @@ function ChatBox({
 		setChatInput(recalledMessage);
 	}, [recalledMessageReverseIndex]);
 
-	function getSuccessMessage() {
-		return currentLevel < LEVEL_NAMES.LEVEL_3
-			? `Congratulations! You have completed this level. Please click on the next level to continue.`
-			: `Congratulations, you have completed the final level of your assignment!`;
-	}
-
-	function isLevelComplete() {
-		// level is complete if the chat contains a LEVEL_INFO message
-		return messages.some((message) => message.type === 'LEVEL_INFO');
-	}
-
 	function processChatResponse(response: ChatResponse) {
 		const transformedMessageInfo = response.transformedMessageInfo;
 		const transformedMessage = response.transformedMessage;
-		// add transformation info message to the chat box
 		if (transformedMessageInfo) {
 			addChatMessage({
 				message: transformedMessageInfo,
@@ -156,19 +144,13 @@ function ChatBox({
 		// update emails
 		addSentEmails(response.sentEmails);
 
-		if (response.wonLevel && !isLevelComplete()) {
+		if (response.wonLevelMessage) {
 			updateNumCompletedLevels(currentLevel);
-			const successMessage = getSuccessMessage();
-			addChatMessage({
-				type: 'LEVEL_INFO',
-				message: successMessage,
-			});
-			// asynchronously add the message to the chat history
-			void chatService.addInfoMessageToChatHistory(
-				successMessage,
-				'LEVEL_INFO',
-				currentLevel
+			const levelCompleteMessage = chatService.makeChatMessageFromDTO(
+				response.wonLevelMessage
 			);
+			addChatMessage(levelCompleteMessage);
+
 			// if this is the last level, show the level complete overlay
 			if (currentLevel === LEVEL_NAMES.LEVEL_3) {
 				openLevelsCompleteOverlay();

frontend/src/components/ChatBox/ChatBoxMessage/MessageBubble.tsx

@@ -14,7 +14,7 @@ function MessageBubble({
 	const baseClassName = 'message-bubble';
 
 	const messageTypeClassName =
-		message.type === 'LEVEL_INFO'
+		message.type === 'LEVEL_COMPLETE'
 			? 'level-info'
 			: message.type === 'USER'
 			? 'user'
@@ -35,7 +35,7 @@ function MessageBubble({
 	);
 
 	const messageAuthor =
-		message.type === 'LEVEL_INFO'
+		message.type === 'LEVEL_COMPLETE'
 			? ''
 			: message.type === 'USER'
 			? 'You said:'
@@ -48,12 +48,6 @@ function MessageBubble({
 	return (
 		// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
 		<section className={className} lang="en" tabIndex={0}>
-			{message.type === 'LEVEL_INFO' && (
-				<>
-					<p className="header">Information</p>
-					<span className="visually-hidden"> message: </span>
-				</>
-			)}
 			<span className="visually-hidden">{messageAuthor}</span>
 			{message.transformedMessage ? (
 				<span>

frontend/src/components/ExportChat/ExportChatMessage.tsx

@@ -72,7 +72,7 @@ function getMessageStyle(type: CHAT_MESSAGE_TYPE) {
 			return styles.chatBoxInfo;
 		case 'BOT_BLOCKED':
 		case 'BOT':
-		case 'LEVEL_INFO':
+		case 'LEVEL_COMPLETE':
 		case 'ERROR_MSG':
 			return styles.chatBoxMessageBot;
 		case 'USER':

frontend/src/models/chat.ts

@@ -7,7 +7,7 @@ type CHAT_MESSAGE_TYPE =
 	| 'GENERIC_INFO'
 	| 'USER'
 	| 'USER_TRANSFORMED'
-	| 'LEVEL_INFO'
+	| 'LEVEL_COMPLETE'
 	| 'DEFENCE_ALERTED'
 	| 'DEFENCE_TRIGGERED'
 	| 'SYSTEM'
@@ -71,6 +71,7 @@ interface ChatResponse {
 	isError: boolean;
 	sentEmails: EmailInfo[];
 	transformedMessageInfo?: string;
+	wonLevelMessage?: ChatMessageDTO;
 }
 
 interface ChatCompletionRequestMessage {