242 better chat input box (#256)

* WIP: Changing input to textarea * Input as contentEditable div * Send button to the bottom * Using ContentEditable * Switched back to textarea * Allowing for shift+enter * Expanding textbox
ScottLogic · Sep 12, 2023 · 80e32d2 · 80e32d2
1 parent f64a70c
commit 80e32d2
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 19 deletions.
diff --git a/frontend/src/components/ChatBox/ChatBox.css b/frontend/src/components/ChatBox/ChatBox.css
@@ -1,34 +1,50 @@
 #chat-box {
   display: flex;
   flex-direction: column;
-  flex-grow: 1;
+  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;
-  height: 52px;
+  align-items: flex-end;
+  width: 100%;
 }
 
 #chat-box-input {
+  text-align: left;
+  padding: 18px 12px;
+  width: 85%;
+  height: 100%;
   align-self: flex-end;
   justify-content: center;
-  flex-grow: 1;
-  height: 100%;
-  padding: 0 12px;
   box-sizing: border-box;
+  resize: none;
+  background-color: inherit;
+
+  min-height: 53px;
+  overflow-y: auto;
+
+  font-size: inherit;
+  font-family: inherit;
+  color: white;
 }
 
 #chat-box-button-send {
+  width: 15%;
   height: 100%;
-  width: 74px;
+  max-height: 53px;
   margin-left: 8px;
 }
 
@@ -40,9 +56,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
@@ -47,8 +47,35 @@ function ChatBox({
       });
   }, [setEmails]);
 
-  function inputKeyPressed(event: React.KeyboardEvent<HTMLInputElement>) {
-    if (event.key === "Enter") {
+  function inputChange() {
+    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>) {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+    }
+  }
+
+  function inputKeyUp(event: React.KeyboardEvent<HTMLTextAreaElement>) {
+    // shift+enter shouldn't send message
+    if (event.key === "Enter" && !event.shiftKey) {
       // asynchronously send the message
       void sendChatMessage();
     }
@@ -57,15 +84,14 @@ function ChatBox({
   async function sendChatMessage() {
     const inputBoxElement = document.getElementById(
       "chat-box-input"
-    ) as HTMLInputElement;
+    ) as HTMLTextAreaElement;
     // get the message from the input box
     const message = inputBoxElement.value;
     // clear the input box
     inputBoxElement.value = "";
 
     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 +192,15 @@ 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
-            onKeyUp={inputKeyPressed}
+            rows={1}
+            onChange={inputChange}
+            onKeyDown={inputKeyDown}
+            onKeyUp={inputKeyUp}
           />
           <button
             id="chat-box-button-send"

diff --git 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 {