@webitel/ui-chats 0.1.9 → 0.1.11

package/package.json

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

package/src/ui/media-viewer/media-viewer.vue

@@ -0,0 +1,69 @@
+<template>
+  <aside
+    v-if="media"
+    class="media-viewer"
+    @click="close"
+  >
+    <div class="media-viewer__shadow" />
+    <div class="media-viewer__content-wrapper">
+      <img
+        class="media-viewer__content-img"
+        :src="media.url"
+        :alt="media.name"
+      >
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import type { ChatMessageFile } from '../messaging/types/ChatMessage.types';
+
+defineProps<{
+	media: ChatMessageFile | null;
+}>();
+
+const emit = defineEmits<{
+	close: [];
+}>();
+
+function close() {
+	emit('close');
+}
+</script>
+
+<style scoped>
+.media-viewer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: var(--popup-wrapper-z-index);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.media-viewer__shadow {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: var(--wt-popup-shadow-color);
+}
+
+.media-viewer__content-wrapper {
+  position: relative;
+  z-index: 1;
+}
+
+.media-viewer__content-img {
+  /* like on web telegram preview */
+  display: block;
+  max-width: 100vw;
+  max-height: 90vh;
+  object-fit: contain;
+  margin: auto;
+}
+</style>

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

@@ -1,5 +1,9 @@
 <template>
   <section class="the-chat-container">
+    <media-viewer
+      :media="mediaView"
+      @close="closeMedia"
+    />
     <slot name="main">
       <dropzone
         v-if="!isDropzoneDisabled && isDropzoneVisible"
@@ -45,23 +49,26 @@
 </template>
 
 <script setup lang="ts">
-import { ComponentSize } from "@webitel/ui-sdk/enums";
-import { computed, provide, ref } from "vue";
+import { ComponentSize } from '@webitel/ui-sdk/enums';
+import { computed, provide, ref } from 'vue';
 
-import ChatFooterWrapper from "./chat-footer/components/chat-footer-wrapper.vue";
-import ChatInputActionsBar from "./chat-footer/modules/user-input/components/chat-input-actions-bar.vue";
-import ChatTextField from "./chat-footer/modules/user-input/components/chat-text-field.vue";
+import ChatFooterWrapper from './chat-footer/components/chat-footer-wrapper.vue';
+import ChatInputActionsBar from './chat-footer/modules/user-input/components/chat-input-actions-bar.vue';
+import ChatTextField from './chat-footer/modules/user-input/components/chat-text-field.vue';
 import {
 	ChatAction,
 	type SharedActionSlots,
-} from "./chat-footer/modules/user-input/enums/ChatAction.enum";
-import Dropzone from "./messaging/components/dropzone.vue";
-import MessagesContainer from "./messaging/components/the-messages-container.vue";
-import { useDropzoneHandlers } from "./messaging/composables/useDropzoneHandlers";
-import { MessageAction } from "./messaging/modules/message/enums/MessageAction.enum";
-import type { ChatMessageType } from "./messaging/types/ChatMessage.types";
-import { createUiChatsEmitter } from "./utils/emitter";
-import type { ResultCallbacks } from "./utils/ResultCallbacks.types";
+} from './chat-footer/modules/user-input/enums/ChatAction.enum';
+import MediaViewer from './media-viewer/media-viewer.vue';
+import Dropzone from './messaging/components/dropzone.vue';
+import MessagesContainer from './messaging/components/the-messages-container.vue';
+import { useDropzoneHandlers } from './messaging/composables/useDropzoneHandlers';
+import type {
+	ChatMessageFile,
+	ChatMessageType,
+} from './messaging/types/ChatMessage.types';
+import { createUiChatsEmitter } from './utils/emitter';
+import type { ResultCallbacks } from './utils/ResultCallbacks.types';
 
 const props = withDefaults(
 	defineProps<{
@@ -71,7 +78,7 @@ const props = withDefaults(
 		canLoadNextMessages?: boolean; // 'next'
 		isNextMessagesLoading?: boolean;
 		withoutAvatars?: boolean;
-    readonly?: boolean; // hide chat footer with textarea and action-buttons
+		readonly?: boolean; // hide chat footer with textarea and action-buttons
 	}>(),
 	{
 		size: ComponentSize.MD,
@@ -79,7 +86,7 @@ const props = withDefaults(
 		chatActions: () => [],
 		canLoadNextMessages: false,
 		isNextMessagesLoading: false,
-    readonly: false,
+		readonly: false,
 	},
 );
 
@@ -95,7 +102,6 @@ const emit = defineEmits<{
 		options: ResultCallbacks,
 	): void;
 	(e: typeof ChatAction.LoadNextMessages): void;
-	(e: typeof MessageAction.ClickOnImage, message: ChatMessageType): void;
 }>();
 
 const slots = defineSlots<
@@ -107,20 +113,30 @@ const slots = defineSlots<
 
 const uiChatsEmitter = createUiChatsEmitter();
 
-provide("size", props.size);
-provide("uiChatsEmitter", uiChatsEmitter);
+provide('size', props.size);
+provide('uiChatsEmitter', uiChatsEmitter);
 
-uiChatsEmitter?.on("clickChatMessageImage", (message) => {
-	emit(MessageAction.ClickOnImage, message);
+const mediaView = ref<ChatMessageFile | null>(null);
+
+uiChatsEmitter?.on('clickChatMessageImage', (message) => {
+	openMedia(message);
 });
 const { isDropzoneVisible, handleDragLeave } = useDropzoneHandlers();
 
-const draft = ref<string>("");
+function openMedia(message: ChatMessageType) {
+	mediaView.value = message.file ?? null;
+}
+
+function closeMedia() {
+	mediaView.value = null;
+}
+
+const draft = ref<string>('');
 
 const slottedChatActions = computed(() => {
 	return Object.keys(slots)
-		.filter((key) => key.startsWith("action:"))
-		.map((key) => key.replace("action:", ""));
+		.filter((key) => key.startsWith('action:'))
+		.map((key) => key.replace('action:', ''));
 });
 const isDropzoneDisabled = computed(
 	() => !props.chatActions.includes(ChatAction.AttachFiles),
@@ -128,7 +144,7 @@ const isDropzoneDisabled = computed(
 
 function sendMessage() {
 	emit(`action:${ChatAction.SendMessage}`, draft.value, {
-		onSuccess: () => (draft.value = ""),
+		onSuccess: () => (draft.value = ''),
 	});
 }
 

package/types/ui/media-viewer/media-viewer.vue.d.ts

@@ -0,0 +1,11 @@
+import type { ChatMessageFile } from '../messaging/types/ChatMessage.types';
+type __VLS_Props = {
+    media: ChatMessageFile | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: () => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;