@webitel/ui-chats 0.0.18 → 0.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-chats",
-	"version": "0.0.18",
+	"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/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,6 +9,12 @@
         @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"
@@ -37,6 +43,7 @@
 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";
@@ -44,6 +51,7 @@ 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");
@@ -51,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);
@@ -110,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

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>
@@ -68,6 +71,8 @@ const props = withDefaults(
 		messages: ChatMessageType[];
 		chatActions?: ChatAction[];
 		size?: ComponentSize;
+		canLoadNextMessages?: boolean; // 'next'
+		isNextMessagesLoading?: boolean;
 		withoutAvatars?: boolean;
 	}>(),
 	{
@@ -76,6 +81,8 @@ const props = withDefaults(
 		chatActions: () => [
 			ChatAction.SendMessage,
 		],
+		canLoadNextMessages: false,
+		isNextMessagesLoading: false,
 	},
 );
 
@@ -90,6 +97,7 @@ const emit = defineEmits<{
 		files: File[],
 		options: ResultCallbacks,
 	): void;
+	(e: typeof ChatAction.LoadNextMessages): void;
 	(e: typeof MessageAction.ClickOnImage, message: ChatMessageType): void;
 }>();
 

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;