@webitel/ui-chats 26.8.3 → 26.8.5

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

@@ -0,0 +1,156 @@
+<template>
+  <div
+    class="chat-message"
+    :class="{ 'chat-message--outgoing': isOutgoing }"
+  >
+    <wt-tooltip
+      class="chat-message__avatar"
+      placement="top"
+      :disabled="!authorName"
+    >
+      <template #activator>
+        <wt-avatar
+          size="sm"
+          :src="avatarUrl"
+          :username="authorName"
+        />
+      </template>
+      {{ authorName }}
+    </wt-tooltip>
+    <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, WtTooltip } 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>

package/src/v2/ui/chat-history/components/chat-system-notice.vue

@@ -0,0 +1,111 @@
+<template>
+  <div
+    class="chat-system-notice"
+    :class="`chat-system-notice--${notice.tone}`"
+  >
+    <span class="chat-system-notice__line" />
+    <span class="chat-system-notice__content typo-caption">
+      <wt-tooltip
+        v-if="notice.actor"
+        class="chat-system-notice__avatar"
+        placement="top"
+        :disabled="!actorRealName"
+      >
+        <template #activator>
+          <wt-avatar
+            size="2xs"
+            :src="props.resolveAvatarUrl?.(notice.actor)"
+            :username="actorName"
+          />
+        </template>
+        {{ actorRealName }}
+      </wt-tooltip>
+      <span class="chat-system-notice__text">{{ text }}</span>
+      <span
+        v-if="time"
+        class="chat-system-notice__time"
+      >• {{ time }}</span>
+    </span>
+    <span class="chat-system-notice__line" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { WtAvatar, WtTooltip } from '@webitel/ui-sdk/components';
+import { computed } from 'vue';
+
+import { useChatsV2I18n } from '../../../locale/useChatsV2I18n';
+import { formatMessageTime } from '../../../scripts/formatDate';
+import {
+	participantName,
+	resolveSystemNotice,
+} from '../../../scripts/resolveSystemNotice';
+import { toTimestamp } from '../../../scripts/toTimestamp';
+import type {
+	MessageModel,
+	ResolveAvatarUrl,
+	ThreadModel,
+} from '../../../types';
+
+const props = defineProps<{
+	message: MessageModel;
+	thread: ThreadModel;
+	resolveAvatarUrl?: ResolveAvatarUrl;
+}>();
+
+const { t } = useChatsV2I18n();
+
+const notice = computed(() => resolveSystemNotice(props.message, props.thread));
+
+// the actor's own name; the tooltip stays off for the generic "system" fallback
+const actorRealName = computed(() => participantName(notice.value.actor));
+
+const actorName = computed(
+	() => actorRealName.value || t('systemNotice.system'),
+);
+
+const text = computed(() =>
+	notice.value.textKey
+		? t(notice.value.textKey, {
+				actor: actorName.value,
+			})
+		: (notice.value.fallbackText ?? ''),
+);
+
+const time = computed(() => {
+	const timestamp = toTimestamp(props.message.createdAt);
+	return timestamp === null ? '' : formatMessageTime(timestamp);
+});
+</script>
+
+<style scoped>
+.chat-system-notice {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  color: var(--text-disabled-color);
+  font-style: italic;
+}
+
+.chat-system-notice__line {
+  flex: 1;
+  height: 1px;
+  background: var(--p-divider-border-color);
+}
+
+.chat-system-notice__content {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2xs);
+  max-width: 70%;
+  text-align: center;
+}
+
+.chat-system-notice--positive {
+  color: var(--text-success-color);
+}
+
+.chat-system-notice--negative {
+  color: var(--text-error-color);
+}
+</style>

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

@@ -0,0 +1,162 @@
+<template>
+  <div class="message-attachments">
+    <div
+      v-if="attachments.images.length"
+      class="message-attachments__images"
+      :class="{ 'message-attachments__images--single': attachments.images.length === 1 }"
+    >
+      <button
+        v-for="{ key, image } of attachments.images"
+        :key="key"
+        type="button"
+        class="message-attachments__image"
+        :style="aspectRatio(image)"
+        @click="gallery?.open(key)"
+      >
+        <img
+          :src="image.url"
+          alt=""
+          loading="lazy"
+        >
+      </button>
+    </div>
+
+    <template
+      v-for="{ key, document, kind } of attachments.media"
+      :key="key"
+    >
+      <wt-vidstack-player
+        v-if="kind === 'video'"
+        class="message-attachments__media"
+        :src="document.url"
+        :mime="document.mime"
+        :title="document.name"
+        :size="ComponentSize.SM"
+        countdown-time-mode
+        static
+        hide-expand
+        stretch
+      />
+      <wt-player
+        v-else
+        class="message-attachments__media"
+        :src="document.url"
+        :autoplay="false"
+        :closable="false"
+        countdown-time-mode
+        hide-volume-slider
+        hide-mute-button
+      />
+    </template>
+
+    <a
+      v-for="file of attachments.files"
+      :key="file.key"
+      class="message-attachments__file"
+      :href="file.url"
+      target="_blank"
+      rel="noopener"
+      download
+      :title="t('history.download')"
+    >
+      <wt-icon icon="docs" />
+      <span class="message-attachments__file-name typo-body-2">{{ file.name }}</span>
+      <span
+        v-if="file.size"
+        class="message-attachments__file-size typo-caption"
+      >{{ prettifyFileSize(file.size) }}</span>
+      <wt-icon icon="download" />
+    </a>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { WtIcon, WtPlayer, WtVidstackPlayer } from '@webitel/ui-sdk/components';
+import { ComponentSize } from '@webitel/ui-sdk/enums';
+import { prettifyFileSize } from '@webitel/ui-sdk/scripts';
+import { computed, inject } from 'vue';
+
+import { useChatsV2I18n } from '../../../locale/useChatsV2I18n';
+import { classifyAttachments } from '../../../scripts/attachments';
+import type { ChatImage, MessageModel } from '../../../types';
+import { ChatGalleryKey } from '../gallery';
+
+const props = defineProps<{
+	message: MessageModel;
+}>();
+
+const { t } = useChatsV2I18n();
+const gallery = inject(ChatGalleryKey, null);
+
+const attachments = computed(() => classifyAttachments(props.message));
+
+// Reserve the box before the image loads, so a late load cannot shift the
+// scroll position.
+const aspectRatio = (image: ChatImage) => ({
+	aspectRatio:
+		image.width && image.height ? `${image.width} / ${image.height}` : '1 / 1',
+});
+</script>
+
+<style scoped>
+.message-attachments {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.message-attachments__images {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--spacing-3xs);
+}
+
+.message-attachments__images--single {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.message-attachments__image {
+  display: block;
+  width: 100%;
+  max-height: 320px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  cursor: zoom-in;
+  background: none;
+}
+
+.message-attachments__image img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.message-attachments__media {
+  width: 100%;
+}
+
+.message-attachments__file {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs);
+  border-radius: var(--border-radius);
+  color: inherit;
+  text-decoration: none;
+}
+
+.message-attachments__file-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.message-attachments__file-size {
+  color: var(--text-disabled-color);
+}
+</style>

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

@@ -0,0 +1,31 @@
+<template>
+  <wt-icon
+    class="message-status"
+    :class="`message-status--${props.status}`"
+    :icon="props.status === 'sent' ? 'tick' : 'chat-message-status-read'"
+    size="sm"
+    :aria-label="props.status"
+  />
+</template>
+
+<script setup lang="ts">
+import { WtIcon } from '@webitel/ui-sdk/components';
+
+import type { ChatMessageStatus } from '../../../types';
+
+const props = defineProps<{
+	status: ChatMessageStatus;
+}>();
+</script>
+
+<style scoped>
+/* wt-icon paints with fill: var(--icon-color) */
+.message-status {
+  flex-shrink: 0;
+  --icon-color: currentColor;
+}
+
+.message-status--read {
+  --icon-color: var(--info-color);
+}
+</style>

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

@@ -0,0 +1,37 @@
+<template>
+  <p
+    class="message-text typo-body-1"
+    v-html="linkedText"
+  />
+</template>
+
+<script setup lang="ts">
+import Autolinker from 'autolinker';
+import { computed } from 'vue';
+
+const props = defineProps<{
+	text: string;
+}>();
+
+// Autolinker keeps literal "<" signs (DEV-2848) and sanitizes the rest
+const linkedText = computed(() =>
+	Autolinker.link(props.text, {
+		newWindow: true,
+		sanitizeHtml: true,
+		className: 'message-text__link',
+	}),
+);
+</script>
+
+<style scoped>
+.message-text {
+  margin: 0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.message-text :deep(.message-text__link) {
+  color: var(--text-link-color);
+  text-decoration: underline;
+}
+</style>

package/src/v2/ui/chat-history/components/scroll-to-bottom-btn.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="scroll-to-bottom-btn">
+    <div
+      v-show="props.newMessageCount"
+      class="scroll-to-bottom-btn__counter typo-body-2"
+    >
+      {{ props.newMessageCount }}
+    </div>
+    <wt-rounded-action
+      icon="arrow-down"
+      rounded
+      @click="emit('scroll')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { WtRoundedAction } from '@webitel/ui-sdk/components';
+
+const props = withDefaults(
+	defineProps<{
+		newMessageCount?: number;
+	}>(),
+	{
+		newMessageCount: 0,
+	},
+);
+
+const emit = defineEmits<{
+	scroll: [];
+}>();
+</script>
+
+<style scoped>
+.scroll-to-bottom-btn {
+  position: absolute;
+  right: calc(var(--scrollbar-width) + var(--spacing-xs));
+  bottom: var(--spacing-xs);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-2xs);
+}
+
+.scroll-to-bottom-btn__counter {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--success-color);
+  color: var(--text-on-brand-color);
+}
+</style>

package/src/v2/ui/chat-history/gallery.ts

@@ -0,0 +1,8 @@
+import type { InjectionKey } from 'vue';
+
+export interface ChatGallery {
+	/** opens the history-wide gallery at the image with this key */
+	open: (imageKey: string) => void;
+}
+
+export const ChatGalleryKey: InjectionKey<ChatGallery> = Symbol('ChatGallery');

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

@@ -0,0 +1,122 @@
+import { flushPromises } from '@vue/test-utils';
+import { describe, expect, it, vi } from 'vitest';
+
+import { message, operator, thread } from '../../../scripts/__tests__/fixtures';
+import { ChatThreadMode } from '../../../types';
+import { deferred, mountWithChats } from '../../__tests__/mountWithChats';
+import ChatThread from '../chat-thread.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(ChatThread, {
+		attachTo: document.body,
+		props: {
+			thread: thread(),
+			messages: [
+				message(),
+			],
+			selfMemberId: operator.id,
+			...props,
+		},
+	});
+
+describe('ChatThread', () => {
+	it('shows the composer only in active mode', async () => {
+		const wrapper = setup({
+			mode: ChatThreadMode.Active,
+		});
+		expect(wrapper.find('.chat-composer').exists()).toBe(true);
+		await wrapper.setProps({
+			mode: ChatThreadMode.Readonly,
+		});
+		expect(wrapper.find('.chat-composer').exists()).toBe(false);
+		await wrapper.setProps({
+			mode: ChatThreadMode.Awaiting,
+		});
+		expect(wrapper.find('.chat-composer').exists()).toBe(false);
+	});
+
+	// Review Focus #3
+	it('drops the draft when the thread changes', async () => {
+		const wrapper = setup();
+		await wrapper.find('textarea').setValue('half-written');
+		await wrapper.setProps({
+			thread: thread({
+				id: 'thread-2',
+			}),
+		});
+		expect(wrapper.find('textarea').element.value).toBe('');
+	});
+
+	// Review Focus #3
+	it('does not let a late send from the previous thread clear the new draft', async () => {
+		const pending = deferred();
+		const wrapper = setup({
+			onSend: vi.fn(() => pending.promise),
+		});
+		await wrapper.find('textarea').setValue('first');
+		await wrapper.find('.chat-composer__send').trigger('click');
+		await wrapper.setProps({
+			thread: thread({
+				id: 'thread-2',
+			}),
+		});
+		await wrapper.find('textarea').setValue('second');
+		pending.resolve();
+		await flushPromises();
+		expect(wrapper.find('textarea').element.value).toBe('second');
+	});
+
+	// spec §4: per-thread drafts via v-model:draft="drafts[thread.id]", undefined until typed
+	it('reports draft changes to a v-model:draft bound to an undefined value', async () => {
+		const onUpdateDraft = vi.fn();
+		const wrapper = setup({
+			draft: undefined,
+			'onUpdate:draft': onUpdateDraft,
+		});
+		await wrapper.find('textarea').setValue('per-thread');
+		expect(onUpdateDraft).toHaveBeenLastCalledWith('per-thread');
+	});
+
+	it('forwards the actions slot to the composer', () => {
+		const wrapper = mountWithChats(ChatThread, {
+			props: {
+				thread: thread(),
+				messages: [],
+				selfMemberId: operator.id,
+			},
+			slots: {
+				actions: '<button class="quick-reply" />',
+			},
+		});
+		expect(wrapper.find('.chat-composer .quick-reply').exists()).toBe(true);
+	});
+});