From bd78edc4cc7dee1c616596f5a84b9859a6e12924 Mon Sep 17 00:00:00 2001
From: Mutugi <48474421+Mutugiii@users.noreply.github.com>
Date: Fri, 3 May 2024 22:35:09 +0300
Subject: [PATCH] chat: smoother websocket init (fixes #7453) (#7454)

Co-authored-by: dogi <dogi@users.noreply.github.com>
---
 chatapi/src/index.ts                          |  2 +-
 package.json                                  |  6 ++---
 .../chat/chat-window/chat-window.component.ts | 23 +++++++++++-------
 src/app/shared/chat.service.ts                | 24 ++++++++++---------
 4 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/chatapi/src/index.ts b/chatapi/src/index.ts
index 9835fc3ac6..bc9cd72ac3 100644
--- a/chatapi/src/index.ts
+++ b/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`);
     }
   });
 
diff --git a/package.json b/package.json
index 73120ff8be..c945250c11 100755
--- a/package.json
+++ b/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",
diff --git a/src/app/chat/chat-window/chat-window.component.ts b/src/app/chat/chat-window/chat-window.component.ts
index da08ef62df..8f5a00051c 100644
--- a/src/app/chat/chat-window/chat-window.component.ts
+++ b/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) => {
diff --git a/src/app/shared/chat.service.ts b/src/app/shared/chat.service.ts
index e70811d37e..4769500c71 100644
--- a/src/app/shared/chat.service.ts
+++ b/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`);
   }