@webitel/ui-chats 0.0.4 → 0.0.5

package/package.json

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

package/src/ui/chat-footer/modules/user-input/components/actions/send-message-action.vue

@@ -12,9 +12,10 @@
 <script setup lang="ts">
 import type { ComponentSize } from "@webitel/ui-sdk/enums";
 import { inject } from "vue";
+
 import type { ChatAction } from "../../types/ChatAction.types";
 
 const _size = inject<ComponentSize>("size");
 
 const _emit = defineEmits<(e: typeof ChatAction.SendMessage) => void>();
-</script>
+</script>

package/src/ui/chat-footer/modules/user-input/components/chat-input-actions-bar.vue

@@ -9,8 +9,8 @@
       <component
        :is="actionComponent"
        :size="size"
-       @sendMessage="emit(ChatAction.SendMessage)"
-       @attachFiles="emit(ChatAction.AttachFiles, $event)"
+       @send-message="emit(ChatAction.SendMessage)"
+       @attach-files="emit(ChatAction.AttachFiles, $event)"
       />
     </slot>
   </section>
@@ -19,6 +19,7 @@
 <script setup lang="ts">
 import type { ComponentSize } from "@webitel/ui-sdk/enums";
 import { computed, inject } from "vue";
+
 import { ChatAction, type SharedActionSlots } from "../types/ChatAction.types";
 import AttachFilesAction from "./actions/attach-files-action.vue";
 import EmojiPickerAction from "./actions/emoji-picker-action.vue";
@@ -71,4 +72,4 @@ const _ShownActionComponentsList = computed(() => {
     flex: 1;
   }
 }
-</style>
+</style>

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

@@ -1,7 +1,7 @@
 <template>
     <wt-textarea
-        v-model="textModel"
         ref="chatTextFieldInput"
+        v-model="textModel"
         :size="size"
         autoresize
     />
@@ -41,4 +41,4 @@ function insertAtCursor(text: string) {
 	focus();
 	insertTextAtCursor(textareaEl.value!, text);
 }
-</script>
+</script>

package/src/ui/index.ts

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

package/src/ui/messaging/components/chat-date-divider.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="chat-date-divider">
+    {{ formattedDate }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { FormatDateMode } from "@webitel/ui-sdk/enums";
+import { formatDate } from "@webitel/ui-sdk/utils";
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+
+const props = defineProps<{
+	date: number | string;
+}>();
+
+const { t } = useI18n();
+
+const _formattedDate = computed<Date>(() => {
+	const chatDate = formatDate(+props.date, FormatDateMode.DATE);
+	const today = formatDate(Date.now(), FormatDateMode.DATE);
+
+	return chatDate === today ? t("reusable.today") : chatDate;
+});
+</script>
+
+<style lang="scss" scoped>
+  .chat-date-divider {
+    @extend %typo-subtitle-1;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+</style>

package/src/ui/messaging/components/scroll-to-bottom-btn.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="scroll-to-bottom-btn">
+
+    <div
+      v-show="props.newMessageCount"
+      class="scroll-to-bottom-btn__messages-counter"
+    >
+      {{ props.newMessageCount }}
+    </div>
+    <wt-rounded-action
+      icon="arrow-down"
+      rounded
+      @click="emit('scroll')"
+    />
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineEmits } from "vue";
+
+const _props = withDefaults(
+	defineProps<{
+		newMessageCount?: number;
+	}>(),
+	{
+		newMessageCount: 0,
+	},
+);
+
+const _emit = defineEmits<{
+	scroll: [];
+}>();
+</script>
+
+<style lang="scss" scoped>
+
+.scroll-to-bottom-btn {
+  position: absolute;
+  bottom: 0;
+  right: calc(var(--scrollbar-width) + var(--spacing-2xs));
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-2xs);
+
+  &__messages-counter {
+    @extend %typo-body-2;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--success-color);
+    border-radius: 50%;
+    color: var(--text-on-brand-color);
+  }
+}
+
+</style>

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

@@ -0,0 +1,89 @@
+<template>
+    <section class="the-chat-messages-container" @click="focusOnInput">
+      <div
+        ref="messages-container"
+        class="the-chat-messages-container__wrapper"
+        @scroll="handleChatScroll"
+        @resize="handleChatResize"
+      >
+        <chat-message-component
+          v-for="(message, index) of props.messages"
+          :key="message.id"
+          :message="message"
+          :show-avatar="!props.hideAvatars && showAvatar(index)"
+        >
+          <template #before-message>
+            <chat-date
+              v-if="showChatDate(index)"
+              :date="message.createdAt"
+            />
+          </template>
+        </chat-message-component>
+      </div>
+      <scroll-to-bottom-btn
+        v-if="showScrollToBottomBtn"
+        :new-message-count="newUnseenMessages"
+        @scroll="scrollToBottom('smooth')"
+      />
+    </section>
+</template>
+
+<script setup lang="ts">
+import type { Emitter } from "mitt";
+import { inject, useTemplateRef } from "vue";
+
+import type { UiChatsEmitterEvents } from "../../utils/emitter";
+import { useChatScroll } from "../composebles/useChatScroll";
+import { useChatMessages } from "../modules/message/composables/useChatMessage";
+import type { ChatMessageType } from "../types/ChatMessage.types";
+
+const uiChatsEmitter = inject<Emitter<UiChatsEmitterEvents>>("uiChatsEmitter");
+
+const props = withDefaults(
+	defineProps<{
+		messages: ChatMessageType[];
+		hideAvatars?: boolean;
+	}>(),
+	{
+		hideAvatars: false,
+	},
+);
+
+const messagesContainer = useTemplateRef("messages-container");
+
+const { showAvatar, showChatDate } = useChatMessages(props.messages);
+
+const {
+	showScrollToBottomBtn,
+	newUnseenMessages,
+	scrollToBottom,
+	handleChatScroll,
+	handleChatResize,
+} = useChatScroll(messagesContainer, props.messages);
+
+function _focusOnInput() {
+	uiChatsEmitter?.on("focusOnTextField", focus);
+}
+</script>
+
+<style scoped lang="scss">
+.the-chat-messages-container {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  height: inherit;
+}
+
+.the-chat-messages-container__wrapper {
+  @extend %wt-scrollbar;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow-x: hidden;
+  overflow-y: auto;
+  width: 100%;
+  padding-right: var(--scrollbar-width); // scrollbar offset
+  scrollbar-gutter: stable both-edges;
+  gap: var(--spacing-xs);
+}
+</style>

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

@@ -26,26 +26,23 @@ export const useChatScroll = (
 		Boolean(lastMessage.value?.member?.self),
 	);
 
-	const scrollToBottom = (behavior: ScrollBehavior = "instant") => {
-		element.value?.scrollTo({
-			top: element.value?.scrollHeight,
-			behavior: behavior === "instant" ? "auto" : behavior,
-		});
+	const handleChatScroll = () => {
+		const wrapper = element.value;
+		if (!wrapper) return;
 
-		newUnseenMessages.value = 0;
-		showScrollToBottomBtn.value = false;
+		handleShowScrollToBottomBtn(wrapper);
+	};
+
+	const handleChatResize = () => {
+		const wrapper = element.value;
+		if (!wrapper) return;
+
+		updateThreshold(wrapper);
+		handleShowScrollToBottomBtn(wrapper);
 	};
 
 	const handleShowScrollToBottomBtn = (el: HTMLElement) => {
-		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;
-		}
+		resetScrollToBottomBtn();
 
 		const { scrollTop, scrollHeight, clientHeight } = el;
 		const distanceFromBottom = scrollHeight - (scrollTop + clientHeight);
@@ -54,11 +51,23 @@ export const useChatScroll = (
 
 	const updateThreshold = (el: HTMLElement) => {
 		/* @author ye.pohranichna
-      need to update if clientHeight was changed
-      https://webitel.atlassian.net/browse/WTEL-7136 */
+         need to update if clientHeight was changed
+         https://webitel.atlassian.net/browse/WTEL-7136 */
 		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 = () => {
 		if (arrivedState.bottom || isLastMessageIsMy.value) {
 			scrollToBottom("smooth");
@@ -66,19 +75,15 @@ export const useChatScroll = (
 			newUnseenMessages.value += 1;
 		}
 	};
-	const handleChatScroll = () => {
-		const wrapper = element.value;
-		if (!wrapper) return;
-
-		handleShowScrollToBottomBtn(wrapper);
-	};
 
-	const handleChatResize = () => {
-		const wrapper = element.value;
-		if (!wrapper) return;
+	const scrollToBottom = (behavior: ScrollBehavior = "instant") => {
+		element?.value.scrollTo({
+			top: element?.value.scrollHeight,
+			behavior: behavior === "instant" ? "auto" : behavior,
+		});
 
-		updateThreshold(wrapper);
-		handleShowScrollToBottomBtn(wrapper);
+		newUnseenMessages.value = 0;
+		showScrollToBottomBtn.value = false;
 	};
 
 	watch(

package/src/ui/messaging/modules/message/composables/useChatMessage.ts

@@ -0,0 +1,43 @@
+import { FormatDateMode } from "@webitel/ui-sdk/enums";
+import { formatDate } from "@webitel/ui-sdk/utils";
+import { type Ref, ref } from "vue";
+
+import type { ChatMessageType } from "../../../types/ChatMessage.types";
+
+interface GetMessageResult {
+	prevMessage?: ChatMessageType;
+	message?: ChatMessageType;
+	nextMessage?: ChatMessageType;
+}
+
+export const useChatMessages = (chatMessages: ChatMessageType[]) => {
+	const messages: Ref<ChatMessageType[]> = ref(chatMessages);
+
+	function showChatDate(index: number): boolean {
+		const { prevMessage, message } = getMessage(index);
+		return (
+			!!prevMessage &&
+			formatDate(+prevMessage?.createdAt, FormatDateMode.DATE) !==
+				formatDate(+message?.createdAt, FormatDateMode.DATE)
+		);
+	}
+
+	const showAvatar = (index: number): boolean => {
+		const { prevMessage, message } = getMessage(index);
+		return index === 0 || message?.member?.type !== prevMessage?.member?.type;
+	};
+
+	function getMessage(index: number): GetMessageResult {
+		return {
+			prevMessage: messages.value[index - 1],
+			message: messages.value[index],
+			nextMessage: messages.value[index + 1],
+		};
+	}
+
+	return {
+		showAvatar,
+		getMessage,
+		showChatDate,
+	};
+};

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

@@ -4,7 +4,10 @@
             header goes here
         </slot> -->
         <slot name="main">
-            <chat-messages-container :messages="messages" />
+            <chat-messages-container
+              :messages="props.messages"
+              :hide-avatars="props.hideAvatars"
+            />
         </slot>
         <slot name="footer">
           <chat-footer-wrapper>
@@ -17,10 +20,10 @@
                 @[ChatAction.SendMessage]="sendMessage"
                 @[ChatAction.AttachFiles]="sendFile"
               >
-              <template 
-              v-for="action in slottedChatActions" 
-              :key="action"
-              #[action]="{ size }"
+              <template
+                v-for="action in slottedChatActions"
+                :key="action"
+                #[action]="{ size }"
               >
                 <slot
                   :name="`action:${action}`"
@@ -37,6 +40,7 @@
 <script setup lang="ts">
 import { ComponentSize } from "@webitel/ui-sdk/enums";
 import { computed, provide, ref } from "vue";
+
 import {
 	ChatAction,
 	type SharedActionSlots,
@@ -50,9 +54,11 @@ const props = withDefaults(
 		messages: ChatMessageType[];
 		chatActions?: ChatAction[];
 		size?: ComponentSize;
+		hideAvatars?: boolean;
 	}>(),
 	{
 		size: ComponentSize.MD,
+		hideAvatars: false,
 		chatActions: () => [
 			ChatAction.SendMessage,
 		],
@@ -107,5 +113,6 @@ function _sendFile(files: File[]) {
 .chat-container {
   display: flex;
   flex-direction: column;
+  height: 100%;
 }
-</style>
+</style>

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

@@ -1,31 +1,56 @@
 import { ComponentSize } from "@webitel/ui-sdk/enums";
-import { ChatAction, type SharedActionSlots } from "./chat-footer/modules/user-input/types/ChatAction.types";
+import {
+	ChatAction,
+	type SharedActionSlots,
+} from "./chat-footer/modules/user-input/types/ChatAction.types";
 import type { ChatMessageType } from "./messaging/types/ChatMessage.types";
 import type { ResultCallbacks } from "./utils/ResultCallbacks.types";
 type __VLS_Props = {
-    messages: ChatMessageType[];
-    chatActions?: ChatAction[];
-    size?: ComponentSize;
+	messages: ChatMessageType[];
+	chatActions?: ChatAction[];
+	size?: ComponentSize;
 };
 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;
-}>, {
-    chatActions: ChatAction[];
-    size: ComponentSize;
-}, {}, {}, {}, 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;
+		}>,
+	{
+		chatActions: ChatAction[];
+		size: ComponentSize;
+	},
+	{},
+	{},
+	{},
+	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/index.d.ts

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

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    date: number | string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

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

package/types/ui/messaging/components/scroll-to-bottom-btn.vue.d.ts

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    newMessageCount?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    scroll: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onScroll?: () => any;
+}>, {
+    newMessageCount: number;
+}, {}, {}, {}, 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

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

package/types/ui/messaging/modules/message/composables/useChatMessage.d.ts

@@ -0,0 +1,12 @@
+import type { ChatMessageType } from "../../../types/ChatMessage.types";
+interface GetMessageResult {
+    prevMessage?: ChatMessageType;
+    message?: ChatMessageType;
+    nextMessage?: ChatMessageType;
+}
+export declare const useChatMessages: (chatMessages: ChatMessageType[]) => {
+    showAvatar: (index: number) => boolean;
+    getMessage: (index: number) => GetMessageResult;
+    showChatDate: (index: number) => boolean;
+};
+export {};

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

@@ -0,0 +1,33 @@
+import { ComponentSize } from "@webitel/ui-sdk/enums";
+import { ChatAction, type SharedActionSlots } from "./chat-footer/modules/user-input/types/ChatAction.types";
+import type { ChatMessageType } from "./messaging/types/ChatMessage.types";
+import type { ResultCallbacks } from "./utils/ResultCallbacks.types";
+type __VLS_Props = {
+    messages: ChatMessageType[];
+    chatActions?: ChatAction[];
+    size?: ComponentSize;
+    hideAvatars?: boolean;
+};
+type __VLS_Slots = {
+    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;
+}>, {
+    chatActions: ChatAction[];
+    size: ComponentSize;
+    hideAvatars: boolean;
+}, {}, {}, {}, 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;
+    };
+};

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

@@ -1,19 +0,0 @@
-<template>
-    <section class="chat-messages-container">
-        <!-- <chat-message-component
-            v-for="message in messages"
-            :key="message.id"
-            :message="message"
-        /> -->
-    </section>
-</template>
-
-<script setup lang="ts">
-import type { ChatMessageType } from "../types/ChatMessage.types";
-
-// import ChatMessageComponent from '../modules/message/components/chat-message.vue';
-
-const _props = defineProps<{
-	messages: ChatMessageType[];
-}>();
-</script>