@phonghq/go-chat 1.0.4 → 1.0.6

package/dist/test/chat/page/home/HomeHeader.vue.js

@@ -0,0 +1,127 @@
+import IconPhone from '../../../assets/icons/IconPhone.vue';
+import { PAGE } from '../../../constant/general';
+import Avatar from '../../../components/chat/customer/Avatar.vue';
+import { routerPush } from '../../../utils/chat/chat-router';
+import { user } from '../../../utils/chat/user';
+import { dataProfile } from '../../../utils/chat/auth';
+import { digibotId } from '../../../composable/useDigibot';
+const props = withDefaults(defineProps(), {});
+const emit = defineEmits();
+const goToViewUser = () => {
+    if (props.data?.id == digibotId.toString())
+        return;
+    if (dataProfile.value?.user_type == 'tenant') {
+        user.value = props.data;
+        routerPush(PAGE.CUSTOMER_DETAIL);
+    }
+};
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_defaults = {};
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_elements;
+let __VLS_components;
+let __VLS_directives;
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "px-8 pb-4 border-b border-chat-gray-5" },
+});
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "flex items-center" },
+});
+/** @type {[typeof Avatar, ]} */ ;
+// @ts-ignore
+const __VLS_0 = __VLS_asFunctionalComponent(Avatar, new Avatar({
+    ...{ 'onClick': {} },
+    ...{ class: ({ 'cursor-pointer': __VLS_ctx.dataProfile?.user_type == 'tenant' }) },
+    src: (__VLS_ctx.data?.avatar ?? ''),
+    id: (__VLS_ctx.data?.id ?? ''),
+    color: (__VLS_ctx.data?.color),
+    name: (__VLS_ctx.data?.username),
+}));
+const __VLS_1 = __VLS_0({
+    ...{ 'onClick': {} },
+    ...{ class: ({ 'cursor-pointer': __VLS_ctx.dataProfile?.user_type == 'tenant' }) },
+    src: (__VLS_ctx.data?.avatar ?? ''),
+    id: (__VLS_ctx.data?.id ?? ''),
+    color: (__VLS_ctx.data?.color),
+    name: (__VLS_ctx.data?.username),
+}, ...__VLS_functionalComponentArgsRest(__VLS_0));
+let __VLS_3;
+let __VLS_4;
+const __VLS_5 = ({ click: {} },
+    { onClick: (__VLS_ctx.goToViewUser) });
+// @ts-ignore
+[dataProfile, data, data, data, data, goToViewUser,];
+var __VLS_2;
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "flex-1 ml-3" },
+});
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "flex justify-between items-center" },
+});
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ onClick: (__VLS_ctx.goToViewUser) },
+    ...{ class: ({ 'cursor-pointer': __VLS_ctx.dataProfile?.user_type == 'tenant' }) },
+});
+// @ts-ignore
+[dataProfile, goToViewUser,];
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "flex items-center" },
+});
+__VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
+    ...{ class: "font-semibold" },
+});
+(__VLS_ctx.data?.username ?? 'n/a');
+// @ts-ignore
+[data,];
+__VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
+    ...{ class: "text-sm text-chat-gray-3 truncate" },
+});
+__VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
+    ...{ onClick: (...[$event]) => {
+            __VLS_ctx.emit('call');
+            // @ts-ignore
+            [emit,];
+        } },
+    ...{ class: "flex-center text-[#0051E6] bg-chat-haze-200 w-9 h-9 rounded-lg" },
+});
+/** @type {[typeof IconPhone, ]} */ ;
+// @ts-ignore
+const __VLS_7 = __VLS_asFunctionalComponent(IconPhone, new IconPhone({}));
+const __VLS_8 = __VLS_7({}, ...__VLS_functionalComponentArgsRest(__VLS_7));
+/** @type {__VLS_StyleScopedClasses['px-8']} */ ;
+/** @type {__VLS_StyleScopedClasses['pb-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['border-b']} */ ;
+/** @type {__VLS_StyleScopedClasses['border-chat-gray-5']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['cursor-pointer']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-1']} */ ;
+/** @type {__VLS_StyleScopedClasses['ml-3']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['justify-between']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['cursor-pointer']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['font-semibold']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-sm']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-chat-gray-3']} */ ;
+/** @type {__VLS_StyleScopedClasses['truncate']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-[#0051E6]']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-chat-haze-200']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-9']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-9']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-lg']} */ ;
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+    props: {},
+});
+export default {};

package/dist/test/chat/page/home/InputChat.vue.js

@@ -0,0 +1,255 @@
+import IconPlus from '../../../assets/icons/IconPlus.vue';
+import IconPlan from '../../../assets/icons/IconPlan.vue';
+import EmojiPicker from 'vue3-emoji-picker';
+import 'vue3-emoji-picker/css';
+import dayjs from 'dayjs';
+import { DATE_FORMATS } from '../../../constant/datetime';
+import { dataProfile } from '../../../utils/chat/auth';
+import { ref } from 'vue';
+import PopoverBase from '../../../components/chat/common/popover/PopoverBase.vue';
+const props = withDefaults(defineProps(), {});
+const emit = defineEmits();
+const keyword = defineModel();
+let chatId = 1;
+const refInputImage = ref(null);
+const isLoadingImage = ref([]);
+const chatInputRef = ref(null);
+const emojiOpen = ref(false);
+const handleSendMessage = async (type) => {
+    const tempId = Date.now();
+    let messageContent = '';
+    let attachments = [];
+    if (type == 'message') {
+        if (!keyword.value)
+            return;
+        messageContent = keyword.value;
+        keyword.value = '';
+    }
+    else if (type == 'file') {
+        const file = uploadImage();
+        if (!file)
+            return;
+        const file_path = URL.createObjectURL(file);
+        attachments = [{ file_name: String(tempId), file_path, file_local: file }];
+    }
+    keyword.value = '';
+    chatId++;
+    const id = props.data?.id.toString() + '-' + chatId;
+    const data = {
+        conversation_id: 135,
+        created_at: dayjs().format(DATE_FORMATS['DATE_FORMAT_FULL']),
+        id,
+        message: messageContent,
+        receiver_id: props.data?.id || 0,
+        sender_id: dataProfile.value?.id,
+        status: 'read',
+        attachments: attachments
+    };
+    emit('sendMessage', data);
+};
+const uploadImage = () => {
+    if (!refInputImage.value ||
+        !refInputImage.value.files ||
+        refInputImage.value.files.length === 0) {
+        return null;
+    }
+    return refInputImage.value.files[0];
+};
+const handleFileUpload = () => {
+    handleSendMessage('file');
+};
+const onSelectEmoji = (value) => {
+    keyword.value = (keyword.value ?? '') + (value?.i?.replace('undefined', '') ?? '');
+    emojiOpen.value = false;
+    chatInputRef.value?.focus?.();
+};
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_modelEmit = defineEmits();
+const __VLS_defaults = {};
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_elements;
+let __VLS_components;
+let __VLS_directives;
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "flex gap-2" },
+});
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "w-full relative grow" },
+});
+__VLS_asFunctionalElement(__VLS_elements.input)({
+    ...{ onKeydown: (...[$event]) => {
+            __VLS_ctx.handleSendMessage('message');
+            // @ts-ignore
+            [handleSendMessage,];
+        } },
+    ...{ class: "w-full chat-input h-11 px-4 border border-chat-haze-200" },
+    ref: "chatInputRef",
+    placeholder: "Send Message",
+});
+(__VLS_ctx.keyword);
+/** @type {typeof __VLS_ctx.chatInputRef} */ ;
+// @ts-ignore
+[keyword, chatInputRef,];
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "flex gap-2 absolute right-0 bottom-0" },
+});
+/** @type {[typeof PopoverBase, typeof PopoverBase, ]} */ ;
+// @ts-ignore
+const __VLS_0 = __VLS_asFunctionalComponent(PopoverBase, new PopoverBase({
+    open: (__VLS_ctx.emojiOpen),
+    align: "end",
+    side: "top",
+}));
+const __VLS_1 = __VLS_0({
+    open: (__VLS_ctx.emojiOpen),
+    align: "end",
+    side: "top",
+}, ...__VLS_functionalComponentArgsRest(__VLS_0));
+const { default: __VLS_3 } = __VLS_2.slots;
+// @ts-ignore
+[emojiOpen,];
+__VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
+    ...{ onClick: (...[$event]) => {
+            __VLS_ctx.emojiOpen = !__VLS_ctx.emojiOpen;
+            // @ts-ignore
+            [emojiOpen, emojiOpen,];
+        } },
+    ...{ class: "" },
+});
+{
+    const { content: __VLS_4 } = __VLS_2.slots;
+    const __VLS_5 = {}.EmojiPicker;
+    /** @type {[typeof __VLS_components.EmojiPicker, typeof __VLS_components.emojiPicker, ]} */ ;
+    // @ts-ignore
+    EmojiPicker;
+    // @ts-ignore
+    const __VLS_6 = __VLS_asFunctionalComponent(__VLS_5, new __VLS_5({
+        ...{ 'onSelect': {} },
+        ...{ class: "!w-[300px]" },
+        native: (true),
+        offset: (2),
+        hideSearch: true,
+    }));
+    const __VLS_7 = __VLS_6({
+        ...{ 'onSelect': {} },
+        ...{ class: "!w-[300px]" },
+        native: (true),
+        offset: (2),
+        hideSearch: true,
+    }, ...__VLS_functionalComponentArgsRest(__VLS_6));
+    let __VLS_9;
+    let __VLS_10;
+    const __VLS_11 = ({ select: {} },
+        { onSelect: (__VLS_ctx.onSelectEmoji) });
+    // @ts-ignore
+    [onSelectEmoji,];
+    var __VLS_8;
+}
+var __VLS_2;
+const __VLS_13 = {}.EmojiPicker;
+/** @type {[typeof __VLS_components.EmojiPicker, typeof __VLS_components.emojiPicker, ]} */ ;
+// @ts-ignore
+EmojiPicker;
+// @ts-ignore
+const __VLS_14 = __VLS_asFunctionalComponent(__VLS_13, new __VLS_13({
+    ...{ 'onSelect': {} },
+    ...{ class: "opacity-0 pointer-events-none absolute" },
+    native: (true),
+    offset: (2),
+    hideSearch: true,
+}));
+const __VLS_15 = __VLS_14({
+    ...{ 'onSelect': {} },
+    ...{ class: "opacity-0 pointer-events-none absolute" },
+    native: (true),
+    offset: (2),
+    hideSearch: true,
+}, ...__VLS_functionalComponentArgsRest(__VLS_14));
+let __VLS_17;
+let __VLS_18;
+const __VLS_19 = ({ select: {} },
+    { onSelect: (__VLS_ctx.onSelectEmoji) });
+// @ts-ignore
+[onSelectEmoji,];
+var __VLS_16;
+__VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
+    ...{ onClick: (...[$event]) => {
+            __VLS_ctx.handleSendMessage('message');
+            // @ts-ignore
+            [handleSendMessage,];
+        } },
+    ...{ class: "h-11 w-10" },
+});
+/** @type {[typeof IconPlan, ]} */ ;
+// @ts-ignore
+const __VLS_21 = __VLS_asFunctionalComponent(IconPlan, new IconPlan({}));
+const __VLS_22 = __VLS_21({}, ...__VLS_functionalComponentArgsRest(__VLS_21));
+__VLS_asFunctionalElement(__VLS_elements.label, __VLS_elements.label)({
+    ...{ class: "shrink-0 cursor-pointer relative" },
+});
+__VLS_asFunctionalElement(__VLS_elements.input)({
+    ...{ onChange: (__VLS_ctx.handleFileUpload) },
+    type: "file",
+    ...{ class: "hidden" },
+    ref: "refInputImage",
+    accept: ".png, .jpeg, .jpg",
+});
+/** @type {typeof __VLS_ctx.refInputImage} */ ;
+// @ts-ignore
+[handleFileUpload, refInputImage,];
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "h-11 w-11 rounded-full flex-center bg-[#002E6B]" },
+});
+/** @type {[typeof IconPlus, ]} */ ;
+// @ts-ignore
+const __VLS_25 = __VLS_asFunctionalComponent(IconPlus, new IconPlus({
+    ...{ class: "text-white" },
+}));
+const __VLS_26 = __VLS_25({
+    ...{ class: "text-white" },
+}, ...__VLS_functionalComponentArgsRest(__VLS_25));
+/** @type {__VLS_StyleScopedClasses['']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['gap-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['relative']} */ ;
+/** @type {__VLS_StyleScopedClasses['grow']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['chat-input']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-11']} */ ;
+/** @type {__VLS_StyleScopedClasses['px-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['border']} */ ;
+/** @type {__VLS_StyleScopedClasses['border-chat-haze-200']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['gap-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['absolute']} */ ;
+/** @type {__VLS_StyleScopedClasses['right-0']} */ ;
+/** @type {__VLS_StyleScopedClasses['bottom-0']} */ ;
+/** @type {__VLS_StyleScopedClasses['!w-[300px]']} */ ;
+/** @type {__VLS_StyleScopedClasses['opacity-0']} */ ;
+/** @type {__VLS_StyleScopedClasses['pointer-events-none']} */ ;
+/** @type {__VLS_StyleScopedClasses['absolute']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-11']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-10']} */ ;
+/** @type {__VLS_StyleScopedClasses['shrink-0']} */ ;
+/** @type {__VLS_StyleScopedClasses['cursor-pointer']} */ ;
+/** @type {__VLS_StyleScopedClasses['relative']} */ ;
+/** @type {__VLS_StyleScopedClasses['hidden']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-11']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-11']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-[#002E6B]']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-white']} */ ;
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+    props: {},
+});
+export default {};

package/dist/test/chat/page/home/NewCustomer.vue.js

@@ -0,0 +1,84 @@
+/// <reference types="C:/phonghq/go-chat/node_modules/.vue-global-types/vue_3.5_0.d.ts" />
+import Avatar from '../../../components/chat/customer/Avatar.vue';
+const props = withDefaults(defineProps(), {});
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_defaults = {};
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_elements;
+let __VLS_components;
+let __VLS_directives;
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "flex flex-col items-center justify-center text-center" },
+});
+/** @type {[typeof Avatar, ]} */ ;
+// @ts-ignore
+const __VLS_0 = __VLS_asFunctionalComponent(Avatar, new Avatar({
+    ...{ class: "mb-4" },
+    src: (__VLS_ctx.data?.avatar ?? ''),
+    id: (__VLS_ctx.data?.id ?? ''),
+    color: (__VLS_ctx.data?.color),
+    name: (__VLS_ctx.data?.username),
+    size: "xxl",
+}));
+const __VLS_1 = __VLS_0({
+    ...{ class: "mb-4" },
+    src: (__VLS_ctx.data?.avatar ?? ''),
+    id: (__VLS_ctx.data?.id ?? ''),
+    color: (__VLS_ctx.data?.color),
+    name: (__VLS_ctx.data?.username),
+    size: "xxl",
+}, ...__VLS_functionalComponentArgsRest(__VLS_0));
+// @ts-ignore
+[data, data, data, data,];
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "flex items-center gap-1" },
+});
+__VLS_asFunctionalElement(__VLS_elements.h2, __VLS_elements.h2)({
+    ...{ class: "text-2xl font-semibold" },
+});
+(__VLS_ctx.data?.username ?? 'n/a');
+// @ts-ignore
+[data,];
+__VLS_asFunctionalElement(__VLS_elements.img)({
+    src: "../../../assets/images/icons/new-customer.png",
+});
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "text-chat-haze-400 text-sm mt-1 flex items-center gap-1" },
+});
+__VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({});
+__VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({});
+__VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({});
+__VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
+    ...{ class: "text-chat-haze-400 text-sm mt-3 max-w-md" },
+});
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['justify-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['mb-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['gap-1']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-2xl']} */ ;
+/** @type {__VLS_StyleScopedClasses['font-semibold']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-chat-haze-400']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-sm']} */ ;
+/** @type {__VLS_StyleScopedClasses['mt-1']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['gap-1']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-chat-haze-400']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-sm']} */ ;
+/** @type {__VLS_StyleScopedClasses['mt-3']} */ ;
+/** @type {__VLS_StyleScopedClasses['max-w-md']} */ ;
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeProps: {},
+    props: {},
+});
+export default {};

package/dist/test/components/ListenEvent.vue.js

@@ -0,0 +1,45 @@
+/// <reference types="C:/phonghq/go-chat/node_modules/.vue-global-types/vue_3.5_0.d.ts" />
+import { onMounted, onBeforeUnmount } from 'vue';
+import { useDebounce } from '../utils/debounce';
+// import { useGeneralStore } from '@/stores/general'
+// const deviceType = computed({
+//   set(value: any) {
+//     return useGeneralStore().deviceResponsive = value
+//   },
+//   get() {
+//     return useGeneralStore().deviceResponsive
+//   }
+// })
+// const getDeviceType = () => {
+//   const width = window.innerWidth
+//   if (width < 767) {
+//     return 'mobile'
+//   } else if (width < 1023) {
+//     return 'tablet'
+//   } else {
+//     return 'window'
+//   }
+// }
+const updateDeviceType = useDebounce(() => {
+    // const newType = getDeviceType()
+    // if (deviceType.value !== newType) {
+    //   deviceType.value = newType
+    // }
+}, 500);
+onMounted(() => {
+    updateDeviceType();
+    window.addEventListener('resize', updateDeviceType);
+});
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', updateDeviceType);
+});
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_ctx = {
+    ...{},
+    ...{},
+};
+let __VLS_elements;
+let __VLS_components;
+let __VLS_directives;
+const __VLS_export = (await import('vue')).defineComponent({});
+export default {};