[#9657] system messages ui changes in group chat

Signed-off-by: Andrea Maria Piana <andrea.maria.piana@gmail.com>

src/status_im/constants.cljs

@@ -12,6 +12,7 @@
 (def ^:const content-type-status 3)
 (def ^:const content-type-emoji 4)
 (def ^:const content-type-command 5)
+(def ^:const content-type-system-text 6)
 
 (def ^:const message-type-one-to-one 1)
 (def ^:const message-type-public-group 2)

src/status_im/ui/screens/chat/message/message.cljs

@@ -19,23 +19,24 @@
 
 (defview mention-element [from]
   (letsubs [{:keys [ens-name alias]} [:contacts/contact-name-by-identity from]]
-    (str "@" (or ens-name alias))))
+    (if ens-name (str "@" ens-name) alias)))
 
 (defn message-timestamp
-  [t justify-timestamp? outgoing content content-type]
+  ([message]
-  [react/text {:style (style/message-timestamp-text
+   [message-timestamp message false])
-                       justify-timestamp?
+  ([{:keys [timestamp-str outgoing content content-type]} justify-timestamp?]
-                       outgoing
+   [react/text {:style (style/message-timestamp-text
-                       (:rtl? content)
+                        justify-timestamp?
-                       (= content-type constants/content-type-emoji))} t])
+                        outgoing
+                        (:rtl? content)
+                        (= content-type constants/content-type-emoji))} timestamp-str]))
 
 (defn message-bubble-wrapper
-  [{:keys [timestamp-str outgoing content content-type] :as message}
+  [message message-content appender]
-   message-content {:keys [justify-timestamp?]}]
+  [react/view
-  [react/view (style/message-view message)
+   (style/message-view message)
    message-content
-   [message-timestamp timestamp-str justify-timestamp? outgoing
+   appender])
-    content content-type]])
 
 (defview quoted-message
   [message-id {:keys [from text]} outgoing current-public-key]
@@ -53,7 +54,7 @@
                     :number-of-lines 5}
         (or text (:text quote))]])))
 
-(defn render-inline [message-text outgoing acc {:keys [type literal destination]}]
+(defn render-inline [message-text outgoing content-type acc {:keys [type literal destination]}]
   (case type
     ""
     (conj acc literal)
@@ -84,13 +85,13 @@
 
     "mention"
     (conj acc [react/text-class
-               {:style {:color (if outgoing colors/mention-outgoing colors/mention-incoming)}
+               {:style {:color (cond
-                :on-press
+                                 (= content-type constants/content-type-system-text) colors/black
-                #(re-frame/dispatch
+                                 outgoing colors/mention-outgoing
-                  [:chat.ui/start-chat literal {:navigation-reset? true}])}
+                                 :else colors/mention-incoming)}
-               [mention-element literal]])
+                :on-press (when-not (= content-type constants/content-type-system-text)
-
+                            #(re-frame/dispatch [:chat.ui/start-chat literal {:navigation-reset? true}]))}
-    "status-tag"
+               [mention-element literal]]) "status-tag"
     (conj acc [react/text-class
                {:style {:color (if outgoing colors/white colors/blue)
                         :text-decoration-line :underline}
@@ -102,22 +103,22 @@
 
     (conj acc literal)))
 
-(defview message-content-status [{:keys [content]}]
+(defview message-content-status [{:keys [content content-type]}]
   [react/view style/status-container
    [react/text {:style style/status-text}
     (reduce
-     (fn [acc e] (render-inline (:text content) false acc e))
+     (fn [acc e] (render-inline (:text content) false content-type acc e))
      [react/text-class {:style style/status-text}]
      (-> content :parsed-text peek :children))]])
 
-(defn render-block [{:keys [content outgoing]} acc
+(defn render-block [{:keys [content outgoing content-type]} acc
                     {:keys [type literal children]}]
   (case type
 
     "paragraph"
     (conj acc (reduce
-               (fn [acc e] (render-inline (:text content) outgoing acc e))
+               (fn [acc e] (render-inline (:text content) outgoing content-type acc e))
-               [react/text-class (style/text-style outgoing)]
+               [react/text-class (style/text-style outgoing content-type)]
                children))
 
     "blockquote"
@@ -132,15 +133,17 @@
 
     acc))
 
-(defn render-parsed-text [{:keys [timestamp-str outgoing] :as message} tree]
+(defn render-parsed-text [message tree]
-  (let [elements (reduce (fn [acc e] (render-block message acc e)) [react/view {}] tree)
+  (reduce (fn [acc e] (render-block message acc e)) [react/view {}] tree))
+
+(defn render-parsed-text-with-timestamp [{:keys [timestamp-str outgoing] :as message} tree]
+  (let [elements (render-parsed-text message tree)
         timestamp [react/text {:style (style/message-timestamp-placeholder outgoing)}
                    (str "  " timestamp-str)]
         last-element (peek elements)]
-      ;; TODO (perf)
+    ;; Using `nth` here as slightly faster than `first`, roughly 30%
-      ;; Using `nth` here as slightly faster than `first`, roughly 30%
+    ;; It's worth considering pure js structures for this code path as
-      ;; It's worth considering pure js structures for this code path as
+    ;; it's perfomance critical
-      ;; it's perfomance critical
     (if (= react/text-class (nth last-element 0))
       ;; Append timestamp to last text
       (conj (pop elements) (conj last-element timestamp))
@@ -154,8 +157,14 @@
      [react/view
       (when (seq response-to)
         [quoted-message response-to (:quoted-message message) outgoing current-public-key])
-      [render-parsed-text message (:parsed-text content)]])
+      [render-parsed-text-with-timestamp message (:parsed-text content)]])
-   {:justify-timestamp? true}])
+   [message-timestamp message true]])
+
+(defn system-text-message
+  [{:keys [content] :as message}]
+  [message-bubble-wrapper message
+   [react/view
+    [render-parsed-text message (:parsed-text content)]]])
 
 (defn emoji-message
   [{:keys [content current-public-key alias outgoing] :as message}]
@@ -165,7 +174,8 @@
       (when response-to
         [quoted-message response-to (:quoted-message message) alias outgoing current-public-key])
       [react/text {:style (style/emoji-message message)}
-       (:text content)]]]))
+       (:text content)]]
+     [message-timestamp message]]))
 
 (defn message-activity-indicator
   []
@@ -254,22 +264,31 @@
    [react/view (style/delivery-status outgoing)
     [message-delivery-status message]]])
 
+(defn system-message-content-wrapper
+  [message child]
+  [react/view {:style (style/message-wrapper-base message)
+               :accessibility-label :chat-item}
+   [react/view (style/system-message-body message)
+    [react/view child]]])
+
 (defn chat-message [{:keys [content content-type] :as message}]
   (if (= content-type constants/content-type-command)
     [message.command/comand-content message-content-wrapper message]
-    [react/touchable-highlight (message-press-handlers message)
+    (if (= content-type constants/content-type-system-text)
-     [message-content-wrapper
+      [system-message-content-wrapper message [system-text-message message]]
-      message
+      [react/touchable-highlight (message-press-handlers message)
-      (if (= content-type constants/content-type-text)
+       [message-content-wrapper
-        ; text message
+        message
-        [text-message message]
+        (if (= content-type constants/content-type-text)
-        (if (= content-type constants/content-type-status)
+          ; text message
-          [message-content-status message]
+          [text-message message]
-          (if (= content-type constants/content-type-emoji)
+          (if (= content-type constants/content-type-status)
-            [emoji-message message]
+            [message-content-status message]
-            (if (= content-type constants/content-type-sticker)
+            (if (= content-type constants/content-type-emoji)
-              [react/image {:style  {:margin 10 :width 140 :height 140}
+              [emoji-message message]
-                            ;;TODO (perf) move to event
+              (if (= content-type constants/content-type-sticker)
-                            :source {:uri (contenthash/url (-> content :sticker :hash))}}]
+                [react/image {:style  {:margin 10 :width 140 :height 140}
-              [message-bubble-wrapper message
+                              ;;TODO (perf) move to event
-               [react/text (str "Unhandled content-type " content-type)]]))))]]))
+                              :source {:uri (contenthash/url (-> content :sticker :hash))}}]
+                [message-bubble-wrapper message
+                 [react/text (str "Unhandled content-type " content-type)]]))))]])))

src/status_im/ui/screens/chat/styles/message/message.cljs

@@ -16,6 +16,14 @@
   (when (and first? (not typing))
     {:padding-bottom 16}))
 
+(defn system-message-body
+  [_]
+  {:margin-top     4
+   :margin-left    8
+   :margin-right   8
+   :align-self     :center
+   :align-items    :center})
+
 (defn message-body
   [{:keys [outgoing] :as message}]
   (let [align     (if outgoing :flex-end :flex-start)
@@ -53,12 +61,15 @@
    :font-size   12
    :color       colors/text-gray})
 
-(defn message-wrapper [{:keys [outgoing] :as message}]
+(defn message-wrapper-base [message]
   (merge {:flex-direction   :column}
+         (last-message-padding message)))
+
+(defn message-wrapper [{:keys [outgoing] :as message}]
+  (merge (message-wrapper-base message)
          (if outgoing
            {:margin-left 96}
-           {:margin-right 52})
+           {:margin-right 52})))
-         (last-message-padding message)))
 
 (defn message-author-wrapper
   [outgoing display-photo?]
@@ -146,7 +157,11 @@
      {:border-bottom-right-radius 4}
      {:border-bottom-left-radius 4})
 
-   {:background-color (if outgoing colors/blue colors/blue-light)}
+   (cond
+     (= content-type constants/content-type-system-text) nil
+     outgoing {:background-color colors/blue}
+     :else {:background-color colors/blue-light})
+
    (when (= content-type constants/content-type-emoji)
      {:flex-direction :row})))
 
@@ -223,10 +238,19 @@
   (update default-text-style :style
           assoc :color colors/white))
 
-(defn text-style [outgoing]
+(def system-text-style
-  (if outgoing
+  (update default-text-style :style assoc
-    outgoing-text-style
+          :color colors/gray
-    default-text-style))
+          :line-height 20
+          :font-size 14
+          :text-align :center
+          :font-weight "400"))
+
+(defn text-style [outgoing content-type]
+  (cond
+    (= content-type constants/content-type-system-text) system-text-style
+    outgoing outgoing-text-style
+    :else default-text-style))
 
 (def emph-text-style
   (update default-text-style :style

status-go-version.json

@@ -2,7 +2,7 @@
     "_comment": "DO NOT EDIT THIS FILE BY HAND. USE 'scripts/update-status-go.sh <tag>' instead",
     "owner": "status-im",
     "repo": "status-go",
-    "version": "v0.49.0",
+    "version": "v0.50.0",
-    "commit-sha1": "d7bb02540a4356fb507a08ed73491c659b076fb1",
+    "commit-sha1": "a5874fdb21ab2d18e97945307332788b66ea8439",
-    "src-sha256": "0i6s085qq67aiyzjs2lrjfnaqvbh1v1jxdsi84c176y150lwb8lw"
+    "src-sha256": "02fp45fmy51dkdcrdnl5wvsz2kjibvhq7m171f0rjk7rjkyk6lz2"
 }

test/appium/tests/atomic/chats/test_group_chat.py

@@ -5,19 +5,19 @@ from views.sign_in_view import SignInView
 
 
 def return_left_chat_system_message(username):
-    return "@%s left the group" % username
+    return "%s left the group" % username
 
 
 def return_created_chat_system_message(username, chat_name):
-    return "@%s created the group %s" % (username, chat_name)
+    return "%s created the group %s" % (username, chat_name)
 
 
 def return_joined_chat_system_message(username):
-    return "@%s joined the group" % username
+    return "%s joined the group" % username
 
 
 def return_made_admin_system_message(username):
-    return "@%s has been made admin" % username
+    return "%s has been made admin" % username
 
 
 def create_users(driver_1, driver_2):