added background image

frappe/public/css/chat.css

@@ -387,6 +387,8 @@ a.no-decoration:active {
   padding-bottom: 50px;
   height: 100%;
   background: #FAFBFC;
+  background-size: 350px 500px;
+  background-image: url(/assets/frappe/images/chat/wallpaper-default.jpg);
   overflow-y: scroll;
 }
 .chat-list .chat-list-item {
@@ -409,7 +411,7 @@ a.no-decoration:active {
   box-shadow: 0px 0.1px 0.5px 0px rgba(0, 0, 0, 0.5);
 }
 .chat-list .chat-list-item .chat-bubble.chat-bubble-l {
-  background-color: #EBEFF2;
+  background-color: white;
 }
 .chat-list .chat-list-item .chat-bubble.chat-bubble-l.chat-groupable {
   margin-left: 40px;

frappe/public/js/frappe/chat.js

@@ -139,7 +139,17 @@ frappe.datetime.datetime = class
  * @example
  * const datetime = new frappe.datetime.now()
  */
-frappe.datetime.now = () => new frappe.datetime.datetime()
+frappe.datetime.now  = () => new frappe.datetime.datetime()
+
+frappe.datetime.diff = (a, b, type) =>
+{
+    a = a.moment
+    b = b.moment
+
+    diff = a.diff(b, type)
+
+    return diff
+}
 
 /**
  * @description Compares two frappe.datetime.datetime objects.
@@ -2263,8 +2273,19 @@ class extends Component
 
                     if ( i !== 0 && i !== messages.length )
                         groupable   = !me && m.room_type === "Group" && m.user === messages[i - 1].user
+
+                    if ( i === 0 || frappe.datetime.diff(m.creation, messages[i - 1].creation))
+                    {
+                        return (
+                            h(frappe.chat.component.ChatList.Item,
+                            {
+                                   type: "Notification",
+                                content: ""
+                            })
+                        )
+                    }
                     
-                    return h(frappe.chat.component.ChatList.Item, {...m, groupable: groupable})
+                    return h(frappe.chat.component.ChatList.Item, {...m, type: type, groupable: groupable})
                 })
             )
         ) : null
@@ -2295,15 +2316,18 @@ class extends Component
 
         return (
             h("div",{class: "chat-list-item list-group-item"},
-                h("div",{class:`${me ? "text-right" : ""}`},
-                    !me && !props.groupable && !me ?
-                        h(frappe.components.Avatar,
-                        {
-                            title: frappe.user.full_name(props.user),
-                            image: frappe.user.image(props.user)
-                        }) : null,
-                    h(frappe.chat.component.ChatBubble, props)
-                )
+                me.type === "Notification" ?
+                    h("div","","")
+                    :    
+                    h("div",{class:`${me ? "text-right" : ""}`},
+                        !me && !props.groupable && !me ?
+                            h(frappe.components.Avatar,
+                            {
+                                title: frappe.user.full_name(props.user),
+                                image: frappe.user.image(props.user)
+                            }) : null,
+                        h(frappe.chat.component.ChatBubble, props)
+                    )
             )
         )
     }

frappe/public/less/chat.less

@@ -275,6 +275,8 @@
     padding-bottom: 50px;
         height: 100%; 
     background: @frappe-chat-list-bg-color;
+    background-size: 350px 500px;
+    background-image: url(/assets/frappe/images/chat/wallpaper-default.jpg);
     overflow-y: scroll;
 
     .chat-list-item
@@ -309,7 +311,8 @@
                      margin-left: @frappe-chat-bubble-l-groupable-margin-left;
                 }
 
-                background-color: @frappe-chat-bubble-l-color;
+                // background-color: @frappe-chat-bubble-l-color;
+                background-color: white;
 
                 .chat-bubble-meta
                 {