Show mentions to guests using a UserBubble

The UserBubble component currently does not provide a way to set an
arbitrary letter on the avatar, only the first letter of the display
name or an icon. Therefore, for the time being, a user icon is used for
the avatar instead of the "?" character.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

2 files changed, 13 insertions, 0 deletions

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index e98891e95..c7567e7fa 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -289,6 +289,8 @@ export default {
 				return Mention
 			} else if (messagePartType === 'call') {
 				return Mention
+			} else if (messagePartType === 'guest') {
+				return Mention
 			} else if (messagePartType === 'file') {
 				return FilePreview
 			}
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue
index 9827191eb..d31e18d89 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue
@@ -24,6 +24,10 @@
 		:display-name="data.name"
 		:avatar-image="'icon-group-forced-white'"
 		:primary="true" />
+	<UserBubble v-else-if="isMentionToGuest"
+		:display-name="data.name"
+		:avatar-image="'icon-user-forced-white'"
+		:primary="isCurrentGuest" />
 	<UserBubble v-else
 		:display-name="data.name"
 		:user="data.id"
@@ -57,6 +61,13 @@ export default {
 		isMentionToAll() {
 			return this.data.type === 'call'
 		},
+		isMentionToGuest() {
+			return this.data.type === 'guest'
+		},
+		isCurrentGuest() {
+			return this.$store.getters.getActorType() === 'guests'
+				&& this.data.id === ('guest/' + this.$store.getters.getSessionHash())
+		},
 		isCurrentUser() {
 			return this.$store.getters.getActorType() === 'users'
 				&& this.data.id === this.$store.getters.getUserId()