@webitel/ui-chats 0.1.52 → 0.1.53

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-chats",
-	"version": "0.1.52",
+	"version": "0.1.53",
 	"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.6",
+		"@webitel/ui-sdk": "~26.8",
 		"mitt": "^3",
 		"vue": "^3.5"
 	},

package/src/config/config.ts

@@ -1,14 +1,18 @@
-import type { I18n } from 'vue-i18n';
 import { messages } from '../locale';
 
-export type UiChatsConfig = {
-	i18n?: I18n;
+/** Minimal i18n surface ui-chats needs — avoids vue-i18n schema variance issues. */
+export type UiChatsI18n = {
+	global: {
+		mergeLocaleMessage: (locale: string, message: unknown) => void;
+	};
 };
 
-export const defaultConfig: UiChatsConfig = {
-	i18n: null,
+export type UiChatsConfig = {
+	i18n?: UiChatsI18n;
 };
 
+export const defaultConfig: UiChatsConfig = {};
+
 export const setConfig = (conf: UiChatsConfig) => {
 	Object.assign(defaultConfig, conf);
 
@@ -17,6 +21,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/declaration.d.ts

@@ -0,0 +1,7 @@
+// insert-text-at-cursor ships no types and has no @types package
+declare module 'insert-text-at-cursor' {
+	export default function insertTextAtCursor(
+		el: HTMLInputElement | HTMLTextAreaElement,
+		text: string,
+	): void;
+}

package/src/ui/chat-footer/modules/user-input/components/chat-input-actions-bar.vue

@@ -20,7 +20,7 @@
 import { ComponentSize } from '@webitel/ui-sdk/enums';
 import { computed, inject } from 'vue';
 
-import { ChatAction, type SharedActionSlots } from '../enums/ChatAction.enum';
+import { ChatAction, type ChatActionSlots } from '../enums/ChatAction.enum';
 import AttachFilesAction from './actions/attach-files-action.vue';
 import EmojiPickerAction from './actions/emoji-picker-action.vue';
 import SendMessageAction from './actions/send-message-action.vue';
@@ -36,7 +36,7 @@ const emit = defineEmits<{
 	(e: typeof ChatAction.AttachFiles, files: File[]): void;
 }>();
 
-const slots = defineSlots<SharedActionSlots>();
+defineSlots<ChatActionSlots>();
 
 const ShownActionComponentsList = computed(() => {
 	/**

package/src/ui/chat-footer/modules/user-input/components/chat-text-field.vue

@@ -16,14 +16,14 @@ import { WtTextarea } from '@webitel/ui-sdk/components';
 import { ComponentSize } from '@webitel/ui-sdk/enums';
 import insertTextAtCursor from 'insert-text-at-cursor';
 import type { Emitter } from 'mitt';
-import { computed, inject, type MaybeRef, useTemplateRef } from 'vue';
+import { computed, inject, useTemplateRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import type { UiChatsEmitterEvents } from '../../../../utils/emitter';
 
 const { t } = useI18n();
 
-const textModel = defineModel<MaybeRef<string>>('text', {
+const textModel = defineModel<string>('text', {
 	required: true,
 });
 
@@ -46,8 +46,8 @@ const textareaEl = computed(() =>
 	chatTextFieldInputRef.value?.$el.querySelector('textarea'),
 );
 
-function send(text: string) {
-	textModel.value = text;
+function send(text?: string) {
+	textModel.value = text ?? '';
 }
 
 function focus() {

package/src/ui/chat-footer/modules/user-input/enums/ChatAction.enum.ts

@@ -11,3 +11,8 @@ export type ChatAction = (typeof ChatAction)[keyof typeof ChatAction];
 export type SharedActionSlots = {
 	[key in `action:${ChatAction}`]?: () => unknown;
 };
+
+/** slots `chat-input-actions-bar` itself exposes, keyed by the bare action name */
+export type ChatActionSlots = {
+	[key in ChatAction]?: (props: Record<string, unknown>) => unknown;
+};

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

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

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

@@ -25,7 +25,7 @@ export const useObserveHeightUntilStable = (
 		viewportTransitionTimer = setTimeout(() => {
 			isViewportTransition = false;
 			viewportTransitionTimer = null;
-		}, 500);
+		}, 1000);
 	};
 
 	const stopObserve = () => {

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

@@ -136,14 +136,14 @@ 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;
 
 	return props.username || props.message.member?.name;
 });
 
-function handlePlayerInitialize(player) {
+function handlePlayerInitialize(player: object) {
 	emit(MessageAction.InitializedPlayer, {
 		player,
 	});

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<{
@@ -52,13 +52,14 @@ const isVideo = computed(() => {
 });
 const mediaSrc = computed(() => {
 	return {
-		src: props.file.streamUrl || props.file.url,
-		type: props.type,
+		src: props.file.streamUrl || props.file.url || '',
+		type: props.type ?? '',
 	};
 });
 
-function handlePlayerInitialize(player) {
-	emit('initialized', player);
+// `initialized` currently carries no payload, so the argument stays optional
+function handlePlayerInitialize(player?: object) {
+	emit('initialized', player ?? {});
 }
 </script>
 

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);
 
@@ -15,27 +15,27 @@ export function useChatMessageFile(
 		return fileRef.value?.streamUrl || fileRef.value?.url;
 	});
 
+	const isMediaType = (value: string | undefined) => {
+		return !!(value?.includes('audio') || value?.includes('video'));
+	};
+
 	const image = computed(() => {
 		const isImage = fileType.value?.includes('image');
 		const isHEIC = fileType.value?.includes('heic');
 
 		if (isHEIC) return null;
 
-		return isImage && fileRef.value; //https://webitel.atlassian.net/browse/WTEL-6268
+		return isImage ? fileRef.value : null;
 	});
+
 	const media = computed(() => {
-		return (
-			(isMediaType(fileType.value) || isMediaType(fileSrc.value)) &&
-			fileRef.value
-		);
+		return isMediaType(fileType.value) || isMediaType(fileSrc.value)
+			? fileRef.value
+			: null;
 	});
 
-	const isMediaType = (value: string) => {
-		return !!(value?.includes('audio') || value?.includes('video'));
-	};
-
 	const document = computed(() => {
-		return !media.value && !image.value && fileRef.value;
+		return !media.value && !image.value ? fileRef.value : null;
 	});
 
 	return {

package/src/ui/the-chat-container.vue

@@ -143,10 +143,10 @@ function closeMedia() {
 
 const draft = ref<string>('');
 
-const slottedChatActions = computed(() => {
+const slottedChatActions = computed<ChatAction[]>(() => {
 	return Object.keys(slots)
 		.filter((key) => key.startsWith('action:'))
-		.map((key) => key.replace('action:', ''));
+		.map((key) => key.replace('action:', '') as ChatAction);
 });
 const isDropzoneDisabled = computed(
 	() => !props.chatActions.includes(ChatAction.AttachFiles),

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

@@ -1 +1,7 @@
-export type { ResultCallbacks } from '@webitel/ui-sdk/src/types';
+// 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;
+};