@phonghq/go-chat 1.0.0 → 1.0.1

package/dist/chat/page/home/Home.vue.js

@@ -0,0 +1,327 @@
+/// <reference types="C:/phonghq/go-chat/node_modules/.vue-global-types/vue_3.5_0.d.ts" />
+import HomeHeader from '@/chat/page/home/HomeHeader.vue';
+import NewCustomer from '@/chat/page/home/NewCustomer.vue';
+import InputChat from '@/chat/page/home/InputChat.vue';
+import { getCountUnread, getDetailReceiver, getMessage, sendMessage, upLoadImage } from '@/utils/chat/message';
+import { nextTick, onMounted, onUnmounted, ref, shallowRef } from 'vue';
+import ChatMessage from '@/chat/page/home/ChatMessage.vue';
+import { addHandleMqttMessage, connectMqtt, publishMessage, removeHandleMqttMessage, subscribeToTopic, unsubscribeFromTopic } from '@/plugins/mqtt';
+import { TOPIC_DETAIL_CHAT, TOPIC_HOME } from '@/constant/mqtt';
+import { dataProfile } from '@/utils/chat/auth';
+import dayjs from 'dayjs';
+import { DATE_FORMATS } from '@/constant/datetime';
+import { MessageState } from '@/constant/message';
+const props = withDefaults(defineProps(), {});
+const emit = defineEmits();
+let page = 1;
+let pageCount = 1;
+let topic = '';
+const isLoading = ref(false);
+const infoUser = shallowRef(null);
+const listMessage = ref([]);
+const chatMessageRef = ref(null);
+onMounted(() => {
+});
+onUnmounted(() => {
+    handleDisconnectMqtt();
+});
+const handleConnectMqtt = async () => {
+    try {
+        await connectMqtt();
+        topic = TOPIC_DETAIL_CHAT + infoUser.value?.conversation_id;
+        subscribeToTopic(topic);
+        addHandleMqttMessage('chat-home', topic, mqttMessageHandler);
+    }
+    catch (error) {
+        console.error(error);
+    }
+};
+const handleDisconnectMqtt = async () => {
+    const topic = TOPIC_DETAIL_CHAT + infoUser.value?.conversation_id;
+    unsubscribeFromTopic(topic);
+    removeHandleMqttMessage('chat-home');
+};
+const mqttMessageHandler = (topic, message) => {
+    if (infoUser.value?.id && message?.sender_id?.toString() == infoUser.value?.id?.toString() || true) {
+        const index = listMessage.value.findIndex((item) => item.id === message?.id);
+        if (index < 0) {
+            listMessage.value.push(message);
+        }
+        else {
+            listMessage.value[index] = message;
+        }
+        chatMessageRef.value?.scrollBottom();
+    }
+};
+const handleGetMessage = async () => {
+    try {
+        const id = props.receiverId;
+        const params = { page: page, receiver_id: props.receiverId };
+        let res = await getMessage(params);
+        res.items = res.items.reverse();
+        page = res._meta?.currentPage || 1;
+        pageCount = res._meta?.pageCount || 1;
+        if (id == props.receiverId)
+            listMessage.value.unshift(...res.items);
+    }
+    catch (error) {
+        console.error(error);
+    }
+};
+const handleScrollTop = async () => {
+    if (page >= pageCount) {
+        chatMessageRef.value?.hideScrollEvent();
+        return;
+    }
+    page = page + 1;
+    await handleGetMessage();
+    chatMessageRef.value?.hideScrollEvent();
+};
+const handleGetDetailReceiver = async (data) => {
+    const id = props.receiverId;
+    if (data)
+        infoUser.value = data;
+    const res = (await getDetailReceiver(props.receiverId)) ?? null;
+    if (id == props.receiverId) {
+        infoUser.value = res;
+        await handleConnectMqtt();
+    }
+};
+const getData = async (data) => {
+    try {
+        isLoading.value = true;
+        listMessage.value = [];
+        await Promise.allSettled([handleGetMessage(), handleGetDetailReceiver(data)]);
+        // readMessages(infoUser.value?.conversation_id)
+        await nextTick();
+        chatMessageRef.value?.scrollBottom();
+    }
+    catch (error) {
+        console.error(error);
+    }
+    finally {
+        isLoading.value = false;
+    }
+};
+const updateMessageItem = (id, data) => {
+    const index = listMessage.value.findIndex((e) => e.id == id);
+    if (index > -1) {
+        const item = listMessage.value[index];
+        listMessage.value[index] = { ...item, ...data };
+        console.log({ ...item, ...data });
+    }
+};
+const handleSendMessage = async (data) => {
+    try {
+        listMessage.value.push({ ...data, state: MessageState.Sending });
+        publishMessage(topic, {
+            ...data,
+            state: MessageState.Sending
+        });
+        let file_upload = [];
+        if (data?.attachments?.length) {
+            updateMessageItem(data.id, { state: MessageState.Uploading });
+            file_upload = await handleUploadImage(data?.attachments[0].file_local);
+        }
+        updateMessageItem(data.id, { state: MessageState.Sending });
+        chatMessageRef.value?.scrollBottom();
+        const formData = new FormData();
+        formData.append('message', data.message ?? '');
+        formData.append('receiver_id', infoUser.value?.id ?? '');
+        if (file_upload.length) {
+            formData.append('url', file_upload[0]?.url ?? '');
+        }
+        await sendMessage(formData);
+        publishMessage(topic, {
+            ...data,
+            state: MessageState.Sent,
+            attachments: file_upload
+                ? [
+                    {
+                        file_name: data.attachments[0]?.file_name ?? '',
+                        file_path: file_upload[0]?.url ?? ''
+                    }
+                ]
+                : []
+        });
+        updateMessageItem(data.id, { state: MessageState.Sent });
+        publicTopicConversationUpdate(false, data?.message ?? '');
+    }
+    catch (error) {
+        updateMessageItem(data.id, {
+            state: MessageState.Failed,
+            error: typeof error?.message == 'string' ? error.message : ''
+        });
+        console.log(error.message);
+    }
+};
+const handleUploadImage = async (file) => {
+    if (file == null || file == undefined)
+        return [];
+    if (file.size > 1 * 1024 * 1024) {
+        throw new Error('File size exceeds limit');
+    }
+    const formData = new FormData();
+    formData.append('file', file);
+    const res = await upLoadImage(formData);
+    return res;
+};
+const publicTopicConversationUpdate = async (isSendImg, message) => {
+    const res = await getCountUnread({
+        conversation_id: infoUser.value?.conversation_id ?? 0,
+        receiver_id: Number(infoUser.value?.id)
+    });
+    const current = dayjs().format(DATE_FORMATS['DATE_FORMAT_FULL']);
+    const dataMessageForReceiver = {
+        id: infoUser.value?.conversation_id ?? 0,
+        receiver_id: Number(dataProfile.value?.id ?? 0),
+        username: dataProfile.value?.username ?? '',
+        customer_phone: dataProfile.value?.phone ?? '',
+        avatar: dataProfile.value?.avatar ?? '',
+        last_message: isSendImg ? `${infoUser.value?.username} sent images` : message,
+        last_message_time: current,
+        created_at: current,
+        updated_at: current,
+        unread_count: (res?.unread_count ?? 0) + 1,
+        status: 1,
+        color: dataProfile.value?.color ?? ''
+    };
+    publishMessage(`${TOPIC_HOME[0] + Number(infoUser.value?.id)}`, JSON.stringify(dataMessageForReceiver));
+    const dataMessageMyself = {
+        id: infoUser.value?.conversation_id ?? 0,
+        receiver_id: Number(dataProfile.value?.id ?? 0),
+        username: infoUser.value?.username ?? '',
+        customer_phone: infoUser.value?.phone ?? '',
+        avatar: infoUser.value?.avatar ?? '',
+        last_message: isSendImg ? `${infoUser.value?.username} sent images` : message,
+        last_message_time: current,
+        created_at: current,
+        updated_at: current,
+        unread_count: 0,
+        status: 1,
+        color: infoUser.value?.color
+    };
+    publishMessage(`${TOPIC_HOME[0] + Number(dataProfile.value?.id)}`, JSON.stringify(dataMessageMyself));
+};
+const call = () => {
+    if (infoUser.value) {
+        emit('call', infoUser.value);
+    }
+};
+const __VLS_exposed = { getData };
+defineExpose(__VLS_exposed);
+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: "h-full flex flex-col overflow-hidden" },
+});
+/** @type {[typeof HomeHeader, ]} */ ;
+// @ts-ignore
+const __VLS_0 = __VLS_asFunctionalComponent(HomeHeader, new HomeHeader({
+    ...{ 'onCall': {} },
+    ...{ class: "shrink-0" },
+    data: (__VLS_ctx.infoUser),
+}));
+const __VLS_1 = __VLS_0({
+    ...{ 'onCall': {} },
+    ...{ class: "shrink-0" },
+    data: (__VLS_ctx.infoUser),
+}, ...__VLS_functionalComponentArgsRest(__VLS_0));
+let __VLS_3;
+let __VLS_4;
+const __VLS_5 = ({ call: {} },
+    { onCall: (__VLS_ctx.call) });
+// @ts-ignore
+[infoUser, call,];
+var __VLS_2;
+if (__VLS_ctx.listMessage?.length) {
+    // @ts-ignore
+    [listMessage,];
+    /** @type {[typeof ChatMessage, ]} */ ;
+    // @ts-ignore
+    const __VLS_7 = __VLS_asFunctionalComponent(ChatMessage, new ChatMessage({
+        ...{ 'onScrollTop': {} },
+        ref: "chatMessageRef",
+        data: (__VLS_ctx.infoUser),
+        message: (__VLS_ctx.listMessage),
+        ...{ class: "grow" },
+        response: (__VLS_ctx.response),
+    }));
+    const __VLS_8 = __VLS_7({
+        ...{ 'onScrollTop': {} },
+        ref: "chatMessageRef",
+        data: (__VLS_ctx.infoUser),
+        message: (__VLS_ctx.listMessage),
+        ...{ class: "grow" },
+        response: (__VLS_ctx.response),
+    }, ...__VLS_functionalComponentArgsRest(__VLS_7));
+    let __VLS_10;
+    let __VLS_11;
+    const __VLS_12 = ({ scrollTop: {} },
+        { onScrollTop: (__VLS_ctx.handleScrollTop) });
+    /** @type {typeof __VLS_ctx.chatMessageRef} */ ;
+    var __VLS_13 = {};
+    // @ts-ignore
+    [infoUser, listMessage, response, handleScrollTop, chatMessageRef,];
+    var __VLS_9;
+}
+else {
+    /** @type {[typeof NewCustomer, ]} */ ;
+    // @ts-ignore
+    const __VLS_16 = __VLS_asFunctionalComponent(NewCustomer, new NewCustomer({
+        data: (__VLS_ctx.infoUser),
+        ...{ class: "grow" },
+    }));
+    const __VLS_17 = __VLS_16({
+        data: (__VLS_ctx.infoUser),
+        ...{ class: "grow" },
+    }, ...__VLS_functionalComponentArgsRest(__VLS_16));
+    // @ts-ignore
+    [infoUser,];
+}
+/** @type {[typeof InputChat, ]} */ ;
+// @ts-ignore
+const __VLS_20 = __VLS_asFunctionalComponent(InputChat, new InputChat({
+    ...{ 'onSendMessage': {} },
+    data: (__VLS_ctx.infoUser),
+    ...{ class: "p-6" },
+}));
+const __VLS_21 = __VLS_20({
+    ...{ 'onSendMessage': {} },
+    data: (__VLS_ctx.infoUser),
+    ...{ class: "p-6" },
+}, ...__VLS_functionalComponentArgsRest(__VLS_20));
+let __VLS_23;
+let __VLS_24;
+const __VLS_25 = ({ sendMessage: {} },
+    { onSendMessage: (__VLS_ctx.handleSendMessage) });
+// @ts-ignore
+[infoUser, handleSendMessage,];
+var __VLS_22;
+/** @type {__VLS_StyleScopedClasses['h-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
+/** @type {__VLS_StyleScopedClasses['overflow-hidden']} */ ;
+/** @type {__VLS_StyleScopedClasses['shrink-0']} */ ;
+/** @type {__VLS_StyleScopedClasses['grow']} */ ;
+/** @type {__VLS_StyleScopedClasses['grow']} */ ;
+/** @type {__VLS_StyleScopedClasses['p-6']} */ ;
+// @ts-ignore
+var __VLS_14 = __VLS_13;
+const __VLS_export = (await import('vue')).defineComponent({
+    setup: () => (__VLS_exposed),
+    __typeEmits: {},
+    __typeProps: {},
+    props: {},
+});
+export default {};

package/dist/chat/page/home/HomeHeader.vue.d.ts

@@ -0,0 +1,10 @@
+import type { IResUser } from '@/types/message';
+type Props = {
+    data: IResUser | null;
+};
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    call: () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onCall?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,122 @@
+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';
+const props = withDefaults(defineProps(), {});
+const emit = defineEmits();
+const goToViewUser = () => {
+    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 ?? ''),
+    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 ?? ''),
+    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, 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/chat/page/home/InputChat.vue.d.ts

@@ -0,0 +1,19 @@
+import type { IResMessage, IResUser } from '@/types/message';
+import 'vue3-emoji-picker/css';
+type Props = {
+    data: IResUser | null;
+};
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+} & {
+    sendMessage: (val: IResMessage) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+    onSendMessage?: ((val: IResMessage) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;