423 move system role from bot message to handbook (#437)

* move system role to a page in handbook * format
ScottLogic · Oct 23, 2023 · 63c76bb · 63c76bb
1 parent 3638a85
commit 63c76bb
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 31 deletions.
diff --git a/frontend/src/components/ChatBox/ChatBox.tsx b/frontend/src/components/ChatBox/ChatBox.tsx
@@ -12,7 +12,6 @@ import {
   sendMessage,
 } from "../../service/chatService";
 import { getSentEmails } from "../../service/emailService";
-import { getLevelPrompt } from "../../service/levelService";
 import ExportPDFLink from "../ExportChat/ExportPDFLink";
 import ThemedButton from "../ThemedButtons/ThemedButton";
 import LoadingButton from "../ThemedButtons/LoadingButton";
@@ -94,13 +93,8 @@ function ChatBox({
     }
   }
 
-  async function getSuccessMessage(level: number) {
-    const prompt = await getLevelPrompt(level);
-    return `Congratulations! You have completed this level. My original instructions were: 
-    
-    ${prompt}
-
-    Please click on the next level to continue.`;
+  function getSuccessMessage() {
+    return `Congratulations! You have completed this level. Please click on the next level to continue.`;
   }
 
   async function sendChatMessage() {
@@ -193,22 +187,17 @@ function ChatBox({
 
       if (response.wonLevel && !completedLevels.has(currentLevel)) {
         addCompletedLevel(currentLevel);
-        getSuccessMessage(currentLevel)
-          .then((successMessage) => {
-            addChatMessage({
-              type: CHAT_MESSAGE_TYPE.LEVEL_INFO,
-              message: successMessage,
-            });
-            // asynchronously add the message to the chat history
-            void addMessageToChatHistory(
-              successMessage,
-              CHAT_MESSAGE_TYPE.LEVEL_INFO,
-              currentLevel
-            );
-          })
-          .catch((err) => {
-            console.log(err);
-          });
+        const successMessage = getSuccessMessage();
+        addChatMessage({
+          type: CHAT_MESSAGE_TYPE.LEVEL_INFO,
+          message: successMessage,
+        });
+        // asynchronously add the message to the chat history
+        void addMessageToChatHistory(
+          successMessage,
+          CHAT_MESSAGE_TYPE.LEVEL_INFO,
+          currentLevel
+        );
       }
     }
   }

diff --git a/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx b/frontend/src/components/HandbookOverlay/HandbookOverlay.tsx
@@ -1,23 +1,45 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { LEVEL_NAMES } from "../../models/level";
 import MissionInformation from "../Overlay/MissionInformation";
 import HandbookAttacks from "./HandbookAttacks";
 import HandbookOverlayTabs from "./HandbookOverlayTabs";
 import { HANDBOOK_PAGES, handbookPageNames } from "../../models/handbook";
 import "./HandbookOverlay.css";
 import HandbookGlossary from "./HandbookGlossary";
+import HandbookSystemRole from "./HandbookSystemRole";
+import { getLevelPrompt } from "../../service/levelService";
 
 function HandbookOverlay({ currentLevel }: { currentLevel: LEVEL_NAMES }) {
   const [selectedPage, setSelectedPage] = useState<HANDBOOK_PAGES>(
     HANDBOOK_PAGES.MISSION_INFO
   );
+  const [levelSystemRole, setLevelSystemRole] = useState<string>("");
+
+  // update system role when currentLevel changes to display in handbook
+  useEffect(() => {
+    if (
+      currentLevel > LEVEL_NAMES.LEVEL_1 &&
+      currentLevel < LEVEL_NAMES.SANDBOX
+    ) {
+      getLevelPrompt(currentLevel - 1)
+        .then((prompt) => {
+          setLevelSystemRole(prompt);
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    }
+  }, [currentLevel]);
 
   const pageContent = {
     [HANDBOOK_PAGES.MISSION_INFO]: (
       <MissionInformation currentLevel={currentLevel} />
     ),
     [HANDBOOK_PAGES.ATTACKS]: <HandbookAttacks currentLevel={currentLevel} />,
     [HANDBOOK_PAGES.GLOSSARY]: <HandbookGlossary />,
+    [HANDBOOK_PAGES.SYSTEM_ROLE]: (
+      <HandbookSystemRole level={currentLevel} systemRole={levelSystemRole} />
+    ),
   }[selectedPage];
 
   return (

diff --git a/frontend/src/components/HandbookOverlay/HandbookOverlayTabs.tsx b/frontend/src/components/HandbookOverlay/HandbookOverlayTabs.tsx
@@ -11,15 +11,15 @@ function HandbookOverlayTabs({
   currentPage: HANDBOOK_PAGES;
   selectPage: (page: HANDBOOK_PAGES) => void;
 }) {
-  // the tabs that are shown depend on the current level
+  // the tabs that are shown depend on the current level (only show system role in leves 2 & 3)
   const tabs =
-    currentLevel === LEVEL_NAMES.LEVEL_1
-      ? [HANDBOOK_PAGES.MISSION_INFO, HANDBOOK_PAGES.GLOSSARY]
-      : [
-          HANDBOOK_PAGES.MISSION_INFO,
+    currentLevel > LEVEL_NAMES.LEVEL_1 && currentLevel < LEVEL_NAMES.SANDBOX
+      ? [
           HANDBOOK_PAGES.GLOSSARY,
           HANDBOOK_PAGES.ATTACKS,
-        ];
+          HANDBOOK_PAGES.SYSTEM_ROLE,
+        ]
+      : [HANDBOOK_PAGES.GLOSSARY, HANDBOOK_PAGES.ATTACKS];
 
   return (
     <div className="handbook-tabs" role="tablist">

diff --git a/frontend/src/components/HandbookOverlay/HandbookSystemRole.tsx b/frontend/src/components/HandbookOverlay/HandbookSystemRole.tsx
@@ -0,0 +1,18 @@
+import { LEVEL_NAMES } from "../../models/level";
+
+function HandbookSystemRole({
+  level,
+  systemRole,
+}: {
+  level: LEVEL_NAMES;
+  systemRole: string;
+}) {
+  return (
+    <div className="system-role-layout">
+      <h1> System Role for Level {level.valueOf()}</h1>
+      <p> {systemRole} </p>
+    </div>
+  );
+}
+
+export default HandbookSystemRole;
diff --git a/frontend/src/models/handbook.ts b/frontend/src/models/handbook.ts
@@ -2,12 +2,14 @@ enum HANDBOOK_PAGES {
   MISSION_INFO,
   ATTACKS,
   GLOSSARY,
+  SYSTEM_ROLE,
 }
 
 const handbookPageNames: { [key in HANDBOOK_PAGES]: string } = {
   [HANDBOOK_PAGES.MISSION_INFO]: "Mission",
   [HANDBOOK_PAGES.ATTACKS]: "Attacks",
   [HANDBOOK_PAGES.GLOSSARY]: "Glossary",
+  [HANDBOOK_PAGES.SYSTEM_ROLE]: "System Role",
 };
 
 export { HANDBOOK_PAGES, handbookPageNames };