@webitel/ui-chats 0.1.51 → 0.1.52

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-chats",
-	"version": "0.1.51",
+	"version": "0.1.52",
 	"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/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 ChatActionSlots } from '../enums/ChatAction.enum';
+import { ChatAction, type SharedActionSlots } 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;
 }>();
 
-defineSlots<ChatActionSlots>();
+const slots = defineSlots<SharedActionSlots>();
 
 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, useTemplateRef } from 'vue';
+import { computed, inject, type MaybeRef, useTemplateRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import type { UiChatsEmitterEvents } from '../../../../utils/emitter';
 
 const { t } = useI18n();
 
-const textModel = defineModel<string>('text', {
+const textModel = defineModel<MaybeRef<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,8 +11,3 @@ 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;
-		}, 1000);
+		}, 500);
 	};
 
 	/**

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

@@ -25,7 +25,7 @@ export const useObserveHeightUntilStable = (
 		viewportTransitionTimer = setTimeout(() => {
 			isViewportTransition = false;
 			viewportTransitionTimer = null;
-		}, 1000);
+		}, 500);
 	};
 
 	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 | undefined>(() => {
+const getClientUsername = computed<string>(() => {
 	if (isTransferAgent.value) return props.message.member?.name;
 	if (isSelfSide.value) return props?.agentName;
 
 	return props.username || props.message.member?.name;
 });
 
-function handlePlayerInitialize(player: object) {
+function handlePlayerInitialize(player) {
 	emit(MessageAction.InitializedPlayer, {
 		player,
 	});

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<{
@@ -52,14 +52,13 @@ 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,
 	};
 });
 
-// `initialized` currently carries no payload, so the argument stays optional
-function handlePlayerInitialize(player?: object) {
-	emit('initialized', player ?? {});
+function handlePlayerInitialize(player) {
+	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 = 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/the-chat-container.vue

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

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';