chat: smoother websocket init (fixes #7453) (#7454)

Co-authored-by: dogi <[email protected]>

chatapi/src/index.ts

@@ -47,7 +47,7 @@ wss.on('connection', (ws) => {
         }));
       }
     } catch (error: any) {
-      ws.send(`Error: ${error.message}`);
+      ws.send(`${error.message}: Cannot connect to the streaming endpoint`);
     }
   });
 

package.json

@@ -1,10 +1,10 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.14.28",
+  "version": "0.14.29",
   "myplanet": {
-    "latest": "v0.14.99",
-    "min": "v0.14.0"
+    "latest": "v0.15.10",
+    "min": "v0.14.10"
   },
   "scripts": {
     "ng": "ng",

src/app/chat/chat-window/chat-window.component.ts

@@ -46,10 +46,8 @@ export class ChatWindowComponent implements OnInit, OnDestroy {
     this.createForm();
     this.subscribeToNewChatSelected();
     this.subscribeToSelectedConversation();
-    this.initializeChatStream();
-    this.initializeErrorStream();
     this.subscribeToAIService();
-    this.isStreamingEnabled();
+    this.checkStreamingStatusAndInitialize();
   }
 
   ngOnDestroy() {
@@ -90,11 +88,6 @@ export class ChatWindowComponent implements OnInit, OnDestroy {
       }));
   }
 
-  isStreamingEnabled() {
-    const configuration = this.stateService.configuration;
-    this.streaming = configuration.streaming;
-  }
-
   createForm() {
     this.promptForm = this.formBuilder.group({
       prompt: [ '', CustomValidators.required ],
@@ -137,6 +130,20 @@ export class ChatWindowComponent implements OnInit, OnDestroy {
     }
   }
 
+  checkStreamingStatusAndInitialize() {
+    this.isStreamingEnabled();
+    if (this.streaming) {
+      this.chatService.initializeWebSocket();
+      this.initializeChatStream();
+      this.initializeErrorStream();
+    }
+  }
+
+  isStreamingEnabled() {
+    const configuration = this.stateService.configuration;
+    this.streaming = configuration.streaming;
+  }
+
   initializeErrorStream() {
     // Subscribe to WebSocket error messages
     this.chatService.getErrorStream().subscribe((errorMessage) => {

src/app/shared/chat.service.ts

@@ -30,19 +30,21 @@ import { CouchService } from '../shared/couchdb.service';
   constructor(
     private httpClient: HttpClient,
     private couchService: CouchService
-  ) {
-    this.socket = new WebSocket('ws' + this.baseUrl.slice(4));
-
-    this.socket.onerror = (error) => {
-      this.errorSubject.next('WebSocket error');
-    };
-
-    // Listen for messages
-    this.socket.addEventListener('message', (event) => {
-      this.chatStreamSubject.next(event.data);
-    });
+  ) { }
+
+  initializeWebSocket() {
+    if (!this.socket || this.socket.readyState === WebSocket.CLOSED) {
+      this.socket = new WebSocket('ws' + this.baseUrl.slice(4));
+      this.socket.onerror = (error) => {
+        this.errorSubject.next('WebSocket error');
+      };
+      this.socket.addEventListener('message', (event) => {
+        this.chatStreamSubject.next(event.data);
+      });
+    }
   }
 
+
   fetchAIProviders() {
     return this.httpClient.get(`${this.baseUrl}/checkproviders`);
   }