@webitel/ui-chats 0.1.11 → 0.1.13

package/package.json

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

package/src/ui/chat-footer/modules/user-input/components/actions/attach-files-action.vue

@@ -1,8 +1,9 @@
 <template>
-  <wt-rounded-action
+  <wt-button
+    :size="size"
     icon="attach"
+    variant="outlined"
     color="secondary"
-    :size="size"
     rounded
     wide
     @click="attachFilesInputRef!.click()"
@@ -17,18 +18,18 @@
 </template>
 
 <script setup lang="ts">
-import { WtRoundedAction } from "@webitel/ui-sdk/components";
-import { ComponentSize } from "@webitel/ui-sdk/enums";
-import { inject, useTemplateRef } from "vue";
+import { WtButton } from '@webitel/ui-sdk/components';
+import { ComponentSize } from '@webitel/ui-sdk/enums';
+import { inject, useTemplateRef } from 'vue';
 
-import { ChatAction } from "../../enums/ChatAction.enum";
+import { ChatAction } from '../../enums/ChatAction.enum';
 
-const size = inject<ComponentSize>("size");
+const size = inject<ComponentSize>('size');
 
 const emit =
 	defineEmits<(e: typeof ChatAction.AttachFiles, files: File[]) => void>();
 
-const attachFilesInputRef = useTemplateRef("attachFilesInput");
+const attachFilesInputRef = useTemplateRef('attachFilesInput');
 
 const handleAttachmentInputChange = (event: Event) => {
 	const files = (event.target as HTMLInputElement).files;

package/src/ui/chat-footer/modules/user-input/components/actions/send-message-action.vue

@@ -1,8 +1,9 @@
 <template>
-  <wt-rounded-action
-    icon="chat-send"
-    color="accent"
+  <wt-button
     :size="size"
+    icon="chat-send"
+    color="secondary"
+    variant="outlined"
     rounded
     wide
     @click="emit(ChatAction.SendMessage)"
@@ -10,12 +11,13 @@
 </template>
 
 <script setup lang="ts">
-import { ComponentSize } from "@webitel/ui-sdk/enums";
-import { inject } from "vue";
+import { WtButton } from '@webitel/ui-sdk/components';
+import { ComponentSize } from '@webitel/ui-sdk/enums';
+import { inject } from 'vue';
 
-import { ChatAction } from "../../enums/ChatAction.enum";
+import { ChatAction } from '../../enums/ChatAction.enum';
 
-const size = inject<ComponentSize>("size");
+const size = inject<ComponentSize>('size');
 
 const emit = defineEmits<(e: typeof ChatAction.SendMessage) => void>();
 </script>

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

@@ -3,13 +3,21 @@
     class="chat-message-player"
     @click="emit('open', props.file)"
   >
+    <wt-vidstack-player
+      v-if="isVideo"
+      static
+      hide-expand
+      stretch
+      :size="ComponentSize.SM"
+      :src="mediaSrc"
+    />
     <wt-player
-      :src="mediaUrl"
-      :mime="props.type"
+      v-else
+      :src="mediaSrc"
       :autoplay="false"
-      :hide-duration="type.includes('video')"
-      reset-on-end
-      reset-volume
+      :closable="false"
+      hide-volume-slider
+      class="chat-message-player__player"
       @initialized="handlePlayerInitialize"
     />
   </div>
@@ -17,6 +25,8 @@
 
 <script setup lang="ts">
 import { computed, defineEmits, defineProps } from 'vue';
+import { WtVidstackPlayer, WtPlayer } from '@webitel/ui-sdk/components';
+import { ComponentSize } from '@webitel/ui-sdk/enums';
 
 import type { ChatMessageFile } from '../../../../types/ChatMessage.types';
 
@@ -24,6 +34,7 @@ const props = defineProps<{
 	file: ChatMessageFile;
 	type: string;
 }>();
+
 const emit = defineEmits<{
 	open: [
 		ChatMessageFile,
@@ -33,7 +44,15 @@ const emit = defineEmits<{
 	];
 }>();
 
-const mediaUrl = computed(() => props.file.streamUrl || props.file.url);
+const isVideo = computed(() => {
+	return mediaSrc.value?.type?.includes('video');
+});
+const mediaSrc = computed(() => {
+	return {
+		src: props.file.streamUrl || props.file.url,
+		type: props.type,
+	};
+});
 
 function handlePlayerInitialize(player) {
 	emit('initialized', player);

package/src/ui/messaging/modules/message/composables/useChatMessageFile.ts

@@ -1,31 +1,39 @@
-import { computed, type Ref, toRef } from "vue";
+import { computed, type Ref, toRef } from 'vue';
 
-import type { ChatMessageFile } from "../../../types/ChatMessage.types";
+import type { ChatMessageFile } from '../../../types/ChatMessage.types';
 
 export function useChatMessageFile(
 	file: ChatMessageFile | Ref<ChatMessageFile>,
 ) {
 	const fileRef = toRef(file);
 
-	const type = computed(() => {
+	const fileType = computed(() => {
 		return fileRef.value?.mime;
 	});
 
+	const fileSrc = computed(() => {
+		return fileRef.value?.streamUrl || fileRef.value?.url;
+	});
+
 	const image = computed(() => {
-		const isImage = type.value?.includes("image");
-		const isHEIC = type.value?.includes("heic");
+		const isImage = fileType.value?.includes('image');
+		const isHEIC = fileType.value?.includes('heic');
 
 		if (isHEIC) return null;
 
 		return isImage && fileRef.value; //https://webitel.atlassian.net/browse/WTEL-6268
 	});
-
 	const media = computed(() => {
-		const isMedia =
-			type.value?.includes("audio") || type.value?.includes("video");
-		return isMedia && fileRef.value;
+		return (
+			fileRef.value &&
+			(isMediaType(fileType.value) || isMediaType(fileSrc.value))
+		);
 	});
 
+	const isMediaType = (value: string) => {
+		return !!(value?.includes('audio') || value?.includes('video'));
+	};
+
 	const document = computed(() => {
 		return !media.value && !image.value && fileRef.value;
 	});

package/types/ui/messaging/modules/message/composables/useChatMessageFile.d.ts

@@ -1,15 +1,8 @@
-import { type Ref } from "vue";
-import type { ChatMessageFile } from "../../../types/ChatMessage.types";
+import { type Ref } from 'vue';
+import type { ChatMessageFile } from '../../../types/ChatMessage.types';
 export declare function useChatMessageFile(file: ChatMessageFile | Ref<ChatMessageFile>): {
     image: import("vue").ComputedRef<ChatMessageFile>;
-    media: import("vue").ComputedRef<ChatMessageFile | {
-        id?: string;
-        name?: string;
-        size?: string;
-        mime?: string;
-        url?: string;
-        streamUrl?: string;
-    }>;
+    media: import("vue").ComputedRef<boolean>;
     document: import("vue").ComputedRef<ChatMessageFile | {
         id?: string;
         name?: string;