@webitel/ui-chats 0.1.47 → 0.1.49

package/package.json

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

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

@@ -181,7 +181,7 @@ export const useChatScroll = ({
 		viewportTransitionTimer = setTimeout(() => {
 			isViewportTransition = false;
 			viewportTransitionTimer = null;
-		}, 500);
+		}, 1000);
 	};
 
 	/**

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

@@ -3,15 +3,17 @@ import { onUnmounted, type Ref } from 'vue';
 /**
  * @author PolinaSukhorukova-webitel
  *
- * Fires the callback on every resize and disconnects itself
- * once clientHeight is unchanged twice in a row.
+ * Fires the callback on every resize of the target element and stops
+ * either after the given timeout or on unmount.
  */
 
 export const useObserveHeightUntilStable = (
-	chatContainer: Ref<HTMLElement | null>,
+	target: Ref<HTMLElement | null>,
 	callback: () => void,
+	timeout?: number,
 ) => {
 	let observer: ResizeObserver | null = null;
+	let stopTimer: ReturnType<typeof setTimeout> | null = null;
 	let isViewportTransition = false;
 	let viewportTransitionTimer: ReturnType<typeof setTimeout> | null = null;
 
@@ -23,35 +25,31 @@ export const useObserveHeightUntilStable = (
 		viewportTransitionTimer = setTimeout(() => {
 			isViewportTransition = false;
 			viewportTransitionTimer = null;
-		}, 500);
+		}, 1000);
 	};
 
 	const stopObserve = () => {
 		observer?.disconnect();
 		observer = null;
+
+		if (stopTimer) {
+			clearTimeout(stopTimer);
+			stopTimer = null;
+		}
 	};
 
 	const startObserve = () => {
-		if (!chatContainer.value) return;
-
-		let lastClientHeight = chatContainer.value.clientHeight;
-		let stableCount = 0;
+		if (!target.value) return;
 
 		observer = new ResizeObserver(() => {
-			const currentClientHeight = chatContainer.value?.clientHeight;
-
 			if (!isViewportTransition) callback();
-
-			if (currentClientHeight === lastClientHeight) {
-				stableCount++;
-				if (stableCount >= 2) stopObserve();
-			} else {
-				stableCount = 0;
-				lastClientHeight = currentClientHeight;
-			}
 		});
 
-		observer.observe(chatContainer.value);
+		observer.observe(target.value);
+
+		if (timeout !== undefined) {
+			stopTimer = setTimeout(stopObserve, timeout);
+		}
 	};
 
 	/**

package/src/ui/messaging/modules/message/components/chat-message.vue

@@ -136,7 +136,7 @@ const isTransferAgent = computed(
 
 const isBot = computed<boolean>(() => props.message.member?.type === 'bot');
 
-const getClientUsername = computed<string>(() => {
+const getClientUsername = computed<string | undefined>(() => {
 	if (isTransferAgent.value) return props.message.member?.name;
 	if (isSelfSide.value) return props?.agentName;
 

package/src/ui/messaging/modules/message/components/details/chat-message-document.vue

@@ -38,11 +38,12 @@ const documentSize = computed(() => {
 });
 
 function downloadDocument() {
-	if (!props.file) return;
+	if (!props.file?.url) return;
 	const a = document.createElement('a');
 	a.href = props.file.url;
 	a.target = '_blank';
-	a.download = props.file.name;
+	// empty `download` lets the browser derive the filename from the URL
+	a.download = props.file.name ?? '';
 	a.click();
 }
 </script>

package/src/ui/messaging/modules/message/components/details/chat-message-player.vue

@@ -35,7 +35,7 @@ import type { ChatMessageFile } from '../../../../types/ChatMessage.types';
 
 const props = defineProps<{
 	file: ChatMessageFile;
-	type: string;
+	type?: string;
 }>();
 
 const emit = defineEmits<{

package/src/ui/messaging/modules/message/composables/useChatMessage.ts

@@ -15,8 +15,8 @@ export const useChatMessages = (
 ) => {
 	function showChatDate(index: number): boolean {
 		const { prevMessage, message } = getMessage(index);
-		const prevDate = +prevMessage?.createdAt || 0;
-		const currentDate = +message?.createdAt || 0;
+		const prevDate = Number(prevMessage?.createdAt) || 0;
+		const currentDate = Number(message?.createdAt) || 0;
 		return (
 			!!prevMessage &&
 			formatDate(prevDate, FormatDateMode.DATE) !==

package/src/ui/messaging/modules/message/composables/useChatMessageFile.ts

@@ -3,7 +3,7 @@ import { computed, type Ref, toRef } from 'vue';
 import type { ChatMessageFile } from '../../../types/ChatMessage.types';
 
 export function useChatMessageFile(
-	file: ChatMessageFile | Ref<ChatMessageFile>,
+	file: ChatMessageFile | Ref<ChatMessageFile | undefined> | undefined,
 ) {
 	const fileRef = toRef(file);
 
@@ -30,7 +30,7 @@ export function useChatMessageFile(
 		);
 	});
 
-	const isMediaType = (value: string) => {
+	const isMediaType = (value: string | undefined) => {
 		return !!(value?.includes('audio') || value?.includes('video'));
 	};