@webitel/ui-chats 26.8.3 → 26.8.4

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

@@ -0,0 +1,100 @@
+<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-avatar
+        v-if="notice.actor"
+        class="chat-system-notice__avatar"
+        size="2xs"
+        :src="props.resolveAvatarUrl?.(notice.actor)"
+        :username="actorName"
+      />
+      <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 } 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));
+
+const actorName = computed(
+	() => participantName(notice.value.actor) || 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);
+	});
+});

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

@@ -0,0 +1,111 @@
+<template>
+  <section class="chat-thread">
+    <chat-history
+      class="chat-thread__history"
+      :thread="props.thread"
+      :messages="props.messages"
+      :self-member-id="props.selfMemberId"
+      :mode="props.mode"
+      :has-more="props.hasMore"
+      :on-load-more="props.onLoadMore"
+      :resolve-avatar-url="props.resolveAvatarUrl"
+      @seen="emit('seen', $event)"
+    />
+    <!-- keyed by thread: switching chats drops the draft and any pending state -->
+    <chat-composer
+      v-if="props.mode === ChatThreadMode.Active"
+      :key="props.thread.id"
+      class="chat-thread__composer"
+      :on-send="props.onSend"
+      :on-attach="props.onAttach"
+      :actions="props.actions"
+      :submit-on-enter="props.submitOnEnter"
+      :disabled="props.disabled"
+      v-bind="draftBinding()"
+    >
+      <template #actions="slotProps">
+        <slot
+          name="actions"
+          v-bind="slotProps"
+        />
+      </template>
+    </chat-composer>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { getCurrentInstance } from 'vue';
+
+import {
+	ChatComposerAction,
+	type ChatComposerSlotProps,
+	ChatThreadMode,
+	type ChatThreadProps,
+	type MessageModel,
+} from '../../types';
+import ChatComposer from '../chat-composer/chat-composer.vue';
+import ChatHistory from '../chat-history/chat-history.vue';
+
+const props = withDefaults(defineProps<ChatThreadProps>(), {
+	mode: ChatThreadMode.Active,
+	hasMore: false,
+	actions: () => [
+		ChatComposerAction.Attach,
+		ChatComposerAction.Emoji,
+		ChatComposerAction.Send,
+	],
+	submitOnEnter: true,
+	disabled: false,
+	draft: undefined,
+});
+
+const emit = defineEmits<{
+	seen: [
+		message: MessageModel,
+	];
+	'update:draft': [
+		draft: string,
+	];
+}>();
+
+defineSlots<{
+	actions?: (props: ChatComposerSlotProps) => unknown;
+}>();
+
+const instance = getCurrentInstance();
+
+// Forward the draft only when the app binds v-model:draft; otherwise the
+// composer keeps its own, which the :key above resets per thread. Binding is
+// read from the vnode, not the value: drafts[thread.id] is undefined until
+// the operator types. Called from render, so it follows each parent render.
+function draftBinding() {
+	const bound = instance?.vnode.props ?? {};
+	const isControlled = 'draft' in bound || 'onUpdate:draft' in bound;
+	return isControlled
+		? {
+				draft: props.draft ?? '',
+				'onUpdate:draft': (value: string) => emit('update:draft', value),
+			}
+		: {};
+}
+</script>
+
+<style scoped>
+.chat-thread {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wt-ws-chat-window-sizes-root-gap);
+  min-height: 0;
+  height: 100%;
+}
+
+.chat-thread__history {
+  flex: 1;
+  min-height: 0;
+}
+
+.chat-thread__composer {
+  flex: 0 0 auto;
+  max-height: 50%;
+}
+</style>