@phonghq/go-chat 1.0.11 → 1.0.14

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

@@ -1,50 +1,72 @@
-/// <reference types="C:/phonghq/go-chat-v2/node_modules/.vue-global-types/vue_3.5_0.d.ts" />
-import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
+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 { addHandleWebSK, removeHandleWebSK } from '../../../plugins/websocket';
-import { callClient } from '../../../utils/chat/call';
-import { useAudioStream } from '../../../composable/TestSound';
+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';
-const { handleOffer, handleOfferResponse, call, end, userRemoter, handleMedia, startIncomingCall } = useCallHelper();
-const { enqueueSpeakerChunk, processSpeakerQueue } = useAudioStream('');
-const props = withDefaults(defineProps(), {});
-const STATUS = {
-    CONNECTING: 'Connecting...',
-    CALLING: 'calling',
-    RINGING: 'ringing',
-    CONNECT_FAILED: 'Connect Error',
-    CALL_START: 'in-progress',
-    CALL_END: 'completed'
+import { getUserDetailChat } from '../../../utils/chat/user';
+import { formatPhone10number } from '../../../utils/chat/phone-string';
+import IconSoundDownload from '../../../assets/icons/call/IconSoundDownload.vue';
+import IconClose from '../../../assets/icons/call/IconClose.vue';
+import { usePlivo } from '../../../composable/usePlivo';
+import { PLIVO_CALL_STATUS } from '../../../types/call';
+import IconMic from '../../../assets/icons/call/IconMic.vue';
+const { call, end, handleMedia, startIncomingCall, handleCallAnswer, callAnswer, uuid, startPeerConnection } = useCallHelper();
+const handlePlivoCallBack = (status, data) => {
+    if (status == PLIVO_CALL_STATUS.RINGING) {
+        getUserOffer(data?.phone ?? '');
+        callStatus.value = PLIVO_CALL_STATUS.RINGING;
+        open();
+    }
+    else if (status == PLIVO_CALL_STATUS.CONNECT_FAILED || status == PLIVO_CALL_STATUS.NO_ANSWER) {
+        endCall();
+        callStatus.value = status;
+    }
+    else if (status == PLIVO_CALL_STATUS.CALL_END) {
+        errorMessage.value = data?.message ?? '';
+        endCall();
+        callStatus.value = status;
+    }
+    else if (status == PLIVO_CALL_STATUS.CALL_START) {
+        callStatus.value = status;
+        startTimer();
+    }
 };
+const { plivoLogin, plivoCallAnswer, plivoCall, plivoEndCall, plivoCallSwishMute } = usePlivo(handlePlivoCallBack);
+const props = withDefaults(defineProps(), {});
+const emit = defineEmits();
 const STATUS_LABEL = computed(() => {
     return {
-        [STATUS.CONNECTING]: 'Connecting...',
-        [STATUS.CALLING]: 'Calling...',
-        [STATUS.RINGING]: 'Ringing...',
-        [STATUS.CONNECT_FAILED]: errorMessage.value || 'Connect Error',
-        [STATUS.CALL_START]: '',
-        [STATUS.CALL_END]: 'Call Ended'
+        [PLIVO_CALL_STATUS.CONNECTING]: 'Connecting...',
+        [PLIVO_CALL_STATUS.CALLING]: 'Calling...',
+        [PLIVO_CALL_STATUS.RINGING]: 'Ringing...',
+        [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'
     };
 });
-const callStatus = ref(STATUS.CONNECTING);
+const callStatus = ref(PLIVO_CALL_STATUS.CONNECTING);
 const duration = ref('00:00');
 const drawerVisible = ref(false);
 const disable = ref(false);
 const errorMessage = ref('');
+const record_link = ref('');
 const drawerVisibleRef = ref(null);
+const userRemoter = ref(null);
+const isMute = ref(false);
 let timer = null;
 let timeOut = null;
-onMounted(() => {
-    // timeOut = setTimeout(() => {
-    //   callStatus.value = 'Connected'
-    //   startTimer()
-    // }, 2000)
+let callType = 'call';
+let uuidEnd = '';
+onMounted(async () => {
+    await plivoLogin('');
 });
 onUnmounted(() => {
+    removeHandleWebSK('call-message');
     if (timer)
         clearInterval(timer);
     if (timeOut)
@@ -61,92 +83,133 @@ function startTimer() {
         duration.value = `${m}:${s}`;
     }, 1000);
 }
-function toggleMute() {
-    alert('Mic toggled');
-}
-function toggleSpeaker() {
-    alert('Speaker toggled');
-}
-function endCall() {
-    callStatus.value = STATUS.CALL_END;
-    end('');
+function endCall(option) {
+    plivoEndCall(callStatus.value);
+    callStatus.value = PLIVO_CALL_STATUS.CALL_END;
+    uuidEnd = uuid.value;
     clearInterval(timer);
     disable.value = false;
-    drawerVisible.value = false;
-    drawerVisibleRef.value?.close();
+    if (option?.closeModal) {
+        drawerVisible.value = false;
+        drawerVisibleRef.value?.close();
+    }
+    isMute.value = false;
+    duration.value = '00:00';
     if (timer)
         clearInterval(timer);
     if (timeOut)
         clearTimeout(timeOut);
-    errorMessage.value = '';
 }
 const open = () => {
     drawerVisible.value = true;
     disable.value = true;
     drawerVisibleRef.value?.open();
 };
+const handleMute = () => {
+    plivoCallSwishMute(!isMute.value);
+    isMute.value = !isMute.value;
+};
 const startCall = async (data) => {
     try {
-        callStatus.value = STATUS.CONNECTING;
+        callStatus.value = PLIVO_CALL_STATUS.CONNECTING;
+        userRemoter.value = data;
         open();
-        await call(data);
-        callStatus.value = STATUS.CALLING;
+        callType = 'call';
+        await plivoCall(data.phone);
+        callStatus.value = PLIVO_CALL_STATUS.CALLING;
     }
     catch (e) {
+        endCall();
         console.log(e);
         errorMessage.value = e?.message || JSON.stringify(e);
-        callStatus.value = STATUS.CONNECT_FAILED;
+        callStatus.value = PLIVO_CALL_STATUS.CONNECT_FAILED;
     }
 };
-const answer = async () => {
-    await callClient(dataWebSK);
-    callStatus.value = STATUS.CALL_START;
-    // sendOfferOk()
-};
-const handleMqttMessage = async (message) => {
-    let da = true;
-    if (message?.data?.status == STATUS.RINGING) {
-        if (message?.data?.to_number == dataProfile.value?.phone) {
-            callStatus.value = STATUS.RINGING;
-            dataWebSK = {
-                from: message.data.from_number,
-                to: message.data.to_number
-            };
-            open();
-        }
-    }
-    else if (message?.data?.status == STATUS.CALL_START) {
-        try {
-            await startIncomingCall();
-            startTimer();
-            callStatus.value = STATUS.CALL_START;
-        }
-        catch (e) {
-            console.log(e);
-            endCall();
-        }
+const answer = async (message) => {
+    try {
+        await plivoCallAnswer();
     }
-    else if (message?.data?.status == STATUS.CALL_END) {
+    catch (e) {
         endCall();
+        callStatus.value = PLIVO_CALL_STATUS.CONNECT_FAILED;
+        errorMessage.value = e?.message || JSON.stringify(e);
+    }
+};
+const getUserOffer = async (phone) => {
+    let res = null;
+    try {
+        userRemoter.value = null;
+        let data = {
+            phone: formatPhone10number(phone, '1'),
+            client_id: dataProfile.value?.tenant_id ?? ''
+        };
+        res = await getUserDetailChat(data);
     }
-    else {
-        da = false;
-        handleMedia(message);
+    catch (e) {
+        console.log(e);
     }
-    if (da)
-        console.log(message);
+    const user = {
+        username: res?.full_name || 'Unknown Name',
+        phone: '1' + res?.phone
+    };
+    userRemoter.value = user;
+    emit('userCalling', userRemoter.value);
+};
+// const handleMqttMessage = async (message: any) => {
+//   console.log(message)
+//   let da = true
+//   if (message.event == 'call_update') {
+//     if (message?.data?.status == PLIVO_CALL_STATUS.RINGING) {
+//       if (message?.data?.to_number == dataProfile.value?.phone) {
+//         callStatus.value = PLIVO_CALL_STATUS.RINGING
+//         dataWebSK = {
+//           from: message.data.from_number,
+//           to: message.data.to_number
+//         }
+//         getUserOffer(message.data.from_number)
+//         handleCallAnswer(message)
+//         open()
+//       }
+//     } else if (message?.data?.status == PLIVO_CALL_STATUS.CALL_START) {
+//       try {
+//         await startIncomingCall(message?.data?.call_uuid)
+//         startTimer()
+//         callStatus.value = PLIVO_CALL_STATUS.CALL_START
+//       } catch (e) {
+//         console.log(e)
+//         endCall()
+//       }
+//     } else if (message?.data?.status == PLIVO_CALL_STATUS.CALL_END) {
+//       endCall()
+//     } else if (
+//       message?.data?.status == PLIVO_CALL_STATUS.CONNECT_FAILED ||
+//       message?.data?.status == PLIVO_CALL_STATUS.NO_ANSWER
+//     ) {
+//       endCall()
+//       callStatus.value = message?.data?.status
+//     } else {
+//       // console.log(message)
+//       da = false
+//       // handleMedia(message)
+//     }
+//   } else if (message?.event == 'record_uploaded') {
+//     if (uuidEnd == message?.data?.call_uuid) {
+//       record_link.value = message?.data?.recording_url
+//     }
+//   }
+//
+//   // if (da){
+//   // } else console.log('-----------------', message)
+// }
+const exportRecordFile = async () => {
+    downloadRecord(record_link.value);
+};
+const handleAfterClose = () => {
+    record_link.value = '';
+    uuidEnd = '';
 };
 const __VLS_exposed = { startCall, endCall };
 defineExpose(__VLS_exposed);
-watch(dataProfile, async (newValue, oldValue) => {
-    if (oldValue?.id && oldValue?.id != newValue?.id) {
-        removeHandleWebSK('call-message');
-    }
-    if (newValue?.id && oldValue?.id != newValue?.id) {
-        addHandleWebSK('call-message', handleMqttMessage);
-        addHandleWebSK('call-message', handleMqttMessage);
-    }
-}, { immediate: true });
 debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
 const __VLS_defaults = {};
 const __VLS_ctx = {
@@ -154,6 +217,7 @@ const __VLS_ctx = {
     ...{},
     ...{},
     ...{},
+    ...{},
 };
 let __VLS_elements;
 let __VLS_components;
@@ -161,24 +225,30 @@ let __VLS_directives;
 /** @type {[typeof DrawerBaseCustom, typeof DrawerBaseCustom, ]} */ ;
 // @ts-ignore
 const __VLS_0 = __VLS_asFunctionalComponent(DrawerBaseCustom, new DrawerBaseCustom({
+    ...{ 'onAfterClose': {} },
     ref: "drawerVisibleRef",
     width: (500),
     disabledClose: (__VLS_ctx.disable),
     responsive: (__VLS_ctx.responsive),
 }));
 const __VLS_1 = __VLS_0({
+    ...{ 'onAfterClose': {} },
     ref: "drawerVisibleRef",
     width: (500),
     disabledClose: (__VLS_ctx.disable),
     responsive: (__VLS_ctx.responsive),
 }, ...__VLS_functionalComponentArgsRest(__VLS_0));
+let __VLS_3;
+let __VLS_4;
+const __VLS_5 = ({ afterClose: {} },
+    { onAfterClose: (__VLS_ctx.handleAfterClose) });
 /** @type {typeof __VLS_ctx.drawerVisibleRef} */ ;
-var __VLS_3 = {};
-const { default: __VLS_5 } = __VLS_2.slots;
+var __VLS_6 = {};
+const { default: __VLS_8 } = __VLS_2.slots;
 // @ts-ignore
-[disable, responsive, drawerVisibleRef,];
+[disable, responsive, handleAfterClose, drawerVisibleRef,];
 {
-    const { content: __VLS_6 } = __VLS_2.slots;
+    const { content: __VLS_9 } = __VLS_2.slots;
     __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
         ...{ class: "flex flex-col items-center justify-center h-full bg-chat-haze-300 text-white relative" },
     });
@@ -187,7 +257,7 @@ const { default: __VLS_5 } = __VLS_2.slots;
     });
     /** @type {[typeof Avatar, ]} */ ;
     // @ts-ignore
-    const __VLS_7 = __VLS_asFunctionalComponent(Avatar, new Avatar({
+    const __VLS_10 = __VLS_asFunctionalComponent(Avatar, new Avatar({
         ...{ class: "" },
         src: (__VLS_ctx.userRemoter?.avatar ?? ''),
         id: (__VLS_ctx.userRemoter?.id ?? ''),
@@ -195,14 +265,14 @@ const { default: __VLS_5 } = __VLS_2.slots;
         name: (__VLS_ctx.userRemoter?.username),
         size: "xxl",
     }));
-    const __VLS_8 = __VLS_7({
+    const __VLS_11 = __VLS_10({
         ...{ class: "" },
         src: (__VLS_ctx.userRemoter?.avatar ?? ''),
         id: (__VLS_ctx.userRemoter?.id ?? ''),
         color: (__VLS_ctx.userRemoter?.color),
         name: (__VLS_ctx.userRemoter?.username),
         size: "xxl",
-    }, ...__VLS_functionalComponentArgsRest(__VLS_7));
+    }, ...__VLS_functionalComponentArgsRest(__VLS_10));
     // @ts-ignore
     [userRemoter, userRemoter, userRemoter, userRemoter,];
     __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
@@ -223,9 +293,9 @@ const { default: __VLS_5 } = __VLS_2.slots;
     __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
         ...{ class: "flex items-center justify-center gap-8 mt-10" },
     });
-    if (__VLS_ctx.callStatus == __VLS_ctx.STATUS.RINGING) {
+    if (__VLS_ctx.callStatus == __VLS_ctx.PLIVO_CALL_STATUS.RINGING) {
         // @ts-ignore
-        [callStatus, STATUS,];
+        [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" },
@@ -234,19 +304,85 @@ const { default: __VLS_5 } = __VLS_2.slots;
         [answer,];
         /** @type {[typeof IconPhone, ]} */ ;
         // @ts-ignore
-        const __VLS_11 = __VLS_asFunctionalComponent(IconPhone, new IconPhone({}));
-        const __VLS_12 = __VLS_11({}, ...__VLS_functionalComponentArgsRest(__VLS_11));
+        const __VLS_14 = __VLS_asFunctionalComponent(IconPhone, new IconPhone({}));
+        const __VLS_15 = __VLS_14({}, ...__VLS_functionalComponentArgsRest(__VLS_14));
+    }
+    if (__VLS_ctx.record_link && __VLS_ctx.callStatus == __VLS_ctx.PLIVO_CALL_STATUS.CALL_END) {
+        // @ts-ignore
+        [callStatus, PLIVO_CALL_STATUS, record_link,];
+        __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
+            ...{ onClick: (__VLS_ctx.exportRecordFile) },
+            href: (__VLS_ctx.record_link),
+            download: "recording.mp3",
+            ...{ class: "w-16 h-16 bg-white hover:bg-green-600 text-white rounded-full flex items-center justify-center shadow-lg transition" },
+        });
+        // @ts-ignore
+        [record_link, exportRecordFile,];
+        /** @type {[typeof IconSoundDownload, ]} */ ;
+        // @ts-ignore
+        const __VLS_18 = __VLS_asFunctionalComponent(IconSoundDownload, new IconSoundDownload({}));
+        const __VLS_19 = __VLS_18({}, ...__VLS_functionalComponentArgsRest(__VLS_18));
+    }
+    if (__VLS_ctx.callStatus == __VLS_ctx.PLIVO_CALL_STATUS.CALL_START) {
+        // @ts-ignore
+        [callStatus, PLIVO_CALL_STATUS,];
+        __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
+            ...{ onClick: (...[$event]) => {
+                    if (!(__VLS_ctx.callStatus == __VLS_ctx.PLIVO_CALL_STATUS.CALL_START))
+                        return;
+                    __VLS_ctx.handleMute();
+                    // @ts-ignore
+                    [handleMute,];
+                } },
+            ...{ class: "w-16 h-16 bg-white hover:bg-green-600 text-black rounded-full flex items-center justify-center shadow-lg transition" },
+        });
+        /** @type {[typeof IconMic, ]} */ ;
+        // @ts-ignore
+        const __VLS_22 = __VLS_asFunctionalComponent(IconMic, new IconMic({
+            mute: (__VLS_ctx.isMute),
+        }));
+        const __VLS_23 = __VLS_22({
+            mute: (__VLS_ctx.isMute),
+        }, ...__VLS_functionalComponentArgsRest(__VLS_22));
+        // @ts-ignore
+        [isMute,];
+    }
+    if (__VLS_ctx.callStatus == __VLS_ctx.PLIVO_CALL_STATUS.CALL_END) {
+        // @ts-ignore
+        [callStatus, PLIVO_CALL_STATUS,];
+        __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
+            ...{ onClick: (...[$event]) => {
+                    if (!(__VLS_ctx.callStatus == __VLS_ctx.PLIVO_CALL_STATUS.CALL_END))
+                        return;
+                    __VLS_ctx.endCall({ closeModal: true });
+                    // @ts-ignore
+                    [endCall,];
+                } },
+            ...{ class: "w-16 h-16 bg-white hover:bg-green-600 text-white rounded-full flex items-center justify-center shadow-lg transition" },
+        });
+        /** @type {[typeof IconClose, ]} */ ;
+        // @ts-ignore
+        const __VLS_26 = __VLS_asFunctionalComponent(IconClose, new IconClose({}));
+        const __VLS_27 = __VLS_26({}, ...__VLS_functionalComponentArgsRest(__VLS_26));
+    }
+    if (__VLS_ctx.callStatus != __VLS_ctx.PLIVO_CALL_STATUS.CALL_END) {
+        // @ts-ignore
+        [callStatus, PLIVO_CALL_STATUS,];
+        __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
+            ...{ onClick: (...[$event]) => {
+                    if (!(__VLS_ctx.callStatus != __VLS_ctx.PLIVO_CALL_STATUS.CALL_END))
+                        return;
+                    __VLS_ctx.endCall();
+                    // @ts-ignore
+                    [endCall,];
+                } },
+            ...{ class: "w-16 h-16 rounded-full bg-[#EF4444] hover:bg-red-700 flex items-center justify-center" },
+        });
+        /** @type {[typeof IconPhoneCancel, ]} */ ;
+        // @ts-ignore
+        const __VLS_30 = __VLS_asFunctionalComponent(IconPhoneCancel, new IconPhoneCancel({}));
+        const __VLS_31 = __VLS_30({}, ...__VLS_functionalComponentArgsRest(__VLS_30));
     }
-    __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
-        ...{ onClick: (__VLS_ctx.endCall) },
-        ...{ class: "w-16 h-16 rounded-full bg-[#EF4444] hover:bg-red-700 flex items-center justify-center" },
-    });
-    // @ts-ignore
-    [endCall,];
-    /** @type {[typeof IconPhoneCancel, ]} */ ;
-    // @ts-ignore
-    const __VLS_15 = __VLS_asFunctionalComponent(IconPhoneCancel, new IconPhoneCancel({}));
-    const __VLS_16 = __VLS_15({}, ...__VLS_functionalComponentArgsRest(__VLS_15));
     __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
         ...{ class: "absolute bottom-6 text-gray-500 text-sm" },
     });
@@ -255,10 +391,6 @@ const { default: __VLS_5 } = __VLS_2.slots;
     [duration,];
 }
 var __VLS_2;
-__VLS_asFunctionalElement(__VLS_elements.audio, __VLS_elements.audio)({
-    id: "go-chat-local-audio",
-    autoplay: true,
-});
 __VLS_asFunctionalElement(__VLS_elements.audio, __VLS_elements.audio)({
     id: "go-chat-remote-audio",
     autoplay: true,
@@ -303,6 +435,39 @@ __VLS_asFunctionalElement(__VLS_elements.audio, __VLS_elements.audio)({
 /** @type {__VLS_StyleScopedClasses['transition']} */ ;
 /** @type {__VLS_StyleScopedClasses['w-16']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-16']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-white']} */ ;
+/** @type {__VLS_StyleScopedClasses['hover:bg-green-600']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-white']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['justify-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['shadow-lg']} */ ;
+/** @type {__VLS_StyleScopedClasses['transition']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-16']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-16']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-white']} */ ;
+/** @type {__VLS_StyleScopedClasses['hover:bg-green-600']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-black']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['justify-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['shadow-lg']} */ ;
+/** @type {__VLS_StyleScopedClasses['transition']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-16']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-16']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-white']} */ ;
+/** @type {__VLS_StyleScopedClasses['hover:bg-green-600']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-white']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['justify-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['shadow-lg']} */ ;
+/** @type {__VLS_StyleScopedClasses['transition']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-16']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-16']} */ ;
 /** @type {__VLS_StyleScopedClasses['rounded-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['bg-[#EF4444]']} */ ;
 /** @type {__VLS_StyleScopedClasses['hover:bg-red-700']} */ ;
@@ -314,9 +479,10 @@ __VLS_asFunctionalElement(__VLS_elements.audio, __VLS_elements.audio)({
 /** @type {__VLS_StyleScopedClasses['text-gray-500']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-sm']} */ ;
 // @ts-ignore
-var __VLS_4 = __VLS_3;
+var __VLS_7 = __VLS_6;
 const __VLS_export = (await import('vue')).defineComponent({
     setup: () => (__VLS_exposed),
+    __typeEmits: {},
     __typeProps: {},
     props: {},
 });

package/dist/test/components/chat/common/input/InputSearch.vue.js

@@ -40,12 +40,12 @@ const __VLS_1 = __VLS_0({}, ...__VLS_functionalComponentArgsRest(__VLS_0));
 __VLS_asFunctionalElement(__VLS_elements.input)({
     ...{ onInput: (__VLS_ctx.search) },
     ...{ class: "sc-full chat-input bg-[#F7F8F9] pr-4 py-3 pl-10" },
-    ...{ class: ({ '!bg-white': __VLS_ctx.response == 'mobile' }) },
+    ...{ class: ({ '!bg-white': __VLS_ctx.responsive == 'mobile' }) },
     placeholder: (props.placeholder),
 });
 (__VLS_ctx.keyword);
 // @ts-ignore
-[search, response, keyword,];
+[search, responsive, keyword,];
 /** @type {__VLS_StyleScopedClasses['relative']} */ ;
 /** @type {__VLS_StyleScopedClasses['absolute']} */ ;
 /** @type {__VLS_StyleScopedClasses['inset-y-0']} */ ;

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

@@ -0,0 +1,98 @@
+/// <reference types="C:/phonghq/go-chat-v2/node_modules/.vue-global-types/vue_3.5_0.d.ts" />
+import { ref, computed } from 'vue';
+const props = defineProps();
+const emit = defineEmits();
+const open = ref(false);
+const selectedLabel = computed(() => {
+    return props.options.find(o => o.value === props.modelValue)?.label ?? '';
+});
+function toggle() {
+    open.value = !open.value;
+}
+function select(option) {
+    emit('update:modelValue', option.value);
+    emit('select', option.value);
+    open.value = false;
+}
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_elements;
+let __VLS_components;
+let __VLS_directives;
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ onBlur: (...[$event]) => {
+            __VLS_ctx.open = false;
+            // @ts-ignore
+            [open,];
+        } },
+    ...{ onClick: (__VLS_ctx.toggle) },
+    ...{ class: "relative inline-block w-full" },
+    tabindex: "0",
+});
+// @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" },
+});
+__VLS_asFunctionalDirective(__VLS_directives.vShow)(null, { ...__VLS_directiveBindingRestFields, value: (__VLS_ctx.open) }, null, null);
+// @ts-ignore
+[open,];
+for (const [option, idx] of __VLS_getVForSourceType((__VLS_ctx.options))) {
+    // @ts-ignore
+    [options,];
+    __VLS_asFunctionalElement(__VLS_elements.li, __VLS_elements.li)({
+        ...{ onClick: (...[$event]) => {
+                __VLS_ctx.select(option);
+                // @ts-ignore
+                [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 }) },
+    });
+    // @ts-ignore
+    [modelValue,];
+    (option.label);
+}
+/** @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['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['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['py-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['hover:bg-chat-haze-200']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-primary']} */ ;
+/** @type {__VLS_StyleScopedClasses['!text-white']} */ ;
+// @ts-ignore
+var __VLS_1 = __VLS_0;
+const __VLS_base = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+});
+const __VLS_export = {};
+export default {};

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

@@ -1,4 +1,3 @@
-/// <reference types="C:/phonghq/go-chat-v2/node_modules/.vue-global-types/vue_3.5_0.d.ts" />
 import { computed, ref } from 'vue';
 const props = withDefaults(defineProps(), {
     position: 'right',