@phonghq/go-chat 1.0.72 → 1.0.74

package/dist/chat/App.vue.js

@@ -0,0 +1,928 @@
+/// <reference types="C:/phonghq/go-chat-v2/node_modules/.vue-global-types/vue_3.5_0.d.ts" />
+import ChatList from '../chat/page/home/ChatList.vue';
+import HomeComponent from '../chat/page/home/Home.vue';
+import IconArrowLeft from '../assets/icons/global/IconArrowLeft.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';
+import CustomerAppointment from '../chat/page/customer-appointment/CustomerAppointment.vue';
+import { isRouterReady, useInitData } from '../composable/useInitData';
+import Error from '../chat/page/error/Error.vue';
+import { currentPage, routerBack, routerPush } from '../utils/chat/chat-router';
+import BaseSpin from '../components/chat/common/spin/BaseSpin.vue';
+import Calling from '../components/chat/call/Calling.vue';
+import { dataProfile, logout } from '../utils/chat/store/auth';
+import '../style/index.scss';
+import { defineRootColor } from '../constant/color';
+import IconCloseCircle from '../assets/icons/global/IconCloseCircle.vue';
+import Setting from '../chat/page/setting/Setting.vue';
+import SettingSuccess from '../chat/page/setting/SettingSuccess.vue';
+import NotTenantPhone from '../views/NotTenantPhone.vue';
+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: '' },
+    {
+        id: PAGE.CUSTOMER_DETAIL,
+        backFunc: () => {
+            routerPush(PAGE.HOME);
+        },
+        backTitle: ''
+    },
+    {
+        id: PAGE.CUSTOMER_APPOINTMENT,
+        backFunc: routerBack,
+        backTitle: 'Appointments'
+    },
+    {
+        id: PAGE.CUSTOMER_CHECK_IN,
+        backFunc: routerBack,
+        backTitle: 'Checkins'
+    }
+];
+const routerMobileConfig = computed(() => [
+    {
+        id: PAGE.CHAT_LIST,
+        backFunc: props.isLib
+            ? undefined
+            : () => {
+                logout();
+            },
+        backTitle: 'logo',
+        subTitle: dataProfile.value?.user_type == 'tenant'
+            ? phoneNumberFormat(dataProfile.value?.phone ?? '')
+            : ''
+    },
+    {
+        id: PAGE.HOME,
+        backFunc: () => {
+            routerPush(PAGE.CHAT_LIST);
+        },
+        backTitle: '',
+        isHidden: true
+    },
+    {
+        id: PAGE.CUSTOMER_DETAIL,
+        backFunc: () => {
+            if (receiverId.value) {
+                routerPush(PAGE.HOME);
+            }
+            else {
+                routerPush(PAGE.CHAT_LIST);
+            }
+        },
+        backTitle: ''
+    },
+    {
+        id: PAGE.CUSTOMER_APPOINTMENT,
+        backFunc: routerBack,
+        backTitle: 'Appointments'
+    },
+    {
+        id: PAGE.CUSTOMER_CHECK_IN,
+        backFunc: routerBack,
+        backTitle: 'Checkins'
+    }
+]);
+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) => {
+        if (chatListRef.value) {
+            if (init_data?.conversation_id) {
+                chatListRef.value?.initData({
+                    conversation_id: data?.conversation_id,
+                    is_known: data?.is_known ?? 1
+                });
+            }
+            else
+                chatListRef.value?.initData(data);
+            clearInterval(initTimer);
+            initTimer = null;
+        }
+    };
+    initTimer = setInterval(() => func(init_data), 500);
+};
+const { initPage } = useInitData();
+const { getResponsiveObserver } = useListenEvent(() => handleExposeInit({ isResponsiveChange: true }));
+onMounted(() => {
+    getResponsiveObserver(true);
+    if (props.isLib) {
+        defineRootColor();
+        handleInitPage();
+    }
+});
+onUnmounted(() => { });
+const currentPageConfig = computed(() => {
+    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 unreadCount = computed(() => {
+    return ((chatListRef.value?.listConversationsAll?.reduce((total, cur) => total + (cur?.unread_count ?? 0), 0) ?? 0) +
+        (chatListRef.value?.listConversationsUnknown?.reduce((total, cur) => total + (cur?.unread_count ?? 0), 0) ?? 0));
+});
+const currentConversation = computed(() => {
+    return (chatListRef.value?.listConversationsAll.find((e) => e.receiver_id == receiverId.value) ??
+        chatListRef.value?.listConversationsUnknown.find((e) => e.receiver_id == receiverId.value) ??
+        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);
+const customerDetailRef = ref(null);
+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) {
+            routerPush(PAGE.HOME);
+        }
+        receiverId.value = data?.receiver_id;
+        await nextTick();
+        chatListRef.value?.handleReadMessage();
+        homeComponentRef.value?.getData(data);
+    }
+};
+const handleCall = (user) => {
+    if (dataProfile.value?.user_type != 'tenant')
+        return;
+    if (callingRef.value) {
+        callingRef.value?.startCall(user);
+    }
+    else {
+        emit('call', user);
+    }
+    handleReadMessage();
+};
+const handleInitPage = async () => {
+    const init_data = await initPage({ props: props, responsive: responsiveRender.value });
+    if (!dataProfile.value?.phone && dataProfile.value?.user_type == 'tenant') {
+        emit('error:noPhoneTenant');
+        routerPush(PAGE.NOT_TENANT_PHONE);
+    }
+    handleExposeInit(init_data);
+};
+const openSettings = () => {
+    drawerVisibleRef.value?.open();
+};
+const handleReadMessage = () => {
+    chatListRef.value?.handleReadMessage();
+};
+const handleOpenPhoneNumpad = () => {
+    phoneNumpadRef.value?.openPhoneNumpad();
+};
+const handleCloseBtn = () => {
+    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({
+    call: {
+        startCall: async () => {
+            await callingRef.value?.answer();
+        },
+        endCall: () => {
+            callingRef.value?.endCall();
+        }
+    },
+    chat: {
+        startSendMessage
+    },
+    ui: {
+        get unreadCount() {
+            return unreadCount.value;
+        },
+        get callStatus() {
+            return callStatus.value;
+        },
+        get callLabel() {
+            return callingRef.value?.label ?? '';
+        }
+    },
+    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 = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_elements;
+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
+[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,];
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ class: "m-auto flex-center sc-full" },
+    });
+    /** @type {[typeof BaseSpin, ]} */ ;
+    // @ts-ignore
+    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_8 = __VLS_asFunctionalComponent(Error, new Error({
+        ...{ class: "mt-10" },
+    }));
+    const __VLS_9 = __VLS_8({
+        ...{ class: "mt-10" },
+    }, ...__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_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_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
+    [currentPage, PAGE,];
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ class: "h-full p-5 flex flex-col" },
+    });
+    if (props.isLib) {
+        __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+            ...{ class: "shrink-0 flex items-center justify-between" },
+        });
+        __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({});
+        __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 (!(props.isLib))
+                        return;
+                    __VLS_ctx.handleCloseBtn();
+                    // @ts-ignore
+                    [handleCloseBtn,];
+                } },
+            ...{ class: "w-10 h-10" },
+        });
+        /** @type {[typeof IconCloseCircle, ]} */ ;
+        // @ts-ignore
+        const __VLS_20 = __VLS_asFunctionalComponent(IconCloseCircle, new IconCloseCircle({}));
+        const __VLS_21 = __VLS_20({}, ...__VLS_functionalComponentArgsRest(__VLS_20));
+    }
+    /** @type {[typeof NotTenantPhone, ]} */ ;
+    // @ts-ignore
+    const __VLS_24 = __VLS_asFunctionalComponent(NotTenantPhone, new NotTenantPhone({
+        ...{ 'onTryAgain': {} },
+        ...{ class: "bg-white grow" },
+        isLib: (props.isLib),
+    }));
+    const __VLS_25 = __VLS_24({
+        ...{ 'onTryAgain': {} },
+        ...{ class: "bg-white grow" },
+        isLib: (props.isLib),
+    }, ...__VLS_functionalComponentArgsRest(__VLS_24));
+    let __VLS_27;
+    let __VLS_28;
+    const __VLS_29 = ({ tryAgain: {} },
+        { onTryAgain: (...[$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.handleInitPage();
+                // @ts-ignore
+                [handleInitPage,];
+            } });
+    var __VLS_26;
+}
+else {
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ class: "grow h-full overflow-hidden flex flex-col" },
+    });
+    if (__VLS_ctx.isLib) {
+        // @ts-ignore
+        [isLib,];
+        /** @type {[typeof PageError, ]} */ ;
+        // @ts-ignore
+        const __VLS_31 = __VLS_asFunctionalComponent(PageError, new PageError({
+            ...{ class: "shrink-0" },
+        }));
+        const __VLS_32 = __VLS_31({
+            ...{ class: "shrink-0" },
+        }, ...__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" },
+    });
+    if (__VLS_ctx.isLib) {
+        // @ts-ignore
+        [isLib,];
+        /** @type {[typeof Calling, ]} */ ;
+        // @ts-ignore
+        const __VLS_43 = __VLS_asFunctionalComponent(Calling, new Calling({
+            ...{ 'onUserCalling': {} },
+            ...{ 'onEndCall': {} },
+            ref: "callingRef",
+            responsive: (__VLS_ctx.responsiveRender),
+        }));
+        const __VLS_44 = __VLS_43({
+            ...{ 'onUserCalling': {} },
+            ...{ 'onEndCall': {} },
+            ref: "callingRef",
+            responsive: (__VLS_ctx.responsiveRender),
+        }, ...__VLS_functionalComponentArgsRest(__VLS_43));
+        let __VLS_46;
+        let __VLS_47;
+        const __VLS_48 = ({ userCalling: {} },
+            { onUserCalling: (...[$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.isLib))
+                        return;
+                    __VLS_ctx.emit('call:userCalling', $event);
+                    // @ts-ignore
+                    [responsiveRender, emit,];
+                } });
+        const __VLS_49 = ({ endCall: {} },
+            { onEndCall: (...[$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.isLib))
+                        return;
+                    __VLS_ctx.emit('call:endCall');
+                    // @ts-ignore
+                    [emit,];
+                } });
+        /** @type {typeof __VLS_ctx.callingRef} */ ;
+        var __VLS_50 = {};
+        // @ts-ignore
+        [callingRef,];
+        var __VLS_45;
+    }
+    __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
+                [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: "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.currentPageConfig?.backFunc && __VLS_ctx.responsiveRender != 'mobile'))
+                        return;
+                    __VLS_ctx.currentPageConfig.backFunc();
+                    // @ts-ignore
+                    [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': {} },
+        ...{ 'onViewAppointment': {} },
+        ref: "homeComponentRef",
+        receiverId: (__VLS_ctx.receiverId),
+        ...{ class: "h-full grow" },
+        conversation: (__VLS_ctx.currentConversation),
+        responsive: (__VLS_ctx.responsiveRender),
+        parentPageName: (__VLS_ctx.parentPageName ?? ''),
+    }));
+    const __VLS_69 = __VLS_68({
+        ...{ 'onCall': {} },
+        ...{ 'onBack': {} },
+        ...{ 'onInputFocus': {} },
+        ...{ 'onViewAppointment': {} },
+        ref: "homeComponentRef",
+        receiverId: (__VLS_ctx.receiverId),
+        ...{ class: "h-full grow" },
+        conversation: (__VLS_ctx.currentConversation),
+        responsive: (__VLS_ctx.responsiveRender),
+        parentPageName: (__VLS_ctx.parentPageName ?? ''),
+    }, ...__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, parentPageName, handleCall,];
+            } });
+    const __VLS_75 = ({ inputFocus: {} },
+        { onInputFocus: (__VLS_ctx.handleReadMessage) });
+    const __VLS_76 = ({ viewAppointment: {} },
+        { onViewAppointment: (...[$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('booking-admin:viewAppointment', $event);
+                // @ts-ignore
+                [emit, 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_77 = {};
+    // @ts-ignore
+    [currentPage, currentPage, PAGE, PAGE, responsiveRender, homeComponentRef,];
+    var __VLS_70;
+    if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_DETAIL) {
+        // @ts-ignore
+        [currentPage, PAGE,];
+        /** @type {[typeof CustomerDetail, ]} */ ;
+        // @ts-ignore
+        const __VLS_80 = __VLS_asFunctionalComponent(CustomerDetail, new CustomerDetail({
+            ref: "customerDetailRef",
+            receiverId: (__VLS_ctx.receiverId),
+            ...{ class: "w-full h-full" },
+            responsive: (__VLS_ctx.responsiveRender),
+        }));
+        const __VLS_81 = __VLS_80({
+            ref: "customerDetailRef",
+            receiverId: (__VLS_ctx.receiverId),
+            ...{ class: "w-full h-full" },
+            responsive: (__VLS_ctx.responsiveRender),
+        }, ...__VLS_functionalComponentArgsRest(__VLS_80));
+        /** @type {typeof __VLS_ctx.customerDetailRef} */ ;
+        var __VLS_83 = {};
+        // @ts-ignore
+        [responsiveRender, receiverId, customerDetailRef,];
+        var __VLS_82;
+    }
+    if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_CHECK_IN) {
+        // @ts-ignore
+        [currentPage, PAGE,];
+        /** @type {[typeof CustomerCheckIn, ]} */ ;
+        // @ts-ignore
+        const __VLS_86 = __VLS_asFunctionalComponent(CustomerCheckIn, new CustomerCheckIn({
+            ...{ class: "w-full h-full" },
+        }));
+        const __VLS_87 = __VLS_86({
+            ...{ class: "w-full h-full" },
+        }, ...__VLS_functionalComponentArgsRest(__VLS_86));
+    }
+    if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_APPOINTMENT) {
+        // @ts-ignore
+        [currentPage, PAGE,];
+        /** @type {[typeof CustomerAppointment, ]} */ ;
+        // @ts-ignore
+        const __VLS_90 = __VLS_asFunctionalComponent(CustomerAppointment, new CustomerAppointment({
+            ...{ 'onBookingAdmin:viewAppointment': {} },
+            ...{ class: "w-full h-full" },
+            isBookingAdmin: (__VLS_ctx.parentPageName == 'booking-admin'),
+        }));
+        const __VLS_91 = __VLS_90({
+            ...{ 'onBookingAdmin:viewAppointment': {} },
+            ...{ class: "w-full h-full" },
+            isBookingAdmin: (__VLS_ctx.parentPageName == 'booking-admin'),
+        }, ...__VLS_functionalComponentArgsRest(__VLS_90));
+        let __VLS_93;
+        let __VLS_94;
+        const __VLS_95 = ({ 'bookingAdmin:viewAppointment': {} },
+            { 'onBookingAdmin:viewAppointment': (...[$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.currentPage == __VLS_ctx.PAGE.CUSTOMER_APPOINTMENT))
+                        return;
+                    __VLS_ctx.emit('booking-admin:viewAppointment', $event);
+                    // @ts-ignore
+                    [emit, parentPageName,];
+                } });
+        var __VLS_92;
+    }
+    /** @type {[typeof PhoneNumpad, ]} */ ;
+    // @ts-ignore
+    const __VLS_97 = __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_98 = __VLS_97({
+        ...{ 'onCall': {} },
+        ...{ 'onMessage': {} },
+        ref: "phoneNumpadRef",
+        hideNumpad: (__VLS_ctx.isLib),
+        responsive: (__VLS_ctx.responsiveRender),
+        ...{ class: "bg-white shrink-0 border-l layout-border" },
+    }, ...__VLS_functionalComponentArgsRest(__VLS_97));
+    let __VLS_100;
+    let __VLS_101;
+    const __VLS_102 = ({ call: {} },
+        { onCall: (__VLS_ctx.handleCall) });
+    const __VLS_103 = ({ message: {} },
+        { onMessage: (__VLS_ctx.goToConversationRequest) });
+    /** @type {typeof __VLS_ctx.phoneNumpadRef} */ ;
+    var __VLS_104 = {};
+    // @ts-ignore
+    [isLib, responsiveRender, handleCall, goToConversationRequest, phoneNumpadRef,];
+    var __VLS_99;
+}
+/** @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']} */ ;
+/** @type {__VLS_StyleScopedClasses['mt-10']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['p-5']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
+/** @type {__VLS_StyleScopedClasses['shrink-0']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['justify-between']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-10']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-10']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-white']} */ ;
+/** @type {__VLS_StyleScopedClasses['grow']} */ ;
+/** @type {__VLS_StyleScopedClasses['grow']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['overflow-hidden']} */ ;
+/** @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['relative']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @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['grow']} */ ;
+/** @type {__VLS_StyleScopedClasses['overflow-hidden']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @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['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']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-xl']} */ ;
+/** @type {__VLS_StyleScopedClasses['font-semibold']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-chat-haze-900']} */ ;
+/** @type {__VLS_StyleScopedClasses['ml-3']} */ ;
+/** @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_51 = __VLS_50, __VLS_62 = __VLS_61, __VLS_78 = __VLS_77, __VLS_84 = __VLS_83, __VLS_105 = __VLS_104;
+const __VLS_export = (await import('vue')).defineComponent({
+    setup: () => (__VLS_exposed),
+    __typeEmits: {},
+    __typeProps: {},
+    props: {},
+});
+export default {};