@phonghq/go-chat 1.0.43 → 1.0.44

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

@@ -13,16 +13,14 @@ import { currentPage, 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/auth';
-import MobileFooter from '../components/chat/layout/mobile/Footer.vue';
 import '../style/index.scss';
-import { useDebounce } from '../utils/debounce';
 import { defineRootColor } from '../constant/color';
 import IconCloseCircle from '../assets/icons/IconCloseCircle.vue';
 import Setting from '../chat/page/setting/Setting.vue';
 import SettingSuccess from '../chat/page/setting/SettingSuccess.vue';
-import { goChatError } from '../composable/useError';
 import NotTenantPhone from '../views/NotTenantPhone.vue';
 import { phoneNumberFormat } from '../utils/string-helper';
+import { responsiveObserver, useListenEvent } from '../composable/useListentEvent';
 const routerConfig = [
     { id: PAGE.HOME, backFunc: null, backTitle: '' },
     {
@@ -91,21 +89,20 @@ const routerMobileConfig = computed(() => [
     }
 ]);
 const props = withDefaults(defineProps(), {
-    response: 'tablet',
+    response: 'tablet'
 });
 const emit = defineEmits();
 const { initPage } = useInitData();
+const { getResponsiveObserver } = useListenEvent();
 onMounted(() => {
+    console.log('222222222222222222');
+    getResponsiveObserver();
     if (props.isLib) {
         defineRootColor();
+        handleInitPage();
     }
-    getResponsiveObserver();
-    window.addEventListener('resize', getResponsiveObserverDebounce);
-    handleInitPage();
-});
-onUnmounted(() => {
-    window.removeEventListener('resize', getResponsiveObserverDebounce);
 });
+onUnmounted(() => { });
 const currentPageConfig = computed(() => {
     if (responsiveRender.value === 'mobile') {
         return routerMobileConfig.value.find((e) => e.id == currentPage.value);
@@ -119,8 +116,12 @@ 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 responsiveObserver = ref('tablet');
 const appChatRef = ref();
 const callingRef = ref(null);
 const receiverId = ref(null);
@@ -128,8 +129,6 @@ const customerDetailRef = ref(null);
 const homeComponentRef = ref(null);
 const chatListRef = ref(null);
 const drawerVisibleRef = ref(null);
-const mediaPermissionError = ref('');
-const mediaPermissionState = ref('granted');
 const selectReceiver = async (data) => {
     if (receiverId.value != data?.receiver_id || responsiveRender.value === 'mobile') {
         if (currentPage.value != PAGE.HOME) {
@@ -142,31 +141,36 @@ const selectReceiver = async (data) => {
     }
 };
 const handleCall = (user) => {
-    callingRef.value?.startCall(user);
-};
-const getResponsiveObserver = () => {
-    if (!appChatRef.value)
+    if (dataProfile.value?.user_type != 'tenant')
         return;
-    const width = appChatRef.value?.offsetWidth ?? 0;
-    if (width >= 640) {
-        if (responsiveObserver.value != 'tablet') {
-            responsiveObserver.value = 'tablet';
-        }
+    if (callingRef.value) {
+        callingRef.value?.startCall(user);
     }
     else {
-        if (responsiveObserver.value != 'mobile') {
-            if (currentPage.value == PAGE.HOME) {
-                currentPage.value = PAGE.CHAT_LIST;
-            }
-            responsiveObserver.value = 'mobile';
-        }
+        emit('call', user);
     }
 };
-const getResponsiveObserverDebounce = useDebounce(() => {
-    getResponsiveObserver();
-}, 50);
+// const getResponsiveObserver = () => {
+//   if (!appChatRef.value) return
+//   const width = appChatRef.value?.offsetWidth ?? 0
+//   if (width >= 640) {
+//     if (responsiveObserver.value != 'tablet') {
+//       responsiveObserver.value = 'tablet'
+//     }
+//   } else {
+//     if (responsiveObserver.value != 'mobile') {
+//       if (currentPage.value == PAGE.HOME) {
+//         currentPage.value = PAGE.CHAT_LIST
+//       }
+//       responsiveObserver.value = 'mobile'
+//     }
+//   }
+// }
+// const getResponsiveObserverDebounce = useDebounce(() => {
+//   getResponsiveObserver()
+// }, 50)
 const handleInitPage = async () => {
-    const init_data = await initPage({ props: props, response: responsiveRender.value });
+    const init_data = await initPage({ props: props, responsive: responsiveRender.value });
     if (!dataProfile.value?.tenant_phone && dataProfile.value?.user_type == 'tenant') {
         emit('error:noPhoneTenant');
         routerPush(PAGE.NOT_TENANT_PHONE);
@@ -177,61 +181,39 @@ const handleInitPage = async () => {
         //   routerPush(PAGE.REGISTER_TENANT)
         // }
     }
-    if (init_data?.conversation_id) {
-        chatListRef.value?.initData({ conversation_id: init_data?.conversation_id, is_unknown: init_data?.is_unknown || '0' });
-    }
-    else
-        chatListRef.value?.initData();
-};
-const handleEndCall = (data, type) => {
-    setTimeout(() => {
-        if (data?.phone && homeComponentRef.value?.infoUser?.phone == data?.phone) {
-            homeComponentRef.value?.handleGetMessage({ resetList: true });
-        }
-        // publicTopicConversationUpdate({
-        //   infoUser: homeComponentRef.value?.infoUser ?? null,
-        //   isCall: type
-        // })
-    }, 2000);
+    // if (init_data?.conversation_id) {
+    //   chatListRef.value?.initData({
+    //     conversation_id: init_data?.conversation_id,
+    //     is_unknown: init_data?.is_unknown || '0'
+    //   })
+    // } else chatListRef.value?.initData()
 };
+// const handleEndCall = (data: IResUser | null, type: string) => {
+//   setTimeout(() => {
+//     if (data?.phone && homeComponentRef.value?.infoUser?.phone == data?.phone) {
+//       // homeComponentRef.value?.handleGetMessage({ resetList: true })
+//     }
+//     // publicTopicConversationUpdate({
+//     //   infoUser: homeComponentRef.value?.infoUser ?? null,
+//     //   isCall: type
+//     // })
+//   }, 2000)
+// }
 const openSettings = () => {
     drawerVisibleRef.value?.open();
 };
 const handleReadMessage = () => {
     chatListRef.value?.handleReadMessage();
 };
-const handleMedialPermissionError = async () => {
-    if (navigator.permissions && navigator.permissions.query) {
-        try {
-            const result = await navigator.permissions.query({ name: 'microphone' });
-            if (result.state == 'prompt') {
-                goChatError.value =
-                    'Microphone access is needed. Please allow microphone permission to continue.';
-            }
-            else if (result.state == 'denied') {
-                goChatError.value =
-                    'You have denied microphone access. Please enable microphone permission in your browser to continue the call.';
-            }
-            mediaPermissionState.value = result.state;
-        }
-        catch (err) {
-            console.log(err);
-        }
-    }
-};
-const askMedialPermission = async () => {
-    try {
-        await navigator.mediaDevices.getUserMedia({ audio: true });
-        window.location.reload();
-    }
-    catch (e) {
-        console.log(e);
+const handleExposeInit = (init_data) => {
+    if (init_data?.conversation_id) {
+        chatListRef.value?.initData({
+            conversation_id: init_data?.conversation_id,
+            is_unknown: init_data?.is_unknown || '0'
+        });
     }
-    handleMedialPermissionError();
-};
-const reload = () => {
-    ;
-    window.location.reload();
+    else
+        chatListRef.value?.initData();
 };
 let __VLS_exposed;
 defineExpose({
@@ -251,11 +233,12 @@ defineExpose({
         await callingRef.value?.answer();
     },
     endCall: () => callingRef.value?.endCall(),
-    openSettings
+    openSettings,
+    initData: (data) => handleExposeInit(data),
 });
 debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
 const __VLS_defaults = {
-    response: 'tablet',
+    response: 'tablet'
 };
 const __VLS_ctx = {
     ...{},
@@ -268,14 +251,13 @@ let __VLS_elements;
 let __VLS_components;
 let __VLS_directives;
 __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-    ...{ class: "go-chat-main max-w-full p-0 overscroll-x-none" },
-    ...{ class: ({ 'md:p-8': !__VLS_ctx.isLib }) },
+    ...{ class: "go-chat-main max-w-full" },
     id: "appChatMain",
     ref: "appChatRef",
 });
 /** @type {typeof __VLS_ctx.appChatRef} */ ;
 // @ts-ignore
-[isLib, appChatRef,];
+[appChatRef,];
 if (!__VLS_ctx.isRouterReady) {
     // @ts-ignore
     [isRouterReady,];
@@ -350,103 +332,52 @@ else if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.NOT_TENANT_PHONE) {
 }
 else {
     __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-        ...{ class: "w-full h-full flex flex-col overflow-hidden relative" },
+        ...{ class: "grow h-full overflow-hidden flex flex-col" },
     });
-    if (__VLS_ctx.goChatError) {
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ class: "w-full grow flex overflow-hidden relative" },
+    });
+    if (__VLS_ctx.isLib) {
         // @ts-ignore
-        [goChatError,];
-        __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-            ...{ class: "shrink-0 w-full bg-chat-error text-white text-sm px-4 py-2 flex items-center justify-between gap-2" },
-        });
-        __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({});
-        (__VLS_ctx.goChatError);
+        [isLib,];
+        /** @type {[typeof Calling, ]} */ ;
         // @ts-ignore
-        [goChatError,];
-        if (__VLS_ctx.mediaPermissionState == 'prompt') {
-            // @ts-ignore
-            [mediaPermissionState,];
-            __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
-                ...{ onClick: (__VLS_ctx.askMedialPermission) },
-                ...{ class: "bg-white min-h-10 text-chat-haze-600 font-bold w-[250px] rounded-lg" },
-            });
-            // @ts-ignore
-            [askMedialPermission,];
-        }
-        else if (__VLS_ctx.mediaPermissionState == 'denied') {
-            // @ts-ignore
-            [mediaPermissionState,];
-            __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({});
-        }
-        else {
-            __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.goChatError))
-                            return;
-                        if (!!(__VLS_ctx.mediaPermissionState == 'prompt'))
-                            return;
-                        if (!!(__VLS_ctx.mediaPermissionState == 'denied'))
-                            return;
-                        __VLS_ctx.reload();
-                        // @ts-ignore
-                        [reload,];
-                    } },
-                ...{ class: "bg-white min-h-10 text-chat-haze-600 font-bold text-base w-[200px] rounded-lg" },
-            });
-        }
+        const __VLS_23 = __VLS_asFunctionalComponent(Calling, new Calling({
+            ...{ 'onUserCalling': {} },
+            ref: "callingRef",
+            responsive: (__VLS_ctx.responsiveRender),
+        }));
+        const __VLS_24 = __VLS_23({
+            ...{ 'onUserCalling': {} },
+            ref: "callingRef",
+            responsive: (__VLS_ctx.responsiveRender),
+        }, ...__VLS_functionalComponentArgsRest(__VLS_23));
+        let __VLS_26;
+        let __VLS_27;
+        const __VLS_28 = ({ 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('userCalling', $event);
+                    // @ts-ignore
+                    [responsiveRender, emit,];
+                } });
+        /** @type {typeof __VLS_ctx.callingRef} */ ;
+        var __VLS_29 = {};
+        // @ts-ignore
+        [callingRef,];
+        var __VLS_25;
     }
-    /** @type {[typeof Calling, ]} */ ;
-    // @ts-ignore
-    const __VLS_23 = __VLS_asFunctionalComponent(Calling, new Calling({
-        ...{ 'onUserCalling': {} },
-        ...{ 'onEndCall': {} },
-        ...{ 'onError:mediaPermissionFail': {} },
-        ref: "callingRef",
-        responsive: (__VLS_ctx.responsiveRender),
-    }));
-    const __VLS_24 = __VLS_23({
-        ...{ 'onUserCalling': {} },
-        ...{ 'onEndCall': {} },
-        ...{ 'onError:mediaPermissionFail': {} },
-        ref: "callingRef",
-        responsive: (__VLS_ctx.responsiveRender),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_23));
-    let __VLS_26;
-    let __VLS_27;
-    const __VLS_28 = ({ 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;
-                __VLS_ctx.emit('userCalling', $event);
-                // @ts-ignore
-                [responsiveRender, emit,];
-            } });
-    const __VLS_29 = ({ endCall: {} },
-        { onEndCall: (__VLS_ctx.handleEndCall) });
-    const __VLS_30 = ({ 'error:mediaPermissionFail': {} },
-        { 'onError:mediaPermissionFail': (__VLS_ctx.handleMedialPermissionError) });
-    /** @type {typeof __VLS_ctx.callingRef} */ ;
-    var __VLS_31 = {};
-    // @ts-ignore
-    [handleEndCall, handleMedialPermissionError, callingRef,];
-    var __VLS_25;
     if (__VLS_ctx.responsiveRender == 'mobile') {
         // @ts-ignore
         [responsiveRender,];
@@ -486,8 +417,8 @@ else {
             });
             /** @type {[typeof IconArrowLeft, ]} */ ;
             // @ts-ignore
-            const __VLS_34 = __VLS_asFunctionalComponent(IconArrowLeft, new IconArrowLeft({}));
-            const __VLS_35 = __VLS_34({}, ...__VLS_functionalComponentArgsRest(__VLS_34));
+            const __VLS_32 = __VLS_asFunctionalComponent(IconArrowLeft, new IconArrowLeft({}));
+            const __VLS_33 = __VLS_32({}, ...__VLS_functionalComponentArgsRest(__VLS_32));
             __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
                 ...{ class: "ml-3" },
             });
@@ -504,7 +435,7 @@ else {
             // @ts-ignore
             [currentPageConfig,];
         }
-        else if (__VLS_ctx.dataProfile?.user_type == 'tenant' || true) {
+        else if (__VLS_ctx.dataProfile?.user_type == 'tenant') {
             // @ts-ignore
             [dataProfile,];
             __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
@@ -548,63 +479,65 @@ else {
             });
             /** @type {[typeof IconCloseCircle, ]} */ ;
             // @ts-ignore
-            const __VLS_38 = __VLS_asFunctionalComponent(IconCloseCircle, new IconCloseCircle({}));
-            const __VLS_39 = __VLS_38({}, ...__VLS_functionalComponentArgsRest(__VLS_38));
+            const __VLS_36 = __VLS_asFunctionalComponent(IconCloseCircle, new IconCloseCircle({}));
+            const __VLS_37 = __VLS_36({}, ...__VLS_functionalComponentArgsRest(__VLS_36));
         }
         __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
             ...{ class: "grow overflow-hidden" },
         });
         /** @type {[typeof ChatList, ]} */ ;
         // @ts-ignore
-        const __VLS_42 = __VLS_asFunctionalComponent(ChatList, new ChatList({
+        const __VLS_40 = __VLS_asFunctionalComponent(ChatList, new ChatList({
             ...{ 'onSelectReceiver': {} },
             ref: "chatListRef",
             ...{ class: "w-full max-w-[500px] !bg-[#F9FAFC]" },
             responsive: (__VLS_ctx.responsiveRender),
             receiverId: (__VLS_ctx.receiverId),
         }));
-        const __VLS_43 = __VLS_42({
+        const __VLS_41 = __VLS_40({
             ...{ 'onSelectReceiver': {} },
             ref: "chatListRef",
             ...{ class: "w-full max-w-[500px] !bg-[#F9FAFC]" },
             responsive: (__VLS_ctx.responsiveRender),
             receiverId: (__VLS_ctx.receiverId),
-        }, ...__VLS_functionalComponentArgsRest(__VLS_42));
-        let __VLS_45;
-        let __VLS_46;
-        const __VLS_47 = ({ selectReceiver: {} },
+        }, ...__VLS_functionalComponentArgsRest(__VLS_40));
+        let __VLS_43;
+        let __VLS_44;
+        const __VLS_45 = ({ selectReceiver: {} },
             { onSelectReceiver: (__VLS_ctx.selectReceiver) });
         __VLS_asFunctionalDirective(__VLS_directives.vShow)(null, { ...__VLS_directiveBindingRestFields, value: (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CHAT_LIST) }, null, null);
         /** @type {typeof __VLS_ctx.chatListRef} */ ;
-        var __VLS_48 = {};
+        var __VLS_46 = {};
         // @ts-ignore
         [currentPage, PAGE, responsiveRender, receiverId, selectReceiver, chatListRef,];
-        var __VLS_44;
+        var __VLS_42;
         /** @type {[typeof HomeComponent, ]} */ ;
         // @ts-ignore
-        const __VLS_51 = __VLS_asFunctionalComponent(HomeComponent, new HomeComponent({
+        const __VLS_49 = __VLS_asFunctionalComponent(HomeComponent, new HomeComponent({
             ...{ 'onCall': {} },
             ...{ 'onBack': {} },
             ...{ 'onInputFocus': {} },
             ref: "homeComponentRef",
             receiverId: (__VLS_ctx.receiverId),
-            ...{ class: "h-full pt-4" },
+            ...{ class: "h-full" },
+            conversation: (__VLS_ctx.currentConversation),
             responsive: (__VLS_ctx.responsiveRender),
         }));
-        const __VLS_52 = __VLS_51({
+        const __VLS_50 = __VLS_49({
             ...{ 'onCall': {} },
             ...{ 'onBack': {} },
             ...{ 'onInputFocus': {} },
             ref: "homeComponentRef",
             receiverId: (__VLS_ctx.receiverId),
-            ...{ class: "h-full pt-4" },
+            ...{ class: "h-full" },
+            conversation: (__VLS_ctx.currentConversation),
             responsive: (__VLS_ctx.responsiveRender),
-        }, ...__VLS_functionalComponentArgsRest(__VLS_51));
-        let __VLS_54;
-        let __VLS_55;
-        const __VLS_56 = ({ call: {} },
+        }, ...__VLS_functionalComponentArgsRest(__VLS_49));
+        let __VLS_52;
+        let __VLS_53;
+        const __VLS_54 = ({ call: {} },
             { onCall: (__VLS_ctx.handleCall) });
-        const __VLS_57 = ({ back: {} },
+        const __VLS_55 = ({ back: {} },
             { onBack: (...[$event]) => {
                     if (!!(!__VLS_ctx.isRouterReady))
                         return;
@@ -620,113 +553,121 @@ else {
                         return;
                     __VLS_ctx.currentPageConfig.backFunc?.();
                     // @ts-ignore
-                    [responsiveRender, currentPageConfig, receiverId, handleCall,];
+                    [responsiveRender, currentPageConfig, receiverId, currentConversation, handleCall,];
                 } });
-        const __VLS_58 = ({ inputFocus: {} },
+        const __VLS_56 = ({ 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_59 = {};
+        var __VLS_57 = {};
         // @ts-ignore
         [currentPage, PAGE, handleReadMessage, homeComponentRef,];
-        var __VLS_53;
+        var __VLS_51;
         if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_DETAIL) {
             // @ts-ignore
             [currentPage, PAGE,];
             /** @type {[typeof CustomerDetail, ]} */ ;
             // @ts-ignore
-            const __VLS_62 = __VLS_asFunctionalComponent(CustomerDetail, new CustomerDetail({
+            const __VLS_60 = __VLS_asFunctionalComponent(CustomerDetail, new CustomerDetail({
                 ref: "customerDetailRef",
                 receiverId: (__VLS_ctx.receiverId),
                 ...{ class: "w-full h-full" },
                 responsive: (__VLS_ctx.responsiveRender),
             }));
-            const __VLS_63 = __VLS_62({
+            const __VLS_61 = __VLS_60({
                 ref: "customerDetailRef",
                 receiverId: (__VLS_ctx.receiverId),
                 ...{ class: "w-full h-full" },
                 responsive: (__VLS_ctx.responsiveRender),
-            }, ...__VLS_functionalComponentArgsRest(__VLS_62));
+            }, ...__VLS_functionalComponentArgsRest(__VLS_60));
             /** @type {typeof __VLS_ctx.customerDetailRef} */ ;
-            var __VLS_65 = {};
+            var __VLS_63 = {};
             // @ts-ignore
             [responsiveRender, receiverId, customerDetailRef,];
-            var __VLS_64;
+            var __VLS_62;
         }
         if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_CHECK_IN) {
             // @ts-ignore
             [currentPage, PAGE,];
             /** @type {[typeof CustomerCheckIn, ]} */ ;
             // @ts-ignore
-            const __VLS_68 = __VLS_asFunctionalComponent(CustomerCheckIn, new CustomerCheckIn({
+            const __VLS_66 = __VLS_asFunctionalComponent(CustomerCheckIn, new CustomerCheckIn({
                 ...{ class: "w-full h-full" },
             }));
-            const __VLS_69 = __VLS_68({
+            const __VLS_67 = __VLS_66({
                 ...{ class: "w-full h-full" },
-            }, ...__VLS_functionalComponentArgsRest(__VLS_68));
+            }, ...__VLS_functionalComponentArgsRest(__VLS_66));
         }
         if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_APPOINTMENT) {
             // @ts-ignore
             [currentPage, PAGE,];
             /** @type {[typeof CustomerAppointment, ]} */ ;
             // @ts-ignore
-            const __VLS_72 = __VLS_asFunctionalComponent(CustomerAppointment, new CustomerAppointment({
+            const __VLS_70 = __VLS_asFunctionalComponent(CustomerAppointment, new CustomerAppointment({
                 ...{ class: "w-full h-full" },
             }));
-            const __VLS_73 = __VLS_72({
+            const __VLS_71 = __VLS_70({
                 ...{ class: "w-full h-full" },
-            }, ...__VLS_functionalComponentArgsRest(__VLS_72));
-        }
-        if (__VLS_ctx.currentPage != __VLS_ctx.PAGE.HOME) {
-            // @ts-ignore
-            [currentPage, PAGE,];
-            /** @type {[typeof MobileFooter, ]} */ ;
-            // @ts-ignore
-            const __VLS_76 = __VLS_asFunctionalComponent(MobileFooter, new MobileFooter({
-                ...{ class: "shrink-0" },
-            }));
-            const __VLS_77 = __VLS_76({
-                ...{ class: "shrink-0" },
-            }, ...__VLS_functionalComponentArgsRest(__VLS_76));
+            }, ...__VLS_functionalComponentArgsRest(__VLS_70));
         }
     }
     else {
         __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-            ...{ class: "flex gap-4 h-full relative" },
+            ...{ class: "flex h-full w-full relative" },
         });
         /** @type {[typeof ChatList, ]} */ ;
         // @ts-ignore
-        const __VLS_80 = __VLS_asFunctionalComponent(ChatList, new ChatList({
+        const __VLS_74 = __VLS_asFunctionalComponent(ChatList, new ChatList({
             ...{ 'onSelectReceiver': {} },
+            ...{ 'onOpenPhoneNumpad': {} },
             ref: "chatListRef",
-            ...{ class: "w-[38%] max-w-[500px] min-w-[450px]" },
+            ...{ 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),
         }));
-        const __VLS_81 = __VLS_80({
+        const __VLS_75 = __VLS_74({
             ...{ 'onSelectReceiver': {} },
+            ...{ 'onOpenPhoneNumpad': {} },
             ref: "chatListRef",
-            ...{ class: "w-[38%] max-w-[500px] min-w-[450px]" },
+            ...{ 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_80));
-        let __VLS_83;
-        let __VLS_84;
-        const __VLS_85 = ({ selectReceiver: {} },
+        }, ...__VLS_functionalComponentArgsRest(__VLS_74));
+        let __VLS_77;
+        let __VLS_78;
+        const __VLS_79 = ({ selectReceiver: {} },
             { onSelectReceiver: (__VLS_ctx.selectReceiver) });
+        const __VLS_80 = ({ 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;
+                    if (!!(__VLS_ctx.responsiveRender == 'mobile'))
+                        return;
+                    __VLS_ctx.emit('openPhoneNumpad');
+                    // @ts-ignore
+                    [responsiveRender, emit, receiverId, selectReceiver,];
+                } });
         /** @type {typeof __VLS_ctx.chatListRef} */ ;
-        var __VLS_86 = {};
+        var __VLS_81 = {};
         // @ts-ignore
-        [responsiveRender, receiverId, selectReceiver, chatListRef,];
-        var __VLS_82;
+        [chatListRef,];
+        var __VLS_76;
         __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-            ...{ class: "chat-box-white grow flex flex-col h-full pt-6 overflow-hidden" },
+            ...{ 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" },
+                ...{ class: "text-[#141B34] px-6 mt-4" },
             });
             __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
                 ...{ onClick: (...[$event]) => {
@@ -752,8 +693,8 @@ else {
             });
             /** @type {[typeof IconArrowLeft, ]} */ ;
             // @ts-ignore
-            const __VLS_89 = __VLS_asFunctionalComponent(IconArrowLeft, new IconArrowLeft({}));
-            const __VLS_90 = __VLS_89({}, ...__VLS_functionalComponentArgsRest(__VLS_89));
+            const __VLS_84 = __VLS_asFunctionalComponent(IconArrowLeft, new IconArrowLeft({}));
+            const __VLS_85 = __VLS_84({}, ...__VLS_functionalComponentArgsRest(__VLS_84));
             __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
                 ...{ class: "text-xl font-semibold text-chat-haze-900 ml-3" },
             });
@@ -766,122 +707,102 @@ else {
         });
         /** @type {[typeof HomeComponent, ]} */ ;
         // @ts-ignore
-        const __VLS_93 = __VLS_asFunctionalComponent(HomeComponent, new HomeComponent({
+        const __VLS_88 = __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_94 = __VLS_93({
+        const __VLS_89 = __VLS_88({
             ...{ 'onCall': {} },
             ...{ 'onInputFocus': {} },
             ref: "homeComponentRef",
             receiverId: (__VLS_ctx.receiverId),
             ...{ class: "h-full" },
             responsive: (__VLS_ctx.responsiveRender),
-        }, ...__VLS_functionalComponentArgsRest(__VLS_93));
-        let __VLS_96;
-        let __VLS_97;
-        const __VLS_98 = ({ call: {} },
+            conversation: (__VLS_ctx.currentConversation),
+        }, ...__VLS_functionalComponentArgsRest(__VLS_88));
+        let __VLS_91;
+        let __VLS_92;
+        const __VLS_93 = ({ call: {} },
             { onCall: (__VLS_ctx.handleCall) });
-        const __VLS_99 = ({ inputFocus: {} },
+        const __VLS_94 = ({ 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_100 = {};
+        var __VLS_95 = {};
         // @ts-ignore
-        [currentPage, PAGE, responsiveRender, receiverId, receiverId, handleCall, handleReadMessage, homeComponentRef,];
-        var __VLS_95;
+        [currentPage, PAGE, responsiveRender, receiverId, receiverId, currentConversation, handleCall, handleReadMessage, homeComponentRef,];
+        var __VLS_90;
         if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_DETAIL) {
             // @ts-ignore
             [currentPage, PAGE,];
             /** @type {[typeof CustomerDetail, ]} */ ;
             // @ts-ignore
-            const __VLS_103 = __VLS_asFunctionalComponent(CustomerDetail, new CustomerDetail({
+            const __VLS_98 = __VLS_asFunctionalComponent(CustomerDetail, new CustomerDetail({
                 ref: "customerDetailRef",
                 receiverId: (__VLS_ctx.receiverId),
                 ...{ class: "h-full" },
                 responsive: (__VLS_ctx.responsiveRender),
             }));
-            const __VLS_104 = __VLS_103({
+            const __VLS_99 = __VLS_98({
                 ref: "customerDetailRef",
                 receiverId: (__VLS_ctx.receiverId),
                 ...{ class: "h-full" },
                 responsive: (__VLS_ctx.responsiveRender),
-            }, ...__VLS_functionalComponentArgsRest(__VLS_103));
+            }, ...__VLS_functionalComponentArgsRest(__VLS_98));
             /** @type {typeof __VLS_ctx.customerDetailRef} */ ;
-            var __VLS_106 = {};
+            var __VLS_101 = {};
             // @ts-ignore
             [responsiveRender, receiverId, customerDetailRef,];
-            var __VLS_105;
+            var __VLS_100;
         }
         if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_CHECK_IN) {
             // @ts-ignore
             [currentPage, PAGE,];
             /** @type {[typeof CustomerCheckIn, ]} */ ;
             // @ts-ignore
-            const __VLS_109 = __VLS_asFunctionalComponent(CustomerCheckIn, new CustomerCheckIn({
+            const __VLS_104 = __VLS_asFunctionalComponent(CustomerCheckIn, new CustomerCheckIn({
                 ...{ class: "h-full" },
             }));
-            const __VLS_110 = __VLS_109({
+            const __VLS_105 = __VLS_104({
                 ...{ class: "h-full" },
-            }, ...__VLS_functionalComponentArgsRest(__VLS_109));
+            }, ...__VLS_functionalComponentArgsRest(__VLS_104));
         }
         if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_APPOINTMENT) {
             // @ts-ignore
             [currentPage, PAGE,];
             /** @type {[typeof CustomerAppointment, ]} */ ;
             // @ts-ignore
-            const __VLS_113 = __VLS_asFunctionalComponent(CustomerAppointment, new CustomerAppointment({
+            const __VLS_108 = __VLS_asFunctionalComponent(CustomerAppointment, new CustomerAppointment({
                 ...{ class: "h-full" },
             }));
-            const __VLS_114 = __VLS_113({
+            const __VLS_109 = __VLS_108({
                 ...{ class: "h-full" },
-            }, ...__VLS_functionalComponentArgsRest(__VLS_113));
+            }, ...__VLS_functionalComponentArgsRest(__VLS_108));
         }
     }
+    var __VLS_112 = {};
 }
 /** @type {__VLS_StyleScopedClasses['go-chat-main']} */ ;
 /** @type {__VLS_StyleScopedClasses['max-w-full']} */ ;
-/** @type {__VLS_StyleScopedClasses['p-0']} */ ;
-/** @type {__VLS_StyleScopedClasses['overscroll-x-none']} */ ;
-/** @type {__VLS_StyleScopedClasses['md:p-8']} */ ;
 /** @type {__VLS_StyleScopedClasses['m-auto']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex-center']} */ ;
 /** @type {__VLS_StyleScopedClasses['sc-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['mt-10']} */ ;
-/** @type {__VLS_StyleScopedClasses['w-full']} */ ;
+/** @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['overflow-hidden']} */ ;
-/** @type {__VLS_StyleScopedClasses['relative']} */ ;
-/** @type {__VLS_StyleScopedClasses['shrink-0']} */ ;
 /** @type {__VLS_StyleScopedClasses['w-full']} */ ;
-/** @type {__VLS_StyleScopedClasses['bg-chat-error']} */ ;
-/** @type {__VLS_StyleScopedClasses['text-white']} */ ;
-/** @type {__VLS_StyleScopedClasses['text-sm']} */ ;
-/** @type {__VLS_StyleScopedClasses['px-4']} */ ;
-/** @type {__VLS_StyleScopedClasses['py-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['grow']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
-/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
-/** @type {__VLS_StyleScopedClasses['justify-between']} */ ;
-/** @type {__VLS_StyleScopedClasses['gap-2']} */ ;
-/** @type {__VLS_StyleScopedClasses['bg-white']} */ ;
-/** @type {__VLS_StyleScopedClasses['min-h-10']} */ ;
-/** @type {__VLS_StyleScopedClasses['text-chat-haze-600']} */ ;
-/** @type {__VLS_StyleScopedClasses['font-bold']} */ ;
-/** @type {__VLS_StyleScopedClasses['w-[250px]']} */ ;
-/** @type {__VLS_StyleScopedClasses['rounded-lg']} */ ;
-/** @type {__VLS_StyleScopedClasses['bg-white']} */ ;
-/** @type {__VLS_StyleScopedClasses['min-h-10']} */ ;
-/** @type {__VLS_StyleScopedClasses['text-chat-haze-600']} */ ;
-/** @type {__VLS_StyleScopedClasses['font-bold']} */ ;
-/** @type {__VLS_StyleScopedClasses['text-base']} */ ;
-/** @type {__VLS_StyleScopedClasses['w-[200px]']} */ ;
-/** @type {__VLS_StyleScopedClasses['rounded-lg']} */ ;
+/** @type {__VLS_StyleScopedClasses['overflow-hidden']} */ ;
+/** @type {__VLS_StyleScopedClasses['relative']} */ ;
 /** @type {__VLS_StyleScopedClasses['grow']} */ ;
 /** @type {__VLS_StyleScopedClasses['relative']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
@@ -922,30 +843,31 @@ else {
 /** @type {__VLS_StyleScopedClasses['max-w-[500px]']} */ ;
 /** @type {__VLS_StyleScopedClasses['!bg-[#F9FAFC]']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
-/** @type {__VLS_StyleScopedClasses['pt-4']} */ ;
 /** @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['shrink-0']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
-/** @type {__VLS_StyleScopedClasses['gap-4']} */ ;
 /** @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-[450px]']} */ ;
-/** @type {__VLS_StyleScopedClasses['chat-box-white']} */ ;
+/** @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['h-full']} */ ;
-/** @type {__VLS_StyleScopedClasses['pt-6']} */ ;
 /** @type {__VLS_StyleScopedClasses['overflow-hidden']} */ ;
 /** @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']} */ ;
@@ -959,11 +881,12 @@ else {
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
 // @ts-ignore
-var __VLS_32 = __VLS_31, __VLS_49 = __VLS_48, __VLS_60 = __VLS_59, __VLS_66 = __VLS_65, __VLS_87 = __VLS_86, __VLS_101 = __VLS_100, __VLS_107 = __VLS_106;
-const __VLS_export = (await import('vue')).defineComponent({
+var __VLS_30 = __VLS_29, __VLS_47 = __VLS_46, __VLS_58 = __VLS_57, __VLS_64 = __VLS_63, __VLS_82 = __VLS_81, __VLS_96 = __VLS_95, __VLS_102 = __VLS_101, __VLS_113 = __VLS_112;
+const __VLS_base = (await import('vue')).defineComponent({
     setup: () => (__VLS_exposed),
     __typeEmits: {},
     __typeProps: {},
     props: {},
 });
+const __VLS_export = {};
 export default {};