(fix) add users tag messages UI

Author: antoine92190

demo/src/ChatContainer.vue

@@ -414,7 +414,7 @@ export default {
 			}
 		},
 
-		async sendMessage({ content, roomId, file, replyMessage }) {
+		async sendMessage({ content, roomId, file, replyMessage, usersTag }) {
 			const message = {
 				sender_id: this.currentUserId,
 				content,

src/ChatWindow/ChatWindow.vue

@@ -328,6 +328,7 @@ export default {
 
 	a {
 		color: #0d579c;
+		font-weight: 500;
 	}
 
 	.vac-chat-container {

src/ChatWindow/FormatMessage.vue

@@ -7,18 +7,19 @@
 					:key="i"
 					:class="{
 						'vac-text-ellipsis': singleLine,
-						'vac-text-deleted': deleted,
 						'vac-text-bold': checkType(message, 'bold'),
-						'vac-text-italic': checkType(message, 'italic'),
+						'vac-text-italic': checkType(message, 'italic') || deleted,
 						'vac-text-strike': checkType(message, 'strike'),
 						'vac-text-underline': checkType(message, 'underline'),
 						'vac-text-inline-code':
 							!singleLine && checkType(message, 'inline-code'),
 						'vac-text-multiline-code':
-							!singleLine && checkType(message, 'multiline-code')
+							!singleLine && checkType(message, 'multiline-code'),
+						'vac-text-tag': checkType(message, 'tag')
 					}"
 					:href="message.href"
-					target="_blank"
+					:target="message.href ? '_blank' : null"
+					@click="openTag(message)"
 				>
 					<slot name="deleted-icon" v-bind="{ deleted }">
 						<svg-icon v-if="deleted" name="deleted" class="vac-icon-deleted" />
@@ -27,7 +28,7 @@
 				</component>
 			</template>
 		</div>
-		<div v-else>{{ content }}</div>
+		<div v-else>{{ formattedContent }}</div>
 	</div>
 </template>
 
@@ -43,30 +44,44 @@ export default {
 	props: {
 		content: { type: [String, Number], required: true },
 		deleted: { type: Boolean, default: false },
+		users: { type: Array, default: () => [] },
 		linkify: { type: Boolean, default: true },
 		singleLine: { type: Boolean, default: false },
 		textFormatting: { type: Boolean, required: true }
 	},
 
 	computed: {
 		linkifiedMessage() {
-			return formatString(this.content, this.linkify)
+			return formatString(this.formatTags(this.content), this.linkify)
+		},
+		formattedContent() {
+			return this.formatTags(this.content)
 		}
 	},
 
 	methods: {
 		checkType(message, type) {
 			return message.types.indexOf(type) !== -1
+		},
+		formatTags(content) {
+			this.users.forEach(user => {
+				const index = content.indexOf(user._id)
+				const isTag = content.substring(index - 9, index) === '<usertag>'
+				if (isTag) content = content.replace(user._id, `@${user.username}`)
+			})
+
+			return content
+		},
+		openTag(message) {
+			if (!this.singleLine && this.checkType(message, 'tag')) {
+				// TODO: emit event
+			}
 		}
 	}
 }
 </script>
 
 <style>
-.vac-text-deleted {
-	font-style: italic;
-}
-
 .vac-icon-deleted {
 	height: 14px;
 	width: 14px;

src/ChatWindow/Message.vue

@@ -76,6 +76,7 @@
 						<div v-else-if="!message.file">
 							<format-message
 								:content="message.content"
+								:users="roomUsers"
 								:text-formatting="textFormatting"
 							>
 								<template v-slot:deleted-icon="data">
@@ -126,6 +127,7 @@
 							</div>
 							<format-message
 								:content="message.content"
+								:users="roomUsers"
 								:text-formatting="textFormatting"
 							></format-message>
 						</div>

src/ChatWindow/Room.vue

@@ -438,6 +438,7 @@ export default {
 			recordedChunks: [],
 			keepKeyboardOpen: false,
 			filteredUsersTag: [],
+			selectedUsersTag: [],
 			textareaCursorPosition: null,
 			roomFooterHeight: 0
 		}
@@ -656,6 +657,8 @@ export default {
 				space +
 				this.message.substr(endPosition, this.message.length - 1)
 
+			this.selectedUsersTag = [...this.selectedUsersTag, { ...user }]
+
 			this.focusTextarea()
 		},
 		resetUsersTag() {
@@ -754,6 +757,7 @@ export default {
 				return
 			}
 
+			this.selectedUsersTag = []
 			this.resetUsersTag()
 			this.resetTextareaSize()
 			this.message = ''
@@ -790,22 +794,33 @@ export default {
 			if (this.keepKeyboardOpen) this.$refs['roomTextarea'].focus()
 		},
 		sendMessage() {
-			if (!this.file && !this.message.trim()) return
+			let message = this.message.trim()
+
+			if (!this.file && !message) return
+
+			this.selectedUsersTag.forEach(user => {
+				message = message.replace(
+					`@${user.username}`,
+					`<usertag>${user._id}</usertag>`
+				)
+			})
 
 			if (this.editedMessage._id) {
-				if (this.editedMessage.content !== this.message || this.file) {
+				if (this.editedMessage.content !== message || this.file) {
 					this.$emit('edit-message', {
 						messageId: this.editedMessage._id,
-						newContent: this.message.trim(),
+						newContent: message,
 						file: this.file,
-						replyMessage: this.messageReply
+						replyMessage: this.messageReply,
+						usersTag: this.selectedUsersTag
 					})
 				}
 			} else {
 				this.$emit('send-message', {
-					content: this.message.trim(),
+					content: message,
 					file: this.file,
-					replyMessage: this.messageReply
+					replyMessage: this.messageReply,
+					usersTag: this.selectedUsersTag
 				})
 			}
 

src/ChatWindow/RoomsList.vue

@@ -106,6 +106,7 @@
 								v-else-if="room.lastMessage"
 								:content="getLastMessage(room)"
 								:deleted="!!room.lastMessage.deleted && !typingUsers(room)"
+								:users="room.users"
 								:linkify="false"
 								:text-formatting="textFormatting"
 								:single-line="true"

src/utils/formatString.js

@@ -53,6 +53,11 @@ const pseudo_markdown = {
 		end: '`',
 		allowed_chars: '.',
 		type: 'inline-code'
+	},
+	'<usertag>': {
+		allowed_chars: '.',
+		end: '</usertag>',
+		type: 'tag'
 	}
 	// ':': {
 	// 	allowed_chars: '[a-z_]',