@webitel/ui-chats 0.0.7 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-chats",
-	"version": "0.0.7",
+	"version": "0.0.9",
 	"description": "Reusable Webitel Frontend Code for Chats UI",
 	"workspaces": [
 		"../../",
@@ -11,7 +11,7 @@
 		"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 --unsafe",
+		"lint:biome": "biome check --write",
 		"utils:publish": "npm publish --access public"
 	},
 	"dependencies": {

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

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

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

@@ -17,18 +17,19 @@
 </template>
 
 <script setup lang="ts">
+import { WtRoundedAction } from "@webitel/ui-sdk/components";
 import type { ComponentSize } from "@webitel/ui-sdk/enums";
 import { inject, useTemplateRef } from "vue";
 import { ChatAction } from "../../types/ChatAction.types";
 
-const _size = inject<ComponentSize>("size");
+const size = inject<ComponentSize>("size");
 
 const emit =
 	defineEmits<(e: typeof ChatAction.AttachFiles, files: File[]) => void>();
 
-const _attachFilesInputRef = useTemplateRef("attachFilesInput");
+const attachFilesInputRef = useTemplateRef("attachFilesInput");
 
-const _handleAttachmentInputChange = (event: Event) => {
+const handleAttachmentInputChange = (event: Event) => {
 	const files = (event.target as HTMLInputElement).files;
 	if (!files) return;
 	emit(ChatAction.AttachFiles, Array.from(files) as File[]);

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

@@ -6,12 +6,13 @@
 </template>
 
 <script setup lang="ts">
+import { WtChatEmoji } from "@webitel/ui-sdk/components";
 import type { ComponentSize } from "@webitel/ui-sdk/enums";
 import type { Emitter } from "mitt";
 import { inject } from "vue";
 
 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>

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

@@ -12,10 +12,9 @@
 <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 size = inject<ComponentSize>("size");
 
-const _emit = defineEmits<(e: typeof ChatAction.SendMessage) => void>();
+const emit = defineEmits<(e: typeof ChatAction.SendMessage) => void>();
 </script>

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

@@ -19,26 +19,25 @@
 <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";
 import SendMessageAction from "./actions/send-message-action.vue";
 
-const _size = inject<ComponentSize>("size");
+const size = inject<ComponentSize>("size");
 
 const props = defineProps<{
 	actions: ChatAction[];
 }>();
 
-const _emit = defineEmits<{
+const emit = defineEmits<{
 	(e: typeof ChatAction.SendMessage): void;
 	(e: typeof ChatAction.AttachFiles, files: File[]): void;
 }>();
 
-const _slots = defineSlots<SharedActionSlots>();
+const slots = defineSlots<SharedActionSlots>();
 
-const _ShownActionComponentsList = computed(() => {
+const ShownActionComponentsList = computed(() => {
 	/**
 	 * note! actions order is declared here and cannot be changed from outside
 	 */

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

@@ -16,15 +16,15 @@ import { computed, inject, type MaybeRef, useTemplateRef } from "vue";
 
 import type { UiChatsEmitterEvents } from "../../../../utils/emitter";
 
-const _textModel = defineModel<MaybeRef<string>>("text", {
+const textModel = defineModel<MaybeRef<string>>("text", {
 	required: true,
 });
 
-const _size = inject<ComponentSize>("size");
+const size = inject<ComponentSize>("size");
 const uiChatsEmitter = inject<Emitter<UiChatsEmitterEvents>>("uiChatsEmitter");
 
-uiChatsEmitter?.on("insertAtCursor", ({ text }) => insertAtCursor(text));
-uiChatsEmitter?.on("focusOnTextField", focus);
+uiChatsEmitter!.on("insertAtCursor", ({ text }) => insertAtCursor(text));
+uiChatsEmitter!.on("focusOnTextField", focus);
 
 const chatTextFieldInputRef =
 	useTemplateRef<typeof WtTextarea>("chatTextFieldInput");
@@ -34,7 +34,7 @@ const textareaEl = computed(() =>
 );
 
 function focus() {
-	textareaEl.value?.focus();
+	textareaEl.value!.focus();
 }
 
 function insertAtCursor(text: string) {

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

@@ -16,7 +16,7 @@ const props = defineProps<{
 
 const { t } = useI18n();
 
-const _formattedDate = computed<Date>(() => {
+const formattedDate = computed<Date>(() => {
 	const chatDate = formatDate(+props.date, FormatDateMode.DATE);
 	const today = formatDate(Date.now(), FormatDateMode.DATE);
 

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

@@ -19,7 +19,7 @@
 <script setup lang="ts">
 import { defineEmits } from "vue";
 
-const _props = withDefaults(
+const props = withDefaults(
 	defineProps<{
 		newMessageCount?: number;
 	}>(),
@@ -28,7 +28,7 @@ const _props = withDefaults(
 	},
 );
 
-const _emit = defineEmits<{
+const emit = defineEmits<{
 	scroll: [];
 }>();
 </script>

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

@@ -34,8 +34,11 @@ import { inject, useTemplateRef } from "vue";
 
 import type { UiChatsEmitterEvents } from "../../utils/emitter";
 import { useChatScroll } from "../composebles/useChatScroll";
+import ChatMessage from "../modules/message/components/chat-message.vue";
 import { useChatMessages } from "../modules/message/composables/useChatMessage";
 import type { ChatMessageType } from "../types/ChatMessage.types";
+import ChatDateDivider from "./chat-date-divider.vue";
+import ScrollToBottomBtn from "./scroll-to-bottom-btn.vue";
 
 const uiChatsEmitter = inject<Emitter<UiChatsEmitterEvents>>("uiChatsEmitter");
 
@@ -61,7 +64,7 @@ const {
 	handleChatResize,
 } = useChatScroll(messagesContainer, props.messages);
 
-function _focusOnInput() {
+function focusOnInput() {
 	uiChatsEmitter?.on("focusOnTextField", focus);
 }
 </script>

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

@@ -1,5 +1,5 @@
 import { useScroll } from "@vueuse/core";
-import { computed, type Ref, ref, watch } from "vue";
+import { type ComputedRef, computed, type Ref, ref, watch } from "vue";
 
 import type { ChatMessageType } from "../types/ChatMessage.types";
 

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

@@ -55,6 +55,13 @@ import { computed, defineEmits, defineProps, inject } from "vue";
 
 import type { ChatMessageType } from "../../../types/ChatMessage.types";
 import { useChatMessageFile } from "../composables/useChatMessageFile";
+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";
+import MessageImage from "./details/chat-message-image.vue";
+import MessagePlayer from "./details/chat-message-player.vue";
+import MessageText from "./details/chat-message-text.vue";
+import MessageTime from "./details/chat-message-time.vue";
 
 const props = withDefaults(
 	defineProps<{
@@ -75,27 +82,27 @@ const emit = defineEmits<{
 	];
 }>();
 
-const _size = inject<ComponentSize>("size");
+const size = inject<ComponentSize>("size");
 
 const { image, media, document } = useChatMessageFile(props.message.file);
 
-const isSelfMessage = computed(
+const isSelfMessage = computed<boolean>(
 	() => props.message.member?.self || props.message.member?.type === "webitel",
 );
 
-const isBot = computed(
+const isBot = computed<boolean>(
 	() =>
 		props.message.member?.type === "bot" ||
 		(!props.message.member?.type && !props.message.channelId),
 );
 
-const isSelfSide = computed(() => isSelfMessage.value || isBot.value);
+const isSelfSide = computed<boolean>(() => isSelfMessage.value || isBot.value);
 
-const _getClientUsername = computed(() => {
+const getClientUsername = computed<string>(() => {
 	return !isSelfSide.value ? props.username : ""; // need to show username avatar only for client
 });
 
-function _handlePlayerInitialize(player) {
+function handlePlayerInitialize(player) {
 	emit("initialized-player", {
 		player,
 	});

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

@@ -11,6 +11,7 @@
 </template>
 
 <script setup lang="ts">
+import { WtAvatar } from "@webitel/ui-sdk/components";
 import { ComponentSize } from "@webitel/ui-sdk/enums";
 import { computed, defineProps, inject } from "vue";
 
@@ -29,11 +30,11 @@ const props = withDefaults(
 
 const injectedSize = inject<ComponentSize>("size");
 
-const _size = computed(() => {
+const size = computed(() => {
 	return ComponentSize.SM || injectedSize; // todo: should injected size be considered?
 });
 
-const _src = computed(() => props.bot && botIcon);
+const src = computed(() => props.bot && botIcon);
 </script>
 
 <style lang="scss" scoped>

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

@@ -33,12 +33,12 @@ const props = withDefaults(
 		selfSide: false,
 	},
 );
-const _documentSize = computed(() => {
+const documentSize = computed(() => {
 	if (!props.file) return "";
 	return prettifyFileSize(props.file.size);
 });
 
-function _downloadDocument() {
+function downloadDocument() {
 	if (!props.file) return;
 	const a = document.createElement("a");
 	a.href = props.file.url;

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

@@ -15,10 +15,10 @@ import { defineEmits, defineProps } from "vue";
 
 import type { ChatMessageFile } from "../../../../types/ChatMessage.types";
 
-const _props = defineProps<{
+const props = defineProps<{
 	file: ChatMessageFile;
 }>();
-const _emit = defineEmits<{
+const emit = defineEmits<{
 	open: [
 		ChatMessageFile,
 	];

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

@@ -33,9 +33,9 @@ const emit = defineEmits<{
 	];
 }>();
 
-const _mediaUrl = computed(() => props.file.streamUrl || props.file.url);
+const mediaUrl = computed(() => props.file.streamUrl || props.file.url);
 
-function _handlePlayerInitialize(player) {
+function handlePlayerInitialize(player) {
 	emit("initialized", player);
 }
 </script>

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

@@ -13,7 +13,7 @@ const props = defineProps<{
 	text: string;
 }>();
 
-const _text = computed(() => {
+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, {

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

@@ -20,7 +20,7 @@ const props = withDefaults(
 	},
 );
 
-const _time = computed(() => prettifyTime(props.date));
+const time = computed(() => prettifyTime(props.date));
 </script>
 
 <style lang="scss" scoped>

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

@@ -41,10 +41,14 @@
 import { ComponentSize } from "@webitel/ui-sdk/enums";
 import { computed, provide, ref } from "vue";
 
+import ChatFooterWrapper from "./chat-footer/components/chat-footer-wrapper.vue";
+import ChatInputActionsBar from "./chat-footer/modules/user-input/components/chat-input-actions-bar.vue";
+import ChatTextField from "./chat-footer/modules/user-input/components/chat-text-field.vue";
 import {
 	ChatAction,
 	type SharedActionSlots,
 } from "./chat-footer/modules/user-input/types/ChatAction.types";
+import ChatMessagesContainer from "./messaging/components/the-chat-messages-container.vue";
 import type { ChatMessageType } from "./messaging/types/ChatMessage.types";
 import { createUiChatsEmitter } from "./utils/emitter";
 import type { ResultCallbacks } from "./utils/ResultCallbacks.types";
@@ -92,19 +96,19 @@ provide("uiChatsEmitter", uiChatsEmitter);
 
 const draft = ref<string>("");
 
-const _slottedChatActions = computed(() => {
+const slottedChatActions = computed(() => {
 	return Object.keys(slots)
 		.filter((key) => key.startsWith("action:"))
 		.map((key) => key.replace("action:", ""));
 });
 
-function _sendMessage() {
+function sendMessage() {
 	emit(`action:${ChatAction.SendMessage}`, draft.value, {
 		onSuccess: () => (draft.value = ""),
 	});
 }
 
-function _sendFile(files: File[]) {
+function sendFile(files: File[]) {
 	emit(`action:${ChatAction.AttachFiles}`, files, {});
 }
 </script>

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

@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 import { ComponentSize } from "@webitel/ui-sdk/enums";
 import {
 	ChatAction,
@@ -5,15 +6,22 @@ import {
 } from "./chat-footer/modules/user-input/types/ChatAction.types";
 import type { ChatMessageType } from "./messaging/types/ChatMessage.types";
 import type { ResultCallbacks } from "./utils/ResultCallbacks.types";
+=======
+import { ComponentSize } from '@webitel/ui-sdk/enums';
+import { ResultCallbacks } from './utils/ResultCallbacks.types';
+import { ChatMessageType } from './messaging/types/ChatMessage.types';
+import { ChatAction, SharedActionSlots } from './chat-footer/modules/user-input/types/ChatAction.types';
+>>>>>>> parent of 420ffe845 (refactor: oxlint/oxfmt replaced to biome, + reformatted all files)
 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;
+<<<<<<< HEAD
 declare const __VLS_base: import("vue").DefineComponent<
 	__VLS_Props,
 	{},
@@ -46,11 +54,23 @@ declare const __VLS_base: import("vue").DefineComponent<
 	{},
 	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;
+    chatActions: ChatAction[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+>>>>>>> parent of 420ffe845 (refactor: oxlint/oxfmt replaced to biome, + reformatted all files)
 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/messaging/components/chat-messages-container.vue.d.ts

@@ -1,28 +1,11 @@
+<<<<<<< HEAD
 import type { ChatMessageType } from "../types/ChatMessage.types";
+=======
+import { ChatMessageType } from '../types/ChatMessage.types';
+>>>>>>> parent of 420ffe845 (refactor: oxlint/oxfmt replaced to biome, + reformatted all files)
 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/modules/message/components/chat-message.vue.d.ts

@@ -4,11 +4,11 @@ type __VLS_Props = {
     showAvatar?: boolean;
     username?: string;
 };
-declare var __VLS_1: {}, __VLS_51: {};
+declare var __VLS_1: {}, __VLS_44: {};
 type __VLS_Slots = {} & {
     'before-message'?: (props: typeof __VLS_1) => any;
 } & {
-    'after-message'?: (props: typeof __VLS_51) => any;
+    '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;
@@ -17,8 +17,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onOpen-image"?: () => any;
     "onInitialized-player"?: (args_0: object) => any;
 }>, {
-    showAvatar: boolean;
     username: string;
+    showAvatar: 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/messaging/modules/message/components/details/chat-message-avatar.vue.d.ts

@@ -3,8 +3,8 @@ type __VLS_Props = {
     username?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    username: string;
     bot: boolean;
+    username: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -4,11 +4,11 @@ type __VLS_Props = {
     type: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    initialized: (args_0: object) => any;
     open: (args_0: ChatMessageFile) => any;
+    initialized: (args_0: object) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onInitialized?: (args_0: object) => any;
     onOpen?: (args_0: ChatMessageFile) => any;
+    onInitialized?: (args_0: object) => any;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -19,9 +19,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onAction:sendMessage"?: (text: string, options: ResultCallbacks) => any;
     "onAction:attachFiles"?: (files: File[], options: ResultCallbacks) => any;
 }>, {
-    chatActions: ChatAction[];
     size: ComponentSize;
     hideAvatars: 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;