@phonghq/go-chat 1.0.33 → 1.0.35

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

@@ -18,6 +18,7 @@ import '../style/index.scss';
 import { useDebounce } from '../utils/debounce';
 import { defineRootColor } from '../constant/color';
 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';
 const routerConfig = [
@@ -120,6 +121,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) {
@@ -184,6 +187,34 @@ 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') {
+                mediaPermissionError.value =
+                    'Microphone access is needed. Please allow microphone permission to continue.';
+            }
+            else if (result.state == 'denied') {
+                mediaPermissionError.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);
+    }
+};
 let __VLS_exposed;
 defineExpose({
     get unreadCount() {
@@ -262,23 +293,44 @@ 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 overflow-hidden relative" },
     });
+    if (__VLS_ctx.mediaPermissionError) {
+        // @ts-ignore
+        [mediaPermissionError,];
+        __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+            ...{ class: "w-full bg-chat-error text-white text-sm px-4 py-2 flex items-center gap-2" },
+        });
+        __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({});
+        (__VLS_ctx.mediaPermissionError);
+        // @ts-ignore
+        [mediaPermissionError,];
+        if (__VLS_ctx.mediaPermissionState == 'prompt') {
+            // @ts-ignore
+            [mediaPermissionState,];
+            __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
+                ...{ onClick: (__VLS_ctx.askMedialPermission) },
+                ...{ class: "bg-white text-chat-haze-600 font-bold w-[250px] rounded-lg" },
+            });
+            // @ts-ignore
+            [askMedialPermission,];
+        }
+    }
     /** @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));
@@ -294,233 +346,148 @@ 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: "text-[#141B34] px-6 shrink-0" },
-        });
-        __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" },
+            ...{ class: "relative flex flex-col mx-auto w-full h-full bg-[#F9FAFC] overflow-hidden chat-mobile pt-4" },
         });
-        /** @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" },
+        if (__VLS_ctx.currentPageConfig?.backFunc && !__VLS_ctx.currentPageConfig.isHidden) {
+            // @ts-ignore
+            [currentPageConfig, currentPageConfig,];
+            __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_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 (!(__VLS_ctx.currentPageConfig?.backFunc && !__VLS_ctx.currentPageConfig.isHidden))
+                                return;
+                            if (!(props.isLib))
+                                return;
+                            __VLS_ctx.emit('close');
+                            // @ts-ignore
+                            [emit,];
+                        } },
+                    ...{ class: "w-10 h-10" },
+                });
+                /** @type {[typeof IconCloseCircle, ]} */ ;
+                // @ts-ignore
+                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" },
         });
-        (__VLS_ctx.currentPageConfig.backTitle ?? '');
+        /** @type {[typeof ChatList, ]} */ ;
         // @ts-ignore
-        [currentPageConfig,];
-    }
-    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-        ...{ class: "grow overflow-hidden" },
-    });
-    /** @type {[typeof ChatList, ]} */ ;
-    // @ts-ignore
-    const __VLS_30 = __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_31 = __VLS_30({
-        ...{ 'onSelectReceiver': {} },
-        ref: "chatListRef",
-        ...{ class: "w-full max-w-[500px] !bg-[#F9FAFC]" },
-        responsive: (__VLS_ctx.responsiveRender),
-        receiverId: (__VLS_ctx.receiverId),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_30));
-    let __VLS_33;
-    let __VLS_34;
-    const __VLS_35 = ({ 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_36 = {};
-    // @ts-ignore
-    [currentPage, PAGE, responsiveRender, receiverId, selectReceiver, chatListRef,];
-    var __VLS_32;
-    /** @type {[typeof HomeComponent, ]} */ ;
-    // @ts-ignore
-    const __VLS_39 = __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_40 = __VLS_39({
-        ...{ 'onCall': {} },
-        ...{ 'onBack': {} },
-        ...{ 'onInputFocus': {} },
-        ref: "homeComponentRef",
-        receiverId: (__VLS_ctx.receiverId),
-        ...{ class: "h-full pt-4" },
-        responsive: (__VLS_ctx.responsiveRender),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_39));
-    let __VLS_42;
-    let __VLS_43;
-    const __VLS_44 = ({ call: {} },
-        { onCall: (__VLS_ctx.handleCall) });
-    const __VLS_45 = ({ 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_46 = ({ 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_47 = {};
-    // @ts-ignore
-    [currentPage, PAGE, handleReadMessage, homeComponentRef,];
-    var __VLS_41;
-    if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_DETAIL) {
+        const __VLS_35 = __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_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 CustomerDetail, ]} */ ;
+        [currentPage, PAGE, responsiveRender, receiverId, selectReceiver, chatListRef,];
+        var __VLS_37;
+        /** @type {[typeof HomeComponent, ]} */ ;
         // @ts-ignore
-        const __VLS_50 = __VLS_asFunctionalComponent(CustomerDetail, new CustomerDetail({
-            ref: "customerDetailRef",
+        const __VLS_44 = __VLS_asFunctionalComponent(HomeComponent, new HomeComponent({
+            ...{ 'onCall': {} },
+            ...{ 'onBack': {} },
+            ...{ 'onInputFocus': {} },
+            ref: "homeComponentRef",
             receiverId: (__VLS_ctx.receiverId),
-            ...{ class: "w-full h-full" },
+            ...{ class: "h-full pt-4" },
             responsive: (__VLS_ctx.responsiveRender),
         }));
-        const __VLS_51 = __VLS_50({
-            ref: "customerDetailRef",
+        const __VLS_45 = __VLS_44({
+            ...{ 'onCall': {} },
+            ...{ 'onBack': {} },
+            ...{ 'onInputFocus': {} },
+            ref: "homeComponentRef",
             receiverId: (__VLS_ctx.receiverId),
-            ...{ class: "w-full h-full" },
+            ...{ class: "h-full pt-4" },
             responsive: (__VLS_ctx.responsiveRender),
-        }, ...__VLS_functionalComponentArgsRest(__VLS_50));
-        /** @type {typeof __VLS_ctx.customerDetailRef} */ ;
-        var __VLS_53 = {};
-        // @ts-ignore
-        [responsiveRender, receiverId, customerDetailRef,];
-        var __VLS_52;
-    }
-    if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_CHECK_IN) {
-        // @ts-ignore
-        [currentPage, PAGE,];
-        /** @type {[typeof CustomerCheckIn, ]} */ ;
-        // @ts-ignore
-        const __VLS_56 = __VLS_asFunctionalComponent(CustomerCheckIn, new CustomerCheckIn({
-            ...{ class: "w-full h-full" },
-        }));
-        const __VLS_57 = __VLS_56({
-            ...{ class: "w-full h-full" },
-        }, ...__VLS_functionalComponentArgsRest(__VLS_56));
-    }
-    if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_APPOINTMENT) {
-        // @ts-ignore
-        [currentPage, PAGE,];
-        /** @type {[typeof CustomerAppointment, ]} */ ;
-        // @ts-ignore
-        const __VLS_60 = __VLS_asFunctionalComponent(CustomerAppointment, new CustomerAppointment({
-            ...{ 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.HOME) {
-        // @ts-ignore
-        [currentPage, PAGE,];
-        /** @type {[typeof MobileFooter, ]} */ ;
-        // @ts-ignore
-        const __VLS_64 = __VLS_asFunctionalComponent(MobileFooter, new MobileFooter({
-            ...{ class: "shrink-0" },
-        }));
-        const __VLS_65 = __VLS_64({
-            ...{ class: "shrink-0" },
-        }, ...__VLS_functionalComponentArgsRest(__VLS_64));
-    }
-}
-else {
-    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-        ...{ class: "flex gap-4 h-full relative" },
-    });
-    /** @type {[typeof ChatList, ]} */ ;
-    // @ts-ignore
-    const __VLS_68 = __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_69 = __VLS_68({
-        ...{ 'onSelectReceiver': {} },
-        ref: "chatListRef",
-        ...{ class: "w-[38%] max-w-[500px] min-w-[450px]" },
-        responsive: (__VLS_ctx.responsiveRender),
-        receiverId: (__VLS_ctx.receiverId),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_68));
-    let __VLS_71;
-    let __VLS_72;
-    const __VLS_73 = ({ selectReceiver: {} },
-        { onSelectReceiver: (__VLS_ctx.selectReceiver) });
-    /** @type {typeof __VLS_ctx.chatListRef} */ ;
-    var __VLS_74 = {};
-    // @ts-ignore
-    [responsiveRender, receiverId, selectReceiver, chatListRef,];
-    var __VLS_70;
-    __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]) => {
+        }, ...__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))
@@ -529,146 +496,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_77 = __VLS_asFunctionalComponent(IconArrowLeft, new IconArrowLeft({}));
-        const __VLS_78 = __VLS_77({}, ...__VLS_functionalComponentArgsRest(__VLS_77));
-        __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_81 = __VLS_asFunctionalComponent(HomeComponent, new HomeComponent({
-        ...{ 'onCall': {} },
-        ...{ 'onInputFocus': {} },
-        ref: "homeComponentRef",
-        receiverId: (__VLS_ctx.receiverId),
-        ...{ class: "h-full" },
-        responsive: (__VLS_ctx.responsiveRender),
-    }));
-    const __VLS_82 = __VLS_81({
-        ...{ 'onCall': {} },
-        ...{ 'onInputFocus': {} },
-        ref: "homeComponentRef",
-        receiverId: (__VLS_ctx.receiverId),
-        ...{ class: "h-full" },
-        responsive: (__VLS_ctx.responsiveRender),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_81));
-    let __VLS_84;
-    let __VLS_85;
-    const __VLS_86 = ({ call: {} },
-        { onCall: (__VLS_ctx.handleCall) });
-    const __VLS_87 = ({ 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_88 = {};
-    // @ts-ignore
-    [currentPage, PAGE, responsiveRender, receiverId, receiverId, handleCall, handleReadMessage, homeComponentRef,];
-    var __VLS_83;
-    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_91 = __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_92 = __VLS_91({
-            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_91));
-        /** @type {typeof __VLS_ctx.customerDetailRef} */ ;
-        var __VLS_94 = {};
-        // @ts-ignore
-        [responsiveRender, receiverId, customerDetailRef,];
-        var __VLS_93;
-    }
-    if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_CHECK_IN) {
-        // @ts-ignore
-        [currentPage, PAGE,];
-        /** @type {[typeof CustomerCheckIn, ]} */ ;
-        // @ts-ignore
-        const __VLS_97 = __VLS_asFunctionalComponent(CustomerCheckIn, new CustomerCheckIn({
-            ...{ class: "h-full" },
-        }));
-        const __VLS_98 = __VLS_97({
-            ...{ class: "h-full" },
-        }, ...__VLS_functionalComponentArgsRest(__VLS_97));
-    }
-    if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_APPOINTMENT) {
-        // @ts-ignore
-        [currentPage, PAGE,];
-        /** @type {[typeof CustomerAppointment, ]} */ ;
+        }, ...__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
-        const __VLS_101 = __VLS_asFunctionalComponent(CustomerAppointment, new CustomerAppointment({
-            ...{ class: "h-full" },
-        }));
-        const __VLS_102 = __VLS_101({
-            ...{ class: "h-full" },
-        }, ...__VLS_functionalComponentArgsRest(__VLS_101));
+        [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_105 = __VLS_asFunctionalComponent(Calling, new Calling({
-        ...{ 'onUserCalling': {} },
-        ...{ 'onEndCall': {} },
-        ref: "callingRef",
-        responsive: (__VLS_ctx.responsiveRender),
-    }));
-    const __VLS_106 = __VLS_105({
-        ...{ 'onUserCalling': {} },
-        ...{ 'onEndCall': {} },
-        ref: "callingRef",
-        responsive: (__VLS_ctx.responsiveRender),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_105));
-    let __VLS_108;
-    let __VLS_109;
-    const __VLS_110 = ({ 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_111 = ({ endCall: {} },
-        { onEndCall: (__VLS_ctx.handleEndCall) });
-    /** @type {typeof __VLS_ctx.callingRef} */ ;
-    var __VLS_112 = {};
-    // @ts-ignore
-    [handleEndCall, callingRef,];
-    var __VLS_107;
 }
 /** @type {__VLS_StyleScopedClasses['go-chat-main']} */ ;
 /** @type {__VLS_StyleScopedClasses['max-w-full']} */ ;
@@ -678,6 +729,24 @@ 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['overflow-hidden']} */ ;
+/** @type {__VLS_StyleScopedClasses['relative']} */ ;
+/** @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['gap-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-white']} */ ;
+/** @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['relative']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
@@ -693,10 +762,15 @@ else {
 /** @type {__VLS_StyleScopedClasses['shrink-0']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
 /** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['justify-between']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-xl']} */ ;
 /** @type {__VLS_StyleScopedClasses['font-semibold']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-chat-haze-900']} */ ;
 /** @type {__VLS_StyleScopedClasses['ml-3']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-10']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-10']} */ ;
 /** @type {__VLS_StyleScopedClasses['grow']} */ ;
 /** @type {__VLS_StyleScopedClasses['overflow-hidden']} */ ;
 /** @type {__VLS_StyleScopedClasses['w-full']} */ ;
@@ -740,7 +814,7 @@ else {
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
 // @ts-ignore
-var __VLS_24 = __VLS_23, __VLS_37 = __VLS_36, __VLS_48 = __VLS_47, __VLS_54 = __VLS_53, __VLS_75 = __VLS_74, __VLS_89 = __VLS_88, __VLS_95 = __VLS_94, __VLS_113 = __VLS_112;
+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: {},