@phonghq/go-chat 1.0.23 → 1.0.25

package/dist/test/components/chat/call/Calling.vue.js

@@ -1,9 +1,7 @@
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import IconPhone from '../../../assets/icons/call/IconPhone.vue';
 import { dataProfile } from '../../../utils/chat/auth.js';
-import { useCallHelper } from '../../../composable/useCallHelper';
 import IconPhoneCancel from '../../../assets/icons/call/IconPhoneCancel.vue';
-import { removeHandleWebSK } from '../../../plugins/websocket';
 import { downloadRecord } from '../../../utils/chat/call';
 import DrawerBaseCustom from '../../../components/common/drawer/DrawerBaseCustom.vue';
 import Avatar from '../../../components/chat/customer/Avatar.vue';
@@ -14,7 +12,18 @@ import IconClose from '../../../assets/icons/call/IconClose.vue';
 import { usePlivo } from '../../../composable/usePlivo';
 import { PLIVO_CALL_STATUS } from '../../../types/chat/call';
 import IconMic from '../../../assets/icons/call/IconMic.vue';
-const { call, end, handleMedia, startIncomingCall, handleCallAnswer, callAnswer, uuid, startPeerConnection } = useCallHelper();
+const props = withDefaults(defineProps(), {});
+const emit = defineEmits();
+// const {
+//   // call,
+//   // end,
+//   // handleMedia,
+//   // startIncomingCall,
+//   // handleCallAnswer,
+//   // callAnswer,
+//   // uuid,
+//   // startPeerConnection
+// } = useCallHelper()
 const handlePlivoCallBack = (status, data) => {
     if (status == PLIVO_CALL_STATUS.RINGING) {
         getUserOffer(data?.phone ?? '');
@@ -27,7 +36,8 @@ const handlePlivoCallBack = (status, data) => {
     }
     else if (status == PLIVO_CALL_STATUS.CALL_END) {
         errorMessage.value = data?.message ?? '';
-        endCall();
+        const closeModal = data?.reason == 'ORIGINATOR_CANCEL';
+        endCall({ closeModal });
         callStatus.value = status;
     }
     else if (status == PLIVO_CALL_STATUS.CALL_START) {
@@ -36,8 +46,6 @@ const handlePlivoCallBack = (status, data) => {
     }
 };
 const { plivoLogin, plivoCallAnswer, plivoCall, plivoEndCall, plivoCallSwishMute } = usePlivo(handlePlivoCallBack);
-const props = withDefaults(defineProps(), {});
-const emit = defineEmits();
 const STATUS_LABEL = computed(() => {
     return {
         [PLIVO_CALL_STATUS.CONNECTING]: 'Connecting...',
@@ -46,7 +54,10 @@ const STATUS_LABEL = computed(() => {
         [PLIVO_CALL_STATUS.CONNECT_FAILED]: errorMessage.value || 'Connect Error',
         [PLIVO_CALL_STATUS.CALL_START]: '',
         [PLIVO_CALL_STATUS.CALL_END]: errorMessage.value || 'Call Ended',
-        [PLIVO_CALL_STATUS.NO_ANSWER]: 'No Answer'
+        [PLIVO_CALL_STATUS.NO_ANSWER]: 'No Answer',
+        [PLIVO_CALL_STATUS.CANCEL]: '',
+        [PLIVO_CALL_STATUS.TIME_OUT]: '',
+        [PLIVO_CALL_STATUS.BUSY]: ''
     };
 });
 const label = computed(() => STATUS_LABEL.value[callStatus.value] ?? '');
@@ -64,10 +75,12 @@ let timeOut = null;
 let callType = 'call';
 let uuidEnd = '';
 onMounted(async () => {
-    await plivoLogin('');
+    if (dataProfile.value?.tenant_phone) {
+        await plivoLogin('');
+    }
 });
 onUnmounted(() => {
-    removeHandleWebSK('call-message');
+    // removeHandleWebSK('call-message')
     if (timer)
         clearInterval(timer);
     if (timeOut)
@@ -85,21 +98,22 @@ function startTimer() {
     }, 1000);
 }
 function endCall(option) {
-    plivoEndCall(callStatus.value);
-    callStatus.value = PLIVO_CALL_STATUS.CALL_END;
-    uuidEnd = uuid.value;
-    clearInterval(timer);
-    disable.value = false;
     if (option?.closeModal) {
         drawerVisible.value = false;
         drawerVisibleRef.value?.close();
     }
+    plivoEndCall(callStatus.value);
+    callStatus.value = PLIVO_CALL_STATUS.CALL_END;
+    clearInterval(timer);
+    disable.value = false;
     isMute.value = false;
     duration.value = '00:00';
     if (timer)
         clearInterval(timer);
     if (timeOut)
         clearTimeout(timeOut);
+    emit('endCall', userRemoter.value, callType);
+    callType = '';
 }
 const open = () => {
     drawerVisible.value = true;
@@ -231,6 +245,7 @@ const __VLS_0 = __VLS_asFunctionalComponent(DrawerBaseCustom, new DrawerBaseCust
     width: (500),
     disabledClose: (__VLS_ctx.disable),
     responsive: (__VLS_ctx.responsive),
+    absolute: true,
 }));
 const __VLS_1 = __VLS_0({
     ...{ 'onAfterClose': {} },
@@ -238,6 +253,7 @@ const __VLS_1 = __VLS_0({
     width: (500),
     disabledClose: (__VLS_ctx.disable),
     responsive: (__VLS_ctx.responsive),
+    absolute: true,
 }, ...__VLS_functionalComponentArgsRest(__VLS_0));
 let __VLS_3;
 let __VLS_4;
@@ -282,9 +298,9 @@ const { default: __VLS_8 } = __VLS_2.slots;
     __VLS_asFunctionalElement(__VLS_elements.h2, __VLS_elements.h2)({
         ...{ class: "text-2xl font-semibold" },
     });
-    (__VLS_ctx.userRemoter?.username);
+    (__VLS_ctx.userRemoter?.username || __VLS_ctx.formatPhone10number(__VLS_ctx.userRemoter?.phone ?? ''));
     // @ts-ignore
-    [userRemoter,];
+    [userRemoter, userRemoter, formatPhone10number,];
     __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
         ...{ class: "text-gray-400 mt-1" },
     });
@@ -299,7 +315,7 @@ const { default: __VLS_8 } = __VLS_2.slots;
         [callStatus, PLIVO_CALL_STATUS,];
         __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
             ...{ onClick: (__VLS_ctx.answer) },
-            ...{ class: "w-16 h-16 bg-[#22C55E] hover:bg-green-600 text-white rounded-full flex items-center justify-center shadow-lg transition" },
+            ...{ class: "w-16 h-16 bg-chat-success hover:bg-green-600 text-white rounded-full flex items-center justify-center shadow-lg transition" },
         });
         // @ts-ignore
         [answer,];
@@ -377,7 +393,7 @@ const { default: __VLS_8 } = __VLS_2.slots;
                     // @ts-ignore
                     [endCall,];
                 } },
-            ...{ class: "w-16 h-16 rounded-full bg-[#EF4444] hover:bg-red-700 flex items-center justify-center" },
+            ...{ class: "w-16 h-16 rounded-full bg-chat-error hover:bg-red-700 flex items-center justify-center" },
         });
         /** @type {[typeof IconPhoneCancel, ]} */ ;
         // @ts-ignore
@@ -392,10 +408,6 @@ const { default: __VLS_8 } = __VLS_2.slots;
     [duration,];
 }
 var __VLS_2;
-__VLS_asFunctionalElement(__VLS_elements.audio, __VLS_elements.audio)({
-    id: "go-chat-remote-audio",
-    autoplay: true,
-});
 /** @type {__VLS_StyleScopedClasses['']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
@@ -425,7 +437,7 @@ __VLS_asFunctionalElement(__VLS_elements.audio, __VLS_elements.audio)({
 /** @type {__VLS_StyleScopedClasses['mt-10']} */ ;
 /** @type {__VLS_StyleScopedClasses['w-16']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-16']} */ ;
-/** @type {__VLS_StyleScopedClasses['bg-[#22C55E]']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-chat-success']} */ ;
 /** @type {__VLS_StyleScopedClasses['hover:bg-green-600']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-white']} */ ;
 /** @type {__VLS_StyleScopedClasses['rounded-full']} */ ;
@@ -470,7 +482,7 @@ __VLS_asFunctionalElement(__VLS_elements.audio, __VLS_elements.audio)({
 /** @type {__VLS_StyleScopedClasses['w-16']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-16']} */ ;
 /** @type {__VLS_StyleScopedClasses['rounded-full']} */ ;
-/** @type {__VLS_StyleScopedClasses['bg-[#EF4444]']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-chat-error']} */ ;
 /** @type {__VLS_StyleScopedClasses['hover:bg-red-700']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
 /** @type {__VLS_StyleScopedClasses['items-center']} */ ;

package/dist/test/components/chat/common/switch/SwitchBase.vue.js

@@ -0,0 +1,70 @@
+/// <reference types="C:/phonghq/go-chat-v2/node_modules/.vue-global-types/vue_3.5_0.d.ts" />
+const props = withDefaults(defineProps(), {});
+const result = defineModel();
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_modelEmit = defineEmits();
+const __VLS_defaults = {};
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_elements;
+let __VLS_components;
+let __VLS_directives;
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ onClick: (...[$event]) => {
+            __VLS_ctx.result = !__VLS_ctx.result;
+            // @ts-ignore
+            [result, result,];
+        } },
+    ...{ class: "flex items-center gap-2 cursor-pointer w-max" },
+});
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "w-10 h-5 flex items-center bg-chat-haze-300 rounded-full p-1 cursor-pointer transition" },
+    ...{ class: (__VLS_ctx.result ? 'bg-chat-primary' : 'bg-chat-haze-300') },
+});
+// @ts-ignore
+[result,];
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "bg-white w-4 h-4 rounded-full shadow transform transition" },
+    ...{ class: (__VLS_ctx.result ? 'translate-x-4' : '') },
+});
+// @ts-ignore
+[result,];
+__VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
+    ...{ class: "font-semibold" },
+});
+(__VLS_ctx.label ?? '');
+// @ts-ignore
+[label,];
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['gap-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['cursor-pointer']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-max']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-10']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-5']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-chat-haze-300']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['p-1']} */ ;
+/** @type {__VLS_StyleScopedClasses['cursor-pointer']} */ ;
+/** @type {__VLS_StyleScopedClasses['transition']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-white']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['shadow']} */ ;
+/** @type {__VLS_StyleScopedClasses['transform']} */ ;
+/** @type {__VLS_StyleScopedClasses['transition']} */ ;
+/** @type {__VLS_StyleScopedClasses['font-semibold']} */ ;
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+    props: {},
+});
+export default {};

package/dist/test/components/chat/common/tab/TabBase.vue.js

@@ -0,0 +1,85 @@
+const props = withDefaults(defineProps(), {});
+const emit = defineEmits();
+const active = defineModel('active');
+const handleTabClick = (tab) => {
+    active.value = tab.value;
+    emit('change', tab.value);
+};
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_modelEmit = defineEmits();
+const __VLS_defaults = {};
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_elements;
+let __VLS_components;
+let __VLS_directives;
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "w-full" },
+});
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "flex p-1 bg-chat-haze-200 w-max rounded-xl" },
+});
+for (const [tab] of __VLS_getVForSourceType((__VLS_ctx.tabs))) {
+    // @ts-ignore
+    [tabs,];
+    __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
+        ...{ onClick: (...[$event]) => {
+                __VLS_ctx.handleTabClick(tab);
+                // @ts-ignore
+                [handleTabClick,];
+            } },
+        key: (tab.value),
+        ...{ class: "px-4 py-2 rounded-xl text-sm font-medium relative" },
+        ...{ class: (__VLS_ctx.active === tab.value ? 'bg-white' : '') },
+    });
+    // @ts-ignore
+    [active,];
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ class: "w-5 h-5 bg-chat-error rounded-full absolute -top-[8px] -right-2 text-white" },
+    });
+    __VLS_asFunctionalDirective(__VLS_directives.vShow)(null, { ...__VLS_directiveBindingRestFields, value: (tab.badge) }, null, null);
+    (tab.badge);
+    (tab.label);
+}
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "mt-4" },
+});
+var __VLS_0 = {};
+var __VLS_1 = __VLS_tryAsConstant(__VLS_ctx.active);
+// @ts-ignore
+[active,];
+/** @type {__VLS_StyleScopedClasses['w-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['p-1']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-chat-haze-200']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-max']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-xl']} */ ;
+/** @type {__VLS_StyleScopedClasses['px-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['py-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-xl']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-sm']} */ ;
+/** @type {__VLS_StyleScopedClasses['font-medium']} */ ;
+/** @type {__VLS_StyleScopedClasses['relative']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-5']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-5']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-chat-error']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['absolute']} */ ;
+/** @type {__VLS_StyleScopedClasses['-top-[8px]']} */ ;
+/** @type {__VLS_StyleScopedClasses['-right-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-white']} */ ;
+/** @type {__VLS_StyleScopedClasses['mt-4']} */ ;
+// @ts-ignore
+var __VLS_2 = __VLS_1, __VLS_3 = __VLS_0;
+const __VLS_base = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+    props: {},
+});
+const __VLS_export = {};
+export default {};

package/dist/test/components/chat/select/SelectBase.vue.js

@@ -6,7 +6,17 @@ const open = ref(false);
 const selectedLabel = computed(() => {
     return props.options.find(o => o.value === props.modelValue)?.label ?? '';
 });
+const positionClass = computed(() => {
+    let result = '';
+    if (props.placement === 'bottom')
+        return 'top-2 translate-y-full';
+    else
+        return '-top-4 -translate-y-full';
+    return '';
+});
 function toggle() {
+    if (props.disabled)
+        return;
     open.value = !open.value;
 }
 function select(option) {
@@ -37,16 +47,13 @@ __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
 });
 // @ts-ignore
 [toggle,];
-__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-    ...{ class: "cursor-pointer pointer-events-none" },
-});
-var __VLS_0 = {};
 __VLS_asFunctionalElement(__VLS_elements.ul, __VLS_elements.ul)({
-    ...{ class: "w-max absolute right-0  z-10 mt-1 max-h-48 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg" },
+    ...{ class: "w-max absolute -translate-y-full left-0  z-10 mt-1 max-h-48 overflow-auto rounded-md shadow-custom bg-white shadow-lg" },
+    ...{ class: (__VLS_ctx.positionClass) },
 });
 __VLS_asFunctionalDirective(__VLS_directives.vShow)(null, { ...__VLS_directiveBindingRestFields, value: (__VLS_ctx.open) }, null, null);
 // @ts-ignore
-[open,];
+[open, positionClass,];
 for (const [option, idx] of __VLS_getVForSourceType((__VLS_ctx.options))) {
     // @ts-ignore
     [options,];
@@ -57,37 +64,38 @@ for (const [option, idx] of __VLS_getVForSourceType((__VLS_ctx.options))) {
                 [select,];
             } },
         key: (idx),
-        ...{ class: "cursor-pointer text-black px-3 py-2 hover:bg-chat-haze-200" },
-        ...{ class: ({ 'bg-primary !text-white': option.value === __VLS_ctx.modelValue }) },
+        ...{ class: "cursor-pointer text-black px-6 py-2 hover:bg-chat-haze-200 border-b border-chat-haze-200" },
     });
-    // @ts-ignore
-    [modelValue,];
     (option.label);
 }
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "cursor-pointer pointer-events-none" },
+});
+var __VLS_0 = {};
 /** @type {__VLS_StyleScopedClasses['relative']} */ ;
 /** @type {__VLS_StyleScopedClasses['inline-block']} */ ;
 /** @type {__VLS_StyleScopedClasses['w-full']} */ ;
-/** @type {__VLS_StyleScopedClasses['cursor-pointer']} */ ;
-/** @type {__VLS_StyleScopedClasses['pointer-events-none']} */ ;
 /** @type {__VLS_StyleScopedClasses['w-max']} */ ;
 /** @type {__VLS_StyleScopedClasses['absolute']} */ ;
-/** @type {__VLS_StyleScopedClasses['right-0']} */ ;
+/** @type {__VLS_StyleScopedClasses['-translate-y-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['left-0']} */ ;
 /** @type {__VLS_StyleScopedClasses['z-10']} */ ;
 /** @type {__VLS_StyleScopedClasses['mt-1']} */ ;
 /** @type {__VLS_StyleScopedClasses['max-h-48']} */ ;
 /** @type {__VLS_StyleScopedClasses['overflow-auto']} */ ;
 /** @type {__VLS_StyleScopedClasses['rounded-md']} */ ;
-/** @type {__VLS_StyleScopedClasses['border']} */ ;
-/** @type {__VLS_StyleScopedClasses['border-gray-200']} */ ;
+/** @type {__VLS_StyleScopedClasses['shadow-custom']} */ ;
 /** @type {__VLS_StyleScopedClasses['bg-white']} */ ;
 /** @type {__VLS_StyleScopedClasses['shadow-lg']} */ ;
 /** @type {__VLS_StyleScopedClasses['cursor-pointer']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-black']} */ ;
-/** @type {__VLS_StyleScopedClasses['px-3']} */ ;
+/** @type {__VLS_StyleScopedClasses['px-6']} */ ;
 /** @type {__VLS_StyleScopedClasses['py-2']} */ ;
 /** @type {__VLS_StyleScopedClasses['hover:bg-chat-haze-200']} */ ;
-/** @type {__VLS_StyleScopedClasses['bg-primary']} */ ;
-/** @type {__VLS_StyleScopedClasses['!text-white']} */ ;
+/** @type {__VLS_StyleScopedClasses['border-b']} */ ;
+/** @type {__VLS_StyleScopedClasses['border-chat-haze-200']} */ ;
+/** @type {__VLS_StyleScopedClasses['cursor-pointer']} */ ;
+/** @type {__VLS_StyleScopedClasses['pointer-events-none']} */ ;
 // @ts-ignore
 var __VLS_1 = __VLS_0;
 const __VLS_base = (await import('vue')).defineComponent({

package/dist/test/components/common/drawer/DrawerBaseCustom.vue.js

@@ -51,11 +51,11 @@ let __VLS_components;
 let __VLS_directives;
 /** @type {__VLS_StyleScopedClasses['drawer-box']} */ ;
 __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-    ...{ class: "absolute top-0 bottom-0 right-0 left-0 z-[1500] drawer" },
-    ...{ class: (__VLS_ctx.show ? 'opacity-1' : 'pointer-events-none opacity-0 delay-300') },
+    ...{ class: "top-0 bottom-0 right-0 left-0 z-[1500] drawer" },
+    ...{ class: ({ 'opacity-1': __VLS_ctx.show, 'pointer-events-none opacity-0 delay-300': !__VLS_ctx.show, 'absolute': __VLS_ctx.absolute, 'fixed': !__VLS_ctx.absolute }) },
 });
 // @ts-ignore
-[show,];
+[show, show, absolute, absolute,];
 if (!__VLS_ctx.disabledClose) {
     // @ts-ignore
     [disabledClose,];
@@ -84,13 +84,18 @@ __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
     ...{ class: "flex p-4 content" },
 });
 __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({});
-/** @type {__VLS_StyleScopedClasses['absolute']} */ ;
 /** @type {__VLS_StyleScopedClasses['top-0']} */ ;
 /** @type {__VLS_StyleScopedClasses['bottom-0']} */ ;
 /** @type {__VLS_StyleScopedClasses['right-0']} */ ;
 /** @type {__VLS_StyleScopedClasses['left-0']} */ ;
 /** @type {__VLS_StyleScopedClasses['z-[1500]']} */ ;
 /** @type {__VLS_StyleScopedClasses['drawer']} */ ;
+/** @type {__VLS_StyleScopedClasses['opacity-1']} */ ;
+/** @type {__VLS_StyleScopedClasses['pointer-events-none']} */ ;
+/** @type {__VLS_StyleScopedClasses['opacity-0']} */ ;
+/** @type {__VLS_StyleScopedClasses['delay-300']} */ ;
+/** @type {__VLS_StyleScopedClasses['absolute']} */ ;
+/** @type {__VLS_StyleScopedClasses['fixed']} */ ;
 /** @type {__VLS_StyleScopedClasses['absolute']} */ ;
 /** @type {__VLS_StyleScopedClasses['w-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;

package/dist/test/composable/useDigibot.js

@@ -3,7 +3,7 @@ export const digibotData = {
     id: -98,
     receiver_id: 101,
     username: 'Gocheckin AI',
-    customer_phone: '',
+    phone: '',
     avatar: '',
     last_message: '',
     last_message_time: '',
@@ -12,6 +12,7 @@ export const digibotData = {
     unread_count: 0,
     status: 1,
     color: '#4F46E5',
+    is_unknown: 0
 };
 export const digibotId = -98;
 export function useDigibot() {

package/dist/test/composable/useInitData.js

@@ -1,11 +1,10 @@
 import { ref } from 'vue';
 import { sdkInit } from '../plugins/sdk';
-import { dataProfile, getProfile, loginLink } from '../utils/chat/auth';
+import { checkTenantPhone, dataProfile, getProfile, loginLink } from '../utils/chat/auth';
 import { routerPush } from '../utils/chat/chat-router';
 import { PAGE } from '../constant/general';
 import { subscribeToTopic, unsubscribeFromTopic } from '../plugins/mqtt';
 import { TOPIC_DETAIL_CALL } from '../constant/mqtt';
-import { getWebSocket, initWebSocket } from '../plugins/websocket';
 // import router from '../router'
 //PINIA
 export const isRouterReady = ref(false);
@@ -34,13 +33,11 @@ export function useInitData() {
     };
     const initData = async (props, response) => {
         const res = await getProfile();
-        await getWebSocket();
-        initWebSocket();
+        if (dataProfile.value?.user_type == 'tenant') {
+            await checkTenantPhone();
+        }
         unsubscribeFromTopic(TOPIC_DETAIL_CALL + dataProfile.value?.id);
         subscribeToTopic(TOPIC_DETAIL_CALL + dataProfile.value?.id);
-        // if((!res?.phone && res.tenant_id && !props.isLib)) {
-        //   router.push({name: 'tenant-phone'})
-        // }
         if (response == 'mobile') {
             routerPush(PAGE.CHAT_LIST);
         }

package/dist/test/composable/useListConversations.js

@@ -0,0 +1,124 @@
+import { nextTick, onMounted, onUnmounted, ref } from 'vue';
+import { TOPIC_HOME, TOPIC_STATUS_USER } from '../constant/mqtt';
+import { addHandleMqttMessage, connectMqtt, removeHandleMqttMessage, subscribeToTopic, unsubscribeFromTopic } from '../plugins/mqtt';
+import { dataProfile } from '../utils/chat/auth';
+import { useDebounce } from '../utils/debounce';
+import { getConversation } from '../utils/chat/conversation';
+import { readMessages } from '../utils/chat/message';
+import { useDigibot } from '../composable/useDigibot';
+const { digibotData, digibotId } = useDigibot();
+export const useListConversations = (is_unknown) => {
+    let pageCount = 0;
+    const listConversations = ref([]);
+    const params = ref({
+        page: 1,
+        search: ''
+    });
+    const isLoadingSearch = ref(false);
+    onMounted(() => {
+        handleConnectMqtt();
+    });
+    onUnmounted(() => {
+        handleDisconnectMqtt;
+    });
+    const handleDisconnectMqtt = () => {
+        TOPIC_HOME.forEach((item) => {
+            unsubscribeFromTopic(item + dataProfile.value?.id);
+            removeHandleMqttMessage('chat-list-' + item + '-' + is_unknown);
+        });
+        if (dataProfile.value?.user_type == 'tenant') {
+            subscribeToTopic(TOPIC_STATUS_USER + dataProfile.value?.id);
+            removeHandleMqttMessage('chat-list-' + TOPIC_STATUS_USER + '-' + is_unknown);
+        }
+    };
+    const handleConnectMqtt = async () => {
+        try {
+            if (dataProfile.value) {
+                await connectMqtt();
+                TOPIC_HOME.forEach((item) => {
+                    subscribeToTopic(item + dataProfile.value?.id);
+                    addHandleMqttMessage('chat-list-' + item + '-' + is_unknown, item + dataProfile.value?.id, mqttMessageHandler);
+                });
+                subscribeToTopic(TOPIC_STATUS_USER + dataProfile.value?.id);
+                addHandleMqttMessage('chat-list-' + TOPIC_STATUS_USER + '-' + is_unknown, TOPIC_STATUS_USER + dataProfile.value?.id, mqttMessageHandler);
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+    };
+    const mqttMessageHandler = (topic, data) => {
+        if ((data.is_unknown ?? 0) != is_unknown)
+            return;
+        getDataMqtt();
+        if (topic === TOPIC_HOME[0] + dataProfile.value?.id) {
+            const index = listConversations.value.findIndex((item) => item.id === data.id);
+            const hasChatBox = listConversations.value.findIndex((item) => item.id === digibotId);
+            if (index != -1) {
+                listConversations.value.splice(index, 1);
+            }
+            if (hasChatBox > -1) {
+                listConversations.value.splice(1, 0, data);
+            }
+            else {
+                listConversations.value.unshift(data);
+            }
+        }
+        if (topic === TOPIC_HOME[1] + dataProfile.value?.id) {
+            const index = listConversations.value.findIndex((item) => item.id === data.id);
+            if (index != -1) {
+                listConversations.value[index].unread_count = 0;
+            }
+        }
+        if (topic === TOPIC_HOME[2] + dataProfile.value?.id) {
+            listConversations.value.unshift(data?.conversations);
+        }
+        if (topic === TOPIC_STATUS_USER + dataProfile.value?.id) {
+            const index = listConversations.value.findIndex((e) => e.receiver_id == Number(data?.customer_id));
+            if (index != -1) {
+                listConversations.value[index].status = data.is_online ? 1 : 0;
+            }
+        }
+    };
+    const getDataMqtt = useDebounce(() => {
+        getData(undefined, { hideLoading: true, reset: true });
+    }, 5000);
+    const getData = async (data, option) => {
+        try {
+            // if (!option?.hideLoading) isLoadingSearch.value = true
+            params.value = { ...params.value, ...(data ?? {}) };
+            const res = await getConversation({ ...params.value, is_unknown });
+            if (option?.reset) {
+                listConversations.value = [];
+                if (is_unknown == 0)
+                    listConversations.value.push(digibotData);
+                await nextTick();
+            }
+            listConversations.value.push(...(res?.items ?? []));
+            params.value.page = res?._meta?.currentPage || 1;
+            pageCount = res?._meta?.pageCount || 1;
+        }
+        catch (error) {
+            console.error(error);
+        }
+        finally {
+            // isLoadingSearch.value = false
+        }
+    };
+    const handleReadMessage = (receiver_id) => {
+        const index = listConversations.value.findIndex((e) => e.receiver_id == receiver_id);
+        if (index > -1) {
+            if (listConversations.value[index].unread_count) {
+                readMessages(listConversations.value[index].id);
+                listConversations.value[index].unread_count = 0;
+            }
+        }
+    };
+    return {
+        listConversations,
+        params,
+        pageCount,
+        getData,
+        handleReadMessage
+    };
+};