Главная Обзор Помощь
Регистрация Вход
lqb
/
exo
зеркало из https://github.com/exo-explore/exo
1
0
Ответвить 0
Файлы Задачи 0 Вики
Просмотр исходного кода

Merge pull request #447 from cadenmackenzie/errorMessageTimeout

Error message timeout removed, added close button
Alex Cheema 6 месяцев назад
Родитель
bfdad19d8e 96aaab0b54
Сommit
65d2ae0287
3 измененных файлов с 131 добавлено и 24 удалено
Разделённый вид Показать статистику Diff
  1. 64 11
      exo/tinychat/index.css
  2. 17 1
      exo/tinychat/index.html
  3. 50 12
      exo/tinychat/index.js

+ 64 - 11
exo/tinychat/index.css
Просмотреть файл 

@@ -191,17 +191,70 @@ main {
 
 }
 
 
 .toast {
 
-    width: 100%; /* Take up the full width of the page */
 
-    background-color: #fc2a2a; /* Dark background color */
 
-    color: #fff; /* White text color */
 
-    text-align: center; /* Centered text */
 
-    border-radius: 2px; /* Rounded borders */
 
-    padding: 16px; /* Padding */
 
-    position: fixed; /* Sit on top of the screen content */
 
-    z-index: 9999; /* Add a z-index if needed */
 
-    top: 0; /* Position at the top of the page */
 
-    left: 0; /* Extend from the left edge */
 
-    right: 0; /* Extend to the right edge */
 
+    width: 100%;
 
+    background-color: #fc2a2a;
 
+    color: #fff;
 
+    text-align: left;
 
+    border-radius: 2px;
 
+    padding: 16px;
 
+    position: fixed;
 
+    z-index: 9999;
 
+    top: 0;
 
+    left: 0;
 
+    right: 0;
 
+    display: flex;
 
+    flex-direction: column;
 
+    white-space: pre-wrap;
 
+    font-family: monospace;
 
+}
 
+
 
+.toast-header {
 
+    display: flex;
 
+    justify-content: space-between;
 
+    align-items: center;
 
+    width: 100%;
 
+}
 
+
 
+.toast-error-message {
 
+    flex-grow: 1;
 
+}
 
+
 
+.toast-header-buttons {
 
+    display: flex;
 
+    align-items: center;
 
+    gap: 16px;
 
+    margin-left: 24px;
 
+}
 
+
 
+.toast-expand-button {
 
+    background: none;
 
+    border: none;
 
+    color: white;
 
+    padding: 4px;
 
+    cursor: pointer;
 
+    font-size: 1em;
 
+}
 
+
 
+.toast-close-button {
 
+    background: none;
 
+    border: none;
 
+    color: white;
 
+    padding: 4px;
 
+    cursor: pointer;
 
+    font-size: 1.2em;
 
+    line-height: 1;
 
+}
 
+
 
+.toast-expand-button:hover,
 
+.toast-close-button:hover {
 
+    opacity: 0.8;
 
+}
 
+
 
+.toast-content {
 
+    margin-top: 10px;
 
+    padding: 10px;
 
+    background-color: rgba(0, 0, 0, 0.2);
 
+    border-radius: 4px;
 
 }
 
 
 .hljs {

+ 17 - 1
exo/tinychat/index.html
Просмотреть файл 

@@ -26,7 +26,23 @@
 
 <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">
 
+        <div class="toast-header">
 
+            <span class="toast-error-message" x-text="errorMessage.basic"></span>
 
+            <div class="toast-header-buttons">
 
+                <button @click="errorExpanded = !errorExpanded; if (errorTimeout) { clearTimeout(errorTimeout); errorTimeout = null; }" 
+                        class="toast-expand-button" 
+                        x-show="errorMessage.stack">
 
+                    <span x-text="errorExpanded ? 'Hide Details' : 'Show Details'"></span>
 
+                </button>
 
+                <button @click="errorMessage = null; errorExpanded = false;" class="toast-close-button">
 
+                    <i class="fas fa-times"></i>
 
+                </button>
 
+            </div>
 
+        </div>
 
+        <div class="toast-content" x-show="errorExpanded" x-transition>
 
+            <span x-text="errorMessage.stack"></span>
 
+        </div>
 
     </div>
 
 <div class="model-selector">
 
   <select @change="if (cstate) cstate.selectedModel = $event.target.value" x-model="cstate.selectedModel" x-init="await populateSelector()" class='model-select'>

+ 50 - 12
exo/tinychat/index.js
Просмотреть файл 

@@ -14,6 +14,8 @@ document.addEventListener("alpine:init", () => {
 
     generating: false,
 
     endpoint: `${window.location.origin}/v1`,
 
     errorMessage: null,
 
+    errorExpanded: false,
 
+    errorTimeout: null,
 
 
     // performance tracking
 
     time_till_first: 0,
 
@@ -166,12 +168,30 @@ document.addEventListener("alpine:init", () => {
 
         localStorage.setItem("pendingMessage", value);
 
         this.processMessage(value);
 
       } catch (error) {
 
-        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)
 
+        console.error('error', error);
 
+        const errorDetails = {
 
+            message: error.message || 'Unknown error',
 
+            stack: error.stack,
 
+            name: error.name || 'Error'
 
+        };
 
+        
+        this.errorMessage = {
 
+            basic: `${errorDetails.name}: ${errorDetails.message}`,
 
+            stack: errorDetails.stack
 
+        };
 
+
 
+        // Clear any existing timeout
 
+        if (this.errorTimeout) {
 
+            clearTimeout(this.errorTimeout);
 
+        }
 
+
 
+        // Only set the timeout if the error details aren't expanded
 
+        if (!this.errorExpanded) {
 
+            this.errorTimeout = setTimeout(() => {
 
+                this.errorMessage = null;
 
+                this.errorExpanded = false;
 
+            }, 30 * 1000);
 
+        }
 
         this.generating = false;
 
       }
 
     },
 
@@ -288,12 +308,30 @@ document.addEventListener("alpine:init", () => {
 
           console.error("Failed to save histories to localStorage:", error);
 
         }
 
       } catch (error) {
 
-        console.error('error', error)
 
-        this.lastErrorMessage = error;
 
-        this.errorMessage = error;
 
-        setTimeout(() => {
 
-          this.errorMessage = null;
 
-        }, 5 * 1000)
 
+        console.error('error', error);
 
+        const errorDetails = {
 
+            message: error.message || 'Unknown error',
 
+            stack: error.stack,
 
+            name: error.name || 'Error'
 
+        };
 
+        
+        this.errorMessage = {
 
+            basic: `${errorDetails.name}: ${errorDetails.message}`,
 
+            stack: errorDetails.stack
 
+        };
 
+
 
+        // Clear any existing timeout
 
+        if (this.errorTimeout) {
 
+            clearTimeout(this.errorTimeout);
 
+        }
 
+
 
+        // Only set the timeout if the error details aren't expanded
 
+        if (!this.errorExpanded) {
 
+            this.errorTimeout = setTimeout(() => {
 
+                this.errorMessage = null;
 
+                this.errorExpanded = false;
 
+            }, 30 * 1000);
 
+        }
 
       } finally {
 
         this.generating = false;
 
       }