(slots) add message-avatar_{{MESSAGE_ID}}

Author: antoine92190

README.md

@@ -766,6 +766,7 @@ Example:
 | `room-header-info`                          | Replace the template of the room header text                      |
 | `room-options`                              | Replace the template of the room options                          |
 | `message_{{MESSAGE_ID}}`                    | Replace the template of the message (and system message) box      |
+| `message-avatar_{{MESSAGE_ID}}`             | Replace the template of the message avatar                        |
 | `message-failure_{{MESSAGE_ID}}`            | Replace the message failure icon                                  |
 | `messages-empty`                            | Replace the empty message template                                |
 | `rooms-empty`                               | Replace the empty rooms template                                  |

demo/src/ChatContainer.vue

@@ -448,6 +448,7 @@ export default {
 		},
 
 		formatMessage(room, message) {
+			// const senderUser = room.users.find(user => user._id === message.sender_id)
 			const formattedMessage = {
 				...message,
 				...{

src/lib/Room/RoomMessage/RoomMessage.vue

@@ -34,11 +34,15 @@
 			@click="selectMessage"
 		>
 			<slot :name="'message_' + message._id">
-				<div
+				<slot
 					v-if="message.avatar && message.senderId !== currentUserId"
-					class="vac-avatar"
-					:style="{ 'background-image': `url('${message.avatar}')` }"
-				/>
+					:name="'message-avatar_' + message._id"
+				>
+					<div
+						class="vac-avatar"
+						:style="{ 'background-image': `url('${message.avatar}')` }"
+					/>
+				</slot>
 				<div
 					v-if="hasSenderUserAvatar && !message.avatar"
 					class="vac-avatar-offset"
@@ -197,11 +201,15 @@
 						<div class="vac-failure-text">!</div>
 					</div>
 				</slot>
-				<div
+				<slot
 					v-if="message.avatar && message.senderId === currentUserId"
-					class="vac-avatar vac-avatar-current"
-					:style="{ 'background-image': `url('${message.avatar}')` }"
-				/>
+					:name="'message-avatar_' + message._id"
+				>
+					<div
+						class="vac-avatar vac-avatar-current"
+						:style="{ 'background-image': `url('${message.avatar}')` }"
+					/>
+				</slot>
 				<div
 					v-if="hasCurrentUserAvatar && !message.avatar"
 					class="vac-avatar-current-offset"