Attack box

frontend/src/App.js

@@ -1,4 +1,5 @@
 import "./App.css";
+import AttackBox from "./components/AttackBox/AttackBox";
 import ChatBox from "./components/ChatBox/ChatBox";
 import DefenceBox from "./components/DefenceBox/DefenceBox";
 import EmailBox from "./components/EmailBox/EmailBox";
@@ -22,7 +23,8 @@ function App() {
       <div className="side-bar">
         <div className="side-bar-header">defence mechanisms</div>
         <DefenceBox key={defenceBoxKey} triggeredDefences={triggeredDefences} />
-        <div className="side-bar-header">attack tactics</div>
+        <div className="side-bar-header">attack mechanisms</div>
+        <AttackBox />
       </div>
       <div id="centre-area">
         <Header />

frontend/src/Attacks.js

@@ -0,0 +1,9 @@
+const ATTACKS = [
+  {
+    name: "jailbreak prompt",
+    id: "JAILBREAK PROMPT",
+    info: "using prompt injection, get the chat bot in a state where it no longer follows its original instructions.",
+  },
+];
+
+export default ATTACKS;

frontend/src/components/AttackBox/AttackBox.jsx

@@ -0,0 +1,15 @@
+import "../StrategyBox/StrategyBox.css";
+import AttackMechanism from "./AttackMechanism";
+import ATTACKS from "../../Attacks";
+
+function AttackBox() {
+  return (
+    <div id="strategy-box">
+      {ATTACKS.map((attack, index) => {
+        return <AttackMechanism key={attack.id} attack={attack} />;
+      })}
+    </div>
+  );
+}
+
+export default AttackBox;

frontend/src/components/AttackBox/AttackMechanism.jsx

@@ -0,0 +1,32 @@
+import "../StrategyBox/StrategyMechanism.css";
+import React from "react";
+
+function DefenceMechanism(props) {
+  const [isInfoBoxVisible, setIsInfoBoxVisible] = React.useState(false);
+
+  return (
+    <span>
+      <div className="strategy-mechanism">
+        <div className="strategy-mechanism-header">
+          <span>{props.attack.name}</span>
+          <span
+            className="strategy-mechanism-info"
+            onMouseOver={() => {
+              setIsInfoBoxVisible(true);
+            }}
+            onMouseLeave={() => {
+              setIsInfoBoxVisible(false);
+            }}
+          >
+            <span>?</span>
+          </span>
+        </div>
+        {isInfoBoxVisible ? (
+          <div className="strategy-mechanism-info-box">{props.attack.info}</div>
+        ) : null}
+      </div>
+    </span>
+  );
+}
+
+export default DefenceMechanism;

frontend/src/components/DefenceBox/DefenceMechanism.jsx

@@ -44,7 +44,7 @@ function DefenceMechanism(props) {
         }}
       >
         <div className="strategy-mechanism-header">
-          <span className="defence-mechanism-name">{props.name}</span>
+          <span>{props.name}</span>
           <span
             className="strategy-mechanism-info"
             onMouseOver={() => {