✨ [Frontend] OEC to Support chat

services/static-webserver/client/source/class/osparc/FlashMessenger.js

@@ -86,10 +86,12 @@ qx.Class.define("osparc.FlashMessenger", {
         console.error(error);
       }
       const msg = this.extractMessage(error, defaultMessage);
-      const flashMessage = this.getInstance().logAs(msg, "ERROR", duration);
+      let flashMessage = null;
       if (error && error["supportId"]) {
-        flashMessage.addWidget(this.__createCopyOECWidget(msg, error["supportId"]));
-        flashMessage.setDuration(flashMessage.getDuration()*2);
+        flashMessage = new osparc.ui.message.FlashMessageOEC(msg, duration, error["supportId"]);
+        this.getInstance().addFlashMessage(flashMessage);
+      } else {
+        flashMessage = this.getInstance().logAs(msg, "ERROR", duration);
       }
       return flashMessage;
     },
@@ -142,14 +144,15 @@ qx.Class.define("osparc.FlashMessenger", {
 
     log: function(logMessage) {
       const message = this.self().extractMessage(logMessage);
-
       const level = logMessage.level.toUpperCase(); // "DEBUG", "INFO", "WARNING", "ERROR"
-
       const flashMessage = new osparc.ui.message.FlashMessage(message, level, logMessage.duration);
+      this.addFlashMessage(flashMessage);
+      return flashMessage;
+    },
+
+    addFlashMessage: function(flashMessage) {
       flashMessage.addListener("closeMessage", () => this.removeMessage(flashMessage), this);
       this.__messages.push(flashMessage);
-
-      return flashMessage;
     },
 
     /**

services/static-webserver/client/source/class/osparc/conversation/AddMessage.js

@@ -62,10 +62,7 @@ qx.Class.define("osparc.conversation.AddMessage", {
       let control;
       switch (id) {
         case "add-comment-layout": {
-          const grid = new qx.ui.layout.Grid(8, 5);
-          grid.setColumnWidth(0, 32);
-          grid.setColumnFlex(1, 1);
-          control = new qx.ui.container.Composite(grid);
+          control = new qx.ui.container.Composite(new qx.ui.layout.HBox(0));
           this._add(control, {
             flex: 1
           });
@@ -77,39 +74,56 @@ qx.Class.define("osparc.conversation.AddMessage", {
           const myUsername = authData.getUsername();
           const myEmail = authData.getEmail();
           control.set({
-            source: osparc.utils.Avatar.emailToThumbnail(myEmail, myUsername, 32)
-          });
-          const layout = this.getChildControl("add-comment-layout");
-          layout.add(control, {
-            row: 0,
-            column: 0
+            source: osparc.utils.Avatar.emailToThumbnail(myEmail, myUsername, 32),
+            alignX: "center",
+            alignY: "middle",
+            marginRight: 8,
           });
+          this.getChildControl("add-comment-layout").add(control);
           break;
         }
         case "comment-field":
           control = new osparc.editor.MarkdownEditor();
           control.addListener("keydown", e => {
             if (e.isCtrlPressed() && e.getKeyIdentifier() === "Enter") {
-              this.__addComment();
+              this.addComment();
               e.stopPropagation();
               e.preventDefault();
             }
           }, this);
           control.getChildControl("buttons").exclude();
-          const layout = this.getChildControl("add-comment-layout");
-          layout.add(control, {
-            row: 0,
-            column: 1
+          control.getChildControl("text-area").getContentElement().setStyles({
+            "border-top-right-radius": "0px", // no roundness there to match the arrow button
+          });
+          this.getChildControl("add-comment-layout").add(control, {
+            flex: 1
           });
           break;
         case "add-comment-button":
-          control = new qx.ui.form.Button(this.tr("Add message")).set({
-            appearance: "form-button",
+          control = new qx.ui.form.Button(null, "@FontAwesome5Solid/arrow-up/16").set({
+            backgroundColor: "input_background",
             allowGrowX: false,
             alignX: "right"
           });
+          control.getContentElement().setStyles({
+            "border-bottom": "1px solid " + qx.theme.manager.Color.getInstance().resolve("default-button-active"),
+            "border-top-left-radius": "0px", // no roundness there to match the message field
+            "border-bottom-left-radius": "0px", // no roundness there to match the message field
+            "border-bottom-right-radius": "0px", // no roundness there to match the message field
+          });
+          const commentField = this.getChildControl("comment-field").getChildControl("text-area");
+          commentField.addListener("focus", () => {
+            control.getContentElement().setStyles({
+              "border-bottom": "1px solid " + qx.theme.manager.Color.getInstance().resolve("product-color"),
+            });
+          }, this);
+          commentField.addListener("focusout", () => {
+            control.getContentElement().setStyles({
+              "border-bottom": "1px solid " + qx.theme.manager.Color.getInstance().resolve("default-button-active"),
+            });
+          }, this);
           control.addListener("execute", this.__addCommentPressed, this);
-          this._add(control);
+          this.getChildControl("add-comment-layout").add(control);
           break;
         case "notify-user-button":
           control = new qx.ui.form.Button("🔔 " + this.tr("Notify user")).set({
@@ -155,10 +169,10 @@ qx.Class.define("osparc.conversation.AddMessage", {
     },
 
     __addCommentPressed: function() {
-      this.getMessage() ? this.__editComment() : this.__addComment();
+      this.getMessage() ? this.__editComment() : this.addComment();
     },
 
-    __addComment: function() {
+    addComment: function() {
       const conversationId = this.getConversationId();
       if (conversationId) {
         this.__postMessage();

services/static-webserver/client/source/class/osparc/desktop/organizations/ServicesList.js

@@ -122,7 +122,7 @@ qx.Class.define("osparc.desktop.organizations.ServicesList", {
           const orgServices = [];
           Object.keys(servicesLatest).forEach(key => {
             const serviceLatest = servicesLatest[key];
-            if (groupId in serviceLatest["accessRights"]) {
+            if (serviceLatest["accessRights"] && groupId in serviceLatest["accessRights"]) {
               orgServices.push(serviceLatest);
             }
           });

services/static-webserver/client/source/class/osparc/support/ConversationPage.js

@@ -151,7 +151,7 @@ qx.Class.define("osparc.support.ConversationPage", {
       if (conversation && amISupporter) {
         const extraContext = conversation.getExtraContext();
         if (extraContext && Object.keys(extraContext).length) {
-          let extraContextText = `Support ID: ${conversation.getConversationId()}`;
+          let extraContextText = `Ticket ID: ${conversation.getConversationId()}`;
           const contextProjectId = conversation.getContextProjectId();
           if (contextProjectId) {
             extraContextText += `<br>Project ID: ${contextProjectId}`;

services/static-webserver/client/source/class/osparc/support/SupportCenter.js

@@ -37,9 +37,7 @@ qx.Class.define("osparc.support.SupportCenter", {
 
     this.getChildControl("conversations-intro-text");
     this.getChildControl("conversations-list");
-    if (!osparc.store.Products.getInstance().amIASupportUser()) {
-      this.getChildControl("ask-a-question-button");
-    }
+    this.getChildControl("ask-a-question-button");
   },
 
   statics: {

services/static-webserver/client/source/class/osparc/ui/markdown/Markdown.js

@@ -100,6 +100,9 @@ qx.Class.define("osparc.ui.markdown.Markdown", {
           }
         };
         marked.use({ renderer });
+        // By default, Markdown requires two spaces at the end of a line or a blank line between paragraphs to produce a line break.
+        // With this, a single line break (Enter) in your Markdown input will render as a <br> in HTML.
+        marked.setOptions({ breaks: true }); //
 
         const html = marked.parse(value);
 

services/static-webserver/client/source/class/osparc/ui/message/FlashMessageOEC.js

@@ -0,0 +1,158 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2025 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+qx.Class.define("osparc.ui.message.FlashMessageOEC", {
+  extend: osparc.ui.message.FlashMessage,
+
+  /**
+   * Constructor for the FlashMessage.
+   *
+   * @param {String} message Message that the user will read.
+   * @param {Number} duration
+   * @param {String} supportId
+   */
+  construct: function(message, duration, supportId) {
+    this.base(arguments, message, "ERROR", duration ? duration*2 : null);
+
+    if (osparc.product.Utils.isSupportEnabled()) {
+      this.getChildControl("contact-support");
+    } else {
+      const oecAtom = this.getChildControl("oec-atom");
+      this.bind("supportId", oecAtom, "label");
+    }
+    if (supportId) {
+      this.setSupportId(supportId);
+    }
+  },
+
+  properties: {
+    supportId: {
+      check: "String",
+      init: "",
+      nullable: true,
+      event: "changeSupportId",
+    },
+  },
+
+  members: {
+    _createChildControlImpl: function(id) {
+      let control;
+      switch (id) {
+        case "oec-atom":
+          control = new qx.ui.basic.Atom().set({
+            icon: "@FontAwesome5Solid/copy/10",
+            iconPosition: "right",
+            gap: 8,
+            cursor: "pointer",
+            alignX: "center",
+            allowGrowX: false,
+          });
+          control.addListener("tap", () => this.__copyToClipboard());
+          this.addWidget(control);
+          break;
+        case "contact-support":
+          control = new qx.ui.basic.Atom().set({
+            label: this.tr("Contact Support"),
+            icon: "@FontAwesome5Solid/comments/10",
+            iconPosition: "left",
+            gap: 8,
+            cursor: "pointer",
+            alignX: "center",
+            allowGrowX: false,
+          });
+          control.addListener("tap", () => this.__openSupportChat());
+          this.addWidget(control);
+          break;
+      }
+      return control || this.base(arguments, id);
+    },
+
+    __getContext: function() {
+      const dataToClipboard = {
+        message: this.getMessage(),
+        supportId: this.getSupportId(),
+        timestamp: new Date().toString(),
+        url: window.location.href,
+        releaseTag: osparc.utils.Utils.getReleaseTag(),
+      }
+      if (osparc.store.Store.getInstance().getCurrentStudy()) {
+        dataToClipboard["projectId"] = osparc.store.Store.getInstance().getCurrentStudy().getUuid();
+      }
+      return osparc.utils.Utils.prettifyJson(dataToClipboard);
+    },
+
+    __getSupportFriendlyContext: function() {
+      let curatedText = "Extra Context:";
+      curatedText += "\nError: " + this.getMessage();
+      curatedText += "\nSupportID: " + this.getSupportId();
+      curatedText += "\nTimestamp: " + new Date().toISOString();
+      curatedText += "\nURL: " + window.location.href;
+      curatedText += "\nRelease Tag: " + osparc.utils.Utils.getReleaseTag();
+      if (osparc.store.Store.getInstance().getCurrentStudy()) {
+        curatedText += "\nProject ID: " + osparc.store.Store.getInstance().getCurrentStudy().getUuid();
+      }
+      return curatedText;
+    },
+
+    __copyToClipboard: function() {
+      osparc.utils.Utils.copyTextToClipboard(this.__getContext());
+    },
+
+    __openSupportChat: function() {
+      const supportCenter = osparc.support.SupportCenter.openWindow();
+      supportCenter.openConversation(null);
+
+      const textToAddMessageField = msg => {
+        if (
+          supportCenter.getChildControl("conversation-page") &&
+          supportCenter.getChildControl("conversation-page").getChildControl("conversation-content") &&
+          supportCenter.getChildControl("conversation-page").getChildControl("conversation-content").getChildControl("add-message") &&
+          supportCenter.getChildControl("conversation-page").getChildControl("conversation-content").getChildControl("add-message").getChildControl("comment-field")
+        ) {
+          supportCenter.getChildControl("conversation-page").getChildControl("conversation-content").getChildControl("add-message").getChildControl("comment-field").setText(msg);
+          supportCenter.getChildControl("conversation-page").getChildControl("conversation-content").getChildControl("add-message").addComment();
+        }
+      }
+
+      const caption = this.tr("Something went wrong");
+      const introText = this.tr("Please describe what you were doing before the error (optional).\nThis will help our support team understand the context and resolve the issue faster.");
+      const confirmationWindow = new osparc.ui.window.Confirmation(introText);
+      confirmationWindow.setCaption(caption);
+      confirmationWindow.getChildControl("message-label").setFont("text-13");
+      const extraContextTA = new qx.ui.form.TextArea().set({
+        font: "text-13",
+        autoSize: true,
+        minHeight: 70,
+        maxHeight: 140
+      });
+      confirmationWindow.addWidget(extraContextTA);
+      confirmationWindow.addCancelButton();
+      confirmationWindow.setConfirmText(this.tr("Send Report"));
+      confirmationWindow.open();
+      confirmationWindow.addListener("close", () => {
+        if (confirmationWindow.getConfirmed()) {
+          const extraContext = extraContextTA.getValue()
+          const friendlyContext = this.__getSupportFriendlyContext();
+          const text = "Dear Support Team,\n" + extraContext + "\n" + friendlyContext;
+          textToAddMessageField(text);
+        } else {
+          supportCenter.close();
+        }
+      });
+    },
+  }
+});