@webitel/ui-chats 0.1.42 → 0.1.44

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-chats",
-	"version": "0.1.42",
+	"version": "0.1.44",
 	"description": "Reusable Webitel Frontend Code for Chats UI",
 	"workspaces": [
 		"../../",
@@ -9,7 +9,7 @@
 	],
 	"scripts": {
 		"dev": "vite",
-		"build:types": "vue-tsc -p ./tsconfig.build.json",
+		"build:types": "vue-tsc -b tsconfig.build.json",
 		"typecheck": "vue-tsc --noEmit -p ./tsconfig.typecheck.json",
 		"lint:fix": "npx biome check --write ./src",
 		"biome:ci:gh": "biome ci ./src --reporter=github",

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

@@ -23,6 +23,12 @@ export interface UseChatScrollOptions {
 	onBeforeStart?: (options: {
 		scrollToBottom: (behavior?: ScrollBehavior) => void;
 	}) => void;
+	/**
+	 * @author ye-pohranichna
+	 * Fired when the viewer is at the bottom and has therefore seen the
+	 * latest messages
+	 */
+	onSeen?: () => void;
 }
 
 export const useChatScroll = ({
@@ -35,6 +41,7 @@ export const useChatScroll = ({
 	onBeforeStart = (options) => {
 		options.scrollToBottom();
 	},
+	onSeen,
 }: UseChatScrollOptions) => {
 	const { arrivedState } = useScroll(chatContainer);
 
@@ -82,6 +89,7 @@ export const useChatScroll = ({
 		newUnseenMessagesCount.value = 0;
 
 		resetScrollToBottomBtn();
+		onSeen?.();
 	};
 	const getTopMessageEl = () => {
 		// help to fix chat viewing position when new messages was loaded
@@ -237,7 +245,10 @@ export const useChatScroll = ({
 	watch(
 		() => arrivedState.bottom,
 		(bottom) => {
-			if (bottom) newUnseenMessagesCount.value = 0;
+			if (bottom) {
+				newUnseenMessagesCount.value = 0;
+				onSeen?.();
+			}
 		},
 	);
 

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

@@ -21,49 +21,53 @@
         />
       </div>
       <!--    click.stop prevents focus on textarea and allows to select the message-new text -->
-      <message-blocked-error v-if="message.file?.malware" @click.stop />
-      <message-size-exceeded-error
-        v-else-if="isFileSizeExceeded"
-        :self-side="isSelfSide"
+      <div
+        class="chat-message__body"
+        :class="{ 'chat-message__body--malware': isFileMalware }"
         @click.stop
-      />
-      <div class="chat-message__body" v-else @click.stop>
-        <message-player
-          v-if="media"
-          :file="media"
-          :type="media.mime"
-          :size="size"
-          @initialized="handlePlayerInitialize"
-        />
-        <message-image
-          v-else-if="image"
-          :file="image"
-          @open="emit(MessageAction.ClickOnImage)"
-        />
-        <message-document
-          v-else-if="document"
-          :file="document"
-          :self-side="isSelfSide"
-        />
-        <div
-          v-if="props.message?.text"
-          class="chat-message-text-wrapper"
-        >
-          <message-text
-            :text="props.message.text"
-            :with-timestamp-spacer="true"
+      >
+        <template v-if="hasFileError">
+          <message-blocked-error v-if="isFileMalware" />
+          <message-size-exceeded-error
+            v-else-if="isFileSizeExceeded"
+            :self-side="isSelfSide"
           />
           <message-time :date="props.message.createdAt" />
-        </div>
-        <message-time
-          v-else
-          :date="props.message.createdAt"
-        />
+        </template>
+        <template v-else>
+          <message-player
+            v-if="media"
+            :file="media"
+            :type="media.mime"
+            :size="size"
+            @initialized="handlePlayerInitialize"
+          />
+          <message-image
+            v-else-if="image"
+            :file="image"
+            @open="emit(MessageAction.ClickOnImage)"
+          />
+          <message-document
+            v-else-if="document"
+            :file="document"
+            :self-side="isSelfSide"
+          />
+          <div
+            v-if="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"
+          />
+        </template>
       </div>
-      <message-time
-        v-if="message.file?.malware || isFileSizeExceeded"
-        :date="props.message.createdAt"
-      />
     </div>
 
     <slot name="after-message" />
@@ -112,6 +116,12 @@ const isFileSizeExceeded = computed<boolean>(
 	() => !!props.message.file && !props.message.file?.size,
 );
 
+const isFileMalware = computed<boolean>(() => !!props.message.file?.malware);
+
+const hasFileError = computed<boolean>(
+	() => isFileMalware.value || isFileSizeExceeded.value,
+);
+
 const isInternalMember = computed(
 	() => props.message.member?.type === 'webitel',
 );
@@ -192,6 +202,11 @@ function handlePlayerInitialize(player) {
   place-self: flex-start;
 }
 
+.chat-message__body--malware,
+.chat-message--right .chat-message__body--malware {
+  background: var(--p-error-highlight-color);
+}
+
 .chat-message-time {
   margin-top: var(--p-player-chat-message-gap);
 }

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

@@ -19,9 +19,6 @@ const { t } = useI18n();
 </script>
 <style scoped lang="scss">
 .chat-message-blocked-error {
-  background: var(--p-error-highlight-color);
-  border-radius: var(--spacing-xs);
-  padding: var(--spacing-xs);
   display: flex;
   flex-direction: column;
   align-items: center;

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

@@ -31,9 +31,6 @@ withDefaults(defineProps<IChatMessageSizeExceededErrorProps>(), {
 
 <style scoped lang="scss">
 .chat-message-size-exceeded-error {
-  background: var(--primary-light-color);
-  border-radius: var(--spacing-xs);
-  padding: var(--spacing-xs);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -42,7 +39,6 @@ withDefaults(defineProps<IChatMessageSizeExceededErrorProps>(), {
   text-align: center;
 
   &--right {
-    background: var(--secondary-light-color);
     color: var(--secondary-on-color);
     place-self: flex-end;
   }

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />