@webitel/ui-chats 0.1.4 → 0.1.6

package/package.json

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

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

@@ -16,9 +16,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed, defineEmits, defineProps } from "vue";
+import { computed, defineEmits, defineProps } from 'vue';
 
-import type { ChatMessageFile } from "../../../../types/ChatMessage.types";
+import type { ChatMessageFile } from '../../../../types/ChatMessage.types';
 
 const props = defineProps<{
 	file: ChatMessageFile;
@@ -36,11 +36,13 @@ const emit = defineEmits<{
 const mediaUrl = computed(() => props.file.streamUrl || props.file.url);
 
 function handlePlayerInitialize(player) {
-	emit("initialized", player);
+	emit('initialized', 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,
@@ -49,8 +51,8 @@ function handlePlayerInitialize(player) {
     }
 
     &.plyr--video {
-      max-height: var(--chat-file-max-height);
-      max-width: var(--chat-file-max-width);
+      max-height: $chat-file-max-height;
+      max-width: $chat-file-max-width;
     }
   }
 }

package/src/ui/the-chat-container.vue

@@ -1,53 +1,47 @@
 <template>
   <section class="the-chat-container">
-    <!-- <slot name="header">
-            header goes here
-        </slot> -->
-        <slot name="main">
-          <dropzone
-            v-if="!isDropzoneDisabled && isDropzoneVisible"
-            @dragenter.prevent
-            @dragleave.prevent="handleDragLeave"
-            @drop="sendFile"
+    <slot name="main">
+      <dropzone
+        v-if="!isDropzoneDisabled && isDropzoneVisible"
+        @dragenter.prevent
+        @dragleave.prevent="handleDragLeave"
+        @drop="sendFile"
+      />
+      <messages-container
+        :messages="props.messages"
+        :next="props.canLoadNextMessages"
+        :is-loading="props.isNextMessagesLoading"
+        :without-avatars="props.withoutAvatars"
+        @[ChatAction.LoadNextMessages]="emit(ChatAction.LoadNextMessages)"
+      />
+    </slot>
+    <slot name="footer">
+      <chat-footer-wrapper v-if="!props.readonly">
+        <template #default>
+          <chat-text-field
+            v-model:text="draft"
+            @enter="sendMessage"
           />
-          <messages-container
-            :messages="props.messages"
-            :next="props.canLoadNextMessages"
-            :is-loading="props.isNextMessagesLoading"
-            :without-avatars="props.withoutAvatars"
-            @[ChatAction.LoadNextMessages]="emit(ChatAction.LoadNextMessages)"
+          <chat-input-actions-bar
+            :actions="props.chatActions"
+            @[ChatAction.SendMessage]="sendMessage"
             @[ChatAction.AttachFiles]="sendFile"
-          />
-        </slot>
-        <slot name="footer">
-          <chat-footer-wrapper
-            v-if="chatActions.includes(ChatAction.SendMessage)"
           >
-            <template #default>
-              <chat-text-field
-                v-model:text="draft"
-                @enter="sendMessage"
+            <template
+              v-for="action in slottedChatActions"
+              :key="action"
+              #[action]="{ size }"
+            >
+              <slot
+                :name="`action:${action}`"
+                v-bind="{ size }"
               />
-              <chat-input-actions-bar
-                :actions="props.chatActions"
-                @[ChatAction.SendMessage]="sendMessage"
-                @[ChatAction.AttachFiles]="sendFile"
-              >
-                <template
-                  v-for="action in slottedChatActions"
-                  :key="action"
-                  #[action]="{ size }"
-                >
-                  <slot
-                    :name="`action:${action}`"
-                    v-bind="{ size }"
-                  />
-                </template>
-              </chat-input-actions-bar>
             </template>
-          </chat-footer-wrapper>
-        </slot>
-    </section>
+          </chat-input-actions-bar>
+        </template>
+      </chat-footer-wrapper>
+    </slot>
+  </section>
 </template>
 
 <script setup lang="ts">
@@ -77,6 +71,7 @@ const props = withDefaults(
 		canLoadNextMessages?: boolean; // 'next'
 		isNextMessagesLoading?: boolean;
 		withoutAvatars?: boolean;
+    readonly?: boolean; // hide chat footer with textarea and action-buttons
 	}>(),
 	{
 		size: ComponentSize.MD,
@@ -84,6 +79,7 @@ const props = withDefaults(
 		chatActions: () => [],
 		canLoadNextMessages: false,
 		isNextMessagesLoading: false,
+    readonly: false,
 	},
 );
 

package/types/ui/messaging/modules/message/components/details/chat-message-player.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;
     type: string;