← back to Exo
adding option to expand error to see stack trace and clearing timeout if message is expanded
f67e18a79729d65a32678ef3a4c77e102ed4c5da · 2024-11-12 21:12:12 -0800 · cadenmackenzie
Files touched
M exo/tinychat/index.cssM exo/tinychat/index.htmlM exo/tinychat/index.js
Diff
commit f67e18a79729d65a32678ef3a4c77e102ed4c5da
Author: cadenmackenzie <cadenmackenzie@gmail.com>
Date: Tue Nov 12 21:12:12 2024 -0800
adding option to expand error to see stack trace and clearing timeout if message is expanded
---
exo/tinychat/index.css | 43 ++++++++++++++++++++++++++++++++++++------
exo/tinychat/index.html | 20 ++++++++++++++++----
exo/tinychat/index.js | 50 +++++++++++++++++++++++++++++++++++++------------
3 files changed, 91 insertions(+), 22 deletions(-)
diff --git a/exo/tinychat/index.css b/exo/tinychat/index.css
index f18a73ab..0aa7791e 100644
--- a/exo/tinychat/index.css
+++ b/exo/tinychat/index.css
@@ -203,30 +203,61 @@ main {
left: 0;
right: 0;
display: flex;
- justify-content: space-between;
- align-items: flex-start;
+ flex-direction: column;
white-space: pre-wrap;
font-family: monospace;
}
-.toast span {
- flex: 1;
- margin-right: 16px;
+.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;
+ /* text-decoration: underline; */
}
.toast-close-button {
background: none;
border: none;
color: white;
- padding: 0 8px;
+ 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 {
width: 100%;
position: relative;
diff --git a/exo/tinychat/index.html b/exo/tinychat/index.html
index 6f34a3e7..ac3ba0a5 100644
--- a/exo/tinychat/index.html
+++ b/exo/tinychat/index.html
@@ -27,10 +27,22 @@
<main x-data="state" x-init="console.log(endpoint)">
<!-- Error 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 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">
diff --git a/exo/tinychat/index.js b/exo/tinychat/index.js
index 6426c529..0c6f38e9 100644
--- a/exo/tinychat/index.js
+++ b/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,
@@ -118,16 +120,28 @@ document.addEventListener("alpine:init", () => {
} catch (error) {
console.error('error', error);
const errorDetails = {
- message: error.message || 'Unknown error on handleSend',
+ message: error.message || 'Unknown error',
stack: error.stack,
name: error.name || 'Error'
};
- this.lastErrorMessage = errorDetails;
- this.errorMessage = `${errorDetails.name}: ${errorDetails.message}\n\nStack Trace:\n${errorDetails.stack}`;
- setTimeout(() => {
- this.errorMessage = null;
- }, 30 * 1000)
+ 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;
}
},
@@ -246,16 +260,28 @@ document.addEventListener("alpine:init", () => {
} catch (error) {
console.error('error', error);
const errorDetails = {
- message: error.message || 'Unknown error on processMessage',
+ message: error.message || 'Unknown error',
stack: error.stack,
name: error.name || 'Error'
};
- this.lastErrorMessage = errorDetails;
- this.errorMessage = `${errorDetails.name}: ${errorDetails.message}\n\nStack Trace:\n${errorDetails.stack}`;
- setTimeout(() => {
- this.errorMessage = null;
- }, 30 * 1000)
+ 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;
}
← ead8e289 adding timeout back but making it 30 seconds
·
back to Exo
·
Removed inference state entirely 8b71d57d →