@phonghq/go-chat 1.0.71 → 1.0.73

package/dist/chat/App.vue.js

@@ -23,6 +23,7 @@ import { phoneNumberFormat } from '../utils/string-helper';
 import { responsiveObserver, useListenEvent } from '../composable/useListentEvent';
 import PhoneNumpad from './page/home/PhoneNumpad.vue';
 import PageError from '../components/layout/PageError.vue';
+import ChatHeader from '../chat/ChatHeader.vue';
 const routerConfig = [
     { id: PAGE.HOME, backFunc: null, backTitle: '' },
     {
@@ -71,7 +72,12 @@ const routerMobileConfig = computed(() => [
     {
         id: PAGE.CUSTOMER_DETAIL,
         backFunc: () => {
-            routerPush(PAGE.HOME);
+            if (receiverId.value) {
+                routerPush(PAGE.HOME);
+            }
+            else {
+                routerPush(PAGE.CHAT_LIST);
+            }
         },
         backTitle: ''
     },
@@ -92,10 +98,13 @@ const routerMobileConfig = computed(() => [
 ]);
 const props = withDefaults(defineProps(), {
     response: 'tablet',
+    isZoomIn: undefined
 });
 const emit = defineEmits();
 let initTimer = null;
 const handleExposeInit = (init_data) => {
+    if (init_data?.isResponsiveChange)
+        return;
     if (initTimer)
         return;
     const func = (data) => {
@@ -103,11 +112,11 @@ const handleExposeInit = (init_data) => {
             if (init_data?.conversation_id) {
                 chatListRef.value?.initData({
                     conversation_id: data?.conversation_id,
-                    is_known: data?.is_known || 1
+                    is_known: data?.is_known ?? 1
                 });
             }
             else
-                chatListRef.value?.initData();
+                chatListRef.value?.initData(data);
             clearInterval(initTimer);
             initTimer = null;
         }
@@ -115,7 +124,7 @@ const handleExposeInit = (init_data) => {
     initTimer = setInterval(() => func(init_data), 500);
 };
 const { initPage } = useInitData();
-const { getResponsiveObserver } = useListenEvent(handleExposeInit);
+const { getResponsiveObserver } = useListenEvent(() => handleExposeInit({ isResponsiveChange: true }));
 onMounted(() => {
     getResponsiveObserver(true);
     if (props.isLib) {
@@ -143,6 +152,11 @@ const currentConversation = computed(() => {
         null);
 });
 const callStatus = computed(() => callingRef.value?.callStatus ?? null);
+// const limitTimeLabel = computed(() => {
+//   const m2 = Math.floor(timeLimit.value / 60)
+//   const s2 = timeLimit.value % 60
+//   return `${m2.toString().padStart(2, '0')}:${s2.toString().padStart(2, '0')}`
+// })
 const appChatRef = ref();
 const callingRef = ref(null);
 const receiverId = ref(null);
@@ -151,6 +165,7 @@ const homeComponentRef = ref(null);
 const chatListRef = ref(null);
 const drawerVisibleRef = ref(null);
 const phoneNumpadRef = ref();
+const loading = ref(false);
 const selectReceiver = async (data) => {
     if (receiverId.value != data?.receiver_id || responsiveRender.value === 'mobile') {
         if (currentPage.value != PAGE.HOME) {
@@ -191,40 +206,67 @@ const handleOpenPhoneNumpad = () => {
     phoneNumpadRef.value?.openPhoneNumpad();
 };
 const handleCloseBtn = () => {
-    emit('close');
+    emit('app:close');
     phoneNumpadRef.value?.closePhoneNumpad();
 };
 const backToHome = () => {
     phoneNumpadRef.value?.closePhoneNumpad();
 };
+const goToConversationRequest = (data) => {
+    chatListRef.value?.goToConversationRequest(data);
+};
+const handleReloadCustomer = (data) => {
+    homeComponentRef.value?.handleGetDetailReceiverQuickly(data);
+};
+const startSendMessage = async (data) => {
+    try {
+        loading.value = true;
+        await nextTick();
+        await phoneNumpadRef.value?.startSendMessage(data);
+    }
+    catch (e) {
+        console.log(e);
+    }
+    loading.value = false;
+};
 let __VLS_exposed;
 defineExpose({
-    get unreadCount() {
-        return unreadCount.value;
-    },
-    get callStatus() {
-        return callStatus.value;
-    },
-    get callLabel() {
-        return callingRef.value?.label ?? '';
-    },
-    getUserRemote: () => {
-        return callingRef.value?.userRemoter ?? null;
+    call: {
+        startCall: async () => {
+            await callingRef.value?.answer();
+        },
+        endCall: () => {
+            callingRef.value?.endCall();
+        }
     },
-    startCall: async () => {
-        await callingRef.value?.answer();
+    chat: {
+        startSendMessage
     },
-    endCall: () => {
-        callingRef.value?.endCall();
+    ui: {
+        get unreadCount() {
+            return unreadCount.value;
+        },
+        get callStatus() {
+            return callStatus.value;
+        },
+        get callLabel() {
+            return callingRef.value?.label ?? '';
+        }
     },
-    openSettings,
-    initData: (data) => handleExposeInit(data),
-    backToHome,
-    closeCallingModal: () => callingRef.value?.closeModal()
+    app: {
+        getUserRemote: () => {
+            return callingRef.value?.userRemoter ?? null;
+        },
+        openSettings,
+        initData: (data) => handleExposeInit(data),
+        backToHome,
+        closeCallingModal: () => callingRef.value?.closeModal()
+    }
 });
 debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
 const __VLS_defaults = {
     response: 'tablet',
+    isZoomIn: undefined
 };
 const __VLS_ctx = {
     ...{},
@@ -238,12 +280,24 @@ let __VLS_components;
 let __VLS_directives;
 __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
     ...{ class: "go-chat-main max-w-full bg-white" },
+    ...{ class: ({ 'go-chat-app': __VLS_ctx.isLib }) },
     id: "appChatMain",
     ref: "appChatRef",
 });
+(__VLS_ctx.$attrs);
 /** @type {typeof __VLS_ctx.appChatRef} */ ;
 // @ts-ignore
-[appChatRef,];
+[isLib, $attrs, appChatRef,];
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "bg-white inset-0 sc-full flex-center" },
+});
+__VLS_asFunctionalDirective(__VLS_directives.vShow)(null, { ...__VLS_directiveBindingRestFields, value: (__VLS_ctx.loading) }, null, null);
+// @ts-ignore
+[loading,];
+/** @type {[typeof BaseSpin, ]} */ ;
+// @ts-ignore
+const __VLS_0 = __VLS_asFunctionalComponent(BaseSpin, new BaseSpin({}));
+const __VLS_1 = __VLS_0({}, ...__VLS_functionalComponentArgsRest(__VLS_0));
 if (!__VLS_ctx.isRouterReady) {
     // @ts-ignore
     [isRouterReady,];
@@ -252,36 +306,36 @@ if (!__VLS_ctx.isRouterReady) {
     });
     /** @type {[typeof BaseSpin, ]} */ ;
     // @ts-ignore
-    const __VLS_0 = __VLS_asFunctionalComponent(BaseSpin, new BaseSpin({}));
-    const __VLS_1 = __VLS_0({}, ...__VLS_functionalComponentArgsRest(__VLS_0));
+    const __VLS_4 = __VLS_asFunctionalComponent(BaseSpin, new BaseSpin({}));
+    const __VLS_5 = __VLS_4({}, ...__VLS_functionalComponentArgsRest(__VLS_4));
 }
 else if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.TENANT_ERROR) {
     // @ts-ignore
     [currentPage, PAGE,];
     /** @type {[typeof Error, ]} */ ;
     // @ts-ignore
-    const __VLS_4 = __VLS_asFunctionalComponent(Error, new Error({
+    const __VLS_8 = __VLS_asFunctionalComponent(Error, new Error({
         ...{ class: "mt-10" },
     }));
-    const __VLS_5 = __VLS_4({
+    const __VLS_9 = __VLS_8({
         ...{ class: "mt-10" },
-    }, ...__VLS_functionalComponentArgsRest(__VLS_4));
+    }, ...__VLS_functionalComponentArgsRest(__VLS_8));
 }
 else if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.REGISTER_TENANT) {
     // @ts-ignore
     [currentPage, PAGE,];
     /** @type {[typeof Setting, ]} */ ;
     // @ts-ignore
-    const __VLS_8 = __VLS_asFunctionalComponent(Setting, new Setting({}));
-    const __VLS_9 = __VLS_8({}, ...__VLS_functionalComponentArgsRest(__VLS_8));
+    const __VLS_12 = __VLS_asFunctionalComponent(Setting, new Setting({}));
+    const __VLS_13 = __VLS_12({}, ...__VLS_functionalComponentArgsRest(__VLS_12));
 }
 else if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.REGISTER_SUCCESS) {
     // @ts-ignore
     [currentPage, PAGE,];
     /** @type {[typeof SettingSuccess, ]} */ ;
     // @ts-ignore
-    const __VLS_12 = __VLS_asFunctionalComponent(SettingSuccess, new SettingSuccess({}));
-    const __VLS_13 = __VLS_12({}, ...__VLS_functionalComponentArgsRest(__VLS_12));
+    const __VLS_16 = __VLS_asFunctionalComponent(SettingSuccess, new SettingSuccess({}));
+    const __VLS_17 = __VLS_16({}, ...__VLS_functionalComponentArgsRest(__VLS_16));
 }
 else if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.NOT_TENANT_PHONE) {
     // @ts-ignore
@@ -316,24 +370,24 @@ else if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.NOT_TENANT_PHONE) {
         });
         /** @type {[typeof IconCloseCircle, ]} */ ;
         // @ts-ignore
-        const __VLS_16 = __VLS_asFunctionalComponent(IconCloseCircle, new IconCloseCircle({}));
-        const __VLS_17 = __VLS_16({}, ...__VLS_functionalComponentArgsRest(__VLS_16));
+        const __VLS_20 = __VLS_asFunctionalComponent(IconCloseCircle, new IconCloseCircle({}));
+        const __VLS_21 = __VLS_20({}, ...__VLS_functionalComponentArgsRest(__VLS_20));
     }
     /** @type {[typeof NotTenantPhone, ]} */ ;
     // @ts-ignore
-    const __VLS_20 = __VLS_asFunctionalComponent(NotTenantPhone, new NotTenantPhone({
+    const __VLS_24 = __VLS_asFunctionalComponent(NotTenantPhone, new NotTenantPhone({
         ...{ 'onTryAgain': {} },
         ...{ class: "bg-white grow" },
         isLib: (props.isLib),
     }));
-    const __VLS_21 = __VLS_20({
+    const __VLS_25 = __VLS_24({
         ...{ 'onTryAgain': {} },
         ...{ class: "bg-white grow" },
         isLib: (props.isLib),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_20));
-    let __VLS_23;
-    let __VLS_24;
-    const __VLS_25 = ({ tryAgain: {} },
+    }, ...__VLS_functionalComponentArgsRest(__VLS_24));
+    let __VLS_27;
+    let __VLS_28;
+    const __VLS_29 = ({ tryAgain: {} },
         { onTryAgain: (...[$event]) => {
                 if (!!(!__VLS_ctx.isRouterReady))
                     return;
@@ -349,7 +403,7 @@ else if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.NOT_TENANT_PHONE) {
                 // @ts-ignore
                 [handleInitPage,];
             } });
-    var __VLS_22;
+    var __VLS_26;
 }
 else {
     __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
@@ -360,13 +414,76 @@ else {
         [isLib,];
         /** @type {[typeof PageError, ]} */ ;
         // @ts-ignore
-        const __VLS_27 = __VLS_asFunctionalComponent(PageError, new PageError({
+        const __VLS_31 = __VLS_asFunctionalComponent(PageError, new PageError({
             ...{ class: "shrink-0" },
         }));
-        const __VLS_28 = __VLS_27({
+        const __VLS_32 = __VLS_31({
             ...{ class: "shrink-0" },
-        }, ...__VLS_functionalComponentArgsRest(__VLS_27));
+        }, ...__VLS_functionalComponentArgsRest(__VLS_31));
     }
+    /** @type {[typeof ChatHeader, ]} */ ;
+    // @ts-ignore
+    const __VLS_35 = __VLS_asFunctionalComponent(ChatHeader, new ChatHeader({
+        ...{ 'onClose': {} },
+        ...{ 'onZoomChange': {} },
+        ...{ class: "py-4 border-b layout-border" },
+        ...{ class: ({
+                'bg-[#F9FAFC]': __VLS_ctx.responsiveRender == 'mobile',
+                'bg-white': __VLS_ctx.responsiveRender != 'mobile'
+            }) },
+        currentPageConfig: (__VLS_ctx.currentPageConfig),
+        isLib: (__VLS_ctx.isLib),
+        response: (__VLS_ctx.responsiveRender),
+        isZoomIn: (__VLS_ctx.isZoomIn),
+    }));
+    const __VLS_36 = __VLS_35({
+        ...{ 'onClose': {} },
+        ...{ 'onZoomChange': {} },
+        ...{ class: "py-4 border-b layout-border" },
+        ...{ class: ({
+                'bg-[#F9FAFC]': __VLS_ctx.responsiveRender == 'mobile',
+                'bg-white': __VLS_ctx.responsiveRender != 'mobile'
+            }) },
+        currentPageConfig: (__VLS_ctx.currentPageConfig),
+        isLib: (__VLS_ctx.isLib),
+        response: (__VLS_ctx.responsiveRender),
+        isZoomIn: (__VLS_ctx.isZoomIn),
+    }, ...__VLS_functionalComponentArgsRest(__VLS_35));
+    let __VLS_38;
+    let __VLS_39;
+    const __VLS_40 = ({ close: {} },
+        { onClose: (...[$event]) => {
+                if (!!(!__VLS_ctx.isRouterReady))
+                    return;
+                if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.TENANT_ERROR))
+                    return;
+                if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.REGISTER_TENANT))
+                    return;
+                if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.REGISTER_SUCCESS))
+                    return;
+                if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.NOT_TENANT_PHONE))
+                    return;
+                __VLS_ctx.handleCloseBtn();
+                // @ts-ignore
+                [isLib, handleCloseBtn, responsiveRender, responsiveRender, responsiveRender, currentPageConfig, isZoomIn,];
+            } });
+    const __VLS_41 = ({ zoomChange: {} },
+        { onZoomChange: (...[$event]) => {
+                if (!!(!__VLS_ctx.isRouterReady))
+                    return;
+                if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.TENANT_ERROR))
+                    return;
+                if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.REGISTER_TENANT))
+                    return;
+                if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.REGISTER_SUCCESS))
+                    return;
+                if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.NOT_TENANT_PHONE))
+                    return;
+                __VLS_ctx.emit('app:zoomChange');
+                // @ts-ignore
+                [emit,];
+            } });
+    var __VLS_37;
     __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
         ...{ class: "w-full grow flex overflow-hidden relative" },
     });
@@ -375,21 +492,21 @@ else {
         [isLib,];
         /** @type {[typeof Calling, ]} */ ;
         // @ts-ignore
-        const __VLS_31 = __VLS_asFunctionalComponent(Calling, new Calling({
+        const __VLS_43 = __VLS_asFunctionalComponent(Calling, new Calling({
             ...{ 'onUserCalling': {} },
             ...{ 'onEndCall': {} },
             ref: "callingRef",
             responsive: (__VLS_ctx.responsiveRender),
         }));
-        const __VLS_32 = __VLS_31({
+        const __VLS_44 = __VLS_43({
             ...{ 'onUserCalling': {} },
             ...{ 'onEndCall': {} },
             ref: "callingRef",
             responsive: (__VLS_ctx.responsiveRender),
-        }, ...__VLS_functionalComponentArgsRest(__VLS_31));
-        let __VLS_34;
-        let __VLS_35;
-        const __VLS_36 = ({ userCalling: {} },
+        }, ...__VLS_functionalComponentArgsRest(__VLS_43));
+        let __VLS_46;
+        let __VLS_47;
+        const __VLS_48 = ({ userCalling: {} },
             { onUserCalling: (...[$event]) => {
                     if (!!(!__VLS_ctx.isRouterReady))
                         return;
@@ -403,11 +520,11 @@ else {
                         return;
                     if (!(__VLS_ctx.isLib))
                         return;
-                    __VLS_ctx.emit('userCalling', $event);
+                    __VLS_ctx.emit('call:userCalling', $event);
                     // @ts-ignore
                     [responsiveRender, emit,];
                 } });
-        const __VLS_37 = ({ endCall: {} },
+        const __VLS_49 = ({ endCall: {} },
             { onEndCall: (...[$event]) => {
                     if (!!(!__VLS_ctx.isRouterReady))
                         return;
@@ -421,161 +538,101 @@ else {
                         return;
                     if (!(__VLS_ctx.isLib))
                         return;
-                    __VLS_ctx.emit('endCall');
+                    __VLS_ctx.emit('call:endCall');
                     // @ts-ignore
                     [emit,];
                 } });
         /** @type {typeof __VLS_ctx.callingRef} */ ;
-        var __VLS_38 = {};
+        var __VLS_50 = {};
         // @ts-ignore
         [callingRef,];
-        var __VLS_33;
+        var __VLS_45;
     }
-    if (__VLS_ctx.responsiveRender == 'mobile') {
-        // @ts-ignore
-        [responsiveRender,];
-        __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-            ...{ class: "grow relative flex flex-col mx-auto w-full h-full bg-[#F9FAFC] overflow-hidden chat-mobile pt-4" },
-        });
-        __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-            ...{ class: "text-[#141B34] shrink-0" },
-            ...{ class: (__VLS_ctx.responsiveRender == 'mobile' ? 'px-4' : 'px-6') },
-        });
-        // @ts-ignore
-        [responsiveRender,];
-        __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-            ...{ class: "flex items-center justify-between" },
-        });
-        if (__VLS_ctx.currentPageConfig?.backFunc && !__VLS_ctx.currentPageConfig?.isHidden) {
-            // @ts-ignore
-            [currentPageConfig, currentPageConfig,];
-            __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
-                ...{ onClick: (...[$event]) => {
-                        if (!!(!__VLS_ctx.isRouterReady))
-                            return;
-                        if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.TENANT_ERROR))
-                            return;
-                        if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.REGISTER_TENANT))
-                            return;
-                        if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.REGISTER_SUCCESS))
-                            return;
-                        if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.NOT_TENANT_PHONE))
-                            return;
-                        if (!(__VLS_ctx.responsiveRender == 'mobile'))
-                            return;
-                        if (!(__VLS_ctx.currentPageConfig?.backFunc && !__VLS_ctx.currentPageConfig?.isHidden))
-                            return;
-                        __VLS_ctx.currentPageConfig.backFunc();
-                        // @ts-ignore
-                        [currentPageConfig,];
-                    } },
-                ...{ class: "flex items-center" },
-            });
-            /** @type {[typeof IconArrowLeft, ]} */ ;
-            // @ts-ignore
-            const __VLS_41 = __VLS_asFunctionalComponent(IconArrowLeft, new IconArrowLeft({}));
-            const __VLS_42 = __VLS_41({}, ...__VLS_functionalComponentArgsRest(__VLS_41));
-            __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-                ...{ class: "ml-3" },
-            });
-            __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
-                ...{ class: "text-xl font-semibold text-left text-chat-haze-900" },
-            });
-            if (__VLS_ctx.currentPageConfig.backTitle != 'logo') {
-                // @ts-ignore
-                [currentPageConfig,];
-                __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({});
-                (__VLS_ctx.currentPageConfig.backTitle ?? '');
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ class: "relative flex w-full h-full" },
+        ...{ class: ({
+                '': __VLS_ctx.responsiveRender != 'mobile',
+                'grow flex-col mx-auto bg-[#F9FAFC] overflow-hidden chat-mobile': __VLS_ctx.responsiveRender == 'mobile'
+            }) },
+    });
+    // @ts-ignore
+    [responsiveRender, responsiveRender,];
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ class: "grow overflow-hidden" },
+        ...{ class: ({ flex: __VLS_ctx.responsiveRender != 'mobile' }) },
+    });
+    // @ts-ignore
+    [responsiveRender,];
+    /** @type {[typeof ChatList, ]} */ ;
+    // @ts-ignore
+    const __VLS_53 = __VLS_asFunctionalComponent(ChatList, new ChatList({
+        ...{ 'onSelectReceiver': {} },
+        ...{ 'onOpenPhoneNumpad': {} },
+        ...{ 'onReloadReceiver': {} },
+        ref: "chatListRef",
+        ...{ class: "" },
+        ...{ class: ({
+                'w-[38%] max-w-[500px] min-w-[300px] xl:min-w-[450px] border-r layout-border': __VLS_ctx.responsiveRender != 'mobile',
+                'w-full max-w-[500px] !bg-[#F9FAFC]': __VLS_ctx.responsiveRender == 'mobile'
+            }) },
+        responsive: (__VLS_ctx.responsiveRender),
+        receiverId: (__VLS_ctx.receiverId),
+    }));
+    const __VLS_54 = __VLS_53({
+        ...{ 'onSelectReceiver': {} },
+        ...{ 'onOpenPhoneNumpad': {} },
+        ...{ 'onReloadReceiver': {} },
+        ref: "chatListRef",
+        ...{ class: "" },
+        ...{ class: ({
+                'w-[38%] max-w-[500px] min-w-[300px] xl:min-w-[450px] border-r layout-border': __VLS_ctx.responsiveRender != 'mobile',
+                'w-full max-w-[500px] !bg-[#F9FAFC]': __VLS_ctx.responsiveRender == 'mobile'
+            }) },
+        responsive: (__VLS_ctx.responsiveRender),
+        receiverId: (__VLS_ctx.receiverId),
+    }, ...__VLS_functionalComponentArgsRest(__VLS_53));
+    let __VLS_56;
+    let __VLS_57;
+    const __VLS_58 = ({ selectReceiver: {} },
+        { onSelectReceiver: (__VLS_ctx.selectReceiver) });
+    const __VLS_59 = ({ openPhoneNumpad: {} },
+        { onOpenPhoneNumpad: (...[$event]) => {
+                if (!!(!__VLS_ctx.isRouterReady))
+                    return;
+                if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.TENANT_ERROR))
+                    return;
+                if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.REGISTER_TENANT))
+                    return;
+                if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.REGISTER_SUCCESS))
+                    return;
+                if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.NOT_TENANT_PHONE))
+                    return;
+                __VLS_ctx.handleOpenPhoneNumpad();
                 // @ts-ignore
-                [currentPageConfig,];
-            }
-            else {
-                __VLS_asFunctionalElement(__VLS_elements.img)({
-                    ...{ class: "h-7" },
-                    src: "@/assets/images/logo-1.png",
-                });
-            }
-            __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
-                ...{ class: "text-sm font-medium text-chat-haze-900" },
-            });
-            (__VLS_ctx.currentPageConfig.subTitle ?? '');
-            // @ts-ignore
-            [currentPageConfig,];
-        }
-        else if (__VLS_ctx.dataProfile?.user_type == 'tenant') {
-            // @ts-ignore
-            [dataProfile,];
-            __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-                ...{ class: "flex gap-2" },
-            });
-            __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-                ...{ class: "text-chat-haze-700" },
-            });
-            __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-                ...{ class: "font-medium text-gray-700" },
-            });
-            (__VLS_ctx.phoneNumberFormat(__VLS_ctx.dataProfile?.phone ?? '') ?? '');
-            // @ts-ignore
-            [dataProfile, phoneNumberFormat,];
-        }
-        else {
-            __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({});
-        }
-        if (props.isLib) {
-            __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
-                ...{ onClick: (...[$event]) => {
-                        if (!!(!__VLS_ctx.isRouterReady))
-                            return;
-                        if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.TENANT_ERROR))
-                            return;
-                        if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.REGISTER_TENANT))
-                            return;
-                        if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.REGISTER_SUCCESS))
-                            return;
-                        if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.NOT_TENANT_PHONE))
-                            return;
-                        if (!(__VLS_ctx.responsiveRender == 'mobile'))
-                            return;
-                        if (!(props.isLib))
-                            return;
-                        __VLS_ctx.handleCloseBtn();
-                        // @ts-ignore
-                        [handleCloseBtn,];
-                    } },
-                ...{ class: "w-10 h-10" },
-            });
-            /** @type {[typeof IconCloseCircle, ]} */ ;
-            // @ts-ignore
-            const __VLS_45 = __VLS_asFunctionalComponent(IconCloseCircle, new IconCloseCircle({}));
-            const __VLS_46 = __VLS_45({}, ...__VLS_functionalComponentArgsRest(__VLS_45));
-        }
+                [responsiveRender, responsiveRender, responsiveRender, receiverId, selectReceiver, handleOpenPhoneNumpad,];
+            } });
+    const __VLS_60 = ({ reloadReceiver: {} },
+        { onReloadReceiver: (__VLS_ctx.handleReloadCustomer) });
+    __VLS_asFunctionalDirective(__VLS_directives.vShow)(null, { ...__VLS_directiveBindingRestFields, value: (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CHAT_LIST || __VLS_ctx.responsiveRender != 'mobile') }, null, null);
+    /** @type {typeof __VLS_ctx.chatListRef} */ ;
+    var __VLS_61 = {};
+    // @ts-ignore
+    [currentPage, PAGE, responsiveRender, handleReloadCustomer, chatListRef,];
+    var __VLS_55;
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ class: "h-full overflow-hidden" },
+        ...{ class: ({ 'flex flex-col grow': __VLS_ctx.responsiveRender != 'mobile', 'w-full': __VLS_ctx.responsiveRender == 'mobile' }) },
+    });
+    // @ts-ignore
+    [responsiveRender, responsiveRender,];
+    if (__VLS_ctx.currentPageConfig?.backFunc && __VLS_ctx.responsiveRender != 'mobile') {
+        // @ts-ignore
+        [responsiveRender, currentPageConfig,];
         __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-            ...{ class: "grow overflow-hidden" },
+            ...{ class: "text-[#141B34] px-6 mt-4" },
         });
-        /** @type {[typeof ChatList, ]} */ ;
-        // @ts-ignore
-        const __VLS_49 = __VLS_asFunctionalComponent(ChatList, new ChatList({
-            ...{ 'onSelectReceiver': {} },
-            ...{ 'onOpenPhoneNumpad': {} },
-            ref: "chatListRef",
-            ...{ class: "w-full max-w-[500px] !bg-[#F9FAFC]" },
-            responsive: (__VLS_ctx.responsiveRender),
-            receiverId: (__VLS_ctx.receiverId),
-        }));
-        const __VLS_50 = __VLS_49({
-            ...{ 'onSelectReceiver': {} },
-            ...{ 'onOpenPhoneNumpad': {} },
-            ref: "chatListRef",
-            ...{ class: "w-full max-w-[500px] !bg-[#F9FAFC]" },
-            responsive: (__VLS_ctx.responsiveRender),
-            receiverId: (__VLS_ctx.receiverId),
-        }, ...__VLS_functionalComponentArgsRest(__VLS_49));
-        let __VLS_52;
-        let __VLS_53;
-        const __VLS_54 = ({ selectReceiver: {} },
-            { onSelectReceiver: (__VLS_ctx.selectReceiver) });
-        const __VLS_55 = ({ openPhoneNumpad: {} },
-            { onOpenPhoneNumpad: (...[$event]) => {
+        __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
+            ...{ onClick: (...[$event]) => {
                     if (!!(!__VLS_ctx.isRouterReady))
                         return;
                     if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.TENANT_ERROR))
@@ -586,146 +643,129 @@ else {
                         return;
                     if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.NOT_TENANT_PHONE))
                         return;
-                    if (!(__VLS_ctx.responsiveRender == 'mobile'))
+                    if (!(__VLS_ctx.currentPageConfig?.backFunc && __VLS_ctx.responsiveRender != 'mobile'))
                         return;
-                    __VLS_ctx.handleOpenPhoneNumpad();
+                    __VLS_ctx.currentPageConfig.backFunc();
                     // @ts-ignore
-                    [responsiveRender, receiverId, selectReceiver, handleOpenPhoneNumpad,];
-                } });
-        __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_56 = {};
+                    [currentPageConfig,];
+                } },
+            ...{ class: "flex items-center" },
+        });
+        /** @type {[typeof IconArrowLeft, ]} */ ;
+        // @ts-ignore
+        const __VLS_64 = __VLS_asFunctionalComponent(IconArrowLeft, new IconArrowLeft({}));
+        const __VLS_65 = __VLS_64({}, ...__VLS_functionalComponentArgsRest(__VLS_64));
+        __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
+            ...{ class: "text-xl font-semibold text-chat-haze-900 ml-3" },
+        });
+        (__VLS_ctx.currentPageConfig.backTitle ?? '');
+        // @ts-ignore
+        [currentPageConfig,];
+    }
+    /** @type {[typeof HomeComponent, ]} */ ;
+    // @ts-ignore
+    const __VLS_68 = __VLS_asFunctionalComponent(HomeComponent, new HomeComponent({
+        ...{ 'onCall': {} },
+        ...{ 'onBack': {} },
+        ...{ 'onInputFocus': {} },
+        ref: "homeComponentRef",
+        receiverId: (__VLS_ctx.receiverId),
+        ...{ class: "h-full grow" },
+        conversation: (__VLS_ctx.currentConversation),
+        responsive: (__VLS_ctx.responsiveRender),
+    }));
+    const __VLS_69 = __VLS_68({
+        ...{ 'onCall': {} },
+        ...{ 'onBack': {} },
+        ...{ 'onInputFocus': {} },
+        ref: "homeComponentRef",
+        receiverId: (__VLS_ctx.receiverId),
+        ...{ class: "h-full grow" },
+        conversation: (__VLS_ctx.currentConversation),
+        responsive: (__VLS_ctx.responsiveRender),
+    }, ...__VLS_functionalComponentArgsRest(__VLS_68));
+    let __VLS_71;
+    let __VLS_72;
+    const __VLS_73 = ({ call: {} },
+        { onCall: (__VLS_ctx.handleCall) });
+    const __VLS_74 = ({ back: {} },
+        { onBack: (...[$event]) => {
+                if (!!(!__VLS_ctx.isRouterReady))
+                    return;
+                if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.TENANT_ERROR))
+                    return;
+                if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.REGISTER_TENANT))
+                    return;
+                if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.REGISTER_SUCCESS))
+                    return;
+                if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.NOT_TENANT_PHONE))
+                    return;
+                __VLS_ctx.currentPageConfig.backFunc?.();
+                // @ts-ignore
+                [responsiveRender, currentPageConfig, receiverId, currentConversation, handleCall,];
+            } });
+    const __VLS_75 = ({ inputFocus: {} },
+        { onInputFocus: (__VLS_ctx.handleReadMessage) });
+    __VLS_asFunctionalDirective(__VLS_directives.vShow)(null, { ...__VLS_directiveBindingRestFields, value: (__VLS_ctx.currentPage == __VLS_ctx.PAGE.HOME || (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CHAT_LIST && __VLS_ctx.responsiveRender != 'mobile')) }, null, null);
+    /** @type {typeof __VLS_ctx.homeComponentRef} */ ;
+    var __VLS_76 = {};
+    // @ts-ignore
+    [currentPage, currentPage, PAGE, PAGE, responsiveRender, handleReadMessage, homeComponentRef,];
+    var __VLS_70;
+    if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_DETAIL) {
         // @ts-ignore
-        [currentPage, PAGE, chatListRef,];
-        var __VLS_51;
-        /** @type {[typeof HomeComponent, ]} */ ;
+        [currentPage, PAGE,];
+        /** @type {[typeof CustomerDetail, ]} */ ;
         // @ts-ignore
-        const __VLS_59 = __VLS_asFunctionalComponent(HomeComponent, new HomeComponent({
-            ...{ 'onCall': {} },
-            ...{ 'onBack': {} },
-            ...{ 'onInputFocus': {} },
-            ref: "homeComponentRef",
+        const __VLS_79 = __VLS_asFunctionalComponent(CustomerDetail, new CustomerDetail({
+            ref: "customerDetailRef",
             receiverId: (__VLS_ctx.receiverId),
-            ...{ class: "h-full" },
-            conversation: (__VLS_ctx.currentConversation),
+            ...{ class: "w-full h-full" },
             responsive: (__VLS_ctx.responsiveRender),
         }));
-        const __VLS_60 = __VLS_59({
-            ...{ 'onCall': {} },
-            ...{ 'onBack': {} },
-            ...{ 'onInputFocus': {} },
-            ref: "homeComponentRef",
+        const __VLS_80 = __VLS_79({
+            ref: "customerDetailRef",
             receiverId: (__VLS_ctx.receiverId),
-            ...{ class: "h-full" },
-            conversation: (__VLS_ctx.currentConversation),
+            ...{ class: "w-full h-full" },
             responsive: (__VLS_ctx.responsiveRender),
-        }, ...__VLS_functionalComponentArgsRest(__VLS_59));
-        let __VLS_62;
-        let __VLS_63;
-        const __VLS_64 = ({ call: {} },
-            { onCall: (__VLS_ctx.handleCall) });
-        const __VLS_65 = ({ back: {} },
-            { onBack: (...[$event]) => {
-                    if (!!(!__VLS_ctx.isRouterReady))
-                        return;
-                    if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.TENANT_ERROR))
-                        return;
-                    if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.REGISTER_TENANT))
-                        return;
-                    if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.REGISTER_SUCCESS))
-                        return;
-                    if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.NOT_TENANT_PHONE))
-                        return;
-                    if (!(__VLS_ctx.responsiveRender == 'mobile'))
-                        return;
-                    __VLS_ctx.currentPageConfig.backFunc?.();
-                    // @ts-ignore
-                    [responsiveRender, currentPageConfig, receiverId, currentConversation, handleCall,];
-                } });
-        const __VLS_66 = ({ inputFocus: {} },
-            { onInputFocus: (__VLS_ctx.handleReadMessage) });
-        __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 = {};
+        }, ...__VLS_functionalComponentArgsRest(__VLS_79));
+        /** @type {typeof __VLS_ctx.customerDetailRef} */ ;
+        var __VLS_82 = {};
         // @ts-ignore
-        [currentPage, PAGE, handleReadMessage, homeComponentRef,];
-        var __VLS_61;
-        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({
-                ref: "customerDetailRef",
-                receiverId: (__VLS_ctx.receiverId),
-                ...{ class: "w-full h-full" },
-                responsive: (__VLS_ctx.responsiveRender),
-            }));
-            const __VLS_71 = __VLS_70({
-                ref: "customerDetailRef",
-                receiverId: (__VLS_ctx.receiverId),
-                ...{ class: "w-full h-full" },
-                responsive: (__VLS_ctx.responsiveRender),
-            }, ...__VLS_functionalComponentArgsRest(__VLS_70));
-            /** @type {typeof __VLS_ctx.customerDetailRef} */ ;
-            var __VLS_73 = {};
-            // @ts-ignore
-            [responsiveRender, receiverId, customerDetailRef,];
-            var __VLS_72;
-        }
-        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({
-                ...{ class: "w-full h-full" },
-            }));
-            const __VLS_77 = __VLS_76({
-                ...{ class: "w-full h-full" },
-            }, ...__VLS_functionalComponentArgsRest(__VLS_76));
-        }
-        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({
-                ...{ class: "w-full h-full" },
-            }));
-            const __VLS_81 = __VLS_80({
-                ...{ class: "w-full h-full" },
-            }, ...__VLS_functionalComponentArgsRest(__VLS_80));
-        }
+        [responsiveRender, receiverId, customerDetailRef,];
+        var __VLS_81;
     }
-    else {
-        __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-            ...{ class: "flex h-full w-full relative" },
-        });
-        /** @type {[typeof ChatList, ]} */ ;
+    if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_CHECK_IN) {
         // @ts-ignore
-        const __VLS_84 = __VLS_asFunctionalComponent(ChatList, new ChatList({
-            ...{ 'onSelectReceiver': {} },
-            ...{ 'onOpenPhoneNumpad': {} },
-            ref: "chatListRef",
-            ...{ class: "w-[38%] max-w-[500px] min-w-[300px] xl:min-w-[450px] border-r layout-border" },
-            responsive: (__VLS_ctx.responsiveRender),
-            receiverId: (__VLS_ctx.receiverId),
+        [currentPage, PAGE,];
+        /** @type {[typeof CustomerCheckIn, ]} */ ;
+        // @ts-ignore
+        const __VLS_85 = __VLS_asFunctionalComponent(CustomerCheckIn, new CustomerCheckIn({
+            ...{ class: "w-full h-full" },
         }));
-        const __VLS_85 = __VLS_84({
-            ...{ 'onSelectReceiver': {} },
-            ...{ 'onOpenPhoneNumpad': {} },
-            ref: "chatListRef",
-            ...{ class: "w-[38%] max-w-[500px] min-w-[300px] xl:min-w-[450px] border-r layout-border" },
-            responsive: (__VLS_ctx.responsiveRender),
-            receiverId: (__VLS_ctx.receiverId),
-        }, ...__VLS_functionalComponentArgsRest(__VLS_84));
-        let __VLS_87;
-        let __VLS_88;
-        const __VLS_89 = ({ selectReceiver: {} },
-            { onSelectReceiver: (__VLS_ctx.selectReceiver) });
-        const __VLS_90 = ({ openPhoneNumpad: {} },
-            { onOpenPhoneNumpad: (...[$event]) => {
+        const __VLS_86 = __VLS_85({
+            ...{ class: "w-full h-full" },
+        }, ...__VLS_functionalComponentArgsRest(__VLS_85));
+    }
+    if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_APPOINTMENT) {
+        // @ts-ignore
+        [currentPage, PAGE,];
+        /** @type {[typeof CustomerAppointment, ]} */ ;
+        // @ts-ignore
+        const __VLS_89 = __VLS_asFunctionalComponent(CustomerAppointment, new CustomerAppointment({
+            ...{ 'onBookingAdmin:viewAppointment': {} },
+            ...{ class: "w-full h-full" },
+            isBookingAdmin: (__VLS_ctx.parentPageName == 'booking-admin'),
+        }));
+        const __VLS_90 = __VLS_89({
+            ...{ 'onBookingAdmin:viewAppointment': {} },
+            ...{ class: "w-full h-full" },
+            isBookingAdmin: (__VLS_ctx.parentPageName == 'booking-admin'),
+        }, ...__VLS_functionalComponentArgsRest(__VLS_89));
+        let __VLS_92;
+        let __VLS_93;
+        const __VLS_94 = ({ 'bookingAdmin:viewAppointment': {} },
+            { 'onBookingAdmin:viewAppointment': (...[$event]) => {
                     if (!!(!__VLS_ctx.isRouterReady))
                         return;
                     if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.TENANT_ERROR))
@@ -736,171 +776,54 @@ else {
                         return;
                     if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.NOT_TENANT_PHONE))
                         return;
-                    if (!!(__VLS_ctx.responsiveRender == 'mobile'))
+                    if (!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_APPOINTMENT))
                         return;
-                    __VLS_ctx.handleOpenPhoneNumpad();
+                    __VLS_ctx.emit('booking-admin:viewAppointment', $event);
                     // @ts-ignore
-                    [responsiveRender, receiverId, selectReceiver, handleOpenPhoneNumpad,];
+                    [emit, parentPageName,];
                 } });
-        /** @type {typeof __VLS_ctx.chatListRef} */ ;
-        var __VLS_91 = {};
-        // @ts-ignore
-        [chatListRef,];
-        var __VLS_86;
-        __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-            ...{ class: "bg-white grow flex flex-col h-full overflow-hidden" },
-        });
-        if (__VLS_ctx.currentPageConfig?.backFunc) {
-            // @ts-ignore
-            [currentPageConfig,];
-            __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-                ...{ class: "text-[#141B34] px-6 mt-4" },
-            });
-            __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
-                ...{ onClick: (...[$event]) => {
-                        if (!!(!__VLS_ctx.isRouterReady))
-                            return;
-                        if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.TENANT_ERROR))
-                            return;
-                        if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.REGISTER_TENANT))
-                            return;
-                        if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.REGISTER_SUCCESS))
-                            return;
-                        if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.NOT_TENANT_PHONE))
-                            return;
-                        if (!!(__VLS_ctx.responsiveRender == 'mobile'))
-                            return;
-                        if (!(__VLS_ctx.currentPageConfig?.backFunc))
-                            return;
-                        __VLS_ctx.currentPageConfig.backFunc();
-                        // @ts-ignore
-                        [currentPageConfig,];
-                    } },
-                ...{ class: "flex items-center" },
-            });
-            /** @type {[typeof IconArrowLeft, ]} */ ;
-            // @ts-ignore
-            const __VLS_94 = __VLS_asFunctionalComponent(IconArrowLeft, new IconArrowLeft({}));
-            const __VLS_95 = __VLS_94({}, ...__VLS_functionalComponentArgsRest(__VLS_94));
-            __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
-                ...{ class: "text-xl font-semibold text-chat-haze-900 ml-3" },
-            });
-            (__VLS_ctx.currentPageConfig.backTitle ?? '');
-            // @ts-ignore
-            [currentPageConfig,];
-        }
-        __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-            ...{ class: "grow overflow-hidden" },
-        });
-        /** @type {[typeof HomeComponent, ]} */ ;
-        // @ts-ignore
-        const __VLS_98 = __VLS_asFunctionalComponent(HomeComponent, new HomeComponent({
-            ...{ 'onCall': {} },
-            ...{ 'onInputFocus': {} },
-            ref: "homeComponentRef",
-            receiverId: (__VLS_ctx.receiverId),
-            ...{ class: "h-full" },
-            responsive: (__VLS_ctx.responsiveRender),
-            conversation: (__VLS_ctx.currentConversation),
-        }));
-        const __VLS_99 = __VLS_98({
-            ...{ 'onCall': {} },
-            ...{ 'onInputFocus': {} },
-            ref: "homeComponentRef",
-            receiverId: (__VLS_ctx.receiverId),
-            ...{ class: "h-full" },
-            responsive: (__VLS_ctx.responsiveRender),
-            conversation: (__VLS_ctx.currentConversation),
-        }, ...__VLS_functionalComponentArgsRest(__VLS_98));
-        let __VLS_101;
-        let __VLS_102;
-        const __VLS_103 = ({ call: {} },
-            { onCall: (__VLS_ctx.handleCall) });
-        const __VLS_104 = ({ inputFocus: {} },
-            { onInputFocus: (__VLS_ctx.handleReadMessage) });
-        __VLS_asFunctionalDirective(__VLS_directives.vShow)(null, { ...__VLS_directiveBindingRestFields, value: (__VLS_ctx.currentPage == __VLS_ctx.PAGE.HOME && __VLS_ctx.receiverId) }, null, null);
-        /** @type {typeof __VLS_ctx.homeComponentRef} */ ;
-        var __VLS_105 = {};
-        // @ts-ignore
-        [currentPage, PAGE, responsiveRender, receiverId, receiverId, currentConversation, handleCall, handleReadMessage, homeComponentRef,];
-        var __VLS_100;
-        if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_DETAIL) {
-            // @ts-ignore
-            [currentPage, PAGE,];
-            /** @type {[typeof CustomerDetail, ]} */ ;
-            // @ts-ignore
-            const __VLS_108 = __VLS_asFunctionalComponent(CustomerDetail, new CustomerDetail({
-                ref: "customerDetailRef",
-                receiverId: (__VLS_ctx.receiverId),
-                ...{ class: "h-full" },
-                responsive: (__VLS_ctx.responsiveRender),
-            }));
-            const __VLS_109 = __VLS_108({
-                ref: "customerDetailRef",
-                receiverId: (__VLS_ctx.receiverId),
-                ...{ class: "h-full" },
-                responsive: (__VLS_ctx.responsiveRender),
-            }, ...__VLS_functionalComponentArgsRest(__VLS_108));
-            /** @type {typeof __VLS_ctx.customerDetailRef} */ ;
-            var __VLS_111 = {};
-            // @ts-ignore
-            [responsiveRender, receiverId, customerDetailRef,];
-            var __VLS_110;
-        }
-        if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_CHECK_IN) {
-            // @ts-ignore
-            [currentPage, PAGE,];
-            /** @type {[typeof CustomerCheckIn, ]} */ ;
-            // @ts-ignore
-            const __VLS_114 = __VLS_asFunctionalComponent(CustomerCheckIn, new CustomerCheckIn({
-                ...{ class: "h-full" },
-            }));
-            const __VLS_115 = __VLS_114({
-                ...{ class: "h-full" },
-            }, ...__VLS_functionalComponentArgsRest(__VLS_114));
-        }
-        if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_APPOINTMENT) {
-            // @ts-ignore
-            [currentPage, PAGE,];
-            /** @type {[typeof CustomerAppointment, ]} */ ;
-            // @ts-ignore
-            const __VLS_118 = __VLS_asFunctionalComponent(CustomerAppointment, new CustomerAppointment({
-                ...{ class: "h-full" },
-            }));
-            const __VLS_119 = __VLS_118({
-                ...{ class: "h-full" },
-            }, ...__VLS_functionalComponentArgsRest(__VLS_118));
-        }
+        var __VLS_91;
     }
     /** @type {[typeof PhoneNumpad, ]} */ ;
     // @ts-ignore
-    const __VLS_122 = __VLS_asFunctionalComponent(PhoneNumpad, new PhoneNumpad({
+    const __VLS_96 = __VLS_asFunctionalComponent(PhoneNumpad, new PhoneNumpad({
         ...{ 'onCall': {} },
+        ...{ 'onMessage': {} },
         ref: "phoneNumpadRef",
         hideNumpad: (__VLS_ctx.isLib),
         responsive: (__VLS_ctx.responsiveRender),
         ...{ class: "bg-white shrink-0 border-l layout-border" },
     }));
-    const __VLS_123 = __VLS_122({
+    const __VLS_97 = __VLS_96({
         ...{ 'onCall': {} },
+        ...{ 'onMessage': {} },
         ref: "phoneNumpadRef",
         hideNumpad: (__VLS_ctx.isLib),
         responsive: (__VLS_ctx.responsiveRender),
         ...{ class: "bg-white shrink-0 border-l layout-border" },
-    }, ...__VLS_functionalComponentArgsRest(__VLS_122));
-    let __VLS_125;
-    let __VLS_126;
-    const __VLS_127 = ({ call: {} },
+    }, ...__VLS_functionalComponentArgsRest(__VLS_96));
+    let __VLS_99;
+    let __VLS_100;
+    const __VLS_101 = ({ call: {} },
         { onCall: (__VLS_ctx.handleCall) });
+    const __VLS_102 = ({ message: {} },
+        { onMessage: (__VLS_ctx.goToConversationRequest) });
     /** @type {typeof __VLS_ctx.phoneNumpadRef} */ ;
-    var __VLS_128 = {};
+    var __VLS_103 = {};
     // @ts-ignore
-    [isLib, responsiveRender, handleCall, phoneNumpadRef,];
-    var __VLS_124;
+    [isLib, responsiveRender, handleCall, goToConversationRequest, phoneNumpadRef,];
+    var __VLS_98;
 }
+/** @type {__VLS_StyleScopedClasses['']} */ ;
+/** @type {__VLS_StyleScopedClasses['']} */ ;
 /** @type {__VLS_StyleScopedClasses['go-chat-main']} */ ;
 /** @type {__VLS_StyleScopedClasses['max-w-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['bg-white']} */ ;
+/** @type {__VLS_StyleScopedClasses['go-chat-app']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-white']} */ ;
+/** @type {__VLS_StyleScopedClasses['inset-0']} */ ;
+/** @type {__VLS_StyleScopedClasses['sc-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-center']} */ ;
 /** @type {__VLS_StyleScopedClasses['m-auto']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex-center']} */ ;
 /** @type {__VLS_StyleScopedClasses['sc-full']} */ ;
@@ -923,73 +846,44 @@ else {
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
 /** @type {__VLS_StyleScopedClasses['shrink-0']} */ ;
+/** @type {__VLS_StyleScopedClasses['py-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['border-b']} */ ;
+/** @type {__VLS_StyleScopedClasses['layout-border']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-[#F9FAFC]']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-white']} */ ;
 /** @type {__VLS_StyleScopedClasses['w-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['grow']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
 /** @type {__VLS_StyleScopedClasses['overflow-hidden']} */ ;
 /** @type {__VLS_StyleScopedClasses['relative']} */ ;
-/** @type {__VLS_StyleScopedClasses['grow']} */ ;
 /** @type {__VLS_StyleScopedClasses['relative']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
-/** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
-/** @type {__VLS_StyleScopedClasses['mx-auto']} */ ;
 /** @type {__VLS_StyleScopedClasses['w-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['grow']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
+/** @type {__VLS_StyleScopedClasses['mx-auto']} */ ;
 /** @type {__VLS_StyleScopedClasses['bg-[#F9FAFC]']} */ ;
 /** @type {__VLS_StyleScopedClasses['overflow-hidden']} */ ;
 /** @type {__VLS_StyleScopedClasses['chat-mobile']} */ ;
-/** @type {__VLS_StyleScopedClasses['pt-4']} */ ;
-/** @type {__VLS_StyleScopedClasses['text-[#141B34]']} */ ;
-/** @type {__VLS_StyleScopedClasses['shrink-0']} */ ;
-/** @type {__VLS_StyleScopedClasses['flex']} */ ;
-/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
-/** @type {__VLS_StyleScopedClasses['justify-between']} */ ;
-/** @type {__VLS_StyleScopedClasses['flex']} */ ;
-/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
-/** @type {__VLS_StyleScopedClasses['ml-3']} */ ;
-/** @type {__VLS_StyleScopedClasses['text-xl']} */ ;
-/** @type {__VLS_StyleScopedClasses['font-semibold']} */ ;
-/** @type {__VLS_StyleScopedClasses['text-left']} */ ;
-/** @type {__VLS_StyleScopedClasses['text-chat-haze-900']} */ ;
-/** @type {__VLS_StyleScopedClasses['h-7']} */ ;
-/** @type {__VLS_StyleScopedClasses['text-sm']} */ ;
-/** @type {__VLS_StyleScopedClasses['font-medium']} */ ;
-/** @type {__VLS_StyleScopedClasses['text-chat-haze-900']} */ ;
-/** @type {__VLS_StyleScopedClasses['flex']} */ ;
-/** @type {__VLS_StyleScopedClasses['gap-2']} */ ;
-/** @type {__VLS_StyleScopedClasses['text-chat-haze-700']} */ ;
-/** @type {__VLS_StyleScopedClasses['font-medium']} */ ;
-/** @type {__VLS_StyleScopedClasses['text-gray-700']} */ ;
-/** @type {__VLS_StyleScopedClasses['w-10']} */ ;
-/** @type {__VLS_StyleScopedClasses['h-10']} */ ;
 /** @type {__VLS_StyleScopedClasses['grow']} */ ;
 /** @type {__VLS_StyleScopedClasses['overflow-hidden']} */ ;
-/** @type {__VLS_StyleScopedClasses['w-full']} */ ;
-/** @type {__VLS_StyleScopedClasses['max-w-[500px]']} */ ;
-/** @type {__VLS_StyleScopedClasses['!bg-[#F9FAFC]']} */ ;
-/** @type {__VLS_StyleScopedClasses['h-full']} */ ;
-/** @type {__VLS_StyleScopedClasses['w-full']} */ ;
-/** @type {__VLS_StyleScopedClasses['h-full']} */ ;
-/** @type {__VLS_StyleScopedClasses['w-full']} */ ;
-/** @type {__VLS_StyleScopedClasses['h-full']} */ ;
-/** @type {__VLS_StyleScopedClasses['w-full']} */ ;
-/** @type {__VLS_StyleScopedClasses['h-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
-/** @type {__VLS_StyleScopedClasses['h-full']} */ ;
-/** @type {__VLS_StyleScopedClasses['w-full']} */ ;
-/** @type {__VLS_StyleScopedClasses['relative']} */ ;
 /** @type {__VLS_StyleScopedClasses['w-[38%]']} */ ;
 /** @type {__VLS_StyleScopedClasses['max-w-[500px]']} */ ;
 /** @type {__VLS_StyleScopedClasses['min-w-[300px]']} */ ;
 /** @type {__VLS_StyleScopedClasses['xl:min-w-[450px]']} */ ;
 /** @type {__VLS_StyleScopedClasses['border-r']} */ ;
 /** @type {__VLS_StyleScopedClasses['layout-border']} */ ;
-/** @type {__VLS_StyleScopedClasses['bg-white']} */ ;
-/** @type {__VLS_StyleScopedClasses['grow']} */ ;
-/** @type {__VLS_StyleScopedClasses['flex']} */ ;
-/** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['max-w-[500px]']} */ ;
+/** @type {__VLS_StyleScopedClasses['!bg-[#F9FAFC]']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['overflow-hidden']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
+/** @type {__VLS_StyleScopedClasses['grow']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-[#141B34]']} */ ;
 /** @type {__VLS_StyleScopedClasses['px-6']} */ ;
 /** @type {__VLS_StyleScopedClasses['mt-4']} */ ;
@@ -999,18 +893,20 @@ else {
 /** @type {__VLS_StyleScopedClasses['font-semibold']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-chat-haze-900']} */ ;
 /** @type {__VLS_StyleScopedClasses['ml-3']} */ ;
-/** @type {__VLS_StyleScopedClasses['grow']} */ ;
-/** @type {__VLS_StyleScopedClasses['overflow-hidden']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['grow']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['bg-white']} */ ;
 /** @type {__VLS_StyleScopedClasses['shrink-0']} */ ;
 /** @type {__VLS_StyleScopedClasses['border-l']} */ ;
 /** @type {__VLS_StyleScopedClasses['layout-border']} */ ;
 // @ts-ignore
-var __VLS_39 = __VLS_38, __VLS_57 = __VLS_56, __VLS_68 = __VLS_67, __VLS_74 = __VLS_73, __VLS_92 = __VLS_91, __VLS_106 = __VLS_105, __VLS_112 = __VLS_111, __VLS_129 = __VLS_128;
+var __VLS_51 = __VLS_50, __VLS_62 = __VLS_61, __VLS_77 = __VLS_76, __VLS_83 = __VLS_82, __VLS_104 = __VLS_103;
 const __VLS_export = (await import('vue')).defineComponent({
     setup: () => (__VLS_exposed),
     __typeEmits: {},