@webitel/ui-chats 0.1.48 → 0.1.50

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-chats",
-	"version": "0.1.48",
+	"version": "0.1.50",
 	"description": "Reusable Webitel Frontend Code for Chats UI",
 	"workspaces": [
 		"../../",
@@ -41,7 +41,7 @@
 		"@webitel/api-services": "^0.1.0",
 		"@webitel/chat-web-sdk": "^0.0.19",
 		"@webitel/styleguide": "~26.2",
-		"@webitel/ui-sdk": "~26.8",
+		"@webitel/ui-sdk": "~26.6",
 		"mitt": "^3",
 		"vue": "^3.5"
 	},

package/src/config/config.ts

@@ -1,17 +1,13 @@
+import type { I18n } from 'vue-i18n';
 import { messages } from '../locale';
 
-/** Minimal i18n surface ui-chats needs — avoids vue-i18n schema variance issues. */
-export type UiChatsI18n = {
-	global: {
-		mergeLocaleMessage: (locale: string, message: unknown) => void;
-	};
-};
-
 export type UiChatsConfig = {
-	i18n?: UiChatsI18n;
+	i18n?: I18n;
 };
 
-export const defaultConfig: UiChatsConfig = {};
+export const defaultConfig: UiChatsConfig = {
+	i18n: null,
+};
 
 export const setConfig = (conf: UiChatsConfig) => {
 	Object.assign(defaultConfig, conf);
@@ -21,6 +17,6 @@ export const setConfig = (conf: UiChatsConfig) => {
 	}
 
 	Object.entries(messages).forEach(([locale, localeMessages]) => {
-		conf.i18n!.global.mergeLocaleMessage(locale, localeMessages);
+		conf.i18n.global.mergeLocaleMessage(locale, localeMessages);
 	});
 };

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

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

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;
-		}, 1000);
+		}, 500);
 	};
 
 	const stopObserve = () => {
 		observer?.disconnect();
 		observer = null;
+
+		if (stopTimer) {
+			clearTimeout(stopTimer);
+			stopTimer = null;
+		}
 	};
 
 	const startObserve = () => {
-		if (!chatContainer.value) return;
-
-		let lastClientHeight: number | undefined = 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 | undefined>(() => {
+const getClientUsername = computed<string>(() => {
 	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,12 +38,11 @@ const documentSize = computed(() => {
 });
 
 function downloadDocument() {
-	if (!props.file?.url) return;
+	if (!props.file) return;
 	const a = document.createElement('a');
 	a.href = props.file.url;
 	a.target = '_blank';
-	// empty `download` lets the browser derive the filename from the URL
-	a.download = props.file.name ?? '';
+	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 = Number(prevMessage?.createdAt) || 0;
-		const currentDate = Number(message?.createdAt) || 0;
+		const prevDate = +prevMessage?.createdAt || 0;
+		const currentDate = +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 | undefined> | undefined,
+	file: ChatMessageFile | Ref<ChatMessageFile>,
 ) {
 	const fileRef = toRef(file);
 
@@ -30,7 +30,7 @@ export function useChatMessageFile(
 		);
 	});
 
-	const isMediaType = (value: string | undefined) => {
+	const isMediaType = (value: string) => {
 		return !!(value?.includes('audio') || value?.includes('video'));
 	};
 

package/src/ui/utils/ResultCallbacks.types.ts

@@ -1,7 +1 @@
-// Defined locally so consumers (and this package's .d.ts) do not depend on
-// @webitel/ui-sdk/src/types package-export resolution.
-export type ResultCallbacks = {
-	onSuccess?: () => void;
-	onError?: (error: Error) => void;
-	onComplete?: () => void;
-};
+export type { ResultCallbacks } from '@webitel/ui-sdk/src/types';