should be able to retry if there are uncaught errors

Author: azmy60

src/assets/styles/pages/_chat-interface.scss

@@ -244,7 +244,7 @@
       text-wrap: wrap;
     }
 
-    .show-more-btn {
+    .btn {
       align-self: flex-start;
       border: 1px solid rgb(from var(--brand-danger) r g b / 30%);
       background-color: rgb(from var(--brand-danger) r g b / 5%);
@@ -258,6 +258,11 @@
         outline: none;
         box-shadow: 0 0 0 2px rgb(from var(--brand-danger) r g b / 20%);
       }
+
+      .material-symbols-outlined {
+        font-size: 1.1rem;
+        margin-right: 0.3rem;
+      }
     }
   }
 }

src/components/ChatInterface.vue

@@ -30,6 +30,10 @@
             >
               {{ showFullError ? "Show less" : "Show more" }}
             </button>
+            <button class="btn" @click="() => reload()">
+              <span class="material-symbols-outlined">refresh</span>
+              Retry
+            </button>
           </div>
         </div>
         <div
@@ -141,6 +145,7 @@ export default {
       askingPermission: ai.askingPermission,
       acceptPermission: ai.acceptPermission,
       rejectPermission: ai.rejectPermission,
+      reload: ai.reload,
     };
   },
 

src/composables/ai.ts

@@ -37,7 +37,7 @@ export function useAI(options: AIOptions) {
 
   let permitted = false;
 
-  const { messages, input, append, error, status, addToolResult, stop } =
+  const { messages, input, append, error, status, addToolResult, stop, reload } =
     useChat({
       fetch: async (url, fetchOptions) => {
         if (!modelId.value) {
@@ -213,5 +213,6 @@ export function useAI(options: AIOptions) {
     rejectPermission,
     send,
     abort,
+    reload,
   };
 }