@phonghq/go-chat 1.0.72 → 1.0.74

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

@@ -0,0 +1,472 @@
+/// <reference types="C:/phonghq/go-chat-v2/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 { getMessage, sendMessage, upLoadImage } from '../../../utils/chat/store/message';
+import { computed, 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_PLIVO_CALL, TOPIC_PLIVO_SMS } from '../../../constant/mqtt';
+import { MessageState } from '../../../constant/message';
+import { publicTopicConversationUpdate } from '../../../utils/chat/store/conversation';
+import { getCache, removeOldestCache, setCache } from '../../../utils/chat/cache';
+import { digibotId } from '../../../composable/useDigibot';
+import dayjs from 'dayjs';
+import { useDebounce } from '../../../utils/debounce';
+import { getUserHistory, userHistory } from '../../../utils/chat/store/user';
+const props = withDefaults(defineProps(), {});
+const emit = defineEmits();
+const MESSAGE_STORAGE_KEY = 'chat-message-';
+const reversedList = computed(() => listMessage.value.slice().reverse());
+let page = 1;
+let pageCount = 1;
+let topic = '';
+let topic_plivo_chat = '';
+const isLoading = ref(false);
+const infoUser = shallowRef(null);
+const listMessage = ref([]);
+const chatMessageRef = ref(null);
+const inputChatRef = ref(null);
+const customerLoading = ref(false);
+onMounted(() => {
+    document.addEventListener('visibilitychange', handleVisibilitychange);
+});
+onUnmounted(() => {
+    document.removeEventListener('visibilitychange', handleVisibilitychange);
+    handleDisconnectMqtt();
+});
+const handleVisibilitychange = () => {
+    if (document.visibilityState === 'visible') {
+        handleGetMessage({ is_mqtt: true });
+    }
+};
+const handleConnectMqtt = async () => {
+    try {
+        await connectMqtt();
+        topic = TOPIC_PLIVO_CALL + props.conversation?.id;
+        topic_plivo_chat = TOPIC_PLIVO_SMS + props.conversation?.id;
+        // subscribeToTopic(topic)
+        subscribeToTopic(topic_plivo_chat);
+        subscribeToTopic(topic);
+        // addHandleMqttMessage('chat-home', topic, mqttMessageHandler)
+        addHandleMqttMessage('chat-home-1', topic_plivo_chat, mqttMessageHandler);
+        addHandleMqttMessage('chat-home-2', topic, mqttMessageHandler);
+    }
+    catch (error) {
+        console.error(error);
+    }
+};
+const handleDisconnectMqtt = async () => {
+    // unsubscribeFromTopic(topic)
+    await unsubscribeFromTopic(topic_plivo_chat);
+    await unsubscribeFromTopic(topic);
+    // removeHandleMqttMessage('chat-home')
+    removeHandleMqttMessage('chat-home-1');
+    removeHandleMqttMessage('chat-home-2');
+};
+const mqttMessageHandler = (topic, message) => {
+    if ((infoUser.value?.id && message?.sender_id?.toString() == infoUser.value?.id?.toString()) ||
+        (infoUser.value?.id && message?.receiver_id?.toString() == infoUser.value?.id?.toString())) {
+        handleGetListMqtt();
+        const index = listMessage.value.findIndex((item) => item.id === message?.id);
+        if (index < 0) {
+            // listMessage.value.unshift(data)
+            listMessage.value.unshift({ ...message, local_id: message?.id });
+        }
+        else {
+            let data = listMessage.value[index];
+            listMessage.value[index] = { ...data, ...message };
+        }
+        chatMessageRef.value?.scrollBottom();
+    }
+};
+const handleGetMessage = async (option) => {
+    try {
+        const id = props.receiverId;
+        const params = {
+            page: option?.resetList || option?.is_mqtt ? 1 : page,
+            receiver_id: props.receiverId
+        };
+        if (params.page <= 1 && !option?.is_mqtt) {
+            const cache = getCache(MESSAGE_STORAGE_KEY + id);
+            if (cache.data) {
+                listMessage.value = cache.data ?? [];
+                chatMessageRef.value?.scrollBottom();
+            }
+        }
+        let res = await getMessage(params);
+        if (option?.is_mqtt) {
+            reconcileAndSortMessages(res.items);
+            return;
+        }
+        // res.items = res.items.reverse()
+        page = res._meta?.currentPage || 1;
+        pageCount = res._meta?.pageCount || 1;
+        const data = res.items?.map((e) => ({ ...e, local_id: e?.id }));
+        if (id == props.receiverId) {
+            if (page <= 1) {
+                listMessage.value = data;
+                chatMessageRef.value?.scrollBottom();
+                setCache(MESSAGE_STORAGE_KEY + id, data);
+                removeOldestCache(8, MESSAGE_STORAGE_KEY);
+            }
+            else {
+                listMessage.value.push(...data);
+                // 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();
+    chatMessageRef.value?.fixedScroll();
+};
+const handleGetDetailReceiverQuickly = (data) => {
+    if (data?.id == infoUser.value?.id)
+        infoUser.value = data;
+};
+const handleGetDetailReceiver = async (data) => {
+    const id = props.receiverId;
+    if (!data)
+        return;
+    infoUser.value = { ...data, conversation_id: data.id };
+    // const res = (await getDetailReceiver(props.receiverId)) ?? null
+    userHistory.value = null;
+    customerLoading.value = true;
+    handleGetUserHistoryDebounce(infoUser.value?.phone?.slice(1) ?? '');
+    if (id == props.receiverId) {
+        // infoUser.value = res
+        await handleDisconnectMqtt();
+        await handleConnectMqtt();
+    }
+};
+const handleGetUserHistory = async (phone) => {
+    try {
+        // customerLoading.value = true
+        await getUserHistory(phone);
+    }
+    catch (e) {
+        console.log(e);
+    }
+    customerLoading.value = false;
+};
+const handleGetUserHistoryDebounce = useDebounce((phone) => handleGetUserHistory(phone), 500);
+const getData = async (data) => {
+    try {
+        isLoading.value = true;
+        listMessage.value = [];
+        inputChatRef.value?.clearInput();
+        handleGetDetailReceiver(data);
+        await Promise.allSettled([handleGetMessage({ resetList: true })]);
+        // 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.local_id == id);
+    if (index > -1) {
+        let item = listMessage.value[index];
+        item = { ...item, ...data };
+        listMessage.value[index] = item;
+    }
+};
+const handleSendMessage = async (data) => {
+    try {
+        // listMessage.value.push({ ...data, state: MessageState.Sending })
+        listMessage.value.unshift({ ...data, state: MessageState.Sending, local_id: data?.id });
+        await nextTick();
+        // 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.toString() ?? '');
+        if (file_upload?.length) {
+            formData.append('url', file_upload[0]?.url ?? '');
+        }
+        const res = await sendMessage(formData);
+        publishMessage(topic_plivo_chat, {
+            ...data,
+            state: MessageState.Sent,
+            attachments: file_upload
+                ? [
+                    {
+                        file_name: data.attachments[0]?.file_name ?? '',
+                        file_path: file_upload[0]?.url ?? ''
+                    }
+                ]
+                : [],
+            id: res?.message?.id,
+            is_sms: res?.message?.is_sms,
+            local_id: data?.id
+        });
+        updateMessageItem(data.id, {
+            state: MessageState.Sent,
+            id: res?.message?.id,
+            is_sms: res?.message?.is_sms
+        });
+        chatMessageRef.value?.scrollBottom();
+        publicTopicConversationUpdate({
+            message: data?.message ?? '',
+            isSendImg: !!file_upload?.length,
+            infoUser: infoUser.value,
+            is_known: props.conversation?.is_known ?? 0,
+            conversation_id: props.conversation?.id ?? 0
+        });
+    }
+    catch (error) {
+        console.log(error);
+        updateMessageItem(data.id, {
+            state: MessageState.Failed,
+            error: typeof error?.messages == 'string' ? error.messages : error
+        });
+    }
+};
+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);
+    if (res?.[0]?.error) {
+        throw new Error(res?.[0]?.errors ?? 'Error!');
+    }
+    return res;
+};
+const call = () => {
+    if (infoUser.value) {
+        emit('call', infoUser.value);
+    }
+};
+const reconcileAndSortMessages = (serverMessages) => {
+    let currentMessages = [...listMessage.value];
+    serverMessages.forEach((serverMsg) => {
+        const index = currentMessages.findIndex((msg) => msg.id === serverMsg.id);
+        if (index !== -1) {
+            currentMessages[index] = {
+                ...currentMessages[index],
+                ...serverMsg
+            };
+        }
+        else {
+            currentMessages.push(serverMsg);
+        }
+    });
+    listMessage.value = currentMessages.sort((a, b) => dayjs(b.created_at).valueOf() - dayjs(a.created_at).valueOf());
+};
+const handleGetListMqtt = useDebounce(() => handleGetMessage({ is_mqtt: true }), 5000);
+const __VLS_exposed = { getData, handleGetMessage, infoUser, handleGetDetailReceiverQuickly };
+defineExpose(__VLS_exposed);
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_defaults = {};
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_elements;
+let __VLS_components;
+let __VLS_directives;
+if (__VLS_ctx.infoUser) {
+    // @ts-ignore
+    [infoUser,];
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ class: "flex flex-col overflow-hidden relative" },
+    });
+    /** @type {[typeof HomeHeader, ]} */ ;
+    // @ts-ignore
+    const __VLS_0 = __VLS_asFunctionalComponent(HomeHeader, new HomeHeader({
+        ...{ 'onCall': {} },
+        ...{ 'onViewAppointment': {} },
+        ...{ 'onBack': {} },
+        ...{ class: "shrink-0" },
+        data: (__VLS_ctx.infoUser),
+        responsive: (__VLS_ctx.responsive),
+        parentPageName: (__VLS_ctx.parentPageName),
+        customerLoading: (__VLS_ctx.customerLoading),
+    }));
+    const __VLS_1 = __VLS_0({
+        ...{ 'onCall': {} },
+        ...{ 'onViewAppointment': {} },
+        ...{ 'onBack': {} },
+        ...{ class: "shrink-0" },
+        data: (__VLS_ctx.infoUser),
+        responsive: (__VLS_ctx.responsive),
+        parentPageName: (__VLS_ctx.parentPageName),
+        customerLoading: (__VLS_ctx.customerLoading),
+    }, ...__VLS_functionalComponentArgsRest(__VLS_0));
+    let __VLS_3;
+    let __VLS_4;
+    const __VLS_5 = ({ call: {} },
+        { onCall: (__VLS_ctx.call) });
+    const __VLS_6 = ({ viewAppointment: {} },
+        { onViewAppointment: (...[$event]) => {
+                if (!(__VLS_ctx.infoUser))
+                    return;
+                __VLS_ctx.emit('viewAppointment', $event);
+                // @ts-ignore
+                [infoUser, responsive, parentPageName, customerLoading, call, emit,];
+            } });
+    const __VLS_7 = ({ back: {} },
+        { onBack: (...[$event]) => {
+                if (!(__VLS_ctx.infoUser))
+                    return;
+                __VLS_ctx.emit('back');
+                // @ts-ignore
+                [emit,];
+            } });
+    var __VLS_2;
+    if (__VLS_ctx.listMessage?.length) {
+        // @ts-ignore
+        [listMessage,];
+        /** @type {[typeof ChatMessage, ]} */ ;
+        // @ts-ignore
+        const __VLS_9 = __VLS_asFunctionalComponent(ChatMessage, new ChatMessage({
+            ...{ 'onScrollTop': {} },
+            ...{ 'onCallBack': {} },
+            ref: "chatMessageRef",
+            data: (__VLS_ctx.infoUser),
+            message: (__VLS_ctx.reversedList),
+            ...{ class: "grow" },
+            responsive: (__VLS_ctx.responsive),
+            showNewCustomer: (__VLS_ctx.page >= __VLS_ctx.pageCount),
+            isLoading: (__VLS_ctx.isLoading),
+        }));
+        const __VLS_10 = __VLS_9({
+            ...{ 'onScrollTop': {} },
+            ...{ 'onCallBack': {} },
+            ref: "chatMessageRef",
+            data: (__VLS_ctx.infoUser),
+            message: (__VLS_ctx.reversedList),
+            ...{ class: "grow" },
+            responsive: (__VLS_ctx.responsive),
+            showNewCustomer: (__VLS_ctx.page >= __VLS_ctx.pageCount),
+            isLoading: (__VLS_ctx.isLoading),
+        }, ...__VLS_functionalComponentArgsRest(__VLS_9));
+        let __VLS_12;
+        let __VLS_13;
+        const __VLS_14 = ({ scrollTop: {} },
+            { onScrollTop: (__VLS_ctx.handleScrollTop) });
+        const __VLS_15 = ({ callBack: {} },
+            { onCallBack: (__VLS_ctx.call) });
+        /** @type {typeof __VLS_ctx.chatMessageRef} */ ;
+        var __VLS_16 = {};
+        // @ts-ignore
+        [infoUser, responsive, call, reversedList, page, pageCount, isLoading, handleScrollTop, chatMessageRef,];
+        var __VLS_11;
+    }
+    else if (!__VLS_ctx.isLoading) {
+        // @ts-ignore
+        [isLoading,];
+        /** @type {[typeof NewCustomer, ]} */ ;
+        // @ts-ignore
+        const __VLS_19 = __VLS_asFunctionalComponent(NewCustomer, new NewCustomer({
+            data: (__VLS_ctx.infoUser),
+            ...{ class: "grow" },
+            isNew: (!__VLS_ctx.listMessage.length),
+        }));
+        const __VLS_20 = __VLS_19({
+            data: (__VLS_ctx.infoUser),
+            ...{ class: "grow" },
+            isNew: (!__VLS_ctx.listMessage.length),
+        }, ...__VLS_functionalComponentArgsRest(__VLS_19));
+        // @ts-ignore
+        [infoUser, listMessage,];
+    }
+    else {
+        __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
+            ...{ class: "grow" },
+        });
+    }
+    if (__VLS_ctx.receiverId != __VLS_ctx.digibotId) {
+        // @ts-ignore
+        [receiverId, digibotId,];
+        /** @type {[typeof InputChat, ]} */ ;
+        // @ts-ignore
+        const __VLS_23 = __VLS_asFunctionalComponent(InputChat, new InputChat({
+            ...{ 'onSendMessage': {} },
+            ...{ 'onFocus': {} },
+            data: (__VLS_ctx.infoUser),
+            responsive: (__VLS_ctx.responsive),
+            conversation: (__VLS_ctx.conversation),
+            ref: "inputChatRef",
+            ...{ class: "p-2 sm:p-6" },
+        }));
+        const __VLS_24 = __VLS_23({
+            ...{ 'onSendMessage': {} },
+            ...{ 'onFocus': {} },
+            data: (__VLS_ctx.infoUser),
+            responsive: (__VLS_ctx.responsive),
+            conversation: (__VLS_ctx.conversation),
+            ref: "inputChatRef",
+            ...{ class: "p-2 sm:p-6" },
+        }, ...__VLS_functionalComponentArgsRest(__VLS_23));
+        let __VLS_26;
+        let __VLS_27;
+        const __VLS_28 = ({ sendMessage: {} },
+            { onSendMessage: (__VLS_ctx.handleSendMessage) });
+        const __VLS_29 = ({ focus: {} },
+            { onFocus: (...[$event]) => {
+                    if (!(__VLS_ctx.infoUser))
+                        return;
+                    if (!(__VLS_ctx.receiverId != __VLS_ctx.digibotId))
+                        return;
+                    __VLS_ctx.emit('inputFocus');
+                    // @ts-ignore
+                    [infoUser, responsive, emit, conversation, handleSendMessage,];
+                } });
+        /** @type {typeof __VLS_ctx.inputChatRef} */ ;
+        var __VLS_30 = {};
+        // @ts-ignore
+        [inputChatRef,];
+        var __VLS_25;
+    }
+}
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
+/** @type {__VLS_StyleScopedClasses['overflow-hidden']} */ ;
+/** @type {__VLS_StyleScopedClasses['relative']} */ ;
+/** @type {__VLS_StyleScopedClasses['shrink-0']} */ ;
+/** @type {__VLS_StyleScopedClasses['grow']} */ ;
+/** @type {__VLS_StyleScopedClasses['grow']} */ ;
+/** @type {__VLS_StyleScopedClasses['grow']} */ ;
+/** @type {__VLS_StyleScopedClasses['p-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['sm:p-6']} */ ;
+// @ts-ignore
+var __VLS_17 = __VLS_16, __VLS_31 = __VLS_30;
+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,18 @@
+import type { IResUser } from '../../../types/message';
+import type { PAGE_RESPONSIVE, PARENT_PAGE_NAME } from '../../../types/chat/global';
+type Props = {
+    data: IResUser | null;
+    responsive: PAGE_RESPONSIVE | null;
+    parentPageName: PARENT_PAGE_NAME;
+    customerLoading: boolean;
+};
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    call: () => any;
+    back: () => any;
+    viewAppointment: (id: any) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onCall?: (() => any) | undefined;
+    onBack?: (() => any) | undefined;
+    onViewAppointment?: ((id: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;