(feat) add saved & distributed prop for double checkmark icon

Author: Dario Aubry

README.md

@@ -362,7 +362,8 @@ styles="{
     emojiReaction: '#828c94',
     document: '#1976d2',
     pencil: '#9e9e9e',
-    checkmark: '#0696c7',
+    checkmark: '#9e9e9e',
+    checkmarkSeen: '#0696c7',
     eye: '#fff',
     dropdownMessage: '#fff',
     dropdownMessageBackground: 'rgba(0, 0, 0, 0.25)',
@@ -389,6 +390,8 @@ rooms="[
       username: 'John Doe',
       timestamp: '10:20',
       date: 123242424,
+      saved: true,
+      distributed: false,
       seen: false,
       new: true
     },
@@ -428,7 +431,11 @@ rooms="[
 
 Message objects are rendered differently depending on their type. Currently, only text, emoji and file types are supported.<br><br>
 Each message object has a `sender_id` field which holds the id of the corresponding agent. If `sender_id` matches the `currentUserId` prop, specific UI and actions will be implemented.<br><br>
-Note: `username` will be displayed on each message of corresponding agents if at least 3 users are in the room.
+Note: `username` will be displayed on each message of corresponding agents if at least 3 users are in the room.<br><br>
+Message states:
+ - `saved: true` one checkmark
+ - `distributed: true` two checkmarks
+ - `seen: true` two blue checkmarks
 
 ```javascript
 messages="[
@@ -439,6 +446,8 @@ messages="[
     username: 'John Doe',
     date: '13 November',
     timestamp: '10:20',
+    saved: true,
+    distributed: true,
     seen: true,
     disable_actions: false,
     disable_reactions: false,

src/ChatWindow/Message.vue

@@ -123,9 +123,13 @@
 							<svg-icon name="pencil" />
 						</div>
 						<span>{{ message.timestamp }}</span>
-						<span v-if="isMessageSeen">
-							<svg-icon name="checkmark" class="icon-check" />
-						</span>
+						<span v-if="isCheckmarkVisible">
+							<svg-icon
+                :name="message.distributed ? 'double-checkmark' : 'checkmark'"
+                :param="message.seen ? 'seen' : ''"
+                class="icon-check"
+              ></svg-icon>
+            </span>
 					</div>
 
 					<div
@@ -335,13 +339,17 @@ export default {
 				this.message.file.url.indexOf('blob:http') !== -1 || this.imageLoading
 			)
 		},
-		isMessageSeen() {
-			return (
-				this.message.sender_id === this.currentUserId &&
-				this.message.seen &&
-				!this.message.deleted
-			)
-		},
+		isCheckmarkVisible() {
+		  return (
+		    this.message.sender_id === this.currentUserId &&
+        !this.message.deleted &&
+        (
+          this.message.saved ||
+          this.message.distributed ||
+          this.message.seen
+        )
+      )
+    },
 		replyUsername() {
 			const { sender_id } = this.message.replyMessage
 			const replyUser = this.roomUsers.find(user => user._id === sender_id)

src/ChatWindow/RoomsList.vue

@@ -59,8 +59,12 @@
 						class="text-last"
 						:class="{ 'message-new': room.lastMessage && room.lastMessage.new }"
 					>
-						<span v-if="room.lastMessage && room.lastMessage.seen">
-							<svg-icon name="checkmark" class="icon-check" />
+						<span v-if="isMessageCheckmarkVisible(room)">
+							<svg-icon
+                :name="room.lastMessage.distributed ? 'double-checkmark' : 'checkmark'"
+                :param="room.lastMessage.seen ? 'seen' : ''"
+                class="icon-check"
+              ></svg-icon>
 						</span>
 						<format-message
 							v-if="room.lastMessage"
@@ -166,7 +170,18 @@ export default {
       }
 
 			return `${user.username} - ${content}`
-		}
+		},
+    isMessageCheckmarkVisible(room) {
+      return (
+        room.lastMessage &&
+        room.lastMessage.sender_id === this.currentUserId &&
+        (
+          room.lastMessage.saved ||
+          room.lastMessage.distributed ||
+          room.lastMessage.seen
+        )
+      )
+    }
 	}
 }
 </script>

src/ChatWindow/SvgIcon.vue

@@ -89,6 +89,11 @@ export default {
 					name: 'checkmark',
 					path: 'M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z'
 				},
+        {
+					name: 'double-checkmark',
+					path:
+            'M18 7l-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41L6 19l1.41-1.41L1.83 12 .41 13.41z'
+				},
 				{
 					name: 'eye',
 					path:
@@ -170,10 +175,16 @@ export default {
 	fill: var(--chat-icon-color-pencil);
 }
 
-#chat-icon-checkmark {
+#chat-icon-checkmark,
+#chat-icon-double-checkmark {
 	fill: var(--chat-icon-color-checkmark);
 }
 
+#chat-icon-checkmark-seen,
+#chat-icon-double-checkmark-seen {
+	fill: var(--chat-icon-color-checkmark-seen);
+}
+
 #chat-icon-eye {
 	fill: var(--chat-icon-color-eye);
 }

src/themes/index.js

@@ -112,7 +112,8 @@ export const defaultThemeStyles = {
 			emojiReaction: 'rgba(0, 0, 0, 0.3)',
 			document: '#1976d2',
 			pencil: '#9e9e9e',
-			checkmark: '#0696c7',
+			checkmark: '#9e9e9e',
+			checkmarkSeen: '#0696c7',
 			eye: '#fff',
 			dropdownMessage: '#fff',
 			dropdownMessageBackground: 'rgba(0, 0, 0, 0.25)',
@@ -232,7 +233,8 @@ export const defaultThemeStyles = {
 			emojiReaction: '#fff',
 			document: '#1976d2',
 			pencil: '#ebedf2',
-			checkmark: '#f0d90a',
+			checkmark: '#ebedf2',
+			checkmarkSeen: '#f0d90a',
 			eye: '#fff',
 			dropdownMessage: '#fff',
 			dropdownMessageBackground: 'rgba(0, 0, 0, 0.25)',
@@ -360,6 +362,7 @@ export const cssThemeVars = ({
 		'--chat-icon-color-document': icons.document,
 		'--chat-icon-color-pencil': icons.pencil,
 		'--chat-icon-color-checkmark': icons.checkmark,
+		'--chat-icon-color-checkmark-seen': icons.checkmarkSeen,
 		'--chat-icon-color-eye': icons.eye,
 		'--chat-icon-color-dropdown-message': icons.dropdownMessage,
 		'--chat-icon-bg-dropdown-message': icons.dropdownMessageBackground,