add logout error handling

Author: nemozak1

components.d.ts

@@ -39,6 +39,8 @@ declare module 'vue' {
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
+    ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
     ElText: typeof import('element-plus/es')['ElText']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     GlossarySearchNav: typeof import('./src/components/GlossarySearchNav.vue')['default']

server/controllers/OpeyController.ts

@@ -46,6 +46,10 @@ export class OpeyController {
         @Res() response: Response,
     ): Promise<Response> {
 
+        if (!session) {
+          console.error("Session not found")
+          return response.status(401).json({ error: 'Session Time Out' })
+        }
         // Check if the consent is in the session, and can be added to the headers
         const opeyConfig = session['opeyConfig']
         if (!opeyConfig) {

server/controllers/OpeyIIController.ts

@@ -158,6 +158,13 @@ export default {
     background-color: #3e4e70;
 }
 
+.assistant .error {
+    color: red;
+    font-weight: bold;
+    align-self: flex-start;
+    font-size: smaller;
+}
+
 .content {
     margin-top: -10px;
     margin-bottom: -10px;

src/components/ChatMessage.vue

@@ -67,18 +67,21 @@ export default {
     <div class="tool-message-container" v-bind:class="expanded? 'expanded':''">
 
         <div class="tool-message-header">
-            <div class="status" v-bind:class="status">
-                <div v-if="status === 'pending'">
-                    <el-icon class="is-loading" color="#20cbeb"><RefreshRight /></el-icon>
+            <div class="tool-name">Tool Call: {{ name }}</div>
+            <div class="right-aligned">
+                <div class="status" v-bind:class="status">
+                    <div v-if="status === 'pending'">
+                        <el-icon class="is-loading" color="#20cbeb"><RefreshRight /></el-icon>
+                    </div>
+                    <div v-else-if="status === 'success'">
+                        <el-icon color="#00ff18"><Check /></el-icon>
+                    </div>
                 </div>
-                <div v-else-if="status === 'success'">
-                    <el-icon color="#00ff18"><Check /></el-icon>
+                <div class="expand-icon" @click="toggleExpanded">
+                    <el-icon><ArrowDown v-if="!expanded" /><ArrowUp v-else /></el-icon>
                 </div>
             </div>
-            <div class="tool-name">{{ name }}</div>
-            <div class="expand-icon" @click="toggleExpanded">
-                <el-icon><ArrowDown v-if="!expanded" /><ArrowUp v-else /></el-icon>
-            </div>
+            
         </div>
 
 
@@ -179,16 +182,26 @@ export default {
     overflow: auto;
 }
 
-
+.status {
+    margin-left: auto;
+    margin-right: 20px;
+}
 
 .expand-icon {
     margin-left: auto;
     cursor: pointer;
 }
 
+.right-aligned {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
 .tool-message-header {
     display: flex;
     flex-direction: row;
+    justify-content: space-between;
     align-items: center;
     width: 100%;
 }

src/components/ToolCall.vue

@@ -202,14 +202,23 @@ export const useChat = defineStore('chat', {
                 }
 
                 if (response.status !== 200) {
+                    switch (response.status) {
+                        case 401:
+                            throw new Error('Unauthorized. Please log in again.');
+                    }
                     throw new Error(`Error sending Opey message: ${response.statusText}`);
                 }
 
                 await this._processOpeyStream(stream);
             } catch (error) {
                 console.error('Error sending Opey message:', error);
 
-                const errorMessage = "Hmmm, Looks like smething went wrong. Please try again later.";
+                let errorMessage = "Hmmm, Looks like smething went wrong. Please try again later.";
+
+                switch (error) {
+                    case 'Unauthorized. Please log in again.':
+                        errorMessage = 'You are not logged in. Please log in to continue.';
+                }
                 // Apply error state to the assistant message
                 await this.applyErrorToMessage(this.currentAssistantMessage.id, errorMessage);