🎨 [Frontend] Support Conversations: Listen to websocket (#8276)

odeimaiz · web-flow · commit 1df610cebdc9 · 2025-09-01T11:08:56.000+02:00
diff --git a/services/static-webserver/client/source/class/osparc/data/model/Conversation.js b/services/static-webserver/client/source/class/osparc/data/model/Conversation.js
@@ -40,7 +40,22 @@ qx.Class.define("osparc.data.model.Conversation", {
     });
 
     this.__messages = [];
-    this.__fetchLastMessage();
+    this.__listenToConversationMessageWS();
+
+    if (conversationData.type === "SUPPORT") {
+      this.__fetchLastMessage();
+    }
+  },
+
+  statics: {
+    CHANNELS: {
+      CONVERSATION_CREATED: "conversation:created",
+      CONVERSATION_UPDATED: "conversation:updated",
+      CONVERSATION_DELETED: "conversation:deleted",
+      CONVERSATION_MESSAGE_CREATED: "conversation:message:created",
+      CONVERSATION_MESSAGE_UPDATED: "conversation:message:updated",
+      CONVERSATION_MESSAGE_DELETED: "conversation:message:deleted",
+    },
   },
 
   properties: {
@@ -121,6 +136,12 @@ qx.Class.define("osparc.data.model.Conversation", {
     },
   },
 
+  events: {
+    "messageAdded": "qx.event.type.Data",
+    "messageUpdated": "qx.event.type.Data",
+    "messageDeleted": "qx.event.type.Data",
+  },
+
   members: {
     __fetchLastMessagePromise: null,
     __nextRequestParams: null,
@@ -139,6 +160,35 @@ qx.Class.define("osparc.data.model.Conversation", {
       }
     },
 
+    __listenToConversationMessageWS: function() {
+      const socket = osparc.wrapper.WebSocket.getInstance();
+      [
+        this.self().CHANNELS.CONVERSATION_MESSAGE_CREATED,
+        this.self().CHANNELS.CONVERSATION_MESSAGE_UPDATED,
+        this.self().CHANNELS.CONVERSATION_MESSAGE_DELETED,
+      ].forEach(eventName => {
+        const eventHandler = message => {
+          if (message) {
+            const conversationId = message["conversationId"];
+            if (conversationId === this.getConversationId()) {
+              switch (eventName) {
+                case this.self().CHANNELS.CONVERSATION_MESSAGE_CREATED:
+                  this.addMessage(message);
+                  break;
+                case this.self().CHANNELS.CONVERSATION_MESSAGE_UPDATED:
+                  this.updateMessage(message);
+                  break;
+                case this.self().CHANNELS.CONVERSATION_MESSAGE_DELETED:
+                  this.deleteMessage(message);
+                  break;
+              }
+            }
+          }
+        };
+        socket.on(eventName, eventHandler, this);
+      });
+    },
+
     __fetchLastMessage: function() {
       if (this.__fetchLastMessagePromise) {
         return this.__fetchLastMessagePromise;
@@ -201,13 +251,34 @@ qx.Class.define("osparc.data.model.Conversation", {
         const found = this.__messages.find(msg => msg["messageId"] === message["messageId"]);
         if (!found) {
           this.__messages.push(message);
+          this.fireDataEvent("messageAdded", message);
         }
         // latest first
         this.__messages.sort((a, b) => new Date(b.created) - new Date(a.created));
         this.setLastMessage(this.__messages[0]);
       }
     },
 
+    updateMessage: function(message) {
+      if (message) {
+        const found = this.__messages.find(msg => msg["messageId"] === message["messageId"]);
+        if (found) {
+          Object.assign(found, message);
+          this.fireDataEvent("messageUpdated", found);
+        }
+      }
+    },
+
+    deleteMessage: function(message) {
+      if (message) {
+        const found = this.__messages.find(msg => msg["messageId"] === message["messageId"]);
+        if (found) {
+          this.__messages.splice(this.__messages.indexOf(found), 1);
+          this.fireDataEvent("messageDeleted", found);
+        }
+      }
+    },
+
     getContextProjectId: function() {
       if (this.getExtraContext() && "projectId" in this.getExtraContext()) {
         return this.getExtraContext()["projectId"];
diff --git a/services/static-webserver/client/source/class/osparc/info/StudyLarge.js b/services/static-webserver/client/source/class/osparc/info/StudyLarge.js
@@ -60,9 +60,9 @@ qx.Class.define("osparc.info.StudyLarge", {
       if (
         this.__canIWrite() &&
         this.getStudy().getTemplateType() &&
-        osparc.data.Permissions.getInstance().isTester()
+        osparc.data.Permissions.getInstance().isProductOwner()
       ) {
-        // let testers change the template type
+        // let product owners change the template type
         const hBox = new qx.ui.container.Composite(new qx.ui.layout.HBox(5).set({
           alignY: "middle",
         }));
diff --git a/services/static-webserver/client/source/class/osparc/product/Utils.js b/services/static-webserver/client/source/class/osparc/product/Utils.js
@@ -289,7 +289,7 @@ qx.Class.define("osparc.product.Utils", {
     },
 
     showTemplates: function() {
-      if (osparc.data.Permissions.getInstance().isTester()) {
+      if (osparc.data.Permissions.getInstance().isProductOwner()) {
         return true;
       }
 
@@ -300,7 +300,7 @@ qx.Class.define("osparc.product.Utils", {
     },
 
     showPublicProjects: function() {
-      if (osparc.data.Permissions.getInstance().isTester()) {
+      if (osparc.data.Permissions.getInstance().isProductOwner()) {
         return true;
       }
 
diff --git a/services/static-webserver/client/source/class/osparc/store/ConversationsSupport.js b/services/static-webserver/client/source/class/osparc/store/ConversationsSupport.js
@@ -37,7 +37,7 @@ qx.Class.define("osparc.store.ConversationsSupport", {
   },
 
   members: {
-    getConversations: function() {
+    fetchConversations: function() {
       const params = {
         url: {
           offset: 0,
diff --git a/services/static-webserver/client/source/class/osparc/study/Conversation.js b/services/static-webserver/client/source/class/osparc/study/Conversation.js
@@ -21,16 +21,17 @@ qx.Class.define("osparc.study.Conversation", {
 
   /**
     * @param studyData {String} Study Data
-    * @param conversationId {String} Conversation Id
+    * @param conversationData {Object} Conversation Data
     */
-  construct: function(studyData, conversationId) {
+  construct: function(studyData, conversationData) {
     this.base(arguments);
 
     this.__studyData = studyData;
     this.__messages = [];
 
-    if (conversationId) {
-      this.setConversationId(conversationId);
+    if (conversationData) {
+      const conversation = new osparc.data.model.Conversation(conversationData);
+      this.setConversation(conversation);
     }
 
     this._setLayout(new qx.ui.layout.VBox(5));
@@ -51,11 +52,12 @@ qx.Class.define("osparc.study.Conversation", {
   },
 
   properties: {
-    conversationId: {
-      check: "String",
+    conversation: {
+      check: "osparc.data.model.Conversation",
       init: null,
       nullable: false,
-      event: "changeConversationId"
+      event: "changeConversation",
+      apply: "__applyConversation",
     },
   },
 
@@ -68,6 +70,28 @@ qx.Class.define("osparc.study.Conversation", {
     __messagesList: null,
     __loadMoreMessages: null,
 
+    __applyConversation: function(conversation) {
+      conversation.addListener("messageAdded", e => {
+        const message = e.getData();
+        this.addMessage(message);
+      }, this);
+      conversation.addListener("messageUpdated", e => {
+        const message = e.getData();
+        this.updateMessage(message);
+      }, this);
+      conversation.addListener("messageDeleted", e => {
+        const message = e.getData();
+        this.deleteMessage(message);
+      }, this);
+    },
+
+    getConversationId: function() {
+      if (this.getConversation()) {
+        return this.getConversation().getConversationId();
+      }
+      return null;
+    },
+
     __addConversationButtons: function() {
       const tabButton = this.getChildControl("button");
 
@@ -93,7 +117,8 @@ qx.Class.define("osparc.study.Conversation", {
             // create new conversation first
             osparc.store.ConversationsProject.getInstance().postConversation(this.__studyData["uuid"], newLabel)
               .then(data => {
-                this.setConversationId(data["conversationId"]);
+                const conversation = new osparc.data.model.Conversation(data);
+                this.setConversation(conversation);
                 this.getChildControl("button").setLabel(newLabel);
               });
           }
@@ -135,7 +160,7 @@ qx.Class.define("osparc.study.Conversation", {
         row: 0,
         column: 4
       });
-      this.bind("conversationId", closeButton, "visibility", {
+      this.bind("conversation", closeButton, "visibility", {
         converter: value => value ? "visible" : "excluded"
       });
     },
@@ -174,8 +199,14 @@ qx.Class.define("osparc.study.Conversation", {
       });
       addMessages.addListener("messageAdded", e => {
         const data = e.getData();
-        if (data["conversationId"]) {
-          this.setConversationId(data["conversationId"]);
+        if (data["conversationId"] && this.getConversation() === null) {
+          osparc.store.ConversationsProject.getInstance().getConversation(this.__studyData["uuid"], data["conversationId"])
+            .then(conversationData => {
+              const conversation = new osparc.data.model.Conversation(conversationData);
+              this.setConversation(conversation);
+            });
+        } else {
+          this.getConversation().addMessage(data);
           this.addMessage(data);
         }
       });
diff --git a/services/static-webserver/client/source/class/osparc/study/Conversations.js b/services/static-webserver/client/source/class/osparc/study/Conversations.js
@@ -47,15 +47,6 @@ qx.Class.define("osparc.study.Conversations", {
   },
 
   statics: {
-    CHANNELS: {
-      CONVERSATION_CREATED: "conversation:created",
-      CONVERSATION_UPDATED: "conversation:updated",
-      CONVERSATION_DELETED: "conversation:deleted",
-      CONVERSATION_MESSAGE_CREATED: "conversation:message:created",
-      CONVERSATION_MESSAGE_UPDATED: "conversation:message:updated",
-      CONVERSATION_MESSAGE_DELETED: "conversation:message:deleted",
-    },
-
     popUpInWindow: function(studyData, openConversationId = null) {
       const conversations = new osparc.study.Conversations(studyData, openConversationId);
       const title = qx.locale.Manager.tr("Conversations");
@@ -72,7 +63,7 @@ qx.Class.define("osparc.study.Conversations", {
 
     makeButtonBlink: function(button) {
       const socket = osparc.wrapper.WebSocket.getInstance();
-      Object.values(osparc.study.Conversations.CHANNELS).forEach(eventName => {
+      Object.values(osparc.data.model.Conversation.CHANNELS).forEach(eventName => {
         socket.on(eventName, () => {
           if (button) {
             osparc.utils.Utils.makeButtonBlink(button);
@@ -112,22 +103,22 @@ qx.Class.define("osparc.study.Conversations", {
       const socket = osparc.wrapper.WebSocket.getInstance();
 
       [
-        this.self().CHANNELS.CONVERSATION_CREATED,
-        this.self().CHANNELS.CONVERSATION_UPDATED,
-        this.self().CHANNELS.CONVERSATION_DELETED,
+        osparc.data.model.Conversation.CHANNELS.CONVERSATION_CREATED,
+        osparc.data.model.Conversation.CHANNELS.CONVERSATION_UPDATED,
+        osparc.data.model.Conversation.CHANNELS.CONVERSATION_DELETED,
       ].forEach(eventName => {
         const eventHandler = conversation => {
           if (conversation) {
             switch (eventName) {
-              case this.self().CHANNELS.CONVERSATION_CREATED:
+              case osparc.data.model.Conversation.CHANNELS.CONVERSATION_CREATED:
                 if (conversation["projectId"] === this.getStudyData()["uuid"]) {
                   this.__addConversationPage(conversation);
                 }
                 break;
-              case this.self().CHANNELS.CONVERSATION_UPDATED:
+              case osparc.data.model.Conversation.CHANNELS.CONVERSATION_UPDATED:
                 this.__updateConversationName(conversation);
                 break;
-              case this.self().CHANNELS.CONVERSATION_DELETED:
+              case osparc.data.model.Conversation.CHANNELS.CONVERSATION_DELETED:
                 this.__removeConversationPage(conversation["conversationId"]);
                 break;
             }
@@ -136,38 +127,10 @@ qx.Class.define("osparc.study.Conversations", {
         socket.on(eventName, eventHandler, this);
         this.__wsHandlers.push({ eventName, handler: eventHandler });
       });
-
-      [
-        this.self().CHANNELS.CONVERSATION_MESSAGE_CREATED,
-        this.self().CHANNELS.CONVERSATION_MESSAGE_UPDATED,
-        this.self().CHANNELS.CONVERSATION_MESSAGE_DELETED,
-      ].forEach(eventName => {
-        const eventHandler = message => {
-          if (message) {
-            const conversationId = message["conversationId"];
-            const conversationPage = this.__getConversationPage(conversationId);
-            if (conversationPage) {
-              switch (eventName) {
-                case this.self().CHANNELS.CONVERSATION_MESSAGE_CREATED:
-                  conversationPage.addMessage(message);
-                  break;
-                case this.self().CHANNELS.CONVERSATION_MESSAGE_UPDATED:
-                  conversationPage.updateMessage(message);
-                  break;
-                case this.self().CHANNELS.CONVERSATION_MESSAGE_DELETED:
-                  conversationPage.deleteMessage(message);
-                  break;
-              }
-            }
-          }
-        };
-        socket.on(eventName, eventHandler, this);
-        this.__wsHandlers.push({ eventName, handler: eventHandler });
-      });
     },
 
     __getConversationPage: function(conversationId) {
-      return this.__conversationsPages.find(conversation => conversation.getConversationId() === conversationId);
+      return this.__conversationsPages.find(conversationPage => conversationPage.getConversationId() === conversationId);
     },
 
     __applyStudyData: function(studyData) {
@@ -200,9 +163,9 @@ qx.Class.define("osparc.study.Conversations", {
       const studyData = this.getStudyData();
       let conversationPage = null;
       if (conversationData) {
-        const conversationId = conversationData["conversationId"];
-        conversationPage = new osparc.study.Conversation(studyData, conversationId);
+        conversationPage = new osparc.study.Conversation(studyData, conversationData);
         conversationPage.setLabel(conversationData["name"]);
+        const conversationId = conversationData["conversationId"];
         osparc.store.ConversationsProject.getInstance().addListener("conversationDeleted", e => {
           const data = e.getData();
           if (conversationId === data["conversationId"]) {
diff --git a/services/static-webserver/client/source/class/osparc/study/SaveAsTemplate.js b/services/static-webserver/client/source/class/osparc/study/SaveAsTemplate.js
@@ -67,7 +67,7 @@ qx.Class.define("osparc.study.SaveAsTemplate", {
       });
       form.add(publishWithData, this.tr("Publish with data"), null, "publishWithData");
 
-      if (osparc.data.Permissions.getInstance().isTester()) {
+      if (osparc.data.Permissions.getInstance().isProductOwner()) {
         const templateTypeSB = osparc.study.Utils.createTemplateTypeSB();
         form.add(templateTypeSB, this.tr("Template Type"), null, "templateType");
       }
diff --git a/services/static-webserver/client/source/class/osparc/support/Conversation.js b/services/static-webserver/client/source/class/osparc/support/Conversation.js
diff --git a/services/static-webserver/client/source/class/osparc/support/Conversations.js b/services/static-webserver/client/source/class/osparc/support/Conversations.js

Original file line number	Diff line number	Diff line change
`@@ -289,7 +289,7 @@ qx.Class.define("osparc.product.Utils", {`
`289`	`289`	`},`
`290`	`290`
`291`	`291`	`showTemplates: function() {`
`292`		`- if (osparc.data.Permissions.getInstance().isTester()) {`
	`292`	`+ if (osparc.data.Permissions.getInstance().isProductOwner()) {`
`293`	`293`	`return true;`
`294`	`294`	`}`
`295`	`295`
`@@ -300,7 +300,7 @@ qx.Class.define("osparc.product.Utils", {`
`300`	`300`	`},`
`301`	`301`
`302`	`302`	`showPublicProjects: function() {`
`303`		`- if (osparc.data.Permissions.getInstance().isTester()) {`
	`303`	`+ if (osparc.data.Permissions.getInstance().isProductOwner()) {`
`304`	`304`	`return true;`
`305`	`305`	`}`
`306`	`306`
Original file line number	Diff line number	Diff line change
`@@ -67,7 +67,7 @@ qx.Class.define("osparc.study.SaveAsTemplate", {`
`67`	`67`	`});`
`68`	`68`	`form.add(publishWithData, this.tr("Publish with data"), null, "publishWithData");`
`69`	`69`
`70`		`- if (osparc.data.Permissions.getInstance().isTester()) {`
	`70`	`+ if (osparc.data.Permissions.getInstance().isProductOwner()) {`
`71`	`71`	`const templateTypeSB = osparc.study.Utils.createTemplateTypeSB();`
`72`	`72`	`form.add(templateTypeSB, this.tr("Template Type"), null, "templateType");`
`73`	`73`	`}`