Improved conversation messages bubbles

assets/css/components/conversations/windows.css

@@ -73,4 +73,9 @@
 
 #conversationsElem .direct-chat-text .emoji {
 	height: 1em;
+}
+
+#conversationsElem .direct-chat-text.not-first-message::before, 
+#conversationsElem .direct-chat-text.not-first-message::after {
+	display: none;
 }

assets/js/components/conversations/chatWindows.js

@@ -705,46 +705,84 @@ ComunicWeb.components.conversations.chatWindows = {
 		//Check if it is the current user who sent the message
 		var userIsPoster = messageInfos.ID_user == userID();
 
-		//Create message element
+		//Check if this is the first message of the conversation or not
-		var messageElem = createElem2({
+		if(!convInfos.lastMessage){
-			appendTo: convInfos.box.messagesArea,
+			//Initialize last message object
-			type: "div",
+			convInfos.lastMessage = {
-			class: "direct-chat-msg " + (userIsPoster ? "right" : "")
+				userID: 0,
-		});
+				messageContainer: false,
+			}
+		}
 
-		//Display message header
+		//Check if message poster is the same as the last message
-		var messageHeader = createElem2({
+		if(convInfos.lastMessage.userID == messageInfos.ID_user){
-			appendTo: messageElem,
+			//Skip message container creation & user avatar rendering...
-			type: "div",
+			var messageContainer = convInfos.lastMessage.messageContainer;
-			class: "direct-chat-info clearfix"
+			var firstMessageFromUser = false;
-		});
+		}
+		else {
+			//Initialize user & message informations elements
+			var firstMessageFromUser = true;
 
-		//Add user name
+			//Create message element
-		var usernameElem = createElem2({
+			var messageContainer = createElem2({
-			appendTo: messageHeader,
+				appendTo: convInfos.box.messagesArea,
-			type: "span",
+				type: "div",
-			class: "direct-chat-name pull-" + (userIsPoster ? "right" : "left"),
+				class: "direct-chat-msg " + (userIsPoster ? "right" : "")
-			innerHTML: "Loading",
+			});
-		});
 
-		//Hide user name if it is the current user
+			//Display message header
-		if(userIsPoster)
+			var messageHeader = createElem2({
-			usernameElem.style.display = "none";
+				appendTo: messageContainer,
+				type: "div",
+				class: "direct-chat-info clearfix"
+			});
 
-		//Add user account image
+			//Add user name
-		var userAccountImage = createElem2({
+			var usernameElem = createElem2({
-			appendTo: messageElem,
+				appendTo: messageHeader,
-			type: "img",
+				type: "span",
-			class: "direct-chat-img",
+				class: "direct-chat-name pull-" + (userIsPoster ? "right" : "left"),
-			src: ComunicWeb.__config.assetsURL + "img/defaultAvatar.png",
+				innerHTML: "Loading",
-			alt: "User account image",
+			});
-		});
+
+			//Hide user name if it is the current user
+			if(userIsPoster)
+				usernameElem.style.display = "none";
+
+			//Add user account image
+			var userAccountImage = createElem2({
+				appendTo: messageContainer,
+				type: "img",
+				class: "direct-chat-img",
+				src: ComunicWeb.__config.assetsURL + "img/defaultAvatar.png",
+				alt: "User account image",
+			});
+
+			//Load user informations
+			if(convInfos.membersInfos["user-" + messageInfos.ID_user]){
+
+				//Get informations
+				var userInfos = convInfos.membersInfos["user-" + messageInfos.ID_user];
+
+				//Replace poster name
+				usernameElem.innerHTML = userInfos.firstName + " " + userInfos.lastName;
+				userAccountImage.src = userInfos.accountImage;
+			}
+
+			//Update conversation informations
+			convInfos.lastMessage = {
+				userID: messageInfos.ID_user,
+				messageContainer: messageContainer,
+			}
+		}
+		
 
 		//Add message
 		var messageTargetElem = createElem2({
-			appendTo: messageElem,
+			appendTo: messageContainer,
 			type: "div",
-			class: "direct-chat-text",
+			class: "direct-chat-text " + (!firstMessageFromUser ? "not-first-message" : ""),
 		});
 
 		//Add text message
@@ -764,23 +802,12 @@ ComunicWeb.components.conversations.chatWindows = {
 			});
 		}
 
-		//Load user informations
-		if(convInfos.membersInfos["user-" + messageInfos.ID_user]){
-
-			//Get informations
-			var userInfos = convInfos.membersInfos["user-" + messageInfos.ID_user];
-
-			//Replace poster name
-			usernameElem.innerHTML = userInfos.firstName + " " + userInfos.lastName;
-			userAccountImage.src = userInfos.accountImage;
-		}
-
 		//Parse emojies in text message
 		ComunicWeb.components.emoji.parser.parse({
 			element: textMessage,
 		});
 
-		//Enable (again) slimscrool
+		//Enable slimscrool
 		$(convInfos.box.messagesArea).slimscroll({
 			height: "250px",
 		});

assets/js/components/conversations/service.js

@@ -138,7 +138,7 @@ ComunicWeb.components.conversations.service = {
 	 * @return {Boolean} True for a success
 	 */
 	callback: function(result){
-		console.log(result);
+		
 		//Check for errors
 		if(result.error){
 			ComunicWeb.debug.logMessage("Conversations Service : Couldn't update conversations !");