🎨 [Frontend] Suport Center: Chat bubble and Fogbugz link

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/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,25 @@ 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,
           });
+          if (isMyMessage) {
+            bubbleStyle = { "border-top-right-radius": "0px" };
+          } else {
+            bubbleStyle = { "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 +127,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 +139,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 +153,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 +169,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/support/Conversation.js

@@ -155,6 +155,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,21 @@ 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 fogbugzLink = conversation.getFogbugzLink();
+            if (fogbugzLink && amISupporter) {
+              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 && 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)),
-                });
-              }
-              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",
       }
     },