@webitel/ui-chats 0.0.25 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-chats",
-	"version": "0.0.25",
+	"version": "0.1.0",
 	"description": "Reusable Webitel Frontend Code for Chats UI",
 	"workspaces": [
 		"../../",
@@ -16,21 +16,28 @@
 	},
 	"dependencies": {
 		"autolinker": "^4.1.5",
-		"insert-text-at-cursor": "^0.3.0",
-		"mitt": "^3.0.1",
-		"vue": "^3.5.24"
+		"insert-text-at-cursor": "^0.3.0"
 	},
 	"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.95",
-		"@webitel/ui-sdk": "~25.12",
+		"@webitel/styleguide": "^26.2.0-1",
+		"@webitel/ui-sdk": "^26.2.0-4",
+		"mitt": "^3",
 		"typescript": "~5.9.3",
 		"vite": "npm:rolldown-vite@7.2.2",
+		"vue": "^3.5",
 		"vue-tsc": "^3.1.3"
 	},
+	"peerDependencies": {
+		"@webitel/api-services": "^0.1.0",
+		"@webitel/styleguide": "=26.2.0-1",
+		"@webitel/ui-sdk": "=26.2.0-4",
+		"mitt": "^3",
+		"vue": "^3.5"
+	},
 	"type": "module",
 	"main": "index.ts",
 	"types": "index.d.ts",

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

@@ -1,36 +1,39 @@
 <template>
-  <div class="chat-date-divider">
+  <div class="chat-date-divider typo-subtitle-1">
     {{ formattedDate }}
   </div>
 </template>
 
-<script setup lang="ts">
+<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;
+  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>
 
-<style lang="scss" scoped>
-@use '@webitel/styleguide/typography' as *;
-
-  .chat-date-divider {
-    @extend %typo-subtitle-1;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-  }
+<style
+  lang="scss"
+  scoped
+>
+.chat-date-divider {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
 </style>

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

@@ -1,9 +1,12 @@
 <template>
-  <aside class="dropzone dropzone--animated" v-on="$listeners">
+  <aside
+    class="dropzone dropzone--animated"
+    v-on="$listeners"
+  >
     <div class="dropzone__border-animation"></div>
     <article class="dropzone__text-wrapper">
-      <h3 class="dropzone__title">{{ $t('workspaceSec.chat.dropzone.title') }}</h3>
-      <p class="dropzone__description">{{ $t('workspaceSec.chat.dropzone.description') }}</p>
+      <h3 class="dropzone__title typo-heading-2">{{ $t('workspaceSec.chat.dropzone.title') }}</h3>
+      <p class="dropzone__description typo-body-2">{{ $t('workspaceSec.chat.dropzone.description') }}</p>
     </article>
   </aside>
 </template>
@@ -11,9 +14,10 @@
 <script>
 </script>
 
-<style lang="scss" scoped>
-@use '@webitel/styleguide/typography' as *;
-
+<style
+  lang="scss"
+  scoped
+>
 .dropzone {
   position: absolute;
   top: 0;
@@ -36,17 +40,19 @@
     bottom: 0;
     left: 0;
     background: linear-gradient(90deg, var(--primary-color) 50%, transparent 50%),
-    linear-gradient(90deg, var(--primary-color) 50%, transparent 50%),
-    linear-gradient(0deg, var(--primary-color) 50%, transparent 50%),
-    linear-gradient(0deg, var(--primary-color) 50%, transparent 50%);
+      linear-gradient(90deg, var(--primary-color) 50%, transparent 50%),
+      linear-gradient(0deg, var(--primary-color) 50%, transparent 50%),
+      linear-gradient(0deg, var(--primary-color) 50%, transparent 50%);
     background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
     background-size: 15px 4px, 15px 4px, 4px 15px, 4px 15px;
     background-position: 0 0, 100% 100%;
     animation: border-dance 6s infinite linear;
+
     @keyframes border-dance {
       0% {
         background-position: 0 0, 100% 100%, 0 100%, 100% 0;
       }
+
       100% {
         background-position: 100% 0, 0 100%, 0 0, 100% 100%;
       }
@@ -59,12 +65,10 @@
 }
 
 .dropzone__title {
-  @extend %typo-heading-2;
   text-align: center;
 }
 
 .dropzone__description {
-  @extend %typo-body-2;
   text-align: center;
 }
 </style>

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

@@ -3,7 +3,7 @@
 
     <div
       v-show="props.newMessageCount"
-      class="scroll-to-bottom-btn__messages-counter"
+      class="scroll-to-bottom-btn__messages-counter typo-body-2"
     >
       {{ props.newMessageCount }}
     </div>
@@ -34,8 +34,6 @@ const emit = defineEmits<{
 </script>
 
 <style lang="scss" scoped>
-@use '@webitel/styleguide/typography' as *;
-
 .scroll-to-bottom-btn {
   position: absolute;
   bottom: 0;
@@ -46,7 +44,6 @@ const emit = defineEmits<{
   gap: var(--spacing-2xs);
 
   &__messages-counter {
-    @extend %typo-body-2;
     width: 24px;
     height: 24px;
     display: flex;

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

@@ -1,45 +1,48 @@
 <template>
-    <section
-      class="the-chat-messages-container"
-      @click="focusOnInput"
+  <section
+    class="the-chat-messages-container"
+    @click="focusOnInput"
+  >
+    <div
+      ref="messages-container"
+      class="the-chat-messages-container__wrapper wt-scrollbar"
+      @scroll="handleChatScroll"
+      @resize="handleChatResize"
     >
-      <div
-        ref="messages-container"
-        class="the-chat-messages-container__wrapper"
-        @scroll="handleChatScroll"
-        @resize="handleChatResize"
+      <chat-observer
+        v-if="props.next"
+        :next="props.next"
+        :loading="props.isLoading"
+        @[ChatAction.LoadNextMessages]="emit(ChatAction.LoadNextMessages)"
+      />
+      <chat-message
+        v-for="(message, index) of props.messages"
+        :key="message.id"
+        :message="message"
+        :show-avatar="showAvatar(index)"
+        :without-avatars="props.withoutAvatars"
+        @[MessageAction.ClickOnImage]="clickOnImage(message)"
       >
-        <chat-observer
-          v-if="props.next"
-          :next="props.next"
-          :loading="props.isLoading"
-          @[ChatAction.LoadNextMessages]="emit(ChatAction.LoadNextMessages)"
+        <template #before-message>
+          <chat-date-divider
+            v-if="showChatDate(index)"
+            :date="message.createdAt"
           />
-        <chat-message
-          v-for="(message, index) of props.messages"
-          :key="message.id"
-          :message="message"
-          :show-avatar="showAvatar(index)"
-          :without-avatars="props.withoutAvatars"
-          @[MessageAction.ClickOnImage]="clickOnImage(message)"
-        >
-          <template #before-message>
-            <chat-date-divider
-              v-if="showChatDate(index)"
-              :date="message.createdAt"
-            />
-          </template>
-        </chat-message>
-      </div>
-      <scroll-to-bottom-btn
-        v-if="showScrollToBottomBtn"
-        :new-message-count="newUnseenMessagesCount"
-        @scroll="scrollToBottom('smooth')"
-      />
-    </section>
+        </template>
+      </chat-message>
+    </div>
+    <scroll-to-bottom-btn
+      v-if="showScrollToBottomBtn"
+      :new-message-count="newUnseenMessagesCount"
+      @scroll="scrollToBottom('smooth')"
+    />
+  </section>
 </template>
 
-<script setup lang="ts">
+<script
+  setup
+  lang="ts"
+>
 import type { Emitter } from "mitt";
 import {
 	computed,
@@ -64,17 +67,17 @@ import ScrollToBottomBtn from "./scroll-to-bottom-btn.vue";
 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>();
@@ -86,36 +89,37 @@ const { showAvatar, showChatDate } = useChatMessages(
 ); // 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>
 
-<style scoped lang="scss">
-@use '@webitel/styleguide/scroll' as *;
-
+<style
+  scoped
+  lang="scss"
+>
 .the-chat-messages-container {
   position: relative;
   display: flex;
@@ -124,7 +128,6 @@ onMounted(async () => {
 }
 
 .the-chat-messages-container__wrapper {
-  @extend %wt-scrollbar;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
@@ -135,5 +138,4 @@ onMounted(async () => {
   scrollbar-gutter: stable both-edges;
   gap: var(--spacing-xs);
 }
-
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="chat-message-blocked-error">
+  <div class="chat-message-blocked-error typo-body-1">
     <wt-icon
       icon="protection-error"
       color="error"
@@ -20,10 +20,7 @@ const { t } = useI18n();
 <script setup lang="ts">
 </script>
 <style scoped lang="scss">
-@use '@webitel/styleguide/typography' as *;
-
 .chat-message-blocked-error {
-  @extend %typo-body-1;
   background: var(--p-error-highlight-color);
   border-radius: var(--spacing-xs);
   padding: var(--spacing-xs);

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

@@ -8,10 +8,10 @@
       <wt-icon class="chat-message-document__icon" icon="attach" />
     </div>
     <div class="chat-message-document__info-wrapper">
-      <a class="chat-message-document__name" :title="props.file.name">
+      <a class="chat-message-document__name typo-subtitle-2" :title="props.file.name">
         {{ props.file.name }}
       </a>
-      <div class="chat-message-document__size">
+      <div class="chat-message-document__size typo-caption">
         {{ documentSize }}
       </div>
     </div>
@@ -49,8 +49,6 @@ function downloadDocument() {
 </script>
 
 <style lang="scss" scoped>
-@use '@webitel/styleguide/typography' as *;
-
 .chat-message-document {
   display: flex;
   align-items: flex-start;
@@ -74,14 +72,12 @@ function downloadDocument() {
   }
 
   &__name {
-    @extend %typo-subtitle-2;
     cursor: pointer;
     overflow-wrap: break-word;
     color: var(--text-main-color);
   }
 
   &__size {
-    @extend %typo-caption;
     color: var(--text-main-color);
   }
 

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

@@ -1,7 +1,10 @@
 <template>
-  <div class="chat-message-image" @click="emit('open', props.file)">
+  <div
+    class="chat-message-image"
+    @click="emit('open', props.file)"
+  >
     <img
-      class="chat-message-image__img"
+      class="chat-message-image__img typo-body-1"
       :src="props.file.url"
       :alt="props.file.name"
       draggable="false"
@@ -10,30 +13,33 @@
 </template>
 
 
-<script setup lang="ts">
+<script
+  setup
+  lang="ts"
+>
 import { defineEmits, defineProps } from "vue";
 
 import type { ChatMessageFile } from "../../../../types/ChatMessage.types";
 
 const props = defineProps<{
-	file: ChatMessageFile;
+  file: ChatMessageFile;
 }>();
 const emit = defineEmits<{
-	open: [
-		ChatMessageFile,
-	];
+  open: [
+    ChatMessageFile,
+  ];
 }>();
 </script>
 
 
-<style lang="scss" scoped>
-@use '@webitel/styleguide/typography' as *;
-
+<style
+  lang="scss"
+  scoped
+>
 .chat-message-image {
   cursor: pointer;
 
   &__img {
-    @extend %typo-body-1;
     max-height: var(--chat-file-max-height);
     max-width: var(--chat-file-max-width);
     width: 100%;

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

@@ -1,34 +1,37 @@
 <template>
   <p
-    class="chat-message-text"
+    class="chat-message-text typo-body-1"
     v-html="text"
   />
 </template>
 
-<script setup lang="ts">
+<script
+  setup
+  lang="ts"
+>
 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>
 
-<style lang="scss" scoped>
-@use '@webitel/styleguide/typography' as *;
-
+<style
+  lang="scss"
+  scoped
+>
 .chat-message-text {
-  @extend %typo-body-1;
   overflow-wrap: anywhere;
   white-space: pre-line; // read \n as "new line"
   padding: var(--spacing-xs);
@@ -43,5 +46,4 @@ const text = computed(() => {
     text-decoration: revert;
   }
 }
-
 </style>

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

@@ -1,30 +1,35 @@
 <template>
   <aside class="chat-message-time">
-    <div class="chat-message-time__sent-at">
+    <div class="chat-message-time__sent-at typo-caption">
       {{ time }}
     </div>
   </aside>
 </template>
 
 
-<script setup lang="ts">
+<script
+  setup
+  lang="ts"
+>
 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));
 </script>
 
-<style lang="scss" scoped>
-@use '@webitel/styleguide/typography' as *;
+<style
+  lang="scss"
+  scoped
+>
 .chat-message-time {
   display: flex;
   flex-direction: column;
@@ -32,7 +37,6 @@ const time = computed(() => prettifyTime(props.date));
   align-items: flex-end;
 
   &__sent-at {
-    @extend %typo-caption;
     color: var(--text-main-color);
     white-space: nowrap;
   }