188 UI chat component (#203)

* WIP header * WIP: Header spacing * Header without icon * Fixed bug where user message would disappear * WIP: Moving code around * Clearing defences on reset * Only showing triggered defence if it's known * Updated chat footer * Better chat footer sizings * Chat speech bubbles
ScottLogic · Aug 30, 2023 · 333a4c7 · 333a4c7
1 parent c8b1ad3
commit 333a4c7
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 37 deletions.
diff --git a/frontend/src/Theme.css b/frontend/src/Theme.css
@@ -15,10 +15,14 @@
   --main-input-background-colour: var(--main-button-inactive-background-colour);
   --main-input-text-colour: var(--main-button-inactive-text-colour);
 
-  --chat-bot-background: linear-gradient(#D482FB, #F3DBFE);
-  --chat-blocked-background: linear-gradient(var(--main-error-colour), #ffD5DA);
-  --chat-edited-background: linear-gradient(#6a9b9b, #cae7f5);
-  --chat-user-background: linear-gradient(var(--main-accent-colour), #8AD5DA);
+  --chat-bot-colour: #D482FB;
+  --chat-bot-background: linear-gradient(var(--chat-bot-colour), #F3DBFE);
+  --chat-blocked-colour: var(--main-error-colour);
+  --chat-blocked-background: linear-gradient(var(--chat-blocked-colour), #ffacb6);
+  --chat-edited-colour: #6a9b9b;
+  --chat-edited-background: linear-gradient(var(--chat-edited-colour), #cae7f5);
+  --chat-user-colour: var(--main-accent-colour);
+  --chat-user-background: linear-gradient(var(--chat-user-colour), #8AD5DA);
   --chat-info-text-colour: #888;
   --chat-message-text-colour: #000;
   --chat-triggered-text-color: var(--main-error-colour);

diff --git a/frontend/src/components/ChatBox/ChatBox.css b/frontend/src/components/ChatBox/ChatBox.css
@@ -5,24 +5,35 @@
 }
 
 #chat-box-footer {
-  align-items: center;
   display: flex;
+  flex-direction: column;
+  font-size: 12px;
   padding: 32px;
-  height: 40px;
+}
+
+#chat-box-footer-messages {
+  display: flex;
+  flex-direction: row;
+  height: 52px;
 }
 
 #chat-box-input {
   align-self: flex-end;
   justify-content: center;
-  width: 80%;
+  flex-grow: 1;
   height: 100%;
   padding: 0 12px;
-  font-size: 16px;
   box-sizing: border-box;
 }
 
-#chat-box-button {
+#chat-box-button-send {
   height: 100%;
-  width: 20%;
+  width: 74px;
   margin-left: 8px;
 }
+
+#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
@@ -40,22 +40,28 @@ function ChatBox(
     });
   }, [setEmails]);
 
-  const sendChatMessage = async (
-    event: React.KeyboardEvent<HTMLInputElement>
-  ) => {
-    if (event.key === "Enter" && event.target !== null && !isSendingMessage) {
+  function inputKeyPressed(event: React.KeyboardEvent<HTMLInputElement>) {
+    if (event.key === "Enter") {
+      sendChatMessage();
+    }
+  }
+
+  async function sendChatMessage() {
+    const inputBoxElement = document.getElementById("chat-box-input") as HTMLInputElement;
+    // get the message from the input box
+    const message = inputBoxElement?.value;
+    // clear the input box
+    inputBoxElement!.value = "";
+
+    if (message && !isSendingMessage) {
       setIsSendingMessage(true);
-      // get the message
-      const message = event.currentTarget.value;
 
       // if input has been edited, add both messages to the list of messages. otherwise add original message only
       addChatMessage({
         message: message,
         type: CHAT_MESSAGE_TYPE.USER,
         isOriginalMessage: true,
       });
-      // clear the input
-      event.currentTarget.value = "";
 
       const response: ChatResponse = await sendMessage(message, currentPhase);
       setNumCompletedPhases(response.numPhasesCompleted);
@@ -115,21 +121,32 @@ function ChatBox(
     <div id="chat-box">
       <ChatBoxFeed messages={messages} />
       <div id="chat-box-footer">
+        <div id="chat-box-footer-messages">
           <input 
             id="chat-box-input" 
             className="prompt-injection-input"
             type="text"
-            placeholder="chat to chatgpt..."
+            placeholder="Type here..."
             autoFocus
-            onKeyUp={sendChatMessage.bind(this)}
+            onKeyUp={inputKeyPressed.bind(this)}
           />
-        <button 
-          id="chat-box-button" 
-          className="prompt-injection-button"
-          onClick={resetPhase.bind(this)}
-        >
-          reset
-        </button>
+          <button 
+            id="chat-box-button-send" 
+            className="prompt-injection-button"
+            onClick={sendChatMessage}
+          >
+            Send
+          </button>
+        </div>
+        <div id="chat-box-footer-reset">
+          <button 
+              id="chat-box-button-reset" 
+              className="prompt-injection-button"
+              onClick={resetPhase.bind(this)}
+            >
+            Reset phase
+          </button>
+        </div>
       </div>
     </div>
   );

diff --git a/frontend/src/components/ChatBox/ChatBoxMessage.css b/frontend/src/components/ChatBox/ChatBoxMessage.css
@@ -12,33 +12,89 @@
   hyphens: auto;
   white-space: pre-wrap;
   word-wrap: break-word;
+  /* For the triangle */
+  position: relative;
 }
 
 .chat-box-message-ai {
   background: var(--chat-bot-background);
-  float: right;
-  margin-left: auto;
-  text-align: right;
+  border-radius: 0px 8px 8px 8px;
+  float: left;
+  margin-right: auto;
+  text-align: left;
+}
+
+.chat-box-message-ai:before {
+  content: "";
+  position: absolute;
+  border-style: solid;
+  /* reduce the damage in FF3.0 */
+  display: block;
+  width: 0;
+  top: 0px; /* controls vertical position */
+  left: -10px; /* value = - border-left-width - border-right-width */
+  border-width: 6px 0px 0px 10px;
+  border-color: var(--chat-bot-colour) transparent;
 }
 
 .chat-box-message-ai-blocked {
   background: var(--chat-blocked-background);
 }
 
+.chat-box-message-ai-blocked:before {
+  content: "";
+  position: absolute;
+  border-style: solid;
+  /* reduce the damage in FF3.0 */
+  display: block;
+  width: 0;
+  top: 0px; /* controls vertical position */
+  left: -10px; /* value = - border-left-width - border-right-width */
+  border-width: 6px 0px 0px 10px;
+  border-color: var(--chat-blocked-colour) transparent;
+}
+
 .chat-box-message-user {
   background: var(--chat-user-background);
-  float: left;
-  margin-right: auto;
-  text-align: left;
+  border-radius: 8px 0px 8px 8px;
+  float: right;
+  margin-left: auto;
+  text-align: right;
+}
+
+.chat-box-message-user:after {
+  content: "";
+  position: absolute;
+  border-style: solid;
+  /* reduce the damage in FF3.0 */
+  display: block;
+  width: 0;
+  top: 0px; /* controls vertical position */
+  right: -10px; /* value = - border-left-width - border-right-width */
+  border-width: 0 0 6px 10px;
+  border-color: transparent var(--chat-user-colour);
 }
 
 .chat-box-message-user-transformed {
   background: var(--chat-edited-background);
 }
 
+.chat-box-message-user-transformed:after {
+  content: "";
+  position: absolute;
+  border-style: solid;
+  /* reduce the damage in FF3.0 */
+  display: block;
+  width: 0;
+  top: 0px; /* controls vertical position */
+  right: -10px; /* value = - border-left-width - border-right-width */
+  border-width: 0 0 6px 10px;
+  border-color: transparent var(--chat-edited-colour);
+}
+
 .chat-box-message-phase-info {
-    float: right;
-    margin-left: auto;
-    text-align: right;
-    background-color: rgb(255, 255, 230);
+  float: right;
+  margin-left: auto;
+  text-align: right;
+  background-color: rgb(255, 255, 230);
 }