🎨 [Frontend] Suport Center: Chat bubble and Fogbugz link (#8369)

Author: odeimaiz

services/static-webserver/client/Manifest.json

@@ -35,6 +35,7 @@
     "css": [
       "jsontreeviewer/jsonTree.css",
       "hint/hint.css",
+      "marked/markdown.css",
       "common/common.css"
     ]
   },

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

@@ -83,17 +83,12 @@ qx.Class.define("osparc.conversation.AddMessage", {
         }
         case "comment-field":
           control = new osparc.editor.MarkdownEditor();
-          control.addListener("keydown", e => {
-            if (e.isCtrlPressed() && e.getKeyIdentifier() === "Enter") {
-              this.addComment();
-              e.stopPropagation();
-              e.preventDefault();
-            }
-          }, this);
-          control.getChildControl("buttons").exclude();
+          control.addListener("textChanged", () => this.__addCommentPressed(), this);
+          control.setCompact(true);
           control.getChildControl("text-area").getContentElement().setStyles({
             "border-top-right-radius": "0px", // no roundness there to match the arrow button
           });
+          // make it more compact
           this.getChildControl("add-comment-layout").add(control, {
             flex: 1
           });
@@ -102,7 +97,8 @@ qx.Class.define("osparc.conversation.AddMessage", {
           control = new qx.ui.form.Button(null, "@FontAwesome5Solid/arrow-up/16").set({
             backgroundColor: "input_background",
             allowGrowX: false,
-            alignX: "right"
+            alignX: "right",
+            alignY: "middle",
           });
           control.getContentElement().setStyles({
             "border-bottom": "1px solid " + qx.theme.manager.Color.getInstance().resolve("default-button-active"),
@@ -161,9 +157,6 @@ qx.Class.define("osparc.conversation.AddMessage", {
         // edit mode
         const commentField = this.getChildControl("comment-field");
         commentField.setText(message["content"]);
-
-        const addMessageButton = this.getChildControl("add-comment-button");
-        addMessageButton.setLabel(this.tr("Edit message"));
       }
     },
 

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

@@ -28,9 +28,7 @@ qx.Class.define("osparc.conversation.MessageUI", {
 
     this.__studyData = studyData;
 
-    const layout = new qx.ui.layout.Grid(12, 2);
-    layout.setColumnFlex(1, 1); // content
-    this._setLayout(layout);
+    this._setLayout(new qx.ui.layout.HBox(10));
     this.setPadding(5);
 
     this.set({
@@ -69,22 +67,22 @@ qx.Class.define("osparc.conversation.MessageUI", {
         case "thumbnail":
           control = new osparc.ui.basic.UserThumbnail(32).set({
             marginTop: 4,
+            alignY: "top",
           });
-          this._add(control, {
-            row: 0,
-            column: isMyMessage ? 2 : 0,
-            rowSpan: 2,
-          });
+          this._addAt(control, isMyMessage ? 1 : 0);
+          break;
+        case "main-layout":
+          control = new qx.ui.container.Composite(new qx.ui.layout.VBox(2).set({
+            alignX: isMyMessage ? "right" : "left"
+          }));
+          this._addAt(control, isMyMessage ? 0 : 1, { flex: 1});
           break;
         case "header-layout":
           control = new qx.ui.container.Composite(new qx.ui.layout.HBox(5).set({
             alignX: isMyMessage ? "right" : "left"
           }));
           control.addAt(new qx.ui.basic.Label("-"), 1);
-          this._add(control, {
-            row: 0,
-            column: 1
-          });
+          this.getChildControl("main-layout").addAt(control, 0);
           break;
         case "user-name":
           control = new qx.ui.basic.Label().set({
@@ -100,25 +98,21 @@ qx.Class.define("osparc.conversation.MessageUI", {
           });
           this.getChildControl("header-layout").addAt(control, isMyMessage ? 0 : 2);
           break;
-        case "message-content":
-          control = new osparc.ui.markdown.Markdown().set({
-            noMargin: true,
-            allowGrowX: true,
-          });
-          control.getContentElement().setStyles({
-            "text-align": isMyMessage ? "right" : "left",
-          });
-          this._add(control, {
-            row: 1,
-            column: 1,
+        case "message-bubble":
+          control = new qx.ui.container.Composite(new qx.ui.layout.VBox().set({
+            alignX: isMyMessage ? "right" : "left"
+          })).set({
+            decorator: "chat-bubble",
+            allowGrowX: false,
+            padding: 8,
           });
+          const bubbleStyle = isMyMessage ? { "border-top-right-radius": "0px" } : { "border-top-left-radius": "0px" };
+          control.getContentElement().setStyles(bubbleStyle);
+          this.getChildControl("main-layout").addAt(control, 1);
           break;
-        case "spacer":
-          control = new qx.ui.core.Spacer();
-          this._add(control, {
-            row: 1,
-            column: isMyMessage ? 0 : 2,
-          });
+        case "message-content":
+          control = new osparc.ui.markdown.MarkdownChat();
+          this.getChildControl("message-bubble").add(control);
           break;
         case "menu-button": {
           const buttonSize = 22;
@@ -129,14 +123,10 @@ qx.Class.define("osparc.conversation.MessageUI", {
             allowGrowY: false,
             marginTop: 4,
             alignY: "top",
-            icon: "@FontAwesome5Solid/ellipsis-v/14",
+            icon: "@FontAwesome5Solid/ellipsis-v/12",
             focusable: false
           });
-          this._add(control, {
-            row: 0,
-            column: 3,
-            rowSpan: 2,
-          });
+          this._addAt(control, 2);
           break;
         }
       }
@@ -145,13 +135,6 @@ qx.Class.define("osparc.conversation.MessageUI", {
     },
 
     __applyMessage: function(message) {
-      const isMyMessage = this.self().isMyMessage(message);
-      this._getLayout().setColumnFlex(isMyMessage ? 0 : 2, 3); // spacer
-
-      const thumbnail = this.getChildControl("thumbnail");
-
-      const userName = this.getChildControl("user-name");
-
       const createdDateData = new Date(message["created"]);
       const createdDate = osparc.utils.Utils.formatDateAndTime(createdDateData);
       const lastUpdate = this.getChildControl("last-updated");
@@ -166,6 +149,8 @@ qx.Class.define("osparc.conversation.MessageUI", {
       const messageContent = this.getChildControl("message-content");
       messageContent.setValue(message["content"]);
 
+      const thumbnail = this.getChildControl("thumbnail");
+      const userName = this.getChildControl("user-name");
       if (message["userGroupId"] === "system") {
         userName.setValue("Support");
       } else {
@@ -180,8 +165,6 @@ qx.Class.define("osparc.conversation.MessageUI", {
           });
       }
 
-      this.getChildControl("spacer");
-
       if (this.self().isMyMessage(message)) {
         const menuButton = this.getChildControl("menu-button");
 

services/static-webserver/client/source/class/osparc/data/model/Conversation.js

@@ -293,6 +293,13 @@ qx.Class.define("osparc.data.model.Conversation", {
       return null;
     },
 
+    getFogbugzLink: function() {
+      if (this.getExtraContext() && "fogbugz_case_url" in this.getExtraContext()) {
+        return this.getExtraContext()["fogbugz_case_url"];
+      }
+      return null;
+    },
+
     getAppointment: function() {
       if (this.getExtraContext() && "appointment" in this.getExtraContext()) {
         return this.getExtraContext()["appointment"];

services/static-webserver/client/source/class/osparc/editor/MarkdownEditor.js

@@ -42,6 +42,14 @@ qx.Class.define("osparc.editor.MarkdownEditor", {
     });
   },
 
+  properties: {
+    compact: {
+      check: "Boolean",
+      init: null,
+      apply: "__applyCompact",
+    }
+  },
+
   members: {
     _createChildControlImpl: function(id) {
       let control;
@@ -69,6 +77,12 @@ qx.Class.define("osparc.editor.MarkdownEditor", {
         }
       }
       return control || this.base(arguments, id);
-    }
+    },
+
+    __applyCompact: function(value) {
+      this.getChildControl("buttons").setVisibility(value ? "excluded" : "visible");
+      this.getChildControl("tabs").getChildControl("bar").setVisibility(value ? "excluded" : "visible");
+      this.getChildControl("subtitle").setVisibility(value ? "excluded" : "visible");
+    },
   }
 });

services/static-webserver/client/source/class/osparc/editor/TextEditor.js

@@ -32,6 +32,15 @@ qx.Class.define("osparc.editor.TextEditor", {
     }
 
     this.__addButtons();
+
+    this.addListener("keydown", e => {
+      if (e.isCtrlPressed() && e.getKeyIdentifier() === "Enter") {
+        const text = this.getChildControl("text-area").getValue();
+        this.fireDataEvent("textChanged", text);
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    }, this);
   },
 
   events: {

services/static-webserver/client/source/class/osparc/study/Conversation.js

@@ -342,6 +342,9 @@ qx.Class.define("osparc.study.Conversation", {
       switch (message["type"]) {
         case "MESSAGE":
           control = new osparc.conversation.MessageUI(message, this.__studyData);
+          control.getChildControl("message-content").set({
+            measurerMaxWidth: 400,
+          });
           control.addListener("messageUpdated", e => this.updateMessage(e.getData()));
           control.addListener("messageDeleted", e => this.deleteMessage(e.getData()));
           break;

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

@@ -105,9 +105,6 @@ qx.Class.define("osparc.support.Conversation", {
           this.bind("conversation", control, "conversationId", {
             converter: conversation => conversation ? conversation.getConversationId() : null
           });
-          // make it more compact
-          control.getChildControl("comment-field").getChildControl("tabs").getChildControl("bar").exclude();
-          control.getChildControl("comment-field").getChildControl("subtitle").exclude();
           this._addAt(control, 4);
           break;
         case "share-project-layout":
@@ -155,6 +152,7 @@ qx.Class.define("osparc.support.Conversation", {
               // make these checks first, setConversation will reload messages
               if (
                 this.__messages.length === 1 &&
+                this.__messages[0]["systemMessageType"] &&
                 this.__messages[0]["systemMessageType"] === osparc.support.Conversation.SYSTEM_MESSAGE_TYPE.BOOK_A_CALL
               ) {
                 isBookACall = true;

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

@@ -196,7 +196,6 @@ qx.Class.define("osparc.support.ConversationPage", {
           return new qx.ui.basic.Label(text).set({
             font: "text-12",
             textColor: "text-disabled",
-            rich: true,
             allowGrowX: true,
             selectable: true,
           });
@@ -207,31 +206,24 @@ qx.Class.define("osparc.support.ConversationPage", {
           if (extraContext && Object.keys(extraContext).length) {
             const ticketIdLabel = createExtraContextLabel(`Ticket ID: ${osparc.utils.Utils.uuidToShort(conversation.getConversationId())}`);
             extraContextLayout.add(ticketIdLabel);
-            const contextProjectId = conversation.getContextProjectId();
-            if (contextProjectId && amISupporter) {
-              const projectIdLabel = createExtraContextLabel(`Project ID: ${osparc.utils.Utils.uuidToShort(contextProjectId)}`);
-              extraContextLayout.add(projectIdLabel);
-            }
-            /*
-            const appointment = conversation.getAppointment();
-            if (appointment) {
-              const appointmentLabel = createExtraContextLabel();
-              let appointmentText = "Appointment: ";
-              if (appointment === "requested") {
-                // still pending
-                appointmentText += appointment;
-              } else {
-                // already set
-                appointmentText += osparc.utils.Utils.formatDateAndTime(new Date(appointment));
-                appointmentLabel.set({
-                  cursor: "pointer",
-                  toolTipText: osparc.utils.Utils.formatDateWithCityAndTZ(new Date(appointment)),
+            if (amISupporter) {
+              const fogbugzLink = conversation.getFogbugzLink();
+              if (fogbugzLink) {
+                const text = "Fogbugz Case: " + fogbugzLink.split("/").pop();
+                const fogbugzLabel = new osparc.ui.basic.LinkLabel(text, fogbugzLink).set({
+                  font: "link-label-12",
+                  textColor: "text-disabled",
+                  allowGrowX: true,
                 });
+                extraContextLayout.add(fogbugzLabel);
+              }
+              const contextProjectId = conversation.getContextProjectId();
+              if (contextProjectId) {
+                const projectIdLabel = createExtraContextLabel(`Project ID: ${osparc.utils.Utils.uuidToShort(contextProjectId)}`);
+                extraContextLayout.add(projectIdLabel);
               }
-              appointmentLabel.setValue(appointmentText);
-              extraContextLayout.add(appointmentLabel);
+
             }
-            */
           }
         };
         updateExtraContext();

services/static-webserver/client/source/class/osparc/theme/Decoration.js

@@ -29,8 +29,9 @@ qx.Theme.define("osparc.theme.Decoration", {
     "chat-bubble": {
       style: {
         radius: 4,
-        width: 1,
-        color: "text-disabled"
+        // width: 1,
+        // color: "text-disabled",
+        backgroundColor: "background-main-2",
       }
     },