Add connection loading indicator and logging for Opey

Author: nemozak1

components.d.ts

@@ -44,4 +44,7 @@ declare module 'vue' {
     RouterView: typeof import('vue-router')['RouterView']
     SearchNav: typeof import('./src/components/SearchNav.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }

server/controllers/OpeyController.ts

@@ -114,7 +114,8 @@ export class OpeyController {
         username: obpUsername,
         exp: Math.floor(Date.now() / 1000) + (60 * 60),
       };
-  
+      
+      console.log("Generating new token for Opey");
       const token = jwt.sign(payload, privateKey, { algorithm: 'RS256' });
       session['opeyToken'] = token;
 

src/components/ChatWidget.vue

@@ -70,13 +70,16 @@
 
       const { isStreaming, chatMessages, currentMessageSnapshot, lastError } = storeToRefs(chatStore);
 
-      return {isStreaming, chatMessages, lastError, currentMessageSnapshot, chatStore, connectionStore}
+      const { isConnected } = storeToRefs(connectionStore);
+
+      return {isStreaming, chatMessages, lastError, currentMessageSnapshot, chatStore, connectionStore, isConnected}
     },
     data() {
       return {
         isOpen: false,
         userInput: '',
         sessionId: uuidv4(),
+        awaitingConnection: !this.isConnected,
         isLoading: false,
         obpApiHost: null,
         isLoggedIn: null,
@@ -117,18 +120,27 @@
         try {
           token = await getOpeyJWT()
         } catch (error) {
+          console.log('Error creating JWT for opey: ', error)
           this.errorState = true
           ElMessage({
             message: 'Error getting Opey JWT token',
             type: 'error'
           });
-          console.log(error)
-          token = ''
+          
         }
  
         // Establish the WebSocket connection
         console.log('Establishing WebSocket connection');
-        this.connectionStore.connect(token)
+        try{
+          this.connectionStore.connect(token)
+        } catch (error) {
+          console.log('Error establishing WebSocket connection: ', error)
+          this.errorState = true
+          ElMessage({
+            message: 'Error establishing WebSocket connection',
+            type: 'error'
+          });
+        }
       
       },
       async sendMessage() {
@@ -257,7 +269,7 @@
           <span>Chat with Opey</span>
           <img alt="Powered by OpenAI" src="@/assets/powered-by-openai-badge-outlined-on-dark.svg" height="32">
         </div>
-        <div v-if="this.isLoggedIn" class="chat-messages" ref="messages">
+        <div v-if="this.isLoggedIn" v-loading="this.awaitingConnection" element-loading-text="Awaiting Connection..." class="chat-messages" ref="messages">
           <div v-for="(message, index) in chatMessages" :key="index" :class="['chat-message', message.role]">
             <div v-if="(this.isStreaming)&&(index === this.chatMessages.length -1)">
               <div v-html="renderMarkdown(this.currentMessageSnapshot)"></div>
@@ -300,6 +312,8 @@
             <div class="dot"></div>
             <div class="dot"></div>
           </div>
+          
+          
         </div>
         <div v-else class="chat-messages">
           <p>Opey is only availabled when logged in. <a v-bind:href="'/api/connect'">Log In</a> </p>
@@ -317,14 +331,14 @@
             placeholder="Type your message..."
             @keypress="submitEnter"
             type="textarea"
-            :disabled="!isLoggedIn ? '' : disabled"
+            :disabled="!isLoggedIn || this.awaitingConnection ? '' : disabled"
           >
           </el-input>
           <!--<textarea v-model="userInput" placeholder="Type your message..." @keypress="submitEnter"></textarea>-->
           <button 
             @click="sendMessage" 
-            :disabled="!isLoggedIn ? '' : disabled"
-            :style="!isLoggedIn ? 'background-color:#929292; cursor:not-allowed' : ''"
+            :disabled="!isLoggedIn || this.awaitingConnection ? '' : disabled"
+            :style="!isLoggedIn || this.awaitingConnection ? 'background-color:#929292; cursor:not-allowed' : ''"
           >
           Send
           </button>

src/obp/common-functions.ts

@@ -74,8 +74,13 @@ export async function getCacheStorageInfo() {
 
 export async function getOpeyJWT() {
   const response = await axios.post('/api/opey/token').catch((error) => {
-    console.log(error)
-  })
+    if (error.response) {
+      throw new Error(`getOpeyJWT returned an error: ${error.toJSON()}`);
+      
+    } else {
+      throw new Error(`getOpeyJWT returned an error: ${error.message}`);
+    }
+  });
   const token = String(response?.data?.token)
   return token
 }

src/stores/connection.ts

@@ -60,7 +60,13 @@ export const useConnectionStore = defineStore("connection", {
      */
     connect(token: string) {
       socket.auth = { token };
-      socket.connect();
+      console.log("connectionStore says: connecting to websocket")
+      try {
+        socket.connect();
+      } catch (error) { 
+        console.error("connectionStore says: error connecting to websocket", error)
+      }
+      
     }
   },
 });