(feat) add reply message flow

Author: antoine92190

README.md

@@ -144,12 +144,16 @@ colors="{
   messageUsernameColor: '#9ca6af',
   messageTimestampColor: '#828c94',
   messageDateBg: 'rgba(33, 148, 243, 0.15)',
-  messageDateColor: '#b8bdcc',
+  messageDateColor: '#505a62',
   messageTextColor: '#0a0a0a',
-  roomLastMessage: '#a2aeb8',
-  roomTimestamp: '#67717a',
+  messageReplyBg: '#f0f0f0',
+  messageReplyUsernameColor: '#9ca6af',
+  messageReplyContentColor: '#0a0a0a',
+  roomLastMessage: '#67717a',
+  roomTimestamp: '#a2aeb8',
   textColor: '#0a0a0a',
   inputBg: '#fff',
+  footerBg: '#f0f0f0',
   spinnerColor: '#333',
   borderColor: '#d3dde7',
   iconsColor: {
@@ -169,8 +173,9 @@ colors="{
     pencilEdited: '#9e9e9e',
     trash: '#f44336',
     checkmark: '#0696c7',
-    eye: '#9ca6af'
-  }
+    eye: '#fff',
+    reply: '#000'
+		}
 }"
 ```
 
@@ -224,15 +229,15 @@ messages="[
 
 ## Events API
 
-| Event                 | Params                                        | Fires when                                            |
-| --------------------- | --------------------------------------------- | ----------------------------------------------------- |
-| fetchMessages (1)     | `{ room, options }`                           | A user has scrolled on top to load more messages      |
-| sendMessage           | `{ roomId, content, file (3) }`               | A user has sent a message                             |
-| editMessage           | `{ roomId, messageId, newContent, file (3) }` | A user has edited a message                           |
-| deleteMessage         | `{ roomId, messageId }`                       | A user has deleted a message                          |
-| openFile              | `{ message }`                                 | A user has clicked to view or download a file         |
-| addRoom               | -                                             | A user clicks on the plus icon next to searchbar      |
-| menuActionHandler (2) | `{ roomId, action }`                          | A user clicks on the vertical dots icon inside a room |
+| Event                 | Params                                                          | Fires when                                            |
+| --------------------- | --------------------------------------------------------------- | ----------------------------------------------------- |
+| fetchMessages (1)     | `{ room, options }`                                             | A user has scrolled on top to load more messages      |
+| sendMessage           | `{ roomId, content, file (3), replyMessage (4) }`               | A user has sent a message                             |
+| editMessage           | `{ roomId, messageId, newContent, file (3), replyMessage (4) }` | A user has edited a message                           |
+| deleteMessage         | `{ roomId, messageId }`                                         | A user has deleted a message                          |
+| openFile              | `{ message }`                                                   | A user has clicked to view or download a file         |
+| addRoom               | -                                                               | A user clicks on the plus icon next to searchbar      |
+| menuActionHandler (2) | `{ roomId, action }`                                            | A user clicks on the vertical dots icon inside a room |
 
 (1) `fetchMessages` should be a method implementing a pagination system. Its purpose is to load older messages of a conversation when the user scroll on top
 
@@ -255,6 +260,8 @@ menuActionHandler({ roomId, action }) {
 
 (3) All file params contain: `{ blob, localURL, name, size, type }`
 
+(4) `replyMessage` object is available when the user replied to another message by clicking the corresponding icon, and contains the message information that was clicked
+
 ## Using with Firestore
 
 ### Source code

demo/src/ChatContainer.vue

@@ -209,7 +209,7 @@ export default {
 				)
 
 				room.roomName =
-					roomContacts.map(user => user.username).join(', ') || 'Myslef'
+					roomContacts.map(user => user.username).join(', ') || 'Myself'
 
 				const roomAvatar =
 					roomContacts.length === 1 && roomContacts[0].avatar
@@ -360,7 +360,7 @@ export default {
 			}
 		},
 
-		async sendMessage({ content, roomId, file }) {
+		async sendMessage({ content, roomId, file, replyMessage }) {
 			const message = {
 				sender_id: this.currentUserId,
 				content,
@@ -376,6 +376,17 @@ export default {
 				}
 			}
 
+			if (replyMessage) {
+				message.replyMessage = {
+					_id: replyMessage._id,
+					content: replyMessage.content,
+					sender_id:
+						replyMessage.sender_id === 'me'
+							? this.currentUserId
+							: replyMessage.sender_id
+				}
+			}
+
 			const { id } = await roomsRef
 				.doc(roomId)
 				.collection('messages')

src/ChatWindow/ChatMessage.vue

@@ -21,6 +21,20 @@
 				@mouseover="onHoverMessage(message)"
 				@mouseleave="onLeaveMessage"
 			>
+				<transition name="fade">
+					<div
+						v-if="messageReply && !message.deleted"
+						class="svg-button button-reply"
+						:class="{
+							'reply-current': message.sender_id === 'me',
+							'reply-agent': message.sender_id !== 'me'
+						}"
+						@click.stop="replyMessage(message)"
+					>
+						<svg-icon name="reply" />
+					</div>
+				</transition>
+
 				<div
 					class="message-card"
 					:class="{
@@ -40,6 +54,14 @@
 						<span>{{ message.username }}</span>
 					</div>
 
+					<div
+						v-if="!message.deleted && message.replyMessage"
+						class="reply-message"
+					>
+						<div class="reply-username">{{ replyUsername }}</div>
+						<div class="reply-content">{{ message.replyMessage.content }}</div>
+					</div>
+
 					<div v-if="message.deleted">
 						<span>{{ textMessages.MESSAGE_DELETED }}</span>
 					</div>
@@ -131,7 +153,8 @@ export default {
 			openMessageId: {},
 			hoverMessageId: null,
 			imageLoading: false,
-			imageHover: false
+			imageHover: false,
+			messageReply: false
 		}
 	},
 
@@ -162,6 +185,11 @@ export default {
 				this.message.seen &&
 				!this.message.deleted
 			)
+		},
+		replyUsername() {
+			const { sender_id } = this.message.replyMessage
+			const replyUser = this.roomUsers.find(user => user._id === sender_id)
+			return replyUser ? replyUser.username : ''
 		}
 	},
 
@@ -184,19 +212,24 @@ export default {
 		},
 		onHoverMessage() {
 			this.imageHover = true
+			this.messageReply = true
 			if (this.canEditMessage()) this.hoverMessageId = this.message._id
 		},
 		canEditMessage() {
 			return this.message.sender_id === 'me' && !this.message.deleted
 		},
 		onLeaveMessage() {
 			this.imageHover = false
+			this.messageReply = false
 			this.openMessageId.toggle = false
 			this.hoverMessageId = null
 		},
 		editMessage() {
 			this.$emit('editMessage', this.message)
 		},
+		replyMessage() {
+			this.$emit('replyMessage', this.message)
+		},
 		deleteMessage() {
 			this.$emit('deleteMessage', this.message)
 			this.onLeaveMessage()
@@ -231,7 +264,7 @@ export default {
 	text-transform: uppercase;
 	padding: 4px;
 	color: var(--chat-color-message-date);
-	background: var(--chat-color-message-date-bg);
+	background: var(--chat-bg-color-message-date);
 	display: block;
 	overflow-wrap: break-word;
 	position: relative;
@@ -254,6 +287,7 @@ export default {
 }
 
 .message-container {
+	position: relative;
 	padding: 3px 10px;
 	align-items: end;
 	min-width: 100px;
@@ -349,6 +383,43 @@ export default {
 	}
 }
 
+.reply-message {
+	background: var(--chat-bg-color-message-reply);
+	border-radius: 4px;
+	margin: -1px -5px 8px;
+
+	.reply-username {
+		padding: 5px 5px 0 5px;
+		color: var(--chat-color-message-reply-username);
+		font-size: 13px;
+		line-height: 15px;
+		margin-bottom: 2px;
+	}
+
+	.reply-content {
+		padding: 0 5px 5px 5px;
+		color: var(--chat-color-message-reply-content);
+	}
+}
+
+.button-reply {
+	position: absolute;
+	top: 4px;
+
+	svg {
+		height: 20px;
+		width: 20px;
+	}
+}
+
+.reply-agent {
+	right: -14px;
+}
+
+.reply-current {
+	left: -14px;
+}
+
 .text-username {
 	font-size: 13px;
 	color: var(--chat-color-message-username);