[object Object]

← back to Exo

removing timeout for error and adding close button

cbe551d119c27c7ce5961fbaf50a4dfaac2f349f · 2024-11-12 14:04:15 -0800 · cadenmackenzie

Files touched

Diff

commit cbe551d119c27c7ce5961fbaf50a4dfaac2f349f
Author: cadenmackenzie <cadenmackenzie@gmail.com>
Date:   Tue Nov 12 14:04:15 2024 -0800

    removing timeout for error and adding close button
---
 exo/tinychat/index.css  | 16 ++++++++++++++++
 exo/tinychat/index.html |  6 +++++-
 exo/tinychat/index.js   |  6 ------
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/exo/tinychat/index.css b/exo/tinychat/index.css
index c873412d..e9797341 100644
--- a/exo/tinychat/index.css
+++ b/exo/tinychat/index.css
@@ -202,6 +202,22 @@ main {
     top: 0; /* Position at the top of the page */
     left: 0; /* Extend from the left edge */
     right: 0; /* Extend to the right edge */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.toast-close-button {
+    background: none;
+    border: none;
+    color: white;
+    padding: 0 8px;
+    cursor: pointer;
+    font-size: 1.2em;
+}
+
+.toast-close-button:hover {
+    opacity: 0.8;
 }
 
 .hljs {
diff --git a/exo/tinychat/index.html b/exo/tinychat/index.html
index 3e511090..6f34a3e7 100644
--- a/exo/tinychat/index.html
+++ b/exo/tinychat/index.html
@@ -26,7 +26,11 @@
 <body>
 <main x-data="state" x-init="console.log(endpoint)">
      <!-- Error Toast -->
-    <div x-show="errorMessage" x-transition.opacity x-text="errorMessage" class="toast">
+    <div x-show="errorMessage" x-transition.opacity class="toast">
+        <span x-text="errorMessage"></span>
+        <button @click="errorMessage = null" class="toast-close-button">
+            <i class="fas fa-times"></i>
+        </button>
     </div>
 <div class="model-selector">
 <select @change="if (cstate) cstate.selectedModel = $event.target.value" x-model="cstate.selectedModel">
diff --git a/exo/tinychat/index.js b/exo/tinychat/index.js
index 0d2f0654..9a004450 100644
--- a/exo/tinychat/index.js
+++ b/exo/tinychat/index.js
@@ -119,9 +119,6 @@ document.addEventListener("alpine:init", () => {
         console.error('error', error)
         this.lastErrorMessage = error.message || 'Unknown error on handleSend';
         this.errorMessage = error.message || 'Unknown error on handleSend';
-        setTimeout(() => {
-          this.errorMessage = null;
-        }, 5 * 1000)
         this.generating = false;
       }
     },
@@ -241,9 +238,6 @@ document.addEventListener("alpine:init", () => {
         console.error('error', error)
         this.lastErrorMessage = error;
         this.errorMessage = error;
-        setTimeout(() => {
-          this.errorMessage = null;
-        }, 5 * 1000)
       } finally {
         this.generating = false;
       }

← 4c98108d increase grpc msg limit  ·  back to Exo  ·  modifying error handling to include name and stack trace if 325edddd →