@webitel/ui-chats 0.0.19 → 0.0.21

package/package.json

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

package/src/ui/messaging/components/{the-chat-messages-container.vue → the-messages-container.vue}

@@ -13,7 +13,7 @@
           v-if="props.next"
           :next="props.next"
           :loading="props.isLoading"
-          @next="emit(ChatAction.LoadNextMessages)"
+          @[ChatAction.LoadNextMessages]="emit(ChatAction.LoadNextMessages)"
           />
         <chat-message
           v-for="(message, index) of props.messages"
@@ -95,10 +95,12 @@ function clickOnImage(message: ChatMessageType) {
 	uiChatsEmitter!.emit("clickChatMessageImage", message);
 }
 
-onMounted(() => {
-	nextTick(() => {
+onMounted(async () => {
+	/* TODO: add loader on all chat(in the-chat-container?) and remove timeout after that */
+	await nextTick();
+	setTimeout(() => {
 		scrollToBottom();
-	});
+	}, 500);
 });
 </script>
 

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

@@ -90,18 +90,15 @@ const size = inject<ComponentSize>("size");
 
 const { image, media, document } = useChatMessageFile(props.message.file);
 
-const isSelfMessage = computed<boolean>(
+const isSelfSide = computed<boolean>(
 	() => props.message.member?.self || props.message.member?.type === "webitel",
 );
-
 const isBot = computed<boolean>(
 	() =>
 		props.message.member?.type === "bot" ||
 		(!props.message.member?.type && !props.message.channelId),
 );
 
-const isSelfSide = computed<boolean>(() => isSelfMessage.value || isBot.value);
-
 const getClientUsername = computed<string>(() => {
 	return !isSelfSide.value ? props.username : ""; // need to show username avatar only for client
 });

package/src/ui/the-chat-container.vue

@@ -10,7 +10,7 @@
             @dragleave.prevent="handleDragLeave"
             @drop="sendFile"
           />
-          <chat-messages-container
+          <messages-container
             :messages="props.messages"
             :next="props.canLoadNextMessages"
             :is-loading="props.isNextMessagesLoading"
@@ -59,7 +59,7 @@ import {
 	type SharedActionSlots,
 } from "./chat-footer/modules/user-input/enums/ChatAction.enum";
 import Dropzone from "./messaging/components/dropzone.vue";
-import ChatMessagesContainer from "./messaging/components/the-chat-messages-container.vue";
+import MessagesContainer from "./messaging/components/the-messages-container.vue";
 import { useDropzoneHandlers } from "./messaging/composables/useDropzoneHandlers";
 import { MessageAction } from "./messaging/modules/message/enums/MessageAction.enum";
 import type { ChatMessageType } from "./messaging/types/ChatMessage.types";

package/types/ui/messaging/components/the-chat-messages-container.vue.d.ts

@@ -1,18 +1,40 @@
 import type { ChatMessageType } from "../types/ChatMessage.types";
 type __VLS_Props = {
-    messages: ChatMessageType[];
-    next?: boolean;
-    isLoading?: boolean;
-    withoutAvatars?: boolean;
+	messages: ChatMessageType[];
+	next?: boolean;
+	isLoading?: boolean;
+	withoutAvatars?: boolean;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    loadNextMessages: () => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onLoadNextMessages?: () => any;
-}>, {
-    withoutAvatars: boolean;
-    next: boolean;
-    isLoading: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<
+	__VLS_Props,
+	{},
+	{},
+	{},
+	{},
+	import("vue").ComponentOptionsMixin,
+	import("vue").ComponentOptionsMixin,
+	{} & {
+		loadNextMessages: () => any;
+	},
+	string,
+	import("vue").PublicProps,
+	Readonly<__VLS_Props> &
+		Readonly<{
+			onLoadNextMessages?: () => any;
+		}>,
+	{
+		withoutAvatars: boolean;
+		next: boolean;
+		isLoading: boolean;
+	},
+	{},
+	{},
+	{},
+	string,
+	import("vue").ComponentProvideOptions,
+	false,
+	{},
+	any
+>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/types/ui/messaging/components/the-messages-container.vue.d.ts

@@ -0,0 +1,18 @@
+import type { ChatMessageType } from "../types/ChatMessage.types";
+type __VLS_Props = {
+    messages: ChatMessageType[];
+    next?: boolean;
+    isLoading?: boolean;
+    withoutAvatars?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    loadNextMessages: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onLoadNextMessages?: () => any;
+}>, {
+    withoutAvatars: boolean;
+    next: boolean;
+    isLoading: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;