@webitel/ui-chats 26.8.4 → 26.8.5

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-chats",
-	"version": "26.8.4",
+	"version": "26.8.5",
 	"description": "Reusable Webitel Frontend Code for Chats UI",
 	"workspaces": [
 		"../../",

package/src/v2/scripts/__tests__/getMessageStatus.spec.ts

@@ -211,4 +211,94 @@ describe('getMessageStatus', () => {
 		});
 		expect(getMessageStatus(own('3'), t, operator.id)).toBe('read');
 	});
+
+	// A re-joined operator gets a new member id, but the thread snapshot (and so
+	// selfMemberId) still holds the old one; their contact is the stable identity.
+	describe('after the operator rejoined with a new member id', () => {
+		const oldMember = {
+			id: 'm-me-old',
+			contact: {
+				name: 'Dania',
+				type: 'webitel',
+				sub: '164',
+				iss: 'webitel',
+			},
+		};
+		const newMember = {
+			id: 'm-me-new',
+			contact: {
+				name: 'Dania',
+				type: 'webitel',
+				sub: '164',
+				iss: 'webitel',
+			},
+		};
+		const t = thread({
+			members: [
+				oldMember,
+				client,
+			],
+			readStates: [
+				{
+					memberId: client.id,
+					readUpToSeq: '5',
+				},
+			],
+		});
+
+		it('still treats their messages as their own', () => {
+			expect(
+				getMessageStatus(
+					message({
+						sender: newMember,
+						seq: '3',
+					}),
+					t,
+					oldMember.id,
+				),
+			).toBe('read');
+		});
+
+		it('does not claim another operator’s message', () => {
+			const other = {
+				id: 'm-other',
+				contact: {
+					name: 'Ola',
+					type: 'webitel',
+					sub: '289',
+					iss: 'webitel',
+				},
+			};
+			expect(
+				getMessageStatus(
+					message({
+						sender: other,
+					}),
+					t,
+					oldMember.id,
+				),
+			).toBeNull();
+		});
+
+		it('does not match the same subject from another issuer', () => {
+			const lookalike = {
+				id: 'm-x',
+				contact: {
+					name: 'Dania',
+					type: 'telegram',
+					sub: '164',
+					iss: 'telegram',
+				},
+			};
+			expect(
+				getMessageStatus(
+					message({
+						sender: lookalike,
+					}),
+					t,
+					oldMember.id,
+				),
+			).toBeNull();
+		});
+	});
 });

package/src/v2/scripts/getMessageStatus.ts

@@ -1,5 +1,6 @@
 import type { ChatMessageStatus, MessageModel, ThreadModel } from '../types';
 import { isContactCentreSide } from './isContactCentreSide';
+import { isSelfMessage } from './isSelfMessage';
 import { toSeq } from './toTimestamp';
 
 /**
@@ -14,7 +15,7 @@ export const getMessageStatus = (
 	selfMemberId: string,
 ): ChatMessageStatus | null => {
 	if (message.deleted || message.system) return null;
-	if (!message.sender?.id || message.sender.id !== selfMemberId) return null;
+	if (!isSelfMessage(message, thread, selfMemberId)) return null;
 
 	const seq = toSeq(message.seq);
 	if (seq === null) return 'sent';

package/src/v2/scripts/isSelfMessage.ts

@@ -0,0 +1,29 @@
+import type { MessageModel, ThreadModel } from '../types';
+
+/**
+ * Whether the operator using the UI sent this message.
+ *
+ * Member ids are per membership: an operator who is removed and added again
+ * gets a new one, while `thread.members` (and so `selfMemberId`) may still
+ * hold the old. So an id match is not enough; the stable identity is the
+ * contact — same subject from the same issuer as the operator's own member.
+ */
+export const isSelfMessage = (
+	message: MessageModel,
+	thread: ThreadModel,
+	selfMemberId: string,
+): boolean => {
+	const sender = message.sender;
+	if (!sender?.id || !selfMemberId) return false;
+	if (sender.id === selfMemberId) return true;
+
+	const self = thread.members?.find((member) => member.id === selfMemberId);
+	const selfContact = self?.contact;
+	const senderContact = sender.contact;
+
+	return (
+		!!selfContact?.sub &&
+		selfContact.sub === senderContact?.sub &&
+		selfContact.iss === senderContact?.iss
+	);
+};

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

@@ -102,6 +102,105 @@ describe('ChatHistory', () => {
 		expect(rows[1].find('.message-status').exists()).toBe(true);
 	});
 
+	describe('avatar tooltips', () => {
+		const hover = async (
+			activator: ReturnType<ReturnType<typeof setup>['find']>,
+		) => {
+			await activator.trigger('mouseenter');
+			await flushPromises();
+		};
+
+		it('names the author of a message on hover', async () => {
+			const wrapper = setup({
+				messages: [
+					message({
+						sender: client,
+					}),
+				],
+			});
+			const activator = wrapper.find('.chat-message .wt-tooltip__activator');
+
+			expect(wrapper.find('.wt-tooltip__floating').exists()).toBe(false);
+			await hover(activator);
+
+			expect(wrapper.find('.wt-tooltip__floating').text()).toBe(
+				'Emily Johnson',
+			);
+		});
+
+		it('names the actor of a system notice on hover', async () => {
+			const wrapper = setup({
+				messages: [
+					message({
+						sender: operator,
+						system: {
+							type: 'transferred',
+						},
+					}),
+				],
+			});
+			await hover(wrapper.find('.chat-system-notice .wt-tooltip__activator'));
+
+			expect(wrapper.find('.wt-tooltip__floating').text()).toBe(
+				'Alina Timoshenko',
+			);
+		});
+
+		// an empty tooltip bubble is worse than none
+		it('shows no tooltip for an author without a name', async () => {
+			const nameless = {
+				id: 'm-x',
+				contact: {
+					type: 'telegram',
+				},
+			};
+			const wrapper = setup({
+				messages: [
+					message({
+						sender: nameless,
+					}),
+				],
+			});
+			await hover(wrapper.find('.chat-message .wt-tooltip__activator'));
+
+			expect(wrapper.find('.wt-tooltip__floating').exists()).toBe(false);
+		});
+	});
+
+	// a rejoined operator gets a new member id, but their contact stays the same
+	it('still recognises the operator’s messages after they rejoined under a new member id', () => {
+		const me = {
+			id: 'm-me',
+			contact: {
+				name: 'Dania',
+				type: 'webitel',
+				sub: '164',
+				iss: 'webitel',
+			},
+		};
+		const rejoined = {
+			id: 'm-me-2',
+			contact: {
+				...me.contact,
+			},
+		};
+		const wrapper = setup({
+			thread: thread({
+				members: [
+					me,
+					client,
+				],
+			}),
+			selfMemberId: me.id,
+			messages: [
+				message({
+					sender: rejoined,
+				}),
+			],
+		});
+		expect(wrapper.find('.message-status').exists()).toBe(true);
+	});
+
 	it('shows a tombstone for deleted messages', () => {
 		const wrapper = setup({
 			messages: [

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

@@ -82,6 +82,7 @@ import { useChatScroll } from '../../../shared/composables/useChatScroll';
 import { useObserveHeightUntilStable } from '../../../shared/composables/useObserveHeightUntilStable';
 import { useChatsV2I18n } from '../../locale/useChatsV2I18n';
 import { collectGalleryImages } from '../../scripts/attachments';
+import { isSelfMessage } from '../../scripts/isSelfMessage';
 import { toHistoryItems } from '../../scripts/toHistoryItems';
 import {
 	type ChatHistoryProps,
@@ -136,8 +137,7 @@ const {
 	chatContainer: scrollContainer,
 	chatContent: scrollContent,
 	messages: computed(() => props.messages),
-	isSelf: (message) =>
-		!!message.sender?.id && message.sender.id === props.selfMemberId,
+	isSelf: (message) => isSelfMessage(message, props.thread, 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),

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

@@ -3,12 +3,20 @@
     class="chat-message"
     :class="{ 'chat-message--outgoing': isOutgoing }"
   >
-    <wt-avatar
+    <wt-tooltip
       class="chat-message__avatar"
-      size="sm"
-      :src="avatarUrl"
-      :username="authorName"
-    />
+      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"
@@ -44,7 +52,7 @@
 </template>
 
 <script setup lang="ts">
-import { WtAvatar } from '@webitel/ui-sdk/components';
+import { WtAvatar, WtTooltip } from '@webitel/ui-sdk/components';
 import { computed } from 'vue';
 
 import { useChatsV2I18n } from '../../../locale/useChatsV2I18n';

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

@@ -5,13 +5,21 @@
   >
     <span class="chat-system-notice__line" />
     <span class="chat-system-notice__content typo-caption">
-      <wt-avatar
+      <wt-tooltip
         v-if="notice.actor"
         class="chat-system-notice__avatar"
-        size="2xs"
-        :src="props.resolveAvatarUrl?.(notice.actor)"
-        :username="actorName"
-      />
+        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"
@@ -23,7 +31,7 @@
 </template>
 
 <script setup lang="ts">
-import { WtAvatar } from '@webitel/ui-sdk/components';
+import { WtAvatar, WtTooltip } from '@webitel/ui-sdk/components';
 import { computed } from 'vue';
 
 import { useChatsV2I18n } from '../../../locale/useChatsV2I18n';
@@ -49,8 +57,11 @@ 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(
-	() => participantName(notice.value.actor) || t('systemNotice.system'),
+	() => actorRealName.value || t('systemNotice.system'),
 );
 
 const text = computed(() =>