@webitel/ui-chats 0.0.16 → 0.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-chats",
-	"version": "0.0.16",
+	"version": "0.0.17",
 	"description": "Reusable Webitel Frontend Code for Chats UI",
 	"workspaces": [
 		"../../",

package/src/ui/messaging/components/the-chat-messages-container.vue

@@ -26,7 +26,7 @@
       </div>
       <scroll-to-bottom-btn
         v-if="showScrollToBottomBtn"
-        :new-message-count="newUnseenMessages"
+        :new-message-count="newUnseenMessagesCount"
         @scroll="scrollToBottom('smooth')"
       />
     </section>
@@ -34,7 +34,7 @@
 
 <script setup lang="ts">
 import type { Emitter } from "mitt";
-import { inject, useTemplateRef } from "vue";
+import { computed, inject, nextTick, onMounted, useTemplateRef } from "vue";
 
 import type { UiChatsEmitterEvents } from "../../utils/emitter";
 import { useChatScroll } from "../composables/useChatScroll";
@@ -62,15 +62,24 @@ const { showAvatar, showChatDate } = useChatMessages(props.messages);
 
 const {
 	showScrollToBottomBtn,
-	newUnseenMessages,
+	newUnseenMessagesCount,
 	scrollToBottom,
 	handleChatScroll,
 	handleChatResize,
-} = useChatScroll(messagesContainer, props.messages);
+} = useChatScroll(
+	messagesContainer,
+	computed(() => props.messages),
+);
 
 function focusOnInput() {
 	uiChatsEmitter?.on("focusOnTextField", focus);
 }
+
+onMounted(() => {
+	nextTick(() => {
+		scrollToBottom();
+	});
+});
 </script>
 
 <style scoped lang="scss">

package/src/ui/messaging/composables/useChatScroll.ts

@@ -5,27 +5,23 @@ import type { ChatMessageType } from "../types/ChatMessage.types";
 
 export const useChatScroll = (
 	element: Ref<HTMLElement | null> = null,
-	chatMessages: ChatMessageType[] = [],
+	messages: Ref<ChatMessageType[]> | ComputedRef<ChatMessageType[]>,
 ) => {
+	/* @author ye.pohranichna
+  why 136px? because: https://webitel.atlassian.net/browse/WTEL-7136 */
 	const defaultThreshold = 136;
-	const { arrivedState } = useScroll(element.value);
+	const { arrivedState } = useScroll(element);
 
-	const newUnseenMessages = ref<number>(0);
+	const newUnseenMessagesCount = ref<number>(0);
 	const showScrollToBottomBtn = ref<boolean>(false);
 	/* @author ye.pohranichna
-    the distance where the scrollToBottomBtn must be shown/hide.
-    why defaultThreshold=136px? because: https://webitel.atlassian.net/browse/WTEL-7136 */
+    the distance where the scrollToBottomBtn must be shown/hide. */
 	const threshold = ref<number>(defaultThreshold);
-	const messages = ref<ChatMessageType[]>(chatMessages);
-
-	const lastMessage = computed<ChatMessageType>(
-		() => messages.value[messages.value?.length - 1],
-	);
 
-	const isLastMessageIsMy = computed<boolean>(() =>
-		Boolean(lastMessage.value?.member?.self),
+	const isLastMessageIsMy = computed<boolean>(
+		() => lastMessage.value?.member?.self,
 	);
-
+	const lastMessage = computed<ChatMessageType>(() => messages.value?.at(-1));
 	const handleChatScroll = () => {
 		const wrapper = element.value;
 		if (!wrapper) return;
@@ -42,13 +38,23 @@ export const useChatScroll = (
 	};
 
 	const handleShowScrollToBottomBtn = (el: HTMLElement) => {
-		resetScrollToBottomBtn();
+		if (arrivedState.bottom) {
+			resetScrollToBottomBtn();
+			return;
+			/* @author ye.pohranichna
+          quit the function because we are already at the bottom */
+		}
 
 		const { scrollTop, scrollHeight, clientHeight } = el;
 		const distanceFromBottom = scrollHeight - (scrollTop + clientHeight);
 		showScrollToBottomBtn.value = distanceFromBottom > threshold.value;
 	};
 
+	const resetScrollToBottomBtn = (): void => {
+		newUnseenMessagesCount.value = 0;
+		showScrollToBottomBtn.value = false;
+	};
+
 	const updateThreshold = (el: HTMLElement) => {
 		/* @author ye.pohranichna
          need to update if clientHeight was changed
@@ -56,23 +62,11 @@ export const useChatScroll = (
 		threshold.value = Math.max(defaultThreshold, el.clientHeight * 0.3);
 	};
 
-	const resetScrollToBottomBtn = (): void => {
-		if (arrivedState.bottom && newUnseenMessages.value) {
-			/* @author ye.pohranichna
-			hide the btn and reset new messages count, when we scroll to the bottom without btn */
-			newUnseenMessages.value = 0;
-			showScrollToBottomBtn.value = false;
-			/* @author ye.pohranichna
-			quit the function because we are already at the bottom */
-			return;
-		}
-	};
-
-	const scrollToBottomAfterNewMessage = () => {
+	const handleBtnAfterNewMessage = () => {
 		if (arrivedState.bottom || isLastMessageIsMy.value) {
 			scrollToBottom("smooth");
 		} else {
-			newUnseenMessages.value += 1;
+			newUnseenMessagesCount.value += 1;
 		}
 	};
 
@@ -82,7 +76,7 @@ export const useChatScroll = (
 			behavior: behavior === "instant" ? "auto" : behavior,
 		});
 
-		newUnseenMessages.value = 0;
+		newUnseenMessagesCount.value = 0;
 		showScrollToBottomBtn.value = false;
 	};
 
@@ -90,7 +84,7 @@ export const useChatScroll = (
 		() => messages.value?.length,
 		(newValue, oldValue) => {
 			const newMessageReceived = newValue - oldValue === 1; // when chat have just 1 new message @author ye.pohranichna
-			if (newMessageReceived) scrollToBottomAfterNewMessage();
+			if (newMessageReceived) handleBtnAfterNewMessage();
 		},
 		{
 			flush: "post",
@@ -99,7 +93,7 @@ export const useChatScroll = (
 
 	return {
 		showScrollToBottomBtn,
-		newUnseenMessages,
+		newUnseenMessagesCount,
 		scrollToBottom,
 		handleChatScroll,
 		handleChatResize,

package/types/ui/messaging/composables/useChatScroll.d.ts

@@ -1,8 +1,8 @@
-import { type Ref } from "vue";
+import { type ComputedRef, type Ref } from "vue";
 import type { ChatMessageType } from "../types/ChatMessage.types";
-export declare const useChatScroll: (element?: Ref<HTMLElement | null>, chatMessages?: ChatMessageType[]) => {
+export declare const useChatScroll: (element: Ref<HTMLElement | null>, messages: Ref<ChatMessageType[]> | ComputedRef<ChatMessageType[]>) => {
     showScrollToBottomBtn: Ref<boolean, boolean>;
-    newUnseenMessages: Ref<number, number>;
+    newUnseenMessagesCount: Ref<number, number>;
     scrollToBottom: (behavior?: ScrollBehavior) => void;
     handleChatScroll: () => void;
     handleChatResize: () => void;