@webitel/ui-chats 0.0.3 → 0.0.5

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.5",
+	"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-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,12 @@
 </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";
 
-const size = inject<ComponentSize>('size');
+import type { ChatAction } from "../../types/ChatAction.types";
 
-const emit = defineEmits<{
-  (e: typeof ChatAction.SendMessage): void;
-}>();
+const _size = inject<ComponentSize>("size");
 
-</script>
+const _emit = defineEmits<(e: typeof ChatAction.SendMessage) => void>();
+</script>

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

@@ -9,60 +9,58 @@
       <component
        :is="actionComponent"
        :size="size"
-       @sendMessage="emit(ChatAction.SendMessage)"
-       @attachFiles="emit(ChatAction.AttachFiles, $event)"
+       @send-message="emit(ChatAction.SendMessage)"
+       @attach-files="emit(ChatAction.AttachFiles, $event)"
       />
     </slot>
   </section>
 </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 } 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';
+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[];
+	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>
@@ -74,4 +72,4 @@ const ShownActionComponentsList = computed(() => {
     flex: 1;
   }
 }
-</style>
+</style>

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

@@ -1,39 +1,44 @@
 <template>
     <wt-textarea
-        v-model="textModel"
         ref="chatTextFieldInput"
+        v-model="textModel"
         :size="size"
         autoresize
     />
 </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>
+</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 { ChatAction } from "./chat-footer/modules/user-input/types/ChatAction.types";
+export type { ChatMessageType } from "./messaging/types/ChatMessage.types";
+export { default as ChatContainerComponent } from "./the-chat-container.vue";

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

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

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

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

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

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