@webitel/ui-chats 0.0.14 → 0.0.16

package/package.json

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

package/src/ui/chat-footer/modules/user-input/components/actions/attach-files-action.vue

@@ -21,7 +21,7 @@ import { WtRoundedAction } from "@webitel/ui-sdk/components";
 import { ComponentSize } from "@webitel/ui-sdk/enums";
 import { inject, useTemplateRef } from "vue";
 
-import { ChatAction } from "../../types/ChatAction.types";
+import { ChatAction } from "../../enums/ChatAction.enum";
 
 const size = inject<ComponentSize>("size");
 

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

@@ -13,7 +13,7 @@
 import { ComponentSize } from "@webitel/ui-sdk/enums";
 import { inject } from "vue";
 
-import { ChatAction } from "../../types/ChatAction.types";
+import { ChatAction } from "../../enums/ChatAction.enum";
 
 const size = inject<ComponentSize>("size");
 

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

@@ -20,7 +20,7 @@
 import { ComponentSize } from "@webitel/ui-sdk/enums";
 import { computed, inject } from "vue";
 
-import { ChatAction, type SharedActionSlots } from "../types/ChatAction.types";
+import { ChatAction, type SharedActionSlots } from "../enums/ChatAction.enum";
 import AttachFilesAction from "./actions/attach-files-action.vue";
 import EmojiPickerAction from "./actions/emoji-picker-action.vue";
 import SendMessageAction from "./actions/send-message-action.vue";
@@ -63,12 +63,12 @@ const ShownActionComponentsList = computed(() => {
 });
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .chat-input-actions-bar {
   display: flex;
   gap: var(--spacing-2xs);
 
-  > * {
+  & > * {
     flex: 1;
   }
 }

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

@@ -1,14 +1,15 @@
 <template>
-    <wt-textarea
-        ref="chatTextFieldInput"
-        v-model="textModel"
-        :size="size"
-        autoresize
-    />
+  <wt-textarea
+    ref="chatTextFieldInput"
+    :model-value="textModel"
+    :size="size"
+    autoresize
+    @update:model-value="send"
+  />
 </template>
 
 <script setup lang="ts">
-import type { WtTextarea } from "@webitel/ui-sdk/components";
+import { WtTextarea } from "@webitel/ui-sdk/components";
 import { ComponentSize } from "@webitel/ui-sdk/enums";
 import insertTextAtCursor from "insert-text-at-cursor";
 import type { Emitter } from "mitt";
@@ -33,6 +34,10 @@ const textareaEl = computed(() =>
 	chatTextFieldInputRef.value?.$el.querySelector("textarea"),
 );
 
+function send(text: string) {
+	textModel.value = text;
+}
+
 function focus() {
 	textareaEl.value!.focus();
 }
@@ -42,3 +47,4 @@ function insertAtCursor(text: string) {
 	insertTextAtCursor(textareaEl.value!, text);
 }
 </script>
+

package/src/ui/index.ts

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

package/src/ui/messaging/components/dropzone.vue

@@ -0,0 +1,70 @@
+<template>
+  <aside class="dropzone dropzone--animated" v-on="$listeners">
+    <div class="dropzone__border-animation"></div>
+    <article class="dropzone__text-wrapper">
+      <h3 class="dropzone__title">{{ $t('workspaceSec.chat.dropzone.title') }}</h3>
+      <p class="dropzone__description">{{ $t('workspaceSec.chat.dropzone.description') }}</p>
+    </article>
+  </aside>
+</template>
+
+<script>
+</script>
+
+<style lang="scss" scoped>
+@use '@webitel/styleguide/typography' as *;
+
+.dropzone {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--content-wrapper-color);
+  box-shadow: var(--box-shadow);
+  border-radius: var(--border-radius);
+  z-index: 10;
+
+  &--animated :before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: linear-gradient(90deg, var(--primary-color) 50%, transparent 50%),
+    linear-gradient(90deg, var(--primary-color) 50%, transparent 50%),
+    linear-gradient(0deg, var(--primary-color) 50%, transparent 50%),
+    linear-gradient(0deg, var(--primary-color) 50%, transparent 50%);
+    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+    background-size: 15px 4px, 15px 4px, 4px 15px, 4px 15px;
+    background-position: 0 0, 100% 100%;
+    animation: border-dance 6s infinite linear;
+    @keyframes border-dance {
+      0% {
+        background-position: 0 0, 100% 100%, 0 100%, 100% 0;
+      }
+      100% {
+        background-position: 100% 0, 0 100%, 0 0, 100% 100%;
+      }
+    }
+  }
+}
+
+.dropzone__text-wrapper {
+  max-width: 80%;
+}
+
+.dropzone__title {
+  @extend %typo-heading-2;
+  text-align: center;
+}
+
+.dropzone__description {
+  @extend %typo-body-2;
+  text-align: center;
+}
+</style>

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

@@ -1,5 +1,8 @@
 <template>
-    <section class="the-chat-messages-container" @click="focusOnInput">
+    <section
+      class="the-chat-messages-container"
+      @click="focusOnInput"
+    >
       <div
         ref="messages-container"
         class="the-chat-messages-container__wrapper"
@@ -10,7 +13,8 @@
           v-for="(message, index) of props.messages"
           :key="message.id"
           :message="message"
-          :show-avatar="!props.hideAvatars && showAvatar(index)"
+          :show-avatar="showAvatar(index)"
+          :without-avatars="props.withoutAvatars"
         >
           <template #before-message>
             <chat-date-divider
@@ -33,7 +37,7 @@ import type { Emitter } from "mitt";
 import { inject, useTemplateRef } from "vue";
 
 import type { UiChatsEmitterEvents } from "../../utils/emitter";
-import { useChatScroll } from "../composebles/useChatScroll";
+import { useChatScroll } from "../composables/useChatScroll";
 import ChatMessage from "../modules/message/components/chat-message.vue";
 import { useChatMessages } from "../modules/message/composables/useChatMessage";
 import type { ChatMessageType } from "../types/ChatMessage.types";
@@ -45,10 +49,10 @@ const uiChatsEmitter = inject<Emitter<UiChatsEmitterEvents>>("uiChatsEmitter");
 const props = withDefaults(
 	defineProps<{
 		messages: ChatMessageType[];
-		hideAvatars?: boolean;
+		withoutAvatars?: boolean;
 	}>(),
 	{
-		hideAvatars: false,
+		withoutAvatars: false,
 	},
 );
 

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

@@ -0,0 +1,25 @@
+import { Ref, ref } from "vue";
+
+interface UseDropzoneHandlers {
+	isDropzoneVisible: Ref<boolean>;
+	handleDragEnter: () => void;
+	handleDragLeave: () => void;
+}
+
+export const useDropzoneHandlers = (): UseDropzoneHandlers => {
+	const isDropzoneVisible = ref<boolean>(false);
+
+	const handleDragEnter = (): void => {
+		isDropzoneVisible.value = true;
+	};
+
+	const handleDragLeave = (): void => {
+		isDropzoneVisible.value = false;
+	};
+
+	return {
+		isDropzoneVisible,
+		handleDragEnter,
+		handleDragLeave,
+	};
+};

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

@@ -9,7 +9,10 @@
     <slot name="before-message" />
 
     <div class="chat-message__content">
-      <div class="chat-message__avatar-wrapper">
+      <div
+        v-if="withoutAvatars"
+        class="chat-message__avatar-wrapper"
+      >
         <message-avatar
           v-if="props.showAvatar"
           :bot="isBot"
@@ -67,10 +70,12 @@ const props = withDefaults(
 	defineProps<{
 		message: ChatMessageType;
 		showAvatar?: boolean;
+		withoutAvatars?: boolean;
 		username?: string;
 	}>(),
 	{
 		showAvatar: false,
+		withoutAvatars: false,
 		username: "",
 	},
 );

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

@@ -15,10 +15,12 @@ export const useChatMessages = (chatMessages: ChatMessageType[]) => {
 
 	function showChatDate(index: number): boolean {
 		const { prevMessage, message } = getMessage(index);
+		const prevDate = +prevMessage?.createdAt || 0;
+		const currentDate = +message?.createdAt || 0;
 		return (
 			!!prevMessage &&
-			formatDate(+prevMessage?.createdAt, FormatDateMode.DATE) !==
-				formatDate(+message?.createdAt, FormatDateMode.DATE)
+			formatDate(prevDate, FormatDateMode.DATE) !==
+				formatDate(currentDate, FormatDateMode.DATE)
 		);
 	}
 

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

@@ -4,9 +4,16 @@
             header goes here
         </slot> -->
         <slot name="main">
+          <dropzone
+            v-if="!isDropzoneDisabled && isDropzoneVisible"
+            @dragenter.prevent
+            @dragleave.prevent="handleDragLeave"
+            @drop="sendFile"
+          />
           <chat-messages-container
             :messages="props.messages"
-            :hide-avatars="props.hideAvatars"
+            :without-avatars="props.withoutAvatars"
+            @[ChatAction.AttachFiles]="sendFile"
           />
         </slot>
         <slot name="footer">
@@ -16,7 +23,7 @@
                   v-model:text="draft"
               />
               <chat-input-actions-bar
-                :actions="chatActions"
+                :actions="props.chatActions"
                 @[ChatAction.SendMessage]="sendMessage"
                 @[ChatAction.AttachFiles]="sendFile"
               >
@@ -47,8 +54,10 @@ import ChatTextField from "./chat-footer/modules/user-input/components/chat-text
 import {
 	ChatAction,
 	type SharedActionSlots,
-} from "./chat-footer/modules/user-input/types/ChatAction.types";
+} 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 { useDropzoneHandlers } from "./messaging/composables/useDropzoneHandlers";
 import type { ChatMessageType } from "./messaging/types/ChatMessage.types";
 import { createUiChatsEmitter } from "./utils/emitter";
 import type { ResultCallbacks } from "./utils/ResultCallbacks.types";
@@ -58,11 +67,11 @@ const props = withDefaults(
 		messages: ChatMessageType[];
 		chatActions?: ChatAction[];
 		size?: ComponentSize;
-		hideAvatars?: boolean;
+		withoutAvatars?: boolean;
 	}>(),
 	{
 		size: ComponentSize.MD,
-		hideAvatars: false,
+		withoutAvatars: false,
 		chatActions: () => [
 			ChatAction.SendMessage,
 		],
@@ -94,6 +103,8 @@ const uiChatsEmitter = createUiChatsEmitter();
 provide("size", props.size);
 provide("uiChatsEmitter", uiChatsEmitter);
 
+const { isDropzoneVisible, handleDragLeave } = useDropzoneHandlers();
+
 const draft = ref<string>("");
 
 const slottedChatActions = computed(() => {
@@ -101,6 +112,9 @@ const slottedChatActions = computed(() => {
 		.filter((key) => key.startsWith("action:"))
 		.map((key) => key.replace("action:", ""));
 });
+const isDropzoneDisabled = computed(
+	() => !props.chatActions.includes(ChatAction.AttachFiles),
+);
 
 function sendMessage() {
 	emit(`action:${ChatAction.SendMessage}`, draft.value, {
@@ -118,5 +132,6 @@ function sendFile(files: File[]) {
   display: flex;
   flex-direction: column;
   height: 100%;
+  width: 100%;
 }
 </style>

package/types/ui/chat-footer/modules/user-input/components/chat-input-actions-bar.vue.d.ts

@@ -1,4 +1,4 @@
-import { ChatAction, type SharedActionSlots } from "../types/ChatAction.types";
+import { ChatAction, type SharedActionSlots } from "../enums/ChatAction.enum";
 type __VLS_Props = {
     actions: ChatAction[];
 };

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

@@ -0,0 +1,10 @@
+export declare const ChatAction: {
+    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;
+};

package/types/ui/chat-footer/modules/user-input/types/ChatAction.types.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/index.d.ts

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

package/types/ui/messaging/components/dropzone.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -1,10 +1,10 @@
 import type { ChatMessageType } from "../types/ChatMessage.types";
 type __VLS_Props = {
     messages: ChatMessageType[];
-    hideAvatars?: 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<{}>, {
-    hideAvatars: boolean;
+    withoutAvatars: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

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

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

@@ -0,0 +1,8 @@
+import { Ref } from "vue";
+interface UseDropzoneHandlers {
+    isDropzoneVisible: Ref<boolean>;
+    handleDragEnter: () => void;
+    handleDragLeave: () => void;
+}
+export declare const useDropzoneHandlers: () => UseDropzoneHandlers;
+export {};

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

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

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

@@ -2,6 +2,7 @@ import type { ChatMessageType } from "../../../types/ChatMessage.types";
 type __VLS_Props = {
     message: ChatMessageType;
     showAvatar?: boolean;
+    withoutAvatars?: boolean;
     username?: string;
 };
 declare var __VLS_1: {}, __VLS_44: {};
@@ -19,6 +20,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }>, {
     username: string;
     showAvatar: boolean;
+    withoutAvatars: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -1,12 +1,12 @@
 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/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;
-    hideAvatars?: boolean;
+    withoutAvatars?: boolean;
 };
 type __VLS_Slots = {
     main: () => any;
@@ -20,7 +20,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onAction:attachFiles"?: (files: File[], options: ResultCallbacks) => any;
 }>, {
     size: ComponentSize;
-    hideAvatars: boolean;
+    withoutAvatars: boolean;
     chatActions: ChatAction[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;