@webitel/ui-chats 26.8.2 → 26.8.4

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-chats",
-	"version": "26.8.2",
+	"version": "26.8.4",
 	"description": "Reusable Webitel Frontend Code for Chats UI",
 	"workspaces": [
 		"../../",
@@ -13,7 +13,7 @@
 		"typecheck": "vue-tsc --noEmit -p ./tsconfig.typecheck.json",
 		"lint:fix": "npx biome check --write ./src",
 		"biome:ci:gh": "biome ci ./src --reporter=github",
-		"test:unit": "node -e \"process.exit(0)\"",
+		"test:unit": "vitest run --root ../.. packages/ui-chats/src",
 		"lint": "biome ci ./src",
 		"test": "npm run test:unit",
 		"ci:check": "npm run biome:ci:gh && npm run test:unit",
@@ -21,7 +21,10 @@
 		"utils:publish": "npm publish --access public"
 	},
 	"dependencies": {
+		"@vueuse/core": "^14.0.0",
 		"autolinker": "^4.1.5",
+		"date-fns": "^4.1.0",
+		"date-fns-tz": "^3.2.0",
 		"insert-text-at-cursor": "^0.3.0"
 	},
 	"devDependencies": {
@@ -75,6 +78,10 @@
 		"./adapters": {
 			"types": "./types/adapters/index.d.ts",
 			"import": "./src/adapters/index.ts"
+		},
+		"./v2": {
+			"types": "./types/v2/index.d.ts",
+			"import": "./src/v2/index.ts"
 		}
 	},
 	"author": "webitel",

package/src/locale/en/en.ts

@@ -1,3 +1,5 @@
+import v2 from '../../v2/locale/en';
+
 export default {
 	'@webitel/ui-chats': {
 		ui: {
@@ -7,5 +9,6 @@ export default {
 				textAreaPlaceholder: 'Write a message...',
 			},
 		},
+		v2,
 	},
 };

package/src/locale/es/es.ts

@@ -1,3 +1,5 @@
+import v2 from '../../v2/locale/es';
+
 export default {
 	'@webitel/ui-chats': {
 		ui: {
@@ -7,5 +9,6 @@ export default {
 				textAreaPlaceholder: 'Escribe un mensaje...',
 			},
 		},
+		v2,
 	},
 };

package/src/locale/kz/kz.ts

@@ -1,3 +1,5 @@
+import v2 from '../../v2/locale/kz';
+
 export default {
 	'@webitel/ui-chats': {
 		ui: {
@@ -7,5 +9,6 @@ export default {
 				textAreaPlaceholder: 'Хабарлама жаз...',
 			},
 		},
+		v2,
 	},
 };

package/src/locale/pl/pl.ts

@@ -1,3 +1,5 @@
+import v2 from '../../v2/locale/pl';
+
 export default {
 	'@webitel/ui-chats': {
 		ui: {
@@ -7,5 +9,6 @@ export default {
 				textAreaPlaceholder: 'Napisz wiadomość...',
 			},
 		},
+		v2,
 	},
 };

package/src/locale/ro/ro.ts

@@ -1,3 +1,5 @@
+import v2 from '../../v2/locale/ro';
+
 export default {
 	'@webitel/ui-chats': {
 		ui: {
@@ -7,5 +9,6 @@ export default {
 				textAreaPlaceholder: 'Scrie un mesaj...',
 			},
 		},
+		v2,
 	},
 };

package/src/locale/ru/ru.ts

@@ -1,3 +1,5 @@
+import v2 from '../../v2/locale/ru';
+
 export default {
 	'@webitel/ui-chats': {
 		ui: {
@@ -7,5 +9,6 @@ export default {
 				textAreaPlaceholder: 'Напишите сообщение...',
 			},
 		},
+		v2,
 	},
 };

package/src/locale/uk/uk.ts

@@ -1,3 +1,5 @@
+import v2 from '../../v2/locale/uk';
+
 export default {
 	'@webitel/ui-chats': {
 		ui: {
@@ -7,5 +9,6 @@ export default {
 				textAreaPlaceholder: 'Напишіть повідомлення...',
 			},
 		},
+		v2,
 	},
 };

package/src/locale/uz/uz.ts

@@ -1,3 +1,5 @@
+import v2 from '../../v2/locale/uz';
+
 export default {
 	'@webitel/ui-chats': {
 		ui: {
@@ -7,5 +9,6 @@ export default {
 				textAreaPlaceholder: 'Xabar yozing...',
 			},
 		},
+		v2,
 	},
 };

package/src/locale/vi/vi.ts

@@ -1,3 +1,5 @@
+import v2 from '../../v2/locale/vi';
+
 export default {
 	'@webitel/ui-chats': {
 		ui: {
@@ -7,5 +9,6 @@ export default {
 				textAreaPlaceholder: 'Viết tin nhắn...',
 			},
 		},
+		v2,
 	},
 };

package/src/shared/composables/__tests__/useChatScroll.spec.ts

@@ -0,0 +1,164 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it, vi } from 'vitest';
+import { computed, defineComponent, h, nextTick, ref } from 'vue';
+
+import { useChatScroll } from '../useChatScroll';
+
+const Host = defineComponent({
+	props: {
+		items: {
+			type: Array,
+			required: true,
+		},
+	},
+	setup(props) {
+		const container = ref<HTMLElement | null>(null);
+		const content = ref<HTMLElement | null>(null);
+		const api = useChatScroll<{
+			mine: boolean;
+		}>({
+			chatContainer: container,
+			chatContent: content,
+			messages: computed(
+				() =>
+					props.items as {
+						mine: boolean;
+					}[],
+			),
+			isSelf: (item) => item.mine,
+			itemClass: 'row',
+			chatId: computed(() => 'c1'),
+			isChatClosed: computed(() => false),
+		});
+		return {
+			container,
+			content,
+			api,
+		};
+	},
+	render() {
+		return h(
+			'div',
+			{
+				ref: 'container',
+			},
+			[
+				h('div', {
+					ref: 'content',
+				}),
+			],
+		);
+	},
+});
+
+describe('useChatScroll (shared)', () => {
+	it('mounts with a custom isSelf / itemClass and exposes its API', () => {
+		const wrapper = mount(Host, {
+			props: {
+				items: [
+					{
+						mine: false,
+					},
+				],
+			},
+		});
+		const { api } = wrapper.vm as unknown as {
+			api: ReturnType<typeof useChatScroll>;
+		};
+		expect(api.newUnseenMessagesCount.value).toBe(0);
+		expect(typeof api.scrollToBottom).toBe('function');
+		wrapper.unmount();
+	});
+
+	it('still accepts v1 items without isSelf', () => {
+		const V1Host = defineComponent({
+			setup() {
+				const container = ref<HTMLElement | null>(null);
+				useChatScroll({
+					chatContainer: container,
+					chatContent: ref(null),
+					messages: computed(() => [
+						{
+							member: {
+								self: true,
+							},
+						},
+					]),
+					chatId: computed(() => 'c1'),
+					isChatClosed: computed(() => false),
+				});
+				return () =>
+					h('div', {
+						ref: container,
+					});
+			},
+		});
+		expect(() => mount(V1Host).unmount()).not.toThrow();
+	});
+});
+
+describe('useChatScroll — thread switch during a pending load', () => {
+	it('does not restore the old thread’s scroll anchor into the new thread', async () => {
+		const chatId = ref('a');
+		const isLoading = ref(false);
+		const container = ref<HTMLElement | null>(null);
+		const Host = defineComponent({
+			setup() {
+				const api = useChatScroll({
+					chatContainer: container,
+					chatContent: ref(null),
+					messages: computed(() => []),
+					chatId: computed(() => chatId.value),
+					isChatClosed: computed(() => false),
+					isLoading,
+				});
+				return {
+					api,
+				};
+			},
+			render() {
+				return h(
+					'div',
+					{
+						ref: (el) => {
+							container.value = el as HTMLElement;
+						},
+					},
+					[
+						h('div', {
+							class: 'chat-message',
+						}),
+					],
+				);
+			},
+		});
+		const wrapper = mount(Host);
+		await nextTick();
+		const scrollTo = vi.fn();
+		(container.value as HTMLElement).scrollTo = scrollTo;
+		const { api } = wrapper.vm as unknown as {
+			api: ReturnType<typeof useChatScroll>;
+		};
+
+		api.loadNextMessages(true, () => {
+			isLoading.value = true;
+		});
+		await nextTick();
+		chatId.value = 'b';
+		await nextTick();
+		await nextTick();
+		scrollTo.mockClear();
+
+		isLoading.value = false;
+		await nextTick();
+		await nextTick();
+
+		// 'auto' is the prepend restore; scrollToBottom uses 'instant'
+		expect(scrollTo).not.toHaveBeenCalledWith(
+			expect.objectContaining({
+				behavior: 'auto',
+			}),
+		);
+		wrapper.unmount();
+	});
+});

package/src/shared/composables/__tests__/useObserveHeightUntilStable.spec.ts

@@ -0,0 +1,48 @@
+import { mount } from '@vue/test-utils';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { defineComponent, h, ref } from 'vue';
+
+import { useObserveHeightUntilStable } from '../useObserveHeightUntilStable';
+
+const observers: Array<{
+	disconnect: ReturnType<typeof vi.fn>;
+}> = [];
+
+class TrackedResizeObserver {
+	disconnect = vi.fn();
+	observe = vi.fn();
+	unobserve = vi.fn();
+	constructor() {
+		observers.push(this);
+	}
+}
+
+describe('useObserveHeightUntilStable', () => {
+	afterEach(() => {
+		observers.length = 0;
+		vi.unstubAllGlobals();
+	});
+
+	// a second start (thread switch) must not leave the first observer scrolling forever
+	it('stops the previous observer when started again', () => {
+		vi.stubGlobal('ResizeObserver', TrackedResizeObserver);
+		const target = ref<HTMLElement | null>(document.createElement('div'));
+		const Host = defineComponent({
+			setup() {
+				return useObserveHeightUntilStable(target, () => {}, 2000);
+			},
+			render: () => h('div'),
+		});
+		const wrapper = mount(Host);
+		const api = wrapper.vm as unknown as {
+			startObserve: () => void;
+		};
+
+		api.startObserve();
+		api.startObserve();
+
+		expect(observers).toHaveLength(2);
+		expect(observers[0].disconnect).toHaveBeenCalled();
+		wrapper.unmount();
+	});
+});

package/src/{ui/messaging → shared}/composables/useChatScroll.ts

@@ -9,14 +9,23 @@ import {
 	watch,
 } from 'vue';
 
-import type { ChatMessageType } from '../types/ChatMessage.types';
-
 import { useScrollToBottomBtn } from './useScrollToBottomBtn';
 
-export interface UseChatScrollOptions {
+export interface UseChatScrollOptions<TItem = unknown> {
 	chatContainer: Ref<HTMLElement | null>;
 	chatContent: Ref<HTMLElement | null>;
-	messages: Ref<ChatMessageType[]> | ComputedRef<ChatMessageType[]>;
+	messages: Ref<readonly TItem[]> | ComputedRef<readonly TItem[]>;
+	/**
+	 * Whether a history item was sent by the viewer. The viewer's own new
+	 * message always scrolls the history to the bottom.
+	 * Defaults to v1's `item.member.self`.
+	 */
+	isSelf?: (item: TItem) => boolean;
+	/**
+	 * Class carried by every history row. The topmost row anchors the scroll
+	 * position while older items are prepended.
+	 */
+	itemClass?: string;
 	chatId: ComputedRef<string>;
 	isChatClosed: ComputedRef<boolean>;
 	isLoading?: Ref<boolean> | ComputedRef<boolean>;
@@ -31,10 +40,23 @@ export interface UseChatScrollOptions {
 	onSeen?: () => void;
 }
 
-export const useChatScroll = ({
+const isSelfByMember = (item: unknown): boolean =>
+	!!(
+		item as
+			| {
+					member?: {
+						self?: boolean;
+					};
+			  }
+			| undefined
+	)?.member?.self;
+
+export const useChatScroll = <TItem = unknown>({
 	chatContainer,
 	chatContent,
 	messages,
+	isSelf = isSelfByMember,
+	itemClass = 'chat-message',
 	chatId,
 	isChatClosed,
 	isLoading,
@@ -42,7 +64,7 @@ export const useChatScroll = ({
 		options.scrollToBottom();
 	},
 	onSeen,
-}: UseChatScrollOptions) => {
+}: UseChatScrollOptions<TItem>) => {
 	const { arrivedState } = useScroll(chatContainer);
 
 	const {
@@ -70,8 +92,10 @@ export const useChatScroll = ({
 
 	const newUnseenMessagesCount = ref(0);
 
-	const lastMessage = computed(() => messages.value?.at(-1));
-	const isLastMessageMy = computed(() => !!lastMessage.value?.member?.self);
+	const isLastMessageMy = computed(() => {
+		const lastMessage = messages.value?.at(-1);
+		return lastMessage !== undefined && isSelf(lastMessage);
+	});
 
 	const isViewingBottom = (el: HTMLElement) =>
 		el.clientHeight > 0 &&
@@ -112,7 +136,7 @@ export const useChatScroll = ({
 		if (!chatContainer.value?.children) return;
 		lastVisibleMessageEl =
 			(chatContainer.value?.getElementsByClassName(
-				'chat-message',
+				itemClass,
 			)[0] as HTMLElement) ?? null;
 	};
 
@@ -198,6 +222,10 @@ export const useChatScroll = ({
 
 	const resetScrollState = () => {
 		stopStickToBottomObserving();
+		// a page still loading for the previous chat must not restore its
+		// anchor into this one
+		isLoadingNextMessages = false;
+		lastVisibleMessageEl = null;
 		prevScrollHeight = 0;
 		newUnseenMessagesCount.value = 0;
 		resetScrollToBottomBtn();

package/src/{ui/messaging → shared}/composables/useObserveHeightUntilStable.ts

@@ -39,6 +39,8 @@ export const useObserveHeightUntilStable = (
 	};
 
 	const startObserve = () => {
+		// a restart (e.g. switching chats) must not leave the previous observer running
+		stopObserve();
 		if (!target.value) return;
 
 		observer = new ResizeObserver(() => {

package/src/ui/chat-footer/modules/user-input/components/actions/send-message-action.vue

@@ -6,6 +6,7 @@
     variant="outlined"
     rounded
     wide
+    @mousedown.prevent
     @click="emit(ChatAction.SendMessage)"
   />
 </template>

package/src/ui/index.ts

@@ -1,6 +1,6 @@
+export { useChatScroll } from '../shared/composables/useChatScroll';
+export { useObserveHeightUntilStable } from '../shared/composables/useObserveHeightUntilStable';
 export { ChatAction } from './chat-footer/modules/user-input/enums/ChatAction.enum';
-export { useChatScroll } from './messaging/composables/useChatScroll';
-export { useObserveHeightUntilStable } from './messaging/composables/useObserveHeightUntilStable';
 export { useChatMessageFile } from './messaging/modules/message/composables/useChatMessageFile';
 export { MessageAction } from './messaging/modules/message/enums/MessageAction.enum';
 export type {

package/src/ui/messaging/components/the-messages-container.vue

@@ -52,10 +52,10 @@
 import { WebitelContactsContact } from '@webitel/api-services/gen/models';
 import type { Emitter } from 'mitt';
 import { computed, inject, useTemplateRef } from 'vue';
+import { useChatScroll } from '../../../shared/composables/useChatScroll';
+import { useObserveHeightUntilStable } from '../../../shared/composables/useObserveHeightUntilStable';
 import { ChatAction } from '../../chat-footer/modules/user-input/enums/ChatAction.enum';
 import type { UiChatsEmitterEvents } from '../../utils/emitter';
-import { useChatScroll } from '../composables/useChatScroll';
-import { useObserveHeightUntilStable } from '../composables/useObserveHeightUntilStable';
 import ChatMessage from '../modules/message/components/chat-message.vue';
 import { useChatMessages } from '../modules/message/composables/useChatMessage';
 import { MessageAction } from '../modules/message/enums/MessageAction.enum';

package/src/v2/index.ts

@@ -0,0 +1,4 @@
+export * from './types';
+export { default as ChatComposer } from './ui/chat-composer/chat-composer.vue';
+export { default as ChatHistory } from './ui/chat-history/chat-history.vue';
+export { default as ChatThread } from './ui/chat-thread/chat-thread.vue';

package/src/v2/locale/en.ts

@@ -0,0 +1,29 @@
+const en = {
+	composer: {
+		placeholder: 'Write a message...',
+		attach: 'Attach files',
+		emoji: 'Emoji',
+		send: 'Send',
+	},
+	history: {
+		today: 'Today',
+		waitingForOperator: 'Waiting for operator to accept…',
+		deletedMessage: 'Message deleted',
+		unsupportedMessage: 'Unsupported message',
+		download: 'Download',
+	},
+	systemNotice: {
+		started: 'Chat started by {actor}',
+		joined: '{actor} joined the chat',
+		accepted: '{actor} accepted the chat',
+		transferred: '{actor} transferred the chat',
+		left: '{actor} left the chat',
+		ended: 'Chat ended by {actor}',
+		unknown: 'System event',
+		system: 'system',
+	},
+};
+
+export type ChatsV2Locale = typeof en;
+
+export default en;

package/src/v2/locale/es.ts

@@ -0,0 +1,28 @@
+// DRAFT: needs native-speaker review (WS-50)
+import type { ChatsV2Locale } from './en';
+
+export default {
+	composer: {
+		placeholder: 'Escribe un mensaje...',
+		attach: 'Adjuntar archivos',
+		emoji: 'Emoji',
+		send: 'Enviar',
+	},
+	history: {
+		today: 'Hoy',
+		waitingForOperator: 'Esperando a que el operador acepte…',
+		deletedMessage: 'Mensaje eliminado',
+		unsupportedMessage: 'Tipo de mensaje no compatible',
+		download: 'Descargar',
+	},
+	systemNotice: {
+		started: 'Chat iniciado por {actor}',
+		joined: '{actor} se unió al chat',
+		accepted: '{actor} aceptó el chat',
+		transferred: '{actor} transfirió el chat',
+		left: '{actor} salió del chat',
+		ended: 'Chat finalizado por {actor}',
+		unknown: 'Evento del sistema',
+		system: 'el sistema',
+	},
+} satisfies ChatsV2Locale;

package/src/v2/locale/kz.ts

@@ -0,0 +1,28 @@
+// DRAFT: needs native-speaker review (WS-50)
+import type { ChatsV2Locale } from './en';
+
+export default {
+	composer: {
+		placeholder: 'Хабарлама жазыңыз...',
+		attach: 'Файлдарды тіркеу',
+		emoji: 'Эмодзи',
+		send: 'Жіберу',
+	},
+	history: {
+		today: 'Бүгін',
+		waitingForOperator: 'Оператордың қабылдауы күтілуде…',
+		deletedMessage: 'Хабарлама жойылды',
+		unsupportedMessage: 'Қолдау көрсетілмейтін хабарлама түрі',
+		download: 'Жүктеп алу',
+	},
+	systemNotice: {
+		started: 'Чат басталды: {actor}',
+		joined: 'Чатқа жаңа қатысушы: {actor}',
+		accepted: 'Чат қабылданды: {actor}',
+		transferred: 'Чат ауыстырылды: {actor}',
+		left: 'Қатысушы чаттан шықты: {actor}',
+		ended: 'Чат аяқталды: {actor}',
+		unknown: 'Жүйелік оқиға',
+		system: 'жүйе',
+	},
+} satisfies ChatsV2Locale;

package/src/v2/locale/pl.ts

@@ -0,0 +1,28 @@
+// DRAFT: needs native-speaker review (WS-50)
+import type { ChatsV2Locale } from './en';
+
+export default {
+	composer: {
+		placeholder: 'Napisz wiadomość...',
+		attach: 'Załącz pliki',
+		emoji: 'Emoji',
+		send: 'Wyślij',
+	},
+	history: {
+		today: 'Dzisiaj',
+		waitingForOperator: 'Oczekiwanie na przyjęcie przez operatora…',
+		deletedMessage: 'Wiadomość usunięta',
+		unsupportedMessage: 'Nieobsługiwany typ wiadomości',
+		download: 'Pobierz',
+	},
+	systemNotice: {
+		started: 'Czat rozpoczęty: {actor}',
+		joined: 'Nowy uczestnik czatu: {actor}',
+		accepted: 'Czat przyjęty: {actor}',
+		transferred: 'Czat przekazany: {actor}',
+		left: 'Uczestnik opuścił czat: {actor}',
+		ended: 'Czat zakończony: {actor}',
+		unknown: 'Zdarzenie systemowe',
+		system: 'system',
+	},
+} satisfies ChatsV2Locale;

package/src/v2/locale/ro.ts

@@ -0,0 +1,28 @@
+// DRAFT: needs native-speaker review (WS-50)
+import type { ChatsV2Locale } from './en';
+
+export default {
+	composer: {
+		placeholder: 'Scrie un mesaj...',
+		attach: 'Atașează fișiere',
+		emoji: 'Emoji',
+		send: 'Trimite',
+	},
+	history: {
+		today: 'Astăzi',
+		waitingForOperator: 'Se așteaptă acceptarea de către operator…',
+		deletedMessage: 'Mesaj șters',
+		unsupportedMessage: 'Tip de mesaj neacceptat',
+		download: 'Descarcă',
+	},
+	systemNotice: {
+		started: 'Chat început de {actor}',
+		joined: '{actor} s-a alăturat chatului',
+		accepted: '{actor} a acceptat chatul',
+		transferred: '{actor} a transferat chatul',
+		left: '{actor} a părăsit chatul',
+		ended: 'Chat încheiat de {actor}',
+		unknown: 'Eveniment de sistem',
+		system: 'sistem',
+	},
+} satisfies ChatsV2Locale;