From 19a0b145b3079e34430138cafbef1c97e157e879 Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Tue, 12 Sep 2023 09:13:59 +0100
Subject: [PATCH 1/7] WIP: Changing input to textarea

---
 frontend/src/components/ChatBox/ChatBox.css | 26 ++++++++++++---------
 frontend/src/components/ChatBox/ChatBox.tsx | 25 +++++++++++++++++---
 2 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/ChatBox/ChatBox.css b/frontend/src/components/ChatBox/ChatBox.css
index aefad4ed4..0220004c8 100644
--- a/frontend/src/components/ChatBox/ChatBox.css
+++ b/frontend/src/components/ChatBox/ChatBox.css
@@ -1,7 +1,8 @@
 #chat-box {
   display: flex;
   flex-direction: column;
-  flex-grow: 1;
+  justify-content: flex-end;
+  height: 100%;
 }
 
 #chat-box-footer {
@@ -14,22 +15,31 @@
 #chat-box-footer-messages {
   display: flex;
   flex-direction: row;
-  height: 52px;
 }
 
 #chat-box-input {
-  align-self: flex-end;
-  justify-content: center;
   flex-grow: 1;
+  padding: 18px 12px;
+  width: 100%;
   height: 100%;
-  padding: 0 12px;
+  align-self: flex-end;
+  justify-content: center;
   box-sizing: border-box;
+  resize: none;
+  background-color: inherit;
+
+  /* must inherit as it's a textarea */
+  font-family: inherit;
+  font-size: inherit;
+  color: white;
 }
 
 #chat-box-button-send {
   height: 100%;
+  max-height: 53px;
   width: 74px;
   margin-left: 8px;
+  margin-top: auto;
 }
 
 #chat-box-button-content {
@@ -40,9 +50,3 @@
   height: 40%;
   width: 100%;
 }
-
-#chat-box-button-reset {
-  height: 34px;
-  width: 100%;
-  margin-top: 10px;
-}
diff --git a/frontend/src/components/ChatBox/ChatBox.tsx b/frontend/src/components/ChatBox/ChatBox.tsx
index ff0dd3c71..f895a4f33 100644
--- a/frontend/src/components/ChatBox/ChatBox.tsx
+++ b/frontend/src/components/ChatBox/ChatBox.tsx
@@ -47,7 +47,26 @@ function ChatBox({
       });
   }, [setEmails]);
 
-  function inputKeyPressed(event: React.KeyboardEvent<HTMLInputElement>) {
+  function resizeInputBox() {
+    // adjust the height of the text area
+    const maxHeight = 200;
+    const defaultHeight = 50;
+    const inputBoxElement = document.getElementById("chat-box-input") as
+      | HTMLTextAreaElement
+      | undefined;
+    if (inputBoxElement) {
+      if (inputBoxElement.scrollHeight > inputBoxElement.clientHeight) {
+        const newHeight = Math.min(inputBoxElement.scrollHeight, maxHeight);
+        inputBoxElement.style.height = "1px";
+        inputBoxElement.style.height = `${newHeight}px`;
+      } else {
+        inputBoxElement.style.height = `${defaultHeight}px`;
+      }
+    }
+  }
+
+  function inputKeyPressed(event: React.KeyboardEvent<HTMLTextAreaElement>) {
+    resizeInputBox();
     if (event.key === "Enter") {
       // asynchronously send the message
       void sendChatMessage();
@@ -166,12 +185,12 @@ function ChatBox({
       <ChatBoxFeed messages={messages} />
       <div id="chat-box-footer">
         <div id="chat-box-footer-messages">
-          <input
+          <textarea
             id="chat-box-input"
             className="prompt-injection-input"
-            type="text"
             placeholder="Type here..."
             autoFocus
+            rows={1}
             onKeyUp={inputKeyPressed}
           />
           <button

From 4e27edffb7e690522ddac2a07ac4507cb39ea689 Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Tue, 12 Sep 2023 09:53:56 +0100
Subject: [PATCH 2/7] Input as contentEditable div

---
 frontend/src/components/ChatBox/ChatBox.css   | 16 ++++++-------
 frontend/src/components/ChatBox/ChatBox.tsx   | 23 ++-----------------
 .../src/components/MainComponent/DemoBody.css |  1 +
 3 files changed, 10 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/ChatBox/ChatBox.css b/frontend/src/components/ChatBox/ChatBox.css
index 0220004c8..7c516ed04 100644
--- a/frontend/src/components/ChatBox/ChatBox.css
+++ b/frontend/src/components/ChatBox/ChatBox.css
@@ -2,44 +2,42 @@
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
+  width: 100%;
   height: 100%;
 }
 
 #chat-box-footer {
   display: flex;
   flex-direction: column;
+  width: 100%;
   font-size: 12px;
   padding: 32px;
+  box-sizing: border-box;
 }
 
 #chat-box-footer-messages {
   display: flex;
   flex-direction: row;
+  width: 100%;
 }
 
 #chat-box-input {
-  flex-grow: 1;
+  text-align: left;
   padding: 18px 12px;
-  width: 100%;
+  width: 85%;
   height: 100%;
   align-self: flex-end;
   justify-content: center;
   box-sizing: border-box;
   resize: none;
   background-color: inherit;
-
-  /* must inherit as it's a textarea */
-  font-family: inherit;
-  font-size: inherit;
-  color: white;
 }
 
 #chat-box-button-send {
+  width: 15%;
   height: 100%;
   max-height: 53px;
-  width: 74px;
   margin-left: 8px;
-  margin-top: auto;
 }
 
 #chat-box-button-content {
diff --git a/frontend/src/components/ChatBox/ChatBox.tsx b/frontend/src/components/ChatBox/ChatBox.tsx
index f895a4f33..1a636e422 100644
--- a/frontend/src/components/ChatBox/ChatBox.tsx
+++ b/frontend/src/components/ChatBox/ChatBox.tsx
@@ -47,26 +47,7 @@ function ChatBox({
       });
   }, [setEmails]);
 
-  function resizeInputBox() {
-    // adjust the height of the text area
-    const maxHeight = 200;
-    const defaultHeight = 50;
-    const inputBoxElement = document.getElementById("chat-box-input") as
-      | HTMLTextAreaElement
-      | undefined;
-    if (inputBoxElement) {
-      if (inputBoxElement.scrollHeight > inputBoxElement.clientHeight) {
-        const newHeight = Math.min(inputBoxElement.scrollHeight, maxHeight);
-        inputBoxElement.style.height = "1px";
-        inputBoxElement.style.height = `${newHeight}px`;
-      } else {
-        inputBoxElement.style.height = `${defaultHeight}px`;
-      }
-    }
-  }
-
   function inputKeyPressed(event: React.KeyboardEvent<HTMLTextAreaElement>) {
-    resizeInputBox();
     if (event.key === "Enter") {
       // asynchronously send the message
       void sendChatMessage();
@@ -185,12 +166,12 @@ function ChatBox({
       <ChatBoxFeed messages={messages} />
       <div id="chat-box-footer">
         <div id="chat-box-footer-messages">
-          <textarea
+          <span
             id="chat-box-input"
             className="prompt-injection-input"
             placeholder="Type here..."
             autoFocus
-            rows={1}
+            contentEditable
             onKeyUp={inputKeyPressed}
           />
           <button
diff --git a/frontend/src/components/MainComponent/DemoBody.css b/frontend/src/components/MainComponent/DemoBody.css
index f9c5ea950..b98e42fd9 100644
--- a/frontend/src/components/MainComponent/DemoBody.css
+++ b/frontend/src/components/MainComponent/DemoBody.css
@@ -25,6 +25,7 @@
   overflow-y: auto;
   padding: 0 30px;
   scrollbar-width: thin;
+  box-sizing: border-box;
 }
 
 .side-bar-header {

From e45694d0bc18a36c71377203901831fed8a3a130 Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Tue, 12 Sep 2023 09:58:26 +0100
Subject: [PATCH 3/7] Send button to the bottom

---
 frontend/src/components/ChatBox/ChatBox.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/frontend/src/components/ChatBox/ChatBox.css b/frontend/src/components/ChatBox/ChatBox.css
index 7c516ed04..4b9e78702 100644
--- a/frontend/src/components/ChatBox/ChatBox.css
+++ b/frontend/src/components/ChatBox/ChatBox.css
@@ -18,6 +18,7 @@
 #chat-box-footer-messages {
   display: flex;
   flex-direction: row;
+  align-items: flex-end;
   width: 100%;
 }
 
@@ -31,6 +32,10 @@
   box-sizing: border-box;
   resize: none;
   background-color: inherit;
+
+  min-height: 53px;
+  max-height: 100px;
+  overflow-y: auto;
 }
 
 #chat-box-button-send {

From 8f708097208e253694a3f1f87388de749ea3860c Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Tue, 12 Sep 2023 10:56:07 +0100
Subject: [PATCH 4/7] Using ContentEditable

---
 frontend/src/components/ChatBox/ChatBox.tsx | 27 ++++++++++++++-------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/ChatBox/ChatBox.tsx b/frontend/src/components/ChatBox/ChatBox.tsx
index 1a636e422..598a35df6 100644
--- a/frontend/src/components/ChatBox/ChatBox.tsx
+++ b/frontend/src/components/ChatBox/ChatBox.tsx
@@ -15,6 +15,7 @@ import { EmailInfo } from "../../models/email";
 import { PHASE_NAMES } from "../../models/phase";
 import { DEFENCE_DETAILS_ALL } from "../../Defences";
 import { ThreeDots } from "react-loader-spinner";
+import ContentEditable from "react-contenteditable";
 
 function ChatBox({
   messages,
@@ -47,7 +48,13 @@ function ChatBox({
       });
   }, [setEmails]);
 
-  function inputKeyPressed(event: React.KeyboardEvent<HTMLTextAreaElement>) {
+  function inputKeyDown(event: React.KeyboardEvent<HTMLSpanElement>) {
+    if (event.key === "Enter") {
+      event.preventDefault();
+    }
+  }
+
+  function inputKeyUp(event: React.KeyboardEvent<HTMLSpanElement>) {
     if (event.key === "Enter") {
       // asynchronously send the message
       void sendChatMessage();
@@ -57,15 +64,14 @@ function ChatBox({
   async function sendChatMessage() {
     const inputBoxElement = document.getElementById(
       "chat-box-input"
-    ) as HTMLInputElement;
+    ) as HTMLSpanElement;
     // get the message from the input box
-    const message = inputBoxElement.value;
+    const message = inputBoxElement.innerText.trim();
     // clear the input box
-    inputBoxElement.value = "";
+    inputBoxElement.innerHTML = "";
 
     if (message && !isSendingMessage) {
       setIsSendingMessage(true);
-
       // if input has been edited, add both messages to the list of messages. otherwise add original message only
       addChatMessage({
         message: message,
@@ -166,13 +172,16 @@ function ChatBox({
       <ChatBoxFeed messages={messages} />
       <div id="chat-box-footer">
         <div id="chat-box-footer-messages">
-          <span
+          <ContentEditable
             id="chat-box-input"
             className="prompt-injection-input"
-            placeholder="Type here..."
+            html=""
             autoFocus
-            contentEditable
-            onKeyUp={inputKeyPressed}
+            onKeyDown={inputKeyDown}
+            onKeyUp={inputKeyUp}
+            onChange={() => {
+              return;
+            }}
           />
           <button
             id="chat-box-button-send"

From 4bb5a305c03df62d1e6ac4998d1428cf3586e301 Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Tue, 12 Sep 2023 11:26:47 +0100
Subject: [PATCH 5/7] Switched back to textarea

---
 frontend/src/components/ChatBox/ChatBox.css |  4 ++++
 frontend/src/components/ChatBox/ChatBox.tsx | 19 +++++++++++++------
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/ChatBox/ChatBox.css b/frontend/src/components/ChatBox/ChatBox.css
index 4b9e78702..efb12ec86 100644
--- a/frontend/src/components/ChatBox/ChatBox.css
+++ b/frontend/src/components/ChatBox/ChatBox.css
@@ -36,6 +36,10 @@
   min-height: 53px;
   max-height: 100px;
   overflow-y: auto;
+
+  font-size: inherit;
+  font-family: inherit;
+  color: white;
 }
 
 #chat-box-button-send {
diff --git a/frontend/src/components/ChatBox/ChatBox.tsx b/frontend/src/components/ChatBox/ChatBox.tsx
index 598a35df6..62e369f6e 100644
--- a/frontend/src/components/ChatBox/ChatBox.tsx
+++ b/frontend/src/components/ChatBox/ChatBox.tsx
@@ -15,7 +15,6 @@ import { EmailInfo } from "../../models/email";
 import { PHASE_NAMES } from "../../models/phase";
 import { DEFENCE_DETAILS_ALL } from "../../Defences";
 import { ThreeDots } from "react-loader-spinner";
-import ContentEditable from "react-contenteditable";
 
 function ChatBox({
   messages,
@@ -48,6 +47,15 @@ function ChatBox({
       });
   }, [setEmails]);
 
+  function inputChange() {
+    // scroll to the bottom
+    const inputBoxElement = document.getElementById(
+      "chat-box-input"
+    ) as HTMLSpanElement;
+    inputBoxElement.scrollTop =
+      inputBoxElement.scrollHeight - inputBoxElement.clientHeight;
+  }
+
   function inputKeyDown(event: React.KeyboardEvent<HTMLSpanElement>) {
     if (event.key === "Enter") {
       event.preventDefault();
@@ -172,16 +180,15 @@ function ChatBox({
       <ChatBoxFeed messages={messages} />
       <div id="chat-box-footer">
         <div id="chat-box-footer-messages">
-          <ContentEditable
+          <textarea
             id="chat-box-input"
             className="prompt-injection-input"
-            html=""
+            placeholder="Type here..."
             autoFocus
+            rows={1}
+            onChange={inputChange}
             onKeyDown={inputKeyDown}
             onKeyUp={inputKeyUp}
-            onChange={() => {
-              return;
-            }}
           />
           <button
             id="chat-box-button-send"

From 2e5286c2e6b3f3d9cdacc4a33d48b0cfa36650fc Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Tue, 12 Sep 2023 11:47:06 +0100
Subject: [PATCH 6/7] Allowing for shift+enter

---
 frontend/src/components/ChatBox/ChatBox.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/ChatBox/ChatBox.tsx b/frontend/src/components/ChatBox/ChatBox.tsx
index 62e369f6e..99376a46b 100644
--- a/frontend/src/components/ChatBox/ChatBox.tsx
+++ b/frontend/src/components/ChatBox/ChatBox.tsx
@@ -56,14 +56,15 @@ function ChatBox({
       inputBoxElement.scrollHeight - inputBoxElement.clientHeight;
   }
 
-  function inputKeyDown(event: React.KeyboardEvent<HTMLSpanElement>) {
-    if (event.key === "Enter") {
+  function inputKeyDown(event: React.KeyboardEvent<HTMLTextAreaElement>) {
+    if (event.key === "Enter" && !event.shiftKey) {
       event.preventDefault();
     }
   }
 
-  function inputKeyUp(event: React.KeyboardEvent<HTMLSpanElement>) {
-    if (event.key === "Enter") {
+  function inputKeyUp(event: React.KeyboardEvent<HTMLTextAreaElement>) {
+    // shift+enter shouldn't send message
+    if (event.key === "Enter" && !event.shiftKey) {
       // asynchronously send the message
       void sendChatMessage();
     }
@@ -72,11 +73,11 @@ function ChatBox({
   async function sendChatMessage() {
     const inputBoxElement = document.getElementById(
       "chat-box-input"
-    ) as HTMLSpanElement;
+    ) as HTMLTextAreaElement;
     // get the message from the input box
-    const message = inputBoxElement.innerText.trim();
+    const message = inputBoxElement.value;
     // clear the input box
-    inputBoxElement.innerHTML = "";
+    inputBoxElement.value = "";
 
     if (message && !isSendingMessage) {
       setIsSendingMessage(true);

From 291e74f2f17ea3d83aeea2956dc5801688383aaa Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Tue, 12 Sep 2023 11:58:12 +0100
Subject: [PATCH 7/7] Expanding textbox

---
 frontend/src/components/ChatBox/ChatBox.css |  1 -
 frontend/src/components/ChatBox/ChatBox.tsx | 13 ++++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ChatBox/ChatBox.css b/frontend/src/components/ChatBox/ChatBox.css
index efb12ec86..f132fb247 100644
--- a/frontend/src/components/ChatBox/ChatBox.css
+++ b/frontend/src/components/ChatBox/ChatBox.css
@@ -34,7 +34,6 @@
   background-color: inherit;
 
   min-height: 53px;
-  max-height: 100px;
   overflow-y: auto;
 
   font-size: inherit;
diff --git a/frontend/src/components/ChatBox/ChatBox.tsx b/frontend/src/components/ChatBox/ChatBox.tsx
index 99376a46b..497b0adc5 100644
--- a/frontend/src/components/ChatBox/ChatBox.tsx
+++ b/frontend/src/components/ChatBox/ChatBox.tsx
@@ -48,12 +48,23 @@ function ChatBox({
   }, [setEmails]);
 
   function inputChange() {
-    // scroll to the bottom
     const inputBoxElement = document.getElementById(
       "chat-box-input"
     ) as HTMLSpanElement;
+
+    // scroll to the bottom
     inputBoxElement.scrollTop =
       inputBoxElement.scrollHeight - inputBoxElement.clientHeight;
+
+    const maxHeightPx = 150;
+    inputBoxElement.style.height = "0";
+    if (inputBoxElement.scrollHeight > maxHeightPx) {
+      inputBoxElement.style.height = `${maxHeightPx}px`;
+      inputBoxElement.style.overflowY = "auto";
+    } else {
+      inputBoxElement.style.height = `${inputBoxElement.scrollHeight}px`;
+      inputBoxElement.style.overflowY = "hidden";
+    }
   }
 
   function inputKeyDown(event: React.KeyboardEvent<HTMLTextAreaElement>) {