@webitel/ui-chats 0.0.16 → 0.0.18

package/package.json

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

package/src/ui/index.ts

@@ -1,3 +1,4 @@
 export { ChatAction } from "./chat-footer/modules/user-input/enums/ChatAction.enum";
+export { MessageAction } from "./messaging/modules/message/enums/MessageAction.enum";
 export type { ChatMessageType } from "./messaging/types/ChatMessage.types";
 export { default as ChatContainer } from "./the-chat-container.vue";

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

@@ -15,6 +15,7 @@
           :message="message"
           :show-avatar="showAvatar(index)"
           :without-avatars="props.withoutAvatars"
+          @[MessageAction.ClickOnImage]="clickOnImage(message)"
         >
           <template #before-message>
             <chat-date-divider
@@ -26,7 +27,7 @@
       </div>
       <scroll-to-bottom-btn
         v-if="showScrollToBottomBtn"
-        :new-message-count="newUnseenMessages"
+        :new-message-count="newUnseenMessagesCount"
         @scroll="scrollToBottom('smooth')"
       />
     </section>
@@ -34,12 +35,13 @@
 
 <script setup lang="ts">
 import type { Emitter } from "mitt";
-import { inject, useTemplateRef } from "vue";
+import { computed, inject, nextTick, onMounted, useTemplateRef } from "vue";
 
 import type { UiChatsEmitterEvents } from "../../utils/emitter";
 import { useChatScroll } from "../composables/useChatScroll";
 import ChatMessage from "../modules/message/components/chat-message.vue";
 import { useChatMessages } from "../modules/message/composables/useChatMessage";
+import { MessageAction } from "../modules/message/enums/MessageAction.enum";
 import type { ChatMessageType } from "../types/ChatMessage.types";
 import ChatDateDivider from "./chat-date-divider.vue";
 import ScrollToBottomBtn from "./scroll-to-bottom-btn.vue";
@@ -62,15 +64,28 @@ const { showAvatar, showChatDate } = useChatMessages(props.messages);
 
 const {
 	showScrollToBottomBtn,
-	newUnseenMessages,
+	newUnseenMessagesCount,
 	scrollToBottom,
 	handleChatScroll,
 	handleChatResize,
-} = useChatScroll(messagesContainer, props.messages);
+} = useChatScroll(
+	messagesContainer,
+	computed(() => props.messages),
+);
 
 function focusOnInput() {
 	uiChatsEmitter?.on("focusOnTextField", focus);
 }
+
+function clickOnImage(message: ChatMessageType) {
+	uiChatsEmitter!.emit("clickChatMessageImage", message);
+}
+
+onMounted(() => {
+	nextTick(() => {
+		scrollToBottom();
+	});
+});
 </script>
 
 <style scoped lang="scss">

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

@@ -5,27 +5,23 @@ import type { ChatMessageType } from "../types/ChatMessage.types";
 
 export const useChatScroll = (
 	element: Ref<HTMLElement | null> = null,
-	chatMessages: ChatMessageType[] = [],
+	messages: Ref<ChatMessageType[]> | ComputedRef<ChatMessageType[]>,
 ) => {
+	/* @author ye.pohranichna
+  why 136px? because: https://webitel.atlassian.net/browse/WTEL-7136 */
 	const defaultThreshold = 136;
-	const { arrivedState } = useScroll(element.value);
+	const { arrivedState } = useScroll(element);
 
-	const newUnseenMessages = ref<number>(0);
+	const newUnseenMessagesCount = ref<number>(0);
 	const showScrollToBottomBtn = ref<boolean>(false);
 	/* @author ye.pohranichna
-    the distance where the scrollToBottomBtn must be shown/hide.
-    why defaultThreshold=136px? because: https://webitel.atlassian.net/browse/WTEL-7136 */
+    the distance where the scrollToBottomBtn must be shown/hide. */
 	const threshold = ref<number>(defaultThreshold);
-	const messages = ref<ChatMessageType[]>(chatMessages);
-
-	const lastMessage = computed<ChatMessageType>(
-		() => messages.value[messages.value?.length - 1],
-	);
 
-	const isLastMessageIsMy = computed<boolean>(() =>
-		Boolean(lastMessage.value?.member?.self),
+	const isLastMessageIsMy = computed<boolean>(
+		() => lastMessage.value?.member?.self,
 	);
-
+	const lastMessage = computed<ChatMessageType>(() => messages.value?.at(-1));
 	const handleChatScroll = () => {
 		const wrapper = element.value;
 		if (!wrapper) return;
@@ -42,13 +38,23 @@ export const useChatScroll = (
 	};
 
 	const handleShowScrollToBottomBtn = (el: HTMLElement) => {
-		resetScrollToBottomBtn();
+		if (arrivedState.bottom) {
+			resetScrollToBottomBtn();
+			return;
+			/* @author ye.pohranichna
+          quit the function because we are already at the bottom */
+		}
 
 		const { scrollTop, scrollHeight, clientHeight } = el;
 		const distanceFromBottom = scrollHeight - (scrollTop + clientHeight);
 		showScrollToBottomBtn.value = distanceFromBottom > threshold.value;
 	};
 
+	const resetScrollToBottomBtn = (): void => {
+		newUnseenMessagesCount.value = 0;
+		showScrollToBottomBtn.value = false;
+	};
+
 	const updateThreshold = (el: HTMLElement) => {
 		/* @author ye.pohranichna
          need to update if clientHeight was changed
@@ -56,23 +62,11 @@ export const useChatScroll = (
 		threshold.value = Math.max(defaultThreshold, el.clientHeight * 0.3);
 	};
 
-	const resetScrollToBottomBtn = (): void => {
-		if (arrivedState.bottom && newUnseenMessages.value) {
-			/* @author ye.pohranichna
-			hide the btn and reset new messages count, when we scroll to the bottom without btn */
-			newUnseenMessages.value = 0;
-			showScrollToBottomBtn.value = false;
-			/* @author ye.pohranichna
-			quit the function because we are already at the bottom */
-			return;
-		}
-	};
-
-	const scrollToBottomAfterNewMessage = () => {
+	const handleBtnAfterNewMessage = () => {
 		if (arrivedState.bottom || isLastMessageIsMy.value) {
 			scrollToBottom("smooth");
 		} else {
-			newUnseenMessages.value += 1;
+			newUnseenMessagesCount.value += 1;
 		}
 	};
 
@@ -82,7 +76,7 @@ export const useChatScroll = (
 			behavior: behavior === "instant" ? "auto" : behavior,
 		});
 
-		newUnseenMessages.value = 0;
+		newUnseenMessagesCount.value = 0;
 		showScrollToBottomBtn.value = false;
 	};
 
@@ -90,7 +84,7 @@ export const useChatScroll = (
 		() => messages.value?.length,
 		(newValue, oldValue) => {
 			const newMessageReceived = newValue - oldValue === 1; // when chat have just 1 new message @author ye.pohranichna
-			if (newMessageReceived) scrollToBottomAfterNewMessage();
+			if (newMessageReceived) handleBtnAfterNewMessage();
 		},
 		{
 			flush: "post",
@@ -99,7 +93,7 @@ export const useChatScroll = (
 
 	return {
 		showScrollToBottomBtn,
-		newUnseenMessages,
+		newUnseenMessagesCount,
 		scrollToBottom,
 		handleChatScroll,
 		handleChatResize,

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

@@ -32,7 +32,7 @@
         <message-image
           v-else-if="image"
           :file="image"
-          @open="emit('open-image')"
+          @open="emit(MessageAction.ClickOnImage)"
         />
         <message-document
           v-else-if="document"
@@ -58,6 +58,7 @@ import { computed, defineEmits, defineProps, inject } from "vue";
 
 import type { ChatMessageType } from "../../../types/ChatMessage.types";
 import { useChatMessageFile } from "../composables/useChatMessageFile";
+import { MessageAction } from "../enums/MessageAction.enum";
 import MessageAvatar from "./details/chat-message-avatar.vue";
 import MessageBlockedError from "./details/chat-message-blocked-error.vue";
 import MessageDocument from "./details/chat-message-document.vue";
@@ -81,10 +82,8 @@ const props = withDefaults(
 );
 
 const emit = defineEmits<{
-	"open-image": [];
-	"initialized-player": [
-		object,
-	];
+	(e: typeof MessageAction.ClickOnImage): void;
+	(e: typeof MessageAction.InitializedPlayer, player: object): void;
 }>();
 
 const size = inject<ComponentSize>("size");
@@ -108,7 +107,7 @@ const getClientUsername = computed<string>(() => {
 });
 
 function handlePlayerInitialize(player) {
-	emit("initialized-player", {
+	emit(MessageAction.InitializedPlayer, {
 		player,
 	});
 }

package/src/ui/messaging/modules/message/enums/MessageAction.enum.ts

@@ -0,0 +1,6 @@
+export const MessageAction = {
+	ClickOnImage: "clickOnImage",
+	InitializedPlayer: "initializedPlayer",
+} as const;
+
+export type MessageAction = (typeof MessageAction)[keyof typeof MessageAction];

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

@@ -58,6 +58,7 @@ import {
 import Dropzone from "./messaging/components/dropzone.vue";
 import ChatMessagesContainer from "./messaging/components/the-chat-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";
 import { createUiChatsEmitter } from "./utils/emitter";
 import type { ResultCallbacks } from "./utils/ResultCallbacks.types";
@@ -89,6 +90,7 @@ const emit = defineEmits<{
 		files: File[],
 		options: ResultCallbacks,
 	): void;
+	(e: typeof MessageAction.ClickOnImage, message: ChatMessageType): void;
 }>();
 
 const slots = defineSlots<
@@ -103,6 +105,9 @@ const uiChatsEmitter = createUiChatsEmitter();
 provide("size", props.size);
 provide("uiChatsEmitter", uiChatsEmitter);
 
+uiChatsEmitter?.on("clickChatMessageImage", (message) => {
+	emit(MessageAction.ClickOnImage, message);
+});
 const { isDropzoneVisible, handleDragLeave } = useDropzoneHandlers();
 
 const draft = ref<string>("");

package/src/ui/utils/emitter.ts

@@ -1,10 +1,13 @@
 import mitt from "mitt";
 
+import { ChatMessageType } from "../../../types/ui";
+
 export type UiChatsEmitterEvents = {
 	insertAtCursor: {
 		text: string;
 	};
 	focusOnTextField: undefined;
+	clickChatMessageImage: ChatMessageType;
 };
 
 export const createUiChatsEmitter = () => {

package/types/ui/chat-footer/modules/user-input/enums/ChatAction.enum.d.ts

@@ -1,10 +1,10 @@
 export declare const ChatAction: {
-    readonly SendMessage: "sendMessage";
-    readonly AttachFiles: "attachFiles";
-    readonly EmojiPicker: "emojiPicker";
-    readonly QuickReplies: "quickReplies";
+	readonly SendMessage: "sendMessage";
+	readonly AttachFiles: "attachFiles";
+	readonly EmojiPicker: "emojiPicker";
+	readonly QuickReplies: "quickReplies";
 };
 export type ChatAction = (typeof ChatAction)[keyof typeof ChatAction];
 export type SharedActionSlots = {
-    [key in `action:${ChatAction}`]?: () => any;
+	[key in `action:${ChatAction}`]?: () => any;
 };

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

@@ -1,8 +1,8 @@
-import { type Ref } from "vue";
+import { type ComputedRef, type Ref } from "vue";
 import type { ChatMessageType } from "../types/ChatMessage.types";
-export declare const useChatScroll: (element?: Ref<HTMLElement | null>, chatMessages?: ChatMessageType[]) => {
+export declare const useChatScroll: (element: Ref<HTMLElement | null>, messages: Ref<ChatMessageType[]> | ComputedRef<ChatMessageType[]>) => {
     showScrollToBottomBtn: Ref<boolean, boolean>;
-    newUnseenMessages: Ref<number, number>;
+    newUnseenMessagesCount: Ref<number, number>;
     scrollToBottom: (behavior?: ScrollBehavior) => void;
     handleChatScroll: () => void;
     handleChatResize: () => void;

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

@@ -11,12 +11,12 @@ type __VLS_Slots = {} & {
 } & {
     'after-message'?: (props: typeof __VLS_44) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "open-image": () => any;
-    "initialized-player": (args_0: object) => any;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    clickOnImage: () => any;
+    initializedPlayer: (player: object) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onOpen-image"?: () => any;
-    "onInitialized-player"?: (args_0: object) => any;
+    onClickOnImage?: () => any;
+    onInitializedPlayer?: (player: object) => any;
 }>, {
     username: string;
     showAvatar: boolean;

package/types/ui/messaging/modules/message/enums/MessageAction.enum.d.ts

@@ -0,0 +1,5 @@
+export declare const MessageAction: {
+    readonly ClickOnImage: "clickOnImage";
+    readonly InitializedPlayer: "initializedPlayer";
+};
+export type MessageAction = (typeof MessageAction)[keyof typeof MessageAction];

package/types/ui/messaging/types/ChatMessage.types.d.ts

@@ -1,44 +1,44 @@
 export interface ChatMessageType {
-    id: number;
-    date?: number;
-    file?: ChatMessageFile;
-    member: ChatMember;
-    peer?: ChatMember;
-    chat?: ChatMessageChatInfo;
-    createdAt: number;
-    channelId?: string;
-    updatedAt?: number;
-    contact?: null | ContactInfo;
-    text?: string;
+	id: number;
+	date?: number;
+	file?: ChatMessageFile;
+	member: ChatMember;
+	peer?: ChatMember;
+	chat?: ChatMessageChatInfo;
+	createdAt: number;
+	channelId?: string;
+	updatedAt?: number;
+	contact?: null | ContactInfo;
+	text?: string;
 }
 export type ContactInfo = {
-    id: string;
-    name?: string;
+	id: string;
+	name?: string;
 };
 export type ChatMessageFile = {
-    id?: string;
-    name?: string;
-    size?: string;
-    mime?: string;
-    url?: string;
-    streamUrl?: string;
+	id?: string;
+	name?: string;
+	size?: string;
+	mime?: string;
+	url?: string;
+	streamUrl?: string;
 };
 export type ChatMember = {
-    id: number;
-    name: string;
-    type: string;
-    userId?: number;
-    externalId?: string;
-    via?: ChatVia;
-    self?: boolean;
+	id: number;
+	name: string;
+	type: string;
+	userId?: number;
+	externalId?: string;
+	via?: ChatVia;
+	self?: boolean;
 };
 export type ChatMessageChatInfo = {
-    id: string;
-    via: ChatVia;
+	id: string;
+	via: ChatVia;
 };
 export type ChatVia = {
-    id: number;
-    name: string;
-    type: string;
-    messenger?: string;
+	id: number;
+	name: string;
+	type: string;
+	messenger?: string;
 };

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

@@ -1,33 +1,58 @@
 import { ComponentSize } from "@webitel/ui-sdk/enums";
-import { ChatAction, type SharedActionSlots } from "./chat-footer/modules/user-input/enums/ChatAction.enum";
+import {
+	ChatAction,
+	type SharedActionSlots,
+} from "./chat-footer/modules/user-input/enums/ChatAction.enum";
 import type { ChatMessageType } from "./messaging/types/ChatMessage.types";
 import type { ResultCallbacks } from "./utils/ResultCallbacks.types";
 type __VLS_Props = {
-    messages: ChatMessageType[];
-    chatActions?: ChatAction[];
-    size?: ComponentSize;
-    withoutAvatars?: boolean;
+	messages: ChatMessageType[];
+	chatActions?: ChatAction[];
+	size?: ComponentSize;
+	withoutAvatars?: boolean;
 };
 type __VLS_Slots = {
-    main: () => any;
-    footer: () => any;
+	main: () => any;
+	footer: () => any;
 } & SharedActionSlots;
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "action:sendMessage": (text: string, options: ResultCallbacks) => any;
-    "action:attachFiles": (files: File[], options: ResultCallbacks) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onAction:sendMessage"?: (text: string, options: ResultCallbacks) => any;
-    "onAction:attachFiles"?: (files: File[], options: ResultCallbacks) => any;
-}>, {
-    size: ComponentSize;
-    withoutAvatars: boolean;
-    chatActions: ChatAction[];
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<
+	__VLS_Props,
+	{},
+	{},
+	{},
+	{},
+	import("vue").ComponentOptionsMixin,
+	import("vue").ComponentOptionsMixin,
+	{} & {
+		"action:sendMessage": (text: string, options: ResultCallbacks) => any;
+		"action:attachFiles": (files: File[], options: ResultCallbacks) => any;
+	},
+	string,
+	import("vue").PublicProps,
+	Readonly<__VLS_Props> &
+		Readonly<{
+			"onAction:sendMessage"?: (text: string, options: ResultCallbacks) => any;
+			"onAction:attachFiles"?: (files: File[], options: ResultCallbacks) => any;
+		}>,
+	{
+		size: ComponentSize;
+		withoutAvatars: boolean;
+		chatActions: ChatAction[];
+	},
+	{},
+	{},
+	{},
+	string,
+	import("vue").ComponentProvideOptions,
+	false,
+	{},
+	any
+>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
+	new (): {
+		$slots: S;
+	};
 };

package/types/ui/utils/emitter.d.ts

@@ -1,7 +1,9 @@
+import { ChatMessageType } from "../../../types/ui";
 export type UiChatsEmitterEvents = {
     insertAtCursor: {
         text: string;
     };
     focusOnTextField: undefined;
+    clickChatMessageImage: ChatMessageType;
 };
 export declare const createUiChatsEmitter: () => import("mitt").Emitter<UiChatsEmitterEvents>;