@webitel/ui-chats 26.8.2 → 26.8.4

package/src/v2/scripts/toHistoryItems.ts

@@ -0,0 +1,63 @@
+import { getUserTimeZone } from '@webitel/api-services/utils';
+import type { MessageModel } from '../types';
+
+import { isSameDayInZone } from './formatDate';
+import { toTimestamp } from './toTimestamp';
+
+export type ChatHistoryItem =
+	| {
+			kind: 'divider';
+			key: string;
+			/** timestamp of the first item of that day */
+			date: number;
+	  }
+	| {
+			kind: 'message' | 'system';
+			key: string;
+			message: MessageModel;
+	  };
+
+/**
+ * Messages (oldest → newest) as render rows, with a divider before the first
+ * item of each calendar day in `timeZone` (the operator's setting by default).
+ * Items without a usable `createdAt` never open a new day.
+ */
+export const toHistoryItems = (
+	messages: readonly MessageModel[],
+	{
+		timeZone = getUserTimeZone(),
+	}: {
+		timeZone?: string;
+	} = {},
+): ChatHistoryItem[] => {
+	const items: ChatHistoryItem[] = [];
+	// timestamp of the item that opened the current day
+	let currentDayStart: number | null = null;
+
+	for (const message of messages) {
+		const timestamp = toTimestamp(message.createdAt);
+
+		if (timestamp !== null) {
+			if (
+				currentDayStart === null ||
+				!isSameDayInZone(currentDayStart, timestamp, timeZone)
+			) {
+				items.push({
+					kind: 'divider',
+					// keyed by the day's first message: a day can recur out of order
+					key: `divider-${message.id}`,
+					date: timestamp,
+				});
+				currentDayStart = timestamp;
+			}
+		}
+
+		items.push({
+			kind: message.system ? 'system' : 'message',
+			key: message.id,
+			message,
+		});
+	}
+
+	return items;
+};

package/src/v2/scripts/toTimestamp.ts

@@ -0,0 +1,21 @@
+/** Backend timestamps are Unix ms as strings; `null` when absent or unusable. */
+export const toTimestamp = (
+	value: string | number | undefined | null,
+): number | null => {
+	if (value === undefined || value === null || value === '') return null;
+	const parsed = Number(value);
+	return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
+};
+
+/**
+ * Per-thread message sequence numbers arrive as strings. Compare them as
+ * numbers: as strings, "10" sorts before "9".
+ */
+export const toSeq = (
+	value: string | number | null | undefined,
+): number | null => {
+	// typed string | undefined, but JSON can carry null, and Number(null) is 0
+	if (value === undefined || value === null || value === '') return null;
+	const parsed = Number(value);
+	return Number.isFinite(parsed) ? parsed : null;
+};

package/src/v2/types/index.ts

@@ -0,0 +1,74 @@
+import type { MessageModel, ThreadModel } from '@webitel/chat-web-sdk';
+
+export type { MessageModel, ThreadModel };
+
+export const ChatThreadMode = {
+	/** offered to the operator, not accepted yet: no composer, waiting line */
+	Awaiting: 'awaiting',
+	Active: 'active',
+	/** closed or otherwise not writable: no composer */
+	Readonly: 'readonly',
+} as const;
+
+export type ChatThreadMode =
+	(typeof ChatThreadMode)[keyof typeof ChatThreadMode];
+
+export const ChatComposerAction = {
+	Attach: 'attach',
+	Emoji: 'emoji',
+	Send: 'send',
+} as const;
+
+export type ChatComposerAction =
+	(typeof ChatComposerAction)[keyof typeof ChatComposerAction];
+
+export type ChatMessageStatus = 'sent' | 'delivered' | 'read';
+
+export type ChatNoticeTone = 'positive' | 'neutral' | 'negative';
+
+/** A thread member as it arrives on `message.sender` and `thread.members[]`. */
+export type ChatParticipant = NonNullable<MessageModel['sender']>;
+
+export type ChatImage = NonNullable<MessageModel['images']>[number];
+
+export type ChatDocument = NonNullable<MessageModel['documents']>[number];
+
+export type ResolveAvatarUrl = (member: ChatParticipant) => string | undefined;
+
+export type ChatSendHandler = (text: string) => Promise<unknown>;
+
+export type ChatAttachHandler = (files: File[]) => Promise<unknown>;
+
+export type ChatLoadMoreHandler = () => Promise<unknown>;
+
+export interface ChatComposerSlotProps {
+	/** inserts at the cursor (or appends) and updates the draft */
+	insertText: (text: string) => void;
+	focus: () => void;
+	disabled: boolean;
+}
+
+export interface ChatHistoryProps {
+	thread: ThreadModel;
+	/** oldest → newest; current and earlier sessions */
+	messages: MessageModel[];
+	/** thread-member id of the operator using the UI */
+	selfMemberId: string;
+	mode?: ChatThreadMode;
+	hasMore?: boolean;
+	onLoadMore?: ChatLoadMoreHandler;
+	resolveAvatarUrl?: ResolveAvatarUrl;
+}
+
+export interface ChatComposerProps {
+	onSend?: ChatSendHandler;
+	onAttach?: ChatAttachHandler;
+	actions?: ChatComposerAction[];
+	submitOnEnter?: boolean;
+	disabled?: boolean;
+}
+
+export interface ChatThreadProps extends ChatHistoryProps, ChatComposerProps {
+	/** controlled draft (v-model:draft); omit to let the composer own it */
+	draft?: string;
+}

package/src/v2/ui/__tests__/mountWithChats.ts

@@ -0,0 +1,38 @@
+import { mount } from '@vue/test-utils';
+import { createI18n } from 'vue-i18n';
+
+import { messages } from '../../../locale';
+
+export const chatsI18n = () =>
+	createI18n({
+		legacy: false,
+		locale: 'en',
+		fallbackLocale: 'en',
+		messages,
+	});
+
+export const mountWithChats: typeof mount = ((component, options = {}) =>
+	mount(component, {
+		...options,
+		global: {
+			...options.global,
+			plugins: [
+				...(options.global?.plugins ?? []),
+				chatsI18n(),
+			],
+		},
+	})) as typeof mount;
+
+export const deferred = <T = void>() => {
+	let resolve!: (value: T) => void;
+	let reject!: (reason?: unknown) => void;
+	const promise = new Promise<T>((res, rej) => {
+		resolve = res;
+		reject = rej;
+	});
+	return {
+		promise,
+		resolve,
+		reject,
+	};
+};

package/src/v2/ui/chat-composer/__tests__/chat-composer.spec.ts

@@ -0,0 +1,221 @@
+import { flushPromises } from '@vue/test-utils';
+import { beforeAll, describe, expect, it, vi } from 'vitest';
+
+import { ChatComposerAction } from '../../../types';
+import { deferred, mountWithChats } from '../../__tests__/mountWithChats';
+import ChatComposer from '../chat-composer.vue';
+
+vi.mock('@webitel/ui-sdk/components', async (importOriginal) => ({
+	...(await importOriginal<typeof import('@webitel/ui-sdk/components')>()),
+	WtChatEmoji: {
+		name: 'WtChatEmoji',
+		emits: [
+			'insert-emoji',
+		],
+		template:
+			'<button class="emoji-stub" @click="$emit(\'insert-emoji\', \'🙂\')" />',
+	},
+	WtGalleria: {
+		name: 'WtGalleria',
+		props: [
+			'visible',
+			'activeIndex',
+			'value',
+		],
+		template: '<div class="galleria-stub" />',
+	},
+	WtVidstackPlayer: {
+		name: 'WtVidstackPlayer',
+		template: '<div class="player-stub" />',
+	},
+	WtPlayer: {
+		name: 'WtPlayer',
+		template: '<div class="player-stub" />',
+	},
+}));
+
+// happy-dom has no execCommand; returning false sends insert-text-at-cursor
+// down its own setRangeText + input-event fallback, as older browsers do
+beforeAll(() => {
+	if (typeof document.execCommand !== 'function') {
+		document.execCommand = () => false;
+	}
+});
+
+const setup = (props = {}) =>
+	mountWithChats(ChatComposer, {
+		props,
+		attachTo: document.body,
+	});
+
+const type = async (wrapper: ReturnType<typeof setup>, text: string) => {
+	await wrapper.find('textarea').setValue(text);
+};
+const pressEnter = (wrapper: ReturnType<typeof setup>, shiftKey = false) =>
+	wrapper.find('textarea').trigger('keydown', {
+		key: 'Enter',
+		shiftKey,
+	});
+
+describe('ChatComposer', () => {
+	it('sends the draft and clears it once onSend resolves', async () => {
+		const onSend = vi.fn().mockResolvedValue(undefined);
+		const wrapper = setup({
+			onSend,
+		});
+		await type(wrapper, 'Hello');
+		await wrapper.find('.chat-composer__send').trigger('click');
+		await flushPromises();
+		expect(onSend).toHaveBeenCalledWith('Hello');
+		expect(wrapper.find('textarea').element.value).toBe('');
+	});
+
+	it('locks while pending, keeps the draft and passes the error on when onSend rejects', async () => {
+		const pending = deferred();
+		const onSend = vi.fn(() => pending.promise);
+		const errorHandler = vi.fn();
+		const wrapper = mountWithChats(ChatComposer, {
+			props: {
+				onSend,
+			},
+			attachTo: document.body,
+			global: {
+				config: {
+					errorHandler,
+				},
+			},
+		});
+		await type(wrapper, 'Hello');
+		await wrapper.find('.chat-composer__send').trigger('click');
+		expect(wrapper.find('textarea').element.disabled).toBe(true);
+		// browsers drop focus from a disabled field; happy-dom does not, so do it here
+		wrapper.find('textarea').element.blur();
+
+		const error = new Error('boom');
+		pending.reject(error);
+		await flushPromises();
+		expect(wrapper.find('textarea').element.disabled).toBe(false);
+		expect(wrapper.find('textarea').element.value).toBe('Hello');
+		expect(errorHandler).toHaveBeenCalledWith(
+			error,
+			expect.anything(),
+			expect.anything(),
+		); // back in the field, ready to retry
+		expect(document.activeElement).toBe(wrapper.find('textarea').element);
+	});
+
+	// Review Focus #4
+	it('does not send twice while a send is pending', async () => {
+		const pending = deferred();
+		const onSend = vi.fn(() => pending.promise);
+		const wrapper = setup({
+			onSend,
+		});
+		await type(wrapper, 'Hello');
+		await pressEnter(wrapper);
+		await pressEnter(wrapper);
+		await wrapper.find('.chat-composer__send').trigger('click');
+		expect(onSend).toHaveBeenCalledTimes(1);
+		pending.resolve();
+		await flushPromises();
+	});
+
+	it('ignores an empty or whitespace draft', async () => {
+		const onSend = vi.fn().mockResolvedValue(undefined);
+		const wrapper = setup({
+			onSend,
+		});
+		await type(wrapper, '   ');
+		await pressEnter(wrapper);
+		expect(onSend).not.toHaveBeenCalled();
+	});
+
+	it('sends on Enter, not on Shift+Enter, and not at all with submitOnEnter off', async () => {
+		const onSend = vi.fn().mockResolvedValue(undefined);
+		const wrapper = setup({
+			onSend,
+		});
+		await type(wrapper, 'a');
+		await pressEnter(wrapper, true);
+		expect(onSend).not.toHaveBeenCalled();
+		await pressEnter(wrapper);
+		expect(onSend).toHaveBeenCalledTimes(1);
+
+		const off = setup({
+			onSend: vi.fn(),
+			submitOnEnter: false,
+		});
+		await type(off, 'a');
+		await pressEnter(off);
+		expect(off.props('onSend')).not.toHaveBeenCalled();
+	});
+
+	it('renders only the actions it is given', () => {
+		const wrapper = setup({
+			actions: [
+				ChatComposerAction.Send,
+			],
+		});
+		expect(wrapper.find('.chat-composer__attach').exists()).toBe(false);
+		expect(wrapper.find('.emoji-stub').exists()).toBe(false);
+		expect(wrapper.find('.chat-composer__send').exists()).toBe(true);
+	});
+
+	it('passes picked files to onAttach', async () => {
+		const onAttach = vi.fn().mockResolvedValue(undefined);
+		const wrapper = setup({
+			onAttach,
+		});
+		const input = wrapper.find('.chat-composer__file-input');
+		const file = new File(
+			[
+				'x',
+			],
+			'a.txt',
+			{
+				type: 'text/plain',
+			},
+		);
+		Object.defineProperty(input.element, 'files', {
+			value: [
+				file,
+			],
+			configurable: true,
+		});
+		await input.trigger('change');
+		await flushPromises();
+		expect(onAttach).toHaveBeenCalledWith([
+			file,
+		]);
+	});
+
+	it('lets slot content insert text into the draft', async () => {
+		const wrapper = mountWithChats(ChatComposer, {
+			attachTo: document.body,
+			slots: {
+				actions: `<template #actions="{ insertText }"><button class="quick-reply" @click="insertText('Thanks!')" /></template>`,
+			},
+		});
+		await wrapper.find('.quick-reply').trigger('click');
+		expect(wrapper.find('textarea').element.value).toContain('Thanks!');
+	});
+
+	it('inserts a picked emoji', async () => {
+		const wrapper = setup();
+		await wrapper.find('.emoji-stub').trigger('click');
+		expect(wrapper.find('textarea').element.value).toContain('🙂');
+	});
+
+	it('works as a controlled v-model:draft', async () => {
+		const wrapper = setup({
+			draft: 'from app',
+			'onUpdate:draft': (value: string) =>
+				wrapper.setProps({
+					draft: value,
+				}),
+		});
+		expect(wrapper.find('textarea').element.value).toBe('from app');
+		await type(wrapper, 'edited');
+		expect(wrapper.props('draft')).toBe('edited');
+	});
+});

package/src/v2/ui/chat-composer/chat-composer.vue

@@ -0,0 +1,212 @@
+<template>
+  <div
+    :id="composerId"
+    class="chat-composer"
+  >
+    <wt-textarea
+      ref="field"
+      class="chat-composer__field"
+      :model-value="draft"
+      :placeholder="t('composer.placeholder')"
+      :disabled="isLocked"
+      :submit-on-enter="props.submitOnEnter"
+      autoresize
+      @update:model-value="draft = $event ?? ''"
+      @enter="send"
+    />
+    <div class="chat-composer__actions">
+      <div class="chat-composer__actions-start">
+        <template v-if="hasAction(ChatComposerAction.Attach)">
+          <wt-button
+            class="chat-composer__attach"
+            icon="attach"
+            color="secondary"
+            variant="text"
+            size="sm"
+            :disabled="isLocked"
+            :title="t('composer.attach')"
+            @click="fileInput?.click()"
+          />
+          <input
+            ref="file-input"
+            class="chat-composer__file-input"
+            type="file"
+            multiple
+            hidden
+            @change="handleFilesPicked"
+          >
+        </template>
+        <wt-chat-emoji
+          v-if="hasAction(ChatComposerAction.Emoji)"
+          :popup-teleport-to="`#${composerId}`"
+          :rounded="false"
+          size="sm"
+          :title="t('composer.emoji')"
+          @insert-emoji="insertText"
+        />
+        <slot
+          name="actions"
+          v-bind="slotProps"
+        />
+      </div>
+      <wt-button
+        v-if="hasAction(ChatComposerAction.Send)"
+        class="chat-composer__send"
+        icon="chat-send"
+        color="secondary"
+        :loading="isSending"
+        :disabled="isLocked || !canSend"
+        :title="t('composer.send')"
+        @mousedown.prevent
+        @click="send"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { WtButton, WtChatEmoji, WtTextarea } from '@webitel/ui-sdk/components';
+import insertTextAtCursor from 'insert-text-at-cursor';
+import { computed, nextTick, ref, useId, useTemplateRef } from 'vue';
+
+import { useChatsV2I18n } from '../../locale/useChatsV2I18n';
+import {
+	ChatComposerAction,
+	type ChatComposerProps,
+	type ChatComposerSlotProps,
+} from '../../types';
+
+const props = withDefaults(defineProps<ChatComposerProps>(), {
+	actions: () => [
+		ChatComposerAction.Attach,
+		ChatComposerAction.Emoji,
+		ChatComposerAction.Send,
+	],
+	submitOnEnter: true,
+	disabled: false,
+});
+
+const draft = defineModel<string>('draft', {
+	default: '',
+});
+
+defineSlots<{
+	actions?: (props: ChatComposerSlotProps) => unknown;
+}>();
+
+const { t } = useChatsV2I18n();
+
+// unique per instance: the emoji popup teleports into its own composer
+const composerId = `chat-composer-${useId()}`;
+
+const field = useTemplateRef<InstanceType<typeof WtTextarea>>('field');
+const fileInput = useTemplateRef<HTMLInputElement>('file-input');
+
+const isSending = ref(false);
+const isAttaching = ref(false);
+
+const isLocked = computed(
+	() => props.disabled || isSending.value || isAttaching.value,
+);
+const canSend = computed(() => draft.value.trim().length > 0);
+
+const hasAction = (action: ChatComposerAction) =>
+	props.actions.includes(action);
+
+const textarea = (): HTMLTextAreaElement | null =>
+	(field.value?.$el as HTMLElement | undefined)?.querySelector('textarea') ??
+	null;
+
+function focus() {
+	textarea()?.focus();
+}
+
+function insertText(text: string) {
+	const el = textarea();
+	if (!el || el.disabled) {
+		draft.value += text;
+		return;
+	}
+	el.focus();
+	// fires an input event, so the textarea's v-model picks the change up
+	insertTextAtCursor(el, text);
+}
+
+async function send() {
+	if (!props.onSend || isLocked.value || !canSend.value) return;
+
+	isSending.value = true;
+	try {
+		await props.onSend(draft.value);
+		draft.value = '';
+	} finally {
+		// on reject the draft stays and the error propagates to the app
+		isSending.value = false;
+		// the field lost focus while disabled; put the operator back in it,
+		// to type on after a send or to retry after a failure
+		nextTick(focus);
+	}
+}
+
+async function handleFilesPicked(event: Event) {
+	const input = event.target as HTMLInputElement;
+	const files = Array.from(input.files ?? []);
+	// reset so picking the same file again still fires change
+	input.value = '';
+
+	if (!files.length || !props.onAttach || isLocked.value) return;
+
+	isAttaching.value = true;
+	try {
+		await props.onAttach(files);
+	} finally {
+		isAttaching.value = false;
+	}
+}
+
+const slotProps = computed<ChatComposerSlotProps>(() => ({
+	insertText,
+	focus,
+	disabled: isLocked.value,
+}));
+
+defineExpose({
+	focus,
+	insertText,
+});
+</script>
+
+<style scoped>
+.chat-composer {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--wt-ws-message-composer-sizes-root-gap);
+  padding: var(--wt-ws-message-composer-sizes-root-padding-y) var(--wt-ws-message-composer-sizes-root-padding-x);
+  border-radius: var(--wt-ws-message-composer-sizes-root-border-radius);
+  background: var(--wt-ws-message-composer-colors-root-background);
+}
+
+.chat-composer__field {
+  min-height: 0;
+}
+
+.chat-composer__field :deep(textarea) {
+  max-height: 30vh;
+  min-height: auto;
+  overflow: auto !important;
+}
+
+.chat-composer__actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--wt-ws-message-composer-sizes-root-gap);
+}
+
+.chat-composer__actions-start {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2xs);
+}
+</style>