Merge pull request #20 from gsproston-scottlogic/dev

Pre defensive measures

backend/email/email.js

@@ -1,4 +1,16 @@
+const sentEmails = [];
+
+function clearEmails() {
+  sentEmails.length = 0;
+}
+
+function getSentEmails() {
+  return sentEmails;
+}
+
 function sendEmail(email, subject, message) {
+  // add to the list of sent emails
+  sentEmails.push({ address: email, subject: subject, content: message });
   response =
     "Sending email to " +
     email +
@@ -10,4 +22,4 @@ function sendEmail(email, subject, message) {
   return response;
 }
 
-module.exports = { sendEmail };
+module.exports = { clearEmails, getSentEmails, sendEmail };

backend/router.js

@@ -1,5 +1,6 @@
 // Importing express module
 const express = require("express");
+const { clearEmails, getSentEmails } = require("./email/email");
 const { chatGptSendMessage, clearMessages } = require("./openai/openai");
 const router = express.Router();
 
@@ -8,6 +9,17 @@ router.get("/", (req, res, next) => {
   res.send("Hello world");
 });
 
+// Clear sent emails
+router.post("/email/clear", (req, res, next) => {
+  clearEmails();
+  res.send("Sent emails cleared");
+});
+
+// Get sent emails
+router.get("/email/get", (req, res, next) => {
+  res.send(getSentEmails());
+});
+
 // Chat to ChatGPT
 router.post("/openai/chat", async (req, res, next) => {
   const message = req.body?.message;

frontend/src/App.css

@@ -1,12 +1,18 @@
 #main-area {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+}
+
+#centre-area {
   display: flex;
   flex-direction: column;
   border-width: 0px 1px;
   border-style: solid;
   border-color: #ccc;
   position: relative;
   height: 100%;
-  width: 500px;
+  width: 40%;
   margin: 0 auto;
   text-align: center;
 }
@@ -20,3 +26,19 @@ h1 {
   height: 100%;
 }
 
+.side-bar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 30%;
+}
+
+.side-bar-header {
+  border-color: #ccc;
+  border-width: 0 0 1px 0;
+  border-style: solid;
+  margin: 40px;
+  margin-bottom: 10px;
+  padding-bottom: 20px;
+  text-align: center;
+}

frontend/src/App.js

@@ -1,15 +1,27 @@
 import "./App.css";
-import ChatBox from "./components/ChatBox";
+import ChatBox from "./components/ChatBox/ChatBox";
+import EmailBox from "./components/EmailBox/EmailBox";
 import Header from "./components/Header";
+import { useState } from "react";
 
 function App() {
+  const [emails, setEmails] = useState([]);
+
   return (
-    <div id="main-area">
-      <Header />
-      <ChatBox />
-    </div>
+    <span id="main-area">
+      <div class="side-bar">
+        <div class="side-bar-header">defence mechanisms</div>
+      </div>
+      <div id="centre-area">
+        <Header />
+        <ChatBox setEmails={setEmails} />
+      </div>
+      <div class="side-bar">
+        <div class="side-bar-header">sent emails</div>
+        <EmailBox emails={emails} />
+      </div>
+    </span>
   );
 }
 
 export default App;
-

frontend/src/components/ChatBox/ChatBox.css

@@ -0,0 +1,49 @@
+#chat-box {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+#chat-box-footer {
+  align-items: center;
+  display: flex;
+  padding: 0 32px;
+}
+
+#chat-box-input {
+  align-self: flex-end;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  padding: 40px 0px;
+}
+
+#chat-box-input input {
+  width: 100%;
+  height: 40px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding: 0 12px;
+  font-size: 16px;
+  box-sizing: border-box;
+}
+
+#chat-box-button {
+  padding-left: 20px;
+}
+
+#chat-box-button button {
+  width: 100%;
+  height: 40px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding: 0 12px;
+  font-size: 16px;
+  box-sizing: border-box;
+  color: #666;
+}
+
+#chat-box-button button:hover {
+  background-color: #ccc;
+  color: #fff;
+}

frontend/src/components/ChatBox/ChatBox.jsx

@@ -0,0 +1,77 @@
+import React, { useEffect, useState } from "react";
+
+import "./ChatBox.css";
+import ChatBoxFeed from "./ChatBoxFeed";
+import {
+  clearOpenAiChat,
+  openAiSendMessage,
+} from "../../service/openaiService";
+import { getSentEmails } from "../../service/emailService";
+
+function ChatBox(props) {
+  const [messages, setMessages] = useState([]);
+
+  // called on mount
+  useEffect(() => {
+    // clear remote messages
+    clearOpenAiChat();
+    // get sent emails
+    getSentEmails().then((sentEmails) => {
+      props.setEmails(sentEmails);
+    });
+  }, []);
+
+  const clearClicked = () => {
+    // clear local messages
+    setMessages([]);
+    // clear remote messages
+    clearOpenAiChat();
+  };
+
+  const sendChatMessage = async (event) => {
+    if (event.key === "Enter") {
+      // get the message
+      const message = event.target.value;
+      // add it to the list of messages
+      setMessages((messages) => [
+        ...messages,
+        { message: message, isUser: true },
+      ]);
+      // clear the input
+      event.target.value = "";
+
+      const reply = await openAiSendMessage(message);
+      // add it to the list of messages
+      setMessages((messages) => [
+        ...messages,
+        { message: reply, isUser: false },
+      ]);
+
+      // get sent emails
+      const sentEmails = await getSentEmails();
+      // update emails
+      props.setEmails(sentEmails);
+    }
+  };
+
+  return (
+    <div id="chat-box">
+      <ChatBoxFeed messages={messages} />
+      <div id="chat-box-footer">
+        <div id="chat-box-input">
+          <input
+            type="text"
+            placeholder="chat to chatgpt..."
+            autoFocus
+            onKeyUp={sendChatMessage.bind(this)}
+          />
+        </div>
+        <div id="chat-box-button" onClick={clearClicked.bind(this)}>
+          <button>clear</button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ChatBox;

frontend/src/components/ChatBoxFeed.css → frontend/src/components/ChatBox/ChatBoxFeed.css

@@ -1,6 +1,6 @@
 #chat-box-feed {
   display: flex;
-  flex-direction: column;
+  flex-direction: column-reverse;
   flex-grow: 1;
   height: 1px;
   overflow: auto;

frontend/src/components/ChatBoxFeed.jsx → frontend/src/components/ChatBox/ChatBoxFeed.jsx

@@ -4,7 +4,7 @@ import ChatBoxMessage from "./ChatBoxMessage";
 function ChatBoxFeed(props) {
   return (
     <div id="chat-box-feed">
-      {props.messages.map((message, index) => {
+      {props.messages.toReversed().map((message, index) => {
         return (
           <ChatBoxMessage
             message={message.message}

frontend/src/components/EmailBox/EmailBox.css

@@ -0,0 +1,15 @@
+#email-box {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+#email-box-feed {
+  display: flex;
+  flex-direction: column-reverse;
+  flex-grow: 1;
+  overflow-y: auto;
+  padding: 0 40px;
+  padding-bottom: 40px;
+}

frontend/src/components/EmailBox/EmailBox.jsx

@@ -0,0 +1,21 @@
+import SentEmail from "./SentEmail";
+import "./EmailBox.css";
+
+function EmailBox(props) {
+  return (
+    <div id="email-box-feed">
+      {props.emails.toReversed().map((email, index) => {
+        return (
+          <SentEmail
+            address={email.address}
+            subject={email.subject}
+            content={email.content}
+            key={index}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+export default EmailBox;

frontend/src/components/EmailBox/SentEmail.css

@@ -0,0 +1,15 @@
+.sent-email {
+  border-color: #ccc;
+  border-radius: 5px;
+  border-style: solid;
+  border-width: 1px;
+  font-size: 14px;
+  margin-top: 10px;
+  padding: 5px;
+}
+
+.sent-email-divider {
+  border-bottom: 1px solid #ccc;
+  margin: 5px 0;
+  width: 100%;
+}