@webitel/ui-chats 0.1.49 → 0.1.51

package/package.json

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

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

@@ -56,6 +56,7 @@ export const useChatScroll = ({
 	let isLoadingNextMessages = false;
 	let lastVisibleMessageEl: HTMLElement | null = null;
 	let prevScrollHeight = 0;
+	let prevScrollTop = 0;
 	let resizeObserver: ResizeObserver | null = null;
 	let isViewportTransition = false;
 	let viewportTransitionTimer: ReturnType<typeof setTimeout> | null = null;
@@ -72,6 +73,15 @@ export const useChatScroll = ({
 	const lastMessage = computed(() => messages.value?.at(-1));
 	const isLastMessageMy = computed(() => !!lastMessage.value?.member?.self);
 
+	const isViewingBottom = (el: HTMLElement) =>
+		el.clientHeight > 0 &&
+		el.scrollHeight - (el.scrollTop + el.clientHeight) <= bottomThreshold;
+
+	const markSeenIfAtBottom = () => {
+		const el = chatContainer.value;
+		if (el && isViewingBottom(el)) onSeen?.();
+	};
+
 	const handleBtnAfterNewMessage = () => {
 		if (isLastMessageMy.value) {
 			scrollToBottom('instant');
@@ -89,8 +99,14 @@ export const useChatScroll = ({
 		newUnseenMessagesCount.value = 0;
 
 		resetScrollToBottomBtn();
-		onSeen?.();
+		markSeenIfAtBottom();
+	};
+
+	const handleChatScrollWithSeen = () => {
+		handleChatScroll();
+		markSeenIfAtBottom();
 	};
+
 	const getTopMessageEl = () => {
 		// help to fix chat viewing position when new messages was loaded
 		if (!chatContainer.value?.children) return;
@@ -116,6 +132,7 @@ export const useChatScroll = ({
 		if (!chatContent.value) return;
 
 		prevScrollHeight = chatContainer.value?.scrollHeight ?? 0;
+		prevScrollTop = chatContainer.value?.scrollTop ?? 0;
 
 		resizeObserver = new ResizeObserver(() => {
 			const el = chatContainer.value;
@@ -125,11 +142,23 @@ export const useChatScroll = ({
 
 			if (isViewportTransition) {
 				prevScrollHeight = newScrollHeight;
+				prevScrollTop = el.scrollTop;
 				updateScrollToBottomBtnVisibility(el);
 				return;
 			}
 
+			const heightDelta = newScrollHeight - prevScrollHeight;
+			const scrollTopDelta = el.scrollTop - prevScrollTop;
+			/**
+			 * @author PolinaSukhorukova-webitel
+			 *
+			 * Prepend after pagination shifts scrollTop by the height it adds on top; bottom
+			 * growth leaves scrollTop still. Matching deltas = prepend - skip scroll.
+			 */
+			const isPrepend =
+				Math.abs(scrollTopDelta - heightDelta) <= bottomThreshold;
 			const wasNearBottom =
+				!isPrepend &&
 				el.scrollTop + el.clientHeight >= prevScrollHeight - bottomThreshold;
 			const contentGrown = newScrollHeight > prevScrollHeight;
 
@@ -147,6 +176,7 @@ export const useChatScroll = ({
 			}
 
 			prevScrollHeight = newScrollHeight;
+			prevScrollTop = el.scrollTop;
 			updateScrollToBottomBtnVisibility(el);
 		});
 
@@ -247,7 +277,7 @@ export const useChatScroll = ({
 		(bottom) => {
 			if (bottom) {
 				newUnseenMessagesCount.value = 0;
-				onSeen?.();
+				markSeenIfAtBottom();
 			}
 		},
 	);
@@ -262,7 +292,8 @@ export const useChatScroll = ({
 		showScrollToBottomBtn,
 		newUnseenMessagesCount,
 		scrollToBottom,
+		markSeenIfAtBottom,
 		loadNextMessages,
-		handleChatScroll,
+		handleChatScroll: handleChatScrollWithSeen,
 	};
 };

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

@@ -143,7 +143,7 @@ const getClientUsername = computed<string | undefined>(() => {
 	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-player.vue

@@ -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/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),