(feat) add new messages line

Author: antoine92190

README.md

@@ -19,7 +19,9 @@
 - Images, files & emojis
 - Edit messages
 - Reply to other messages
-- Dark mode
+- Flexible options
+- UI elements for seen, new and deleted messages
+- Custom theming - light and dark modes
 - Firestore example
 
 ## [Demo](https://antoine92190.github.io/vue-advanced-chat)

src/ChatWindow/ChatMessage.vue

@@ -1,11 +1,13 @@
 <template>
 	<div>
-		<div
-			class="card-date"
-			v-if="index > 0 && message.date !== messages[index - 1].date"
-		>
+		<div class="card-date" v-if="showDate">
 			{{ message.date }}
 		</div>
+
+		<div class="line-new" v-if="newMessageIndex === index">
+			New messages
+		</div>
+
 		<div
 			class="message-box"
 			:class="{ 'offset-current': message.sender_id === 'me' }"
@@ -160,7 +162,8 @@ export default {
 		roomUsers: { type: Array, default: () => [] },
 		textMessages: { type: Object, required: true },
 		messageActions: { type: Array, required: true },
-		roomFooterRef: { type: HTMLDivElement }
+		roomFooterRef: { type: HTMLDivElement },
+		newMessages: { type: Array }
 	},
 
 	data() {
@@ -170,7 +173,8 @@ export default {
 			imageHover: false,
 			messageReply: false,
 			optionsOpened: false,
-			menuOptionsHeight: 0
+			menuOptionsHeight: 0,
+			newMessageIndex: null
 		}
 	},
 
@@ -180,10 +184,25 @@ export default {
 			handler() {
 				this.checkImgLoad()
 			}
+		},
+		newMessages(val) {
+			this.newMessageIndex = Math.min(...val)
+		}
+	},
+
+	mounted() {
+		if (!this.message.seen && this.message.sender_id !== 'me') {
+			this.$emit('addNewMessage', this.index)
 		}
 	},
 
 	computed: {
+		showDate() {
+			return (
+				this.index > 0 &&
+				this.message.date !== this.messages[this.index - 1].date
+			)
+		},
 		isImage() {
 			return this.checkImageFile()
 		},
@@ -303,6 +322,28 @@ export default {
 		0 1px 2px 0 rgba(0, 0, 0, 0.12);
 }
 
+.line-new {
+	color: var(--chat-message-color-new-messages);
+	position: relative;
+	text-align: center;
+	font-size: 13px;
+}
+
+.line-new:after,
+.line-new:before {
+	border-top: 1px solid var(--chat-message-color-new-messages);
+	content: '';
+	left: 0;
+	position: absolute;
+	top: 50%;
+	width: calc(50% - 60px);
+}
+
+.line-new:before {
+	left: auto;
+	right: 0;
+}
+
 .message-box {
 	display: flex;
 	flex: 0 0 50%;

src/ChatWindow/MessagesList.vue

@@ -59,8 +59,10 @@
 							:roomUsers="room.users"
 							:textMessages="textMessages"
 							:roomFooterRef="$refs.roomFooter"
+							:newMessages="newMessages"
 							@messageActionHandler="messageActionHandler"
 							@openFile="openFile"
+							@addNewMessage="addNewMessage"
 						></chat-message>
 					</div>
 				</transition-group>
@@ -220,7 +222,8 @@ export default {
 			imageDimensions: { height: '32px', width: '10px' },
 			menuOpened: false,
 			emojiOpened: false,
-			scrollIcon: false
+			scrollIcon: false,
+			newMessages: []
 		}
 	},
 
@@ -295,6 +298,9 @@ export default {
 	},
 
 	methods: {
+		addNewMessage(index) {
+			this.newMessages.push(index)
+		},
 		resetMessage() {
 			this.resetTextareaSize()
 			this.message = ''

src/themes/index.js

@@ -51,7 +51,8 @@ export const defaultThemeColors = {
 			backgroundReply: 'rgba(0, 0, 0, 0.08)',
 			colorReplyUsername: '#0a0a0a',
 			colorReply: '#6e6e6e',
-			backgroundImage: '#ddd'
+			backgroundImage: '#ddd',
+			colorNewMessages: '#1976d2'
 		},
 
 		room: {
@@ -137,7 +138,8 @@ export const defaultThemeColors = {
 			backgroundReply: 'rgba(0, 0, 0, 0.18)',
 			colorReplyUsername: '#fff',
 			colorReply: '#d6d6d6',
-			backgroundImage: '#ddd'
+			backgroundImage: '#ddd',
+			colorNewMessages: '#fff'
 		},
 
 		room: {
@@ -232,6 +234,7 @@ export const cssThemeVars = ({
 		'--chat-message-color-reply-username': message.colorReplyUsername,
 		'--chat-message-color-reply-content': message.colorReply,
 		'--chat-message-bg-color-image': message.backgroundImage,
+		'--chat-message-color-new-messages': message.colorNewMessages,
 
 		// room
 		'--chat-room-color-username': room.colorUsername,