@webitel/ui-chats 0.0.17 → 0.0.18

package/package.json

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

package/src/ui/index.ts

@@ -1,3 +1,4 @@
 export { ChatAction } from "./chat-footer/modules/user-input/enums/ChatAction.enum";
+export { MessageAction } from "./messaging/modules/message/enums/MessageAction.enum";
 export type { ChatMessageType } from "./messaging/types/ChatMessage.types";
 export { default as ChatContainer } from "./the-chat-container.vue";

package/src/ui/messaging/components/the-chat-messages-container.vue

@@ -15,6 +15,7 @@
           :message="message"
           :show-avatar="showAvatar(index)"
           :without-avatars="props.withoutAvatars"
+          @[MessageAction.ClickOnImage]="clickOnImage(message)"
         >
           <template #before-message>
             <chat-date-divider
@@ -40,6 +41,7 @@ import type { UiChatsEmitterEvents } from "../../utils/emitter";
 import { useChatScroll } from "../composables/useChatScroll";
 import ChatMessage from "../modules/message/components/chat-message.vue";
 import { useChatMessages } from "../modules/message/composables/useChatMessage";
+import { MessageAction } from "../modules/message/enums/MessageAction.enum";
 import type { ChatMessageType } from "../types/ChatMessage.types";
 import ChatDateDivider from "./chat-date-divider.vue";
 import ScrollToBottomBtn from "./scroll-to-bottom-btn.vue";
@@ -75,6 +77,10 @@ function focusOnInput() {
 	uiChatsEmitter?.on("focusOnTextField", focus);
 }
 
+function clickOnImage(message: ChatMessageType) {
+	uiChatsEmitter!.emit("clickChatMessageImage", message);
+}
+
 onMounted(() => {
 	nextTick(() => {
 		scrollToBottom();

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

@@ -32,7 +32,7 @@
         <message-image
           v-else-if="image"
           :file="image"
-          @open="emit('open-image')"
+          @open="emit(MessageAction.ClickOnImage)"
         />
         <message-document
           v-else-if="document"
@@ -58,6 +58,7 @@ 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";
@@ -81,10 +82,8 @@ const props = withDefaults(
 );
 
 const emit = defineEmits<{
-	"open-image": [];
-	"initialized-player": [
-		object,
-	];
+	(e: typeof MessageAction.ClickOnImage): void;
+	(e: typeof MessageAction.InitializedPlayer, player: object): void;
 }>();
 
 const size = inject<ComponentSize>("size");
@@ -108,7 +107,7 @@ const getClientUsername = computed<string>(() => {
 });
 
 function handlePlayerInitialize(player) {
-	emit("initialized-player", {
+	emit(MessageAction.InitializedPlayer, {
 		player,
 	});
 }

package/src/ui/messaging/modules/message/enums/MessageAction.enum.ts

@@ -0,0 +1,6 @@
+export const MessageAction = {
+	ClickOnImage: "clickOnImage",
+	InitializedPlayer: "initializedPlayer",
+} as const;
+
+export type MessageAction = (typeof MessageAction)[keyof typeof MessageAction];

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

@@ -58,6 +58,7 @@ import {
 import Dropzone from "./messaging/components/dropzone.vue";
 import ChatMessagesContainer from "./messaging/components/the-chat-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";
@@ -89,6 +90,7 @@ const emit = defineEmits<{
 		files: File[],
 		options: ResultCallbacks,
 	): void;
+	(e: typeof MessageAction.ClickOnImage, message: ChatMessageType): void;
 }>();
 
 const slots = defineSlots<
@@ -103,6 +105,9 @@ const uiChatsEmitter = createUiChatsEmitter();
 provide("size", props.size);
 provide("uiChatsEmitter", uiChatsEmitter);
 
+uiChatsEmitter?.on("clickChatMessageImage", (message) => {
+	emit(MessageAction.ClickOnImage, message);
+});
 const { isDropzoneVisible, handleDragLeave } = useDropzoneHandlers();
 
 const draft = ref<string>("");

package/src/ui/utils/emitter.ts

@@ -1,10 +1,13 @@
 import mitt from "mitt";
 
+import { ChatMessageType } from "../../../types/ui";
+
 export type UiChatsEmitterEvents = {
 	insertAtCursor: {
 		text: string;
 	};
 	focusOnTextField: undefined;
+	clickChatMessageImage: ChatMessageType;
 };
 
 export const createUiChatsEmitter = () => {

package/types/ui/chat-footer/modules/user-input/enums/ChatAction.enum.d.ts

@@ -1,10 +1,10 @@
 export declare const ChatAction: {
-    readonly SendMessage: "sendMessage";
-    readonly AttachFiles: "attachFiles";
-    readonly EmojiPicker: "emojiPicker";
-    readonly QuickReplies: "quickReplies";
+	readonly SendMessage: "sendMessage";
+	readonly AttachFiles: "attachFiles";
+	readonly EmojiPicker: "emojiPicker";
+	readonly QuickReplies: "quickReplies";
 };
 export type ChatAction = (typeof ChatAction)[keyof typeof ChatAction];
 export type SharedActionSlots = {
-    [key in `action:${ChatAction}`]?: () => any;
+	[key in `action:${ChatAction}`]?: () => any;
 };

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

@@ -11,12 +11,12 @@ type __VLS_Slots = {} & {
 } & {
     'after-message'?: (props: typeof __VLS_44) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "open-image": () => any;
-    "initialized-player": (args_0: object) => any;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    clickOnImage: () => any;
+    initializedPlayer: (player: object) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onOpen-image"?: () => any;
-    "onInitialized-player"?: (args_0: object) => any;
+    onClickOnImage?: () => any;
+    onInitializedPlayer?: (player: object) => any;
 }>, {
     username: string;
     showAvatar: boolean;

package/types/ui/messaging/modules/message/enums/MessageAction.enum.d.ts

@@ -0,0 +1,5 @@
+export declare const MessageAction: {
+    readonly ClickOnImage: "clickOnImage";
+    readonly InitializedPlayer: "initializedPlayer";
+};
+export type MessageAction = (typeof MessageAction)[keyof typeof MessageAction];

package/types/ui/messaging/types/ChatMessage.types.d.ts

@@ -1,44 +1,44 @@
 export interface ChatMessageType {
-    id: number;
-    date?: number;
-    file?: ChatMessageFile;
-    member: ChatMember;
-    peer?: ChatMember;
-    chat?: ChatMessageChatInfo;
-    createdAt: number;
-    channelId?: string;
-    updatedAt?: number;
-    contact?: null | ContactInfo;
-    text?: string;
+	id: number;
+	date?: number;
+	file?: ChatMessageFile;
+	member: ChatMember;
+	peer?: ChatMember;
+	chat?: ChatMessageChatInfo;
+	createdAt: number;
+	channelId?: string;
+	updatedAt?: number;
+	contact?: null | ContactInfo;
+	text?: string;
 }
 export type ContactInfo = {
-    id: string;
-    name?: string;
+	id: string;
+	name?: string;
 };
 export type ChatMessageFile = {
-    id?: string;
-    name?: string;
-    size?: string;
-    mime?: string;
-    url?: string;
-    streamUrl?: string;
+	id?: string;
+	name?: string;
+	size?: string;
+	mime?: string;
+	url?: string;
+	streamUrl?: string;
 };
 export type ChatMember = {
-    id: number;
-    name: string;
-    type: string;
-    userId?: number;
-    externalId?: string;
-    via?: ChatVia;
-    self?: boolean;
+	id: number;
+	name: string;
+	type: string;
+	userId?: number;
+	externalId?: string;
+	via?: ChatVia;
+	self?: boolean;
 };
 export type ChatMessageChatInfo = {
-    id: string;
-    via: ChatVia;
+	id: string;
+	via: ChatVia;
 };
 export type ChatVia = {
-    id: number;
-    name: string;
-    type: string;
-    messenger?: string;
+	id: number;
+	name: string;
+	type: string;
+	messenger?: string;
 };

package/types/ui/the-chat-container.vue.d.ts

@@ -1,33 +1,58 @@
 import { ComponentSize } from "@webitel/ui-sdk/enums";
-import { ChatAction, type SharedActionSlots } from "./chat-footer/modules/user-input/enums/ChatAction.enum";
+import {
+	ChatAction,
+	type SharedActionSlots,
+} from "./chat-footer/modules/user-input/enums/ChatAction.enum";
 import type { ChatMessageType } from "./messaging/types/ChatMessage.types";
 import type { ResultCallbacks } from "./utils/ResultCallbacks.types";
 type __VLS_Props = {
-    messages: ChatMessageType[];
-    chatActions?: ChatAction[];
-    size?: ComponentSize;
-    withoutAvatars?: boolean;
+	messages: ChatMessageType[];
+	chatActions?: ChatAction[];
+	size?: ComponentSize;
+	withoutAvatars?: boolean;
 };
 type __VLS_Slots = {
-    main: () => any;
-    footer: () => any;
+	main: () => any;
+	footer: () => any;
 } & SharedActionSlots;
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "action:sendMessage": (text: string, options: ResultCallbacks) => any;
-    "action:attachFiles": (files: File[], options: ResultCallbacks) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onAction:sendMessage"?: (text: string, options: ResultCallbacks) => any;
-    "onAction:attachFiles"?: (files: File[], options: ResultCallbacks) => any;
-}>, {
-    size: ComponentSize;
-    withoutAvatars: boolean;
-    chatActions: ChatAction[];
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<
+	__VLS_Props,
+	{},
+	{},
+	{},
+	{},
+	import("vue").ComponentOptionsMixin,
+	import("vue").ComponentOptionsMixin,
+	{} & {
+		"action:sendMessage": (text: string, options: ResultCallbacks) => any;
+		"action:attachFiles": (files: File[], options: ResultCallbacks) => any;
+	},
+	string,
+	import("vue").PublicProps,
+	Readonly<__VLS_Props> &
+		Readonly<{
+			"onAction:sendMessage"?: (text: string, options: ResultCallbacks) => any;
+			"onAction:attachFiles"?: (files: File[], options: ResultCallbacks) => any;
+		}>,
+	{
+		size: ComponentSize;
+		withoutAvatars: boolean;
+		chatActions: ChatAction[];
+	},
+	{},
+	{},
+	{},
+	string,
+	import("vue").ComponentProvideOptions,
+	false,
+	{},
+	any
+>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
+	new (): {
+		$slots: S;
+	};
 };

package/types/ui/utils/emitter.d.ts

@@ -1,7 +1,9 @@
+import { ChatMessageType } from "../../../types/ui";
 export type UiChatsEmitterEvents = {
     insertAtCursor: {
         text: string;
     };
     focusOnTextField: undefined;
+    clickChatMessageImage: ChatMessageType;
 };
 export declare const createUiChatsEmitter: () => import("mitt").Emitter<UiChatsEmitterEvents>;