@webitel/ui-chats 0.1.43 → 0.1.44

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-chats",
-	"version": "0.1.43",
+	"version": "0.1.44",
 	"description": "Reusable Webitel Frontend Code for Chats UI",
 	"workspaces": [
 		"../../",

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;
   }