Merge pull request #1309 from i-dot-ai/feature/file-error-message

Feature/file error message

django_app/frontend/src/css/chats/chats.scss

@@ -168,6 +168,12 @@ chat-message {
 .iai-chat-bubble__role img {
   width: 1.25rem;
 }
+.iai-chat-bubble__text a {
+  color: $redbox-red;
+}
+.iai-chat-bubble__text a:hover {
+  font-weight: bold;
+}
 
 .rb-chat-message-footer__text {
   color: #60697b;

django_app/frontend/src/css/chats/documents.scss

@@ -38,6 +38,50 @@
 }
 
 
+.rb-upload-container ul {
+  display: flex;
+  flex-wrap: wrap;
+  list-style-type: none;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+}
+.rb-upload-container__doc {
+  background-color: white;
+  font-size: 0.75rem;
+  list-style-type: none;
+  width: 8rem;
+}
+.rb-upload-container__info {
+  max-width: 12rem;
+}
+.rb-upload-container file-status {
+  background-color: #ccc;
+  display: block;
+  padding: 0.25rem;
+}
+.rb-upload-container__filename-container {
+  display: flex;
+  justify-content: space-between;
+}
+.rb-upload-container__filename {
+  overflow: hidden;
+  padding: 0.25rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rb-upload-container__remove-button {
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: bold;
+}
+.rb-upload-container__remove-button:hover {
+  color: var(--iai-product-colour);
+}
+
+
 .rb-upload-container ul {
   display: flex;
   flex-wrap: wrap;

django_app/frontend/src/js/custom-events.md

@@ -8,4 +8,5 @@ Custom events are used for communication between web components. Here is a list
 | chat-response-end    | /chats                | title: string<br/>session_id: string                    | When the stream "end" event is sent from the server                                       |
 | stop-streaming       | /chats                | (none)                                                  | When a user presses the stop-streaming button, or an unexpected disconnection has occured |
 | chat-title-change    | /chats                | title: string<br/>session_id: string<br/>sender: string | When the chat title is changed by the user                                                |
+| file-error           | /chats                | name: string                                            | If there is a file error                                                                  |
 | upload-init          | /chats                | (none)                                                  | When a user clicks the upload button, so it can trigger the file input click event        |

django_app/frontend/src/js/web-components/chats/chat-controller.js

@@ -3,7 +3,7 @@
 class ChatController extends HTMLElement {
   connectedCallback() {
     const messageForm = document.querySelector("#message-form"); // TO DO: Tidy this up
-    const messageContainer = this.querySelector(".js-message-container");
+    this.messageContainer = this.querySelector(".js-message-container");
     const insertPosition = this.querySelector(".js-response-feedback");
     const feedbackButtons = /** @type {HTMLElement | null} */ (
       this.querySelector("feedback-buttons")
@@ -25,16 +25,16 @@ class ChatController extends HTMLElement {
       );
       userMessage.setAttribute("data-text", userText);
       userMessage.setAttribute("data-role", "user");
-      messageContainer?.insertBefore(userMessage, insertPosition);
+      this.messageContainer?.insertBefore(userMessage, insertPosition);
 
       let documentContainer = document.createElement("document-container");
-      messageContainer?.insertBefore(documentContainer, insertPosition);
+      this.messageContainer?.insertBefore(documentContainer, insertPosition);
 
       let aiMessage = /** @type {import("./chat-message").ChatMessage} */ (
         document.createElement("chat-message")
       );
       aiMessage.setAttribute("data-role", "ai");
-      messageContainer?.insertBefore(aiMessage, insertPosition);
+      this.messageContainer?.insertBefore(aiMessage, insertPosition);
 
       const llm =
         /** @type {HTMLInputElement | null}*/ (
@@ -76,6 +76,24 @@ class ChatController extends HTMLElement {
       })();
     });
 
+    document.addEventListener("file-error", (evt) => {
+      this.#showFileError(/** @type{CustomEvent} */ (evt).detail.name);
+    });
+
   }
+
+
+  /**
+   * @param {String} fileName 
+   */
+  #showFileError (fileName) {
+    let errorMessage = /** @type {import("./chat-message").ChatMessage} */ (
+      document.createElement("chat-message")
+    );
+    errorMessage.dataset.role = "ai";
+    errorMessage.dataset.text = `<p><strong>${fileName}</strong> can't be uploaded</p><p>You can:</p><ul><li>try uploading again</li><li>check the document opens outside Redbox on your computer</li><li>report to <a href="mailto:[email protected]">Redbox support</a></li></ul>`;
+    this.messageContainer?.append(errorMessage);
+  };
+
 }
 customElements.define("chat-controller", ChatController);

django_app/frontend/src/js/web-components/documents/file-status.js

@@ -10,16 +10,23 @@ class FileStatus extends HTMLElement {
   }
 
   connectedCallback() {
+    if (!this.textContent) {
+      this.textContent = "Uploading";
+    }
     this.#checkStatus();
   }
 
+  disconnectedCallback() {
+    this.dataset.id = "";
+  }
+
   async #checkStatus () {
 
     // UPDATE THESE AS REQUIRED
     const FILE_STATUS_ENDPOINT = "/file-status";
-    const CHECK_INTERVAL_MS = 6000;
+    const CHECK_INTERVAL_MS = 2000;
 
-    if (this.textContent?.toLowerCase() === "complete" || !this.dataset.id) {
+    if (this.textContent?.toLowerCase() === "complete" || this.textContent?.toLowerCase() === "error" || !this.dataset.id) {
       return;
     }
 
@@ -30,12 +37,24 @@ class FileStatus extends HTMLElement {
     this.textContent = responseObj.status;
     this.dataset.status = responseObj.status.toLowerCase();
 
-    if (responseObj.status.toLowerCase() !== "complete") {
-      window.setTimeout(() => {
-        this.#checkStatus();
-      }, CHECK_INTERVAL_MS);
+    if (responseObj.status.toLowerCase() === "error") {
+      const fileErrorEvent = new CustomEvent("file-error", {
+        detail: {
+          name: this.dataset.name
+        },
+      });
+      document.dispatchEvent(fileErrorEvent);
+      return;
     }
 
+    if (responseObj.status.toLowerCase() === "complete") {
+      return;
+    }
+
+    window.setTimeout(() => {
+      this.#checkStatus();
+    }, CHECK_INTERVAL_MS);
+
   };
 
 }

django_app/frontend/src/js/web-components/documents/upload-container.mjs

@@ -26,7 +26,7 @@ export class UploadContainer extends RedboxElement {
           ${this.docs.map(
             (doc) => html`
               <li class="rb-upload-container__doc">
-                <file-status data-id=${doc.id}>${doc.file_status}</file-status>
+                <file-status data-id=${doc.id} data-name=${doc.file_name}>${doc.file_status}</file-status>
                 <span class="rb-upload-container__filename-container">
                   <span class="rb-upload-container__filename">${doc.file_name}</span>
                   <button class="rb-upload-container__remove-button" @click=${this.#remove} aria-label="Remove" type="button">&times;</button>