intrn(consultation): include profile picture in chat message

components/consultation/chat_window/chat_message_item.vue

@@ -1,5 +1,9 @@
 <template>
 	<div class="message-item">
+		<ProfilePicture
+			v-if="isOtherMessage"
+			class="flex-1"
+			:user="chatMessage.user"/>
 		<div :class="messageAlignment">
 			<h6 class="message-item-name">
 				{{ chatMessage.user.data.name }}
@@ -10,6 +14,10 @@
 				{{ chatMessage.data.value }}
 			</p>
 		</div>
+		<ProfilePicture
+			v-if="isSelfMessage"
+			class="flex-1"
+			:user="chatMessage.user"/>
 	</div>
 </template>
 
@@ -38,6 +46,8 @@ import type { PageContext } from "$/types/renderer"
 import type { TextMessage, StatusMessage } from "$/types/message"
 import type { DeserializedChatMessageResource } from "$/types/documents/chat_message"
 
+import ProfilePicture from "@/helpers/profile_picture.vue"
+
 const pageContext = inject("pageContext") as PageContext<"deserialized">
 const { pageProps } = pageContext
 
@@ -54,10 +64,24 @@ function isStatusMessage(value: DeserializedChatMessageResource<"user">)
 	return value.kind === "status"
 }
 
+const isSelfMessage = computed<boolean>(() => {
+	const isMessageCameFromSelf = !isStatusMessage(chatMessage)
+		&& userProfile.data.id === chatMessage.user.data.id
+
+	return isMessageCameFromSelf
+})
+
+const isOtherMessage = computed<boolean>(() => {
+	const isMessageCameFromOther = !isStatusMessage(chatMessage)
+		&& userProfile.data.id !== chatMessage.user.data.id
+
+	return isMessageCameFromOther
+})
+
 const messageAlignment = computed<Alignment>(() => {
 	if (isStatusMessage(chatMessage)) {
 		return "align-center"
-	} else if (userProfile.data.id === chatMessage.user.data.id) {
+	} else if (isSelfMessage.value) {
 		return "align-right"
 	}