@webitel/ui-chats 0.1.19 → 0.1.21

package/package.json

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

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

@@ -13,10 +13,12 @@
         v-if="!props.withoutAvatars"
         class="chat-message__avatar-wrapper"
       >
-        <message-avatar
+        <wt-avatar
           v-if="props.showAvatar"
-          :bot="isBot"
           :username="getClientUsername"
+          :size="size"
+          :src="ComponentSize.SM || size"
+          :bot="isBot"
         />
       </div>
       <!--    click.stop prevents focus on textarea and allows to select the message-new text -->
@@ -54,19 +56,18 @@
 </template>
 
   <script setup lang="ts">
-import { ComponentSize } from "@webitel/ui-sdk/enums";
-import { computed, defineEmits, defineProps, inject } from "vue";
-
-import type { ChatMessageType } from "../../../types/ChatMessage.types";
-import { useChatMessageFile } from "../composables/useChatMessageFile";
-import { MessageAction } from "../enums/MessageAction.enum";
-import MessageAvatar from "./details/chat-message-avatar.vue";
-import MessageBlockedError from "./details/chat-message-blocked-error.vue";
-import MessageDocument from "./details/chat-message-document.vue";
-import MessageImage from "./details/chat-message-image.vue";
-import MessagePlayer from "./details/chat-message-player.vue";
-import MessageText from "./details/chat-message-text.vue";
-import MessageTime from "./details/chat-message-time.vue";
+import { ComponentSize } from '@webitel/ui-sdk/enums';
+import { computed, defineEmits, defineProps, inject } from 'vue';
+
+import type { ChatMessageType } from '../../../types/ChatMessage.types';
+import { useChatMessageFile } from '../composables/useChatMessageFile';
+import { MessageAction } from '../enums/MessageAction.enum';
+import MessageBlockedError from './details/chat-message-blocked-error.vue';
+import MessageDocument from './details/chat-message-document.vue';
+import MessageImage from './details/chat-message-image.vue';
+import MessagePlayer from './details/chat-message-player.vue';
+import MessageText from './details/chat-message-text.vue';
+import MessageTime from './details/chat-message-time.vue';
 
 const props = withDefaults(
 	defineProps<{
@@ -78,7 +79,7 @@ const props = withDefaults(
 	{
 		showAvatar: false,
 		withoutAvatars: false,
-		username: "",
+		username: '',
 	},
 );
 
@@ -87,17 +88,17 @@ const emit = defineEmits<{
 	(e: typeof MessageAction.InitializedPlayer, player: object): void;
 }>();
 
-const size = inject<ComponentSize>("size");
+const size = inject<ComponentSize>('size');
 
 const { image, media, document } = useChatMessageFile(props.message.file);
 
 const isSelfSide = computed<boolean>(
-	() => props.message.member?.self || props.message.member?.type === "webitel",
+	() => props.message.member?.self || props.message.member?.type === 'webitel',
 );
-const isBot = computed<boolean>(() => props.message.member?.type === "bot");
+const isBot = computed<boolean>(() => props.message.member?.type === 'bot');
 
 const getClientUsername = computed<string>(() => {
-	return !isSelfSide.value ? props.username : ""; // need to show username avatar only for client
+	return !isSelfSide.value ? props.username : ''; // need to show username avatar only for client
 });
 
 function handlePlayerInitialize(player) {
@@ -134,11 +135,7 @@ function handlePlayerInitialize(player) {
 .chat-message__avatar-wrapper {
   flex: 0 0 var(--spacing-lg);
   width: var(--wt-avatar-size--size-sm);
-}
-
-.chat-message-avatar {
-  width: 100%;
-  flex: 0 0 var(--icon-lg-size);
+  pointer-events: none; /* prevents dragging to upload file area */
 }
 
 .chat-message--right .chat-message__content {

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

@@ -1,15 +1,15 @@
-import type { ChatMessageType } from "../../../types/ChatMessage.types";
+import type { ChatMessageType } from '../../../types/ChatMessage.types';
 type __VLS_Props = {
     message: ChatMessageType;
     showAvatar?: boolean;
     withoutAvatars?: boolean;
     username?: string;
 };
-declare var __VLS_1: {}, __VLS_44: {};
+declare var __VLS_1: {}, __VLS_45: {};
 type __VLS_Slots = {} & {
     'before-message'?: (props: typeof __VLS_1) => any;
 } & {
-    'after-message'?: (props: typeof __VLS_44) => any;
+    'after-message'?: (props: typeof __VLS_45) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     clickOnImage: () => any;
@@ -18,9 +18,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     onClickOnImage?: () => any;
     onInitializedPlayer?: (player: object) => any;
 }>, {
-    username: string;
     showAvatar: boolean;
     withoutAvatars: boolean;
+    username: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -1,44 +0,0 @@
-<template>
-  <div
-    class="chat-message-avatar"
-  >
-    <wt-avatar
-      :username="props.username"
-      :size="size"
-      :src="src"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { WtAvatar } from "@webitel/ui-sdk/components";
-import { ComponentSize } from "@webitel/ui-sdk/enums";
-import { computed, defineProps, inject } from "vue";
-
-import botIcon from "../../../../../../assets/icons/bot.svg";
-
-const props = withDefaults(
-	defineProps<{
-		bot?: boolean;
-		username?: string;
-	}>(),
-	{
-		bot: false,
-		username: "",
-	},
-);
-
-const injectedSize = inject<ComponentSize>("size");
-
-const size = computed(() => {
-	return ComponentSize.SM || injectedSize; // todo: should injected size be considered?
-});
-
-const src = computed(() => props.bot && botIcon);
-</script>
-
-<style lang="scss" scoped>
-.chat-message-avatar {
-  pointer-events: none; // prevents dragging to upload file area
-}
-</style>