@webitel/ui-chats 26.8.2 → 26.8.4

package/src/v2/locale/ru.ts

@@ -0,0 +1,27 @@
+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/uk.ts

@@ -0,0 +1,27 @@
+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/useChatsV2I18n.ts

@@ -0,0 +1,14 @@
+import { useI18n } from 'vue-i18n';
+
+const V2_NAMESPACE = '@webitel/ui-chats.v2';
+
+/** `t` scoped to the v2 namespace: `t('composer.placeholder')`. */
+export const useChatsV2I18n = () => {
+	const { t, locale } = useI18n();
+
+	return {
+		t: (path: string, named: Record<string, unknown> = {}) =>
+			t(`${V2_NAMESPACE}.${path}`, named),
+		locale,
+	};
+};

package/src/v2/locale/uz.ts

@@ -0,0 +1,28 @@
+// DRAFT: needs native-speaker review (WS-50)
+import type { ChatsV2Locale } from './en';
+
+export default {
+	composer: {
+		placeholder: 'Xabar yozing...',
+		attach: 'Fayllarni biriktirish',
+		emoji: 'Emoji',
+		send: 'Yuborish',
+	},
+	history: {
+		today: 'Bugun',
+		waitingForOperator: 'Operator qabul qilishi kutilmoqda…',
+		deletedMessage: 'Xabar oʻchirildi',
+		unsupportedMessage: 'Qoʻllab-quvvatlanmaydigan xabar turi',
+		download: 'Yuklab olish',
+	},
+	systemNotice: {
+		started: 'Chat boshlandi: {actor}',
+		joined: 'Chatga yangi ishtirokchi: {actor}',
+		accepted: 'Chat qabul qilindi: {actor}',
+		transferred: 'Chat oʻtkazildi: {actor}',
+		left: 'Ishtirokchi chatdan chiqdi: {actor}',
+		ended: 'Chat yakunlandi: {actor}',
+		unknown: 'Tizim hodisasi',
+		system: 'tizim',
+	},
+} satisfies ChatsV2Locale;

package/src/v2/locale/vi.ts

@@ -0,0 +1,28 @@
+// DRAFT: needs native-speaker review (WS-50)
+import type { ChatsV2Locale } from './en';
+
+export default {
+	composer: {
+		placeholder: 'Nhập tin nhắn...',
+		attach: 'Đính kèm tệp',
+		emoji: 'Biểu tượng cảm xúc',
+		send: 'Gửi',
+	},
+	history: {
+		today: 'Hôm nay',
+		waitingForOperator: 'Đang chờ nhân viên tiếp nhận…',
+		deletedMessage: 'Tin nhắn đã bị xóa',
+		unsupportedMessage: 'Loại tin nhắn không được hỗ trợ',
+		download: 'Tải xuống',
+	},
+	systemNotice: {
+		started: 'Cuộc trò chuyện được bắt đầu bởi {actor}',
+		joined: '{actor} đã tham gia cuộc trò chuyện',
+		accepted: '{actor} đã tiếp nhận cuộc trò chuyện',
+		transferred: '{actor} đã chuyển cuộc trò chuyện',
+		left: '{actor} đã rời cuộc trò chuyện',
+		ended: 'Cuộc trò chuyện được kết thúc bởi {actor}',
+		unknown: 'Sự kiện hệ thống',
+		system: 'hệ thống',
+	},
+} satisfies ChatsV2Locale;

package/src/v2/scripts/__tests__/attachments.spec.ts

@@ -0,0 +1,168 @@
+import { describe, expect, it } from 'vitest';
+
+import { classifyAttachments, collectGalleryImages } from '../attachments';
+import { message } from './fixtures';
+
+describe('classifyAttachments', () => {
+	it('splits images, audio/video and other files', () => {
+		const result = classifyAttachments(
+			message({
+				images: [
+					{
+						id: 'i1',
+						url: 'https://x/1.png',
+						mime: 'image/png',
+					},
+				],
+				documents: [
+					{
+						id: 'd1',
+						url: 'https://x/a.mp3',
+						mime: 'audio/mpeg',
+						name: 'a.mp3',
+					},
+					{
+						id: 'd2',
+						url: 'https://x/v.mp4',
+						mime: 'video/mp4',
+						name: 'v.mp4',
+					},
+					{
+						id: 'd3',
+						url: 'https://x/r.pdf',
+						mime: 'application/pdf',
+						name: 'r.pdf',
+						size: '2048',
+					},
+				],
+			}),
+		);
+		expect(result.images.map((i) => i.key)).toEqual([
+			'i1',
+		]);
+		expect(result.media.map((m) => m.kind)).toEqual([
+			'audio',
+			'video',
+		]);
+		expect(result.files).toEqual([
+			{
+				key: 'd3',
+				name: 'r.pdf',
+				size: '2048',
+				mime: 'application/pdf',
+				url: 'https://x/r.pdf',
+			},
+		]);
+	});
+
+	it('sends HEIC images to file cards', () => {
+		const result = classifyAttachments(
+			message({
+				images: [
+					{
+						id: 'i1',
+						url: 'https://x/1.heic',
+						mime: 'image/heic',
+					},
+				],
+			}),
+		);
+		expect(result.images).toEqual([]);
+		expect(result.files.map((f) => f.key)).toEqual([
+			'i1',
+		]);
+	});
+});
+
+describe('classifyAttachments — HEIF', () => {
+	it('sends HEIF images to file cards too', () => {
+		const result = classifyAttachments(
+			message({
+				images: [
+					{
+						id: 'i1',
+						url: 'https://x/1.heif',
+						mime: 'image/heif',
+					},
+				],
+			}),
+		);
+		expect(result.images).toEqual([]);
+		expect(result.files.map((f) => f.key)).toEqual([
+			'i1',
+		]);
+	});
+});
+
+describe('classifyAttachments — file card names for undrawable images', () => {
+	const name = (url: string | undefined, mime = 'image/heic') =>
+		classifyAttachments(
+			message({
+				images: [
+					{
+						id: 'i1',
+						url,
+						mime,
+					},
+				],
+			}),
+		).files[0]?.name;
+
+	it('takes the file name from the URL when it has one', () => {
+		expect(name('https://x/storage/IMG_0042.HEIC?sig=abc')).toBe(
+			'IMG_0042.HEIC',
+		);
+		expect(name('https://x/files/my%20photo.heif', 'image/heif')).toBe(
+			'my photo.heif',
+		);
+	});
+
+	// signed storage links often end in an id or an action, not a name
+	it('falls back to image.<subtype> when the URL has no file name', () => {
+		expect(name('https://x/api/storage/file/123/download?sig=abc')).toBe(
+			'image.heic',
+		);
+		expect(name(undefined, 'image/heif')).toBe('image.heif');
+	});
+});
+
+describe('collectGalleryImages', () => {
+	it('collects drawable images across messages in order, skipping deleted ones', () => {
+		const images = collectGalleryImages([
+			message({
+				images: [
+					{
+						id: 'a',
+						url: 'https://x/a.png',
+					},
+					{
+						id: 'b',
+						url: 'https://x/b.heic',
+						mime: 'image/heic',
+					},
+				],
+			}),
+			message({
+				deleted: true,
+				images: [
+					{
+						id: 'c',
+						url: 'https://x/c.png',
+					},
+				],
+			}),
+			message({
+				images: [
+					{
+						id: 'd',
+						url: 'https://x/d.png',
+					},
+				],
+			}),
+		]);
+		expect(images.map((i) => i.key)).toEqual([
+			'a',
+			'd',
+		]);
+	});
+});

package/src/v2/scripts/__tests__/fixtures.ts

@@ -0,0 +1,56 @@
+import type { ChatParticipant, MessageModel, ThreadModel } from '../../types';
+
+export const operator: ChatParticipant = {
+	id: 'm-operator',
+	contact: {
+		name: 'Alina Timoshenko',
+		type: 'webitel',
+	},
+};
+export const colleague: ChatParticipant = {
+	id: 'm-colleague',
+	contact: {
+		name: 'Oleh Bondar',
+		type: 'webitel',
+	},
+};
+export const bot: ChatParticipant = {
+	id: 'm-bot',
+	contact: {
+		name: 'Helper',
+		type: 'webchat',
+		isBot: true,
+	},
+};
+export const client: ChatParticipant = {
+	id: 'm-client',
+	contact: {
+		name: 'Emily Johnson',
+		type: 'telegram',
+	},
+};
+
+let seq = 0;
+export const message = (
+	overrides: Partial<MessageModel> = {},
+): MessageModel => {
+	seq += 1;
+	return {
+		id: `msg-${seq}`,
+		seq: String(seq),
+		createdAt: String(Date.UTC(2026, 8, 15, 10, 0) + seq * 60_000),
+		sender: client,
+		body: `text ${seq}`,
+		...overrides,
+	};
+};
+
+export const thread = (overrides: Partial<ThreadModel> = {}): ThreadModel => ({
+	id: 'thread-1',
+	members: [
+		operator,
+		client,
+	],
+	readStates: [],
+	...overrides,
+});

package/src/v2/scripts/__tests__/formatDate.spec.ts

@@ -0,0 +1,96 @@
+import { afterEach, describe, expect, it } from 'vitest';
+
+import { formatDividerDate, formatMessageTime } from '../formatDate';
+
+const now = new Date(2026, 9, 1, 15).getTime();
+
+// 21:30 UTC on Sep 15 is already 00:30 on Sep 16 in Kyiv (UTC+3)
+const lateEveningUtc = Date.UTC(2026, 8, 15, 21, 30);
+
+describe('formatDividerDate', () => {
+	it('says Today for today', () => {
+		expect(
+			formatDividerDate(new Date(2026, 9, 1, 8).getTime(), {
+				locale: 'en',
+				todayLabel: 'Today',
+				now,
+			}),
+		).toBe('Today');
+	});
+
+	it('shows month and day within the current year', () => {
+		expect(
+			formatDividerDate(new Date(2026, 8, 15, 12).getTime(), {
+				locale: 'en',
+				todayLabel: 'Today',
+				now,
+			}),
+		).toBe('September 15');
+	});
+
+	it('adds the year for other years', () => {
+		expect(
+			formatDividerDate(new Date(2025, 8, 15, 12).getTime(), {
+				locale: 'en',
+				todayLabel: 'Today',
+				now,
+			}),
+		).toBe('September 15, 2025');
+	});
+
+	it('names the day in the given time zone', () => {
+		const options = {
+			locale: 'en',
+			todayLabel: 'Today',
+			now,
+		};
+		expect(
+			formatDividerDate(lateEveningUtc, {
+				...options,
+				timeZone: 'UTC',
+			}),
+		).toBe('September 15');
+		expect(
+			formatDividerDate(lateEveningUtc, {
+				...options,
+				timeZone: 'Europe/Kyiv',
+			}),
+		).toBe('September 16');
+	});
+
+	it('does not throw on app-only locale codes', () => {
+		expect(() =>
+			formatDividerDate(new Date(2025, 0, 2).getTime(), {
+				locale: 'kz',
+				todayLabel: 'Бүгін',
+				now,
+			}),
+		).not.toThrow();
+	});
+});
+
+describe('formatMessageTime', () => {
+	afterEach(() => {
+		localStorage.removeItem('user-timezone-setting');
+	});
+
+	it('is 24-hour HH:mm', () => {
+		expect(formatMessageTime(new Date(2026, 9, 1, 9, 5).getTime())).toBe(
+			'09:05',
+		);
+		expect(formatMessageTime(new Date(2026, 9, 1, 22, 40).getTime())).toBe(
+			'22:40',
+		);
+	});
+
+	it('uses the given time zone', () => {
+		expect(formatMessageTime(lateEveningUtc, 'UTC')).toBe('21:30');
+		expect(formatMessageTime(lateEveningUtc, 'Europe/Kyiv')).toBe('00:30');
+	});
+
+	// the same setting the rest of the app formats dates with
+	it('defaults to the operator’s time zone setting', () => {
+		localStorage.setItem('user-timezone-setting', 'Asia/Tokyo');
+		expect(formatMessageTime(lateEveningUtc)).toBe('06:30');
+	});
+});

package/src/v2/scripts/__tests__/getMessageStatus.spec.ts

@@ -0,0 +1,214 @@
+import { describe, expect, it } from 'vitest';
+
+import { getMessageStatus } from '../getMessageStatus';
+import { bot, client, message, operator, thread } from './fixtures';
+
+const own = (seq: string) =>
+	message({
+		sender: operator,
+		seq,
+	});
+
+describe('getMessageStatus', () => {
+	it('shows no ticks on the client’s messages', () => {
+		expect(
+			getMessageStatus(
+				message({
+					sender: client,
+				}),
+				thread(),
+				operator.id,
+			),
+		).toBeNull();
+	});
+
+	it('shows no ticks on deleted or system messages', () => {
+		expect(
+			getMessageStatus(
+				{
+					...own('1'),
+					deleted: true,
+				},
+				thread(),
+				operator.id,
+			),
+		).toBeNull();
+		expect(
+			getMessageStatus(
+				{
+					...own('1'),
+					system: {
+						type: 'transferred',
+					},
+				},
+				thread(),
+				operator.id,
+			),
+		).toBeNull();
+	});
+
+	it('is sent without any client read state', () => {
+		expect(getMessageStatus(own('5'), thread(), operator.id)).toBe('sent');
+	});
+
+	it('is sent when the message has no seq', () => {
+		expect(
+			getMessageStatus(
+				{
+					...own('5'),
+					seq: undefined,
+				},
+				thread(),
+				operator.id,
+			),
+		).toBe('sent');
+	});
+
+	// generated types say string | undefined, but JSON can carry null; Number(null) is 0
+	it('is sent, not read, when seq arrives as null', () => {
+		const t = thread({
+			readStates: [
+				{
+					memberId: client.id,
+					readUpToSeq: '0',
+				},
+			],
+		});
+		expect(
+			getMessageStatus(
+				{
+					...own('1'),
+					seq: null as never,
+				},
+				t,
+				operator.id,
+			),
+		).toBe('sent');
+	});
+
+	it('follows the client horizons', () => {
+		const t = thread({
+			readStates: [
+				{
+					memberId: client.id,
+					deliveredUpToSeq: '7',
+					readUpToSeq: '5',
+				},
+			],
+		});
+		expect(getMessageStatus(own('5'), t, operator.id)).toBe('read');
+		expect(getMessageStatus(own('6'), t, operator.id)).toBe('delivered');
+		expect(getMessageStatus(own('8'), t, operator.id)).toBe('sent');
+	});
+
+	// Review Focus #1
+	it('compares seq numerically, not as strings', () => {
+		const t = thread({
+			readStates: [
+				{
+					memberId: client.id,
+					deliveredUpToSeq: '9',
+					readUpToSeq: '9',
+				},
+			],
+		});
+		expect(getMessageStatus(own('10'), t, operator.id)).toBe('sent');
+		expect(getMessageStatus(own('9'), t, operator.id)).toBe('read');
+	});
+
+	it('ignores the contact-centre side’s own horizons', () => {
+		const t = thread({
+			members: [
+				operator,
+				client,
+				bot,
+			],
+			readStates: [
+				{
+					memberId: operator.id,
+					readUpToSeq: '100',
+				},
+				{
+					memberId: bot.id,
+					readUpToSeq: '100',
+				},
+			],
+		});
+		expect(getMessageStatus(own('3'), t, operator.id)).toBe('sent');
+	});
+
+	it('takes the lowest horizon over several clients', () => {
+		const second = {
+			id: 'm-client-2',
+			contact: {
+				name: 'Bob',
+				type: 'viber',
+			},
+		};
+		const t = thread({
+			members: [
+				operator,
+				client,
+				second,
+			],
+			readStates: [
+				{
+					memberId: client.id,
+					readUpToSeq: '10',
+				},
+				{
+					memberId: second.id,
+					deliveredUpToSeq: '8',
+					readUpToSeq: '4',
+				},
+			],
+		});
+		expect(getMessageStatus(own('6'), t, operator.id)).toBe('delivered');
+		expect(getMessageStatus(own('9'), t, operator.id)).toBe('sent');
+	});
+
+	it('treats a member’s read horizon as delivered for that member', () => {
+		const second = {
+			id: 'm-client-2',
+			contact: {
+				name: 'Bob',
+				type: 'viber',
+			},
+		};
+		const t = thread({
+			members: [
+				operator,
+				client,
+				second,
+			],
+			readStates: [
+				{
+					memberId: client.id,
+					deliveredUpToSeq: '10',
+					readUpToSeq: '0',
+				},
+				{
+					memberId: second.id,
+					deliveredUpToSeq: '0',
+					readUpToSeq: '10',
+				},
+			],
+		});
+		expect(getMessageStatus(own('6'), t, operator.id)).toBe('delivered');
+	});
+
+	it('uses the member carried on the read state when it left thread.members', () => {
+		const t = thread({
+			members: [
+				operator,
+			],
+			readStates: [
+				{
+					member: client,
+					readUpToSeq: '3',
+				},
+			],
+		});
+		expect(getMessageStatus(own('3'), t, operator.id)).toBe('read');
+	});
+});

package/src/v2/scripts/__tests__/isContactCentreSide.spec.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from 'vitest';
+
+import { isContactCentreSide } from '../isContactCentreSide';
+import { bot, client, operator } from './fixtures';
+
+describe('isContactCentreSide', () => {
+	it('puts operators and bots on the contact-centre side', () => {
+		expect(isContactCentreSide(operator)).toBe(true);
+		expect(isContactCentreSide(bot)).toBe(true);
+	});
+
+	it('puts clients and unknown senders on the client side', () => {
+		expect(isContactCentreSide(client)).toBe(false);
+		expect(isContactCentreSide(undefined)).toBe(false);
+		expect(
+			isContactCentreSide({
+				id: 'x',
+			}),
+		).toBe(false);
+	});
+});