@webitel/ui-chats 0.1.37 → 0.1.39

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-chats",
-	"version": "0.1.37",
+	"version": "0.1.39",
 	"description": "Reusable Webitel Frontend Code for Chats UI",
 	"workspaces": [
 		"../../",
@@ -24,7 +24,7 @@
 		"insert-text-at-cursor": "^0.3.0"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "2.4.10",
+		"@biomejs/biome": "2.4.16",
 		"@types/node": "^24.10.0",
 		"@vitejs/plugin-vue": "^6.0.1",
 		"@vue/tsconfig": "^0.8.1",

package/src/css/main.css

@@ -4,4 +4,7 @@
 	--chat-audio-player-min-width: 250px;
 	--chat-video-player-height: 201px;
 	--chat-video-player-width: 256px;
+	--chat-message-timestamp-spacer-width: 2rem;
+	--chat-message-timestamp-spacer-height: 1.5rem;
+	--chat-message-timestamp-bottom-offset: 0.75rem;
 }

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

@@ -27,7 +27,7 @@
         :self-side="isSelfSide"
         @click.stop
       />
-      <div v-else @click.stop>
+      <div class="chat-message__body" v-else @click.stop>
         <message-player
           v-if="media"
           :file="media"
@@ -45,12 +45,23 @@
           :file="document"
           :self-side="isSelfSide"
         />
-        <message-text
+        <div
           v-if="props.message?.text"
-          :text="props.message.text"
+          class="chat-message-text-wrapper"
+        >
+          <message-text
+            :text="props.message.text"
+            :with-timestamp-spacer="true"
+          />
+          <message-time :date="props.message.createdAt" />
+        </div>
+        <message-time
+          v-else
+          :date="props.message.createdAt"
         />
       </div>
       <message-time
+        v-if="message.file?.malware || isFileSizeExceeded"
         :date="props.message.createdAt"
       />
     </div>
@@ -165,10 +176,32 @@ function handlePlayerInitialize(player) {
   margin: 0 var(--spacing-2xs) 0 var(--spacing-md);
 }
 
-.chat-message--right .chat-message-text {
+.chat-message--right .chat-message__body {
   background: var(--secondary-light-color);
   color: var(--secondary-on-color);
   place-self: flex-end;
 }
 
+.chat-message__body {
+  position: relative;
+  overflow-wrap: anywhere;
+  white-space: pre-line;
+  padding: var(--spacing-xs);
+  border-radius: var(--border-radius);
+  background: var(--primary-light-color);
+  color: var(--primary-on-color);
+  place-self: flex-start;
+}
+
+.chat-message-time {
+  margin-top: var(--p-player-chat-message-gap);
+}
+
+.chat-message-text-wrapper .chat-message-time {
+  position: absolute;
+  right: var(--spacing-xs);
+  bottom: var(--chat-message-timestamp-bottom-offset);
+  pointer-events: none;
+}
+
 </style>

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

@@ -8,6 +8,7 @@
       :size="ComponentSize.SM"
       :src="mediaSrc"
       :title="file.name"
+      countdown-time-mode
       static
       hide-expand
       stretch
@@ -17,6 +18,7 @@
       :src="mediaSrc"
       :autoplay="false"
       :closable="false"
+      countdown-time-mode
       hide-volume-slider
       hide-mute-button
       class="chat-message-player__audio"

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

@@ -1,8 +1,12 @@
 <template>
-  <p
-    class="chat-message-text typo-body-1"
-    v-html="text"
-  />
+  <p class="chat-message-text typo-body-1">
+    <span v-html="linkedText" />
+    <span
+      v-if="withTimestampSpacer"
+      class="chat-message-text__timestamp-spacer"
+      aria-hidden="true"
+    />
+  </p>
 </template>
 
 <script
@@ -10,13 +14,14 @@
   lang="ts"
 >
 import Autolinker from 'autolinker';
-import { computed, defineProps } from 'vue';
+import { computed } from 'vue';
 
 const props = defineProps<{
 	text: string;
+	withTimestampSpacer?: boolean;
 }>();
 
-const text = computed(() => {
+const linkedText = 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, {
@@ -32,18 +37,20 @@ const text = computed(() => {
   scoped
 >
 .chat-message-text {
-  overflow-wrap: anywhere;
-  white-space: pre-line; // read \n as "new line"
-  padding: var(--spacing-xs);
-  border-radius: var(--border-radius);
-  background: var(--primary-light-color);
-  color: var(--primary-on-color);
-  place-self: flex-start;
-
   // reset links inside text
   :deep(.chat-message-text__link) {
     color: revert;
     text-decoration: revert;
   }
+
+  /* @author @Oleksandr Palonnyi */
+  /* https://webitel.atlassian.net/browse/WTEL-9588?focusedCommentId=763440 */
+  /* [WTEL-9588](https://webitel.atlassian.net/browse/WTEL-9588) */
+  :deep(.chat-message-text__timestamp-spacer) {
+    display: inline-block;
+    width: var(--chat-message-timestamp-spacer-width);
+    height: var(--chat-message-timestamp-spacer-height);
+    vertical-align: bottom;
+  }
 }
 </style>

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

@@ -6,11 +6,11 @@ type __VLS_Props = {
     username?: string;
     agentName?: string;
 };
-declare var __VLS_1: {}, __VLS_52: {};
+declare var __VLS_1: {}, __VLS_62: {};
 type __VLS_Slots = {} & {
     'before-message'?: (props: typeof __VLS_1) => any;
 } & {
-    'after-message'?: (props: typeof __VLS_52) => any;
+    'after-message'?: (props: typeof __VLS_62) => 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-text.vue.d.ts

@@ -1,5 +1,6 @@
 type __VLS_Props = {
     text: string;
+    withTimestampSpacer?: boolean;
 };
 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;