@webitel/ui-chats 26.8.2 → 26.8.4

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

@@ -0,0 +1,235 @@
+import { flushPromises } from '@vue/test-utils';
+import { describe, expect, it, vi } from 'vitest';
+
+import {
+	client,
+	message,
+	operator,
+	thread,
+} from '../../../scripts/__tests__/fixtures';
+import { ChatThreadMode } from '../../../types';
+import { deferred, mountWithChats } from '../../__tests__/mountWithChats';
+import ChatHistory from '../chat-history.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" />',
+	},
+}));
+
+const setup = (props = {}) =>
+	mountWithChats(ChatHistory, {
+		props: {
+			thread: thread(),
+			messages: [],
+			selfMemberId: operator.id,
+			...props,
+		},
+	});
+
+describe('ChatHistory', () => {
+	it('renders dividers, messages and system notices', () => {
+		const wrapper = setup({
+			messages: [
+				message({
+					sender: client,
+				}),
+				message({
+					sender: operator,
+					system: {
+						type: 'transferred',
+					},
+				}),
+			],
+		});
+		expect(wrapper.findAll('.chat-date-divider')).toHaveLength(1);
+		expect(wrapper.findAll('.chat-message')).toHaveLength(1);
+		expect(wrapper.findAll('.chat-system-notice')).toHaveLength(1);
+	});
+
+	it('puts contact-centre messages on the outgoing side', () => {
+		const wrapper = setup({
+			messages: [
+				message({
+					sender: client,
+				}),
+				message({
+					sender: operator,
+				}),
+			],
+		});
+		const rows = wrapper.findAll('.chat-message');
+		expect(rows[0].classes()).not.toContain('chat-message--outgoing');
+		expect(rows[1].classes()).toContain('chat-message--outgoing');
+	});
+
+	it('shows ticks only on the operator’s own messages', () => {
+		const wrapper = setup({
+			messages: [
+				message({
+					sender: client,
+				}),
+				message({
+					sender: operator,
+				}),
+			],
+		});
+		const rows = wrapper.findAll('.chat-message');
+		expect(rows[0].find('.message-status').exists()).toBe(false);
+		expect(rows[1].find('.message-status').exists()).toBe(true);
+	});
+
+	it('shows a tombstone for deleted messages', () => {
+		const wrapper = setup({
+			messages: [
+				message({
+					deleted: true,
+					body: undefined,
+				}),
+			],
+		});
+		expect(wrapper.text()).toContain('Message deleted');
+	});
+
+	// Review Focus #2
+	it('does not render an empty bubble for content it cannot draw', () => {
+		const wrapper = setup({
+			messages: [
+				message({
+					body: undefined,
+					location: {
+						latitude: 1,
+						longitude: 2,
+					},
+				}),
+			],
+		});
+		expect(wrapper.text()).toContain('Unsupported message');
+	});
+
+	it('mounts the gallery only once an image is opened', async () => {
+		const wrapper = setup({
+			messages: [
+				message({
+					body: undefined,
+					images: [
+						{
+							id: 'i1',
+							url: 'https://x/1.png',
+							width: 4,
+							height: 3,
+						},
+					],
+				}),
+			],
+		});
+		// the gallery carries its own hidden confirm popup; keep it out of the page until needed
+		expect(wrapper.find('.galleria-stub').exists()).toBe(false);
+
+		await wrapper.find('.message-attachments__image').trigger('click');
+		expect(wrapper.find('.galleria-stub').exists()).toBe(true);
+	});
+
+	// the topmost entry anchors the scroll position while older items are prepended;
+	// a divider must not, as a same-day page keeps its element in place
+	it('marks only message and notice rows as scroll anchors', () => {
+		const wrapper = setup({
+			messages: [
+				message({
+					sender: client,
+				}),
+				message({
+					sender: operator,
+					system: {
+						type: 'transferred',
+					},
+				}),
+			],
+		});
+		const entries = wrapper.findAll('.chat-history__entry');
+		expect(entries).toHaveLength(2);
+		expect(entries[0].find('.chat-message').exists()).toBe(true);
+		expect(
+			wrapper.find('.chat-history__entry .chat-date-divider').exists(),
+		).toBe(false);
+	});
+
+	it('shows the waiting line only in awaiting mode', async () => {
+		const wrapper = setup({
+			messages: [
+				message(),
+			],
+			mode: ChatThreadMode.Awaiting,
+		});
+		expect(wrapper.find('.chat-history__awaiting').exists()).toBe(true);
+		await wrapper.setProps({
+			mode: ChatThreadMode.Active,
+		});
+		expect(wrapper.find('.chat-history__awaiting').exists()).toBe(false);
+	});
+
+	it('shows the top sentinel only while there is more history', async () => {
+		const wrapper = setup({
+			messages: [
+				message(),
+			],
+			hasMore: false,
+		});
+		expect(wrapper.find('.chat-history__sentinel').exists()).toBe(false);
+		await wrapper.setProps({
+			hasMore: true,
+		});
+		expect(wrapper.find('.chat-history__sentinel').exists()).toBe(true);
+	});
+
+	it('shows one spinner while onLoadMore is pending and stops when it settles, even on failure', async () => {
+		const pending = deferred();
+		const onLoadMore = vi.fn(() => pending.promise);
+		const wrapper = setup({
+			messages: [
+				message(),
+			],
+			hasMore: true,
+			onLoadMore,
+		});
+		wrapper
+			.findComponent({
+				name: 'WtIntersectionObserver',
+			})
+			.vm.$emit('next');
+		await flushPromises();
+		expect(onLoadMore).toHaveBeenCalledTimes(1);
+		expect(
+			wrapper.find('.chat-history__sentinel').findAll('.wt-loader'),
+		).toHaveLength(1);
+
+		pending.reject(new Error('offline'));
+		await flushPromises();
+		expect(
+			wrapper.find('.chat-history__sentinel').findAll('.wt-loader'),
+		).toHaveLength(0);
+	});
+});

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

@@ -0,0 +1,262 @@
+<template>
+  <section class="chat-history">
+    <div
+      ref="scroll-container"
+      class="chat-history__scroll wt-scrollbar"
+      @scroll="handleChatScroll"
+    >
+      <div
+        ref="scroll-content"
+        class="chat-history__content"
+      >
+        <!-- the observer draws its own loader while loading -->
+        <div
+          v-if="props.hasMore"
+          class="chat-history__sentinel"
+        >
+          <wt-intersection-observer
+            :can-load-more="props.hasMore && !isLoadingMore"
+            :loading="isLoadingMore"
+            @next="handleLoadMore"
+          />
+        </div>
+
+        <div
+          v-for="item of items"
+          :key="item.key"
+          class="chat-history__item"
+          :class="{ 'chat-history__entry': item.kind !== 'divider' }"
+        >
+          <chat-date-divider
+            v-if="item.kind === 'divider'"
+            :date="item.date"
+          />
+          <chat-system-notice
+            v-else-if="item.kind === 'system'"
+            :message="item.message"
+            :thread="props.thread"
+            :resolve-avatar-url="props.resolveAvatarUrl"
+          />
+          <chat-message
+            v-else
+            :message="item.message"
+            :thread="props.thread"
+            :self-member-id="props.selfMemberId"
+            :resolve-avatar-url="props.resolveAvatarUrl"
+          />
+        </div>
+
+        <div
+          v-if="props.mode === ChatThreadMode.Awaiting"
+          class="chat-history__awaiting typo-caption"
+        >
+          {{ t('history.waitingForOperator') }}
+        </div>
+      </div>
+    </div>
+
+    <scroll-to-bottom-btn
+      v-if="showScrollToBottomBtn"
+      :new-message-count="newUnseenMessagesCount"
+      @scroll="scrollToBottom('smooth')"
+    />
+
+    <!-- mounted only while open: the gallery carries a hidden confirm popup and
+         is an async component, neither belongs on every chat page -->
+    <wt-galleria
+      v-if="isGalleryOpen"
+      v-model:visible="isGalleryOpen"
+      v-model:active-index="galleryIndex"
+      :value="galleryItems"
+      delete-disabled
+      @download="downloadGalleryImage"
+    />
+  </section>
+</template>
+
+<script setup lang="ts">
+import { WtGalleria, WtIntersectionObserver } from '@webitel/ui-sdk/components';
+import { computed, provide, ref, useTemplateRef, watch } from 'vue';
+
+import { useChatScroll } from '../../../shared/composables/useChatScroll';
+import { useObserveHeightUntilStable } from '../../../shared/composables/useObserveHeightUntilStable';
+import { useChatsV2I18n } from '../../locale/useChatsV2I18n';
+import { collectGalleryImages } from '../../scripts/attachments';
+import { toHistoryItems } from '../../scripts/toHistoryItems';
+import {
+	type ChatHistoryProps,
+	ChatThreadMode,
+	type MessageModel,
+} from '../../types';
+import ChatDateDivider from './components/chat-date-divider.vue';
+import ChatMessage from './components/chat-message.vue';
+import ChatSystemNotice from './components/chat-system-notice.vue';
+import ScrollToBottomBtn from './components/scroll-to-bottom-btn.vue';
+import { ChatGalleryKey } from './gallery';
+
+/** how long after (re)opening a thread late layout shifts still pin the bottom */
+const SETTLE_TIMEOUT_MS = 2000;
+
+const props = withDefaults(defineProps<ChatHistoryProps>(), {
+	mode: ChatThreadMode.Active,
+	hasMore: false,
+});
+
+const emit = defineEmits<{
+	seen: [
+		message: MessageModel,
+	];
+}>();
+
+const { t } = useChatsV2I18n();
+
+const scrollContainer = useTemplateRef<HTMLElement>('scroll-container');
+const scrollContent = useTemplateRef<HTMLElement>('scroll-content');
+
+const items = computed(() => toHistoryItems(props.messages));
+
+const isLoadingMore = ref(false);
+
+let lastSeenId: string | null = null;
+
+function handleSeen() {
+	const newest = props.messages.at(-1);
+	if (!newest || newest.id === lastSeenId) return;
+	lastSeenId = newest.id;
+	emit('seen', newest);
+}
+
+const {
+	showScrollToBottomBtn,
+	newUnseenMessagesCount,
+	scrollToBottom,
+	loadNextMessages,
+	handleChatScroll,
+} = useChatScroll<MessageModel>({
+	chatContainer: scrollContainer,
+	chatContent: scrollContent,
+	messages: computed(() => props.messages),
+	isSelf: (message) =>
+		!!message.sender?.id && message.sender.id === props.selfMemberId,
+	// a divider must not anchor: a same-day older page keeps its element in place
+	itemClass: 'chat-history__entry',
+	chatId: computed(() => props.thread.id),
+	isChatClosed: computed(() => false),
+	isLoading: isLoadingMore,
+	onBeforeStart: ({ scrollToBottom }) => {
+		scrollToBottom();
+		startObserve();
+	},
+	onSeen: handleSeen,
+});
+
+const { startObserve } = useObserveHeightUntilStable(
+	scrollContainer,
+	() => scrollToBottom('instant'),
+	SETTLE_TIMEOUT_MS,
+);
+
+function handleLoadMore() {
+	const onLoadMore = props.onLoadMore;
+	if (!onLoadMore || isLoadingMore.value) return;
+
+	loadNextMessages(props.hasMore, async () => {
+		isLoadingMore.value = true;
+		try {
+			await onLoadMore();
+		} catch {
+			// the app owns error reporting; the sentinel retries on next sight
+		} finally {
+			isLoadingMore.value = false;
+		}
+	});
+}
+
+const galleryImages = computed(() => collectGalleryImages(props.messages));
+
+const galleryItems = computed(() =>
+	galleryImages.value.map(({ src }) => ({
+		src,
+		thumbnailSrc: src,
+		title: '',
+	})),
+);
+
+const isGalleryOpen = ref(false);
+const galleryIndex = ref(0);
+
+provide(ChatGalleryKey, {
+	open: (imageKey) => {
+		const index = galleryImages.value.findIndex(
+			(image) => image.key === imageKey,
+		);
+		if (index < 0) return;
+		galleryIndex.value = index;
+		isGalleryOpen.value = true;
+	},
+});
+
+function downloadGalleryImage(index: number) {
+	const image = galleryImages.value[index];
+	if (image) window.open(image.src, '_blank', 'noopener');
+}
+
+watch(
+	() => props.thread.id,
+	() => {
+		lastSeenId = null;
+		isGalleryOpen.value = false;
+	},
+);
+</script>
+
+<style scoped>
+.chat-history {
+  position: relative;
+  display: flex;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--wt-ws-chat-window-colors-root-background);
+}
+
+.chat-history__scroll {
+  box-sizing: border-box;
+  width: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding-right: var(--scrollbar-width);
+  scrollbar-gutter: stable both-edges;
+}
+
+.chat-history__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wt-ws-chat-window-sizes-root-gap);
+  padding: var(--wt-ws-chat-window-sizes-root-padding-y) var(--wt-ws-chat-window-sizes-root-padding-x);
+}
+
+.chat-history__sentinel {
+  /* reserve the loader's height so its appearance does not shift the rows (WTEL-5366) */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  min-height: calc(var(--spacing-lg) * 2 + var(--icon-md-size));
+}
+
+.chat-history__awaiting {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  color: var(--text-disabled-color);
+  font-style: italic;
+}
+
+.chat-history__awaiting::before,
+.chat-history__awaiting::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--p-divider-border-color);
+}
+</style>

package/src/v2/ui/chat-history/components/chat-date-divider.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="chat-date-divider">
+    <wt-chip :color="ChipColor.SECONDARY">
+      {{ label }}
+    </wt-chip>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { WtChip } from '@webitel/ui-sdk/components';
+import { ChipColor } from '@webitel/ui-sdk/enums';
+import { computed } from 'vue';
+
+import { useChatsV2I18n } from '../../../locale/useChatsV2I18n';
+import { formatDividerDate } from '../../../scripts/formatDate';
+
+const props = defineProps<{
+	date: number;
+}>();
+
+const { t, locale } = useChatsV2I18n();
+
+const label = computed(() =>
+	formatDividerDate(props.date, {
+		locale: locale.value,
+		todayLabel: t('history.today'),
+	}),
+);
+</script>
+
+<style scoped>
+.chat-date-divider {
+  display: flex;
+  justify-content: center;
+}
+</style>

package/src/v2/ui/chat-history/components/chat-message.vue

@@ -0,0 +1,148 @@
+<template>
+  <div
+    class="chat-message"
+    :class="{ 'chat-message--outgoing': isOutgoing }"
+  >
+    <wt-avatar
+      class="chat-message__avatar"
+      size="sm"
+      :src="avatarUrl"
+      :username="authorName"
+    />
+    <div class="chat-message__bubble">
+      <p
+        v-if="props.message.deleted"
+        class="chat-message__placeholder typo-body-1"
+      >
+        {{ t('history.deletedMessage') }}
+      </p>
+      <template v-else>
+        <message-attachments
+          v-if="withAttachments"
+          :message="props.message"
+        />
+        <message-text
+          v-if="props.message.body"
+          :text="props.message.body"
+        />
+        <p
+          v-else-if="!withAttachments"
+          class="chat-message__placeholder typo-body-1"
+        >
+          {{ t('history.unsupportedMessage') }}
+        </p>
+      </template>
+      <div class="chat-message__meta typo-caption">
+        <span v-if="time">{{ time }}</span>
+        <message-status
+          v-if="status"
+          :status="status"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { WtAvatar } from '@webitel/ui-sdk/components';
+import { computed } from 'vue';
+
+import { useChatsV2I18n } from '../../../locale/useChatsV2I18n';
+import { hasAttachments } from '../../../scripts/attachments';
+import { formatMessageTime } from '../../../scripts/formatDate';
+import { getMessageStatus } from '../../../scripts/getMessageStatus';
+import { isContactCentreSide } from '../../../scripts/isContactCentreSide';
+import { participantName } from '../../../scripts/resolveSystemNotice';
+import { toTimestamp } from '../../../scripts/toTimestamp';
+import type {
+	MessageModel,
+	ResolveAvatarUrl,
+	ThreadModel,
+} from '../../../types';
+import MessageAttachments from './message-attachments.vue';
+import MessageStatus from './message-status.vue';
+import MessageText from './message-text.vue';
+
+const props = defineProps<{
+	message: MessageModel;
+	thread: ThreadModel;
+	selfMemberId: string;
+	resolveAvatarUrl?: ResolveAvatarUrl;
+}>();
+
+const { t } = useChatsV2I18n();
+
+const isOutgoing = computed(() => isContactCentreSide(props.message.sender));
+
+const authorName = computed(() => participantName(props.message.sender));
+
+const avatarUrl = computed(() =>
+	props.message.sender
+		? props.resolveAvatarUrl?.(props.message.sender)
+		: undefined,
+);
+
+const withAttachments = computed(() => hasAttachments(props.message));
+
+const time = computed(() => {
+	const timestamp = toTimestamp(props.message.createdAt);
+	return timestamp === null ? '' : formatMessageTime(timestamp);
+});
+
+const status = computed(() =>
+	getMessageStatus(props.message, props.thread, props.selfMemberId),
+);
+</script>
+
+<style scoped>
+.chat-message {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--wt-ws-chat-window-sizes-message-item-gap);
+  padding: var(--wt-ws-chat-window-sizes-message-item-padding-y) var(--wt-ws-chat-window-sizes-message-item-padding-x);
+}
+
+.chat-message--outgoing {
+  flex-direction: row-reverse;
+}
+
+.chat-message__avatar {
+  flex-shrink: 0;
+}
+
+.chat-message__bubble {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wt-ws-chat-window-sizes-message-item-chat-message-gap);
+  max-width: 70%;
+  min-width: 0;
+  padding: var(--wt-ws-chat-window-sizes-message-item-chat-message-padding-y) var(--wt-ws-chat-window-sizes-message-item-chat-message-padding-x);
+  border-radius: var(--wt-ws-chat-window-sizes-message-item-chat-message-border-radius);
+  background: var(--wt-ws-chat-window-colors-message-item-chat-message-client-background);
+  color: var(--wt-ws-chat-window-colors-message-item-chat-message-client-color);
+}
+
+/* the corner next to the avatar is square, as in DES-730 */
+.chat-message:not(.chat-message--outgoing) .chat-message__bubble {
+  border-top-left-radius: 0;
+}
+
+.chat-message--outgoing .chat-message__bubble {
+  border-top-right-radius: 0;
+  background: var(--wt-ws-chat-window-colors-message-item-chat-message-agent-background);
+  color: var(--wt-ws-chat-window-colors-message-item-chat-message-agent-color);
+}
+
+.chat-message__placeholder {
+  margin: 0;
+  font-style: italic;
+  opacity: 0.7;
+}
+
+.chat-message__meta {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-2xs);
+}
+</style>