@webitel/ui-chats 0.0.3 → 0.0.4

package/package.json

@@ -1,63 +1,63 @@
 {
-  "name": "@webitel/ui-chats",
-  "version": "0.0.3",
-  "description": "Reusable Webitel Frontend Code for Chats UI",
-  "workspaces": [
-    "../../",
-    "../api-services"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "make-all": "npm version patch --git-tag-version false && (npm run lint:oxlint || 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:oxlint": "npx oxlint . --fix --type-aware",
-    "utils:publish": "npm publish --access public"
-  },
-  "dependencies": {
-    "autolinker": "^4.1.5",
-    "insert-text-at-cursor": "^0.3.0",
-    "mitt": "^3.0.1",
-    "vue": "^3.5.24"
-  },
-  "devDependencies": {
-    "@types/node": "^24.10.0",
-    "@vitejs/plugin-vue": "^6.0.1",
-    "@vue/tsconfig": "^0.8.1",
-    "@webitel/styleguide": "^24.12.61",
-    "@webitel/ui-sdk": "~25.12",
-    "oxlint-tsgolint": "^0.5.1",
-    "typescript": "~5.9.3",
-    "vite": "npm:rolldown-vite@7.2.2",
-    "vue-tsc": "^3.1.3"
-  },
-  "type": "module",
-  "main": "index.ts",
-  "types": "index.d.ts",
-  "files": [
-    "src/*",
-    "types/*",
-    "Readme.md",
-    "CHANGELOG.md"
-  ],
-  "exports": {
-    "./ui": {
-      "types": "./types/ui/index.d.ts",
-      "import": "./src/ui/index.ts"
-    }
-  },
-  "author": "webitel",
-  "license": "ISC",
-  "keywords": [
-    "webitel",
-    "webitel-ui"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "github.com/webitel/webitel-ui-sdk"
-  },
-  "engines": {
-    "npm": ">=10",
-    "node": ">=v22"
-  }
+	"name": "@webitel/ui-chats",
+	"version": "0.0.4",
+	"description": "Reusable Webitel Frontend Code for Chats UI",
+	"workspaces": [
+		"../../",
+		"../api-services"
+	],
+	"scripts": {
+		"dev": "vite",
+		"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",
+		"utils:publish": "npm publish --access public"
+	},
+	"dependencies": {
+		"autolinker": "^4.1.5",
+		"insert-text-at-cursor": "^0.3.0",
+		"mitt": "^3.0.1",
+		"vue": "^3.5.24"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "2.3.8",
+		"@types/node": "^24.10.0",
+		"@vitejs/plugin-vue": "^6.0.1",
+		"@vue/tsconfig": "^0.8.1",
+		"@webitel/styleguide": "^24.12.61",
+		"@webitel/ui-sdk": "~25.12",
+		"typescript": "~5.9.3",
+		"vite": "npm:rolldown-vite@7.2.2",
+		"vue-tsc": "^3.1.3"
+	},
+	"type": "module",
+	"main": "index.ts",
+	"types": "index.d.ts",
+	"files": [
+		"src/*",
+		"types/*",
+		"Readme.md",
+		"CHANGELOG.md"
+	],
+	"exports": {
+		"./ui": {
+			"types": "./types/ui/index.d.ts",
+			"import": "./src/ui/index.ts"
+		}
+	},
+	"author": "webitel",
+	"license": "ISC",
+	"keywords": [
+		"webitel",
+		"webitel-ui"
+	],
+	"repository": {
+		"type": "git",
+		"url": "github.com/webitel/webitel-ui-sdk"
+	},
+	"engines": {
+		"npm": ">=10",
+		"node": ">=v22"
+	}
 }

package/src/locale/en/en.ts

@@ -1,9 +1,9 @@
 export default {
-  '@webitel/ui-chats': {
-    ui: {
-      messaging: {
-        chatsFileBlocked: 'TODO',
-      },
-    },
-  },
-};
+	"@webitel/ui-chats": {
+		ui: {
+			messaging: {
+				chatsFileBlocked: "TODO",
+			},
+		},
+	},
+};

package/src/ui/chat-container.vue

@@ -35,63 +35,72 @@
 </template>
 
 <script setup lang="ts">
-import { provide, ref, computed } from 'vue';
-import { ComponentSize } from '@webitel/ui-sdk/enums';
-import ChatMessagesContainer from './messaging/components/chat-messages-container.vue';
+import { ComponentSize } from "@webitel/ui-sdk/enums";
+import { computed, provide, ref } from "vue";
+import {
+	ChatAction,
+	type SharedActionSlots,
+} from "./chat-footer/modules/user-input/types/ChatAction.types";
+import type { ChatMessageType } from "./messaging/types/ChatMessage.types";
+import { createUiChatsEmitter } from "./utils/emitter";
+import type { ResultCallbacks } from "./utils/ResultCallbacks.types";
 
-import { ResultCallbacks } from './utils/ResultCallbacks.types';
-import ChatFooterWrapper from './chat-footer/components/chat-footer-wrapper.vue';
-import ChatTextField from './chat-footer/modules/user-input/components/chat-text-field.vue';
-import ChatInputActionsBar from './chat-footer/modules/user-input/components/chat-input-actions-bar.vue';
-import { createUiChatsEmitter } from './utils/emitter';
-import { ChatMessageType } from './messaging/types/ChatMessage.types';
-import { ChatAction, SharedActionSlots } from './chat-footer/modules/user-input/types/ChatAction.types';
-
-const props = withDefaults(defineProps<{
-  messages: ChatMessageType[];
-  chatActions?: ChatAction[];
-  size?: ComponentSize;
-}>(), {
-  size: ComponentSize.MD,
-  chatActions: () => [ChatAction.SendMessage],
-});
+const props = withDefaults(
+	defineProps<{
+		messages: ChatMessageType[];
+		chatActions?: ChatAction[];
+		size?: ComponentSize;
+	}>(),
+	{
+		size: ComponentSize.MD,
+		chatActions: () => [
+			ChatAction.SendMessage,
+		],
+	},
+);
 
 const emit = defineEmits<{
-  (e: `action:${typeof ChatAction.SendMessage}`, text: string, options: ResultCallbacks): void;
-  (e: `action:${typeof ChatAction.AttachFiles}`, files: File[], options: ResultCallbacks): void;
+	(
+		e: `action:${typeof ChatAction.SendMessage}`,
+		text: string,
+		options: ResultCallbacks,
+	): void;
+	(
+		e: `action:${typeof ChatAction.AttachFiles}`,
+		files: File[],
+		options: ResultCallbacks,
+	): void;
 }>();
 
-const slots = defineSlots<{
-  main: () => any;
-  footer: () => any;
-} & SharedActionSlots>();
+const slots = defineSlots<
+	{
+		main: () => any;
+		footer: () => any;
+	} & SharedActionSlots
+>();
 
 const uiChatsEmitter = createUiChatsEmitter();
 
-provide('size', props.size);
-provide('uiChatsEmitter', uiChatsEmitter);
+provide("size", props.size);
+provide("uiChatsEmitter", uiChatsEmitter);
 
-const draft = ref<string>('');
+const draft = ref<string>("");
 
-const slottedChatActions = computed(() => {
-  return Object.keys(slots)
-  .filter((key) => key.startsWith('action:'))
-  .map((key) => key.replace('action:', ''));
+const _slottedChatActions = computed(() => {
+	return Object.keys(slots)
+		.filter((key) => key.startsWith("action:"))
+		.map((key) => key.replace("action:", ""));
 });
 
-function sendMessage() {
-  emit(`action:${ChatAction.SendMessage}`, 
-    draft.value, 
-    {
-    onSuccess: () => draft.value = '',
-  });
+function _sendMessage() {
+	emit(`action:${ChatAction.SendMessage}`, draft.value, {
+		onSuccess: () => (draft.value = ""),
+	});
 }
 
-function sendFile(files: File[]) {
-  emit(`action:${ChatAction.AttachFiles}`, files, {
-  });
+function _sendFile(files: File[]) {
+	emit(`action:${ChatAction.AttachFiles}`, files, {});
 }
-
 </script>
 
 <style scoped>

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

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

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

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

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

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

@@ -10,14 +10,11 @@
 </template>
 
 <script setup lang="ts">
-import { inject } from 'vue';
-import { ComponentSize } from '@webitel/ui-sdk/enums';
-import { ChatAction } from '../../types/ChatAction.types';
+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;
-}>();
+const _size = inject<ComponentSize>("size");
 
+const _emit = defineEmits<(e: typeof ChatAction.SendMessage) => void>();
 </script>

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

@@ -17,52 +17,49 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject } from 'vue';
-import { ComponentSize } from '@webitel/ui-sdk/enums';
+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";
 
-import { ChatAction } from '../types/ChatAction.types'; 
-import SendMessageAction from './actions/send-message-action.vue';
-import AttachFilesAction from './actions/attach-files-action.vue';
-import EmojiPickerAction from './actions/emoji-picker-action.vue';
-import { SharedActionSlots } from '../types/ChatAction.types';
-
-const size = inject<ComponentSize>('size');
+const _size = inject<ComponentSize>("size");
 
 const props = defineProps<{
-  actions: ChatAction[];
+	actions: ChatAction[];
 }>();
 
-const emit = defineEmits<{
-  (e: typeof ChatAction.SendMessage): void;
-  (e: typeof ChatAction.AttachFiles, files: File[]): void;
+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(() => {
-  /**
-   * note! actions order is declared here and cannot be changed from outside
-   */
-  return [
-    {
-      action: ChatAction.AttachFiles,
-      component: AttachFilesAction,
-    },
-    {
-      action: ChatAction.EmojiPicker,
-      component: EmojiPickerAction,
-    },
-    {
-      action: ChatAction.QuickReplies,
-      component: null, // has no component inside lib, should be provided by pkg-client application
-    },
-    {
-      action: ChatAction.SendMessage,
-      component: SendMessageAction,
-    },
-  ].filter(({ action }) => props.actions.includes(action));
+const _ShownActionComponentsList = computed(() => {
+	/**
+	 * note! actions order is declared here and cannot be changed from outside
+	 */
+	return [
+		{
+			action: ChatAction.AttachFiles,
+			component: AttachFilesAction,
+		},
+		{
+			action: ChatAction.EmojiPicker,
+			component: EmojiPickerAction,
+		},
+		{
+			action: ChatAction.QuickReplies,
+			component: null, // has no component inside lib, should be provided by pkg-client application
+		},
+		{
+			action: ChatAction.SendMessage,
+			component: SendMessageAction,
+		},
+	].filter(({ action }) => props.actions.includes(action));
 });
-
 </script>
 
 <style scoped>

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

@@ -8,32 +8,37 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, useTemplateRef, MaybeRef } from 'vue';
-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 type { WtTextarea } from "@webitel/ui-sdk/components";
+import type { 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 type { UiChatsEmitterEvents } from '../../../../utils/emitter';
+import type { UiChatsEmitterEvents } from "../../../../utils/emitter";
 
-const textModel = defineModel<MaybeRef<string>>('text', { required: true });
+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);
+uiChatsEmitter?.on("insertAtCursor", ({ text }) => insertAtCursor(text));
+uiChatsEmitter?.on("focusOnTextField", focus);
 
-const chatTextFieldInputRef = useTemplateRef<typeof WtTextarea>('chatTextFieldInput');
+const chatTextFieldInputRef =
+	useTemplateRef<typeof WtTextarea>("chatTextFieldInput");
 
-const textareaEl = computed(() => chatTextFieldInputRef.value?.$el.querySelector('textarea'));
+const textareaEl = computed(() =>
+	chatTextFieldInputRef.value?.$el.querySelector("textarea"),
+);
 
 function focus() {
-  textareaEl.value!.focus();
-};
+	textareaEl.value?.focus();
+}
 
 function insertAtCursor(text: string) {
-  focus();
-  insertTextAtCursor(textareaEl.value!, text);
+	focus();
+	insertTextAtCursor(textareaEl.value!, text);
 }
 </script>

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

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

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 "./chat-container.vue";
+export { ChatAction } from "./chat-footer/modules/user-input/types/ChatAction.types";
+export type { ChatMessageType } from "./messaging/types/ChatMessage.types";

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

@@ -9,11 +9,11 @@
 </template>
 
 <script setup lang="ts">
-import { ChatMessageType } from '../types/ChatMessage.types';
-// import ChatMessageComponent from '../modules/message/components/chat-message.vue';
+import type { ChatMessageType } from "../types/ChatMessage.types";
 
+// import ChatMessageComponent from '../modules/message/components/chat-message.vue';
 
-const props = defineProps<{
-    messages: ChatMessageType[];
+const _props = defineProps<{
+	messages: ChatMessageType[];
 }>();
 </script>

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

@@ -0,0 +1,102 @@
+import { useScroll } from "@vueuse/core";
+import { computed, type Ref, ref, watch } from "vue";
+
+import type { ChatMessageType } from "../types/ChatMessage.types";
+
+export const useChatScroll = (
+	element: Ref<HTMLElement | null> = null,
+	chatMessages: ChatMessageType[] = [],
+) => {
+	const defaultThreshold = 136;
+	const { arrivedState } = useScroll(element.value);
+
+	const newUnseenMessages = ref<number>(0);
+	const showScrollToBottomBtn = ref<boolean>(false);
+	/* @author ye.pohranichna
+    the distance where the scrollToBottomBtn must be shown/hide.
+    why defaultThreshold=136px? because: https://webitel.atlassian.net/browse/WTEL-7136 */
+	const threshold = ref<number>(defaultThreshold);
+	const messages = ref<ChatMessageType[]>(chatMessages);
+
+	const lastMessage = computed<ChatMessageType>(
+		() => messages.value[messages.value?.length - 1],
+	);
+
+	const isLastMessageIsMy = computed<boolean>(() =>
+		Boolean(lastMessage.value?.member?.self),
+	);
+
+	const scrollToBottom = (behavior: ScrollBehavior = "instant") => {
+		element.value?.scrollTo({
+			top: element.value?.scrollHeight,
+			behavior: behavior === "instant" ? "auto" : behavior,
+		});
+
+		newUnseenMessages.value = 0;
+		showScrollToBottomBtn.value = false;
+	};
+
+	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;
+		}
+
+		const { scrollTop, scrollHeight, clientHeight } = el;
+		const distanceFromBottom = scrollHeight - (scrollTop + clientHeight);
+		showScrollToBottomBtn.value = distanceFromBottom > threshold.value;
+	};
+
+	const updateThreshold = (el: HTMLElement) => {
+		/* @author ye.pohranichna
+      need to update if clientHeight was changed
+      https://webitel.atlassian.net/browse/WTEL-7136 */
+		threshold.value = Math.max(defaultThreshold, el.clientHeight * 0.3);
+	};
+
+	const scrollToBottomAfterNewMessage = () => {
+		if (arrivedState.bottom || isLastMessageIsMy.value) {
+			scrollToBottom("smooth");
+		} else {
+			newUnseenMessages.value += 1;
+		}
+	};
+	const handleChatScroll = () => {
+		const wrapper = element.value;
+		if (!wrapper) return;
+
+		handleShowScrollToBottomBtn(wrapper);
+	};
+
+	const handleChatResize = () => {
+		const wrapper = element.value;
+		if (!wrapper) return;
+
+		updateThreshold(wrapper);
+		handleShowScrollToBottomBtn(wrapper);
+	};
+
+	watch(
+		() => messages.value?.length,
+		(newValue, oldValue) => {
+			const newMessageReceived = newValue - oldValue === 1; // when chat have just 1 new message @author ye.pohranichna
+			if (newMessageReceived) scrollToBottomAfterNewMessage();
+		},
+		{
+			flush: "post",
+		},
+	);
+
+	return {
+		showScrollToBottomBtn,
+		newUnseenMessages,
+		scrollToBottom,
+		handleChatScroll,
+		handleChatResize,
+	};
+};