@webitel/ui-chats 0.1.26 → 0.1.28

package/package.json

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

package/src/ui/messaging/components/chat-observer.vue

@@ -2,23 +2,24 @@
   <div class="chat-observer">
     <wt-intersection-observer
       :can-load-more="props.next"
-      :loading="props.isLoading"
+      :loading="props.loading"
       @next="emit(ChatAction.LoadNextMessages)"
     />
   </div>
 </template>
 
 <script setup lang="ts">
+import { WtIntersectionObserver } from '@webitel/ui-sdk/components';
 import { ChatAction } from '../../chat-footer/modules/user-input/enums/ChatAction.enum';
 
 const props = withDefaults(
 	defineProps<{
 		next?: boolean;
-		isLoading?: boolean;
+		loading?: boolean;
 	}>(),
 	{
 		next: false,
-		isLoading: false,
+		loading: false,
 	},
 );
 
@@ -34,6 +35,8 @@ const emit = defineEmits<(e: typeof ChatAction.LoadNextMessages) => void>();
   /* @author ye.pohranichna */
   /* to place observer at the bottom of observer wrapper (closer to messages) */
   display: flex;
-  align-items: flex-end;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
 }
 </style>

package/src/ui/messaging/components/the-messages-container.vue

@@ -13,7 +13,7 @@
         v-if="props.next"
         :next="props.next"
         :loading="props.isLoading"
-        @[ChatAction.LoadNextMessages]="emit(ChatAction.LoadNextMessages)"
+        @[ChatAction.LoadNextMessages]="handleLoadNextMessages"
       />
       <chat-message
         v-for="(message, index) of props.messages"
@@ -94,13 +94,19 @@ const {
 	showScrollToBottomBtn,
 	newUnseenMessagesCount,
 	scrollToBottom,
+	loadNextMessages,
 	handleChatScroll,
 	handleChatResize,
 } = useChatScroll(
 	messagesContainer,
 	computed(() => props.messages), // props values reactivity https://stackoverflow.com/questions/72408463/use-props-in-composables-vue3 @author ye.pohranichna
+	computed(() => props.isLoading),
 );
 
+function handleLoadNextMessages() {
+	loadNextMessages(props.next, () => emit(ChatAction.LoadNextMessages));
+}
+
 function focusOnInput() {
 	uiChatsEmitter?.on('focusOnTextField', focus);
 }

package/src/ui/messaging/composables/useChatScroll.ts

@@ -1,11 +1,19 @@
 import { useScroll } from '@vueuse/core';
-import { type ComputedRef, computed, type Ref, ref, watch } from 'vue';
+import {
+	type ComputedRef,
+	computed,
+	nextTick,
+	type Ref,
+	ref,
+	watch,
+} from 'vue';
 
 import type { ChatMessageType } from '../types/ChatMessage.types';
 
 export const useChatScroll = (
 	element: Ref<HTMLElement | null> = null,
 	messages: Ref<ChatMessageType[]> | ComputedRef<ChatMessageType[]>,
+	isLoading?: Ref<boolean> | ComputedRef<boolean>,
 ) => {
 	/* @author ye.pohranichna
   why 136px? because: https://webitel.atlassian.net/browse/WTEL-7136 */
@@ -17,6 +25,8 @@ export const useChatScroll = (
 	/* @author ye.pohranichna
     the distance where the scrollToBottomBtn must be shown/hide. */
 	const threshold = ref<number>(defaultThreshold);
+	const isLoadingNextMessages = ref<boolean>(false);
+	const lastVisibleMessageEl = ref<HTMLElement | null>(null);
 
 	const isLastMessageIsMy = computed<boolean>(
 		() => lastMessage.value?.member?.self,
@@ -80,6 +90,25 @@ export const useChatScroll = (
 		showScrollToBottomBtn.value = false;
 	};
 
+	const getTopMessageEl = () => {
+		// help to fix chat viewing position when new messages was loaded
+		if (!element.value?.children) return;
+		lastVisibleMessageEl.value =
+			element.value?.getElementsByClassName('chat-message')[0] ?? null;
+	};
+
+	const loadNextMessages = (
+		canLoadMore: boolean | undefined,
+		onLoadNextMessages: () => void,
+	) => {
+		if (isLoadingNextMessages.value || isLoading?.value || !canLoadMore) return;
+
+		isLoadingNextMessages.value = true;
+		getTopMessageEl();
+
+		onLoadNextMessages();
+	};
+
 	watch(
 		() => messages.value?.length,
 		(newValue, oldValue) => {
@@ -91,10 +120,27 @@ export const useChatScroll = (
 		},
 	);
 
+	watch(
+		() => isLoading?.value,
+		async (loading) => {
+			if (loading || !isLoadingNextMessages.value) return;
+
+			await nextTick();
+
+			element.value?.scrollTo({
+				top: lastVisibleMessageEl.value?.offsetTop,
+				behavior: 'auto',
+			});
+
+			isLoadingNextMessages.value = false;
+		},
+	);
+
 	return {
 		showScrollToBottomBtn,
 		newUnseenMessagesCount,
 		scrollToBottom,
+		loadNextMessages,
 		handleChatScroll,
 		handleChatResize,
 	};

package/src/ui/messaging/modules/message/components/chat-message.vue

@@ -108,7 +108,9 @@ const isSelfSide = computed<boolean>(
 const isBot = computed<boolean>(() => props.message.member?.type === 'bot');
 
 const getClientUsername = computed<string>(() => {
-	return isSelfSide.value ? props?.agentName : props.username;
+	if (isSelfSide.value) return isSelfSide?.value;
+
+	return props.username || props.message.member?.name;
 });
 
 function handlePlayerInitialize(player) {

package/types/ui/messaging/components/chat-observer.vue.d.ts

@@ -1,6 +1,6 @@
 type __VLS_Props = {
     next?: boolean;
-    isLoading?: boolean;
+    loading?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     loadNextMessages: () => any;
@@ -8,7 +8,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     onLoadNextMessages?: () => any;
 }>, {
     next: boolean;
-    isLoading: boolean;
+    loading: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/types/ui/messaging/composables/useChatScroll.d.ts

@@ -1,9 +1,10 @@
 import { type ComputedRef, type Ref } from 'vue';
 import type { ChatMessageType } from '../types/ChatMessage.types';
-export declare const useChatScroll: (element: Ref<HTMLElement | null>, messages: Ref<ChatMessageType[]> | ComputedRef<ChatMessageType[]>) => {
+export declare const useChatScroll: (element: Ref<HTMLElement | null>, messages: Ref<ChatMessageType[]> | ComputedRef<ChatMessageType[]>, isLoading?: Ref<boolean> | ComputedRef<boolean>) => {
     showScrollToBottomBtn: Ref<boolean, boolean>;
     newUnseenMessagesCount: Ref<number, number>;
     scrollToBottom: (behavior?: ScrollBehavior) => void;
+    loadNextMessages: (canLoadMore: boolean | undefined, onLoadNextMessages: () => void) => void;
     handleChatScroll: () => void;
     handleChatResize: () => void;
 };