@phonghq/go-chat 1.0.55 → 1.0.57

package/dist/components/chat/call/Calling.vue.js

@@ -16,35 +16,37 @@ import IconMic from '../../../assets/icons/call/IconMic.vue';
 import { useDebounce } from '../../../utils/debounce';
 import { phoneNumberFormat } from '../../../utils/string-helper';
 import { handleMedialPermissionError, showPageError } from '../../../utils/chat/page-error';
+import RingAudio from '../../../assets/sound/telephone-2.mp3';
+import TimeLeft from '../../../components/chat/call/TimeLeft.vue';
 const props = withDefaults(defineProps(), {
     responsive: 'window'
 });
 const emit = defineEmits();
 const handlePlivoCallBack = (status, data) => {
+    callStatus.value = status;
     if (status == PLIVO_CALL_STATUS.RINGING) {
+        handleInComingCall(data);
+    }
+    else if (status == PLIVO_CALL_STATUS.CHECK_USER_OFFER) {
         getUserOffer(data?.phone ?? '');
-        callStatus.value = PLIVO_CALL_STATUS.RINGING;
-        open();
     }
     else if (status == PLIVO_CALL_STATUS.CONNECT_FAILED || status == PLIVO_CALL_STATUS.NO_ANSWER) {
         endCall();
-        callStatus.value = status;
     }
     else if (status == PLIVO_CALL_STATUS.CALL_END) {
         errorMessage.value = data?.message ?? '';
         const closeModal = data?.reason == 'ORIGINATOR_CANCEL';
         endCall({ closeModal });
-        callStatus.value = status;
     }
     else if (status == PLIVO_CALL_STATUS.CALL_START) {
-        callStatus.value = status;
+        audioRef.value?.pause();
         startTimer();
     }
     else if (status == PLIVO_CALL_STATUS.MEDIA_PERMISSION_FAIL) {
         handleMedialPermissionError();
     }
 };
-const { plivoLogin, plivoCallAnswer, plivoCall, plivoEndCall, plivoCallSwishMute, plivoCallSwishSpeaker } = usePlivo(handlePlivoCallBack);
+const { plivoLogin, plivoCallAnswer, plivoCall, plivoEndCall, plivoCallSwishMute, plivoCallSwishSpeaker, checkTimeLimit } = usePlivo(handlePlivoCallBack);
 const STATUS_LABEL = computed(() => {
     return {
         [PLIVO_CALL_STATUS.CONNECTING]: 'Connecting...',
@@ -57,7 +59,8 @@ const STATUS_LABEL = computed(() => {
         [PLIVO_CALL_STATUS.CANCEL]: '',
         [PLIVO_CALL_STATUS.TIME_OUT]: '',
         [PLIVO_CALL_STATUS.BUSY]: '',
-        [PLIVO_CALL_STATUS.MEDIA_PERMISSION_FAIL]: ''
+        [PLIVO_CALL_STATUS.MEDIA_PERMISSION_FAIL]: '',
+        [PLIVO_CALL_STATUS.CHECK_USER_OFFER]: ''
     };
 });
 const label = computed(() => STATUS_LABEL.value[callStatus.value] ?? '');
@@ -68,8 +71,10 @@ const disable = ref(false);
 const errorMessage = ref('');
 const record_link = ref('');
 const drawerVisibleRef = ref(null);
+const audioRef = ref(null);
 const userRemoter = ref(null);
 const isMute = ref(false);
+const limitTime = ref(0);
 let timer = null;
 let timeOut = null;
 let refreshTokenTimeOut = null;
@@ -78,7 +83,7 @@ let callType = 'call';
 let uuidEnd = '';
 onMounted(async () => {
     try {
-        if (dataProfile.value?.tenant_phone) {
+        if (dataProfile.value?.phone) {
             const token = await getPlivoAccessToken();
             await plivoLogin({ token });
             setTimeout(refreshToken, 15 * 60 * 1000);
@@ -101,9 +106,13 @@ function startTimer() {
     let sec = 0;
     timer = setInterval(() => {
         sec++;
+        limitTime.value = limitTime.value - 1;
         const m = String(Math.floor(sec / 60)).padStart(2, '0');
         const s = String(sec % 60).padStart(2, '0');
         duration.value = `${m}:${s}`;
+        if (!limitTime.value || limitTime.value <= 0) {
+            handleTimeLimitError();
+        }
     }, 1000);
 }
 function endCall(option) {
@@ -111,6 +120,7 @@ function endCall(option) {
         drawerVisible.value = false;
         drawerVisibleRef.value?.close();
     }
+    audioRef.value?.pause();
     handleEmitEndCall(userRemoter.value, callType);
     plivoEndCall(callStatus.value);
     callStatus.value = PLIVO_CALL_STATUS.CALL_END;
@@ -150,6 +160,16 @@ const refreshToken = async () => {
         console.log(e);
     }
 };
+const handleInComingCall = (data) => {
+    limitTime.value = data?.limit_time ?? 0;
+    if (limitTime.value <= 0) {
+        handleTimeLimitError();
+        return;
+    }
+    emit('userCalling', userRemoter.value);
+    audioRef.value?.play();
+    open();
+};
 const open = () => {
     drawerVisible.value = true;
     disable.value = true;
@@ -169,6 +189,11 @@ const startCall = async (data) => {
         callStatus.value = PLIVO_CALL_STATUS.CONNECTING;
         userRemoter.value = data;
         open();
+        limitTime.value = await checkTimeLimit();
+        if (!limitTime.value || limitTime.value <= 0) {
+            handleTimeLimitError();
+            return;
+        }
         callType = 'call';
         await plivoCall(data.phone);
         callStatus.value = PLIVO_CALL_STATUS.CALLING;
@@ -194,7 +219,6 @@ const getUserOffer = async (phone) => {
     let res = null;
     try {
         userRemoter.value = { phone, username: '' };
-        emit('userCalling', userRemoter.value);
         let data = {
             phone: formatPhone10number(phone, '1'),
             client_id: dataProfile.value?.tenant_id ?? ''
@@ -209,56 +233,14 @@ const getUserOffer = async (phone) => {
         phone: res?.phone ? '1' + res?.phone : phone
     };
     userRemoter.value = user;
-    if (callStatus.value !== PLIVO_CALL_STATUS.CALL_END) {
+    if (callStatus.value !== PLIVO_CALL_STATUS.CALL_END && callStatus.value !== PLIVO_CALL_STATUS.CHECK_USER_OFFER) {
         emit('userCalling', userRemoter.value);
     }
 };
-// const handleMqttMessage = async (message: any) => {
-//   console.log(message)
-//   let da = true
-//   if (message.event == 'call_update') {
-//     if (message?.data?.status == PLIVO_CALL_STATUS.RINGING) {
-//       if (message?.data?.to_number == dataProfile.value?.phone) {
-//         callStatus.value = PLIVO_CALL_STATUS.RINGING
-//         dataWebSK = {
-//           from: message.data.from_number,
-//           to: message.data.to_number
-//         }
-//         getUserOffer(message.data.from_number)
-//         handleCallAnswer(message)
-//         open()
-//       }
-//     } else if (message?.data?.status == PLIVO_CALL_STATUS.CALL_START) {
-//       try {
-//         await startIncomingCall(message?.data?.call_uuid)
-//         startTimer()
-//         callStatus.value = PLIVO_CALL_STATUS.CALL_START
-//       } catch (e) {
-//         console.log(e)
-//         endCall()
-//       }
-//     } else if (message?.data?.status == PLIVO_CALL_STATUS.CALL_END) {
-//       endCall()
-//     } else if (
-//       message?.data?.status == PLIVO_CALL_STATUS.CONNECT_FAILED ||
-//       message?.data?.status == PLIVO_CALL_STATUS.NO_ANSWER
-//     ) {
-//       endCall()
-//       callStatus.value = message?.data?.status
-//     } else {
-//       // console.log(message)
-//       da = false
-//       // handleMedia(message)
-//     }
-//   } else if (message?.event == 'record_uploaded') {
-//     if (uuidEnd == message?.data?.call_uuid) {
-//       record_link.value = message?.data?.recording_url
-//     }
-//   }
-//
-//   // if (da){
-//   // } else console.log('-----------------', message)
-// }
+const handleTimeLimitError = () => {
+    errorMessage.value = 'Call time limit reached. This call has ended.';
+    endCall();
+};
 const exportRecordFile = async () => {
     downloadRecord(record_link.value);
 };
@@ -321,6 +303,16 @@ const { default: __VLS_8 } = __VLS_2.slots;
         ...{ class: "flex flex-col items-center justify-center h-full relative bg-white" },
         ...{ style: {} },
     });
+    /** @type {[typeof TimeLeft, ]} */ ;
+    // @ts-ignore
+    const __VLS_10 = __VLS_asFunctionalComponent(TimeLeft, new TimeLeft({
+        time: (__VLS_ctx.limitTime),
+    }));
+    const __VLS_11 = __VLS_10({
+        time: (__VLS_ctx.limitTime),
+    }, ...__VLS_functionalComponentArgsRest(__VLS_10));
+    // @ts-ignore
+    [limitTime,];
     __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
         ...{ class: "h-40 w-40 call-avatar mb-8" },
     });
@@ -329,7 +321,7 @@ const { default: __VLS_8 } = __VLS_2.slots;
     });
     /** @type {[typeof Avatar, ]} */ ;
     // @ts-ignore
-    const __VLS_10 = __VLS_asFunctionalComponent(Avatar, new Avatar({
+    const __VLS_14 = __VLS_asFunctionalComponent(Avatar, new Avatar({
         ...{ class: "bg-white z-[2]" },
         src: (__VLS_ctx.userRemoter?.avatar ?? ''),
         id: (__VLS_ctx.userRemoter?.id ?? ''),
@@ -337,14 +329,14 @@ const { default: __VLS_8 } = __VLS_2.slots;
         name: (__VLS_ctx.userRemoter?.username),
         size: "xxl",
     }));
-    const __VLS_11 = __VLS_10({
+    const __VLS_15 = __VLS_14({
         ...{ class: "bg-white z-[2]" },
         src: (__VLS_ctx.userRemoter?.avatar ?? ''),
         id: (__VLS_ctx.userRemoter?.id ?? ''),
         color: (__VLS_ctx.userRemoter?.color),
         name: (__VLS_ctx.userRemoter?.username),
         size: "xxl",
-    }, ...__VLS_functionalComponentArgsRest(__VLS_10));
+    }, ...__VLS_functionalComponentArgsRest(__VLS_14));
     // @ts-ignore
     [userRemoter, userRemoter, userRemoter, userRemoter,];
     if (__VLS_ctx.callStatus == __VLS_ctx.PLIVO_CALL_STATUS.RINGING || __VLS_ctx.callStatus == __VLS_ctx.PLIVO_CALL_STATUS.CALLING) {
@@ -371,7 +363,10 @@ const { default: __VLS_8 } = __VLS_2.slots;
     [userRemoter, userRemoter, phoneNumberFormat,];
     __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
         ...{ class: "text-gray-400 mt-1" },
+        ...{ class: ({ 'text-2xl font-semibold': __VLS_ctx.callStatus == __VLS_ctx.PLIVO_CALL_STATUS.CALL_START }) },
     });
+    // @ts-ignore
+    [callStatus, PLIVO_CALL_STATUS,];
     (__VLS_ctx.callStatus == __VLS_ctx.PLIVO_CALL_STATUS.CALL_START ? __VLS_ctx.duration : __VLS_ctx.STATUS_LABEL[__VLS_ctx.callStatus]);
     // @ts-ignore
     [callStatus, callStatus, PLIVO_CALL_STATUS, duration, STATUS_LABEL,];
@@ -391,8 +386,8 @@ const { default: __VLS_8 } = __VLS_2.slots;
         [record_link, exportRecordFile,];
         /** @type {[typeof IconSoundDownload, ]} */ ;
         // @ts-ignore
-        const __VLS_14 = __VLS_asFunctionalComponent(IconSoundDownload, new IconSoundDownload({}));
-        const __VLS_15 = __VLS_14({}, ...__VLS_functionalComponentArgsRest(__VLS_14));
+        const __VLS_18 = __VLS_asFunctionalComponent(IconSoundDownload, new IconSoundDownload({}));
+        const __VLS_19 = __VLS_18({}, ...__VLS_functionalComponentArgsRest(__VLS_18));
     }
     if (__VLS_ctx.callStatus == __VLS_ctx.PLIVO_CALL_STATUS.CALL_START) {
         // @ts-ignore
@@ -409,12 +404,12 @@ const { default: __VLS_8 } = __VLS_2.slots;
         });
         /** @type {[typeof IconMic, ]} */ ;
         // @ts-ignore
-        const __VLS_18 = __VLS_asFunctionalComponent(IconMic, new IconMic({
+        const __VLS_22 = __VLS_asFunctionalComponent(IconMic, new IconMic({
             mute: (__VLS_ctx.isMute),
         }));
-        const __VLS_19 = __VLS_18({
+        const __VLS_23 = __VLS_22({
             mute: (__VLS_ctx.isMute),
-        }, ...__VLS_functionalComponentArgsRest(__VLS_18));
+        }, ...__VLS_functionalComponentArgsRest(__VLS_22));
         // @ts-ignore
         [isMute,];
     }
@@ -433,8 +428,8 @@ const { default: __VLS_8 } = __VLS_2.slots;
         });
         /** @type {[typeof IconClose, ]} */ ;
         // @ts-ignore
-        const __VLS_22 = __VLS_asFunctionalComponent(IconClose, new IconClose({}));
-        const __VLS_23 = __VLS_22({}, ...__VLS_functionalComponentArgsRest(__VLS_22));
+        const __VLS_26 = __VLS_asFunctionalComponent(IconClose, new IconClose({}));
+        const __VLS_27 = __VLS_26({}, ...__VLS_functionalComponentArgsRest(__VLS_26));
     }
     if (__VLS_ctx.callStatus != __VLS_ctx.PLIVO_CALL_STATUS.CALL_END) {
         // @ts-ignore
@@ -451,8 +446,8 @@ const { default: __VLS_8 } = __VLS_2.slots;
         });
         /** @type {[typeof IconPhoneCancel, ]} */ ;
         // @ts-ignore
-        const __VLS_26 = __VLS_asFunctionalComponent(IconPhoneCancel, new IconPhoneCancel({}));
-        const __VLS_27 = __VLS_26({}, ...__VLS_functionalComponentArgsRest(__VLS_26));
+        const __VLS_30 = __VLS_asFunctionalComponent(IconPhoneCancel, new IconPhoneCancel({}));
+        const __VLS_31 = __VLS_30({}, ...__VLS_functionalComponentArgsRest(__VLS_30));
     }
     if (__VLS_ctx.callStatus == __VLS_ctx.PLIVO_CALL_STATUS.RINGING) {
         // @ts-ignore
@@ -465,14 +460,23 @@ const { default: __VLS_8 } = __VLS_2.slots;
         [answer,];
         /** @type {[typeof IconPhone, ]} */ ;
         // @ts-ignore
-        const __VLS_30 = __VLS_asFunctionalComponent(IconPhone, new IconPhone({}));
-        const __VLS_31 = __VLS_30({}, ...__VLS_functionalComponentArgsRest(__VLS_30));
+        const __VLS_34 = __VLS_asFunctionalComponent(IconPhone, new IconPhone({}));
+        const __VLS_35 = __VLS_34({}, ...__VLS_functionalComponentArgsRest(__VLS_34));
     }
     __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
         ...{ class: "flex items-center justify-center gap-8 mt-10" },
     });
 }
 var __VLS_2;
+__VLS_asFunctionalElement(__VLS_elements.audio, __VLS_elements.audio)({
+    ref: "audioRef",
+    src: (__VLS_ctx.RingAudio),
+    loop: true,
+    preload: "auto",
+});
+/** @type {typeof __VLS_ctx.audioRef} */ ;
+// @ts-ignore
+[RingAudio, audioRef,];
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
 /** @type {__VLS_StyleScopedClasses['items-center']} */ ;
@@ -505,6 +509,8 @@ var __VLS_2;
 /** @type {__VLS_StyleScopedClasses['font-semibold']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-gray-400']} */ ;
 /** @type {__VLS_StyleScopedClasses['mt-1']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-2xl']} */ ;
+/** @type {__VLS_StyleScopedClasses['font-semibold']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
 /** @type {__VLS_StyleScopedClasses['items-center']} */ ;
 /** @type {__VLS_StyleScopedClasses['justify-center']} */ ;

package/dist/components/chat/call/TimeLeft.vue.d.ts

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    time: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/chat/call/TimeLeft.vue.js

@@ -0,0 +1,59 @@
+/// <reference types="C:/phonghq/go-chat-v2/node_modules/.vue-global-types/vue_3.5_0.d.ts" />
+import { computed } from 'vue';
+import IconClock from '../../../assets/icons/call/IconClock.vue';
+const props = withDefaults(defineProps(), {});
+const emit = defineEmits();
+const limitTimeLabel = computed(() => {
+    const m2 = Math.floor(props.time / 60);
+    const s2 = props.time % 60;
+    return `${m2.toString().padStart(2, '0')}:${s2.toString().padStart(2, '0')}`;
+});
+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: "text-sm rounded-lg px-3 py-1.5 border border-chat-primary border-[2px] bg-[#eff6ff] absolute top-6 left-6 text-chat-primary flex items-center gap-1" },
+});
+/** @type {[typeof IconClock, ]} */ ;
+// @ts-ignore
+const __VLS_0 = __VLS_asFunctionalComponent(IconClock, new IconClock({
+    ...{ class: "w-4 h-4" },
+}));
+const __VLS_1 = __VLS_0({
+    ...{ class: "w-4 h-4" },
+}, ...__VLS_functionalComponentArgsRest(__VLS_0));
+(__VLS_ctx.limitTimeLabel);
+// @ts-ignore
+[limitTimeLabel,];
+/** @type {__VLS_StyleScopedClasses['text-sm']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-lg']} */ ;
+/** @type {__VLS_StyleScopedClasses['px-3']} */ ;
+/** @type {__VLS_StyleScopedClasses['py-1.5']} */ ;
+/** @type {__VLS_StyleScopedClasses['border']} */ ;
+/** @type {__VLS_StyleScopedClasses['border-chat-primary']} */ ;
+/** @type {__VLS_StyleScopedClasses['border-[2px]']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-[#eff6ff]']} */ ;
+/** @type {__VLS_StyleScopedClasses['absolute']} */ ;
+/** @type {__VLS_StyleScopedClasses['top-6']} */ ;
+/** @type {__VLS_StyleScopedClasses['left-6']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-chat-primary']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['gap-1']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-4']} */ ;
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+    props: {},
+});
+export default {};

package/dist/composable/useInitData.js

@@ -1,6 +1,6 @@
 import { ref } from 'vue';
 import { sdkInit } from '../plugins/sdk';
-import { checkTenantPhoneOnGapInsight, dataProfile, getProfile, loginLink } from '../utils/chat/store/auth';
+import { dataProfile, getProfile, loginLink } from '../utils/chat/store/auth';
 import { routerPush } from '../utils/chat/chat-router';
 import { PAGE } from '../constant/general';
 import { connectMqtt, subscribeToTopic, unsubscribeFromTopic } from '../plugins/mqtt';
@@ -36,7 +36,7 @@ export function useInitData() {
     const initData = async (props, responsive) => {
         await getProfile();
         if (dataProfile.value?.user_type == 'tenant') {
-            await checkTenantPhoneOnGapInsight();
+            // await checkTenantPhoneOnGapInsight()
         }
         unsubscribeFromTopic(TOPIC_DETAIL_CALL + dataProfile.value?.id);
         subscribeToTopic(TOPIC_DETAIL_CALL + dataProfile.value?.id);

package/dist/composable/useListConversations.d.ts

@@ -47,6 +47,8 @@ export declare const useListConversations: (is_unknown: number, is_tenant: boole
     getData: (data?: IParamGetConversation, option?: {
         reset?: boolean;
         hideLoading?: boolean;
+        page?: number;
+        is_mqtt?: boolean;
     }) => Promise<void>;
     handleReadMessage: (receiver_id: any) => void;
     getDataCache: () => boolean;

package/dist/composable/useListConversations.js

@@ -5,6 +5,7 @@ import { dataProfile } from '../utils/chat/store/auth';
 import { useDebounce } from '../utils/debounce';
 import { getConversation } from '../utils/chat/store/conversation';
 import { readMessages } from '../utils/chat/store/message';
+import dayjs from 'dayjs';
 import { useDigibot } from '../composable/useDigibot';
 import { getCache, setCache } from '../utils/chat/cache';
 const { digibotData, digibotId } = useDigibot();
@@ -19,10 +20,17 @@ export const useListConversations = (is_unknown, is_tenant) => {
     const isLoadingSearch = ref(false);
     onMounted(() => {
         handleConnectMqtt();
+        document.addEventListener('visibilitychange', handleVisibilitychange);
     });
     onUnmounted(() => {
+        document.removeEventListener('visibilitychange', handleVisibilitychange);
         handleDisconnectMqtt;
     });
+    const handleVisibilitychange = () => {
+        if (document.visibilityState === 'visible') {
+            getDataMqtt();
+        }
+    };
     const handleDisconnectMqtt = () => {
         TOPIC_HOME.forEach((item) => {
             unsubscribeFromTopic(item + dataProfile.value?.id);
@@ -57,25 +65,28 @@ export const useListConversations = (is_unknown, is_tenant) => {
     };
     const mqttMessageHandler = (topic, data) => {
         if ((data.is_unknown ?? 0) == is_unknown || (!is_tenant && is_unknown == 0)) {
-            getDataMqtt();
+            getDataMqttDebounce();
             if (topic ===
                 TOPIC_HOME[0] + dataProfile.value?.id
-            // ||topic === TOPIC_HOME[3] + dataProfile.value?.id
-            ) {
+                || topic === TOPIC_HOME[1] + dataProfile.value?.id) {
                 const index = listConversations.value.findIndex((item) => item.id === data.id);
                 const hasChatBox = listConversations.value.findIndex((item) => item.id === digibotId);
                 if (index != -1) {
                     data.username = listConversations.value[index].username ?? '';
+                    data.color = listConversations.value[index].color ?? '';
+                    data.avatar = listConversations.value[index].avatar ?? '';
+                    data.receiver_id = listConversations.value[index].receiver_id;
                     listConversations.value.splice(index, 1);
                 }
                 if (hasChatBox > -1) {
                     listConversations.value.splice(1, 0, data);
                 }
                 else {
+                    data.receiver_id = data.receiver_id != dataProfile.value?.id ? data.receiver_id : data.sender_id;
                     listConversations.value.unshift(data);
                 }
             }
-            if (topic === TOPIC_HOME[1] + dataProfile.value?.id) {
+            if (topic === TOPIC_HOME[2] + dataProfile.value?.id) {
                 if (data.is_unknown == is_unknown) {
                     const index = listConversations.value.findIndex((item) => item.id === data.id);
                     if (index != -1) {
@@ -96,19 +107,31 @@ export const useListConversations = (is_unknown, is_tenant) => {
             // }
         }
     };
-    const getDataMqtt = useDebounce(() => {
-        getData(undefined, { hideLoading: true, reset: true });
+    const getDataMqttDebounce = useDebounce(() => {
+        getDataMqtt();
     }, 5000);
     const getData = async (data, option) => {
         try {
             if (!is_tenant && is_unknown == 1)
                 return;
             params.value = { ...params.value, ...(data ?? {}) };
-            const is_unknown_value = is_tenant ? is_unknown : undefined;
             if (option?.reset) {
                 params.value.page = 1;
             }
-            const res = await getConversation({ ...params.value, is_unknown: is_unknown_value });
+            const is_unknown_value = is_tenant ? is_unknown : undefined;
+            const page_request = option?.page ?? params.value.page;
+            const res = await getConversation({
+                ...params.value,
+                is_unknown: is_unknown_value,
+                page: page_request
+            });
+            if (page_request <= 1 && !params.value?.search) {
+                setCache(STORAGE_KEY + is_unknown, res.items);
+            }
+            if (option?.is_mqtt) {
+                mergeChats(res?.items);
+                return;
+            }
             if (option?.reset) {
                 listConversations.value = [];
                 if (is_unknown == 0 && dataProfile.value?.user_type == 'tenant')
@@ -118,9 +141,6 @@ export const useListConversations = (is_unknown, is_tenant) => {
             listConversations.value.push(...(res?.items ?? []));
             params.value.page = res?._meta?.currentPage || 1;
             pageCount.value = res?._meta?.pageCount || 1;
-            if (params.value.page <= 1) {
-                setCache(STORAGE_KEY + is_unknown, listConversations.value);
-            }
         }
         catch (error) {
             console.error(error);
@@ -128,6 +148,25 @@ export const useListConversations = (is_unknown, is_tenant) => {
         finally {
         }
     };
+    const mergeChats = (newChats) => {
+        const map = new Map();
+        listConversations.value.forEach((c) => {
+            map.set(c.id, c);
+        });
+        newChats.forEach((c) => {
+            map.set(c.id, {
+                ...(map.get(c.id) ?? {}),
+                ...c
+            });
+        });
+        listConversations.value = Array.from(map.values()).sort((a, b) => dayjs(b.updated_at).valueOf() - dayjs(a.updated_at).valueOf());
+    };
+    const getDataMqtt = async () => {
+        let page = params.value.page;
+        for (let i = 1; i <= page; i++) {
+            await getData(undefined, { page: i, is_mqtt: true });
+        }
+    };
     const getDataCache = () => {
         const cache_data = getCache(STORAGE_KEY + is_unknown);
         if (cache_data.data) {

package/dist/composable/usePlivo.d.ts

@@ -10,4 +10,5 @@ export declare function usePlivo(callback: (status: PlivoCallStatusType, data?:
     plivoEndCall: (status: PlivoCallStatusType) => void;
     plivoCallSwishMute: (isMute: boolean) => void;
     plivoCallSwishSpeaker: (id: any) => void;
+    checkTimeLimit: () => Promise<number>;
 };

package/dist/composable/usePlivo.js

@@ -1,6 +1,7 @@
 import { PLIVO_CALL_STATUS } from '../types/chat/call';
 import { createSipAccount } from '../utils/chat/store/call';
 import { dataProfile } from '../utils/chat/store/auth';
+import { getPhoneTimeLimit } from '../utils/chat/store/message';
 export function usePlivo(callback) {
     var options = {
         debug: 'ALL',
@@ -40,13 +41,14 @@ export function usePlivo(callback) {
                 const payload = JSON.parse(atob(data.token.split('.')[1]));
                 await createSipAccount({
                     sip_username: `${payload.sub}_${payload.iss}`,
-                    did_number: dataProfile.value?.tenant_phone ?? ''
+                    did_number: dataProfile.value?.phone ?? ''
                 });
             }
             // await plivoBrowserSdk?.client?.tokenLogin(payload.sub ?? '', token)
             // await plivoBrowserSdk?.client?.login('webcall003079673454891827', '123456abcA!')
             // await plivoBrowserSdk?.client?.login(payload.sub , null, token)
             await plivoBrowserSdk?.client?.loginWithAccessToken(data.token);
+            plivoBrowserSdk?.client?.setRingTone(false);
             // await plivoBrowserSdk?.client?.on?.(payload)
             // console.log('Registered with token')
         }
@@ -57,13 +59,20 @@ export function usePlivo(callback) {
     const handleLoginFailed = (e) => {
         console.log('Login failed', e);
     };
-    const handleIncomingCall = (call) => {
-        console.log(call);
-        const data = {
-            phone: _getPhone(call.src)
-        };
-        callback(PLIVO_CALL_STATUS.RINGING, data);
-        CallUuid = call?.callUUID;
+    const handleIncomingCall = async (call) => {
+        try {
+            const data = {
+                phone: _getPhone(call.src)
+            };
+            callback(PLIVO_CALL_STATUS.CHECK_USER_OFFER, data);
+            const limit_time = await checkTimeLimit();
+            plivoBrowserSdk?.client?.setRingTone(true);
+            callback(PLIVO_CALL_STATUS.RINGING, { ...data, limit_time });
+            CallUuid = call?.callUUID;
+        }
+        catch (error) {
+            callback(PLIVO_CALL_STATUS.CALL_END);
+        }
     };
     const handleCallRemoteRinging = (callInfo) => {
         CallUuid = callInfo.callUUID;
@@ -125,7 +134,7 @@ export function usePlivo(callback) {
             plivoBrowserSdk?.client?.unmute?.();
     };
     const plivoCall = async (phone) => {
-        plivoBrowserSdk.client.call('+' + phone, { number_phone: phone });
+        plivoBrowserSdk?.client?.call('+' + phone, { number_phone: phone });
         await _waitEventOrTimeout(5000);
     };
     const plivoEndCall = (status) => {
@@ -135,6 +144,7 @@ export function usePlivo(callback) {
         else if (status == PLIVO_CALL_STATUS.CALL_START || status == PLIVO_CALL_STATUS.CALLING) {
             plivoBrowserSdk?.client?.hangup?.();
         }
+        plivoBrowserSdk?.client?.setRingTone(false);
     };
     const handleCallFailed = (data, callInfo) => {
         console.log('handleCallFailed', data);
@@ -158,6 +168,17 @@ export function usePlivo(callback) {
         alert(id);
         plivoBrowserSdk?.client?.audio?.set?.(id);
     };
+    const checkTimeLimit = async () => {
+        // await sleep()
+        const res = await getPhoneTimeLimit({
+            tenant_id: dataProfile.value?.tenant_id ?? '',
+            phone: dataProfile.value?.phone ?? ''
+        });
+        return res;
+    };
+    const sleep = () => {
+        return new Promise(resolve => setTimeout(resolve, 2000));
+    };
     return {
         plivoLogin,
         plivoCallAnswer,
@@ -166,5 +187,6 @@ export function usePlivo(callback) {
         plivoEndCall,
         plivoCallSwishMute,
         plivoCallSwishSpeaker,
+        checkTimeLimit
     };
 }

package/dist/constant/mqtt.d.ts

@@ -1,5 +1,6 @@
 export declare const TOPIC_DETAIL_CHAT = "chat/message/";
 export declare const TOPIC_DETAIL_CALL = "call/message/";
+export declare const TOPIC_PLIVO_CALL = "message-call/";
 export declare const TOPIC_PLIVO_SMS = "sms-inbound/";
 export declare const TOPIC_STATUS_USER: string;
 export declare const TOPIC_HOME: string[];

package/dist/constant/mqtt.js

@@ -1,11 +1,13 @@
 export const TOPIC_DETAIL_CHAT = 'chat/message/';
 export const TOPIC_DETAIL_CALL = 'call/message/';
+export const TOPIC_PLIVO_CALL = 'message-call/';
 export const TOPIC_PLIVO_SMS = 'sms-inbound/';
 export const TOPIC_STATUS_USER = 'user/status/';
 export const TOPIC_HOME = [
     // 'chat/conversation/update/',
     // 'chat/conversation/read_message/',
     // 'chat/conversation/update_list/',
+    'chat/conversation/update/message-call/',
     'chat/conversation/update/sms-inbound/',
     'chat/conversation/read_message/',
 ];