@webitel/ui-chats 0.0.17 → 0.0.19

package/package.json

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

package/src/ui/chat-footer/modules/user-input/components/chat-text-field.vue

@@ -1,6 +1,7 @@
 <template>
   <wt-textarea
     ref="chatTextFieldInput"
+    class="chat-text-field"
     :model-value="textModel"
     :size="size"
     autoresize
@@ -48,3 +49,12 @@ function insertAtCursor(text: string) {
 }
 </script>
 
+<style scoped>
+.chat-text-field :deep(textarea) {
+  /* https://webitel.atlassian.net/browse/WTEL-7388
+   fixed styles after component migrated on vuetify */
+  max-height: 100%;
+  min-height: auto;
+  overflow: auto !important;
+}
+</style>

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

@@ -3,6 +3,7 @@ export const ChatAction = {
 	AttachFiles: "attachFiles",
 	EmojiPicker: "emojiPicker",
 	QuickReplies: "quickReplies",
+	LoadNextMessages: "loadNextMessages",
 } as const;
 
 export type ChatAction = (typeof ChatAction)[keyof typeof ChatAction];

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/chat-observer.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="chat-observer">
+    <wt-intersection-observer
+      :can-load-more="props.next"
+      :loading="props.isLoading"
+      @next="emit(ChatAction.LoadNextMessages)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ChatAction } from "../../chat-footer/modules/user-input/enums/ChatAction.enum";
+
+const props = withDefaults(
+	defineProps<{
+		next?: boolean;
+		isLoading?: boolean;
+	}>(),
+	{
+		next: false,
+		isLoading: false,
+	},
+);
+
+const emit = defineEmits<(e: typeof ChatAction.LoadNextMessages) => void>();
+</script>
+
+<style scoped>
+/* @author ye.pohranichna */
+/* reserve height for the loader to avoid unnecessary chat height changes https://webitel.atlassian.net/browse/WTEL-5366 */
+.chat-observer {
+  /* observer loader height @author ye.pohranichna */
+  min-height: calc(var(--spacing-lg)*2 + var(--icon-md-size));
+  /* @author ye.pohranichna */
+  /* to place observer at the bottom of observer wrapper (closer to messages) */
+  display: flex;
+  align-items: flex-end;
+}
+</style>

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

@@ -9,12 +9,19 @@
         @scroll="handleChatScroll"
         @resize="handleChatResize"
       >
+        <chat-observer
+          v-if="props.next"
+          :next="props.next"
+          :loading="props.isLoading"
+          @next="emit(ChatAction.LoadNextMessages)"
+          />
         <chat-message
           v-for="(message, index) of props.messages"
           :key="message.id"
           :message="message"
           :show-avatar="showAvatar(index)"
           :without-avatars="props.withoutAvatars"
+          @[MessageAction.ClickOnImage]="clickOnImage(message)"
         >
           <template #before-message>
             <chat-date-divider
@@ -36,12 +43,15 @@
 import type { Emitter } from "mitt";
 import { computed, inject, nextTick, onMounted, useTemplateRef } from "vue";
 
+import { ChatAction } from "../../chat-footer/modules/user-input/enums/ChatAction.enum";
 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 ChatObserver from "./chat-observer.vue";
 import ScrollToBottomBtn from "./scroll-to-bottom-btn.vue";
 
 const uiChatsEmitter = inject<Emitter<UiChatsEmitterEvents>>("uiChatsEmitter");
@@ -49,13 +59,19 @@ const uiChatsEmitter = inject<Emitter<UiChatsEmitterEvents>>("uiChatsEmitter");
 const props = withDefaults(
 	defineProps<{
 		messages: ChatMessageType[];
+		next?: boolean;
+		isLoading?: boolean;
 		withoutAvatars?: boolean;
 	}>(),
 	{
+		next: false,
+		isLoading: false,
 		withoutAvatars: false,
 	},
 );
 
+const emit = defineEmits<(e: typeof ChatAction.LoadNextMessages) => void>();
+
 const messagesContainer = useTemplateRef("messages-container");
 
 const { showAvatar, showChatDate } = useChatMessages(props.messages);
@@ -75,6 +91,10 @@ function focusOnInput() {
 	uiChatsEmitter?.on("focusOnTextField", focus);
 }
 
+function clickOnImage(message: ChatMessageType) {
+	uiChatsEmitter!.emit("clickChatMessageImage", message);
+}
+
 onMounted(() => {
 	nextTick(() => {
 		scrollToBottom();
@@ -104,4 +124,5 @@ onMounted(() => {
   scrollbar-gutter: stable both-edges;
   gap: var(--spacing-xs);
 }
+
 </style>

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

@@ -10,7 +10,7 @@
 
     <div class="chat-message__content">
       <div
-        v-if="withoutAvatars"
+        v-if="!props.withoutAvatars"
         class="chat-message__avatar-wrapper"
       >
         <message-avatar
@@ -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

@@ -12,7 +12,10 @@
           />
           <chat-messages-container
             :messages="props.messages"
+            :next="props.canLoadNextMessages"
+            :is-loading="props.isNextMessagesLoading"
             :without-avatars="props.withoutAvatars"
+            @[ChatAction.LoadNextMessages]="emit(ChatAction.LoadNextMessages)"
             @[ChatAction.AttachFiles]="sendFile"
           />
         </slot>
@@ -58,6 +61,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";
@@ -67,6 +71,8 @@ const props = withDefaults(
 		messages: ChatMessageType[];
 		chatActions?: ChatAction[];
 		size?: ComponentSize;
+		canLoadNextMessages?: boolean; // 'next'
+		isNextMessagesLoading?: boolean;
 		withoutAvatars?: boolean;
 	}>(),
 	{
@@ -75,6 +81,8 @@ const props = withDefaults(
 		chatActions: () => [
 			ChatAction.SendMessage,
 		],
+		canLoadNextMessages: false,
+		isNextMessagesLoading: false,
 	},
 );
 
@@ -89,6 +97,8 @@ const emit = defineEmits<{
 		files: File[],
 		options: ResultCallbacks,
 	): void;
+	(e: typeof ChatAction.LoadNextMessages): void;
+	(e: typeof MessageAction.ClickOnImage, message: ChatMessageType): void;
 }>();
 
 const slots = defineSlots<
@@ -103,6 +113,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/components/chat-observer.vue.d.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    next?: boolean;
+    isLoading?: 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;
+}>, {
+    next: boolean;
+    isLoading: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,10 +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, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+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/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>;