@phonghq/go-chat 1.0.34 → 1.0.36

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

@@ -21,6 +21,7 @@ import { publicTopicConversationUpdate } from '../utils/chat/conversation';
 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';
 const routerConfig = [
     { id: PAGE.HOME, backFunc: null, backTitle: '' },
     {
@@ -121,6 +122,8 @@ 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) {
@@ -185,6 +188,38 @@ const openSettings = () => {
 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);
+    }
+    handleMedialPermissionError();
+};
+const reload = () => {
+    window.location.reload();
+};
 let __VLS_exposed;
 defineExpose({
     get unreadCount() {
@@ -263,23 +298,73 @@ else if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.REGISTER_SUCCESS) {
     const __VLS_12 = __VLS_asFunctionalComponent(SettingSuccess, new SettingSuccess({}));
     const __VLS_13 = __VLS_12({}, ...__VLS_functionalComponentArgsRest(__VLS_12));
 }
-else if (__VLS_ctx.responsiveRender == 'mobile') {
-    // @ts-ignore
-    [responsiveRender,];
+else {
     __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-        ...{ class: "relative flex flex-col mx-auto w-full h-full bg-[#F9FAFC] overflow-hidden chat-mobile pt-4" },
+        ...{ class: "w-full h-full  flex flex-col overflow-hidden relative" },
     });
+    if (__VLS_ctx.goChatError) {
+        // @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);
+        // @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.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" },
+            });
+        }
+    }
     /** @type {[typeof Calling, ]} */ ;
     // @ts-ignore
     const __VLS_16 = __VLS_asFunctionalComponent(Calling, new Calling({
         ...{ 'onUserCalling': {} },
         ...{ 'onEndCall': {} },
+        ...{ 'onError:mediaPermissionFail': {} },
         ref: "callingRef",
         responsive: (__VLS_ctx.responsiveRender),
     }));
     const __VLS_17 = __VLS_16({
         ...{ 'onUserCalling': {} },
         ...{ 'onEndCall': {} },
+        ...{ 'onError:mediaPermissionFail': {} },
         ref: "callingRef",
         responsive: (__VLS_ctx.responsiveRender),
     }, ...__VLS_functionalComponentArgsRest(__VLS_16));
@@ -295,59 +380,34 @@ else if (__VLS_ctx.responsiveRender == 'mobile') {
                     return;
                 if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.REGISTER_SUCCESS))
                     return;
-                if (!(__VLS_ctx.responsiveRender == 'mobile'))
-                    return;
                 __VLS_ctx.emit('userCalling', $event);
                 // @ts-ignore
                 [responsiveRender, emit,];
             } });
     const __VLS_22 = ({ endCall: {} },
         { onEndCall: (__VLS_ctx.handleEndCall) });
+    const __VLS_23 = ({ 'error:mediaPermissionFail': {} },
+        { 'onError:mediaPermissionFail': (__VLS_ctx.handleMedialPermissionError) });
     /** @type {typeof __VLS_ctx.callingRef} */ ;
-    var __VLS_23 = {};
+    var __VLS_24 = {};
     // @ts-ignore
-    [handleEndCall, callingRef,];
+    [handleEndCall, handleMedialPermissionError, callingRef,];
     var __VLS_18;
-    if (__VLS_ctx.currentPageConfig?.backFunc && !__VLS_ctx.currentPageConfig.isHidden) {
+    if (__VLS_ctx.responsiveRender == 'mobile') {
         // @ts-ignore
-        [currentPageConfig, currentPageConfig,];
+        [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] px-6 shrink-0" },
         });
         __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
             ...{ class: "flex items-center justify-between" },
         });
-        __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.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_26 = __VLS_asFunctionalComponent(IconArrowLeft, new IconArrowLeft({}));
-        const __VLS_27 = __VLS_26({}, ...__VLS_functionalComponentArgsRest(__VLS_26));
-        __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,];
-        if (props.isLib) {
+        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))
@@ -360,7 +420,37 @@ else if (__VLS_ctx.responsiveRender == 'mobile') {
                             return;
                         if (!(__VLS_ctx.responsiveRender == 'mobile'))
                             return;
-                        if (!(__VLS_ctx.currentPageConfig?.backFunc && !__VLS_ctx.currentPageConfig.isHidden))
+                        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_27 = __VLS_asFunctionalComponent(IconArrowLeft, new IconArrowLeft({}));
+            const __VLS_28 = __VLS_27({}, ...__VLS_functionalComponentArgsRest(__VLS_27));
+            __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,];
+        }
+        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.responsiveRender == 'mobile'))
                             return;
                         if (!(props.isLib))
                             return;
@@ -372,187 +462,64 @@ else if (__VLS_ctx.responsiveRender == 'mobile') {
             });
             /** @type {[typeof IconCloseCircle, ]} */ ;
             // @ts-ignore
-            const __VLS_30 = __VLS_asFunctionalComponent(IconCloseCircle, new IconCloseCircle({}));
-            const __VLS_31 = __VLS_30({}, ...__VLS_functionalComponentArgsRest(__VLS_30));
+            const __VLS_31 = __VLS_asFunctionalComponent(IconCloseCircle, new IconCloseCircle({}));
+            const __VLS_32 = __VLS_31({}, ...__VLS_functionalComponentArgsRest(__VLS_31));
         }
-    }
-    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-        ...{ class: "grow overflow-hidden" },
-    });
-    /** @type {[typeof ChatList, ]} */ ;
-    // @ts-ignore
-    const __VLS_34 = __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_35 = __VLS_34({
-        ...{ 'onSelectReceiver': {} },
-        ref: "chatListRef",
-        ...{ class: "w-full max-w-[500px] !bg-[#F9FAFC]" },
-        responsive: (__VLS_ctx.responsiveRender),
-        receiverId: (__VLS_ctx.receiverId),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_34));
-    let __VLS_37;
-    let __VLS_38;
-    const __VLS_39 = ({ 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_40 = {};
-    // @ts-ignore
-    [currentPage, PAGE, responsiveRender, receiverId, selectReceiver, chatListRef,];
-    var __VLS_36;
-    /** @type {[typeof HomeComponent, ]} */ ;
-    // @ts-ignore
-    const __VLS_43 = __VLS_asFunctionalComponent(HomeComponent, new HomeComponent({
-        ...{ 'onCall': {} },
-        ...{ 'onBack': {} },
-        ...{ 'onInputFocus': {} },
-        ref: "homeComponentRef",
-        receiverId: (__VLS_ctx.receiverId),
-        ...{ class: "h-full pt-4" },
-        responsive: (__VLS_ctx.responsiveRender),
-    }));
-    const __VLS_44 = __VLS_43({
-        ...{ 'onCall': {} },
-        ...{ 'onBack': {} },
-        ...{ 'onInputFocus': {} },
-        ref: "homeComponentRef",
-        receiverId: (__VLS_ctx.receiverId),
-        ...{ class: "h-full pt-4" },
-        responsive: (__VLS_ctx.responsiveRender),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_43));
-    let __VLS_46;
-    let __VLS_47;
-    const __VLS_48 = ({ call: {} },
-        { onCall: (__VLS_ctx.handleCall) });
-    const __VLS_49 = ({ 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.responsiveRender == 'mobile'))
-                    return;
-                __VLS_ctx.currentPageConfig.backFunc?.();
-                // @ts-ignore
-                [responsiveRender, currentPageConfig, receiverId, handleCall,];
-            } });
-    const __VLS_50 = ({ 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_51 = {};
-    // @ts-ignore
-    [currentPage, PAGE, handleReadMessage, homeComponentRef,];
-    var __VLS_45;
-    if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_DETAIL) {
-        // @ts-ignore
-        [currentPage, PAGE,];
-        /** @type {[typeof CustomerDetail, ]} */ ;
+        __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+            ...{ class: "grow overflow-hidden" },
+        });
+        /** @type {[typeof ChatList, ]} */ ;
         // @ts-ignore
-        const __VLS_54 = __VLS_asFunctionalComponent(CustomerDetail, new CustomerDetail({
-            ref: "customerDetailRef",
-            receiverId: (__VLS_ctx.receiverId),
-            ...{ class: "w-full h-full" },
+        const __VLS_35 = __VLS_asFunctionalComponent(ChatList, new ChatList({
+            ...{ 'onSelectReceiver': {} },
+            ref: "chatListRef",
+            ...{ class: "w-full max-w-[500px] !bg-[#F9FAFC]" },
             responsive: (__VLS_ctx.responsiveRender),
-        }));
-        const __VLS_55 = __VLS_54({
-            ref: "customerDetailRef",
             receiverId: (__VLS_ctx.receiverId),
-            ...{ class: "w-full h-full" },
-            responsive: (__VLS_ctx.responsiveRender),
-        }, ...__VLS_functionalComponentArgsRest(__VLS_54));
-        /** @type {typeof __VLS_ctx.customerDetailRef} */ ;
-        var __VLS_57 = {};
-        // @ts-ignore
-        [responsiveRender, receiverId, customerDetailRef,];
-        var __VLS_56;
-    }
-    if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_CHECK_IN) {
-        // @ts-ignore
-        [currentPage, PAGE,];
-        /** @type {[typeof CustomerCheckIn, ]} */ ;
-        // @ts-ignore
-        const __VLS_60 = __VLS_asFunctionalComponent(CustomerCheckIn, new CustomerCheckIn({
-            ...{ class: "w-full h-full" },
-        }));
-        const __VLS_61 = __VLS_60({
-            ...{ class: "w-full h-full" },
-        }, ...__VLS_functionalComponentArgsRest(__VLS_60));
-    }
-    if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_APPOINTMENT) {
-        // @ts-ignore
-        [currentPage, PAGE,];
-        /** @type {[typeof CustomerAppointment, ]} */ ;
-        // @ts-ignore
-        const __VLS_64 = __VLS_asFunctionalComponent(CustomerAppointment, new CustomerAppointment({
-            ...{ class: "w-full h-full" },
         }));
-        const __VLS_65 = __VLS_64({
-            ...{ class: "w-full h-full" },
-        }, ...__VLS_functionalComponentArgsRest(__VLS_64));
-    }
-    if (__VLS_ctx.currentPage != __VLS_ctx.PAGE.HOME) {
+        const __VLS_36 = __VLS_35({
+            ...{ 'onSelectReceiver': {} },
+            ref: "chatListRef",
+            ...{ class: "w-full max-w-[500px] !bg-[#F9FAFC]" },
+            responsive: (__VLS_ctx.responsiveRender),
+            receiverId: (__VLS_ctx.receiverId),
+        }, ...__VLS_functionalComponentArgsRest(__VLS_35));
+        let __VLS_38;
+        let __VLS_39;
+        const __VLS_40 = ({ 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_41 = {};
         // @ts-ignore
-        [currentPage, PAGE,];
-        /** @type {[typeof MobileFooter, ]} */ ;
+        [currentPage, PAGE, responsiveRender, receiverId, selectReceiver, chatListRef,];
+        var __VLS_37;
+        /** @type {[typeof HomeComponent, ]} */ ;
         // @ts-ignore
-        const __VLS_68 = __VLS_asFunctionalComponent(MobileFooter, new MobileFooter({
-            ...{ class: "shrink-0" },
+        const __VLS_44 = __VLS_asFunctionalComponent(HomeComponent, new HomeComponent({
+            ...{ 'onCall': {} },
+            ...{ 'onBack': {} },
+            ...{ 'onInputFocus': {} },
+            ref: "homeComponentRef",
+            receiverId: (__VLS_ctx.receiverId),
+            ...{ class: "h-full pt-4" },
+            responsive: (__VLS_ctx.responsiveRender),
         }));
-        const __VLS_69 = __VLS_68({
-            ...{ class: "shrink-0" },
-        }, ...__VLS_functionalComponentArgsRest(__VLS_68));
-    }
-}
-else {
-    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-        ...{ class: "flex gap-4 h-full relative" },
-    });
-    /** @type {[typeof ChatList, ]} */ ;
-    // @ts-ignore
-    const __VLS_72 = __VLS_asFunctionalComponent(ChatList, new ChatList({
-        ...{ 'onSelectReceiver': {} },
-        ref: "chatListRef",
-        ...{ class: "w-[38%] max-w-[500px] min-w-[450px]" },
-        responsive: (__VLS_ctx.responsiveRender),
-        receiverId: (__VLS_ctx.receiverId),
-    }));
-    const __VLS_73 = __VLS_72({
-        ...{ 'onSelectReceiver': {} },
-        ref: "chatListRef",
-        ...{ class: "w-[38%] max-w-[500px] min-w-[450px]" },
-        responsive: (__VLS_ctx.responsiveRender),
-        receiverId: (__VLS_ctx.receiverId),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_72));
-    let __VLS_75;
-    let __VLS_76;
-    const __VLS_77 = ({ selectReceiver: {} },
-        { onSelectReceiver: (__VLS_ctx.selectReceiver) });
-    /** @type {typeof __VLS_ctx.chatListRef} */ ;
-    var __VLS_78 = {};
-    // @ts-ignore
-    [responsiveRender, receiverId, selectReceiver, chatListRef,];
-    var __VLS_74;
-    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-        ...{ class: "chat-box-white grow flex flex-col h-full pt-6 overflow-hidden" },
-    });
-    if (__VLS_ctx.currentPageConfig?.backFunc) {
-        // @ts-ignore
-        [currentPageConfig,];
-        __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-            ...{ class: "text-[#141B34] px-6" },
-        });
-        __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
-            ...{ onClick: (...[$event]) => {
+        const __VLS_45 = __VLS_44({
+            ...{ 'onCall': {} },
+            ...{ 'onBack': {} },
+            ...{ 'onInputFocus': {} },
+            ref: "homeComponentRef",
+            receiverId: (__VLS_ctx.receiverId),
+            ...{ class: "h-full pt-4" },
+            responsive: (__VLS_ctx.responsiveRender),
+        }, ...__VLS_functionalComponentArgsRest(__VLS_44));
+        let __VLS_47;
+        let __VLS_48;
+        const __VLS_49 = ({ call: {} },
+            { onCall: (__VLS_ctx.handleCall) });
+        const __VLS_50 = ({ back: {} },
+            { onBack: (...[$event]) => {
                     if (!!(!__VLS_ctx.isRouterReady))
                         return;
                     if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.TENANT_ERROR))
@@ -561,146 +528,230 @@ else {
                         return;
                     if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.REGISTER_SUCCESS))
                         return;
-                    if (!!(__VLS_ctx.responsiveRender == 'mobile'))
-                        return;
-                    if (!(__VLS_ctx.currentPageConfig?.backFunc))
+                    if (!(__VLS_ctx.responsiveRender == 'mobile'))
                         return;
-                    __VLS_ctx.currentPageConfig.backFunc();
+                    __VLS_ctx.currentPageConfig.backFunc?.();
                     // @ts-ignore
-                    [currentPageConfig,];
-                } },
-            ...{ class: "flex items-center" },
-        });
-        /** @type {[typeof IconArrowLeft, ]} */ ;
+                    [responsiveRender, currentPageConfig, receiverId, handleCall,];
+                } });
+        const __VLS_51 = ({ 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_52 = {};
         // @ts-ignore
-        const __VLS_81 = __VLS_asFunctionalComponent(IconArrowLeft, new IconArrowLeft({}));
-        const __VLS_82 = __VLS_81({}, ...__VLS_functionalComponentArgsRest(__VLS_81));
-        __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
-            ...{ class: "text-xl font-semibold text-chat-haze-900 ml-3" },
+        [currentPage, PAGE, handleReadMessage, homeComponentRef,];
+        var __VLS_46;
+        if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_DETAIL) {
+            // @ts-ignore
+            [currentPage, PAGE,];
+            /** @type {[typeof CustomerDetail, ]} */ ;
+            // @ts-ignore
+            const __VLS_55 = __VLS_asFunctionalComponent(CustomerDetail, new CustomerDetail({
+                ref: "customerDetailRef",
+                receiverId: (__VLS_ctx.receiverId),
+                ...{ class: "w-full h-full" },
+                responsive: (__VLS_ctx.responsiveRender),
+            }));
+            const __VLS_56 = __VLS_55({
+                ref: "customerDetailRef",
+                receiverId: (__VLS_ctx.receiverId),
+                ...{ class: "w-full h-full" },
+                responsive: (__VLS_ctx.responsiveRender),
+            }, ...__VLS_functionalComponentArgsRest(__VLS_55));
+            /** @type {typeof __VLS_ctx.customerDetailRef} */ ;
+            var __VLS_58 = {};
+            // @ts-ignore
+            [responsiveRender, receiverId, customerDetailRef,];
+            var __VLS_57;
+        }
+        if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_CHECK_IN) {
+            // @ts-ignore
+            [currentPage, PAGE,];
+            /** @type {[typeof CustomerCheckIn, ]} */ ;
+            // @ts-ignore
+            const __VLS_61 = __VLS_asFunctionalComponent(CustomerCheckIn, new CustomerCheckIn({
+                ...{ class: "w-full h-full" },
+            }));
+            const __VLS_62 = __VLS_61({
+                ...{ class: "w-full h-full" },
+            }, ...__VLS_functionalComponentArgsRest(__VLS_61));
+        }
+        if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_APPOINTMENT) {
+            // @ts-ignore
+            [currentPage, PAGE,];
+            /** @type {[typeof CustomerAppointment, ]} */ ;
+            // @ts-ignore
+            const __VLS_65 = __VLS_asFunctionalComponent(CustomerAppointment, new CustomerAppointment({
+                ...{ class: "w-full h-full" },
+            }));
+            const __VLS_66 = __VLS_65({
+                ...{ class: "w-full h-full" },
+            }, ...__VLS_functionalComponentArgsRest(__VLS_65));
+        }
+        if (__VLS_ctx.currentPage != __VLS_ctx.PAGE.HOME) {
+            // @ts-ignore
+            [currentPage, PAGE,];
+            /** @type {[typeof MobileFooter, ]} */ ;
+            // @ts-ignore
+            const __VLS_69 = __VLS_asFunctionalComponent(MobileFooter, new MobileFooter({
+                ...{ class: "shrink-0" },
+            }));
+            const __VLS_70 = __VLS_69({
+                ...{ class: "shrink-0" },
+            }, ...__VLS_functionalComponentArgsRest(__VLS_69));
+        }
+    }
+    else {
+        __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+            ...{ class: "flex gap-4 h-full relative" },
         });
-        (__VLS_ctx.currentPageConfig.backTitle ?? '');
+        /** @type {[typeof ChatList, ]} */ ;
         // @ts-ignore
-        [currentPageConfig,];
-    }
-    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-        ...{ class: "grow overflow-hidden" },
-    });
-    /** @type {[typeof HomeComponent, ]} */ ;
-    // @ts-ignore
-    const __VLS_85 = __VLS_asFunctionalComponent(HomeComponent, new HomeComponent({
-        ...{ 'onCall': {} },
-        ...{ 'onInputFocus': {} },
-        ref: "homeComponentRef",
-        receiverId: (__VLS_ctx.receiverId),
-        ...{ class: "h-full" },
-        responsive: (__VLS_ctx.responsiveRender),
-    }));
-    const __VLS_86 = __VLS_85({
-        ...{ 'onCall': {} },
-        ...{ 'onInputFocus': {} },
-        ref: "homeComponentRef",
-        receiverId: (__VLS_ctx.receiverId),
-        ...{ class: "h-full" },
-        responsive: (__VLS_ctx.responsiveRender),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_85));
-    let __VLS_88;
-    let __VLS_89;
-    const __VLS_90 = ({ call: {} },
-        { onCall: (__VLS_ctx.handleCall) });
-    const __VLS_91 = ({ 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_92 = {};
-    // @ts-ignore
-    [currentPage, PAGE, responsiveRender, receiverId, receiverId, handleCall, handleReadMessage, homeComponentRef,];
-    var __VLS_87;
-    if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_DETAIL) {
+        const __VLS_73 = __VLS_asFunctionalComponent(ChatList, new ChatList({
+            ...{ 'onSelectReceiver': {} },
+            ref: "chatListRef",
+            ...{ class: "w-[38%] max-w-[500px] min-w-[450px]" },
+            responsive: (__VLS_ctx.responsiveRender),
+            receiverId: (__VLS_ctx.receiverId),
+        }));
+        const __VLS_74 = __VLS_73({
+            ...{ 'onSelectReceiver': {} },
+            ref: "chatListRef",
+            ...{ class: "w-[38%] max-w-[500px] min-w-[450px]" },
+            responsive: (__VLS_ctx.responsiveRender),
+            receiverId: (__VLS_ctx.receiverId),
+        }, ...__VLS_functionalComponentArgsRest(__VLS_73));
+        let __VLS_76;
+        let __VLS_77;
+        const __VLS_78 = ({ selectReceiver: {} },
+            { onSelectReceiver: (__VLS_ctx.selectReceiver) });
+        /** @type {typeof __VLS_ctx.chatListRef} */ ;
+        var __VLS_79 = {};
         // @ts-ignore
-        [currentPage, PAGE,];
-        /** @type {[typeof CustomerDetail, ]} */ ;
+        [responsiveRender, receiverId, selectReceiver, chatListRef,];
+        var __VLS_75;
+        __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+            ...{ class: "chat-box-white grow flex flex-col h-full pt-6 overflow-hidden" },
+        });
+        if (__VLS_ctx.currentPageConfig?.backFunc) {
+            // @ts-ignore
+            [currentPageConfig,];
+            __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+                ...{ class: "text-[#141B34] px-6" },
+            });
+            __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.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_82 = __VLS_asFunctionalComponent(IconArrowLeft, new IconArrowLeft({}));
+            const __VLS_83 = __VLS_82({}, ...__VLS_functionalComponentArgsRest(__VLS_82));
+            __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_95 = __VLS_asFunctionalComponent(CustomerDetail, new CustomerDetail({
-            ref: "customerDetailRef",
+        const __VLS_86 = __VLS_asFunctionalComponent(HomeComponent, new HomeComponent({
+            ...{ 'onCall': {} },
+            ...{ 'onInputFocus': {} },
+            ref: "homeComponentRef",
             receiverId: (__VLS_ctx.receiverId),
             ...{ class: "h-full" },
             responsive: (__VLS_ctx.responsiveRender),
         }));
-        const __VLS_96 = __VLS_95({
-            ref: "customerDetailRef",
+        const __VLS_87 = __VLS_86({
+            ...{ 'onCall': {} },
+            ...{ 'onInputFocus': {} },
+            ref: "homeComponentRef",
             receiverId: (__VLS_ctx.receiverId),
             ...{ class: "h-full" },
             responsive: (__VLS_ctx.responsiveRender),
-        }, ...__VLS_functionalComponentArgsRest(__VLS_95));
-        /** @type {typeof __VLS_ctx.customerDetailRef} */ ;
-        var __VLS_98 = {};
-        // @ts-ignore
-        [responsiveRender, receiverId, customerDetailRef,];
-        var __VLS_97;
-    }
-    if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_CHECK_IN) {
+        }, ...__VLS_functionalComponentArgsRest(__VLS_86));
+        let __VLS_89;
+        let __VLS_90;
+        const __VLS_91 = ({ call: {} },
+            { onCall: (__VLS_ctx.handleCall) });
+        const __VLS_92 = ({ 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_93 = {};
         // @ts-ignore
-        [currentPage, PAGE,];
-        /** @type {[typeof CustomerCheckIn, ]} */ ;
-        // @ts-ignore
-        const __VLS_101 = __VLS_asFunctionalComponent(CustomerCheckIn, new CustomerCheckIn({
-            ...{ class: "h-full" },
-        }));
-        const __VLS_102 = __VLS_101({
-            ...{ class: "h-full" },
-        }, ...__VLS_functionalComponentArgsRest(__VLS_101));
-    }
-    if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_APPOINTMENT) {
-        // @ts-ignore
-        [currentPage, PAGE,];
-        /** @type {[typeof CustomerAppointment, ]} */ ;
-        // @ts-ignore
-        const __VLS_105 = __VLS_asFunctionalComponent(CustomerAppointment, new CustomerAppointment({
-            ...{ class: "h-full" },
-        }));
-        const __VLS_106 = __VLS_105({
-            ...{ class: "h-full" },
-        }, ...__VLS_functionalComponentArgsRest(__VLS_105));
+        [currentPage, PAGE, responsiveRender, receiverId, receiverId, handleCall, handleReadMessage, homeComponentRef,];
+        var __VLS_88;
+        if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_DETAIL) {
+            // @ts-ignore
+            [currentPage, PAGE,];
+            /** @type {[typeof CustomerDetail, ]} */ ;
+            // @ts-ignore
+            const __VLS_96 = __VLS_asFunctionalComponent(CustomerDetail, new CustomerDetail({
+                ref: "customerDetailRef",
+                receiverId: (__VLS_ctx.receiverId),
+                ...{ class: "h-full" },
+                responsive: (__VLS_ctx.responsiveRender),
+            }));
+            const __VLS_97 = __VLS_96({
+                ref: "customerDetailRef",
+                receiverId: (__VLS_ctx.receiverId),
+                ...{ class: "h-full" },
+                responsive: (__VLS_ctx.responsiveRender),
+            }, ...__VLS_functionalComponentArgsRest(__VLS_96));
+            /** @type {typeof __VLS_ctx.customerDetailRef} */ ;
+            var __VLS_99 = {};
+            // @ts-ignore
+            [responsiveRender, receiverId, customerDetailRef,];
+            var __VLS_98;
+        }
+        if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_CHECK_IN) {
+            // @ts-ignore
+            [currentPage, PAGE,];
+            /** @type {[typeof CustomerCheckIn, ]} */ ;
+            // @ts-ignore
+            const __VLS_102 = __VLS_asFunctionalComponent(CustomerCheckIn, new CustomerCheckIn({
+                ...{ class: "h-full" },
+            }));
+            const __VLS_103 = __VLS_102({
+                ...{ class: "h-full" },
+            }, ...__VLS_functionalComponentArgsRest(__VLS_102));
+        }
+        if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_APPOINTMENT) {
+            // @ts-ignore
+            [currentPage, PAGE,];
+            /** @type {[typeof CustomerAppointment, ]} */ ;
+            // @ts-ignore
+            const __VLS_106 = __VLS_asFunctionalComponent(CustomerAppointment, new CustomerAppointment({
+                ...{ class: "h-full" },
+            }));
+            const __VLS_107 = __VLS_106({
+                ...{ class: "h-full" },
+            }, ...__VLS_functionalComponentArgsRest(__VLS_106));
+        }
     }
-    /** @type {[typeof Calling, ]} */ ;
-    // @ts-ignore
-    const __VLS_109 = __VLS_asFunctionalComponent(Calling, new Calling({
-        ...{ 'onUserCalling': {} },
-        ...{ 'onEndCall': {} },
-        ref: "callingRef",
-        responsive: (__VLS_ctx.responsiveRender),
-    }));
-    const __VLS_110 = __VLS_109({
-        ...{ 'onUserCalling': {} },
-        ...{ 'onEndCall': {} },
-        ref: "callingRef",
-        responsive: (__VLS_ctx.responsiveRender),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_109));
-    let __VLS_112;
-    let __VLS_113;
-    const __VLS_114 = ({ 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.responsiveRender == 'mobile'))
-                    return;
-                __VLS_ctx.emit('userCalling', $event);
-                // @ts-ignore
-                [responsiveRender, emit,];
-            } });
-    const __VLS_115 = ({ endCall: {} },
-        { onEndCall: (__VLS_ctx.handleEndCall) });
-    /** @type {typeof __VLS_ctx.callingRef} */ ;
-    var __VLS_116 = {};
-    // @ts-ignore
-    [handleEndCall, callingRef,];
-    var __VLS_111;
 }
 /** @type {__VLS_StyleScopedClasses['go-chat-main']} */ ;
 /** @type {__VLS_StyleScopedClasses['max-w-full']} */ ;
@@ -710,6 +761,37 @@ else {
 /** @type {__VLS_StyleScopedClasses['m-auto']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex-center']} */ ;
 /** @type {__VLS_StyleScopedClasses['sc-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-full']} */ ;
+/** @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['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['grow']} */ ;
 /** @type {__VLS_StyleScopedClasses['relative']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
@@ -777,7 +859,7 @@ else {
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
 // @ts-ignore
-var __VLS_24 = __VLS_23, __VLS_41 = __VLS_40, __VLS_52 = __VLS_51, __VLS_58 = __VLS_57, __VLS_79 = __VLS_78, __VLS_93 = __VLS_92, __VLS_99 = __VLS_98, __VLS_117 = __VLS_116;
+var __VLS_25 = __VLS_24, __VLS_42 = __VLS_41, __VLS_53 = __VLS_52, __VLS_59 = __VLS_58, __VLS_80 = __VLS_79, __VLS_94 = __VLS_93, __VLS_100 = __VLS_99;
 const __VLS_export = (await import('vue')).defineComponent({
     setup: () => (__VLS_exposed),
     __typeEmits: {},