@webitel/ui-chats 0.1.41 → 0.1.43

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-chats",
-	"version": "0.1.41",
+	"version": "0.1.43",
 	"description": "Reusable Webitel Frontend Code for Chats UI",
 	"workspaces": [
 		"../../",
@@ -9,7 +9,7 @@
 	],
 	"scripts": {
 		"dev": "vite",
-		"build:types": "vue-tsc -p ./tsconfig.build.json",
+		"build:types": "vue-tsc -b tsconfig.build.json",
 		"typecheck": "vue-tsc --noEmit -p ./tsconfig.typecheck.json",
 		"lint:fix": "npx biome check --write ./src",
 		"biome:ci:gh": "biome ci ./src --reporter=github",

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

@@ -23,6 +23,12 @@ export interface UseChatScrollOptions {
 	onBeforeStart?: (options: {
 		scrollToBottom: (behavior?: ScrollBehavior) => void;
 	}) => void;
+	/**
+	 * @author ye-pohranichna
+	 * Fired when the viewer is at the bottom and has therefore seen the
+	 * latest messages
+	 */
+	onSeen?: () => void;
 }
 
 export const useChatScroll = ({
@@ -35,6 +41,7 @@ export const useChatScroll = ({
 	onBeforeStart = (options) => {
 		options.scrollToBottom();
 	},
+	onSeen,
 }: UseChatScrollOptions) => {
 	const { arrivedState } = useScroll(chatContainer);
 
@@ -50,6 +57,8 @@ export const useChatScroll = ({
 	let lastVisibleMessageEl: HTMLElement | null = null;
 	let prevScrollHeight = 0;
 	let resizeObserver: ResizeObserver | null = null;
+	let isViewportTransition = false;
+	let viewportTransitionTimer: ReturnType<typeof setTimeout> | null = null;
 	/**
 	 * @author PolinaSukhorukova-webitel
 	 *
@@ -80,6 +89,7 @@ export const useChatScroll = ({
 		newUnseenMessagesCount.value = 0;
 
 		resetScrollToBottomBtn();
+		onSeen?.();
 	};
 	const getTopMessageEl = () => {
 		// help to fix chat viewing position when new messages was loaded
@@ -113,6 +123,12 @@ export const useChatScroll = ({
 
 			const newScrollHeight = el.scrollHeight;
 
+			if (isViewportTransition) {
+				prevScrollHeight = newScrollHeight;
+				updateScrollToBottomBtnVisibility(el);
+				return;
+			}
+
 			const wasNearBottom =
 				el.scrollTop + el.clientHeight >= prevScrollHeight - bottomThreshold;
 			const contentGrown = newScrollHeight > prevScrollHeight;
@@ -157,6 +173,26 @@ export const useChatScroll = ({
 		resetScrollToBottomBtn();
 	};
 
+	const onFullscreenChange = () => {
+		isViewportTransition = true;
+
+		if (viewportTransitionTimer) clearTimeout(viewportTransitionTimer);
+
+		viewportTransitionTimer = setTimeout(() => {
+			isViewportTransition = false;
+			viewportTransitionTimer = null;
+		}, 500);
+	};
+
+	/**
+	 * @author PolinaSukhorukova-webitel
+	 *
+	 * WTEL-9968 (https://webitel.atlassian.net/browse/WTEL-9968)
+	 * to avoid extra bottom scroll when chat is in fullscreen
+	 */
+
+	document.addEventListener('fullscreenchange', onFullscreenChange);
+
 	watch(
 		() => messages.value?.length,
 		(newValue, oldValue) => {
@@ -209,12 +245,17 @@ export const useChatScroll = ({
 	watch(
 		() => arrivedState.bottom,
 		(bottom) => {
-			if (bottom) newUnseenMessagesCount.value = 0;
+			if (bottom) {
+				newUnseenMessagesCount.value = 0;
+				onSeen?.();
+			}
 		},
 	);
 
 	onUnmounted(() => {
 		stopStickToBottomObserving();
+		document.removeEventListener('fullscreenchange', onFullscreenChange);
+		if (viewportTransitionTimer) clearTimeout(viewportTransitionTimer);
 	});
 
 	return {

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

@@ -12,6 +12,19 @@ export const useObserveHeightUntilStable = (
 	callback: () => void,
 ) => {
 	let observer: ResizeObserver | null = null;
+	let isViewportTransition = false;
+	let viewportTransitionTimer: ReturnType<typeof setTimeout> | null = null;
+
+	const onFullscreenChange = () => {
+		isViewportTransition = true;
+
+		if (viewportTransitionTimer) clearTimeout(viewportTransitionTimer);
+
+		viewportTransitionTimer = setTimeout(() => {
+			isViewportTransition = false;
+			viewportTransitionTimer = null;
+		}, 500);
+	};
 
 	const stopObserve = () => {
 		observer?.disconnect();
@@ -26,7 +39,8 @@ export const useObserveHeightUntilStable = (
 
 		observer = new ResizeObserver(() => {
 			const currentClientHeight = chatContainer.value?.clientHeight;
-			callback();
+
+			if (!isViewportTransition) callback();
 
 			if (currentClientHeight === lastClientHeight) {
 				stableCount++;
@@ -40,7 +54,19 @@ export const useObserveHeightUntilStable = (
 		observer.observe(chatContainer.value);
 	};
 
-	onUnmounted(stopObserve);
+	/**
+	 * @author PolinaSukhorukova-webitel
+	 *
+	 * WTEL-9968 (https://webitel.atlassian.net/browse/WTEL-9968)
+	 * to avoid extra bottom scroll when chat is in fullscreen
+	 */
+	document.addEventListener('fullscreenchange', onFullscreenChange);
+
+	onUnmounted(() => {
+		stopObserve();
+		document.removeEventListener('fullscreenchange', onFullscreenChange);
+		if (viewportTransitionTimer) clearTimeout(viewportTransitionTimer);
+	});
 
 	return {
 		startObserve,

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />