(feat) add emoji reactions

Author: antoine92190

demo/src/ChatContainer.vue

@@ -61,6 +61,7 @@
 			@addRoom="addRoom"
 			@menuActionHandler="menuActionHandler"
 			@messageActionHandler="messageActionHandler"
+			@sendMessageReaction="sendMessageReaction"
 		/>
 	</div>
 </template>
@@ -452,6 +453,26 @@ export default {
 			// do something
 		},
 
+		async sendMessageReaction({ reaction, messageId, roomId }) {
+			await this.messagesRef(roomId)
+				.doc(messageId)
+				.update({
+					[`reactions.${reaction.name}`]: firebase.firestore.FieldValue.arrayUnion(
+						this.currentUserId
+					)
+				})
+		},
+
+		async removeMessageReaction({ reaction, messageId, roomId }) {
+			await this.messagesRef(roomId)
+				.doc(messageId)
+				.update({
+					[`reactions.${reaction.name}`]: firebase.firestore.FieldValue.arrayRemove(
+						this.currentUserId
+					)
+				})
+		},
+
 		addRoom() {
 			this.resetForms()
 			this.addNewRoom = true

src/ChatWindow/ChatMessage.vue

@@ -122,6 +122,18 @@
 						</div>
 					</transition>
 
+					<emoji-picker
+						class="message-reactions"
+						v-if="isMessageReactions"
+						v-click-outside="closeEmoji"
+						:emojiOpened="emojiOpened"
+						:emojiReaction="true"
+						:roomFooterRef="roomFooterRef"
+						:positionRight="message.sender_id === 'me'"
+						@addEmoji="sendMessageReaction"
+						@openEmoji="emojiOpened = $event"
+					></emoji-picker>
+
 					<transition
 						:name="message.sender_id === 'me' ? 'slide-left' : 'slide-right'"
 						v-if="filteredMessageActions.length"
@@ -147,6 +159,15 @@
 						</div>
 					</transition>
 				</div>
+				<button
+					v-for="(reaction, key) in message.reactions"
+					:key="key"
+					class="button-reaction"
+					:class="{ 'reaction-me': reaction[message.sender_id] }"
+					@click="sendMessageReaction({ name: key })"
+				>
+					{{ getEmojiByName(key) }}<span>{{ reaction.length }}</span>
+				</button>
 			</div>
 		</div>
 	</div>
@@ -156,10 +177,11 @@
 import SvgIcon from './SvgIcon'
 import vClickOutside from 'v-click-outside'
 import ChatLoader from './ChatLoader'
+import EmojiPicker from './EmojiPicker'
 
 export default {
 	name: 'chat-message',
-	components: { SvgIcon, ChatLoader },
+	components: { SvgIcon, ChatLoader, EmojiPicker },
 
 	directives: {
 		clickOutside: vClickOutside.directive
@@ -174,18 +196,22 @@ export default {
 		textMessages: { type: Object, required: true },
 		messageActions: { type: Array, required: true },
 		roomFooterRef: { type: HTMLDivElement },
-		newMessages: { type: Array }
+		newMessages: { type: Array },
+		showReactionEmojis: { type: Boolean, required: true },
+		emojisList: { type: Object, required: true }
 	},
 
 	data() {
 		return {
 			hoverMessageId: null,
 			imageLoading: false,
 			imageHover: false,
-			messageReply: false,
+			messageHover: false,
 			optionsOpened: false,
 			menuOptionsHeight: 0,
-			newMessage: {}
+			messageReaction: '',
+			newMessage: {},
+			emojiOpened: false
 		}
 	},
 
@@ -249,10 +275,15 @@ export default {
 		isMessageActions() {
 			return (
 				this.filteredMessageActions.length &&
-				this.messageReply &&
+				this.messageHover &&
 				!this.message.deleted
 			)
 		},
+		isMessageReactions() {
+			return (
+				this.showReactionEmojis && this.messageHover && !this.message.deleted
+			)
+		},
 		filteredMessageActions() {
 			return this.message.sender_id === 'me'
 				? this.messageActions
@@ -269,15 +300,15 @@ export default {
 		},
 		onHoverMessage() {
 			this.imageHover = true
-			this.messageReply = true
+			this.messageHover = true
 			if (this.canEditMessage()) this.hoverMessageId = this.message._id
 		},
 		canEditMessage() {
 			return this.message.sender_id === 'me' && !this.message.deleted
 		},
 		onLeaveMessage() {
 			this.imageHover = false
-			if (!this.optionsOpened) this.messageReply = false
+			if (!this.optionsOpened && !this.emojiOpened) this.messageHover = false
 			this.hoverMessageId = null
 		},
 		openFile() {
@@ -330,7 +361,21 @@ export default {
 		},
 		closeOptions() {
 			this.optionsOpened = false
-			if (this.hoverMessageId !== this.message._id) this.messageReply = false
+			if (this.hoverMessageId !== this.message._id) this.messageHover = false
+		},
+		closeEmoji() {
+			this.emojiOpened = false
+			if (this.hoverMessageId !== this.message._id) this.messageHover = false
+		},
+		getEmojiByName(emojiName) {
+			return this.emojisList[emojiName]
+		},
+		sendMessageReaction(emoji) {
+			this.closeEmoji()
+			this.$emit('sendMessageReaction', {
+				messageId: this.message._id,
+				reaction: emoji
+			})
 		}
 	}
 }
@@ -586,6 +631,12 @@ export default {
 	}
 }
 
+.message-reactions {
+	position: absolute;
+	top: 6px;
+	right: 37px;
+}
+
 .menu-options {
 	right: 15px;
 }
@@ -600,4 +651,37 @@ export default {
 	vertical-align: middle;
 	margin: -3px -3px 0 3px;
 }
+
+.button-reaction {
+	display: inline-flex;
+	align-items: center;
+	border: 1px solid #eee;
+	outline: none;
+	background: #eee;
+	border-radius: 4px;
+	margin: 4px 2px 0;
+	transition: 0.3s;
+	padding: 0 5px;
+	font-size: 18px;
+	line-height: 23px;
+
+	span {
+		font-size: 12px;
+	}
+
+	&:hover {
+		border: 1px solid #ddd;
+		background: #fff;
+	}
+}
+
+.reaction-me {
+	border: 1px solid #3b98b8;
+	background: #cfecf5;
+
+	&:hover {
+		border: 1px solid #3b98b8;
+		background: #cfecf5;
+	}
+}
 </style>

src/ChatWindow/ChatWindow.vue

@@ -18,6 +18,7 @@
 				:messageActions="messageActions"
 				:showFiles="showFiles"
 				:showEmojis="showEmojis"
+				:showReactionEmojis="showReactionEmojis"
 				:textMessages="t"
 				@fetchMessages="fetchMessages"
 				@sendMessage="sendMessage"
@@ -26,6 +27,7 @@
 				@openFile="openFile"
 				@menuActionHandler="menuActionHandler"
 				@messageActionHandler="messageActionHandler"
+				@sendMessageReaction="sendMessageReaction"
 			>
 			</messages-list>
 		</div>
@@ -63,6 +65,7 @@ export default {
 		},
 		showFiles: { type: Boolean, default: true },
 		showEmojis: { type: Boolean, default: true },
+		showReactionEmojis: { type: Boolean, default: true },
 		textMessages: { type: Object, default: null },
 		theme: { type: String, default: 'light' },
 		colors: { type: Object, default: null }
@@ -142,6 +145,12 @@ export default {
 				action: ev,
 				roomId: this.room.roomId
 			})
+		},
+		sendMessageReaction(messageReaction) {
+			this.$emit('sendMessageReaction', {
+				...messageReaction,
+				roomId: this.room.roomId
+			})
 		}
 	}
 }

src/ChatWindow/EmojiPicker.vue

@@ -3,6 +3,7 @@
 		<emoji-picker @emoji="append" :search="search">
 			<div
 				class="svg-button"
+				:class="{ 'button-reaction': emojiReaction }"
 				slot="emoji-invoker"
 				slot-scope="{ events: { click: clickEvent } }"
 				@click.stop="clickEvent"
@@ -15,7 +16,15 @@
 				slot-scope="{ emojis, insert }"
 				v-if="emojiOpened"
 			>
-				<div class="emoji-picker">
+				<div
+					class="emoji-picker"
+					:class="{ 'picker-reaction': emojiReaction }"
+					:style="{
+						top: `${emojiPickerHeight}px`,
+						right: positionRight ? '85px' : '',
+						display: emojiPickerHeight || !emojiReaction ? 'initial' : 'none'
+					}"
+				>
 					<div class="emoji-picker__search">
 						<input type="text" v-model="search" v-focus />
 					</div>
@@ -26,10 +35,11 @@
 								<span
 									v-for="(emoji, emojiName) in emojiGroup"
 									:key="emojiName"
-									@click="insert(emoji)"
+									@click="insert({ emoji, emojiName })"
 									:title="emojiName"
-									>{{ emoji }}</span
 								>
+									{{ emoji }}
+								</span>
 							</div>
 						</div>
 					</div>
@@ -48,18 +58,31 @@ export default {
 		EmojiPicker,
 		SvgIcon
 	},
-	props: ['emojiOpened'],
+	props: ['emojiOpened', 'emojiReaction', 'roomFooterRef', 'positionRight'],
 	data() {
 		return {
-			search: ''
+			search: '',
+			emojiPickerHeight: ''
 		}
 	},
 	methods: {
-		append(emoji) {
-			this.$emit('addEmoji', emoji)
+		append({ emoji, emojiName }) {
+			this.$emit('addEmoji', { icon: emoji, name: emojiName })
 		},
-		openEmoji() {
+		openEmoji(ev) {
 			this.$emit('openEmoji', true)
+			this.setEmojiPickerHeight(ev.clientY)
+		},
+		setEmojiPickerHeight(clientY) {
+			setTimeout(() => {
+				if (!this.roomFooterRef) return
+
+				const roomFooterTop = this.roomFooterRef.getBoundingClientRect().top
+				const pickerTopPosition = roomFooterTop - clientY > 320
+
+				if (pickerTopPosition) this.emojiPickerHeight = clientY
+				else this.emojiPickerHeight = clientY - 320
+			}, 0)
 		}
 	},
 	directives: {
@@ -89,6 +112,7 @@ export default {
 
 .emoji-picker {
 	position: absolute;
+	z-index: 9999;
 	bottom: 32px;
 	right: 10px;
 	border: var(--chat-border-style);
@@ -101,6 +125,12 @@ export default {
 	background: var(--chat-emoji-bg-color);
 }
 
+.picker-reaction {
+	position: fixed;
+	top: initial;
+	right: initial;
+}
+
 .emoji-picker__search {
 	display: flex;
 }
@@ -144,4 +174,9 @@ export default {
 	background: var(--chat-sidemenu-bg-color-hover);
 	cursor: pointer;
 }
+
+.button-reaction svg {
+	height: 19px;
+	width: 19px;
+}
 </style>