@phonghq/go-chat 1.0.23 → 1.0.25

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

@@ -12,10 +12,15 @@ import Error from '../chat/page/error/Error.vue';
 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 { logout } from '../utils/chat/auth';
+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 { publicTopicConversationUpdate } from '../utils/chat/conversation';
+import DrawerBaseCustom from '../components/common/drawer/DrawerBaseCustom.vue';
+import IconCloseCircle from '../assets/icons/IconCloseCircle.vue';
+import Setting from '../chat/page/setting/Setting.vue';
 const routerConfig = [
     { id: PAGE.HOME, backFunc: null, backTitle: '' },
     {
@@ -85,11 +90,15 @@ const props = withDefaults(defineProps(), {
 const emit = defineEmits();
 const { initPage } = useInitData();
 onMounted(() => {
+    if (props.isLib) {
+        defineRootColor();
+    }
     getResponsiveObserver();
-    window.addEventListener('resize', getResponsiveObserver);
+    window.addEventListener('resize', getResponsiveObserverDebounce);
+    handleInitPage();
 });
 onUnmounted(() => {
-    window.removeEventListener('resize', getResponsiveObserver);
+    window.removeEventListener('resize', getResponsiveObserverDebounce);
 });
 const currentPageConfig = computed(() => {
     if (responsiveRender.value === 'mobile') {
@@ -100,7 +109,7 @@ const currentPageConfig = computed(() => {
 const responsiveRender = computed(() => {
     return props.response == 'mobile' ? props.response : responsiveObserver.value;
 });
-const list = computed(() => chatListRef.value?.listConversations ?? []);
+const list = computed(() => chatListRef.value?.listConversationsAll ?? []);
 const unreadCount = computed(() => list.value?.reduce((total, cur) => total + (cur?.unread_count ?? 0), 0) ?? 0);
 const callStatus = computed(() => callingRef.value?.callStatus ?? null);
 const responsiveObserver = ref('tablet');
@@ -110,6 +119,7 @@ const receiverId = ref(null);
 const customerDetailRef = ref(null);
 const homeComponentRef = ref(null);
 const chatListRef = ref(null);
+const drawerVisibleRef = ref(null);
 const selectReceiver = async (data) => {
     if (receiverId.value != data?.receiver_id || responsiveRender.value === 'mobile') {
         if (currentPage.value != PAGE.HOME) {
@@ -123,10 +133,8 @@ const selectReceiver = async (data) => {
 };
 const handleCall = (user) => {
     callingRef.value?.startCall(user);
-    // callingRef.value?.startAnswer('16013818811')
 };
-const getResponsiveObserver = useDebounce(() => {
-    // const div = document.getElementById('appChatMain')
+const getResponsiveObserver = () => {
     if (!appChatRef.value)
         return;
     const width = appChatRef.value?.offsetWidth ?? 0;
@@ -143,8 +151,30 @@ const getResponsiveObserver = useDebounce(() => {
             responsiveObserver.value = 'mobile';
         }
     }
+};
+const getResponsiveObserverDebounce = useDebounce(() => {
+    getResponsiveObserver();
 }, 50);
-initPage({ props: props, response: props.response });
+const handleInitPage = async () => {
+    await initPage({ props: props, response: responsiveRender.value });
+    if (!dataProfile.value?.tenant_phone) {
+        emit('error:noPhoneTenant');
+    }
+};
+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);
+};
+const openSettings = () => {
+    drawerVisibleRef.value?.open();
+};
 let __VLS_exposed;
 defineExpose({
     get unreadCount() {
@@ -162,7 +192,8 @@ defineExpose({
     startCall: async () => {
         await callingRef.value?.answer();
     },
-    endCall: () => callingRef.value?.endCall()
+    endCall: () => callingRef.value?.endCall(),
+    openSettings
 });
 debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
 const __VLS_defaults = {
@@ -179,8 +210,8 @@ let __VLS_elements;
 let __VLS_components;
 let __VLS_directives;
 __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-    ...{ class: "go-chat-main max-w-full" },
-    ...{ class: ({ 'p-8': !__VLS_ctx.isLib }) },
+    ...{ class: "go-chat-main max-w-full p-0" },
+    ...{ class: ({ 'md:p-8': !__VLS_ctx.isLib }) },
     id: "appChatMain",
     ref: "appChatRef",
 });
@@ -210,17 +241,19 @@ else if (__VLS_ctx.responsiveRender == 'mobile') {
     // @ts-ignore
     [responsiveRender,];
     __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-        ...{ class: "relative flex flex-col mx-auto w-full max-w-[350px] h-full bg-[#F9FAFC] overflow-hidden chat-mobile pt-4" },
+        ...{ class: "relative flex flex-col mx-auto w-full h-full bg-[#F9FAFC] overflow-hidden chat-mobile pt-4" },
     });
     /** @type {[typeof Calling, ]} */ ;
     // @ts-ignore
     const __VLS_8 = __VLS_asFunctionalComponent(Calling, new Calling({
         ...{ 'onUserCalling': {} },
+        ...{ 'onEndCall': {} },
         ref: "callingRef",
         responsive: (__VLS_ctx.responsiveRender),
     }));
     const __VLS_9 = __VLS_8({
         ...{ 'onUserCalling': {} },
+        ...{ 'onEndCall': {} },
         ref: "callingRef",
         responsive: (__VLS_ctx.responsiveRender),
     }, ...__VLS_functionalComponentArgsRest(__VLS_8));
@@ -238,10 +271,12 @@ else if (__VLS_ctx.responsiveRender == 'mobile') {
                 // @ts-ignore
                 [responsiveRender, emit,];
             } });
+    const __VLS_14 = ({ endCall: {} },
+        { onEndCall: (__VLS_ctx.handleEndCall) });
     /** @type {typeof __VLS_ctx.callingRef} */ ;
-    var __VLS_14 = {};
+    var __VLS_15 = {};
     // @ts-ignore
-    [callingRef,];
+    [handleEndCall, callingRef,];
     var __VLS_10;
     if (__VLS_ctx.currentPageConfig?.backFunc) {
         // @ts-ignore
@@ -267,8 +302,8 @@ else if (__VLS_ctx.responsiveRender == 'mobile') {
         });
         /** @type {[typeof IconArrowLeft, ]} */ ;
         // @ts-ignore
-        const __VLS_17 = __VLS_asFunctionalComponent(IconArrowLeft, new IconArrowLeft({}));
-        const __VLS_18 = __VLS_17({}, ...__VLS_functionalComponentArgsRest(__VLS_17));
+        const __VLS_18 = __VLS_asFunctionalComponent(IconArrowLeft, new IconArrowLeft({}));
+        const __VLS_19 = __VLS_18({}, ...__VLS_functionalComponentArgsRest(__VLS_18));
         __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
             ...{ class: "text-xl font-semibold text-chat-haze-900 ml-3" },
         });
@@ -281,114 +316,114 @@ else if (__VLS_ctx.responsiveRender == 'mobile') {
     });
     /** @type {[typeof ChatList, ]} */ ;
     // @ts-ignore
-    const __VLS_21 = __VLS_asFunctionalComponent(ChatList, new ChatList({
+    const __VLS_22 = __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_22 = __VLS_21({
+    const __VLS_23 = __VLS_22({
         ...{ 'onSelectReceiver': {} },
         ref: "chatListRef",
         ...{ class: "w-full max-w-[500px] !bg-[#F9FAFC]" },
         responsive: (__VLS_ctx.responsiveRender),
         receiverId: (__VLS_ctx.receiverId),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_21));
-    let __VLS_24;
+    }, ...__VLS_functionalComponentArgsRest(__VLS_22));
     let __VLS_25;
-    const __VLS_26 = ({ selectReceiver: {} },
+    let __VLS_26;
+    const __VLS_27 = ({ 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_27 = {};
+    var __VLS_28 = {};
     // @ts-ignore
     [currentPage, PAGE, responsiveRender, receiverId, selectReceiver, chatListRef,];
-    var __VLS_23;
+    var __VLS_24;
     /** @type {[typeof HomeComponent, ]} */ ;
     // @ts-ignore
-    const __VLS_30 = __VLS_asFunctionalComponent(HomeComponent, new HomeComponent({
+    const __VLS_31 = __VLS_asFunctionalComponent(HomeComponent, new HomeComponent({
         ...{ 'onCall': {} },
         ref: "homeComponentRef",
         receiverId: (__VLS_ctx.receiverId),
         ...{ class: "h-full pt-4" },
         responsive: (__VLS_ctx.responsiveRender),
     }));
-    const __VLS_31 = __VLS_30({
+    const __VLS_32 = __VLS_31({
         ...{ 'onCall': {} },
         ref: "homeComponentRef",
         receiverId: (__VLS_ctx.receiverId),
         ...{ class: "h-full pt-4" },
         responsive: (__VLS_ctx.responsiveRender),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_30));
-    let __VLS_33;
+    }, ...__VLS_functionalComponentArgsRest(__VLS_31));
     let __VLS_34;
-    const __VLS_35 = ({ call: {} },
+    let __VLS_35;
+    const __VLS_36 = ({ call: {} },
         { onCall: (__VLS_ctx.handleCall) });
     __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_36 = {};
+    var __VLS_37 = {};
     // @ts-ignore
     [currentPage, PAGE, responsiveRender, receiverId, handleCall, homeComponentRef,];
-    var __VLS_32;
+    var __VLS_33;
     if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_DETAIL) {
         // @ts-ignore
         [currentPage, PAGE,];
         /** @type {[typeof CustomerDetail, ]} */ ;
         // @ts-ignore
-        const __VLS_39 = __VLS_asFunctionalComponent(CustomerDetail, new CustomerDetail({
+        const __VLS_40 = __VLS_asFunctionalComponent(CustomerDetail, new CustomerDetail({
             ref: "customerDetailRef",
             receiverId: (__VLS_ctx.receiverId),
-            ...{ class: "h-full" },
+            ...{ class: "w-full h-full" },
             responsive: (__VLS_ctx.responsiveRender),
         }));
-        const __VLS_40 = __VLS_39({
+        const __VLS_41 = __VLS_40({
             ref: "customerDetailRef",
             receiverId: (__VLS_ctx.receiverId),
-            ...{ class: "h-full" },
+            ...{ class: "w-full h-full" },
             responsive: (__VLS_ctx.responsiveRender),
-        }, ...__VLS_functionalComponentArgsRest(__VLS_39));
+        }, ...__VLS_functionalComponentArgsRest(__VLS_40));
         /** @type {typeof __VLS_ctx.customerDetailRef} */ ;
-        var __VLS_42 = {};
+        var __VLS_43 = {};
         // @ts-ignore
         [responsiveRender, receiverId, customerDetailRef,];
-        var __VLS_41;
+        var __VLS_42;
     }
     if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_CHECK_IN) {
         // @ts-ignore
         [currentPage, PAGE,];
         /** @type {[typeof CustomerCheckIn, ]} */ ;
         // @ts-ignore
-        const __VLS_45 = __VLS_asFunctionalComponent(CustomerCheckIn, new CustomerCheckIn({
-            ...{ class: "h-full" },
+        const __VLS_46 = __VLS_asFunctionalComponent(CustomerCheckIn, new CustomerCheckIn({
+            ...{ class: "w-full h-full" },
         }));
-        const __VLS_46 = __VLS_45({
-            ...{ class: "h-full" },
-        }, ...__VLS_functionalComponentArgsRest(__VLS_45));
+        const __VLS_47 = __VLS_46({
+            ...{ class: "w-full h-full" },
+        }, ...__VLS_functionalComponentArgsRest(__VLS_46));
     }
     if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_APPOINTMENT) {
         // @ts-ignore
         [currentPage, PAGE,];
         /** @type {[typeof CustomerAppointment, ]} */ ;
         // @ts-ignore
-        const __VLS_49 = __VLS_asFunctionalComponent(CustomerAppointment, new CustomerAppointment({
-            ...{ class: "h-full" },
+        const __VLS_50 = __VLS_asFunctionalComponent(CustomerAppointment, new CustomerAppointment({
+            ...{ class: "w-full h-full" },
         }));
-        const __VLS_50 = __VLS_49({
-            ...{ class: "h-full" },
-        }, ...__VLS_functionalComponentArgsRest(__VLS_49));
+        const __VLS_51 = __VLS_50({
+            ...{ class: "w-full h-full" },
+        }, ...__VLS_functionalComponentArgsRest(__VLS_50));
     }
     if (__VLS_ctx.currentPage != __VLS_ctx.PAGE.HOME) {
         // @ts-ignore
         [currentPage, PAGE,];
         /** @type {[typeof MobileFooter, ]} */ ;
         // @ts-ignore
-        const __VLS_53 = __VLS_asFunctionalComponent(MobileFooter, new MobileFooter({
+        const __VLS_54 = __VLS_asFunctionalComponent(MobileFooter, new MobileFooter({
             ...{ class: "shrink-0" },
         }));
-        const __VLS_54 = __VLS_53({
+        const __VLS_55 = __VLS_54({
             ...{ class: "shrink-0" },
-        }, ...__VLS_functionalComponentArgsRest(__VLS_53));
+        }, ...__VLS_functionalComponentArgsRest(__VLS_54));
     }
 }
 else {
@@ -397,29 +432,29 @@ else {
     });
     /** @type {[typeof ChatList, ]} */ ;
     // @ts-ignore
-    const __VLS_57 = __VLS_asFunctionalComponent(ChatList, new ChatList({
+    const __VLS_58 = __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_58 = __VLS_57({
+    const __VLS_59 = __VLS_58({
         ...{ 'onSelectReceiver': {} },
         ref: "chatListRef",
         ...{ class: "w-[38%] max-w-[500px] min-w-[450px]" },
         responsive: (__VLS_ctx.responsiveRender),
         receiverId: (__VLS_ctx.receiverId),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_57));
-    let __VLS_60;
+    }, ...__VLS_functionalComponentArgsRest(__VLS_58));
     let __VLS_61;
-    const __VLS_62 = ({ selectReceiver: {} },
+    let __VLS_62;
+    const __VLS_63 = ({ selectReceiver: {} },
         { onSelectReceiver: (__VLS_ctx.selectReceiver) });
     /** @type {typeof __VLS_ctx.chatListRef} */ ;
-    var __VLS_63 = {};
+    var __VLS_64 = {};
     // @ts-ignore
     [responsiveRender, receiverId, selectReceiver, chatListRef,];
-    var __VLS_59;
+    var __VLS_60;
     __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
         ...{ class: "chat-box-white grow flex flex-col h-full pt-6 overflow-hidden" },
     });
@@ -447,8 +482,8 @@ else {
         });
         /** @type {[typeof IconArrowLeft, ]} */ ;
         // @ts-ignore
-        const __VLS_66 = __VLS_asFunctionalComponent(IconArrowLeft, new IconArrowLeft({}));
-        const __VLS_67 = __VLS_66({}, ...__VLS_functionalComponentArgsRest(__VLS_66));
+        const __VLS_67 = __VLS_asFunctionalComponent(IconArrowLeft, new IconArrowLeft({}));
+        const __VLS_68 = __VLS_67({}, ...__VLS_functionalComponentArgsRest(__VLS_67));
         __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
             ...{ class: "text-xl font-semibold text-chat-haze-900 ml-3" },
         });
@@ -461,92 +496,94 @@ else {
     });
     /** @type {[typeof HomeComponent, ]} */ ;
     // @ts-ignore
-    const __VLS_70 = __VLS_asFunctionalComponent(HomeComponent, new HomeComponent({
+    const __VLS_71 = __VLS_asFunctionalComponent(HomeComponent, new HomeComponent({
         ...{ 'onCall': {} },
         ref: "homeComponentRef",
         receiverId: (__VLS_ctx.receiverId),
         ...{ class: "h-full" },
         responsive: (__VLS_ctx.responsiveRender),
     }));
-    const __VLS_71 = __VLS_70({
+    const __VLS_72 = __VLS_71({
         ...{ 'onCall': {} },
         ref: "homeComponentRef",
         receiverId: (__VLS_ctx.receiverId),
         ...{ class: "h-full" },
         responsive: (__VLS_ctx.responsiveRender),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_70));
-    let __VLS_73;
+    }, ...__VLS_functionalComponentArgsRest(__VLS_71));
     let __VLS_74;
-    const __VLS_75 = ({ call: {} },
+    let __VLS_75;
+    const __VLS_76 = ({ call: {} },
         { onCall: (__VLS_ctx.handleCall) });
-    __VLS_asFunctionalDirective(__VLS_directives.vShow)(null, { ...__VLS_directiveBindingRestFields, value: (__VLS_ctx.currentPage == __VLS_ctx.PAGE.HOME) }, null, null);
+    __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_76 = {};
+    var __VLS_77 = {};
     // @ts-ignore
-    [currentPage, PAGE, responsiveRender, receiverId, handleCall, homeComponentRef,];
-    var __VLS_72;
+    [currentPage, PAGE, responsiveRender, receiverId, receiverId, handleCall, homeComponentRef,];
+    var __VLS_73;
     if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_DETAIL) {
         // @ts-ignore
         [currentPage, PAGE,];
         /** @type {[typeof CustomerDetail, ]} */ ;
         // @ts-ignore
-        const __VLS_79 = __VLS_asFunctionalComponent(CustomerDetail, new CustomerDetail({
+        const __VLS_80 = __VLS_asFunctionalComponent(CustomerDetail, new CustomerDetail({
             ref: "customerDetailRef",
             receiverId: (__VLS_ctx.receiverId),
             ...{ class: "h-full" },
             responsive: (__VLS_ctx.responsiveRender),
         }));
-        const __VLS_80 = __VLS_79({
+        const __VLS_81 = __VLS_80({
             ref: "customerDetailRef",
             receiverId: (__VLS_ctx.receiverId),
             ...{ class: "h-full" },
             responsive: (__VLS_ctx.responsiveRender),
-        }, ...__VLS_functionalComponentArgsRest(__VLS_79));
+        }, ...__VLS_functionalComponentArgsRest(__VLS_80));
         /** @type {typeof __VLS_ctx.customerDetailRef} */ ;
-        var __VLS_82 = {};
+        var __VLS_83 = {};
         // @ts-ignore
         [responsiveRender, receiverId, customerDetailRef,];
-        var __VLS_81;
+        var __VLS_82;
     }
     if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_CHECK_IN) {
         // @ts-ignore
         [currentPage, PAGE,];
         /** @type {[typeof CustomerCheckIn, ]} */ ;
         // @ts-ignore
-        const __VLS_85 = __VLS_asFunctionalComponent(CustomerCheckIn, new CustomerCheckIn({
+        const __VLS_86 = __VLS_asFunctionalComponent(CustomerCheckIn, new CustomerCheckIn({
             ...{ class: "h-full" },
         }));
-        const __VLS_86 = __VLS_85({
+        const __VLS_87 = __VLS_86({
             ...{ class: "h-full" },
-        }, ...__VLS_functionalComponentArgsRest(__VLS_85));
+        }, ...__VLS_functionalComponentArgsRest(__VLS_86));
     }
     if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_APPOINTMENT) {
         // @ts-ignore
         [currentPage, PAGE,];
         /** @type {[typeof CustomerAppointment, ]} */ ;
         // @ts-ignore
-        const __VLS_89 = __VLS_asFunctionalComponent(CustomerAppointment, new CustomerAppointment({
+        const __VLS_90 = __VLS_asFunctionalComponent(CustomerAppointment, new CustomerAppointment({
             ...{ class: "h-full" },
         }));
-        const __VLS_90 = __VLS_89({
+        const __VLS_91 = __VLS_90({
             ...{ class: "h-full" },
-        }, ...__VLS_functionalComponentArgsRest(__VLS_89));
+        }, ...__VLS_functionalComponentArgsRest(__VLS_90));
     }
     /** @type {[typeof Calling, ]} */ ;
     // @ts-ignore
-    const __VLS_93 = __VLS_asFunctionalComponent(Calling, new Calling({
+    const __VLS_94 = __VLS_asFunctionalComponent(Calling, new Calling({
         ...{ 'onUserCalling': {} },
+        ...{ 'onEndCall': {} },
         ref: "callingRef",
         responsive: (__VLS_ctx.responsiveRender),
     }));
-    const __VLS_94 = __VLS_93({
+    const __VLS_95 = __VLS_94({
         ...{ 'onUserCalling': {} },
+        ...{ 'onEndCall': {} },
         ref: "callingRef",
         responsive: (__VLS_ctx.responsiveRender),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_93));
-    let __VLS_96;
+    }, ...__VLS_functionalComponentArgsRest(__VLS_94));
     let __VLS_97;
-    const __VLS_98 = ({ userCalling: {} },
+    let __VLS_98;
+    const __VLS_99 = ({ userCalling: {} },
         { onUserCalling: (...[$event]) => {
                 if (!!(!__VLS_ctx.isRouterReady))
                     return;
@@ -558,15 +595,62 @@ else {
                 // @ts-ignore
                 [responsiveRender, emit,];
             } });
+    const __VLS_100 = ({ endCall: {} },
+        { onEndCall: (__VLS_ctx.handleEndCall) });
     /** @type {typeof __VLS_ctx.callingRef} */ ;
-    var __VLS_99 = {};
+    var __VLS_101 = {};
+    // @ts-ignore
+    [handleEndCall, callingRef,];
+    var __VLS_96;
+    /** @type {[typeof DrawerBaseCustom, typeof DrawerBaseCustom, ]} */ ;
     // @ts-ignore
-    [callingRef,];
-    var __VLS_95;
+    const __VLS_104 = __VLS_asFunctionalComponent(DrawerBaseCustom, new DrawerBaseCustom({
+        ref: "drawerVisibleRef",
+        width: (500),
+        responsive: (__VLS_ctx.responsiveRender),
+    }));
+    const __VLS_105 = __VLS_104({
+        ref: "drawerVisibleRef",
+        width: (500),
+        responsive: (__VLS_ctx.responsiveRender),
+    }, ...__VLS_functionalComponentArgsRest(__VLS_104));
+    /** @type {typeof __VLS_ctx.drawerVisibleRef} */ ;
+    var __VLS_107 = {};
+    const { default: __VLS_109 } = __VLS_106.slots;
+    // @ts-ignore
+    [responsiveRender, drawerVisibleRef,];
+    {
+        const { content: __VLS_110 } = __VLS_106.slots;
+        __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+            ...{ class: "flex flex-col" },
+        });
+        __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+            ...{ class: "flex justify-between items-center h-[64px] w-full bg-chat-haze-200 px-6" },
+        });
+        __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
+            ...{ class: "font-semibold text-2xl" },
+        });
+        __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
+            ...{ class: "w-10 h-10" },
+        });
+        /** @type {[typeof IconCloseCircle, ]} */ ;
+        // @ts-ignore
+        const __VLS_111 = __VLS_asFunctionalComponent(IconCloseCircle, new IconCloseCircle({}));
+        const __VLS_112 = __VLS_111({}, ...__VLS_functionalComponentArgsRest(__VLS_111));
+        __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+            ...{ class: "px-4 py-6" },
+        });
+        /** @type {[typeof Setting, ]} */ ;
+        // @ts-ignore
+        const __VLS_115 = __VLS_asFunctionalComponent(Setting, new Setting({}));
+        const __VLS_116 = __VLS_115({}, ...__VLS_functionalComponentArgsRest(__VLS_115));
+    }
+    var __VLS_106;
 }
 /** @type {__VLS_StyleScopedClasses['go-chat-main']} */ ;
 /** @type {__VLS_StyleScopedClasses['max-w-full']} */ ;
-/** @type {__VLS_StyleScopedClasses['p-8']} */ ;
+/** @type {__VLS_StyleScopedClasses['p-0']} */ ;
+/** @type {__VLS_StyleScopedClasses['md:p-8']} */ ;
 /** @type {__VLS_StyleScopedClasses['m-auto']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex-center']} */ ;
 /** @type {__VLS_StyleScopedClasses['sc-full']} */ ;
@@ -575,7 +659,6 @@ else {
 /** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
 /** @type {__VLS_StyleScopedClasses['mx-auto']} */ ;
 /** @type {__VLS_StyleScopedClasses['w-full']} */ ;
-/** @type {__VLS_StyleScopedClasses['max-w-[350px]']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['bg-[#F9FAFC]']} */ ;
 /** @type {__VLS_StyleScopedClasses['overflow-hidden']} */ ;
@@ -597,8 +680,11 @@ else {
 /** @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']} */ ;
@@ -629,8 +715,23 @@ else {
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['justify-between']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-[64px]']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-chat-haze-200']} */ ;
+/** @type {__VLS_StyleScopedClasses['px-6']} */ ;
+/** @type {__VLS_StyleScopedClasses['font-semibold']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-2xl']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-10']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-10']} */ ;
+/** @type {__VLS_StyleScopedClasses['px-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['py-6']} */ ;
 // @ts-ignore
-var __VLS_15 = __VLS_14, __VLS_28 = __VLS_27, __VLS_37 = __VLS_36, __VLS_43 = __VLS_42, __VLS_64 = __VLS_63, __VLS_77 = __VLS_76, __VLS_83 = __VLS_82, __VLS_100 = __VLS_99;
+var __VLS_16 = __VLS_15, __VLS_29 = __VLS_28, __VLS_38 = __VLS_37, __VLS_44 = __VLS_43, __VLS_65 = __VLS_64, __VLS_78 = __VLS_77, __VLS_84 = __VLS_83, __VLS_102 = __VLS_101, __VLS_108 = __VLS_107;
 const __VLS_export = (await import('vue')).defineComponent({
     setup: () => (__VLS_exposed),
     __typeEmits: {},

package/dist/test/chat/page/customer-detail/CustomerDetail.vue.js

@@ -107,9 +107,6 @@ __VLS_asFunctionalElement(__VLS_elements.h2, __VLS_elements.h2)({
 (__VLS_ctx.user?.username ?? 'n/a');
 // @ts-ignore
 [user,];
-__VLS_asFunctionalElement(__VLS_elements.img)({
-    src: "../../../assets/images/icons/new-customer.png",
-});
 __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
     ...{ class: " mt-5 text-center mx-auto" },
     ...{ class: ({ 'flex justify-between w-max': __VLS_ctx.responsive == 'tablet', 'grid grid-cols-3 w-full': __VLS_ctx.responsive == 'mobile' }) },