190 UI left side bar

frontend/src/App.css

@@ -4,9 +4,12 @@
   flex-direction: column;
 }
 
+#app-content-header {
+  height: 10%;
+}
+
 #app-content-body {
-  height: 50%;
-  flex-grow: 1;
+  height: 90%;
 }
 
 #root {
@@ -53,7 +56,7 @@
 
 .prompt-injection-input {
   background-color: var(--main-input-background-colour);
-  border-color: var(--main-border-colour);
+  border-color: none;
   border-radius: 5px;
   border-style: solid;
   border-width: 1px;

frontend/src/App.tsx

@@ -6,7 +6,6 @@ import { useEffect, useState } from "react";
 import { PHASE_NAMES } from "./models/phase";
 import {
   getChatHistory,
-  addMessageToChatHistory,
   clearChat,
 } from "./service/chatService";
 import { EmailInfo } from "./models/email";
@@ -28,7 +27,6 @@ function App() {
   const [defencesToShow, setDefencesToShow] =
     useState<DefenceInfo[]>(DEFENCE_DETAILS_ALL);
 
-  const [triggeredDefences, setTriggeredDefences] = useState<string[]>([]);
   const [emails, setEmails] = useState<EmailInfo[]>([]);
   const [messages, setMessages] = useState<ChatMessage[]>([]);
 
@@ -61,7 +59,6 @@ function App() {
       setEmails([]);
     });
     resetActiveDefences(currentPhase).then(() => {
-      setTriggeredDefences([]);
       // choose appropriate defences to display
       let defences =
         currentPhase === PHASE_NAMES.PHASE_2
@@ -96,7 +93,7 @@ function App() {
       setMessages(phaseChatHistory);
     });
 
-    let defences =
+    const defences =
       newPhase === PHASE_NAMES.PHASE_2
         ? DEFENCE_DETAILS_PHASE
         : DEFENCE_DETAILS_ALL;

frontend/src/Theme.css

@@ -1,6 +1,8 @@
 :root {
+  --header-background-colour: #101010;
+
   --main-accent-colour: #1FD07B;
-  --main-background-colour: #101010;
+  --main-background-colour: #252525;
   --main-border-colour: var(--main-accent-colour);
   --main-error-colour: #cc3c3c;
   --main-text-colour: #fff;
@@ -19,6 +21,10 @@
   --main-input-background-colour: var(--main-button-inactive-background-colour);
   --main-input-text-colour: var(--main-button-inactive-text-colour);
 
+  --main-toggle-ball-colour: #ECECEC;
+  --main-toggle-off-colour: #ABABAB;
+  --main-toggle-on-colour: var(--main-accent-colour);
+
   --chat-bot-colour: #D482FB;
   --chat-bot-background: linear-gradient(var(--chat-bot-colour), #F3DBFE);
   --chat-blocked-colour: var(--main-error-colour);

frontend/src/components/AttackBox/AttackBox.tsx

@@ -5,7 +5,7 @@ import { AttackInfo } from "../../models/attack";
 function AttackBox({ attacks }: { attacks: AttackInfo[] }) {
   return (
     <div id="strategy-box">
-      <div className="side-bar-header">attack mechanisms</div>
+      <div className="side-bar-header">Attacks</div>
       {attacks.map((attack) => {
         return <AttackMechanism key={attack.id} attack={attack} />;
       })}

frontend/src/components/ChatBox/ChatBox.tsx

@@ -18,21 +18,22 @@ import { DEFENCE_DETAILS_ALL } from "../../Defences";
 function ChatBox(
   {
     messages,
+    completedPhases,
     currentPhase,
     addChatMessage,
-    resetPhase,
+    addCompletedPhase,
     setNumCompletedPhases,
     setEmails,
   }: {
     messages: ChatMessage[];
+    completedPhases: Set<PHASE_NAMES>;
     currentPhase: PHASE_NAMES;
     addChatMessage: (message: ChatMessage) => void;
-    resetPhase: () => void;
+    addCompletedPhase: (phase: PHASE_NAMES) => void;
     setNumCompletedPhases: (numCompletedPhases: number) => void;
     setEmails: (emails: EmailInfo[]) => void;
   }
 ) {
-  const [completedPhases, setCompletedPhases] = useState<Set<PHASE_NAMES>>(new Set());
   const [isSendingMessage, setIsSendingMessage] = useState<boolean>(false);
 
   // called on mount
@@ -49,12 +50,6 @@ function ChatBox(
     }
   }
 
-  function resetButtonPressed() {
-    completedPhases.delete(currentPhase);
-    setCompletedPhases(completedPhases);
-    resetPhase();
-  }
-
   async function sendChatMessage() {
     const inputBoxElement = document.getElementById(
       "chat-box-input"
@@ -144,7 +139,7 @@ function ChatBox(
       setEmails(sentEmails);
 
       if (response.wonPhase && !completedPhases.has(currentPhase)) {
-        setCompletedPhases(completedPhases.add(currentPhase));
+        addCompletedPhase(currentPhase);
         const successMessage =
           "Congratulations! You have completed this phase. Please click on the next phase to continue.";
         addChatMessage({
@@ -180,15 +175,6 @@ function ChatBox(
             Send
           </button>
         </div>
-        <div id="chat-box-footer-reset">
-          <button
-            id="chat-box-button-reset"
-            className="prompt-injection-button"
-            onClick={resetButtonPressed}
-          >
-            Reset phase
-          </button>
-        </div>
       </div>
     </div>
   );

frontend/src/components/DefenceBox/DefenceBox.tsx

@@ -113,7 +113,7 @@ function DefenceBox({
 
   return (
     <div id="strategy-box">
-      <div className="side-bar-header">defence mechanisms</div>
+      <div className="side-bar-header">Defences</div>
       {defenceDetails.map((defenceDetail, index) => {
         return (
           <DefenceMechanism

frontend/src/components/DefenceBox/DefenceConfiguration.css

@@ -1,9 +1,6 @@
 .defence-config-value {
-  border-color: var(--main-border-colour);
-  border-radius: 5px;
-  border-style: solid;
-  border-width: 1px;
+  background-color: var(--main-background-colour);
   font-size: 14px;
   padding: 2px 4px;
   margin: 4px 0px;
-}
+}

frontend/src/components/DefenceBox/DefenceConfiguration.tsx

@@ -23,7 +23,7 @@ function DefenceConfiguration(
     <div>
       <span className="defence-config-name">{config.name}: </span>
       <ContentEditable
-        className="defence-config-value"
+        className="defence-config-value prompt-injection-input"
         html={config.value.toString()}
         onKeyUp={setConfiguration.bind(this)}
         onClick={(event) => event.stopPropagation()}

frontend/src/components/DefenceBox/DefenceMechanism.css

@@ -1,21 +1,4 @@
-.defence-active {
-  background-color: var(--main-button-active-background-colour);
-}
-
-.defence-active:hover {
-  background-color: var(--main-button-active-background-colour);
-}
-
-.defence-mechanism:hover {
-  border-width: 2px;
-  margin: 0px;
-  margin-bottom: 7px;
-}
-
 .defence-mechanism-config {
-  border-color: var(--main-border-colour);
-  border-style: solid;
-  border-width: 1px 0 0 0;
   font-size: 14px;
   margin-top: 4px;
 }
@@ -30,26 +13,67 @@
   font-weight: 600;
 }
 
-@keyframes flash-red-active {
-  0% {
-    background-color: #eef;
-  }
-  50% {
-    background-color: #fdd;
-  }
-  100% {
-    background-color: #eef;
-  }
-}
-
-@keyframes flash-red-inactive {
-  0% {
-    background-color: #fff;
-  }
-  50% {
-    background-color: #fdd;
-  }
-  100% {
-    background-color: #fff;
-  }
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 29px;
+  height: 13px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--main-toggle-off-colour);
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 13px;
+  width: 13px;
+  background-color: var(--main-toggle-ball-colour);
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked+.slider {
+  background-color: var(--main-toggle-on-colour);
 }
+
+input:focus+.slider {
+  box-shadow: 0 0 1px var(--main-toggle-on-colour);
+}
+
+input:checked+.slider:before {
+  -webkit-transform: translateX(16px);
+  -ms-transform: translateX(16px);
+  transform: translateX(16px);
+}
+
+/*
+ * Modified from https://www.w3schools.com/howto/howto_css_switch.asp
+*/
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}

frontend/src/components/DefenceBox/DefenceMechanism.tsx

@@ -58,46 +58,30 @@ function DefenceMechanism({
   return (
     <span>
       <div
-        className={
-          defenceDetail.isActive
-            ? "strategy-mechanism defence-mechanism prompt-injection-button defence-active"
-            : "strategy-mechanism defence-mechanism prompt-injection-button"
-        }
+        className="strategy-mechanism defence-mechanism"
         onMouseOver={() => {
           setIsInfoBoxVisible(true);
         }}
         onMouseLeave={() => {
           setIsInfoBoxVisible(false);
         }}
-        // style={
-        //   defenceDetail.isTriggered
-        //     ? defenceDetail.isActive
-        //       ? {
-        //           animation:
-        //             "flash-red-active " +
-        //             ANIMATION_FLASH_TIME_SECONDS +
-        //             "s linear 0s " +
-        //             ANIMATION_FLASH_REPEAT +
-        //             " forwards",
-        //         }
-        //       : {
-        //           animation:
-        //             "flash-red-inactive " +
-        //             ANIMATION_FLASH_TIME_SECONDS +
-        //             "s linear 0s " +
-        //             ANIMATION_FLASH_REPEAT +
-        //             " forwards",
-        //         }
-        //     : { animation: "none" }
-        // }
-        onClick={() => {
-          defenceDetail.isActive
-            ? setDefenceInactive(defenceDetail.id)
-            : setDefenceActive(defenceDetail.id);
-        }}
       >
         <div className="strategy-mechanism-header">
           <span>{defenceDetail.name}</span>
+          <label className="switch" >
+            <input 
+              type="checkbox" 
+              placeholder="defence-toggle" 
+              onChange={() => {
+                defenceDetail.isActive
+                  ? setDefenceInactive(defenceDetail.id)
+                  : setDefenceActive(defenceDetail.id);
+              }}
+              // set checked if defence is active
+              checked={defenceDetail.isActive}
+            />
+            <span className="slider round"></span>
+          </label>
         </div>
         {isInfoBoxVisible ? (
           <div className="strategy-mechanism-info-box">

frontend/src/components/EmailBox/EmailBox.css

@@ -10,7 +10,6 @@
   flex-direction: column-reverse;
   flex-grow: 1;
   overflow-y: auto;
+  padding: 32px 8px;
   scrollbar-width: thin;
-  padding: 0 40px;
-  padding-bottom: 40px;
 }

frontend/src/components/ExportChat/ExportPDFLink.css

@@ -1,17 +1,16 @@
 #export-chat-box {
-    margin: 15px;
-    padding-top: 20px;        
-    padding-bottom: 20px;
     text-align: center;
+    height: 100%;
+    width: 100%;
 }
 
 a {
     padding: 5 12px;
-    font-size: 16px;
     color: var(--main-button-inactive-text-colour);
     text-decoration: none;
 }
 
 button {
-    height: 30px;
+    height: 100%;
+    width: 100%;
 }

frontend/src/components/ExportChat/ExportPDFLink.tsx

@@ -33,7 +33,7 @@ const ExportPDFLink = ({
           }
           fileName={getFileName()}
         >
-          {"Export chat history"}
+          {"Export"}
         </PDFDownloadLink>{" "}
       </button>
     </div>