@webitel/ui-chats 26.8.2 → 26.8.4

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,
+								},
+							]
+						: [],
+				),
+	);

package/src/v2/scripts/formatDate.ts

@@ -0,0 +1,74 @@
+import { getUserTimeZone } from '@webitel/api-services/utils';
+import { isSameDay, isSameYear } from 'date-fns';
+import { formatInTimeZone, toZonedTime } from 'date-fns-tz';
+
+/** App locale codes that are not BCP 47 tags `Intl` understands. */
+const INTL_LOCALE_ALIASES: Record<string, string> = {
+	kz: 'kk',
+	ua: 'uk',
+};
+
+const toIntlLocale = (locale: string) => {
+	const candidate = INTL_LOCALE_ALIASES[locale] ?? locale;
+	try {
+		return Intl.DateTimeFormat.supportedLocalesOf(candidate).length
+			? candidate
+			: 'en';
+	} catch {
+		return 'en';
+	}
+};
+
+/**
+ * Whether two instants fall on the same calendar day in `timeZone` — the
+ * operator's setting by default, the one the rest of the app formats with.
+ */
+export const isSameDayInZone = (
+	a: number,
+	b: number,
+	timeZone: string = getUserTimeZone(),
+): boolean => isSameDay(toZonedTime(a, timeZone), toZonedTime(b, timeZone));
+
+/** "Today" · "September 15" · "September 15, 2025" (AC_03.02.02). */
+export const formatDividerDate = (
+	timestamp: number,
+	{
+		locale,
+		todayLabel,
+		now = Date.now(),
+		timeZone = getUserTimeZone(),
+	}: {
+		locale: string;
+		todayLabel: string;
+		now?: number;
+		timeZone?: string;
+	},
+): string => {
+	if (isSameDayInZone(timestamp, now, timeZone)) return todayLabel;
+
+	const isThisYear = isSameYear(
+		toZonedTime(timestamp, timeZone),
+		toZonedTime(now, timeZone),
+	);
+
+	// Intl, not date-fns format: it has month names for every app locale
+	return new Intl.DateTimeFormat(toIntlLocale(locale), {
+		timeZone,
+		month: 'long',
+		day: 'numeric',
+		...(isThisYear
+			? {}
+			: {
+					year: 'numeric',
+				}),
+	}).format(timestamp);
+};
+
+/**
+ * 24h "HH:mm", as in DES-730, in the operator's time zone. Not the shared
+ * formatDate 'time' mode: its uk 'p' pattern drops the leading zero ("9:05").
+ */
+export const formatMessageTime = (
+	timestamp: number,
+	timeZone: string = getUserTimeZone(),
+): string => formatInTimeZone(timestamp, timeZone, 'HH:mm');

package/src/v2/scripts/getMessageStatus.ts

@@ -0,0 +1,58 @@
+import type { ChatMessageStatus, MessageModel, ThreadModel } from '../types';
+import { isContactCentreSide } from './isContactCentreSide';
+import { toSeq } from './toTimestamp';
+
+/**
+ * Sent / delivered / read for the operator's own messages, against the
+ * client's read horizon: the lowest horizon over every client member, so a
+ * message counts as read only once all clients have read it.
+ * `null` when no ticks should show.
+ */
+export const getMessageStatus = (
+	message: MessageModel,
+	thread: ThreadModel,
+	selfMemberId: string,
+): ChatMessageStatus | null => {
+	if (message.deleted || message.system) return null;
+	if (!message.sender?.id || message.sender.id !== selfMemberId) return null;
+
+	const seq = toSeq(message.seq);
+	if (seq === null) return 'sent';
+
+	const membersById = new Map(
+		(thread.members ?? []).flatMap((member) =>
+			member.id
+				? [
+						[
+							member.id,
+							member,
+						] as const,
+					]
+				: [],
+		),
+	);
+
+	const clientStates = (thread.readStates ?? []).filter((state) => {
+		const member =
+			state.member ??
+			(state.memberId ? membersById.get(state.memberId) : undefined);
+		return member !== undefined && !isContactCentreSide(member);
+	});
+
+	if (!clientStates.length) return 'sent';
+
+	const horizons = clientStates.map((state) => {
+		const read = toSeq(state.readUpToSeq) ?? 0;
+		// reading a message implies it was delivered, even if the delivered
+		// horizon lags behind
+		const delivered = Math.max(toSeq(state.deliveredUpToSeq) ?? 0, read);
+		return {
+			read,
+			delivered,
+		};
+	});
+
+	if (horizons.every((horizon) => seq <= horizon.read)) return 'read';
+	if (horizons.every((horizon) => seq <= horizon.delivered)) return 'delivered';
+	return 'sent';
+};

package/src/v2/scripts/isContactCentreSide.ts

@@ -0,0 +1,14 @@
+import type { ChatParticipant } from '../types';
+
+/**
+ * ⚠ Carried over from v1 (`chat-message.vue`, `member.type === 'webitel'`);
+ * not confirmed for the new IM backend. This is the one place to change it.
+ */
+export const INTERNAL_CONTACT_TYPE = 'webitel';
+
+/** Operators and bots speak for the contact centre; everyone else is the client. */
+export const isContactCentreSide = (
+	member: ChatParticipant | undefined,
+): boolean =>
+	member?.contact?.type === INTERNAL_CONTACT_TYPE ||
+	member?.contact?.isBot === true;

package/src/v2/scripts/resolveSystemNotice.ts

@@ -0,0 +1,119 @@
+import type {
+	ChatNoticeTone,
+	ChatParticipant,
+	MessageModel,
+	ThreadModel,
+} from '../types';
+
+export interface SystemNoticeDefinition {
+	/** relative to the v2 locale namespace */
+	textKey: string;
+	tone: ChatNoticeTone;
+}
+
+/**
+ * ⚠ WS-22 (backend, "Need info"): only `member_added`, `member_removed` and
+ * `transferred` are documented. The started / accepted / closed type strings
+ * are assumed — confirm them there and change only this table.
+ */
+export const SYSTEM_NOTICES: Record<string, SystemNoticeDefinition> = {
+	thread_started: {
+		textKey: 'systemNotice.started',
+		tone: 'positive',
+	},
+	member_added: {
+		textKey: 'systemNotice.joined',
+		tone: 'neutral',
+	},
+	thread_accepted: {
+		textKey: 'systemNotice.accepted',
+		tone: 'neutral',
+	},
+	transferred: {
+		textKey: 'systemNotice.transferred',
+		tone: 'neutral',
+	},
+	member_removed: {
+		textKey: 'systemNotice.left',
+		tone: 'neutral',
+	},
+	thread_closed: {
+		textKey: 'systemNotice.ended',
+		tone: 'negative',
+	},
+};
+
+/** ⚠ WS-22: the metadata key carrying the acting member's id is unconfirmed. */
+const ACTOR_METADATA_KEYS = [
+	// chat-web-sdk's memberAdded / memberLeft socket payloads use these
+	'newMemberId',
+	'new_member_id',
+	'removedMemberId',
+	'removed_member_id',
+	'memberId',
+	'member_id',
+	'actorId',
+	'actor_id',
+] as const;
+
+export interface ResolvedSystemNotice {
+	/** null when `fallbackText` should be shown instead */
+	textKey: string | null;
+	/** the backend's own text, for types the table does not know */
+	fallbackText: string | null;
+	tone: ChatNoticeTone;
+	actor: ChatParticipant | undefined;
+}
+
+const findActor = (
+	message: MessageModel,
+	thread: ThreadModel,
+): ChatParticipant | undefined => {
+	const metadata = (message.system?.metadata ?? {}) as Record<string, unknown>;
+	const members = thread.members ?? [];
+
+	const actorId = ACTOR_METADATA_KEYS.map((key) => metadata[key]).find(
+		(value): value is string => typeof value === 'string' && value !== '',
+	);
+	const byActorId = actorId
+		? members.find((member) => member.id === actorId)
+		: undefined;
+	if (byActorId) return byActorId;
+
+	const senderId = message.sender?.id;
+	const bySender = senderId
+		? members.find((member) => member.id === senderId)
+		: undefined;
+	// a member who has left is no longer in thread.members — the sender's own
+	// enriched contact still carries the name
+	return bySender ?? message.sender;
+};
+
+export const resolveSystemNotice = (
+	message: MessageModel,
+	thread: ThreadModel,
+): ResolvedSystemNotice => {
+	const type = message.system?.type;
+	const definition = type ? SYSTEM_NOTICES[type] : undefined;
+	const actor = findActor(message, thread);
+
+	if (definition) {
+		return {
+			textKey: definition.textKey,
+			fallbackText: null,
+			tone: definition.tone,
+			actor,
+		};
+	}
+
+	return {
+		textKey: message.body ? null : 'systemNotice.unknown',
+		fallbackText: message.body || null,
+		tone: 'neutral',
+		actor,
+	};
+};
+
+/** Display name, or '' when the participant carries none. */
+export const participantName = (member: ChatParticipant | undefined): string =>
+	member?.contact?.name || member?.contact?.username || '';