@webitel/ui-chats 26.8.3 → 26.8.5

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

@@ -0,0 +1,304 @@
+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');
+	});
+
+	// A re-joined operator gets a new member id, but the thread snapshot (and so
+	// selfMemberId) still holds the old one; their contact is the stable identity.
+	describe('after the operator rejoined with a new member id', () => {
+		const oldMember = {
+			id: 'm-me-old',
+			contact: {
+				name: 'Dania',
+				type: 'webitel',
+				sub: '164',
+				iss: 'webitel',
+			},
+		};
+		const newMember = {
+			id: 'm-me-new',
+			contact: {
+				name: 'Dania',
+				type: 'webitel',
+				sub: '164',
+				iss: 'webitel',
+			},
+		};
+		const t = thread({
+			members: [
+				oldMember,
+				client,
+			],
+			readStates: [
+				{
+					memberId: client.id,
+					readUpToSeq: '5',
+				},
+			],
+		});
+
+		it('still treats their messages as their own', () => {
+			expect(
+				getMessageStatus(
+					message({
+						sender: newMember,
+						seq: '3',
+					}),
+					t,
+					oldMember.id,
+				),
+			).toBe('read');
+		});
+
+		it('does not claim another operator’s message', () => {
+			const other = {
+				id: 'm-other',
+				contact: {
+					name: 'Ola',
+					type: 'webitel',
+					sub: '289',
+					iss: 'webitel',
+				},
+			};
+			expect(
+				getMessageStatus(
+					message({
+						sender: other,
+					}),
+					t,
+					oldMember.id,
+				),
+			).toBeNull();
+		});
+
+		it('does not match the same subject from another issuer', () => {
+			const lookalike = {
+				id: 'm-x',
+				contact: {
+					name: 'Dania',
+					type: 'telegram',
+					sub: '164',
+					iss: 'telegram',
+				},
+			};
+			expect(
+				getMessageStatus(
+					message({
+						sender: lookalike,
+					}),
+					t,
+					oldMember.id,
+				),
+			).toBeNull();
+		});
+	});
+});

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);
+	});
+});

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

@@ -0,0 +1,157 @@
+import { describe, expect, it } from 'vitest';
+
+import { participantName, resolveSystemNotice } from '../resolveSystemNotice';
+import { client, colleague, message, operator, thread } from './fixtures';
+
+describe('resolveSystemNotice', () => {
+	it('maps a known type to its text and tone', () => {
+		const notice = resolveSystemNotice(
+			message({
+				sender: operator,
+				system: {
+					type: 'transferred',
+				},
+			}),
+			thread(),
+		);
+		expect(notice).toMatchObject({
+			textKey: 'systemNotice.transferred',
+			tone: 'neutral',
+		});
+		expect(notice.actor?.id).toBe(operator.id);
+	});
+
+	it('colours start positive and end negative', () => {
+		expect(
+			resolveSystemNotice(
+				message({
+					system: {
+						type: 'thread_started',
+					},
+				}),
+				thread(),
+			).tone,
+		).toBe('positive');
+		expect(
+			resolveSystemNotice(
+				message({
+					system: {
+						type: 'thread_closed',
+					},
+				}),
+				thread(),
+			).tone,
+		).toBe('negative');
+	});
+
+	it('prefers the actor named in metadata over the sender', () => {
+		const t = thread({
+			members: [
+				operator,
+				colleague,
+				client,
+			],
+		});
+		const notice = resolveSystemNotice(
+			message({
+				sender: operator,
+				system: {
+					type: 'member_added',
+					metadata: {
+						memberId: colleague.id,
+					},
+				},
+			}),
+			t,
+		);
+		expect(notice.actor?.id).toBe(colleague.id);
+	});
+
+	it('reads the joined / removed member from the chat-web-sdk metadata keys', () => {
+		const t = thread({
+			members: [
+				operator,
+				colleague,
+				client,
+			],
+		});
+		const joined = resolveSystemNotice(
+			message({
+				sender: operator,
+				system: {
+					type: 'member_added',
+					metadata: {
+						newMemberId: colleague.id,
+					},
+				},
+			}),
+			t,
+		);
+		const removed = resolveSystemNotice(
+			message({
+				sender: operator,
+				system: {
+					type: 'member_removed',
+					metadata: {
+						removedMemberId: colleague.id,
+					},
+				},
+			}),
+			t,
+		);
+		expect(joined.actor?.id).toBe(colleague.id);
+		expect(removed.actor?.id).toBe(colleague.id);
+	});
+
+	it('falls back to the backend text for an unknown type', () => {
+		const notice = resolveSystemNotice(
+			message({
+				body: 'Custom event',
+				system: {
+					type: 'something_new',
+				},
+			}),
+			thread(),
+		);
+		expect(notice).toMatchObject({
+			textKey: null,
+			fallbackText: 'Custom event',
+			tone: 'neutral',
+		});
+	});
+
+	it('falls back to the generic text when an unknown type has no body', () => {
+		const notice = resolveSystemNotice(
+			message({
+				body: undefined,
+				system: {
+					type: 'something_new',
+				},
+			}),
+			thread(),
+		);
+		expect(notice).toMatchObject({
+			textKey: 'systemNotice.unknown',
+			fallbackText: null,
+		});
+	});
+
+	// Review Focus #5
+	it('keeps the name of an actor who already left the thread', () => {
+		const notice = resolveSystemNotice(
+			message({
+				sender: colleague,
+				system: {
+					type: 'member_removed',
+				},
+			}),
+			thread({
+				members: [
+					operator,
+					client,
+				],
+			}),
+		);
+		expect(participantName(notice.actor)).toBe('Oleh Bondar');
+	});
+});

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

@@ -0,0 +1,100 @@
+import { describe, expect, it } from 'vitest';
+
+import { toHistoryItems } from '../toHistoryItems';
+import { message } from './fixtures';
+
+const at = (y: number, m: number, d: number, h = 12) =>
+	String(new Date(y, m, d, h).getTime());
+
+describe('toHistoryItems', () => {
+	it('opens each local day with one divider', () => {
+		const items = toHistoryItems([
+			message({
+				createdAt: at(2026, 8, 15, 9),
+			}),
+			message({
+				createdAt: at(2026, 8, 15, 18),
+			}),
+			message({
+				createdAt: at(2026, 8, 16, 9),
+			}),
+		]);
+		expect(items.map((item) => item.kind)).toEqual([
+			'divider',
+			'message',
+			'message',
+			'divider',
+			'message',
+		]);
+	});
+
+	it('marks system messages as system rows', () => {
+		const items = toHistoryItems([
+			message({
+				system: {
+					type: 'transferred',
+				},
+			}),
+		]);
+		expect(items.at(-1)?.kind).toBe('system');
+	});
+
+	it('does not open a day for an item without createdAt', () => {
+		const items = toHistoryItems([
+			message({
+				createdAt: undefined,
+			}),
+			message({
+				createdAt: '0',
+			}),
+		]);
+		expect(items.map((item) => item.kind)).toEqual([
+			'message',
+			'message',
+		]);
+	});
+
+	it('keys message rows by message id', () => {
+		const first = message();
+		expect(
+			toHistoryItems([
+				first,
+			]).at(-1)?.key,
+		).toBe(first.id);
+	});
+
+	it('keeps row keys unique when a day shows up twice out of order', () => {
+		const items = toHistoryItems([
+			message({
+				createdAt: at(2026, 8, 15),
+			}),
+			message({
+				createdAt: at(2026, 8, 16),
+			}),
+			message({
+				createdAt: at(2026, 8, 15, 23),
+			}),
+		]);
+		const keys = items.map((item) => item.key);
+		expect(new Set(keys).size).toBe(keys.length);
+	});
+
+	// 20:30 and 21:30 UTC fall on one UTC day but straddle midnight in Kyiv (UTC+3)
+	it('splits days in the given time zone', () => {
+		const messages = [
+			message({
+				createdAt: String(Date.UTC(2026, 8, 15, 20, 30)),
+			}),
+			message({
+				createdAt: String(Date.UTC(2026, 8, 15, 21, 30)),
+			}),
+		];
+		const dividers = (timeZone: string) =>
+			toHistoryItems(messages, {
+				timeZone,
+			}).filter((item) => item.kind === 'divider').length;
+
+		expect(dividers('UTC')).toBe(1);
+		expect(dividers('Europe/Kyiv')).toBe(2);
+	});
+});

package/src/v2/scripts/attachments.ts

@@ -0,0 +1,144 @@
+import type { ChatDocument, ChatImage, MessageModel } from '../types';
+
+export interface ChatFileCard {
+	key: string;
+	name: string;
+	size?: string;
+	mime?: string;
+	url?: string;
+}
+
+export interface ClassifiedAttachments {
+	images: Array<{
+		key: string;
+		image: ChatImage;
+	}>;
+	media: Array<{
+		key: string;
+		document: ChatDocument;
+		kind: 'audio' | 'video';
+	}>;
+	files: ChatFileCard[];
+}
+
+export interface GalleryImage {
+	key: string;
+	src: string;
+}
+
+export const imageKey = (
+	message: MessageModel,
+	image: ChatImage,
+	index: number,
+): string => image.id ?? `${message.id}-image-${index}`;
+
+const documentKey = (
+	message: MessageModel,
+	document: ChatDocument,
+	index: number,
+): string => document.id ?? `${message.id}-document-${index}`;
+
+/** Most browsers cannot draw HEIC / HEIF; those go out as file cards. */
+const UNDRAWABLE_IMAGE_MIME = /hei[cf]/i;
+
+export const isRenderableImage = (image: ChatImage): boolean =>
+	!!image.url && !UNDRAWABLE_IMAGE_MIME.test(image.mime ?? '');
+
+const mediaKind = (mime: string | undefined): 'audio' | 'video' | null => {
+	const value = mime?.toLowerCase() ?? '';
+	if (value.startsWith('audio/')) return 'audio';
+	if (value.startsWith('video/')) return 'video';
+	return null;
+};
+
+/**
+ * A file card name for an image the browser cannot draw: the URL's last
+ * segment when it looks like a file name, else "image.<subtype>". Signed
+ * storage links often end in an id or an action ("…/123/download"), which
+ * is no name at all.
+ */
+const imageFileName = (image: ChatImage): string => {
+	if (image.url) {
+		try {
+			const segment = decodeURIComponent(
+				new URL(image.url, 'http://localhost').pathname.split('/').pop() ?? '',
+			);
+			if (/\.[a-z0-9]+$/i.test(segment)) return segment;
+		} catch {
+			// malformed URL or escape: fall through to the generic name
+		}
+	}
+	const subtype = image.mime?.split('/')[1];
+	return subtype ? `image.${subtype}` : 'image';
+};
+
+export const hasAttachments = (message: MessageModel): boolean =>
+	!!(message.images?.length || message.documents?.length);
+
+export const classifyAttachments = (
+	message: MessageModel,
+): ClassifiedAttachments => {
+	const result: ClassifiedAttachments = {
+		images: [],
+		media: [],
+		files: [],
+	};
+
+	(message.images ?? []).forEach((image, index) => {
+		const key = imageKey(message, image, index);
+		if (isRenderableImage(image)) {
+			result.images.push({
+				key,
+				image,
+			});
+		} else {
+			result.files.push({
+				key,
+				name: imageFileName(image),
+				mime: image.mime,
+				url: image.url,
+			});
+		}
+	});
+
+	(message.documents ?? []).forEach((document, index) => {
+		const key = documentKey(message, document, index);
+		const kind = document.url ? mediaKind(document.mime) : null;
+		if (kind) {
+			result.media.push({
+				key,
+				document,
+				kind,
+			});
+		} else {
+			result.files.push({
+				key,
+				name: document.name ?? '',
+				size: document.size,
+				mime: document.mime,
+				url: document.url,
+			});
+		}
+	});
+
+	return result;
+};
+
+/** Every drawable image across the history, in history order. */
+export const collectGalleryImages = (
+	messages: readonly MessageModel[],
+): GalleryImage[] =>
+	messages.flatMap((message) =>
+		message.deleted
+			? []
+			: (message.images ?? []).flatMap((image, index) =>
+					isRenderableImage(image)
+						? [
+								{
+									key: imageKey(message, image, index),
+									src: image.url as string,
+								},
+							]
+						: [],
+				),
+	);