@webitel/ui-chats 26.8.4 → 26.8.6

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-chats",
-	"version": "26.8.4",
+	"version": "26.8.6",
 	"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-composer/chat-composer.vue

@@ -40,6 +40,7 @@
           v-if="hasAction(ChatComposerAction.Emoji)"
           :popup-teleport-to="`#${composerId}`"
           :rounded="false"
+          variant="text"
           size="sm"
           :title="t('composer.emoji')"
           @insert-emoji="insertText"
@@ -54,6 +55,7 @@
         class="chat-composer__send"
         icon="chat-send"
         color="secondary"
+        size="sm"
         :loading="isSending"
         :disabled="isLocked || !canSend"
         :title="t('composer.send')"

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),
@@ -224,8 +224,7 @@ watch(
   width: 100%;
   overflow-x: hidden;
   overflow-y: auto;
-  padding-right: var(--scrollbar-width);
-  scrollbar-gutter: stable both-edges;
+  scrollbar-gutter: stable;
 }
 
 .chat-history__content {
@@ -233,6 +232,8 @@ watch(
   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);
+  /* the scrollbar sits a root gap away from the messages, as in DES-730 */
+  padding-right: calc(var(--wt-ws-chat-window-sizes-root-padding-x) + var(--wt-ws-chat-window-sizes-root-gap));
 }
 
 .chat-history__sentinel {

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

@@ -33,4 +33,10 @@ const label = computed(() =>
   display: flex;
   justify-content: center;
 }
+
+/* DES-730 draws the chip a step lighter than the default secondary; the
+   surface palette does not flip with the theme, so dark keeps the default */
+:global(:root:not(.theme--dark)) .chat-date-divider {
+  --p-chip-secondary-background: var(--p-surface-50);
+}
 </style>

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"
@@ -32,19 +40,19 @@
           {{ t('history.unsupportedMessage') }}
         </p>
       </template>
-      <div class="chat-message__meta typo-caption">
-        <span v-if="time">{{ time }}</span>
+      <div class="chat-message__meta typo-body-2">
         <message-status
           v-if="status"
           :status="status"
         />
+        <span v-if="time">{{ time }}</span>
       </div>
     </div>
   </div>
 </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';
@@ -96,6 +104,8 @@ const status = computed(() =>
 
 <style scoped>
 .chat-message {
+  --chat-message-tail-size: 8px;
+
   display: flex;
   align-items: flex-start;
   gap: var(--wt-ws-chat-window-sizes-message-item-gap);
@@ -114,25 +124,49 @@ const status = computed(() =>
   display: flex;
   flex-direction: column;
   gap: var(--wt-ws-chat-window-sizes-message-item-chat-message-gap);
+  position: relative;
   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);
+  background: var(--chat-message-bubble-background);
   color: var(--wt-ws-chat-window-colors-message-item-chat-message-client-color);
+  --chat-message-bubble-background: var(--wt-ws-chat-window-colors-message-item-chat-message-client-background);
 }
 
-/* the corner next to the avatar is square, as in DES-730 */
+/* the corner next to the avatar is square and carries an 8px tail, as in DES-730 */
 .chat-message:not(.chat-message--outgoing) .chat-message__bubble {
+  margin-left: var(--chat-message-tail-size);
   border-top-left-radius: 0;
 }
 
 .chat-message--outgoing .chat-message__bubble {
+  margin-right: var(--chat-message-tail-size);
   border-top-right-radius: 0;
-  background: var(--wt-ws-chat-window-colors-message-item-chat-message-agent-background);
+  --chat-message-bubble-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);
 }
 
+/* the tail is the bubble colour left over once a circle is cut out of the
+   square beside the bubble's square corner */
+.chat-message__bubble::before {
+  position: absolute;
+  top: 0;
+  width: var(--chat-message-tail-size);
+  height: var(--chat-message-tail-size);
+  content: '';
+}
+
+.chat-message:not(.chat-message--outgoing) .chat-message__bubble::before {
+  right: 100%;
+  background: radial-gradient(circle 7.333px at 0.667px 7.333px, transparent 7.2px, var(--chat-message-bubble-background) 7.45px);
+}
+
+.chat-message--outgoing .chat-message__bubble::before {
+  left: 100%;
+  background: radial-gradient(circle 7.333px at 7.333px 7.333px, transparent 7.2px, var(--chat-message-bubble-background) 7.45px);
+}
+
 .chat-message__placeholder {
   margin: 0;
   font-style: italic;

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(() =>

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

@@ -8,6 +8,7 @@
     </div>
     <wt-rounded-action
       icon="arrow-down"
+      size="sm"
       rounded
       @click="emit('scroll')"
     />
@@ -34,7 +35,7 @@ const emit = defineEmits<{
 <style scoped>
 .scroll-to-bottom-btn {
   position: absolute;
-  right: calc(var(--scrollbar-width) + var(--spacing-xs));
+  right: calc(var(--scrollbar-width) + var(--wt-ws-chat-window-sizes-root-gap) + var(--spacing-xs));
   bottom: var(--spacing-xs);
   display: flex;
   flex-direction: column;