From 2b96272c405dde981a958442f688c9f4b81667a0 Mon Sep 17 00:00:00 2001
From: Natasha Boyse <natasha.boyse@digital.trade.gov.uk>
Date: Wed, 26 Feb 2025 12:10:19 +0000
Subject: [PATCH] feat: Copy Paste into chat box retains all formatting

---
 django_app/frontend/src/chat-styles.scss               |  8 ++++++++
 .../src/js/web-components/chats/message-input.js       | 10 +++++-----
 django_app/redbox_app/templates/chats.html             |  2 +-
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/django_app/frontend/src/chat-styles.scss b/django_app/frontend/src/chat-styles.scss
index 77a5de6ca..917a50072 100644
--- a/django_app/frontend/src/chat-styles.scss
+++ b/django_app/frontend/src/chat-styles.scss
@@ -591,6 +591,14 @@ main:has(.iai-chat-bubble) .chat-options {
   }
 }
 
+.iai-chat-input__input {
+  background-color: white;
+  border: #767676 1px solid;
+  min-height: 1.5em;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
 .exit-feedback {
   background-color: #f3edc9;
   display: none;
diff --git a/django_app/frontend/src/js/web-components/chats/message-input.js b/django_app/frontend/src/js/web-components/chats/message-input.js
index d80109de8..ccbccda26 100644
--- a/django_app/frontend/src/js/web-components/chats/message-input.js
+++ b/django_app/frontend/src/js/web-components/chats/message-input.js
@@ -3,7 +3,7 @@
 export class MessageInput extends HTMLElement {
   constructor() {
     super();
-    this.textarea = this.querySelector("textarea");
+    this.textarea = this.querySelector(".iai-chat-input__input");
   }
 
   connectedCallback() {
@@ -15,7 +15,7 @@ export class MessageInput extends HTMLElement {
     this.textarea.addEventListener("keypress", (evt) => {
       if (evt.key === "Enter" && !evt.shiftKey && this.textarea) {
         evt.preventDefault();
-        if (this.textarea.value.trim()) {
+        if (this.textarea?.textContent?.trim()) {
           this.closest("form")?.requestSubmit();
         }
       }
@@ -32,7 +32,7 @@ export class MessageInput extends HTMLElement {
       return;
     }
     this.textarea.style.height = "auto";
-    this.textarea.style.height = `${this.textarea.scrollHeight}px`;
+    this.textarea.style.height = `${this.textarea.scrollHeight || this.textarea.offsetHeight}px`;
   };
 
   /**
@@ -40,7 +40,7 @@ export class MessageInput extends HTMLElement {
    * @returns string
    */
   getValue = () => {
-    return this.querySelector("textarea")?.value.trim() || "";
+    return this.textarea?.textContent?.trim() || "";
   };
 
   /**
@@ -50,7 +50,7 @@ export class MessageInput extends HTMLElement {
     if (!this.textarea) {
       return;
     }
-    this.textarea.value = "";
+    this.textarea.textContent = "";
     this.#adjustHeight();
   };
 }
diff --git a/django_app/redbox_app/templates/chats.html b/django_app/redbox_app/templates/chats.html
index 3e503ada7..a22996eef 100644
--- a/django_app/redbox_app/templates/chats.html
+++ b/django_app/redbox_app/templates/chats.html
@@ -154,7 +154,7 @@ <h2 class="chat-title__heading govuk-visually-hidden" hidden>Current chat</h2>
               Message Redbox
             </label>
             <message-input>
-              <textarea class="iai-chat-input__input js-user-text" id="message" name="message" rows="1" required autofocus></textarea>
+              <div class="iai-chat-input__input js-user-text" id="message" name="message" contenteditable="true" role="textbox" aria-multiline="true"></div>
             </message-input>
           </div>
           <send-message>