@phonghq/go-chat 1.0.9 → 1.0.10

package/dist/test/chat/App.vue.js

@@ -2,7 +2,7 @@
 import ChatList from '../chat/page/home/ChatList.vue';
 import HomeComponent from '../chat/page/home/Home.vue';
 import IconArrowLeft from '../assets/icons/IconArrowLeft.vue';
-import { computed, nextTick, ref } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
 import { PAGE } from '../constant/general';
 import CustomerDetail from '../chat/page/customer-detail/CustomerDetail.vue';
 import CustomerCheckIn from '../chat/page/customer-check-in/CustomerCheckIn.vue';
@@ -15,7 +15,8 @@ import Calling from '../components/chat/call/Calling.vue';
 import { logout } from '../utils/chat/auth';
 import MobileFooter from '../components/chat/layout/mobile/Footer.vue';
 import { initWebSocket } from '../plugins/websocket';
-import "../style/index.scss";
+import '../style/index.scss';
+import { useDebounce } from '../utils/debounce';
 const routerConfig = [
     { id: PAGE.HOME, backFunc: null, backTitle: '' },
     {
@@ -33,8 +34,16 @@ const routerConfig = [
         backTitle: 'Appointments'
     }
 ];
-const routerMobileConfig = [
-    { id: PAGE.CHAT_LIST, backFunc: logout, backTitle: 'ChatBiz' },
+const routerMobileConfig = computed(() => [
+    {
+        id: PAGE.CHAT_LIST,
+        backFunc: props.isLib
+            ? undefined
+            : () => {
+                logout();
+            },
+        backTitle: 'ChatBiz'
+    },
     {
         id: PAGE.HOME,
         backFunc: () => {
@@ -56,17 +65,29 @@ const routerMobileConfig = [
         },
         backTitle: 'Appointments'
     }
-];
+]);
 const props = withDefaults(defineProps(), {
     response: 'tablet'
 });
 const { initPage } = useInitData();
+onMounted(() => {
+    getResponsiveObserver();
+    window.addEventListener('resize', getResponsiveObserver);
+});
+onUnmounted(() => {
+    window.removeEventListener('resize', getResponsiveObserver);
+});
 const currentPageConfig = computed(() => {
-    if (props.response === 'mobile') {
-        return routerMobileConfig.find((e) => e.id == currentPage.value);
+    if (responsiveRender.value === 'mobile') {
+        return routerMobileConfig.value.find((e) => e.id == currentPage.value);
     }
     return routerConfig.find((e) => e.id == currentPage.value);
 });
+const responsiveRender = computed(() => {
+    return props.response == 'mobile' ? props.response : responsiveObserver.value;
+});
+const responsiveObserver = ref('tablet');
+const appChatRef = ref();
 const callingRef = ref(null);
 const receiverId = ref(null);
 const customerDetailRef = ref(null);
@@ -86,6 +107,25 @@ const selectReceiver = async (data) => {
 const handleCall = (user) => {
     callingRef.value?.startCall(user);
 };
+const getResponsiveObserver = useDebounce(() => {
+    // const div = document.getElementById('appChatMain')
+    if (!appChatRef.value)
+        return;
+    const width = appChatRef.value?.offsetWidth ?? 0;
+    if (width >= 640) {
+        if (responsiveObserver.value != 'tablet') {
+            responsiveObserver.value = 'tablet';
+        }
+    }
+    else {
+        if (responsiveObserver.value != 'mobile') {
+            if (currentPage.value == PAGE.HOME) {
+                currentPage.value = PAGE.CHAT_LIST;
+            }
+            responsiveObserver.value = 'mobile';
+        }
+    }
+}, 50);
 initWebSocket('https://web-socket.dev01.dtsmart.dev');
 initPage({ id: props.id, domain: props.domain, token: props.token, response: props.response });
 debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
@@ -102,8 +142,13 @@ let __VLS_elements;
 let __VLS_components;
 let __VLS_directives;
 __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-    ...{ class: "go-chat-main p-8" },
+    ...{ class: "go-chat-main max-w-full p-8" },
+    id: "appChatMain",
+    ref: "appChatRef",
 });
+/** @type {typeof __VLS_ctx.appChatRef} */ ;
+// @ts-ignore
+[appChatRef,];
 if (!__VLS_ctx.isRouterReady) {
     // @ts-ignore
     [isRouterReady,];
@@ -123,12 +168,27 @@ else if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.TENANT_ERROR) {
     const __VLS_4 = __VLS_asFunctionalComponent(Error, new Error({}));
     const __VLS_5 = __VLS_4({}, ...__VLS_functionalComponentArgsRest(__VLS_4));
 }
-else if (__VLS_ctx.response == 'mobile') {
+else if (__VLS_ctx.responsiveRender == 'mobile') {
     // @ts-ignore
-    [response,];
+    [responsiveRender,];
     __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
         ...{ class: "relative flex flex-col mx-auto w-max max-w-[350px] h-full bg-[#F9FAFC] overflow-hidden chat-mobile pt-4" },
     });
+    /** @type {[typeof Calling, ]} */ ;
+    // @ts-ignore
+    const __VLS_8 = __VLS_asFunctionalComponent(Calling, new Calling({
+        ref: "callingRef",
+        responsive: (__VLS_ctx.responsiveRender),
+    }));
+    const __VLS_9 = __VLS_8({
+        ref: "callingRef",
+        responsive: (__VLS_ctx.responsiveRender),
+    }, ...__VLS_functionalComponentArgsRest(__VLS_8));
+    /** @type {typeof __VLS_ctx.callingRef} */ ;
+    var __VLS_11 = {};
+    // @ts-ignore
+    [responsiveRender, callingRef,];
+    var __VLS_10;
     if (__VLS_ctx.currentPageConfig?.backFunc) {
         // @ts-ignore
         [currentPageConfig,];
@@ -141,7 +201,7 @@ else if (__VLS_ctx.response == 'mobile') {
                         return;
                     if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.TENANT_ERROR))
                         return;
-                    if (!(__VLS_ctx.response == 'mobile'))
+                    if (!(__VLS_ctx.responsiveRender == 'mobile'))
                         return;
                     if (!(__VLS_ctx.currentPageConfig?.backFunc))
                         return;
@@ -153,8 +213,8 @@ else if (__VLS_ctx.response == 'mobile') {
         });
         /** @type {[typeof IconArrowLeft, ]} */ ;
         // @ts-ignore
-        const __VLS_8 = __VLS_asFunctionalComponent(IconArrowLeft, new IconArrowLeft({}));
-        const __VLS_9 = __VLS_8({}, ...__VLS_functionalComponentArgsRest(__VLS_8));
+        const __VLS_14 = __VLS_asFunctionalComponent(IconArrowLeft, new IconArrowLeft({}));
+        const __VLS_15 = __VLS_14({}, ...__VLS_functionalComponentArgsRest(__VLS_14));
         __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
             ...{ class: "text-xl font-semibold text-chat-haze-900 ml-3" },
         });
@@ -167,145 +227,145 @@ else if (__VLS_ctx.response == 'mobile') {
     });
     /** @type {[typeof ChatList, ]} */ ;
     // @ts-ignore
-    const __VLS_12 = __VLS_asFunctionalComponent(ChatList, new ChatList({
+    const __VLS_18 = __VLS_asFunctionalComponent(ChatList, new ChatList({
         ...{ 'onSelectReceiver': {} },
         ref: "chatListRef",
         ...{ class: "w-full max-w-[500px] !bg-[#F9FAFC]" },
-        response: (__VLS_ctx.response),
+        response: (__VLS_ctx.responsiveRender),
         receiverId: (__VLS_ctx.receiverId),
     }));
-    const __VLS_13 = __VLS_12({
+    const __VLS_19 = __VLS_18({
         ...{ 'onSelectReceiver': {} },
         ref: "chatListRef",
         ...{ class: "w-full max-w-[500px] !bg-[#F9FAFC]" },
-        response: (__VLS_ctx.response),
+        response: (__VLS_ctx.responsiveRender),
         receiverId: (__VLS_ctx.receiverId),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_12));
-    let __VLS_15;
-    let __VLS_16;
-    const __VLS_17 = ({ selectReceiver: {} },
+    }, ...__VLS_functionalComponentArgsRest(__VLS_18));
+    let __VLS_21;
+    let __VLS_22;
+    const __VLS_23 = ({ selectReceiver: {} },
         { onSelectReceiver: (__VLS_ctx.selectReceiver) });
     __VLS_asFunctionalDirective(__VLS_directives.vShow)(null, { ...__VLS_directiveBindingRestFields, value: (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CHAT_LIST) }, null, null);
     /** @type {typeof __VLS_ctx.chatListRef} */ ;
-    var __VLS_18 = {};
+    var __VLS_24 = {};
     // @ts-ignore
-    [currentPage, PAGE, response, receiverId, selectReceiver, chatListRef,];
-    var __VLS_14;
+    [currentPage, PAGE, responsiveRender, receiverId, selectReceiver, chatListRef,];
+    var __VLS_20;
     /** @type {[typeof HomeComponent, ]} */ ;
     // @ts-ignore
-    const __VLS_21 = __VLS_asFunctionalComponent(HomeComponent, new HomeComponent({
+    const __VLS_27 = __VLS_asFunctionalComponent(HomeComponent, new HomeComponent({
         ...{ 'onCall': {} },
         ref: "homeComponentRef",
         receiverId: (__VLS_ctx.receiverId),
         ...{ class: "h-full pt-4" },
-        response: (__VLS_ctx.response),
+        response: (__VLS_ctx.responsiveRender),
     }));
-    const __VLS_22 = __VLS_21({
+    const __VLS_28 = __VLS_27({
         ...{ 'onCall': {} },
         ref: "homeComponentRef",
         receiverId: (__VLS_ctx.receiverId),
         ...{ class: "h-full pt-4" },
-        response: (__VLS_ctx.response),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_21));
-    let __VLS_24;
-    let __VLS_25;
-    const __VLS_26 = ({ call: {} },
+        response: (__VLS_ctx.responsiveRender),
+    }, ...__VLS_functionalComponentArgsRest(__VLS_27));
+    let __VLS_30;
+    let __VLS_31;
+    const __VLS_32 = ({ call: {} },
         { onCall: (__VLS_ctx.handleCall) });
     __VLS_asFunctionalDirective(__VLS_directives.vShow)(null, { ...__VLS_directiveBindingRestFields, value: (__VLS_ctx.currentPage == __VLS_ctx.PAGE.HOME) }, null, null);
     /** @type {typeof __VLS_ctx.homeComponentRef} */ ;
-    var __VLS_27 = {};
+    var __VLS_33 = {};
     // @ts-ignore
-    [currentPage, PAGE, response, receiverId, handleCall, homeComponentRef,];
-    var __VLS_23;
+    [currentPage, PAGE, responsiveRender, receiverId, handleCall, homeComponentRef,];
+    var __VLS_29;
     if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_DETAIL) {
         // @ts-ignore
         [currentPage, PAGE,];
         /** @type {[typeof CustomerDetail, ]} */ ;
         // @ts-ignore
-        const __VLS_30 = __VLS_asFunctionalComponent(CustomerDetail, new CustomerDetail({
+        const __VLS_36 = __VLS_asFunctionalComponent(CustomerDetail, new CustomerDetail({
             ref: "customerDetailRef",
             receiverId: (__VLS_ctx.receiverId),
             ...{ class: "h-full" },
-            response: (__VLS_ctx.response),
+            response: (__VLS_ctx.responsiveRender),
         }));
-        const __VLS_31 = __VLS_30({
+        const __VLS_37 = __VLS_36({
             ref: "customerDetailRef",
             receiverId: (__VLS_ctx.receiverId),
             ...{ class: "h-full" },
-            response: (__VLS_ctx.response),
-        }, ...__VLS_functionalComponentArgsRest(__VLS_30));
+            response: (__VLS_ctx.responsiveRender),
+        }, ...__VLS_functionalComponentArgsRest(__VLS_36));
         /** @type {typeof __VLS_ctx.customerDetailRef} */ ;
-        var __VLS_33 = {};
+        var __VLS_39 = {};
         // @ts-ignore
-        [response, receiverId, customerDetailRef,];
-        var __VLS_32;
+        [responsiveRender, receiverId, customerDetailRef,];
+        var __VLS_38;
     }
     if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_CHECK_IN) {
         // @ts-ignore
         [currentPage, PAGE,];
         /** @type {[typeof CustomerCheckIn, ]} */ ;
         // @ts-ignore
-        const __VLS_36 = __VLS_asFunctionalComponent(CustomerCheckIn, new CustomerCheckIn({
+        const __VLS_42 = __VLS_asFunctionalComponent(CustomerCheckIn, new CustomerCheckIn({
             ...{ class: "h-full" },
         }));
-        const __VLS_37 = __VLS_36({
+        const __VLS_43 = __VLS_42({
             ...{ class: "h-full" },
-        }, ...__VLS_functionalComponentArgsRest(__VLS_36));
+        }, ...__VLS_functionalComponentArgsRest(__VLS_42));
     }
     if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_APPOINTMENT) {
         // @ts-ignore
         [currentPage, PAGE,];
         /** @type {[typeof CustomerAppointment, ]} */ ;
         // @ts-ignore
-        const __VLS_40 = __VLS_asFunctionalComponent(CustomerAppointment, new CustomerAppointment({
+        const __VLS_46 = __VLS_asFunctionalComponent(CustomerAppointment, new CustomerAppointment({
             ...{ class: "h-full" },
         }));
-        const __VLS_41 = __VLS_40({
+        const __VLS_47 = __VLS_46({
             ...{ class: "h-full" },
-        }, ...__VLS_functionalComponentArgsRest(__VLS_40));
+        }, ...__VLS_functionalComponentArgsRest(__VLS_46));
     }
     if (__VLS_ctx.currentPage != __VLS_ctx.PAGE.HOME) {
         // @ts-ignore
         [currentPage, PAGE,];
         /** @type {[typeof MobileFooter, ]} */ ;
         // @ts-ignore
-        const __VLS_44 = __VLS_asFunctionalComponent(MobileFooter, new MobileFooter({
+        const __VLS_50 = __VLS_asFunctionalComponent(MobileFooter, new MobileFooter({
             ...{ class: "shrink-0" },
         }));
-        const __VLS_45 = __VLS_44({
+        const __VLS_51 = __VLS_50({
             ...{ class: "shrink-0" },
-        }, ...__VLS_functionalComponentArgsRest(__VLS_44));
+        }, ...__VLS_functionalComponentArgsRest(__VLS_50));
     }
 }
 else {
     __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-        ...{ class: "flex gap-4 h-full" },
+        ...{ class: "flex gap-4 h-full relative" },
     });
     /** @type {[typeof ChatList, ]} */ ;
     // @ts-ignore
-    const __VLS_48 = __VLS_asFunctionalComponent(ChatList, new ChatList({
+    const __VLS_54 = __VLS_asFunctionalComponent(ChatList, new ChatList({
         ...{ 'onSelectReceiver': {} },
         ref: "chatListRef",
-        ...{ class: "w-[38%] max-w-[500px]" },
-        response: (__VLS_ctx.response),
+        ...{ class: "w-[38%] max-w-[500px] min-w-[450px]" },
+        response: (__VLS_ctx.responsiveRender),
         receiverId: (__VLS_ctx.receiverId),
     }));
-    const __VLS_49 = __VLS_48({
+    const __VLS_55 = __VLS_54({
         ...{ 'onSelectReceiver': {} },
         ref: "chatListRef",
-        ...{ class: "w-[38%] max-w-[500px]" },
-        response: (__VLS_ctx.response),
+        ...{ class: "w-[38%] max-w-[500px] min-w-[450px]" },
+        response: (__VLS_ctx.responsiveRender),
         receiverId: (__VLS_ctx.receiverId),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_48));
-    let __VLS_51;
-    let __VLS_52;
-    const __VLS_53 = ({ selectReceiver: {} },
+    }, ...__VLS_functionalComponentArgsRest(__VLS_54));
+    let __VLS_57;
+    let __VLS_58;
+    const __VLS_59 = ({ selectReceiver: {} },
         { onSelectReceiver: (__VLS_ctx.selectReceiver) });
     /** @type {typeof __VLS_ctx.chatListRef} */ ;
-    var __VLS_54 = {};
+    var __VLS_60 = {};
     // @ts-ignore
-    [response, receiverId, selectReceiver, chatListRef,];
-    var __VLS_50;
+    [responsiveRender, receiverId, selectReceiver, chatListRef,];
+    var __VLS_56;
     __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
         ...{ class: "chat-box-white grow flex flex-col h-full pt-6 overflow-hidden" },
     });
@@ -321,7 +381,7 @@ else {
                         return;
                     if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.TENANT_ERROR))
                         return;
-                    if (!!(__VLS_ctx.response == 'mobile'))
+                    if (!!(__VLS_ctx.responsiveRender == 'mobile'))
                         return;
                     if (!(__VLS_ctx.currentPageConfig?.backFunc))
                         return;
@@ -333,8 +393,8 @@ else {
         });
         /** @type {[typeof IconArrowLeft, ]} */ ;
         // @ts-ignore
-        const __VLS_57 = __VLS_asFunctionalComponent(IconArrowLeft, new IconArrowLeft({}));
-        const __VLS_58 = __VLS_57({}, ...__VLS_functionalComponentArgsRest(__VLS_57));
+        const __VLS_63 = __VLS_asFunctionalComponent(IconArrowLeft, new IconArrowLeft({}));
+        const __VLS_64 = __VLS_63({}, ...__VLS_functionalComponentArgsRest(__VLS_63));
         __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
             ...{ class: "text-xl font-semibold text-chat-haze-900 ml-3" },
         });
@@ -347,92 +407,95 @@ else {
     });
     /** @type {[typeof HomeComponent, ]} */ ;
     // @ts-ignore
-    const __VLS_61 = __VLS_asFunctionalComponent(HomeComponent, new HomeComponent({
+    const __VLS_67 = __VLS_asFunctionalComponent(HomeComponent, new HomeComponent({
         ...{ 'onCall': {} },
         ref: "homeComponentRef",
         receiverId: (__VLS_ctx.receiverId),
         ...{ class: "h-full" },
-        response: (__VLS_ctx.response),
+        response: (__VLS_ctx.responsiveRender),
     }));
-    const __VLS_62 = __VLS_61({
+    const __VLS_68 = __VLS_67({
         ...{ 'onCall': {} },
         ref: "homeComponentRef",
         receiverId: (__VLS_ctx.receiverId),
         ...{ class: "h-full" },
-        response: (__VLS_ctx.response),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_61));
-    let __VLS_64;
-    let __VLS_65;
-    const __VLS_66 = ({ call: {} },
+        response: (__VLS_ctx.responsiveRender),
+    }, ...__VLS_functionalComponentArgsRest(__VLS_67));
+    let __VLS_70;
+    let __VLS_71;
+    const __VLS_72 = ({ call: {} },
         { onCall: (__VLS_ctx.handleCall) });
     __VLS_asFunctionalDirective(__VLS_directives.vShow)(null, { ...__VLS_directiveBindingRestFields, value: (__VLS_ctx.currentPage == __VLS_ctx.PAGE.HOME) }, null, null);
     /** @type {typeof __VLS_ctx.homeComponentRef} */ ;
-    var __VLS_67 = {};
+    var __VLS_73 = {};
     // @ts-ignore
-    [currentPage, PAGE, response, receiverId, handleCall, homeComponentRef,];
-    var __VLS_63;
+    [currentPage, PAGE, responsiveRender, receiverId, handleCall, homeComponentRef,];
+    var __VLS_69;
     if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_DETAIL) {
         // @ts-ignore
         [currentPage, PAGE,];
         /** @type {[typeof CustomerDetail, ]} */ ;
         // @ts-ignore
-        const __VLS_70 = __VLS_asFunctionalComponent(CustomerDetail, new CustomerDetail({
+        const __VLS_76 = __VLS_asFunctionalComponent(CustomerDetail, new CustomerDetail({
             ref: "customerDetailRef",
             receiverId: (__VLS_ctx.receiverId),
             ...{ class: "h-full" },
-            response: (__VLS_ctx.response),
+            response: (__VLS_ctx.responsiveRender),
         }));
-        const __VLS_71 = __VLS_70({
+        const __VLS_77 = __VLS_76({
             ref: "customerDetailRef",
             receiverId: (__VLS_ctx.receiverId),
             ...{ class: "h-full" },
-            response: (__VLS_ctx.response),
-        }, ...__VLS_functionalComponentArgsRest(__VLS_70));
+            response: (__VLS_ctx.responsiveRender),
+        }, ...__VLS_functionalComponentArgsRest(__VLS_76));
         /** @type {typeof __VLS_ctx.customerDetailRef} */ ;
-        var __VLS_73 = {};
+        var __VLS_79 = {};
         // @ts-ignore
-        [response, receiverId, customerDetailRef,];
-        var __VLS_72;
+        [responsiveRender, receiverId, customerDetailRef,];
+        var __VLS_78;
     }
     if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_CHECK_IN) {
         // @ts-ignore
         [currentPage, PAGE,];
         /** @type {[typeof CustomerCheckIn, ]} */ ;
         // @ts-ignore
-        const __VLS_76 = __VLS_asFunctionalComponent(CustomerCheckIn, new CustomerCheckIn({
+        const __VLS_82 = __VLS_asFunctionalComponent(CustomerCheckIn, new CustomerCheckIn({
             ...{ class: "h-full" },
         }));
-        const __VLS_77 = __VLS_76({
+        const __VLS_83 = __VLS_82({
             ...{ class: "h-full" },
-        }, ...__VLS_functionalComponentArgsRest(__VLS_76));
+        }, ...__VLS_functionalComponentArgsRest(__VLS_82));
     }
     if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_APPOINTMENT) {
         // @ts-ignore
         [currentPage, PAGE,];
         /** @type {[typeof CustomerAppointment, ]} */ ;
         // @ts-ignore
-        const __VLS_80 = __VLS_asFunctionalComponent(CustomerAppointment, new CustomerAppointment({
+        const __VLS_86 = __VLS_asFunctionalComponent(CustomerAppointment, new CustomerAppointment({
             ...{ class: "h-full" },
         }));
-        const __VLS_81 = __VLS_80({
+        const __VLS_87 = __VLS_86({
             ...{ class: "h-full" },
-        }, ...__VLS_functionalComponentArgsRest(__VLS_80));
+        }, ...__VLS_functionalComponentArgsRest(__VLS_86));
     }
+    /** @type {[typeof Calling, ]} */ ;
+    // @ts-ignore
+    const __VLS_90 = __VLS_asFunctionalComponent(Calling, new Calling({
+        ref: "callingRef",
+        responsive: (__VLS_ctx.responsiveRender),
+    }));
+    const __VLS_91 = __VLS_90({
+        ref: "callingRef",
+        responsive: (__VLS_ctx.responsiveRender),
+    }, ...__VLS_functionalComponentArgsRest(__VLS_90));
+    /** @type {typeof __VLS_ctx.callingRef} */ ;
+    var __VLS_93 = {};
+    // @ts-ignore
+    [responsiveRender, callingRef,];
+    var __VLS_92;
 }
-/** @type {[typeof Calling, ]} */ ;
-// @ts-ignore
-const __VLS_84 = __VLS_asFunctionalComponent(Calling, new Calling({
-    ref: "callingRef",
-}));
-const __VLS_85 = __VLS_84({
-    ref: "callingRef",
-}, ...__VLS_functionalComponentArgsRest(__VLS_84));
-/** @type {typeof __VLS_ctx.callingRef} */ ;
-var __VLS_87 = {};
-// @ts-ignore
-[callingRef,];
-var __VLS_86;
 /** @type {__VLS_StyleScopedClasses['go-chat-main']} */ ;
+/** @type {__VLS_StyleScopedClasses['max-w-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['p-8']} */ ;
 /** @type {__VLS_StyleScopedClasses['m-auto']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex-center']} */ ;
@@ -471,8 +534,10 @@ var __VLS_86;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
 /** @type {__VLS_StyleScopedClasses['gap-4']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['relative']} */ ;
 /** @type {__VLS_StyleScopedClasses['w-[38%]']} */ ;
 /** @type {__VLS_StyleScopedClasses['max-w-[500px]']} */ ;
+/** @type {__VLS_StyleScopedClasses['min-w-[450px]']} */ ;
 /** @type {__VLS_StyleScopedClasses['chat-box-white']} */ ;
 /** @type {__VLS_StyleScopedClasses['grow']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
@@ -495,7 +560,7 @@ var __VLS_86;
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
 // @ts-ignore
-var __VLS_19 = __VLS_18, __VLS_28 = __VLS_27, __VLS_34 = __VLS_33, __VLS_55 = __VLS_54, __VLS_68 = __VLS_67, __VLS_74 = __VLS_73, __VLS_88 = __VLS_87;
+var __VLS_12 = __VLS_11, __VLS_25 = __VLS_24, __VLS_34 = __VLS_33, __VLS_40 = __VLS_39, __VLS_61 = __VLS_60, __VLS_74 = __VLS_73, __VLS_80 = __VLS_79, __VLS_94 = __VLS_93;
 const __VLS_export = (await import('vue')).defineComponent({
     __typeProps: {},
     props: {},

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

@@ -12,8 +12,32 @@ import { dataProfile } from '../../../utils/chat/auth';
 import { readMessages } from '../../../utils/chat/message';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
+import updateLocale from 'dayjs/plugin/updateLocale';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
 import { useDigibot } from '../../../composable/useDigibot';
+import { TIME_ZONE_UTC } from '../../../constant/datetime';
+dayjs.extend(updateLocale);
 dayjs.extend(relativeTime);
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.updateLocale('en', {
+    relativeTime: {
+        future: '%s',
+        past: '%s',
+        s: 'a few seconds',
+        m: 'a minute',
+        mm: '%d minutes',
+        h: 'an hour',
+        hh: '%d hours',
+        d: 'a day',
+        dd: '%d days',
+        M: 'a month',
+        MM: '%d months',
+        y: 'a year',
+        yy: '%d years'
+    }
+});
 const props = withDefaults(defineProps(), {});
 const emit = defineEmits();
 const { digibotData, digibotId } = useDigibot();
@@ -64,10 +88,17 @@ const mqttMessageHandler = (topic, data) => {
     getDataMqtt();
     if (topic === TOPIC_HOME[0] + 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) {
             listConversations.value.splice(index, 1);
         }
-        listConversations.value.unshift(data);
+        console.log(hasChatBox);
+        if (hasChatBox > -1) {
+            listConversations.value.splice(1, 0, data);
+        }
+        else {
+            listConversations.value.unshift(data);
+        }
     }
     if (topic === TOPIC_HOME[1] + dataProfile.value?.id) {
         const index = listConversations.value.findIndex((item) => item.id === data.id);
@@ -100,7 +131,7 @@ const getData = async (data, option) => {
             await nextTick();
         }
         listConversations.value.push(...(res?.items ?? []));
-        console.log(listConversations.value, 'listConversations');
+        console.log(listConversations.value);
         checkHasReceiveId();
         params.value.page = res?._meta?.currentPage || 1;
         pageCount = res?._meta?.pageCount || 1;
@@ -144,6 +175,12 @@ const handleReadMessage = () => {
         }
     }
 };
+const getTimeFromNow = (data) => {
+    if (data && dayjs(data).isValid()) {
+        return dayjs.tz(data, TIME_ZONE_UTC).local().fromNow();
+    }
+    return data ?? '';
+};
 getData({}, { reset: true });
 const __VLS_exposed = { handleReadMessage };
 defineExpose(__VLS_exposed);
@@ -301,11 +338,9 @@ for (const [user] of __VLS_getVForSourceType((__VLS_ctx.listConversations))) {
     __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
         ...{ class: "text-sm text-right text-chat-gray-4 w-[130px]" },
     });
-    (__VLS_ctx.dayjs(user.last_message_time).isValid()
-        ? __VLS_ctx.dayjs(user.last_message_time).fromNow()
-        : (user.last_message_time ?? ''));
+    (__VLS_ctx.getTimeFromNow(user.last_message_time ?? ''));
     // @ts-ignore
-    [dayjs, dayjs,];
+    [getTimeFromNow,];
 }
 var __VLS_17;
 /** @type {__VLS_StyleScopedClasses['']} */ ;

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

@@ -9,7 +9,7 @@ import { addHandleMqttMessage, connectMqtt, publishMessage, removeHandleMqttMess
 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 { DATE_FORMATS, TIME_ZONE_UTC } from '../../../constant/datetime';
 import { MessageState } from '../../../constant/message';
 const props = withDefaults(defineProps(), {});
 const emit = defineEmits();
@@ -172,7 +172,7 @@ const publicTopicConversationUpdate = async (isSendImg, message) => {
         conversation_id: infoUser.value?.conversation_id ?? 0,
         receiver_id: Number(infoUser.value?.id)
     });
-    const current = dayjs().format(DATE_FORMATS['DATE_FORMAT_FULL']);
+    const current = dayjs().tz(TIME_ZONE_UTC).format(DATE_FORMATS['DATE_FORMAT_FULL']);
     const dataMessageForReceiver = {
         id: infoUser.value?.conversation_id ?? 0,
         receiver_id: Number(dataProfile.value?.id ?? 0),
@@ -294,6 +294,11 @@ else if (!__VLS_ctx.isLoading) {
     // @ts-ignore
     [infoUser,];
 }
+else {
+    __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
+        ...{ class: "grow" },
+    });
+}
 /** @type {[typeof InputChat, ]} */ ;
 // @ts-ignore
 const __VLS_20 = __VLS_asFunctionalComponent(InputChat, new InputChat({
@@ -320,6 +325,7 @@ var __VLS_22;
 /** @type {__VLS_StyleScopedClasses['shrink-0']} */ ;
 /** @type {__VLS_StyleScopedClasses['grow']} */ ;
 /** @type {__VLS_StyleScopedClasses['grow']} */ ;
+/** @type {__VLS_StyleScopedClasses['grow']} */ ;
 /** @type {__VLS_StyleScopedClasses['p-6']} */ ;
 // @ts-ignore
 var __VLS_14 = __VLS_13;