@phonghq/go-chat 1.0.62 → 1.0.63

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

@@ -1,11 +1,14 @@
 import InputSearch from '../../../components/chat/common/input/InputSearch.vue';
 import IconPlus from '../../../assets/icons/global/IconPlus.vue';
-import { computed, ref } from 'vue';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
 import Avatar from '../../../components/chat/customer/Avatar.vue';
 import { getConversationView } from '../../../utils/chat/store/conversation';
 import ScrollEvent from '../../../components/chat/ScrollEvent/ScrollEvent.vue';
 import { useDebounce } from '../../../utils/debounce';
+import { addHandleMqttMessage, connectMqtt, removeHandleMqttMessage, subscribeToTopic, unsubscribeFromTopic } from '../../../plugins/mqtt';
+import { TOPIC_CUSTOMER_RELOAD } from '../../../constant/mqtt';
 import { dataProfile } from '../../../utils/chat/store/auth';
+import { getDetailReceiver } from '../../../utils/chat/store/message';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import updateLocale from 'dayjs/plugin/updateLocale';
@@ -45,16 +48,34 @@ const TAB_VALUE = {
     UNKNOWN: 1
 };
 const tabs = computed(() => [
-    { label: 'All', value: TAB_VALUE.ALL },
+    { label: 'All', value: TAB_VALUE.ALL, badge: (listConversationsAllUnread.value || '').toString() },
     {
         label: 'Message Requests',
         value: TAB_VALUE.UNKNOWN,
         badge: (listConversationsUnknownUnread.value || '').toString()
     }
 ]);
+let topic_customer_update = '';
 const { digibotData, digibotId } = useDigibot();
 const { listConversations: listConversationsAll, getData: getDataAll, params: paramsAll, pageCount: pageCountAll, handleReadMessage: handleReadMessageAll, getDataCache: getDataCacheAll } = useListConversations(TAB_VALUE.ALL, dataProfile.value?.user_type === 'tenant');
 const { listConversations: listConversationsUnknown, getData: getDataUnknown, params: paramsUnknown, pageCount: pageCountUnknown, handleReadMessage: handleReadMessageUnknown, getDataCache: getDataCacheUnknown } = useListConversations(TAB_VALUE.UNKNOWN, dataProfile.value?.user_type === 'tenant');
+onMounted(async () => {
+    try {
+        if (dataProfile.value) {
+            await connectMqtt();
+            topic_customer_update = `tenant/${dataProfile.value?.tenant_id}/customer/+/update`;
+            subscribeToTopic(topic_customer_update);
+            addHandleMqttMessage('chat-list', topic_customer_update, mqttMessageHandler);
+        }
+    }
+    catch (error) {
+        console.error(error);
+    }
+});
+onUnmounted(() => {
+    unsubscribeFromTopic(topic_customer_update);
+    removeHandleMqttMessage('chat-list');
+});
 const receiver_id = defineModel('receiverId');
 const listConversations = computed(() => {
     if (activeTabs.value == TAB_VALUE.ALL)
@@ -64,6 +85,9 @@ const listConversations = computed(() => {
 const listConversationsUnknownUnread = computed(() => {
     return (listConversationsUnknown.value.reduce((total, cur) => total + (cur?.unread_count ?? 0), 0) ?? 0);
 });
+const listConversationsAllUnread = computed(() => {
+    return (listConversationsAll.value.reduce((total, cur) => total + (cur?.unread_count ?? 0), 0) ?? 0);
+});
 const keyword = ref('');
 const activeTabs = ref(TAB_VALUE.ALL);
 const scrollEventRef = ref(null);
@@ -104,6 +128,43 @@ const getData = async (data, option) => {
         isLoadingSearch.value = false;
     }
 };
+const mqttMessageHandler = async (topic, data) => {
+    const subParts = TOPIC_CUSTOMER_RELOAD.split('/');
+    const topicParts = topic.split('/');
+    const idIndex = subParts.findIndex((p) => p === '+');
+    const id = topicParts[idIndex];
+    const customer = await getDetailReceiver(id);
+    const isAllTab = !!customer.username;
+    const correctList = isAllTab ? listConversationsAll.value : listConversationsUnknown.value;
+    const wrongList = isAllTab ? listConversationsUnknown.value : listConversationsAll.value;
+    const updatePayload = {
+        username: customer.username,
+        phone: customer.phone,
+        avatar: customer.avatar,
+        color: customer.color,
+        local_id: customer.conversation_id
+    };
+    const correctIndex = correctList.findIndex((conversation) => conversation.id === customer.conversation_id);
+    if (correctIndex > -1) {
+        Object.assign(correctList[correctIndex], updatePayload);
+    }
+    const wrongIndex = wrongList.findIndex((c) => c.id === customer.conversation_id);
+    if (wrongIndex > -1) {
+        const conversation = wrongList[wrongIndex];
+        wrongList.splice(wrongIndex, 1);
+        const hasChatBox = listConversations.value.findIndex((item) => item.id === digibotId);
+        const data_format = {
+            ...conversation,
+            ...updatePayload
+        };
+        if (hasChatBox > -1) {
+            correctList.splice(1, 0, data_format);
+        }
+        else {
+            correctList.unshift(data_format);
+        }
+    }
+};
 const getAllList = async (tab_value) => {
     if (tab_value == TAB_VALUE.ALL) {
         while (paramsAll.value.page < pageCountAll.value && !scrollEventRef.value?.canScroll()) {

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

@@ -102,13 +102,15 @@ if (__VLS_ctx.showNewCustomer) {
     const __VLS_9 = __VLS_asFunctionalComponent(NewCustomer, new NewCustomer({
         ...{ class: "h-full" },
         data: (__VLS_ctx.data),
+        isNew: (!__VLS_ctx.message.length),
     }));
     const __VLS_10 = __VLS_9({
         ...{ class: "h-full" },
         data: (__VLS_ctx.data),
+        isNew: (!__VLS_ctx.message.length),
     }, ...__VLS_functionalComponentArgsRest(__VLS_9));
     // @ts-ignore
-    [data,];
+    [data, message,];
 }
 __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
     ...{ class: "chat-padding-page" },

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

@@ -156,7 +156,7 @@ if (__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending || __VLS_ctx.isMyM
                 'rounded-bl-[6px]': !__VLS_ctx.isChatFinished && !__VLS_ctx.isMyMessage,
                 'rounded-tr-[6px]': !__VLS_ctx.isChatStart && __VLS_ctx.isMyMessage,
                 'rounded-br-[6px]': !__VLS_ctx.isChatFinished && __VLS_ctx.isMyMessage,
-                '!text-white !bg-chat-success': (__VLS_ctx.message.message_uuid && !__VLS_ctx.message.is_call) || __VLS_ctx.message.is_sms,
+                '!text-white !bg-chat-success': ((__VLS_ctx.message.message_uuid && !__VLS_ctx.message.is_call) || __VLS_ctx.message.is_sms) && __VLS_ctx.isMyMessage,
                 'bg-chat-primary text-white': __VLS_ctx.isMyMessage && !__VLS_ctx.message.is_call,
                 'bg-[#E4E4E4D4]  text-chat-haze-600': !__VLS_ctx.isMyMessage || __VLS_ctx.message.is_call,
                 'ml-auto': __VLS_ctx.isMyMessage,
@@ -166,7 +166,7 @@ if (__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending || __VLS_ctx.isMyM
             }) },
     });
     // @ts-ignore
-    [isMyMessage, isMyMessage, isMyMessage, isMyMessage, isMyMessage, isMyMessage, isMyMessage, isMyMessage, message, message, message, message, message, responsive, responsive, isChatStart, isChatStart, isChatFinished, isChatFinished,];
+    [isMyMessage, isMyMessage, isMyMessage, isMyMessage, isMyMessage, isMyMessage, isMyMessage, isMyMessage, isMyMessage, message, message, message, message, message, responsive, responsive, isChatStart, isChatStart, isChatFinished, isChatFinished,];
     if (__VLS_ctx.message.is_call == 1) {
         // @ts-ignore
         [message,];

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

@@ -105,7 +105,7 @@ const handleGetMessage = async (option) => {
             if (page <= 1) {
                 listMessage.value = data;
                 chatMessageRef.value?.scrollBottom();
-                setCache(MESSAGE_STORAGE_KEY + id, res.items);
+                setCache(MESSAGE_STORAGE_KEY + id, data);
                 removeOldestCache(8, MESSAGE_STORAGE_KEY);
             }
             else {
@@ -351,13 +351,15 @@ else if (!__VLS_ctx.isLoading) {
     const __VLS_18 = __VLS_asFunctionalComponent(NewCustomer, new NewCustomer({
         data: (__VLS_ctx.infoUser),
         ...{ class: "grow" },
+        isNew: (!__VLS_ctx.listMessage.length),
     }));
     const __VLS_19 = __VLS_18({
         data: (__VLS_ctx.infoUser),
         ...{ class: "grow" },
+        isNew: (!__VLS_ctx.listMessage.length),
     }, ...__VLS_functionalComponentArgsRest(__VLS_18));
     // @ts-ignore
-    [infoUser,];
+    [infoUser, listMessage,];
 }
 else {
     __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({

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

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

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

@@ -45,12 +45,20 @@ __VLS_asFunctionalElement(__VLS_elements.h2, __VLS_elements.h2)({
 (__VLS_ctx.data?.username || __VLS_ctx.phoneNumberFormat(__VLS_ctx.data?.phone ?? '') || 'n/a');
 // @ts-ignore
 [data, data, phoneNumberFormat,];
-__VLS_asFunctionalElement(__VLS_elements.img)({
-    src: "../../../assets/images/icons/new-customer.png",
-});
-__VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
-    ...{ class: "text-chat-haze-400 text-sm mt-3 max-w-md" },
-});
+if (__VLS_ctx.isNew) {
+    // @ts-ignore
+    [isNew,];
+    __VLS_asFunctionalElement(__VLS_elements.img)({
+        src: "../../../assets/images/icons/new-customer.png",
+    });
+}
+if (__VLS_ctx.isNew) {
+    // @ts-ignore
+    [isNew,];
+    __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']} */ ;

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

@@ -31,13 +31,11 @@ const handlePlivoCallBack = (status, data) => {
         getUserOffer(data?.phone ?? '');
     }
     else if (status == PLIVO_CALL_STATUS.CONNECT_FAILED || status == PLIVO_CALL_STATUS.NO_ANSWER) {
-        console.log('5555555555555555555555555555555555555555555');
         endCall();
     }
     else if (status == PLIVO_CALL_STATUS.CALL_END) {
         errorMessage.value = data?.message ?? '';
         const closeModal = data?.reason == 'ORIGINATOR_CANCEL';
-        console.log('6666666666666666666666666666666666666666666666666');
         endCall({ closeModal });
     }
     else if (status == PLIVO_CALL_STATUS.CALL_START) {
@@ -48,7 +46,7 @@ const handlePlivoCallBack = (status, data) => {
         handleMedialPermissionError();
     }
 };
-const { plivoLogin, plivoCallAnswer, plivoCall, plivoEndCall, plivoCallSwishMute, plivoCallSwishSpeaker, checkTimeLimit } = usePlivo(handlePlivoCallBack);
+const { plivoLogin, plivoCallAnswer, plivoCall, plivoEndCall, plivoCallSwishMute, plivoCallSwishSpeaker, plivoRemoveCallBack, checkTimeLimit } = usePlivo(handlePlivoCallBack);
 const STATUS_LABEL = computed(() => {
     return {
         [PLIVO_CALL_STATUS.CONNECTING]: 'Connecting...',
@@ -100,8 +98,8 @@ onUnmounted(() => {
         clearInterval(timer);
     if (timeOut)
         clearTimeout(timeOut);
-    console.log('7777777777777777777777777777777777777777777777777');
     endCall();
+    plivoRemoveCallBack();
     errorMessage.value = '';
 });
 let dataWebSK = null;
@@ -113,15 +111,12 @@ function startTimer() {
         const m = String(Math.floor(sec / 60)).padStart(2, '0');
         const s = String(sec % 60).padStart(2, '0');
         duration.value = `${m}:${s}`;
-        console.log(limitTime.value);
-        console.log(!limitTime.value || limitTime.value <= 0);
         if (!limitTime.value || limitTime.value <= 0) {
             handleTimeLimitError();
         }
     }, 1000);
 }
 function endCall(option) {
-    console.log('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');
     if (option?.closeModal) {
         closeModal();
     }
@@ -171,7 +166,6 @@ const refreshToken = async () => {
 };
 const handleInComingCall = (data) => {
     limitTime.value = data?.limit_time ?? 0;
-    console.log('saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa', data);
     if (limitTime.value <= 0) {
         handleTimeLimitError();
         return;
@@ -204,13 +198,11 @@ const startCall = async (data) => {
             handleTimeLimitError();
             return;
         }
-        console.log('limitTime.value', limitTime.value);
         callType = 'call';
         await plivoCall(data.phone);
         callStatus.value = PLIVO_CALL_STATUS.CALLING;
     }
     catch (e) {
-        console.log('111111111111111111111111');
         endCall();
         console.log(e);
         errorMessage.value = e?.message || JSON.stringify(e);
@@ -222,7 +214,6 @@ const answer = async () => {
         await plivoCallAnswer();
     }
     catch (e) {
-        console.log('222222222222222222222222222222');
         endCall();
         callStatus.value = PLIVO_CALL_STATUS.CONNECT_FAILED;
         errorMessage.value = e?.message || JSON.stringify(e);
@@ -252,7 +243,6 @@ const getUserOffer = async (phone) => {
 };
 const handleTimeLimitError = () => {
     errorMessage.value = 'Call time limit reached. This call has ended.';
-    console.log('3333333333333333333333333333333333333333333333');
     endCall();
 };
 const exportRecordFile = async () => {

package/dist/components/chat/common/tabs/TabBase.vue.js

@@ -59,7 +59,7 @@ for (const [item] of __VLS_getVForSourceType((__VLS_ctx.tabs))) {
     }, ...__VLS_functionalComponentArgsRest(__VLS_11));
     const { default: __VLS_14 } = __VLS_13.slots;
     __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-        ...{ class: "w-5 h-5 bg-chat-error rounded-full absolute -top-[8px] -right-2 text-white" },
+        ...{ class: "w-5 h-5 bg-chat-error rounded-full absolute -top-[8px] -right-2 text-white z-[10]" },
     });
     __VLS_asFunctionalDirective(__VLS_directives.vShow)(null, { ...__VLS_directiveBindingRestFields, value: (item.badge) }, null, null);
     (item.badge);
@@ -84,6 +84,7 @@ var __VLS_3;
 /** @type {__VLS_StyleScopedClasses['-top-[8px]']} */ ;
 /** @type {__VLS_StyleScopedClasses['-right-2']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-white']} */ ;
+/** @type {__VLS_StyleScopedClasses['z-[10]']} */ ;
 const __VLS_export = (await import('vue')).defineComponent({
     __typeEmits: {},
     __typeProps: {},

package/dist/composable/useListConversations.js

@@ -3,7 +3,7 @@ import { TOPIC_HOME } from '../constant/mqtt';
 import { addHandleMqttMessage, connectMqtt, publishMessage, removeHandleMqttMessage, subscribeToTopic, unsubscribeFromTopic } from '../plugins/mqtt';
 import { dataProfile } from '../utils/chat/store/auth';
 import { useDebounce } from '../utils/debounce';
-import { getConversation } from '../utils/chat/store/conversation';
+import { getConversation, getConversationView } from '../utils/chat/store/conversation';
 import { readMessages } from '../utils/chat/store/message';
 import dayjs from 'dayjs';
 import { useDigibot } from '../composable/useDigibot';
@@ -51,23 +51,17 @@ export const useListConversations = (is_unknown, is_tenant) => {
                     }
                     addHandleMqttMessage('chat-list-' + item + '-' + is_unknown, item + dataProfile.value?.id, mqttMessageHandler);
                 });
-                // subscribeToTopic(TOPIC_STATUS_USER + dataProfile.value?.id)
-                // addHandleMqttMessage(
-                //   'chat-list-' + TOPIC_STATUS_USER + '-' + is_unknown,
-                //   TOPIC_STATUS_USER + dataProfile.value?.id,
-                //   mqttMessageHandler
-                // )
             }
         }
         catch (error) {
             console.error(error);
         }
     };
-    const mqttMessageHandler = (topic, data) => {
-        if (topic == TOPIC_HOME[3] + dataProfile.value?.id) {
-            getData({}, { reset: true });
-            return;
-        }
+    const mqttMessageHandler = async (topic, data) => {
+        // if(topic == TOPIC_HOME[3] + dataProfile.value?.id ) {
+        //   getData({}, {reset: true})
+        //   return
+        // }
         if ((data.is_unknown ?? 0) == is_unknown || (!is_tenant && is_unknown == 0)) {
             getDataMqttDebounce();
             if (topic ===
@@ -76,17 +70,25 @@ export const useListConversations = (is_unknown, is_tenant) => {
                 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;
+                    let conversation = listConversations.value[index];
+                    data.username = conversation.username;
+                    data.color = conversation.color;
+                    data.receiver_id = conversation.receiver_id;
+                    data.phone = conversation.phone;
                     listConversations.value.splice(index, 1);
                 }
+                else {
+                    const conversation = await getConversationView(data.id);
+                    data.username = conversation.username;
+                    data.color = conversation.color;
+                    data.receiver_id = conversation.receiver_id;
+                    data.phone = conversation.phone;
+                }
+                // data.receiver_id = data.receiver_id != dataProfile.value?.id ? data.receiver_id : data.sender_id
                 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);
                 }
             }

package/dist/composable/usePlivo.d.ts

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

package/dist/composable/usePlivo.js

@@ -71,7 +71,6 @@ export function usePlivo(callback) {
             CallUuid = call?.callUUID;
         }
         catch (error) {
-            console.log('e11111111111111', error);
             callback(PLIVO_CALL_STATUS.CALL_END);
         }
     };
@@ -88,7 +87,6 @@ export function usePlivo(callback) {
     };
     const handleCallTerminated = (data, callInfo) => {
         if (CallUuid === callInfo.callUUID) {
-            console.log('e22222222222222', data);
             callback(PLIVO_CALL_STATUS.CALL_END, { message: data?.reason });
             CallUuid = '';
         }
@@ -152,14 +150,12 @@ export function usePlivo(callback) {
         console.log('handleCallFailed', data);
         if (custom_reject)
             custom_reject?.(data);
-        console.log('e,3333333333333333333333333333', data);
         callback(PLIVO_CALL_STATUS.CALL_END, { message: data });
         if (data == 'User Denied Media Access') {
             alert('Microphone access is blocked. Please enable the microphone permission to make a call.');
         }
     };
     const handleIncomingCallCanceled = (callInfo) => {
-        console.log('e444444444444444', callInfo);
         callback(PLIVO_CALL_STATUS.CALL_END, { reason: callInfo.reason ?? '' });
     };
     const handleMediaPermission = (e) => {
@@ -178,9 +174,11 @@ export function usePlivo(callback) {
             tenant_id: dataProfile.value?.tenant_id ?? '',
             phone: dataProfile.value?.phone ?? ''
         });
-        console.log('res', res);
         return res;
     };
+    const plivoRemoveCallBack = () => {
+        plivoBrowserSdk = null;
+    };
     const sleep = () => {
         return new Promise(resolve => setTimeout(resolve, 2000));
     };
@@ -192,6 +190,7 @@ export function usePlivo(callback) {
         plivoEndCall,
         plivoCallSwishMute,
         plivoCallSwishSpeaker,
+        plivoRemoveCallBack,
         checkTimeLimit
     };
 }

package/dist/constant/mqtt.d.ts

@@ -3,4 +3,5 @@ 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_CUSTOMER_RELOAD: string;
 export declare const TOPIC_HOME: string[];

package/dist/constant/mqtt.js

@@ -3,6 +3,7 @@ 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_CUSTOMER_RELOAD = 'chat/customer/reload/+';
 export const TOPIC_HOME = [
     // 'chat/conversation/update/',
     // 'chat/conversation/read_message/',