@webitel/ui-chats 0.1.20 → 0.1.22

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-chats",
-	"version": "0.1.20",
+	"version": "0.1.22",
 	"description": "Reusable Webitel Frontend Code for Chats UI",
 	"workspaces": [
 		"../../",
@@ -12,7 +12,12 @@
 		"make-all": "npm version patch --git-tag-version false && (npm run lint:biome || true) && (npm run build:types || true) && npm run utils:publish",
 		"build": "(npm run build:types || true)",
 		"build:types": "vue-tsc -p ./tsconfig.build.json",
-		"lint:biome": "biome check --write",
+		"biome:ci:gh": "biome ci ./src --reporter=github",
+		"test:unit": "node -e \"process.exit(0)\"",
+		"lint": "biome ci ./src",
+		"test": "npm run test:unit",
+		"ci:check": "npm run biome:ci:gh && npm run test:unit",
+		"lint:biome": "biome check --write ./src",
 		"utils:publish": "npm publish --access public --tag ${NPM_TAG:-latest}"
 	},
 	"dependencies": {
@@ -20,7 +25,7 @@
 		"insert-text-at-cursor": "^0.3.0"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "2.3.8",
+		"@biomejs/biome": "2.4.10",
 		"@types/node": "^24.10.0",
 		"@vitejs/plugin-vue": "^6.0.1",
 		"@vue/tsconfig": "^0.8.1",

package/src/index.ts

@@ -1,2 +1,3 @@
 import './css/main.css';
+
 export { setConfig } from './config/config';

package/src/locale/en/en.ts

@@ -1,9 +1,10 @@
 export default {
-	"@webitel/ui-chats": {
+	'@webitel/ui-chats': {
 		ui: {
 			messaging: {
-				chatsFileBlocked: "File quarantined or blocked",
-				textAreaPlaceholder: "Write a message...",
+				chatsFileBlocked: 'File quarantined or blocked',
+				chatsIncorrectFileSize: 'Incorrect file size',
+				textAreaPlaceholder: 'Write a message...',
 			},
 		},
 	},

package/src/locale/es/es.ts

@@ -1,9 +1,10 @@
 export default {
-	"@webitel/ui-chats": {
+	'@webitel/ui-chats': {
 		ui: {
 			messaging: {
-				chatsFileBlocked: "Archivo en cuarentena o bloqueado",
-				textAreaPlaceholder: "Escribe un mensaje...",
+				chatsFileBlocked: 'Archivo en cuarentena o bloqueado',
+				chatsIncorrectFileSize: 'Tamaño de archivo incorrecto',
+				textAreaPlaceholder: 'Escribe un mensaje...',
 			},
 		},
 	},

package/src/locale/index.ts

@@ -1,10 +1,10 @@
 import en from './en/en';
-import uk from './uk/uk';
-import ru from './ru/ru';
 import es from './es/es';
 import kz from './kz/kz';
 import pl from './pl/pl';
 import ro from './ro/ro';
+import ru from './ru/ru';
+import uk from './uk/uk';
 import uz from './uz/uz';
 import vi from './vi/vi';
 
@@ -20,4 +20,4 @@ export const messages = {
 	vi,
 };
 
-export { en, uk, ru, es, kz, pl, ro, uz, vi };
+export { en, es, kz, pl, ro, ru, uk, uz, vi };

package/src/locale/kz/kz.ts

@@ -1,9 +1,10 @@
 export default {
-	"@webitel/ui-chats": {
+	'@webitel/ui-chats': {
 		ui: {
 			messaging: {
-				chatsFileBlocked: "Файл карантинде немесе бұғатталған",
-				textAreaPlaceholder: "Хабарлама жаз...",
+				chatsFileBlocked: 'Файл карантинде немесе бұғатталған',
+				chatsIncorrectFileSize: 'Файл өлшемі қате',
+				textAreaPlaceholder: 'Хабарлама жаз...',
 			},
 		},
 	},

package/src/locale/pl/pl.ts

@@ -1,9 +1,10 @@
 export default {
-	"@webitel/ui-chats": {
+	'@webitel/ui-chats': {
 		ui: {
 			messaging: {
-				chatsFileBlocked: "Plik w kwarantannie lub zablokowany",
-				textAreaPlaceholder: "Napisz wiadomość...",
+				chatsFileBlocked: 'Plik w kwarantannie lub zablokowany',
+				chatsIncorrectFileSize: 'Nieprawidłowy rozmiar pliku',
+				textAreaPlaceholder: 'Napisz wiadomość...',
 			},
 		},
 	},

package/src/locale/ro/ro.ts

@@ -1,9 +1,10 @@
 export default {
-	"@webitel/ui-chats": {
+	'@webitel/ui-chats': {
 		ui: {
 			messaging: {
-				chatsFileBlocked: "Fişier în carantină sau blocat",
-				textAreaPlaceholder: "Scrie un mesaj...",
+				chatsFileBlocked: 'Fişier în carantină sau blocat',
+				chatsIncorrectFileSize: 'Dimensiune fișier incorectă',
+				textAreaPlaceholder: 'Scrie un mesaj...',
 			},
 		},
 	},

package/src/locale/ru/ru.ts

@@ -1,9 +1,10 @@
 export default {
-	"@webitel/ui-chats": {
+	'@webitel/ui-chats': {
 		ui: {
 			messaging: {
-				chatsFileBlocked: "Файл в карантине или заблокирован",
-				textAreaPlaceholder: "Напишите сообщение...",
+				chatsFileBlocked: 'Файл в карантине или заблокирован',
+				chatsIncorrectFileSize: 'Неверный размер файла',
+				textAreaPlaceholder: 'Напишите сообщение...',
 			},
 		},
 	},

package/src/locale/uk/uk.ts

@@ -1,9 +1,10 @@
 export default {
-	"@webitel/ui-chats": {
+	'@webitel/ui-chats': {
 		ui: {
 			messaging: {
-				chatsFileBlocked: "Файл в карантині чи заблокований",
-				textAreaPlaceholder: "Напишіть повідомлення...",
+				chatsFileBlocked: 'Файл в карантині чи заблокований',
+				chatsIncorrectFileSize: 'Неправильний розмір файлу',
+				textAreaPlaceholder: 'Напишіть повідомлення...',
 			},
 		},
 	},

package/src/locale/uz/uz.ts

@@ -1,9 +1,10 @@
 export default {
-	"@webitel/ui-chats": {
+	'@webitel/ui-chats': {
 		ui: {
 			messaging: {
-				chatsFileBlocked: "Fayl karantinda yoki bloklangan",
-				textAreaPlaceholder: "Xabar yozing...",
+				chatsFileBlocked: 'Fayl karantinda yoki bloklangan',
+				chatsIncorrectFileSize: "Fayl hajmi noto'g'ri",
+				textAreaPlaceholder: 'Xabar yozing...',
 			},
 		},
 	},

package/src/locale/vi/vi.ts

@@ -1,9 +1,10 @@
 export default {
-	"@webitel/ui-chats": {
+	'@webitel/ui-chats': {
 		ui: {
 			messaging: {
-				chatsFileBlocked: "Tệp bị cách ly hoặc bị chặn",
-				textAreaPlaceholder: "Viết tin nhắn...",
+				chatsFileBlocked: 'Tệp bị cách ly hoặc bị chặn',
+				chatsIncorrectFileSize: 'Kích thước tệp không hợp lệ',
+				textAreaPlaceholder: 'Viết tin nhắn...',
 			},
 		},
 	},

package/src/ui/chat-footer/components/chat-footer-wrapper.vue

@@ -6,7 +6,7 @@
 
 <script setup lang="ts">
 const slots = defineSlots<{
-	default: () => any;
+	default: () => unknown;
 }>();
 </script>
 

package/src/ui/chat-footer/modules/user-input/components/actions/emoji-picker-action.vue

@@ -7,15 +7,15 @@
 </template>
 
 <script setup lang="ts">
-import { WtChatEmoji } from "@webitel/ui-sdk/components";
-import { ComponentSize } from "@webitel/ui-sdk/enums";
-import type { Emitter } from "mitt";
-import { inject } from "vue";
+import { WtChatEmoji } from '@webitel/ui-sdk/components';
+import { ComponentSize } from '@webitel/ui-sdk/enums';
+import type { Emitter } from 'mitt';
+import { inject } from 'vue';
 
-import type { UiChatsEmitterEvents } from "../../../../../utils/emitter";
+import type { UiChatsEmitterEvents } from '../../../../../utils/emitter';
 
-const size = inject<ComponentSize>("size");
-const uiChatsEmitter = inject<Emitter<UiChatsEmitterEvents>>("uiChatsEmitter");
+const size = inject<ComponentSize>('size');
+const uiChatsEmitter = inject<Emitter<UiChatsEmitterEvents>>('uiChatsEmitter');
 </script>
 
 <style lang="scss" scoped>

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

@@ -17,15 +17,15 @@
 </template>
 
 <script setup lang="ts">
-import { ComponentSize } from "@webitel/ui-sdk/enums";
-import { computed, inject } from "vue";
+import { ComponentSize } from '@webitel/ui-sdk/enums';
+import { computed, inject } from 'vue';
 
-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";
+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';
 
-const size = inject<ComponentSize>("size");
+const size = inject<ComponentSize>('size');
 
 const props = defineProps<{
 	actions: ChatAction[];

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

@@ -12,36 +12,38 @@
 </template>
 
 <script setup lang="ts">
-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";
-import { computed, inject, type MaybeRef, useTemplateRef } from "vue";
-import { useI18n } from "vue-i18n";
+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';
+import { computed, inject, type MaybeRef, useTemplateRef } from 'vue';
+import { useI18n } from 'vue-i18n';
 
-import type { UiChatsEmitterEvents } from "../../../../utils/emitter";
+import type { UiChatsEmitterEvents } from '../../../../utils/emitter';
 
 const { t } = useI18n();
 
-const textModel = defineModel<MaybeRef<string>>("text", {
+const textModel = defineModel<MaybeRef<string>>('text', {
 	required: true,
 });
 
-const size = inject<ComponentSize>("size");
-const uiChatsEmitter = inject<Emitter<UiChatsEmitterEvents>>("uiChatsEmitter");
+const size = inject<ComponentSize>('size');
+const uiChatsEmitter = inject<Emitter<UiChatsEmitterEvents>>('uiChatsEmitter');
 
-uiChatsEmitter!.on("insertAtCursor", ({ text }) => insertAtCursor(text));
-uiChatsEmitter!.on("focusOnTextField", focus);
+if (uiChatsEmitter) {
+	uiChatsEmitter.on('insertAtCursor', ({ text }) => insertAtCursor(text));
+	uiChatsEmitter.on('focusOnTextField', focus);
+}
 
 const emit = defineEmits<{
 	enter: [];
 }>();
 
 const chatTextFieldInputRef =
-	useTemplateRef<typeof WtTextarea>("chatTextFieldInput");
+	useTemplateRef<typeof WtTextarea>('chatTextFieldInput');
 
 const textareaEl = computed(() =>
-	chatTextFieldInputRef.value?.$el.querySelector("textarea"),
+	chatTextFieldInputRef.value?.$el.querySelector('textarea'),
 );
 
 function send(text: string) {
@@ -49,12 +51,14 @@ function send(text: string) {
 }
 
 function focus() {
-	textareaEl.value!.focus();
+	textareaEl.value?.focus();
 }
 
 function insertAtCursor(text: string) {
 	focus();
-	insertTextAtCursor(textareaEl.value!, text);
+	const textarea = textareaEl.value;
+	if (!textarea) return;
+	insertTextAtCursor(textarea, text);
 }
 </script>
 

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

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

package/src/ui/index.ts

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

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

@@ -8,22 +8,22 @@
   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";
+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;
+	date: number | string;
 }>();
 
 const { t } = useI18n();
 
 const formattedDate = computed<Date>(() => {
-  const chatDate = formatDate(+props.date, FormatDateMode.DATE);
-  const today = formatDate(Date.now(), FormatDateMode.DATE);
+	const chatDate = formatDate(+props.date, FormatDateMode.DATE);
+	const today = formatDate(Date.now(), FormatDateMode.DATE);
 
-  return chatDate === today ? t("reusable.today") : chatDate;
+	return chatDate === today ? t('reusable.today') : chatDate;
 });
 </script>
 

package/src/ui/messaging/components/chat-observer.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-import { ChatAction } from "../../chat-footer/modules/user-input/enums/ChatAction.enum";
+import { ChatAction } from '../../chat-footer/modules/user-input/enums/ChatAction.enum';
 
 const props = withDefaults(
 	defineProps<{

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

@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineEmits } from "vue";
+import { defineEmits } from 'vue';
 
 const props = withDefaults(
 	defineProps<{

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

@@ -43,7 +43,7 @@
   setup
   lang="ts"
 >
-import type { Emitter } from "mitt";
+import type { Emitter } from 'mitt';
 import {
 	computed,
 	defineProps,
@@ -51,68 +51,68 @@ import {
 	nextTick,
 	onMounted,
 	useTemplateRef,
-} from "vue";
+} 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";
+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");
+const uiChatsEmitter = inject<Emitter<UiChatsEmitterEvents>>('uiChatsEmitter');
 
 const props = withDefaults(
-  defineProps<{
-    messages: ChatMessageType[];
-    next?: boolean;
-    isLoading?: boolean;
-    withoutAvatars?: boolean;
-  }>(),
-  {
-    next: false,
-    isLoading: false,
-    withoutAvatars: false,
-  },
+	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 messagesContainer = useTemplateRef('messages-container');
 
 const { showAvatar, showChatDate } = useChatMessages(
 	computed(() => props.messages),
 ); // props values reactivity https://stackoverflow.com/questions/72408463/use-props-in-composables-vue3 @author ye.pohranichna
 
 const {
-  showScrollToBottomBtn,
-  newUnseenMessagesCount,
-  scrollToBottom,
-  handleChatScroll,
-  handleChatResize,
+	showScrollToBottomBtn,
+	newUnseenMessagesCount,
+	scrollToBottom,
+	handleChatScroll,
+	handleChatResize,
 } = useChatScroll(
 	messagesContainer,
 	computed(() => props.messages), // props values reactivity https://stackoverflow.com/questions/72408463/use-props-in-composables-vue3 @author ye.pohranichna
 );
 
 function focusOnInput() {
-  uiChatsEmitter?.on("focusOnTextField", focus);
+	uiChatsEmitter?.on('focusOnTextField', focus);
 }
 
 function clickOnImage(message: ChatMessageType) {
-  uiChatsEmitter!.emit("clickChatMessageImage", message);
+	uiChatsEmitter?.emit('clickChatMessageImage', message);
 }
 
 onMounted(async () => {
-  /* TODO: add loader on all chat(in the-chat-container?) and remove timeout after that */
-  await nextTick();
-  setTimeout(() => {
-    scrollToBottom();
-  }, 500);
+	/* TODO: add loader on all chat(in the-chat-container?) and remove timeout after that */
+	await nextTick();
+	setTimeout(() => {
+		scrollToBottom();
+	}, 500);
 });
 </script>
 

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

@@ -1,7 +1,7 @@
-import { useScroll } from "@vueuse/core";
-import { type ComputedRef, computed, type Ref, ref, watch } from "vue";
+import { useScroll } from '@vueuse/core';
+import { type ComputedRef, computed, type Ref, ref, watch } from 'vue';
 
-import type { ChatMessageType } from "../types/ChatMessage.types";
+import type { ChatMessageType } from '../types/ChatMessage.types';
 
 export const useChatScroll = (
 	element: Ref<HTMLElement | null> = null,
@@ -64,16 +64,16 @@ export const useChatScroll = (
 
 	const handleBtnAfterNewMessage = () => {
 		if (arrivedState.bottom || isLastMessageIsMy.value) {
-			scrollToBottom("smooth");
+			scrollToBottom('smooth');
 		} else {
 			newUnseenMessagesCount.value += 1;
 		}
 	};
 
-	const scrollToBottom = (behavior: ScrollBehavior = "instant") => {
+	const scrollToBottom = (behavior: ScrollBehavior = 'instant') => {
 		element?.value.scrollTo({
 			top: element?.value.scrollHeight,
-			behavior: behavior === "instant" ? "auto" : behavior,
+			behavior: behavior === 'instant' ? 'auto' : behavior,
 		});
 
 		newUnseenMessagesCount.value = 0;
@@ -87,7 +87,7 @@ export const useChatScroll = (
 			if (newMessageReceived) handleBtnAfterNewMessage();
 		},
 		{
-			flush: "post",
+			flush: 'post',
 		},
 	);
 

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

@@ -1,4 +1,4 @@
-import { Ref, ref } from "vue";
+import { type Ref, ref } from 'vue';
 
 interface UseDropzoneHandlers {
 	isDropzoneVisible: Ref<boolean>;

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

@@ -23,6 +23,11 @@
       </div>
       <!--    click.stop prevents focus on textarea and allows to select the message-new text -->
       <message-blocked-error v-if="message.file?.malware" @click.stop />
+      <message-size-exceeded-error
+        v-else-if="isFileSizeExceeded"
+        :self-side="isSelfSide"
+        @click.stop
+      />
       <div v-else @click.stop>
         <message-player
           v-if="media"
@@ -66,6 +71,7 @@ import MessageBlockedError from './details/chat-message-blocked-error.vue';
 import MessageDocument from './details/chat-message-document.vue';
 import MessageImage from './details/chat-message-image.vue';
 import MessagePlayer from './details/chat-message-player.vue';
+import MessageSizeExceededError from './details/chat-message-size-exceeded-error.vue';
 import MessageText from './details/chat-message-text.vue';
 import MessageTime from './details/chat-message-time.vue';
 
@@ -92,6 +98,10 @@ const size = inject<ComponentSize>('size');
 
 const { image, media, document } = useChatMessageFile(props.message.file);
 
+const isFileSizeExceeded = computed<boolean>(
+	() => !!props.message.file && !props.message.file?.size,
+);
+
 const isSelfSide = computed<boolean>(
 	() => props.message.member?.self || props.message.member?.type === 'webitel',
 );
@@ -135,7 +145,7 @@ function handlePlayerInitialize(player) {
 .chat-message__avatar-wrapper {
   flex: 0 0 var(--spacing-lg);
   width: var(--wt-avatar-size--size-sm);
-  pointer-events: none; // prevents dragging to upload file area
+  pointer-events: none; /* prevents dragging to upload file area */
 }
 
 .chat-message--right .chat-message__content {

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

@@ -10,7 +10,7 @@
   </div>
 </template>
 <script setup>
-import { useI18n } from "vue-i18n";
+import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
 </script>

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

@@ -19,10 +19,10 @@
 </template>
 
 <script setup lang="ts">
-import { prettifyFileSize } from "@webitel/ui-sdk/scripts";
-import { computed, defineProps } from "vue";
+import { prettifyFileSize } from '@webitel/ui-sdk/scripts';
+import { computed, defineProps } from 'vue';
 
-import type { ChatMessageFile } from "../../../../types/ChatMessage.types";
+import type { ChatMessageFile } from '../../../../types/ChatMessage.types';
 
 const props = withDefaults(
 	defineProps<{
@@ -34,15 +34,15 @@ const props = withDefaults(
 	},
 );
 const documentSize = computed(() => {
-	if (!props.file) return "";
+	if (!props.file) return '';
 	return prettifyFileSize(props.file.size);
 });
 
 function downloadDocument() {
 	if (!props.file) return;
-	const a = document.createElement("a");
+	const a = document.createElement('a');
 	a.href = props.file.url;
-	a.target = "_blank";
+	a.target = '_blank';
 	a.download = props.file.name;
 	a.click();
 }

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

@@ -26,9 +26,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed, defineEmits, defineProps } from 'vue';
-import { WtVidstackPlayer, WtPlayer } from '@webitel/ui-sdk/components';
+import { WtPlayer, WtVidstackPlayer } from '@webitel/ui-sdk/components';
 import { ComponentSize } from '@webitel/ui-sdk/enums';
+import { computed, defineEmits, defineProps } from 'vue';
 
 import type { ChatMessageFile } from '../../../../types/ChatMessage.types';
 

package/src/ui/messaging/modules/message/components/details/chat-message-size-exceeded-error.vue

@@ -0,0 +1,50 @@
+<template>
+  <div
+    class="chat-message-size-exceeded-error typo-body-1"
+    :class="{
+      'chat-message-size-exceeded-error--right': selfSide,
+    }"
+  >
+    <wt-icon
+      icon="violation"
+      color="error"
+    />
+    <p>
+      {{ t('@webitel/ui-chats.ui.messaging.chatsIncorrectFileSize') }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+interface IChatMessageSizeExceededErrorProps {
+	selfSide?: boolean;
+}
+
+const props = withDefaults(defineProps<IChatMessageSizeExceededErrorProps>(), {
+	selfSide: false,
+});
+</script>
+
+<style scoped lang="scss">
+.chat-message-size-exceeded-error {
+  background: var(--primary-light-color);
+  border-radius: var(--spacing-xs);
+  padding: var(--spacing-xs);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-xs);
+  white-space: pre-line;
+  text-align: center;
+
+  &--right {
+    background: var(--secondary-light-color);
+    color: var(--secondary-on-color);
+    place-self: flex-end;
+  }
+}
+</style>

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

@@ -9,21 +9,21 @@
   setup
   lang="ts"
 >
-import Autolinker from "autolinker";
-import { computed, defineProps } from "vue";
+import Autolinker from 'autolinker';
+import { computed, defineProps } from 'vue';
 
 const props = defineProps<{
-  text: string;
+	text: string;
 }>();
 
 const text = computed(() => {
-  // ATTENTION: not all libs are suitable for this case, because we want to preserve "<" signs
-  // https://my.webitel.com/browse/DEV-2848
-  return Autolinker.link(props.text, {
-    newWindow: true,
-    sanitizeHtml: true, // DONT FORGET TO SANITIZE, OR USE DOM PURIFY
-    className: "chat-message-new-text__link",
-  });
+	// ATTENTION: not all libs are suitable for this case, because we want to preserve "<" signs
+	// https://my.webitel.com/browse/DEV-2848
+	return Autolinker.link(props.text, {
+		newWindow: true,
+		sanitizeHtml: true, // DONT FORGET TO SANITIZE, OR USE DOM PURIFY
+		className: 'chat-message-new-text__link',
+	});
 });
 </script>
 

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

@@ -11,16 +11,16 @@
   setup
   lang="ts"
 >
-import { prettifyTime } from "@webitel/ui-sdk/scripts";
-import { computed, defineProps } from "vue";
+import { prettifyTime } from '@webitel/ui-sdk/scripts';
+import { computed, defineProps } from 'vue';
 
 const props = withDefaults(
-  defineProps<{
-    date?: string | number; // timestamp
-  }>(),
-  {
-    date: "",
-  },
+	defineProps<{
+		date?: string | number; // timestamp
+	}>(),
+	{
+		date: '',
+	},
 );
 
 const time = computed(() => prettifyTime(props.date));

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

@@ -1,8 +1,8 @@
-import { FormatDateMode } from "@webitel/ui-sdk/enums";
-import { formatDate } from "@webitel/ui-sdk/utils";
-import { type ComputedRef, type Ref } from "vue";
+import { FormatDateMode } from '@webitel/ui-sdk/enums';
+import { formatDate } from '@webitel/ui-sdk/utils';
+import type { ComputedRef, Ref } from 'vue';
 
-import type { ChatMessageType } from "../../../types/ChatMessage.types";
+import type { ChatMessageType } from '../../../types/ChatMessage.types';
 
 interface GetMessageResult {
 	prevMessage?: ChatMessageType;

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

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

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

@@ -106,8 +106,8 @@ const emit = defineEmits<{
 
 const slots = defineSlots<
 	{
-		main: () => any;
-		footer: () => any;
+		main: () => unknown;
+		footer: () => unknown;
 	} & SharedActionSlots
 >();
 

package/src/ui/utils/ResultCallbacks.types.ts

@@ -1 +1 @@
-export { ResultCallbacks } from "@webitel/ui-sdk/src/types";
+export { ResultCallbacks } from '@webitel/ui-sdk/src/types';

package/src/ui/utils/emitter.ts

@@ -1,6 +1,6 @@
-import mitt from "mitt";
+import mitt from 'mitt';
 
-import { ChatMessageType } from "../../../types/ui";
+import type { ChatMessageType } from '../../../types/ui';
 
 export type UiChatsEmitterEvents = {
 	insertAtCursor: {

package/types/locale/en/en.d.ts

@@ -1,8 +1,9 @@
 declare const _default: {
-    "@webitel/ui-chats": {
+    '@webitel/ui-chats': {
         ui: {
             messaging: {
                 chatsFileBlocked: string;
+                chatsIncorrectFileSize: string;
                 textAreaPlaceholder: string;
             };
         };

package/types/locale/es/es.d.ts

@@ -1,8 +1,9 @@
 declare const _default: {
-    "@webitel/ui-chats": {
+    '@webitel/ui-chats': {
         ui: {
             messaging: {
                 chatsFileBlocked: string;
+                chatsIncorrectFileSize: string;
                 textAreaPlaceholder: string;
             };
         };

package/types/locale/index.d.ts

@@ -1,102 +1,111 @@
 import en from './en/en';
-import uk from './uk/uk';
-import ru from './ru/ru';
 import es from './es/es';
 import kz from './kz/kz';
 import pl from './pl/pl';
 import ro from './ro/ro';
+import ru from './ru/ru';
+import uk from './uk/uk';
 import uz from './uz/uz';
 import vi from './vi/vi';
 export declare const messages: {
     en: {
-        "@webitel/ui-chats": {
+        '@webitel/ui-chats': {
             ui: {
                 messaging: {
                     chatsFileBlocked: string;
+                    chatsIncorrectFileSize: string;
                     textAreaPlaceholder: string;
                 };
             };
         };
     };
     uk: {
-        "@webitel/ui-chats": {
+        '@webitel/ui-chats': {
             ui: {
                 messaging: {
                     chatsFileBlocked: string;
+                    chatsIncorrectFileSize: string;
                     textAreaPlaceholder: string;
                 };
             };
         };
     };
     ru: {
-        "@webitel/ui-chats": {
+        '@webitel/ui-chats': {
             ui: {
                 messaging: {
                     chatsFileBlocked: string;
+                    chatsIncorrectFileSize: string;
                     textAreaPlaceholder: string;
                 };
             };
         };
     };
     es: {
-        "@webitel/ui-chats": {
+        '@webitel/ui-chats': {
             ui: {
                 messaging: {
                     chatsFileBlocked: string;
+                    chatsIncorrectFileSize: string;
                     textAreaPlaceholder: string;
                 };
             };
         };
     };
     kz: {
-        "@webitel/ui-chats": {
+        '@webitel/ui-chats': {
             ui: {
                 messaging: {
                     chatsFileBlocked: string;
+                    chatsIncorrectFileSize: string;
                     textAreaPlaceholder: string;
                 };
             };
         };
     };
     pl: {
-        "@webitel/ui-chats": {
+        '@webitel/ui-chats': {
             ui: {
                 messaging: {
                     chatsFileBlocked: string;
+                    chatsIncorrectFileSize: string;
                     textAreaPlaceholder: string;
                 };
             };
         };
     };
     ro: {
-        "@webitel/ui-chats": {
+        '@webitel/ui-chats': {
             ui: {
                 messaging: {
                     chatsFileBlocked: string;
+                    chatsIncorrectFileSize: string;
                     textAreaPlaceholder: string;
                 };
             };
         };
     };
     uz: {
-        "@webitel/ui-chats": {
+        '@webitel/ui-chats': {
             ui: {
                 messaging: {
                     chatsFileBlocked: string;
+                    chatsIncorrectFileSize: string;
                     textAreaPlaceholder: string;
                 };
             };
         };
     };
     vi: {
-        "@webitel/ui-chats": {
+        '@webitel/ui-chats': {
             ui: {
                 messaging: {
                     chatsFileBlocked: string;
+                    chatsIncorrectFileSize: string;
                     textAreaPlaceholder: string;
                 };
             };
         };
     };
 };
-export { en, uk, ru, es, kz, pl, ro, uz, vi };
+export { en, es, kz, pl, ro, ru, uk, uz, vi };

package/types/locale/kz/kz.d.ts

@@ -1,8 +1,9 @@
 declare const _default: {
-    "@webitel/ui-chats": {
+    '@webitel/ui-chats': {
         ui: {
             messaging: {
                 chatsFileBlocked: string;
+                chatsIncorrectFileSize: string;
                 textAreaPlaceholder: string;
             };
         };

package/types/locale/pl/pl.d.ts

@@ -1,8 +1,9 @@
 declare const _default: {
-    "@webitel/ui-chats": {
+    '@webitel/ui-chats': {
         ui: {
             messaging: {
                 chatsFileBlocked: string;
+                chatsIncorrectFileSize: string;
                 textAreaPlaceholder: string;
             };
         };

package/types/locale/ro/ro.d.ts

@@ -1,8 +1,9 @@
 declare const _default: {
-    "@webitel/ui-chats": {
+    '@webitel/ui-chats': {
         ui: {
             messaging: {
                 chatsFileBlocked: string;
+                chatsIncorrectFileSize: string;
                 textAreaPlaceholder: string;
             };
         };

package/types/locale/ru/ru.d.ts

@@ -1,8 +1,9 @@
 declare const _default: {
-    "@webitel/ui-chats": {
+    '@webitel/ui-chats': {
         ui: {
             messaging: {
                 chatsFileBlocked: string;
+                chatsIncorrectFileSize: string;
                 textAreaPlaceholder: string;
             };
         };

package/types/locale/uk/uk.d.ts

@@ -1,8 +1,9 @@
 declare const _default: {
-    "@webitel/ui-chats": {
+    '@webitel/ui-chats': {
         ui: {
             messaging: {
                 chatsFileBlocked: string;
+                chatsIncorrectFileSize: string;
                 textAreaPlaceholder: string;
             };
         };

package/types/locale/uz/uz.d.ts

@@ -1,8 +1,9 @@
 declare const _default: {
-    "@webitel/ui-chats": {
+    '@webitel/ui-chats': {
         ui: {
             messaging: {
                 chatsFileBlocked: string;
+                chatsIncorrectFileSize: string;
                 textAreaPlaceholder: string;
             };
         };

package/types/locale/vi/vi.d.ts

@@ -1,8 +1,9 @@
 declare const _default: {
-    "@webitel/ui-chats": {
+    '@webitel/ui-chats': {
         ui: {
             messaging: {
                 chatsFileBlocked: string;
+                chatsIncorrectFileSize: string;
                 textAreaPlaceholder: string;
             };
         };

package/types/ui/chat-footer/components/chat-footer-wrapper.vue.d.ts

@@ -1,5 +1,5 @@
 type __VLS_Slots = {
-    default: () => any;
+    default: () => unknown;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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 "../enums/ChatAction.enum";
+import { ChatAction, type SharedActionSlots } from '../enums/ChatAction.enum';
 type __VLS_Props = {
     actions: ChatAction[];
 };

package/types/ui/chat-footer/modules/user-input/components/chat-text-field.vue.d.ts

@@ -1,6 +1,6 @@
-import { type MaybeRef } from "vue";
+import { type MaybeRef } from 'vue';
 type __VLS_ModelProps = {
-    "text": MaybeRef<string>;
+    'text': MaybeRef<string>;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     enter: () => any;

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

@@ -1,4 +1,4 @@
-import type { ChatMessageType } from "../types/ChatMessage.types";
+import type { ChatMessageType } from '../types/ChatMessage.types';
 type __VLS_Props = {
     messages: ChatMessageType[];
     next?: boolean;

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

@@ -1,5 +1,5 @@
-import { type ComputedRef, type Ref } from "vue";
-import type { ChatMessageType } from "../types/ChatMessage.types";
+import { type ComputedRef, type Ref } from 'vue';
+import type { ChatMessageType } from '../types/ChatMessage.types';
 export declare const useChatScroll: (element: Ref<HTMLElement | null>, messages: Ref<ChatMessageType[]> | ComputedRef<ChatMessageType[]>) => {
     showScrollToBottomBtn: Ref<boolean, boolean>;
     newUnseenMessagesCount: Ref<number, number>;

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

@@ -1,4 +1,4 @@
-import { Ref } from "vue";
+import { type Ref } from 'vue';
 interface UseDropzoneHandlers {
     isDropzoneVisible: Ref<boolean>;
     handleDragEnter: () => void;

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

@@ -5,11 +5,11 @@ type __VLS_Props = {
     withoutAvatars?: boolean;
     username?: string;
 };
-declare var __VLS_1: {}, __VLS_45: {};
+declare var __VLS_1: {}, __VLS_52: {};
 type __VLS_Slots = {} & {
     'before-message'?: (props: typeof __VLS_1) => any;
 } & {
-    'after-message'?: (props: typeof __VLS_45) => any;
+    'after-message'?: (props: typeof __VLS_52) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     clickOnImage: () => any;

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

@@ -1,4 +1,4 @@
-import type { ChatMessageFile } from "../../../../types/ChatMessage.types";
+import type { ChatMessageFile } from '../../../../types/ChatMessage.types';
 type __VLS_Props = {
     file: ChatMessageFile;
     selfSide?: boolean;

package/types/ui/messaging/modules/message/components/details/chat-message-size-exceeded-error.vue.d.ts

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

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

@@ -1,5 +1,5 @@
-import { type ComputedRef, type Ref } from "vue";
-import type { ChatMessageType } from "../../../types/ChatMessage.types";
+import type { ComputedRef, Ref } from 'vue';
+import type { ChatMessageType } from '../../../types/ChatMessage.types';
 interface GetMessageResult {
     prevMessage?: ChatMessageType;
     message?: ChatMessageType;

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

@@ -1,4 +1,4 @@
-import { ChatMessageType } from "../../../types/ui";
+import type { ChatMessageType } from '../../../types/ui';
 export type UiChatsEmitterEvents = {
     insertAtCursor: {
         text: string;