@webitel/ui-chats 0.1.12 → 0.1.14

package/package.json

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

package/src/css/main.css

@@ -0,0 +1,4 @@
+#app {
+	--chat-file-max-height: 280px;
+	--chat-file-max-width: 280px;
+}

package/src/index.ts

@@ -1 +1,2 @@
+import './css/main.css';
 export { setConfig } from './config/config';

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-image.vue

@@ -17,32 +17,31 @@
   setup
   lang="ts"
 >
-import { defineEmits, defineProps } from "vue";
+import { defineEmits, defineProps } from 'vue';
 
-import type { ChatMessageFile } from "../../../../types/ChatMessage.types";
+import type { ChatMessageFile } from '../../../../types/ChatMessage.types';
 
 const props = defineProps<{
-  file: ChatMessageFile;
+	file: ChatMessageFile;
 }>();
 const emit = defineEmits<{
-  open: [
-    ChatMessageFile,
-  ];
+	open: [
+		ChatMessageFile,
+	];
 }>();
 </script>
 
 
 <style
-  lang="scss"
   scoped
 >
 .chat-message-image {
   cursor: pointer;
+}
 
-  &__img {
-    max-height: var(--chat-file-max-height);
-    max-width: var(--chat-file-max-width);
-    width: 100%;
-  }
+.chat-message-image__img {
+  max-height: var(--chat-file-max-height);
+  max-width: var(--chat-file-max-width);
+  width: 100%;
 }
 </style>

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

@@ -60,19 +60,8 @@ function handlePlayerInitialize(player) {
 </script>
 
 <style lang="scss" scoped>
-$chat-file-max-width: 280px;
-$chat-file-max-height: 280px;
-.chat-message-player {
-  .wt-player :deep(.plyr) {
-    .wt-player__close-icon,
-    .plyr__volume {
-      display: none;
-    }
-
-    &.plyr--video {
-      max-height: $chat-file-max-height;
-      max-width: $chat-file-max-width;
-    }
-  }
+.chat-message-player :deep(.wt-vidstack-player) {
+  max-height: var(--chat-file-max-height);
+  max-width: var(--chat-file-max-width);
 }
 </style>

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

@@ -25,8 +25,8 @@ export function useChatMessageFile(
 	});
 	const media = computed(() => {
 		return (
-			fileRef.value &&
-			(isMediaType(fileType.value) || isMediaType(fileSrc.value))
+			(isMediaType(fileType.value) || isMediaType(fileSrc.value)) &&
+			fileRef.value
 		);
 	});
 

package/types/index.d.ts

@@ -1 +1,2 @@
+import './css/main.css';
 export { setConfig } from './config/config';

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

@@ -1,4 +1,4 @@
-import type { ChatMessageFile } from "../../../../types/ChatMessage.types";
+import type { ChatMessageFile } from '../../../../types/ChatMessage.types';
 type __VLS_Props = {
     file: ChatMessageFile;
 };

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

@@ -2,7 +2,14 @@ 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<boolean>;
+    media: import("vue").ComputedRef<ChatMessageFile | {
+        id?: string;
+        name?: string;
+        size?: string;
+        mime?: string;
+        url?: string;
+        streamUrl?: string;
+    }>;
     document: import("vue").ComputedRef<ChatMessageFile | {
         id?: string;
         name?: string;