@phonghq/go-chat 1.0.11 → 1.0.14

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

@@ -14,7 +14,6 @@ import BaseSpin from '../components/chat/common/spin/BaseSpin.vue';
 import Calling from '../components/chat/call/Calling.vue';
 import { logout } from '../utils/chat/auth';
 import MobileFooter from '../components/chat/layout/mobile/Footer.vue';
-import { initWebSocket } from '../plugins/websocket';
 import '../style/index.scss';
 import { useDebounce } from '../utils/debounce';
 const routerConfig = [
@@ -32,6 +31,13 @@ const routerConfig = [
             routerPush(PAGE.CUSTOMER_DETAIL);
         },
         backTitle: 'Appointments'
+    },
+    {
+        id: PAGE.CUSTOMER_CHECK_IN,
+        backFunc: () => {
+            routerPush(PAGE.CUSTOMER_DETAIL);
+        },
+        backTitle: 'Checkins'
     }
 ];
 const routerMobileConfig = computed(() => [
@@ -64,11 +70,19 @@ const routerMobileConfig = computed(() => [
             routerPush(PAGE.CUSTOMER_DETAIL);
         },
         backTitle: 'Appointments'
+    },
+    {
+        id: PAGE.CUSTOMER_CHECK_IN,
+        backFunc: () => {
+            routerPush(PAGE.CUSTOMER_DETAIL);
+        },
+        backTitle: 'Checkins'
     }
 ]);
 const props = withDefaults(defineProps(), {
     response: 'tablet'
 });
+const emit = defineEmits();
 const { initPage } = useInitData();
 onMounted(() => {
     getResponsiveObserver();
@@ -86,6 +100,8 @@ const currentPageConfig = computed(() => {
 const responsiveRender = computed(() => {
     return props.response == 'mobile' ? props.response : responsiveObserver.value;
 });
+const list = computed(() => chatListRef.value?.listConversations ?? []);
+const unreadCount = computed(() => list.value?.reduce((total, cur) => total + (cur?.unread_count ?? 0), 0) ?? 0);
 const responsiveObserver = ref('tablet');
 const appChatRef = ref();
 const callingRef = ref(null);
@@ -94,7 +110,7 @@ const customerDetailRef = ref(null);
 const homeComponentRef = ref(null);
 const chatListRef = ref(null);
 const selectReceiver = async (data) => {
-    if (receiverId.value != data?.receiver_id) {
+    if (receiverId.value != data?.receiver_id || responsiveRender.value === 'mobile') {
         if (currentPage.value != PAGE.HOME) {
             routerPush(PAGE.HOME);
         }
@@ -106,6 +122,7 @@ const selectReceiver = async (data) => {
 };
 const handleCall = (user) => {
     callingRef.value?.startCall(user);
+    // callingRef.value?.startAnswer('16013818811')
 };
 const getResponsiveObserver = useDebounce(() => {
     // const div = document.getElementById('appChatMain')
@@ -126,8 +143,9 @@ const getResponsiveObserver = useDebounce(() => {
         }
     }
 }, 50);
-initWebSocket('https://web-socket.dev01.dtsmart.dev');
-initPage({ id: props.id, domain: props.domain, token: props.token, response: props.response });
+initPage({ props: props, response: props.response });
+let __VLS_exposed;
+defineExpose({ unreadCount });
 debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
 const __VLS_defaults = {
     response: 'tablet'
@@ -137,18 +155,20 @@ const __VLS_ctx = {
     ...{},
     ...{},
     ...{},
+    ...{},
 };
 let __VLS_elements;
 let __VLS_components;
 let __VLS_directives;
 __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-    ...{ class: "go-chat-main max-w-full p-8" },
+    ...{ class: "go-chat-main max-w-full" },
+    ...{ class: ({ 'p-8': !__VLS_ctx.isLib }) },
     id: "appChatMain",
     ref: "appChatRef",
 });
 /** @type {typeof __VLS_ctx.appChatRef} */ ;
 // @ts-ignore
-[appChatRef,];
+[isLib, appChatRef,];
 if (!__VLS_ctx.isRouterReady) {
     // @ts-ignore
     [isRouterReady,];
@@ -172,22 +192,38 @@ 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-max max-w-[350px] h-full bg-[#F9FAFC] overflow-hidden chat-mobile pt-4" },
+        ...{ class: "relative flex flex-col mx-auto w-full max-w-[350px] h-full bg-[#F9FAFC] overflow-hidden chat-mobile pt-4" },
     });
     /** @type {[typeof Calling, ]} */ ;
     // @ts-ignore
     const __VLS_8 = __VLS_asFunctionalComponent(Calling, new Calling({
+        ...{ 'onUserCalling': {} },
         ref: "callingRef",
         responsive: (__VLS_ctx.responsiveRender),
     }));
     const __VLS_9 = __VLS_8({
+        ...{ 'onUserCalling': {} },
         ref: "callingRef",
         responsive: (__VLS_ctx.responsiveRender),
     }, ...__VLS_functionalComponentArgsRest(__VLS_8));
+    let __VLS_11;
+    let __VLS_12;
+    const __VLS_13 = ({ userCalling: {} },
+        { onUserCalling: (...[$event]) => {
+                if (!!(!__VLS_ctx.isRouterReady))
+                    return;
+                if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.TENANT_ERROR))
+                    return;
+                if (!(__VLS_ctx.responsiveRender == 'mobile'))
+                    return;
+                __VLS_ctx.emit('userCalling', $event);
+                // @ts-ignore
+                [responsiveRender, emit,];
+            } });
     /** @type {typeof __VLS_ctx.callingRef} */ ;
-    var __VLS_11 = {};
+    var __VLS_14 = {};
     // @ts-ignore
-    [responsiveRender, callingRef,];
+    [callingRef,];
     var __VLS_10;
     if (__VLS_ctx.currentPageConfig?.backFunc) {
         // @ts-ignore
@@ -213,8 +249,8 @@ else if (__VLS_ctx.responsiveRender == 'mobile') {
         });
         /** @type {[typeof IconArrowLeft, ]} */ ;
         // @ts-ignore
-        const __VLS_14 = __VLS_asFunctionalComponent(IconArrowLeft, new IconArrowLeft({}));
-        const __VLS_15 = __VLS_14({}, ...__VLS_functionalComponentArgsRest(__VLS_14));
+        const __VLS_17 = __VLS_asFunctionalComponent(IconArrowLeft, new IconArrowLeft({}));
+        const __VLS_18 = __VLS_17({}, ...__VLS_functionalComponentArgsRest(__VLS_17));
         __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
             ...{ class: "text-xl font-semibold text-chat-haze-900 ml-3" },
         });
@@ -227,114 +263,114 @@ else if (__VLS_ctx.responsiveRender == 'mobile') {
     });
     /** @type {[typeof ChatList, ]} */ ;
     // @ts-ignore
-    const __VLS_18 = __VLS_asFunctionalComponent(ChatList, new ChatList({
+    const __VLS_21 = __VLS_asFunctionalComponent(ChatList, new ChatList({
         ...{ 'onSelectReceiver': {} },
         ref: "chatListRef",
         ...{ class: "w-full max-w-[500px] !bg-[#F9FAFC]" },
-        response: (__VLS_ctx.responsiveRender),
+        responsive: (__VLS_ctx.responsiveRender),
         receiverId: (__VLS_ctx.receiverId),
     }));
-    const __VLS_19 = __VLS_18({
+    const __VLS_22 = __VLS_21({
         ...{ 'onSelectReceiver': {} },
         ref: "chatListRef",
         ...{ class: "w-full max-w-[500px] !bg-[#F9FAFC]" },
-        response: (__VLS_ctx.responsiveRender),
+        responsive: (__VLS_ctx.responsiveRender),
         receiverId: (__VLS_ctx.receiverId),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_18));
-    let __VLS_21;
-    let __VLS_22;
-    const __VLS_23 = ({ selectReceiver: {} },
+    }, ...__VLS_functionalComponentArgsRest(__VLS_21));
+    let __VLS_24;
+    let __VLS_25;
+    const __VLS_26 = ({ 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_24 = {};
+    var __VLS_27 = {};
     // @ts-ignore
     [currentPage, PAGE, responsiveRender, receiverId, selectReceiver, chatListRef,];
-    var __VLS_20;
+    var __VLS_23;
     /** @type {[typeof HomeComponent, ]} */ ;
     // @ts-ignore
-    const __VLS_27 = __VLS_asFunctionalComponent(HomeComponent, new HomeComponent({
+    const __VLS_30 = __VLS_asFunctionalComponent(HomeComponent, new HomeComponent({
         ...{ 'onCall': {} },
         ref: "homeComponentRef",
         receiverId: (__VLS_ctx.receiverId),
         ...{ class: "h-full pt-4" },
-        response: (__VLS_ctx.responsiveRender),
+        responsive: (__VLS_ctx.responsiveRender),
     }));
-    const __VLS_28 = __VLS_27({
+    const __VLS_31 = __VLS_30({
         ...{ 'onCall': {} },
         ref: "homeComponentRef",
         receiverId: (__VLS_ctx.receiverId),
         ...{ class: "h-full pt-4" },
-        response: (__VLS_ctx.responsiveRender),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_27));
-    let __VLS_30;
-    let __VLS_31;
-    const __VLS_32 = ({ call: {} },
+        responsive: (__VLS_ctx.responsiveRender),
+    }, ...__VLS_functionalComponentArgsRest(__VLS_30));
+    let __VLS_33;
+    let __VLS_34;
+    const __VLS_35 = ({ 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_33 = {};
+    var __VLS_36 = {};
     // @ts-ignore
     [currentPage, PAGE, responsiveRender, receiverId, handleCall, homeComponentRef,];
-    var __VLS_29;
+    var __VLS_32;
     if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_DETAIL) {
         // @ts-ignore
         [currentPage, PAGE,];
         /** @type {[typeof CustomerDetail, ]} */ ;
         // @ts-ignore
-        const __VLS_36 = __VLS_asFunctionalComponent(CustomerDetail, new CustomerDetail({
+        const __VLS_39 = __VLS_asFunctionalComponent(CustomerDetail, new CustomerDetail({
             ref: "customerDetailRef",
             receiverId: (__VLS_ctx.receiverId),
             ...{ class: "h-full" },
-            response: (__VLS_ctx.responsiveRender),
+            responsive: (__VLS_ctx.responsiveRender),
         }));
-        const __VLS_37 = __VLS_36({
+        const __VLS_40 = __VLS_39({
             ref: "customerDetailRef",
             receiverId: (__VLS_ctx.receiverId),
             ...{ class: "h-full" },
-            response: (__VLS_ctx.responsiveRender),
-        }, ...__VLS_functionalComponentArgsRest(__VLS_36));
+            responsive: (__VLS_ctx.responsiveRender),
+        }, ...__VLS_functionalComponentArgsRest(__VLS_39));
         /** @type {typeof __VLS_ctx.customerDetailRef} */ ;
-        var __VLS_39 = {};
+        var __VLS_42 = {};
         // @ts-ignore
         [responsiveRender, receiverId, customerDetailRef,];
-        var __VLS_38;
+        var __VLS_41;
     }
     if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_CHECK_IN) {
         // @ts-ignore
         [currentPage, PAGE,];
         /** @type {[typeof CustomerCheckIn, ]} */ ;
         // @ts-ignore
-        const __VLS_42 = __VLS_asFunctionalComponent(CustomerCheckIn, new CustomerCheckIn({
+        const __VLS_45 = __VLS_asFunctionalComponent(CustomerCheckIn, new CustomerCheckIn({
             ...{ class: "h-full" },
         }));
-        const __VLS_43 = __VLS_42({
+        const __VLS_46 = __VLS_45({
             ...{ class: "h-full" },
-        }, ...__VLS_functionalComponentArgsRest(__VLS_42));
+        }, ...__VLS_functionalComponentArgsRest(__VLS_45));
     }
     if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_APPOINTMENT) {
         // @ts-ignore
         [currentPage, PAGE,];
         /** @type {[typeof CustomerAppointment, ]} */ ;
         // @ts-ignore
-        const __VLS_46 = __VLS_asFunctionalComponent(CustomerAppointment, new CustomerAppointment({
+        const __VLS_49 = __VLS_asFunctionalComponent(CustomerAppointment, new CustomerAppointment({
             ...{ class: "h-full" },
         }));
-        const __VLS_47 = __VLS_46({
+        const __VLS_50 = __VLS_49({
             ...{ class: "h-full" },
-        }, ...__VLS_functionalComponentArgsRest(__VLS_46));
+        }, ...__VLS_functionalComponentArgsRest(__VLS_49));
     }
     if (__VLS_ctx.currentPage != __VLS_ctx.PAGE.HOME) {
         // @ts-ignore
         [currentPage, PAGE,];
         /** @type {[typeof MobileFooter, ]} */ ;
         // @ts-ignore
-        const __VLS_50 = __VLS_asFunctionalComponent(MobileFooter, new MobileFooter({
+        const __VLS_53 = __VLS_asFunctionalComponent(MobileFooter, new MobileFooter({
             ...{ class: "shrink-0" },
         }));
-        const __VLS_51 = __VLS_50({
+        const __VLS_54 = __VLS_53({
             ...{ class: "shrink-0" },
-        }, ...__VLS_functionalComponentArgsRest(__VLS_50));
+        }, ...__VLS_functionalComponentArgsRest(__VLS_53));
     }
 }
 else {
@@ -343,29 +379,29 @@ else {
     });
     /** @type {[typeof ChatList, ]} */ ;
     // @ts-ignore
-    const __VLS_54 = __VLS_asFunctionalComponent(ChatList, new ChatList({
+    const __VLS_57 = __VLS_asFunctionalComponent(ChatList, new ChatList({
         ...{ 'onSelectReceiver': {} },
         ref: "chatListRef",
         ...{ class: "w-[38%] max-w-[500px] min-w-[450px]" },
-        response: (__VLS_ctx.responsiveRender),
+        responsive: (__VLS_ctx.responsiveRender),
         receiverId: (__VLS_ctx.receiverId),
     }));
-    const __VLS_55 = __VLS_54({
+    const __VLS_58 = __VLS_57({
         ...{ 'onSelectReceiver': {} },
         ref: "chatListRef",
         ...{ class: "w-[38%] max-w-[500px] min-w-[450px]" },
-        response: (__VLS_ctx.responsiveRender),
+        responsive: (__VLS_ctx.responsiveRender),
         receiverId: (__VLS_ctx.receiverId),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_54));
-    let __VLS_57;
-    let __VLS_58;
-    const __VLS_59 = ({ selectReceiver: {} },
+    }, ...__VLS_functionalComponentArgsRest(__VLS_57));
+    let __VLS_60;
+    let __VLS_61;
+    const __VLS_62 = ({ selectReceiver: {} },
         { onSelectReceiver: (__VLS_ctx.selectReceiver) });
     /** @type {typeof __VLS_ctx.chatListRef} */ ;
-    var __VLS_60 = {};
+    var __VLS_63 = {};
     // @ts-ignore
     [responsiveRender, receiverId, selectReceiver, chatListRef,];
-    var __VLS_56;
+    var __VLS_59;
     __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
         ...{ class: "chat-box-white grow flex flex-col h-full pt-6 overflow-hidden" },
     });
@@ -393,8 +429,8 @@ else {
         });
         /** @type {[typeof IconArrowLeft, ]} */ ;
         // @ts-ignore
-        const __VLS_63 = __VLS_asFunctionalComponent(IconArrowLeft, new IconArrowLeft({}));
-        const __VLS_64 = __VLS_63({}, ...__VLS_functionalComponentArgsRest(__VLS_63));
+        const __VLS_66 = __VLS_asFunctionalComponent(IconArrowLeft, new IconArrowLeft({}));
+        const __VLS_67 = __VLS_66({}, ...__VLS_functionalComponentArgsRest(__VLS_66));
         __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
             ...{ class: "text-xl font-semibold text-chat-haze-900 ml-3" },
         });
@@ -407,92 +443,108 @@ else {
     });
     /** @type {[typeof HomeComponent, ]} */ ;
     // @ts-ignore
-    const __VLS_67 = __VLS_asFunctionalComponent(HomeComponent, new HomeComponent({
+    const __VLS_70 = __VLS_asFunctionalComponent(HomeComponent, new HomeComponent({
         ...{ 'onCall': {} },
         ref: "homeComponentRef",
         receiverId: (__VLS_ctx.receiverId),
         ...{ class: "h-full" },
-        response: (__VLS_ctx.responsiveRender),
+        responsive: (__VLS_ctx.responsiveRender),
     }));
-    const __VLS_68 = __VLS_67({
+    const __VLS_71 = __VLS_70({
         ...{ 'onCall': {} },
         ref: "homeComponentRef",
         receiverId: (__VLS_ctx.receiverId),
         ...{ class: "h-full" },
-        response: (__VLS_ctx.responsiveRender),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_67));
-    let __VLS_70;
-    let __VLS_71;
-    const __VLS_72 = ({ call: {} },
+        responsive: (__VLS_ctx.responsiveRender),
+    }, ...__VLS_functionalComponentArgsRest(__VLS_70));
+    let __VLS_73;
+    let __VLS_74;
+    const __VLS_75 = ({ 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_73 = {};
+    var __VLS_76 = {};
     // @ts-ignore
     [currentPage, PAGE, responsiveRender, receiverId, handleCall, homeComponentRef,];
-    var __VLS_69;
+    var __VLS_72;
     if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_DETAIL) {
         // @ts-ignore
         [currentPage, PAGE,];
         /** @type {[typeof CustomerDetail, ]} */ ;
         // @ts-ignore
-        const __VLS_76 = __VLS_asFunctionalComponent(CustomerDetail, new CustomerDetail({
+        const __VLS_79 = __VLS_asFunctionalComponent(CustomerDetail, new CustomerDetail({
             ref: "customerDetailRef",
             receiverId: (__VLS_ctx.receiverId),
             ...{ class: "h-full" },
-            response: (__VLS_ctx.responsiveRender),
+            responsive: (__VLS_ctx.responsiveRender),
         }));
-        const __VLS_77 = __VLS_76({
+        const __VLS_80 = __VLS_79({
             ref: "customerDetailRef",
             receiverId: (__VLS_ctx.receiverId),
             ...{ class: "h-full" },
-            response: (__VLS_ctx.responsiveRender),
-        }, ...__VLS_functionalComponentArgsRest(__VLS_76));
+            responsive: (__VLS_ctx.responsiveRender),
+        }, ...__VLS_functionalComponentArgsRest(__VLS_79));
         /** @type {typeof __VLS_ctx.customerDetailRef} */ ;
-        var __VLS_79 = {};
+        var __VLS_82 = {};
         // @ts-ignore
         [responsiveRender, receiverId, customerDetailRef,];
-        var __VLS_78;
+        var __VLS_81;
     }
     if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_CHECK_IN) {
         // @ts-ignore
         [currentPage, PAGE,];
         /** @type {[typeof CustomerCheckIn, ]} */ ;
         // @ts-ignore
-        const __VLS_82 = __VLS_asFunctionalComponent(CustomerCheckIn, new CustomerCheckIn({
+        const __VLS_85 = __VLS_asFunctionalComponent(CustomerCheckIn, new CustomerCheckIn({
             ...{ class: "h-full" },
         }));
-        const __VLS_83 = __VLS_82({
+        const __VLS_86 = __VLS_85({
             ...{ class: "h-full" },
-        }, ...__VLS_functionalComponentArgsRest(__VLS_82));
+        }, ...__VLS_functionalComponentArgsRest(__VLS_85));
     }
     if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_APPOINTMENT) {
         // @ts-ignore
         [currentPage, PAGE,];
         /** @type {[typeof CustomerAppointment, ]} */ ;
         // @ts-ignore
-        const __VLS_86 = __VLS_asFunctionalComponent(CustomerAppointment, new CustomerAppointment({
+        const __VLS_89 = __VLS_asFunctionalComponent(CustomerAppointment, new CustomerAppointment({
             ...{ class: "h-full" },
         }));
-        const __VLS_87 = __VLS_86({
+        const __VLS_90 = __VLS_89({
             ...{ class: "h-full" },
-        }, ...__VLS_functionalComponentArgsRest(__VLS_86));
+        }, ...__VLS_functionalComponentArgsRest(__VLS_89));
     }
     /** @type {[typeof Calling, ]} */ ;
     // @ts-ignore
-    const __VLS_90 = __VLS_asFunctionalComponent(Calling, new Calling({
+    const __VLS_93 = __VLS_asFunctionalComponent(Calling, new Calling({
+        ...{ 'onUserCalling': {} },
         ref: "callingRef",
         responsive: (__VLS_ctx.responsiveRender),
     }));
-    const __VLS_91 = __VLS_90({
+    const __VLS_94 = __VLS_93({
+        ...{ 'onUserCalling': {} },
         ref: "callingRef",
         responsive: (__VLS_ctx.responsiveRender),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_90));
+    }, ...__VLS_functionalComponentArgsRest(__VLS_93));
+    let __VLS_96;
+    let __VLS_97;
+    const __VLS_98 = ({ userCalling: {} },
+        { onUserCalling: (...[$event]) => {
+                if (!!(!__VLS_ctx.isRouterReady))
+                    return;
+                if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.TENANT_ERROR))
+                    return;
+                if (!!(__VLS_ctx.responsiveRender == 'mobile'))
+                    return;
+                __VLS_ctx.emit('userCalling', $event);
+                // @ts-ignore
+                [responsiveRender, emit,];
+            } });
     /** @type {typeof __VLS_ctx.callingRef} */ ;
-    var __VLS_93 = {};
+    var __VLS_99 = {};
     // @ts-ignore
-    [responsiveRender, callingRef,];
-    var __VLS_92;
+    [callingRef,];
+    var __VLS_95;
 }
 /** @type {__VLS_StyleScopedClasses['go-chat-main']} */ ;
 /** @type {__VLS_StyleScopedClasses['max-w-full']} */ ;
@@ -504,7 +556,7 @@ else {
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
 /** @type {__VLS_StyleScopedClasses['mx-auto']} */ ;
-/** @type {__VLS_StyleScopedClasses['w-max']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['max-w-[350px]']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['bg-[#F9FAFC]']} */ ;
@@ -560,8 +612,10 @@ else {
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
 // @ts-ignore
-var __VLS_12 = __VLS_11, __VLS_25 = __VLS_24, __VLS_34 = __VLS_33, __VLS_40 = __VLS_39, __VLS_61 = __VLS_60, __VLS_74 = __VLS_73, __VLS_80 = __VLS_79, __VLS_94 = __VLS_93;
+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;
 const __VLS_export = (await import('vue')).defineComponent({
+    setup: () => (__VLS_exposed),
+    __typeEmits: {},
     __typeProps: {},
     props: {},
 });

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

@@ -47,7 +47,7 @@ const historyItems = computed(() => {
             icon: IconDate,
             label: 'Appointments',
             value: userHistory.value?.appointment?.length ?? '',
-            click: userHistory.value?.appointment.length
+            click: userHistory.value?.appointment?.length
                 ? () => {
                     routerPush(PAGE.CUSTOMER_APPOINTMENT);
                 }
@@ -61,6 +61,7 @@ const otherActions = [
     { icon: IconGroup, label: 'Add Groups' }
 ];
 const getData = async () => {
+    userHistory.value = null;
     userHistory.value = await getUserHistory(user.value?.phone?.slice(1) ?? '');
 };
 getData();
@@ -111,20 +112,20 @@ __VLS_asFunctionalElement(__VLS_elements.img)({
 });
 __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
     ...{ class: " mt-5 text-center mx-auto" },
-    ...{ class: ({ 'flex justify-between w-max': __VLS_ctx.response == 'tablet', 'grid grid-cols-3 w-full': __VLS_ctx.response == 'mobile' }) },
+    ...{ class: ({ 'flex justify-between w-max': __VLS_ctx.responsive == 'tablet', 'grid grid-cols-3 w-full': __VLS_ctx.responsive == 'mobile' }) },
 });
 // @ts-ignore
-[response, response,];
+[responsive, responsive,];
 for (const [item, i] of __VLS_getVForSourceType((__VLS_ctx.customerTotalDetail))) {
     // @ts-ignore
     [customerTotalDetail,];
     __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
         ...{ class: "border-l border-chat-haze-100 first:border-none" },
-        ...{ class: ({ 'w-full': __VLS_ctx.response == 'mobile', 'w-[130px]': __VLS_ctx.response == 'tablet' }) },
+        ...{ class: ({ 'w-full': __VLS_ctx.responsive == 'mobile', 'w-[130px]': __VLS_ctx.responsive == 'tablet' }) },
         key: (i),
     });
     // @ts-ignore
-    [response, response,];
+    [responsive, responsive,];
     __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
         ...{ class: "w-full flex items-center justify-center gap-1" },
     });

package/dist/test/chat/page/home/ChatList.vue.js

@@ -17,6 +17,7 @@ import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import { useDigibot } from '../../../composable/useDigibot';
 import { TIME_ZONE_UTC } from '../../../constant/datetime';
+import IconAiCheck from '../../../assets/icons/IconAiCheck.vue';
 dayjs.extend(updateLocale);
 dayjs.extend(relativeTime);
 dayjs.extend(utc);
@@ -92,7 +93,6 @@ const mqttMessageHandler = (topic, data) => {
         if (index != -1) {
             listConversations.value.splice(index, 1);
         }
-        console.log(hasChatBox);
         if (hasChatBox > -1) {
             listConversations.value.splice(1, 0, data);
         }
@@ -131,10 +131,12 @@ const getData = async (data, option) => {
             await nextTick();
         }
         listConversations.value.push(...(res?.items ?? []));
-        console.log(listConversations.value);
         checkHasReceiveId();
         params.value.page = res?._meta?.currentPage || 1;
         pageCount = res?._meta?.pageCount || 1;
+        if (option?.reset) {
+            getAllList();
+        }
     }
     catch (error) {
         console.error(error);
@@ -143,9 +145,15 @@ const getData = async (data, option) => {
         isLoadingSearch.value = false;
     }
 };
+const getAllList = async () => {
+    while (params.value.page < pageCount && !scrollEventRef.value?.canScroll()) {
+        let page = params.value.page + 1;
+        await getData({ page });
+    }
+};
 const checkHasReceiveId = () => {
     const hasReceiveId = listConversations.value?.some((e) => e.receiver_id === receiver_id.value && receiver_id.value);
-    if (props.response == 'tablet') {
+    if (props.responsive == 'tablet') {
         if (!hasReceiveId && listConversations.value?.length)
             emit('selectReceiver', listConversations.value[0]);
     }
@@ -182,7 +190,7 @@ const getTimeFromNow = (data) => {
     return data ?? '';
 };
 getData({}, { reset: true });
-const __VLS_exposed = { handleReadMessage };
+const __VLS_exposed = { handleReadMessage, listConversations };
 defineExpose(__VLS_exposed);
 debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
 const __VLS_modelEmit = defineEmits();
@@ -208,13 +216,13 @@ __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
 const __VLS_0 = __VLS_asFunctionalComponent(InputSearch, new InputSearch({
     ...{ 'onSearch': {} },
     ...{ class: "h-[45px] grow" },
-    response: (__VLS_ctx.response),
+    responsive: (__VLS_ctx.responsive),
     modelValue: (__VLS_ctx.keyword),
 }));
 const __VLS_1 = __VLS_0({
     ...{ 'onSearch': {} },
     ...{ class: "h-[45px] grow" },
-    response: (__VLS_ctx.response),
+    responsive: (__VLS_ctx.responsive),
     modelValue: (__VLS_ctx.keyword),
 }, ...__VLS_functionalComponentArgsRest(__VLS_0));
 let __VLS_3;
@@ -222,7 +230,7 @@ let __VLS_4;
 const __VLS_5 = ({ search: {} },
     { onSearch: (__VLS_ctx.handleSearch) });
 // @ts-ignore
-[response, keyword, handleSearch,];
+[responsive, keyword, handleSearch,];
 var __VLS_2;
 __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
     ...{ class: "h-[45px] w-[45px] rounded-full flex-center bg-[#C7DEFF]" },
@@ -285,10 +293,10 @@ for (const [user] of __VLS_getVForSourceType((__VLS_ctx.listConversations))) {
     });
     __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
         ...{ class: "w-full overflow-hidden flex items-center hover:bg-[#EDF5FF] cursor-pointer px-6 py-2" },
-        ...{ class: ({ 'bg-[#EDF5FF]': __VLS_ctx.receiver_id == user.receiver_id && __VLS_ctx.response == 'tablet' }) },
+        ...{ class: ({ 'bg-[#EDF5FF]': __VLS_ctx.receiver_id == user.receiver_id && __VLS_ctx.responsive == 'tablet' }) },
     });
     // @ts-ignore
-    [response, receiver_id,];
+    [responsive, receiver_id,];
     /** @type {[typeof Avatar, ]} */ ;
     // @ts-ignore
     const __VLS_24 = __VLS_asFunctionalComponent(Avatar, new Avatar({
@@ -321,6 +329,18 @@ for (const [user] of __VLS_getVForSourceType((__VLS_ctx.listConversations))) {
         ...{ class: "font-semibold" },
     });
     (user.username);
+    if (user.id == __VLS_ctx.digibotId) {
+        // @ts-ignore
+        [digibotId,];
+        /** @type {[typeof IconAiCheck, ]} */ ;
+        // @ts-ignore
+        const __VLS_28 = __VLS_asFunctionalComponent(IconAiCheck, new IconAiCheck({
+            ...{ class: "ml-2" },
+        }));
+        const __VLS_29 = __VLS_28({
+            ...{ class: "ml-2" },
+        }, ...__VLS_functionalComponentArgsRest(__VLS_28));
+    }
     if (user.unread_count) {
         __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
             ...{ class: "ml-2 bg-[#E60000] text-white text-xs font-bold px-2 py-[1px] flex-center rounded-full" },
@@ -394,6 +414,7 @@ var __VLS_17;
 /** @type {__VLS_StyleScopedClasses['items-center']} */ ;
 /** @type {__VLS_StyleScopedClasses['font-semibold']} */ ;
 /** @type {__VLS_StyleScopedClasses['ml-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['ml-2']} */ ;
 /** @type {__VLS_StyleScopedClasses['bg-[#E60000]']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-white']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-xs']} */ ;