From d597058bd2b514ef5ecac487c385fbd88e67e55f Mon Sep 17 00:00:00 2001
From: Ardrin <kiritogregorio@gmail.com>
Date: Thu, 13 Oct 2022 19:06:43 +0800
Subject: [PATCH 01/13] feat(chat): user will show the seen message

Co-authored-by: Jarlem Red de Peralta <lmoa.jhdp@gmail.com>
---
 .../chat_window/chat_message_item.vue         | 89 ++++++++++++-------
 1 file changed, 56 insertions(+), 33 deletions(-)

diff --git a/components/consultation/chat_window/chat_message_item.vue b/components/consultation/chat_window/chat_message_item.vue
index 307413fee..30c6706d6 100644
--- a/components/consultation/chat_window/chat_message_item.vue
+++ b/components/consultation/chat_window/chat_message_item.vue
@@ -1,42 +1,60 @@
 <template>
-	<div
-		class="message-item"
-		:class="messageItem">
-		<ProfilePicture
-			v-if="isOtherMessage"
-			class="other"
-			:user="chatMessage.user"
-			:title="chatMessage.user.data.name"/>
-		<div>
-			<p
-				v-if="isMessageKindText(chatMessage)"
-				class="message-item-content"
-				:class="messageItemContent">
-				{{ chatMessage.data.value }}
-			</p>
-			<p
-				v-if="isMessageKindFile(chatMessage)"
-				class="message-item-content"
-				:class="messageItemContent">
-				<!-- TODO(lead): use appropriate elements for other file types  -->
-				<img :src="fileURL"/>
-			</p>
-			<p
-				v-if="isMessageKindStatus(chatMessage)"
-				class="message-item-content"
-				:class="messageItemContent">
-				{{ determineStatusMessage }}
-			</p>
+	<div class="message-container">
+		<div
+			class="message-item"
+			:class="messageItem">
+			<ProfilePicture
+				v-if="isOtherMessage"
+				class="other"
+				:user="chatMessage.user"
+				:title="chatMessage.user.data.name"/>
+			<div>
+				<p
+					v-if="isMessageKindText(chatMessage)"
+					class="message-item-content"
+					:class="messageItemContent">
+					{{ chatMessage.data.value }}
+				</p>
+				<p
+					v-if="isMessageKindFile(chatMessage)"
+					class="message-item-content"
+					:class="messageItemContent">
+					<!-- TODO(lead): use appropriate elements for other file types  -->
+					<img :src="fileURL"/>
+				</p>
+				<p
+					v-if="isMessageKindStatus(chatMessage)"
+					class="message-item-content"
+					:class="messageItemContent">
+					{{ determineStatusMessage }}
+				</p>
+			</div>
+			<ProfilePicture
+				v-if="isSelfMessage"
+				class="self"
+				:user="chatMessage.user"
+				:title="chatMessage.user.data.name"/>
+		</div>
+		<div v-if="!isMessageKindStatus(chatMessage)" class="seen-list">
+			<ProfilePicture
+				v-for="activity in chatMessageActivities.data"
+				:key="activity.id"
+				:user="activity.user"
+				:title="activity.user.data.name"
+				class="seen-user"/>
 		</div>
-		<ProfilePicture
-			v-if="isSelfMessage"
-			class="self"
-			:user="chatMessage.user"
-			:title="chatMessage.user.data.name"/>
 	</div>
 </template>
 
 <style scoped lang="scss">
+
+.seen-list{
+	@apply flex justify-end;
+	.seen-user{
+		max-width: 20px;
+	}
+
+}
 	.message-item {
 		@apply flex items-end w-max mb-5;
 
@@ -77,6 +95,9 @@ import { computed, inject } from "vue"
 import type { PageContext } from "$/types/renderer"
 
 import type { DeserializedChatMessageResource } from "$/types/documents/chat_message"
+import type {
+	DeserializedChatMessageActivityListDocument
+} from "$/types/documents/chat_message_activity"
 
 import {
 	isMessageKindFile,
@@ -88,6 +109,8 @@ import ProfilePicture from "@/consultation/list/profile_picture_item.vue"
 
 const pageContext = inject("pageContext") as PageContext<"deserialized">
 const { pageProps } = pageContext
+const chatMessageActivities = pageProps
+.chatMessageActivities as DeserializedChatMessageActivityListDocument<"user"|"consultation">
 
 const { userProfile } = pageProps
 

From 8dd486e9e38678d28302d50b65f567eca2ce4dc5 Mon Sep 17 00:00:00 2001
From: Jarlem Red de Peralta <lmoa.jhdp@gmail.com>
Date: Thu, 13 Oct 2022 19:15:05 +0800
Subject: [PATCH 02/13] chore(revert): revert some changes

* affected by merge conflict
---
 components/consultation/chat_window.spec.ts   |  2 +-
 .../chat_window/chat_message_item.spec.ts     | 99 ++++++++++++++++++-
 .../chat_window/chat_message_item.vue         | 22 ++++-
 3 files changed, 117 insertions(+), 6 deletions(-)

diff --git a/components/consultation/chat_window.spec.ts b/components/consultation/chat_window.spec.ts
index ebb64d31b..2a1b917c9 100644
--- a/components/consultation/chat_window.spec.ts
+++ b/components/consultation/chat_window.spec.ts
@@ -633,7 +633,7 @@ describe("Component: consultation/chat_window", () => {
 		})
 	})
 
-	describe.only("chat messages", () => {
+	describe("chat messages", () => {
 		it("is sorted properly", () => {
 			const scheduledStartAt = new Date()
 			const consultant = {
diff --git a/components/consultation/chat_window/chat_message_item.spec.ts b/components/consultation/chat_window/chat_message_item.spec.ts
index ba9613ad3..43f96f103 100644
--- a/components/consultation/chat_window/chat_message_item.spec.ts
+++ b/components/consultation/chat_window/chat_message_item.spec.ts
@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import { shallowMount } from "@vue/test-utils"
 import type { TextMessage, StatusMessage } from "$/types/message"
 import type { DeserializedUserDocument } from "$/types/documents/user"
@@ -7,6 +8,10 @@ import Component from "./chat_message_item.vue"
 
 describe("Component: consultation/chat_window/chat_message_item", () => {
 	describe("Text message", () => {
+		const chatMessageActivities = {
+			"data": []
+		}
+
 		it("should show self's text message properly", () => {
 			const CURRENT_TIME = new Date()
 			const user = {
@@ -32,6 +37,7 @@ describe("Component: consultation/chat_window/chat_message_item", () => {
 					"provide": {
 						"pageContext": {
 							"pageProps": {
+								chatMessageActivities,
 								"userProfile": user
 							}
 						}
@@ -63,7 +69,7 @@ describe("Component: consultation/chat_window/chat_message_item", () => {
 			const messageItemProfilePicture = wrapper.find(".message-item .self")
 
 			expect(messageItem.find(".self").exists()).toBeTruthy()
-			expect(messageItemContent.html()).toContain(textValue)
+			expect(messageItemContent.text()).toContain(textValue)
 			expect(messageItemProfilePicture.exists()).toBeTruthy()
 			expect(messageItemProfilePicture.attributes("title")).toEqual(user.data.name)
 		})
@@ -110,6 +116,7 @@ describe("Component: consultation/chat_window/chat_message_item", () => {
 					"provide": {
 						"pageContext": {
 							"pageProps": {
+								chatMessageActivities,
 								"userProfile": user
 							}
 						}
@@ -148,6 +155,87 @@ describe("Component: consultation/chat_window/chat_message_item", () => {
 	})
 
 	describe("Status message", () => {
+		const chatMessageActivities = {
+			"data": []
+		}
+
+		it("should show own status message properly", () => {
+			const CURRENT_TIME = new Date()
+			const user = {
+				"data": {
+					"email": "",
+					"id": "1",
+					"kind": "reachable_employee",
+					"name": "self",
+					"prefersDark": true,
+					"profilePicture": {
+						"data": {
+							"fileContents": "http://example.com/image_a",
+							"id": "1",
+							"type": "profile_picture"
+						}
+					},
+					"type": "user"
+				}
+			} as DeserializedUserDocument<"profilePicture">
+			const other = {
+				"data": {
+					"email": "",
+					"id": "2",
+					"kind": "student",
+					"name": "Other user",
+					"prefersDark": true,
+					"profilePicture": {
+						"data": {
+							"fileContents": "http://example.com/image_b",
+							"id": "2",
+							"type": "profile_picture"
+						}
+					},
+					"type": "user"
+				}
+			} as DeserializedUserDocument<"profilePicture">
+			const textValue = "Hello foo!"
+			const wrapper = shallowMount<any>(Component, {
+				"global": {
+					"provide": {
+						"pageContext": {
+							"pageProps": {
+								chatMessageActivities,
+								"userProfile": user
+							}
+						}
+					},
+					"stubs": {
+						"ProfilePicture": {
+							"name": "ProfilePicture",
+							"template": "<img/>"
+						}
+					}
+				},
+				"props": {
+					"chatMessage": {
+						"createdAt": CURRENT_TIME,
+						"data": {
+							"value": textValue
+						},
+						"id": "0",
+						"kind": "status",
+						"type": "chat_message",
+						"updatedAt": CURRENT_TIME,
+						user
+					} as DeserializedChatMessageResource<"user"> & StatusMessage<"deserialized">
+				}
+			})
+
+			const messageItem = wrapper.find(".message-item")
+			const messageItemContent = wrapper.find(".message-item-content")
+
+			expect(messageItem.classes()).toContain("status-message")
+			expect(messageItemContent.html()).toContain(textValue)
+			expect(messageItemContent.html()).toContain(user.data.name)
+		})
+
 		it("should show other's status message properly", () => {
 			const CURRENT_TIME = new Date()
 			const user = {
@@ -190,6 +278,7 @@ describe("Component: consultation/chat_window/chat_message_item", () => {
 					"provide": {
 						"pageContext": {
 							"pageProps": {
+								chatMessageActivities,
 								"userProfile": user
 							}
 						}
@@ -226,6 +315,10 @@ describe("Component: consultation/chat_window/chat_message_item", () => {
 	})
 
 	describe("File message", () => {
+		const chatMessageActivities = {
+			"data": []
+		}
+
 		it("can show image type message properly", () => {
 			const CURRENT_TIME = new Date()
 			const user = {
@@ -254,6 +347,7 @@ describe("Component: consultation/chat_window/chat_message_item", () => {
 					"provide": {
 						"pageContext": {
 							"pageProps": {
+								chatMessageActivities,
 								"userProfile": user
 							}
 						}
@@ -292,7 +386,7 @@ describe("Component: consultation/chat_window/chat_message_item", () => {
 			expect(actualFile.attributes("src")).toBeDefined()
 		})
 
-		it("can show image type message properly", () => {
+		it("can show file type message properly", () => {
 			const CURRENT_TIME = new Date()
 			const user = {
 				"data": {
@@ -320,6 +414,7 @@ describe("Component: consultation/chat_window/chat_message_item", () => {
 					"provide": {
 						"pageContext": {
 							"pageProps": {
+								chatMessageActivities,
 								"userProfile": user
 							}
 						}
diff --git a/components/consultation/chat_window/chat_message_item.vue b/components/consultation/chat_window/chat_message_item.vue
index 265f7cb76..105217e56 100644
--- a/components/consultation/chat_window/chat_message_item.vue
+++ b/components/consultation/chat_window/chat_message_item.vue
@@ -20,7 +20,17 @@
 					class="message-item-content"
 					:class="[messageItemContent, fileMessageContent]">
 					<!-- TODO(lead): use appropriate elements for other file types  -->
-					<img :src="fileURL"/>
+					<img v-if="fileMessageContent.image" :src="fileURL"/>
+					<a
+						v-else
+						class="file-link flex items-center m-1"
+						target="_blank"
+						:href="fileURL">
+						<span class="attachment-symbol material-icons">
+							attachment
+						</span>
+						<span class="file-name">{{ chatMessage.data.name }}</span>
+					</a>
 				</p>
 				<p
 					v-if="isMessageKindStatus(chatMessage)"
@@ -35,7 +45,9 @@
 				:user="chatMessage.user"
 				:title="chatMessage.user.data.name"/>
 		</div>
-		<div v-if="!isMessageKindStatus(chatMessage)" class="seen-list">
+		<div
+			v-if="!isMessageKindStatus(chatMessage)"
+			class="seen-list">
 			<ProfilePicture
 				v-for="activity in chatMessageActivities.data"
 				:key="activity.id"
@@ -50,8 +62,10 @@
 
 .seen-list{
 	@apply flex justify-end;
+
 	.seen-user{
 		max-width: 20px;
+		max-height: 20px;
 	}
 
 }
@@ -92,7 +106,9 @@
 		}
 
 		.attachment-symbol {
-			@apply bg-gray-300 text-black dark:bg-dark-100 dark:text-white rounded-full p-1 mr-2;
+			@apply rounded-full p-1 mr-2;
+			@apply bg-gray-300 text-black;
+			@apply dark:bg-dark-100 dark:text-white;
 		}
 		.other, .self {
 			@apply rounded-full border border-true-gray-600 border-opacity-50;

From f4de641bbd9adf0352b22d10716a5a7bb7bbb4fa Mon Sep 17 00:00:00 2001
From: Jarlem Red de Peralta <lmoa.jhdp@gmail.com>
Date: Sat, 15 Oct 2022 15:19:59 +0800
Subject: [PATCH 03/13] share(constant): expose new symbol

---
 common_front-end/constants/provided_keys.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/common_front-end/constants/provided_keys.ts b/common_front-end/constants/provided_keys.ts
index 25c2ee6c5..2f16f02a5 100644
--- a/common_front-end/constants/provided_keys.ts
+++ b/common_front-end/constants/provided_keys.ts
@@ -1,3 +1,4 @@
 export const CHAT_MESSAGE_ACTIVITY = Symbol("Key for chat activity resource of current user")
+export const CHAT_MESSAGE_ACTIVITIES_IN_CONSULTATION = Symbol("current chat message activity")
 
 export const BODY_CLASSES = Symbol("Key for body CSS manager")

From f9dcd725f4426810e4caa8e80928aa44d2c5bbf9 Mon Sep 17 00:00:00 2001
From: Jarlem Red de Peralta <lmoa.jhdp@gmail.com>
Date: Sat, 15 Oct 2022 15:21:04 +0800
Subject: [PATCH 04/13] intrn(consultation): filter activities

Co-authored-by: Kenneth Trecy Tobias <19201.tobias.kennethtrecy.c@gmail.com>
---
 pages/consultation/read.page.vue | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/pages/consultation/read.page.vue b/pages/consultation/read.page.vue
index 9faecbee1..45ccd9640 100644
--- a/pages/consultation/read.page.vue
+++ b/pages/consultation/read.page.vue
@@ -57,7 +57,10 @@ import type {
 	DeserializedChatMessageListDocument
 } from "$/types/documents/chat_message"
 
-import { CHAT_MESSAGE_ACTIVITY } from "$@/constants/provided_keys"
+import {
+	CHAT_MESSAGE_ACTIVITY,
+	CHAT_MESSAGE_ACTIVITIES_IN_CONSULTATION
+} from "$@/constants/provided_keys"
 
 import Socket from "$@/external/socket"
 import ChatMessageFetcher from "$@/fetchers/chat_message"
@@ -121,10 +124,21 @@ const chatMessageActivities = ref<
 	>
 )
 
+const chatMessageActivityResources = computed<
+	DeserializedChatMessageActivityResource<"user"|"consultation">[]
+>(() => {
+	const foundChatActivity = chatMessageActivities.value.data.filter(activity => {
+		const consultationID = activity.consultation.data.id
+		return String(consultationID) === String(consultation.value.id)
+	}) as DeserializedChatMessageActivityResource<"user"|"consultation">[]
+
+	return foundChatActivity
+})
+
 const currentChatMessageActivityResource = computed<
 	DeserializedChatMessageActivityResource<"user"|"consultation">
 >(() => {
-	const foundChatActivity = chatMessageActivities.value.data.find(activity => {
+	const foundChatActivity = chatMessageActivityResources.value.find(activity => {
 		const ownerID = activity.user.data.id
 		return String(ownerID) === String(userProfile.data.id)
 	}) as DeserializedChatMessageActivityResource<"user"|"consultation">
@@ -133,6 +147,7 @@ const currentChatMessageActivityResource = computed<
 })
 
 provide(CHAT_MESSAGE_ACTIVITY, readonly(currentChatMessageActivityResource))
+provide(CHAT_MESSAGE_ACTIVITIES_IN_CONSULTATION, readonly(chatMessageActivityResources))
 
 function updateConsultationAttributes(updatedAttributes: ConsultationAttributes<"deserialized">)
 : void {

From 8dcb6fac90c191a93c08076506b8d97a2209a23f Mon Sep 17 00:00:00 2001
From: Jarlem Red de Peralta <lmoa.jhdp@gmail.com>
Date: Sat, 15 Oct 2022 15:22:47 +0800
Subject: [PATCH 05/13] intrn(chat): provide next message

Co-authored-by: Kenneth Trecy Tobias <19201.tobias.kennethtrecy.c@gmail.com>
---
 components/consultation/chat_window.vue                   | 4 ++--
 components/consultation/chat_window/chat_message_item.vue | 5 +++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/components/consultation/chat_window.vue b/components/consultation/chat_window.vue
index 9163a5162..ea62fd18c 100644
--- a/components/consultation/chat_window.vue
+++ b/components/consultation/chat_window.vue
@@ -93,10 +93,10 @@
 			</div>
 
 			<div
-				v-for="message in sortedMessagesByTime"
+				v-for="(message, i) in sortedMessagesByTime"
 				:key="message.id"
 				class="chat-entry">
-				<ChatMessageItem :chat-message="message"/>
+				<ChatMessageItem :chat-message="message" :next-message="sortedMessagesByTime[i+1]"/>
 			</div>
 		</div>
 		<UserController
diff --git a/components/consultation/chat_window/chat_message_item.vue b/components/consultation/chat_window/chat_message_item.vue
index 105217e56..d217b8866 100644
--- a/components/consultation/chat_window/chat_message_item.vue
+++ b/components/consultation/chat_window/chat_message_item.vue
@@ -143,8 +143,9 @@ const chatMessageActivities = pageProps
 
 const { userProfile } = pageProps
 
-const { chatMessage } = defineProps<{
-	chatMessage: DeserializedChatMessageResource<"user">
+const { chatMessage, nextMessage } = defineProps<{
+	chatMessage: DeserializedChatMessageResource<"user">,
+	nextMessage?: DeserializedChatMessageResource<"user">
 }>()
 
 const isSelfMessage = computed<boolean>(() => {

From ba9eade6f3653f5e3e790568687e58fd4013db8f Mon Sep 17 00:00:00 2001
From: Jarlem Red de Peralta <lmoa.jhdp@gmail.com>
Date: Sat, 15 Oct 2022 15:59:34 +0800
Subject: [PATCH 06/13] intrn(front-end): make window focus listener

Co-authored-by: Kenneth Trecy Tobias <19201.tobias.kennethtrecy.c@gmail.com>
---
 common_front-end/external/window_focus.ts | 39 +++++++++++++++++++++++
 common_front-end/types/dependent.ts       |  2 ++
 2 files changed, 41 insertions(+)
 create mode 100644 common_front-end/external/window_focus.ts

diff --git a/common_front-end/external/window_focus.ts b/common_front-end/external/window_focus.ts
new file mode 100644
index 000000000..c081eaa6b
--- /dev/null
+++ b/common_front-end/external/window_focus.ts
@@ -0,0 +1,39 @@
+import type { FocusListener } from "$@/types/dependent"
+
+import Stub from "$/singletons/stub"
+import RequestEnvironment from "$/singletons/request_environment"
+
+export default class DocumentVisibility extends RequestEnvironment {
+	private static rawListeners: FocusListener[] = []
+
+	static addEventListener(listener: FocusListener): void {
+		this.rawListeners.push(listener)
+		Stub.runConditionally(
+			() => {
+				window.addEventListener("blur", () => {
+					this.rawListeners.forEach(rawListener => rawListener("blur"))
+				})
+				window.addEventListener("focus", () => {
+					this.rawListeners.forEach(rawListener => rawListener("focus"))
+				})
+			},
+			() => [ {} as unknown as void, {
+				"arguments": [ listener ],
+				"functionName": "addEventListener"
+			} ]
+		)
+	}
+
+	static emitMockEvent(state: "blur" | "focus"): void {
+		Stub.runConditionally(
+			() => {
+				throw new Error("It is impossible to emit mock events in non-test environments.")
+			},
+			() => {
+				this.rawListeners.forEach(rawListener => rawListener(state))
+
+				return [ {} as unknown as void, null ]
+			}
+		)
+	}
+}
diff --git a/common_front-end/types/dependent.ts b/common_front-end/types/dependent.ts
index 38e8fbaa9..a67a5ea3c 100644
--- a/common_front-end/types/dependent.ts
+++ b/common_front-end/types/dependent.ts
@@ -25,3 +25,5 @@ interface TimerListener {
 export type TimerListeners = TimerListener[]
 
 export type VisibilityListener = (currentVisibility: Document["visibilityState"]) => void
+
+export type FocusListener = (currentFocus: "focus" | "blur") => void

From bcf9229ed2a3c4499a77ee2cf351313d0cf57633 Mon Sep 17 00:00:00 2001
From: Jarlem Red de Peralta <lmoa.jhdp@gmail.com>
Date: Sat, 15 Oct 2022 16:00:15 +0800
Subject: [PATCH 07/13] intrn(chat): update `seenMessageAt` manually

Co-authored-by: Kenneth Trecy Tobias <19201.tobias.kennethtrecy.c@gmail.com>
---
 .../consultation/listeners/register_chat.ts       | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/components/consultation/listeners/register_chat.ts b/components/consultation/listeners/register_chat.ts
index 8b66a8ee3..c562fee5f 100644
--- a/components/consultation/listeners/register_chat.ts
+++ b/components/consultation/listeners/register_chat.ts
@@ -36,12 +36,25 @@ export default function(
 		const lastSeenMessageAt = currentChatMessageActivityResource.value.seenMessageAt
 		chatMessageActivityFetcher.update(currentChatMessageActivityResource.value.id, {
 			"receivedMessageAt": new Date().toJSON(),
-			"seenMessageAt": lastSeenMessageAt?.toJSON() ?? null
+			"seenMessageAt": isWindowShown
+				? new Date().toJSON()
+				: lastSeenMessageAt?.toJSON() ?? null
 		})
 	}
 
+	function updateSeenMessageAt(): void {
+		const { receivedMessageAt } = currentChatMessageActivityResource.value
+		chatMessageActivityFetcher.update(currentChatMessageActivityResource.value.id, {
+			"receivedMessageAt": receivedMessageAt?.toJSON() ?? null,
+			"seenMessageAt": new Date().toJSON()
+		})
+	}
+
+
 	DocumentVisibility.addEventListener(newState => {
 		isWindowShown = newState === "visible"
+
+		if (isWindowShown) updateSeenMessageAt()
 	})
 
 	const debounceUpdateReceivedMessageAt = debounce(() => {

From 72f520d66a24834191e6b81823ec3e9e49f206e6 Mon Sep 17 00:00:00 2001
From: Jarlem Red de Peralta <lmoa.jhdp@gmail.com>
Date: Sat, 15 Oct 2022 19:44:34 +0800
Subject: [PATCH 08/13] feat(chat): display list of seen users

* based on `chatMessageActivity.seenMessageAt`

Co-authored-by: Kenneth Trecy Tobias <19201.tobias.kennethtrecy.c@gmail.com>
---
 .../chat_window/chat_message_item.spec.ts     | 77 ++++++++++++++++++-
 .../chat_window/chat_message_item.vue         | 37 ++++++---
 2 files changed, 100 insertions(+), 14 deletions(-)

diff --git a/components/consultation/chat_window/chat_message_item.spec.ts b/components/consultation/chat_window/chat_message_item.spec.ts
index 43f96f103..a594370a2 100644
--- a/components/consultation/chat_window/chat_message_item.spec.ts
+++ b/components/consultation/chat_window/chat_message_item.spec.ts
@@ -1,13 +1,16 @@
 /* eslint-disable max-lines */
 import { shallowMount } from "@vue/test-utils"
+
 import type { TextMessage, StatusMessage } from "$/types/message"
 import type { DeserializedUserDocument } from "$/types/documents/user"
 import type { DeserializedChatMessageResource } from "$/types/documents/chat_message"
 
 import Component from "./chat_message_item.vue"
+import { CHAT_MESSAGE_ACTIVITIES_IN_CONSULTATION } from "$@/constants/provided_keys"
+import { DeserializedChatMessageActivityResource } from "$/types/documents/chat_message_activity"
 
 describe("Component: consultation/chat_window/chat_message_item", () => {
-	describe("Text message", () => {
+	describe("text message", () => {
 		const chatMessageActivities = {
 			"data": []
 		}
@@ -154,7 +157,7 @@ describe("Component: consultation/chat_window/chat_message_item", () => {
 		})
 	})
 
-	describe("Status message", () => {
+	describe("status message", () => {
 		const chatMessageActivities = {
 			"data": []
 		}
@@ -314,7 +317,7 @@ describe("Component: consultation/chat_window/chat_message_item", () => {
 		})
 	})
 
-	describe("File message", () => {
+	describe("file message", () => {
 		const chatMessageActivities = {
 			"data": []
 		}
@@ -453,4 +456,72 @@ describe("Component: consultation/chat_window/chat_message_item", () => {
 			expect(actualFile.attributes("href")).toBeDefined()
 		})
 	})
+
+	describe("seen users", () => {
+		it("can identify which users have seen latest message", async () => {
+			const CURRENT_TIME = new Date("2022-10-4 10:00:00")
+			const user = {
+				"data": {
+					"email": "",
+					"id": "1",
+					"kind": "reachable_employee",
+					"name": "A",
+					"prefersDark": true,
+					"profilePicture": {
+						"data": {
+							"fileContents": "http://example.com/image_a",
+							"id": "1",
+							"type": "profile_picture"
+						}
+					},
+					"type": "user"
+				}
+			} as DeserializedUserDocument<"profilePicture">
+			const data = {
+				"value": "hello world"
+			}
+			const chatMessageActivities = [
+				{
+					"id": 0,
+					"receivedMessageAt": new Date("2022-10-4 10:00:01"),
+					"seenMessageAt": new Date("2022-10-4 10:01:03"),
+					"type": "chat_message_activity",
+					user
+				} as unknown as DeserializedChatMessageActivityResource
+			]
+			const wrapper = shallowMount<any>(Component, {
+				"global": {
+					"provide": {
+						[CHAT_MESSAGE_ACTIVITIES_IN_CONSULTATION]: chatMessageActivities,
+						"pageContext": {
+							"pageProps": {
+								"userProfile": user
+							}
+						}
+					},
+					"stubs": {
+						"ProfilePicture": {
+							"name": "ProfilePicture",
+							"template": "<img/>"
+						}
+					}
+				},
+				"props": {
+					"chatMessage": {
+						"createdAt": CURRENT_TIME,
+						data,
+						"id": "0",
+						"kind": "text",
+						"type": "chat_message",
+						"updatedAt": CURRENT_TIME,
+						user
+					}
+				}
+			})
+			const seenList = wrapper.find(".seen-list")
+			const seenUser = seenList.find("img")
+
+			expect(seenUser.exists()).toBeTruthy()
+		})
+	})
 })
diff --git a/components/consultation/chat_window/chat_message_item.vue b/components/consultation/chat_window/chat_message_item.vue
index d217b8866..49e291637 100644
--- a/components/consultation/chat_window/chat_message_item.vue
+++ b/components/consultation/chat_window/chat_message_item.vue
@@ -8,7 +8,7 @@
 				class="other"
 				:user="chatMessage.user"
 				:title="chatMessage.user.data.name"/>
-			<div>
+			<div :title="chatMessage.createdAt.toString()">
 				<p
 					v-if="isMessageKindText(chatMessage)"
 					class="message-item-content"
@@ -48,12 +48,15 @@
 		<div
 			v-if="!isMessageKindStatus(chatMessage)"
 			class="seen-list">
-			<ProfilePicture
-				v-for="activity in chatMessageActivities.data"
+			<span
+				v-for="activity in chatMessageActivityResources"
 				:key="activity.id"
-				:user="activity.user"
-				:title="activity.user.data.name"
-				class="seen-user"/>
+				class="seen-user">
+				<ProfilePicture
+					v-if="hasSeenLatestMessage(activity)"
+					:user="activity.user!"
+					:title="`seen at ${activity.seenMessageAt}`"/>
+			</span>
 		</div>
 	</div>
 </template>
@@ -125,7 +128,7 @@ import type { PageContext } from "$/types/renderer"
 
 import type { DeserializedChatMessageResource } from "$/types/documents/chat_message"
 import type {
-	DeserializedChatMessageActivityListDocument
+	DeserializedChatMessageActivityResource
 } from "$/types/documents/chat_message_activity"
 
 import {
@@ -135,11 +138,10 @@ import {
 } from "@/consultation/helpers/chat_message_kinds"
 
 import ProfilePicture from "@/consultation/list/profile_picture_item.vue"
+import { CHAT_MESSAGE_ACTIVITIES_IN_CONSULTATION } from "$@/constants/provided_keys"
 
 const pageContext = inject("pageContext") as PageContext<"deserialized">
 const { pageProps } = pageContext
-const chatMessageActivities = pageProps
-.chatMessageActivities as DeserializedChatMessageActivityListDocument<"user"|"consultation">
 
 const { userProfile } = pageProps
 
@@ -154,7 +156,6 @@ const isSelfMessage = computed<boolean>(() => {
 
 	return isMessageCameFromSelf
 })
-
 const isOtherMessage = computed<boolean>(() => {
 	const isMessageCameFromOther = !isMessageKindStatus(chatMessage)
 		&& userProfile.data.id !== chatMessage.user.data.id
@@ -187,6 +188,20 @@ const fileMessageContent = {
 	"image": isMessageKindFile(chatMessage)
 	&& chatMessage.data.subkind.match(/image/u)
 }
-
 const fileURL = computed(() => chatMessage.attachedChatFile?.data.fileContents)
+
+const chatMessageActivityResources
+= inject(CHAT_MESSAGE_ACTIVITIES_IN_CONSULTATION) as DeserializedChatMessageActivityResource[]
+function hasSeenLatestMessage(activity: DeserializedChatMessageActivityResource) {
+	if (activity.seenMessageAt && activity.user) {
+		const hasSeenCurrentMessage = activity.seenMessageAt >= chatMessage.createdAt
+		const hasSeenNextMessage
+			= !nextMessage
+			|| activity.seenMessageAt < nextMessage?.createdAt
+
+		return hasSeenCurrentMessage && hasSeenNextMessage
+	}
+
+	return false
+}
 </script>

From 0f5e9fed042925dfbe0af4f98249ab063c06f7bc Mon Sep 17 00:00:00 2001
From: Jarlem Red de Peralta <lmoa.jhdp@gmail.com>
Date: Sat, 15 Oct 2022 20:01:04 +0800
Subject: [PATCH 09/13] intrn(consultation): update seen value on focus

Co-authored-by: Kenneth Trecy Tobias <19201.tobias.kennethtrecy.c@gmail.com>
---
 components/consultation/listeners/register_chat.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/components/consultation/listeners/register_chat.ts b/components/consultation/listeners/register_chat.ts
index c562fee5f..c60c0fcf7 100644
--- a/components/consultation/listeners/register_chat.ts
+++ b/components/consultation/listeners/register_chat.ts
@@ -17,6 +17,7 @@ import mergeDeserializedMessages from "@/consultation/helpers/merge_deserialized
 import Socket from "$@/external/socket"
 import debounce from "$@/helpers/debounce"
 import deserialize from "$/object/deserialize"
+import WindowFocus from "$@/external/window_focus"
 import DocumentVisibility from "$@/external/document_visibility"
 import ChatMessageActivityFetcher from "$@/fetchers/chat_message_activity"
 import ConsultationTimerManager from "$@/helpers/consultation_timer_manager"
@@ -51,6 +52,11 @@ export default function(
 	}
 
 
+	WindowFocus.addEventListener(newState => {
+		const isWindowFocused = newState === "focus"
+
+		if (isWindowFocused) updateSeenMessageAt()
+	})
 	DocumentVisibility.addEventListener(newState => {
 		isWindowShown = newState === "visible"
 

From 701fed6758b16dbaaa2f91f2463f91f75422bb6c Mon Sep 17 00:00:00 2001
From: Jarlem Red de Peralta <lmoa.jhdp@gmail.com>
Date: Sat, 15 Oct 2022 20:09:18 +0800
Subject: [PATCH 10/13] unit(chat): provide missing props

---
 components/consultation/chat_window.spec.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/components/consultation/chat_window.spec.ts b/components/consultation/chat_window.spec.ts
index 2a1b917c9..164d754d9 100644
--- a/components/consultation/chat_window.spec.ts
+++ b/components/consultation/chat_window.spec.ts
@@ -186,7 +186,8 @@ describe("Component: consultation/chat_window", () => {
 					},
 					"props": {
 						"chatMessages": fakeChatMessage,
-						"consultation": fakeConsultation
+						"consultation": fakeConsultation,
+						"isConsultationListShown": false
 					}
 				})
 
@@ -279,7 +280,8 @@ describe("Component: consultation/chat_window", () => {
 					},
 					"props": {
 						"chatMessages": fakeChatMessage,
-						"consultation": fakeConsultation
+						"consultation": fakeConsultation,
+						"isConsultationListShown": false
 					}
 				})
 
@@ -325,7 +327,8 @@ describe("Component: consultation/chat_window", () => {
 					},
 					"props": {
 						"chatMessages": fakeChatMessage,
-						"consultation": fakeConsultation
+						"consultation": fakeConsultation,
+						"isConsultationListShown": false
 					}
 				})
 
@@ -471,7 +474,8 @@ describe("Component: consultation/chat_window", () => {
 					},
 					"props": {
 						"chatMessages": fakeChatMessage,
-						"consultation": fakeConsultation
+						"consultation": fakeConsultation,
+						"isConsultationListShown": false
 					}
 				})
 

From 96920319e810d4ef8637c3cba897c1985b2c619c Mon Sep 17 00:00:00 2001
From: Jarlem Red de Peralta <lmoa.jhdp@gmail.com>
Date: Sat, 15 Oct 2022 20:11:34 +0800
Subject: [PATCH 11/13] unit(chat): remove unnecessary lines of code

---
 .../chat_window/chat_message_item.spec.ts     | 19 +------------------
 1 file changed, 1 insertion(+), 18 deletions(-)

diff --git a/components/consultation/chat_window/chat_message_item.spec.ts b/components/consultation/chat_window/chat_message_item.spec.ts
index a594370a2..d398ac7f9 100644
--- a/components/consultation/chat_window/chat_message_item.spec.ts
+++ b/components/consultation/chat_window/chat_message_item.spec.ts
@@ -181,23 +181,6 @@ describe("Component: consultation/chat_window/chat_message_item", () => {
 					"type": "user"
 				}
 			} as DeserializedUserDocument<"profilePicture">
-			const other = {
-				"data": {
-					"email": "",
-					"id": "2",
-					"kind": "student",
-					"name": "Other user",
-					"prefersDark": true,
-					"profilePicture": {
-						"data": {
-							"fileContents": "http://example.com/image_b",
-							"id": "2",
-							"type": "profile_picture"
-						}
-					},
-					"type": "user"
-				}
-			} as DeserializedUserDocument<"profilePicture">
 			const textValue = "Hello foo!"
 			const wrapper = shallowMount<any>(Component, {
 				"global": {
@@ -458,7 +441,7 @@ describe("Component: consultation/chat_window/chat_message_item", () => {
 	})
 
 	describe("seen users", () => {
-		it("can identify which users have seen latest message", async () => {
+		it("can identify which users have seen latest message", () => {
 			const CURRENT_TIME = new Date("2022-10-4 10:00:00")
 			const user = {
 				"data": {

From d3660c93a3ffd1eef791af3327570dfda5fb2957 Mon Sep 17 00:00:00 2001
From: Jarlem Red de Peralta <lmoa.jhdp@gmail.com>
Date: Sat, 15 Oct 2022 20:15:18 +0800
Subject: [PATCH 12/13] chore(front-end): remove class name

---
 common_front-end/external/window_focus.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/common_front-end/external/window_focus.ts b/common_front-end/external/window_focus.ts
index c081eaa6b..9229cfb6b 100644
--- a/common_front-end/external/window_focus.ts
+++ b/common_front-end/external/window_focus.ts
@@ -3,7 +3,7 @@ import type { FocusListener } from "$@/types/dependent"
 import Stub from "$/singletons/stub"
 import RequestEnvironment from "$/singletons/request_environment"
 
-export default class DocumentVisibility extends RequestEnvironment {
+export default class extends RequestEnvironment {
 	private static rawListeners: FocusListener[] = []
 
 	static addEventListener(listener: FocusListener): void {

From 012fdd1a3d888ee7b67930cfb2c4551180b1451f Mon Sep 17 00:00:00 2001
From: Jarlem Red de Peralta <lmoa.jhdp@gmail.com>
Date: Sat, 15 Oct 2022 20:31:17 +0800
Subject: [PATCH 13/13] intg(front-end): adjust previous call indexes

---
 pages/consultation/read.spec.ts | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/pages/consultation/read.spec.ts b/pages/consultation/read.spec.ts
index a4b6318cd..01ac622f7 100644
--- a/pages/consultation/read.spec.ts
+++ b/pages/consultation/read.spec.ts
@@ -27,6 +27,7 @@ import makeConsultationChatNamespace from "$/namespace_makers/consultation_chat"
 
 import Page from "./read.page.vue"
 
+
 describe("UI Page: Read consultation resource by ID", () => {
 	it("can toggle state of consultation list", async() => {
 		const OTHER_CONSULTATION_COUNT = 3
@@ -210,16 +211,18 @@ describe("UI Page: Read consultation resource by ID", () => {
 		expect(chatWindow.exists()).toBeTruthy()
 
 		const previousCalls = Stub.consumePreviousCalls()
+
 		expect(previousCalls).toHaveProperty("0.functionName", "initialize")
 		expect(previousCalls).toHaveProperty("0.arguments", [])
 		expect(previousCalls).toHaveProperty("1.functionName", "addEventListener")
-		expect(previousCalls).toHaveProperty("2.functionName", "addEventListeners")
+		expect(previousCalls).toHaveProperty("2.functionName", "addEventListener")
+		expect(previousCalls).toHaveProperty("3.functionName", "addEventListeners")
 		expect(previousCalls).toHaveProperty(
-			"2.arguments.0",
+			"3.arguments.0",
 			makeConsultationChatNamespace(model.id)
 		)
-		expect(previousCalls).toHaveProperty("2.arguments.1.create")
-		expect(previousCalls).toHaveProperty("2.arguments.1.update")
+		expect(previousCalls).toHaveProperty("3.arguments.1.create")
+		expect(previousCalls).toHaveProperty("3.arguments.1.update")
 
 		const castFetch = fetch as jest.Mock<any, any>
 		const [ [ firstRequest ], [ secondRequest ] ] = castFetch.mock.calls
@@ -366,14 +369,14 @@ describe("UI Page: Communicate with consultation resource", () => {
 		expect(previousCalls).toHaveProperty("0.functionName", "initialize")
 		expect(previousCalls).toHaveProperty("0.arguments", [])
 		expect(previousCalls).toHaveProperty("1.functionName", "addEventListener")
-		expect(previousCalls).toHaveProperty("2.functionName", "addEventListeners")
+		expect(previousCalls).toHaveProperty("2.functionName", "addEventListener")
+		expect(previousCalls).toHaveProperty("3.functionName", "addEventListeners")
 		expect(previousCalls).toHaveProperty(
-			"2.arguments.0",
+			"3.arguments.0",
 			makeConsultationChatNamespace(model.id)
 		)
-		expect(previousCalls).toHaveProperty("2.arguments.1.connect_error")
-		expect(previousCalls).toHaveProperty("2.arguments.1.create")
-		expect(previousCalls).toHaveProperty("2.arguments.1.update")
+		expect(previousCalls).toHaveProperty("3.arguments.1.create")
+		expect(previousCalls).toHaveProperty("3.arguments.1.update")
 
 		const castFetch = fetch as jest.Mock<any, any>
 		const [ [ firstRequest ], [ secondRequest ] ] = castFetch.mock.calls