@webitel/ui-chats 0.0.2 → 0.0.4

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

@@ -50,62 +50,57 @@
 </template>
 
   <script setup lang="ts">
-
-  import { ComponentSize } from '@webitel/ui-sdk/enums';
-  import {computed, defineEmits, defineProps, inject} from 'vue';
-
-  import { useChatMessageFile } from '../composables/useChatMessageFile'
-  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';
-  import MessageImage from './details/chat-message-image.vue';
-  import MessagePlayer from './details/chat-message-player.vue';
-  import MessageText from './details/chat-message-text.vue';
-  import MessageTime from './details/chat-message-time.vue';
-
-  const props = withDefaults(defineProps<{
-    message: object,
-    showAvatar?: boolean,
-    username?: string,
-  }>(), {
-    showAvatar: false,
-    username: '',
-  });
-
-  const emit = defineEmits<{
-    'open-image': [],
-    'initialized-player': [object]
-  }>();
-
-  const size = inject<ComponentSize>('size');
-
-  const {
-    image,
-    media,
-    document,
-  } = useChatMessageFile(props.message.file);
-
-  const isSelfMessage = computed(() =>
-    props.message.member?.self
-    || props.message.member?.type === 'webitel'
-  );
-
-  const isBot = computed(() =>
-    props.message.member?.type === 'bot'
-    || (!props.message.member?.type && !props.message.channelId)
-  );
-
-  const isSelfSide = computed(() => isSelfMessage.value || isBot.value);
-
-  const getClientUsername = computed(() => {
-    return !isSelfSide.value ? props.username : ''; // need to show username avatar only for client
-  });
-
-  function handlePlayerInitialize(player) {
-    emit('initialized-player', { player });
-  };
-
-  </script>
+import type { ComponentSize } from "@webitel/ui-sdk/enums";
+import { computed, defineEmits, defineProps, inject } from "vue";
+
+import type { ChatMessageType } from "../../../types/ChatMessage.types";
+import { useChatMessageFile } from "../composables/useChatMessageFile";
+
+const props = withDefaults(
+	defineProps<{
+		message: ChatMessageType;
+		showAvatar?: boolean;
+		username?: string;
+	}>(),
+	{
+		showAvatar: false,
+		username: "",
+	},
+);
+
+const emit = defineEmits<{
+	"open-image": [];
+	"initialized-player": [
+		object,
+	];
+}>();
+
+const _size = inject<ComponentSize>("size");
+
+const { image, media, document } = useChatMessageFile(props.message.file);
+
+const isSelfMessage = computed(
+	() => props.message.member?.self || props.message.member?.type === "webitel",
+);
+
+const isBot = computed(
+	() =>
+		props.message.member?.type === "bot" ||
+		(!props.message.member?.type && !props.message.channelId),
+);
+
+const isSelfSide = computed(() => isSelfMessage.value || isBot.value);
+
+const _getClientUsername = computed(() => {
+	return !isSelfSide.value ? props.username : ""; // need to show username avatar only for client
+});
+
+function _handlePlayerInitialize(player) {
+	emit("initialized-player", {
+		player,
+	});
+}
+</script>
 
 <style scoped>
 

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

@@ -11,30 +11,29 @@
 </template>
 
 <script setup lang="ts">
-import { WtAvatar } from '@webitel/ui-sdk/components';
-import { ComponentSize } from '@webitel/ui-sdk/enums';
-import { computed, defineProps, inject } from 'vue';
-
-import botIcon from '../../../../../../assets/icons/bot.svg'
-
-const props = withDefaults(defineProps<{
-  bot?: boolean,
-  username?: string,
-}>(), {
-  bot: false,
-  username: '',
-});
-
-const injectedSize = inject<ComponentSize>('size');
-
-const size = computed(() => {
-  return ComponentSize.SM || injectedSize; // todo: should injected size be considered?
+import { ComponentSize } from "@webitel/ui-sdk/enums";
+import { computed, defineProps, inject } from "vue";
+
+import botIcon from "../../../../../../assets/icons/bot.svg";
+
+const props = withDefaults(
+	defineProps<{
+		bot?: boolean;
+		username?: string;
+	}>(),
+	{
+		bot: false,
+		username: "",
+	},
+);
+
+const injectedSize = inject<ComponentSize>("size");
+
+const _size = computed(() => {
+	return ComponentSize.SM || injectedSize; // todo: should injected size be considered?
 });
 
-const src = computed(() =>
-  props.bot && botIcon
-)
-
+const _src = computed(() => props.bot && botIcon);
 </script>
 
 <style lang="scss" scoped>

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

@@ -12,7 +12,7 @@
   </div>
 </template>
 <script setup>
-import { useI18n } from 'vue-i18n';
+import { useI18n } from "vue-i18n";
 
 const { t } = useI18n();
 </script>

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

@@ -19,29 +19,32 @@
 </template>
 
 <script setup lang="ts">
-import { prettifyFileSize } from '@webitel/ui-sdk/scripts';
-import { computed, defineProps } from 'vue';
+import { prettifyFileSize } from "@webitel/ui-sdk/scripts";
+import { computed, defineProps } from "vue";
 
-import { ChatMessageFile } from '../../../../types/ChatMessage.types';
+import type { ChatMessageFile } from "../../../../types/ChatMessage.types";
 
-const props = withDefaults(defineProps<{
-  file: ChatMessageFile;
-  selfSide?: boolean;
-}>(),{
-  selfSide: false,
-});
-const documentSize = computed(() => {
-  if (!props.file) return '';
-  return prettifyFileSize(props.file.size);
+const props = withDefaults(
+	defineProps<{
+		file: ChatMessageFile;
+		selfSide?: boolean;
+	}>(),
+	{
+		selfSide: false,
+	},
+);
+const _documentSize = computed(() => {
+	if (!props.file) return "";
+	return prettifyFileSize(props.file.size);
 });
 
-function downloadDocument() {
-  if (!props.file) return;
-  const a = document.createElement('a');
-  a.href = props.file.url;
-  a.target = '_blank';
-  a.download = props.file.name;
-  a.click();
+function _downloadDocument() {
+	if (!props.file) return;
+	const a = document.createElement("a");
+	a.href = props.file.url;
+	a.target = "_blank";
+	a.download = props.file.name;
+	a.click();
 }
 </script>
 

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

@@ -11,18 +11,18 @@
 
 
 <script setup lang="ts">
+import { defineEmits, defineProps } from "vue";
 
-import { defineEmits, defineProps } from 'vue';
+import type { ChatMessageFile } from "../../../../types/ChatMessage.types";
 
-import { ChatMessageFile } from '../../../../types/ChatMessage.types';
-
-const props = defineProps<{
-  file: ChatMessageFile,
+const _props = defineProps<{
+	file: ChatMessageFile;
 }>();
-const emit = defineEmits<{
-  open: [ChatMessageFile],
+const _emit = defineEmits<{
+	open: [
+		ChatMessageFile,
+	];
 }>();
-
 </script>
 
 

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

@@ -16,26 +16,28 @@
 </template>
 
 <script setup lang="ts">
+import { computed, defineEmits, defineProps } from "vue";
 
-import { computed, defineEmits, defineProps } from 'vue';
-
-import { ChatMessageFile } from '../../../../types/ChatMessage.types';
+import type { ChatMessageFile } from "../../../../types/ChatMessage.types";
 
 const props = defineProps<{
-  file:  ChatMessageFile,
-  type: string,
+	file: ChatMessageFile;
+	type: string;
 }>();
 const emit = defineEmits<{
-  open: [ChatMessageFile],
-  initialized: [object],
+	open: [
+		ChatMessageFile,
+	];
+	initialized: [
+		object,
+	];
 }>();
 
-const mediaUrl = computed(() => props.file.streamUrl || props.file.url);
-
-function handlePlayerInitialize(player) {
-  emit('initialized', player);
-};
+const _mediaUrl = computed(() => props.file.streamUrl || props.file.url);
 
+function _handlePlayerInitialize(player) {
+	emit("initialized", player);
+}
 </script>
 
 <style lang="scss" scoped>

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

@@ -6,22 +6,22 @@
 </template>
 
 <script setup lang="ts">
-import Autolinker from 'autolinker';
-import {computed, defineProps} from 'vue';
+import Autolinker from "autolinker";
+import { computed, defineProps } from "vue";
 
 const props = defineProps<{
-  text: string;
+	text: string;
 }>();
 
-const text = computed(() => {
-  // ATTENTION: not all libs are suitable for this case, because we want to preserve "<" signs
-  // https://my.webitel.com/browse/DEV-2848
-  return Autolinker.link(props.text, {
-    newWindow: true,
-    sanitizeHtml: true, // DONT FORGET TO SANITIZE, OR USE DOM PURIFY
-    className: 'chat-message-new-text__link',
-  });
-})
+const _text = computed(() => {
+	// ATTENTION: not all libs are suitable for this case, because we want to preserve "<" signs
+	// https://my.webitel.com/browse/DEV-2848
+	return Autolinker.link(props.text, {
+		newWindow: true,
+		sanitizeHtml: true, // DONT FORGET TO SANITIZE, OR USE DOM PURIFY
+		className: "chat-message-new-text__link",
+	});
+});
 </script>
 
 <style lang="scss" scoped>

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

@@ -8,17 +8,19 @@
 
 
 <script setup lang="ts">
-import { prettifyTime } from '@webitel/ui-sdk/scripts';
-import { computed, defineProps } from 'vue';
+import { prettifyTime } from "@webitel/ui-sdk/scripts";
+import { computed, defineProps } from "vue";
 
+const props = withDefaults(
+	defineProps<{
+		date?: string | number; // timestamp
+	}>(),
+	{
+		date: "",
+	},
+);
 
-const props = withDefaults(defineProps<{
-  date?: string | number // timestamp
-}>(), {
-  date: '',
-});
-
-const time = computed(() => prettifyTime(props.date));
+const _time = computed(() => prettifyTime(props.date));
 </script>
 
 <style lang="scss" scoped>

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

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

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

@@ -1,12 +1,49 @@
-export type ChatMessageType = {
-  id: string;
+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;
+}
+
+export type ContactInfo = {
+	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;
+};
+
+export type ChatMessageChatInfo = {
+	id: string;
+	via: ChatVia;
+};
+
+export type ChatVia = {
+	id: number;
+	name: string;
+	type: string;
+	messenger?: string;
 };

package/src/ui/utils/ResultCallbacks.types.ts

@@ -1 +1 @@
-export { ResultCallbacks } from '@webitel/ui-sdk/src/types';
+export { ResultCallbacks } from "@webitel/ui-sdk/src/types";

package/src/ui/utils/emitter.ts

@@ -1,12 +1,14 @@
 import mitt from "mitt";
 
 export type UiChatsEmitterEvents = {
-    insertAtCursor: { text: string };
-    focusOnTextField: undefined;
+	insertAtCursor: {
+		text: string;
+	};
+	focusOnTextField: undefined;
 };
 
 export const createUiChatsEmitter = () => {
-    const uiChatsEmitter = mitt<UiChatsEmitterEvents>();
+	const uiChatsEmitter = mitt<UiChatsEmitterEvents>();
 
-    return uiChatsEmitter;
-};
+	return uiChatsEmitter;
+};

package/types/locale/en/en.d.ts

@@ -1,5 +1,5 @@
 declare const _default: {
-    '@webitel/ui-chats': {
+    "@webitel/ui-chats": {
         ui: {
             messaging: {
                 chatsFileBlocked: string;

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

@@ -1,7 +1,7 @@
-import { ComponentSize } from '@webitel/ui-sdk/enums';
-import { ResultCallbacks } from './utils/ResultCallbacks.types';
-import { ChatMessageType } from './messaging/types/ChatMessage.types';
-import { ChatAction, SharedActionSlots } from './chat-footer/modules/user-input/types/ChatAction.types';
+import { ComponentSize } from "@webitel/ui-sdk/enums";
+import { ChatAction, type SharedActionSlots } from "./chat-footer/modules/user-input/types/ChatAction.types";
+import type { ChatMessageType } from "./messaging/types/ChatMessage.types";
+import type { ResultCallbacks } from "./utils/ResultCallbacks.types";
 type __VLS_Props = {
     messages: ChatMessageType[];
     chatActions?: ChatAction[];
@@ -18,8 +18,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onAction:sendMessage"?: (text: string, options: ResultCallbacks) => any;
     "onAction:attachFiles"?: (files: File[], options: ResultCallbacks) => any;
 }>, {
-    size: ComponentSize;
     chatActions: ChatAction[];
+    size: ComponentSize;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/types/ui/chat-footer/modules/user-input/components/chat-input-actions-bar.vue.d.ts

@@ -1,5 +1,4 @@
-import { ChatAction } from '../types/ChatAction.types';
-import { SharedActionSlots } from '../types/ChatAction.types';
+import { ChatAction, type SharedActionSlots } from "../types/ChatAction.types";
 type __VLS_Props = {
     actions: ChatAction[];
 };

package/types/ui/chat-footer/modules/user-input/components/chat-text-field.vue.d.ts

@@ -1,6 +1,6 @@
-import { MaybeRef } from 'vue';
+import { type MaybeRef } from "vue";
 type __VLS_ModelProps = {
-    'text': MaybeRef<string>;
+    "text": MaybeRef<string>;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:text": (value: MaybeRef<string>) => any;

package/types/ui/chat-input/components/actions/attach-files-action.vue.d.ts

@@ -1,7 +1,29 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    attachFiles: (files: File[]) => any;
-}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
-    onAttachFiles?: (files: File[]) => any;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<
+	{},
+	{},
+	{},
+	{},
+	{},
+	import("vue").ComponentOptionsMixin,
+	import("vue").ComponentOptionsMixin,
+	{
+		attachFiles: (files: File[]) => any;
+	},
+	string,
+	import("vue").PublicProps,
+	Readonly<{}> &
+		Readonly<{
+			onAttachFiles?: (files: File[]) => any;
+		}>,
+	{},
+	{},
+	{},
+	{},
+	string,
+	import("vue").ComponentProvideOptions,
+	true,
+	{},
+	any
+>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/types/ui/chat-input/components/actions/emoji-picker-action.vue.d.ts

@@ -1,3 +1,24 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<
+	{},
+	{},
+	{},
+	{},
+	{},
+	import("vue").ComponentOptionsMixin,
+	import("vue").ComponentOptionsMixin,
+	{},
+	string,
+	import("vue").PublicProps,
+	Readonly<{}> & Readonly<{}>,
+	{},
+	{},
+	{},
+	{},
+	string,
+	import("vue").ComponentProvideOptions,
+	true,
+	{},
+	any
+>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/types/ui/chat-input/components/actions/send-message-action.vue.d.ts

@@ -1,7 +1,29 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: () => any;
-}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
-    onClick?: () => any;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<
+	{},
+	{},
+	{},
+	{},
+	{},
+	import("vue").ComponentOptionsMixin,
+	import("vue").ComponentOptionsMixin,
+	{
+		click: () => any;
+	},
+	string,
+	import("vue").PublicProps,
+	Readonly<{}> &
+		Readonly<{
+			onClick?: () => any;
+		}>,
+	{},
+	{},
+	{},
+	{},
+	string,
+	import("vue").ComponentProvideOptions,
+	true,
+	{},
+	any
+>;
 declare const _default: typeof __VLS_export;
 export default _default;