Disable buttons for completed phase

backend/src/app.js

@@ -5,7 +5,6 @@ const cors = require("cors");
 const session = require("express-session");
 const { setOpenAiApiKey } = require("./openai");
 const { getInitialDefences } = require("./defence");
-const { getPhases } = require("./phase");
 
 dotenv.config();
 
@@ -61,8 +60,8 @@ app.use(function (req, res, next) {
  if (!req.session.gptModel) {
  req.session.gptModel = defaultModel;
  }
- if (!req.session.phases) {
- req.session.phases = getPhases();
+ if (!req.session.numPhasesCompleted) {
+ req.session.numPhasesCompleted = 0;
  }
  next();
 });

backend/src/router.js

@@ -11,12 +11,6 @@ const {
  setOpenAiApiKey,
  setGptModel,
 } = require("./openai");
-const {
- getCurrentPhase,
- switchCurrentPhase,
- getCompletedPhases,
- setPhaseCompleted,
-} = require("./phase");
 const router = express.Router();
 
 // Activate a defence
@@ -84,6 +78,11 @@ router.post("/openai/chat", async (req, res, next) => {
  let transformedMessage = "";
  // parse out the message
  const message = req.body?.message;
+ const currentPhase = req.body?.currentPhase;
+
+ // TODO remove, this is just for demonstration purposes
+ console.log("Current phase " + currentPhase);
+
  if (message) {
  transformedMessage = message;
  // see if this message triggers any defences
@@ -126,8 +125,21 @@ router.post("/openai/chat", async (req, res, next) => {
  reply = "Missing message";
  console.error(reply);
  }
+
+ // TODO remove, this is just for demonstration purposes
+ let numPhasesCompleted = req.session.numPhasesCompleted;
+ if (numPhasesCompleted < 3 && currentPhase === numPhasesCompleted) {
+ numPhasesCompleted = currentPhase + 1;
+ req.session.numPhasesCompleted = numPhasesCompleted;
+ }
+
  // construct response
- const response = { reply, defenceInfo, transformedMessage };
+ const response = {
+ reply,
+ defenceInfo,
+ transformedMessage,
+ numPhasesCompleted,
+ };
  // log and send the reply with defence info
  console.log(response);
  res.send(response);
@@ -174,34 +186,8 @@ router.get("/openai/model", (req, res, next) => {
  res.send(req.session.gptModel);
 });
 
-router.post("/phase/current", (req, res, next) => {
- const phase = req.body?.phase;
- if (phase) {
- req.session.phases = switchCurrentPhase(req.session, phase);
- res.status(200).send("Phase set to " + req.session.phases);
- } else {
- res.status(400).send("Missing phase");
- }
-});
-
-router.get("/phase/current", (req, res, next) => {
- res.send(getCurrentPhase(req.session));
-});
-
 router.get("/phase/completed", (req, res, next) => {
- res.send(getCompletedPhases(req.session));
-});
-
-router.post("/phase/completed", (req, res, next) => {
- const phase = req.body?.phase;
- if (phase) {
- req.session.phases = setPhaseCompleted(req.session, phase);
- res.send("Phase complete status set");
- } else {
- res.statusCode = 400;
- res.send("Missing phase");
- }
+ res.send(req.session.numPhasesCompleted.toString());
 });
 
-// Importing the router
 module.exports = router;

frontend/src/App.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-
+import { useEffect } from "react";
 import "./App.css";
 import AttackBox from "./components/AttackBox/AttackBox";
 import ChatBox from "./components/ChatBox/ChatBox";
@@ -12,13 +12,18 @@ import ModelSelectionBox from "./components/ModelSelectionBox/ModelSelectionBox"
 import { EmailInfo } from "./models/email";
 import { CHAT_MESSAGE_TYPE, ChatMessage } from "./models/chat";
 import { DefenceInfo } from "./models/defence";
+import { getCompletedPhases } from "./service/phaseService";
 
 function App() {
  const [defenceBoxKey, setDefenceBoxKey] = useState<number>(0);
  const [emails, setEmails] = useState<EmailInfo[]>([]);
  const [messages, setMessages] = useState<ChatMessage[]>([]);
  const [triggeredDefences, setTriggeredDefences] = useState<string[]>([]);
 
+ // start on sandbox mode
+ const [currentPhase, setCurrentPhase] = useState<number>(0);
+ const [numCompletedPhases, setNumCompletedPhases] = useState<number>(0);
+
  const updateTriggeredDefences = (defenceDetails: string[]) => {
  // set the new triggered defences
  setTriggeredDefences(defenceDetails);
@@ -51,6 +56,12 @@ function App() {
  const infoMessage = `${defenceInfo.name} defence deactivated`;
  addInfoMessage(infoMessage.toLowerCase());
  };
+ // called on mount
+ useEffect(() => {
+ getCompletedPhases().then((numCompletedPhases) => {
+ setNumCompletedPhases(numCompletedPhases);
+ });
+ }, []);
 
  return (
  <span id="main-area">
@@ -74,6 +85,8 @@ function App() {
  <Header />
  <ChatBox
  messages={messages}
+ currentPhase={currentPhase}
+ setNumCompletedPhases={setNumCompletedPhases}
  setEmails={setEmails}
  updateTriggeredDefences={updateTriggeredDefences}
  addChatMessage={addChatMessage}
@@ -82,7 +95,11 @@ function App() {
  </div>
  <div className="side-bar">
  <div className="side-bar-header">phases</div>
- <PhaseSelectionBox />
+ <PhaseSelectionBox
+ currentPhase={currentPhase}
+ numCompletedPhases={numCompletedPhases}
+ setCurrentPhase={setCurrentPhase}
+ />
  <div className="side-bar-header">sent emails</div>
  <EmailBox emails={emails} />
  </div>

frontend/src/Phases.ts

@@ -1,50 +1,34 @@
 import { Phase, PHASE_NAMES } from "./models/phase";
 
-const DEFAULT_SANDBOX_PHASE: Phase = new Phase(
- PHASE_NAMES.SANDBOX,
- 3,
- "app sandbox. ask the model questions and try get sensitive information",
- "preamble",
- "path_to_documents",
- false,
- true
-);
-
 const PHASES: Phase[] = [
- new Phase(
- PHASE_NAMES.PHASE_0,
- 0,
- "easy phase to see how to ask the model question and get answers",
- "preamble",
- "path_to_documents",
-  false,
-  false
- ),
- new Phase(
- PHASE_NAMES.PHASE_1,
- 1,
- "harder prompt to try and trick the model into telling you the secret",
-  "preamble",
-  "path_to_documents",
- false,
- false
- ),
- new Phase(
- PHASE_NAMES.PHASE_2,
-  2,
-  "even harder and you can use any feature on the app to try and trick the model into telling you the secret",
- "preamble",
- "path_to_documents",
- false,
- false
- ),
- DEFAULT_SANDBOX_PHASE,
+ {
+ id: PHASE_NAMES.PHASE_0,
+ name: "phase 0",
+ preamble: "preamble",
+ isComplete: false,
+ isCurrent: false,
+ },
+ {
+  id: PHASE_NAMES.PHASE_1,
+  name: "phase 1",
+ preamble: "preamble",
+ isComplete: false,
+ isCurrent: false,
+ },
+ {
+ id: PHASE_NAMES.PHASE_2,
+ name: "phase 2",
+  preamble: "preamble",
+  isComplete: false,
+ isCurrent: false,
+ },
+ {
+ id: PHASE_NAMES.SANDBOX,
+ name: "sandbox",
+ preamble: "preamble",
+ isComplete: false,
+  isCurrent: false,
+ },
 ];
 
-function getPhaseByName(phaseName: string): Phase {
- return (
- PHASES.find((phase) => phase.name === phaseName) || DEFAULT_SANDBOX_PHASE
- );
-}
-
-export { PHASES, getPhaseByName };
+export { PHASES };

frontend/src/components/ChatBox/ChatBox.tsx

@@ -14,12 +14,16 @@ function ChatBox(
  this: any,
  {
  messages,
+ currentPhase,
+ setNumCompletedPhases,
  setEmails,
  updateTriggeredDefences,
  addChatMessage,
  clearMessages,
  }: {
  messages: ChatMessage[];
+ currentPhase: number;
+ setNumCompletedPhases: (numCompletedPhases: number) => void;
  setEmails: (emails: EmailInfo[]) => void;
  updateTriggeredDefences: (defences: string[]) => void;
  addChatMessage: (message: ChatMessage) => void;
@@ -60,7 +64,8 @@ function ChatBox(
  // clear the input
  event.currentTarget.value = "";
 
- const response: ChatResponse = await sendMessage(message);
+ const response: ChatResponse = await sendMessage(message, currentPhase);
+ setNumCompletedPhases(response.numPhasesCompleted);
  const transformedMessage = response.transformedMessage;
  const isTransformed = transformedMessage !== message;
  // add the transformed message to the chat box if it is different from the original message