@phonghq/go-chat 1.0.72 → 1.0.74

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

@@ -0,0 +1,594 @@
+/// <reference types="C:/phonghq/go-chat-v2/node_modules/.vue-global-types/vue_3.5_0.d.ts" />
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import IconPhone from '../../../assets/icons/call/IconPhone.vue';
+import { dataProfile } from '../../../utils/chat/store/auth';
+import IconPhoneCancel from '../../../assets/icons/call/IconPhoneCancel.vue';
+import { downloadRecord, getPlivoAccessToken } from '../../../utils/chat/store/call';
+import DrawerBaseCustom from '../../../components/common/drawer/DrawerBaseCustom.vue';
+import Avatar from '../../../components/chat/customer/Avatar.vue';
+import { getUserDetailChat } from '../../../utils/chat/store/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/chat/call';
+import IconMic from '../../../assets/icons/call/IconMic.vue';
+import { useDebounce } from '../../../utils/debounce';
+import { phoneNumberFormat } from '../../../utils/string-helper';
+import { handleMedialPermissionError, showPageError } from '../../../utils/chat/page-error';
+import RingAudio from '../../../assets/sound/telephone-2.mp3';
+import TimeLeft from '../../../components/chat/call/TimeLeft.vue';
+const props = withDefaults(defineProps(), {
+    responsive: 'window'
+});
+const emit = defineEmits();
+const handlePlivoCallBack = (status, data) => {
+    if (!drawerVisibleRef.value)
+        return;
+    callStatus.value = status;
+    if (status == PLIVO_CALL_STATUS.RINGING) {
+        handleInComingCall(data);
+    }
+    else if (status == PLIVO_CALL_STATUS.CHECK_USER_OFFER) {
+        getUserOffer(data?.phone ?? '');
+    }
+    else if (status == PLIVO_CALL_STATUS.CONNECT_FAILED || status == PLIVO_CALL_STATUS.NO_ANSWER) {
+        endCall();
+    }
+    else if (status == PLIVO_CALL_STATUS.CALL_END) {
+        errorMessage.value = data?.message ?? '';
+        const closeModal = data?.reason == 'ORIGINATOR_CANCEL';
+        endCall({ closeModal });
+    }
+    else if (status == PLIVO_CALL_STATUS.CALL_START) {
+        audioRef.value?.pause();
+        startTimer();
+    }
+    else if (status == PLIVO_CALL_STATUS.MEDIA_PERMISSION_FAIL) {
+        handleMedialPermissionError();
+    }
+};
+const { plivoLogin, plivoCallAnswer, plivoCall, plivoEndCall, plivoCallSwishMute, plivoCallSwishSpeaker, plivoRemoveCallBack, checkTimeLimit, } = usePlivo(handlePlivoCallBack);
+const STATUS_LABEL = computed(() => {
+    return {
+        [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',
+        [PLIVO_CALL_STATUS.CANCEL]: '',
+        [PLIVO_CALL_STATUS.TIME_OUT]: '',
+        [PLIVO_CALL_STATUS.BUSY]: '',
+        [PLIVO_CALL_STATUS.MEDIA_PERMISSION_FAIL]: '',
+        [PLIVO_CALL_STATUS.CHECK_USER_OFFER]: ''
+    };
+});
+const REFRESH_TOKEN_TIME = 15 * 60 * 1000;
+const label = computed(() => STATUS_LABEL.value[callStatus.value] ?? '');
+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 audioRef = ref(null);
+const userRemoter = ref(null);
+const isMute = ref(false);
+const limitTime = ref(0);
+let timer = null;
+let timeOut = null;
+let refreshTokenTimeOut = null;
+let refreshTokenCount = null;
+let callType = 'call';
+let uuidEnd = '';
+onMounted(async () => {
+    try {
+        if (dataProfile.value?.phone) {
+            const token = await getPlivoAccessToken();
+            await plivoLogin({ token });
+            setTimeout(refreshToken, REFRESH_TOKEN_TIME);
+        }
+    }
+    catch {
+        showPageError('We’re having trouble connecting the call. Please try again in a moment');
+    }
+});
+onBeforeUnmount(() => {
+    if (timer)
+        clearInterval(timer);
+    if (timeOut)
+        clearTimeout(timeOut);
+    endCall();
+    plivoRemoveCallBack();
+    errorMessage.value = '';
+});
+function startTimer() {
+    let sec = 0;
+    timer = setInterval(() => {
+        sec++;
+        limitTime.value = limitTime.value - 1;
+        const m = String(Math.floor(sec / 60)).padStart(2, '0');
+        const s = String(sec % 60).padStart(2, '0');
+        duration.value = `${m}:${s}`;
+        if (!limitTime.value || limitTime.value <= 0) {
+            handleTimeLimitError();
+        }
+    }, 1000);
+}
+function endCall(option) {
+    if (option?.closeModal) {
+        closeModal();
+    }
+    audioRef.value?.pause();
+    handleEmitEndCall(userRemoter.value, callType);
+    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);
+    callType = '';
+}
+const closeModal = () => {
+    drawerVisible.value = false;
+    drawerVisibleRef.value?.close();
+};
+const handleEmitEndCall = useDebounce((data, type) => {
+    emit('endCall', data, type);
+}, 500);
+const refreshToken = async () => {
+    try {
+        if (refreshTokenTimeOut) {
+            clearTimeout(refreshTokenTimeOut);
+            refreshTokenTimeOut = null;
+        }
+        const token = await getPlivoAccessToken();
+        await plivoLogin({ token, isRefresh: true });
+        setTimeout(() => refreshToken(), REFRESH_TOKEN_TIME);
+        refreshTokenCount = 0;
+    }
+    catch (e) {
+        console.log(e);
+        refreshTokenCount = refreshTokenCount + 1;
+        if (refreshTokenCount < 3) {
+            setTimeout(() => refreshToken(), 60 * 1000);
+        }
+        else {
+            showPageError('We’re having trouble connecting the call. Please try again in a moment');
+        }
+        console.log(e);
+    }
+};
+const handleInComingCall = (data) => {
+    limitTime.value = data?.limit_time ?? 0;
+    if (limitTime.value <= 0) {
+        handleTimeLimitError();
+        return;
+    }
+    emit('userCalling', userRemoter.value);
+    audioRef.value?.play();
+    open();
+};
+const open = () => {
+    drawerVisible.value = true;
+    disable.value = true;
+    drawerVisibleRef.value?.open();
+};
+const handleMute = async () => {
+    try {
+        plivoCallSwishMute(!isMute.value);
+        isMute.value = !isMute.value;
+    }
+    catch (e) {
+        alert(e);
+    }
+};
+const startCall = async (data) => {
+    try {
+        callStatus.value = PLIVO_CALL_STATUS.CONNECTING;
+        userRemoter.value = data;
+        open();
+        limitTime.value = await checkTimeLimit();
+        if (!limitTime.value || limitTime.value <= 0) {
+            handleTimeLimitError();
+            return;
+        }
+        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 = PLIVO_CALL_STATUS.CONNECT_FAILED;
+    }
+};
+const answer = async () => {
+    try {
+        await plivoCallAnswer();
+    }
+    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 = { phone, username: '' };
+        let data = {
+            phone: formatPhone10number(phone, '1'),
+            client_id: dataProfile.value?.tenant_id ?? ''
+        };
+        res = await getUserDetailChat(data);
+    }
+    catch (e) {
+        console.log(e);
+    }
+    const user = {
+        username: res?.full_name || '',
+        phone: res?.phone ? '1' + res?.phone : phone
+    };
+    userRemoter.value = user;
+    if (callStatus.value !== PLIVO_CALL_STATUS.CALL_END && callStatus.value !== PLIVO_CALL_STATUS.CHECK_USER_OFFER) {
+        emit('userCalling', userRemoter.value);
+    }
+};
+const handleTimeLimitError = () => {
+    errorMessage.value = 'Call time limit reached. This call has ended.';
+    endCall();
+};
+const exportRecordFile = async () => {
+    downloadRecord(record_link.value);
+};
+const handleAfterClose = () => {
+    checkTimeLimit();
+    record_link.value = '';
+    errorMessage.value = '';
+    uuidEnd = '';
+};
+let __VLS_exposed;
+defineExpose({ startCall, endCall, userRemoter, callStatus, answer, label, closeModal });
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_defaults = {
+    responsive: 'window'
+};
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_elements;
+let __VLS_components;
+let __VLS_directives;
+/** @type {__VLS_StyleScopedClasses['call-avatar']} */ ;
+/** @type {__VLS_StyleScopedClasses['call-avatar']} */ ;
+/** @type {__VLS_StyleScopedClasses['call-avatar']} */ ;
+/** @type {__VLS_StyleScopedClasses['call-avatar']} */ ;
+/** @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),
+    index: (1501),
+    absolute: true,
+}));
+const __VLS_1 = __VLS_0({
+    ...{ 'onAfterClose': {} },
+    ref: "drawerVisibleRef",
+    width: (500),
+    disabledClose: (__VLS_ctx.disable),
+    responsive: (__VLS_ctx.responsive),
+    index: (1501),
+    absolute: true,
+}, ...__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_6 = {};
+const { default: __VLS_8 } = __VLS_2.slots;
+// @ts-ignore
+[disable, responsive, handleAfterClose, drawerVisibleRef,];
+{
+    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 relative bg-white" },
+        ...{ style: {} },
+    });
+    /** @type {[typeof TimeLeft, ]} */ ;
+    // @ts-ignore
+    const __VLS_10 = __VLS_asFunctionalComponent(TimeLeft, new TimeLeft({
+        time: (__VLS_ctx.limitTime),
+    }));
+    const __VLS_11 = __VLS_10({
+        time: (__VLS_ctx.limitTime),
+    }, ...__VLS_functionalComponentArgsRest(__VLS_10));
+    // @ts-ignore
+    [limitTime,];
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ class: "h-40 w-40 call-avatar mb-8" },
+    });
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ class: "h-40 w-40 rounded-full overflow-hidden mb-4 border-4 border-white flex-center" },
+    });
+    /** @type {[typeof Avatar, ]} */ ;
+    // @ts-ignore
+    const __VLS_14 = __VLS_asFunctionalComponent(Avatar, new Avatar({
+        ...{ class: "bg-white z-[2]" },
+        src: (__VLS_ctx.userRemoter?.avatar ?? ''),
+        id: (__VLS_ctx.userRemoter?.id ?? ''),
+        color: (__VLS_ctx.userRemoter?.color),
+        name: (__VLS_ctx.userRemoter?.username),
+        size: "xxl",
+    }));
+    const __VLS_15 = __VLS_14({
+        ...{ class: "bg-white z-[2]" },
+        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_14));
+    // @ts-ignore
+    [userRemoter, userRemoter, userRemoter, userRemoter,];
+    if (__VLS_ctx.callStatus == __VLS_ctx.PLIVO_CALL_STATUS.RINGING || __VLS_ctx.callStatus == __VLS_ctx.PLIVO_CALL_STATUS.CALLING) {
+        // @ts-ignore
+        [callStatus, callStatus, PLIVO_CALL_STATUS, PLIVO_CALL_STATUS,];
+        __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
+            ...{ class: "bubble bubble-1" },
+        });
+        __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
+            ...{ class: "bubble bubble-2" },
+        });
+        __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
+            ...{ class: "bubble bubble-3" },
+        });
+    }
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ class: "text-center" },
+    });
+    __VLS_asFunctionalElement(__VLS_elements.h2, __VLS_elements.h2)({
+        ...{ class: "text-2xl font-semibold" },
+    });
+    (__VLS_ctx.userRemoter?.username || __VLS_ctx.phoneNumberFormat(__VLS_ctx.userRemoter?.phone ?? ''));
+    // @ts-ignore
+    [userRemoter, userRemoter, phoneNumberFormat,];
+    __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
+        ...{ class: "text-gray-400 mt-1" },
+        ...{ class: ({ 'text-2xl font-semibold': __VLS_ctx.callStatus == __VLS_ctx.PLIVO_CALL_STATUS.CALL_START }) },
+    });
+    // @ts-ignore
+    [callStatus, PLIVO_CALL_STATUS,];
+    (__VLS_ctx.callStatus == __VLS_ctx.PLIVO_CALL_STATUS.CALL_START ? __VLS_ctx.duration : __VLS_ctx.STATUS_LABEL[__VLS_ctx.callStatus]);
+    // @ts-ignore
+    [callStatus, callStatus, PLIVO_CALL_STATUS, duration, STATUS_LABEL,];
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ class: "flex items-center justify-center gap-8 mt-10" },
+    });
+    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 shadow-lg bg-white text-black rounded-full flex items-center justify-center shadow-3xl 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 text-white rounded-full flex items-center justify-center shadow-3xl 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: "shadow-3xl w-16 h-16 rounded-full bg-chat-error hover:bg-red-700 flex text-white 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));
+    }
+    if (__VLS_ctx.callStatus == __VLS_ctx.PLIVO_CALL_STATUS.RINGING) {
+        // @ts-ignore
+        [callStatus, PLIVO_CALL_STATUS,];
+        __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
+            ...{ onClick: (__VLS_ctx.answer) },
+            ...{ class: "shadow-3xl w-16 h-16 bg-chat-success hover:bg-green-600 rounded-full text-white flex items-center justify-center shadow-lg transition" },
+        });
+        // @ts-ignore
+        [answer,];
+        /** @type {[typeof IconPhone, ]} */ ;
+        // @ts-ignore
+        const __VLS_34 = __VLS_asFunctionalComponent(IconPhone, new IconPhone({}));
+        const __VLS_35 = __VLS_34({}, ...__VLS_functionalComponentArgsRest(__VLS_34));
+    }
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ class: "flex items-center justify-center gap-8 mt-10" },
+    });
+}
+var __VLS_2;
+__VLS_asFunctionalElement(__VLS_elements.audio, __VLS_elements.audio)({
+    ref: "audioRef",
+    src: (__VLS_ctx.RingAudio),
+    loop: true,
+    preload: "auto",
+});
+/** @type {typeof __VLS_ctx.audioRef} */ ;
+// @ts-ignore
+[RingAudio, audioRef,];
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['justify-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['relative']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-white']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-40']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-40']} */ ;
+/** @type {__VLS_StyleScopedClasses['call-avatar']} */ ;
+/** @type {__VLS_StyleScopedClasses['mb-8']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-40']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-40']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['overflow-hidden']} */ ;
+/** @type {__VLS_StyleScopedClasses['mb-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['border-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['border-white']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-white']} */ ;
+/** @type {__VLS_StyleScopedClasses['z-[2]']} */ ;
+/** @type {__VLS_StyleScopedClasses['bubble']} */ ;
+/** @type {__VLS_StyleScopedClasses['bubble-1']} */ ;
+/** @type {__VLS_StyleScopedClasses['bubble']} */ ;
+/** @type {__VLS_StyleScopedClasses['bubble-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['bubble']} */ ;
+/** @type {__VLS_StyleScopedClasses['bubble-3']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-2xl']} */ ;
+/** @type {__VLS_StyleScopedClasses['font-semibold']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-gray-400']} */ ;
+/** @type {__VLS_StyleScopedClasses['mt-1']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-2xl']} */ ;
+/** @type {__VLS_StyleScopedClasses['font-semibold']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['justify-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['gap-8']} */ ;
+/** @type {__VLS_StyleScopedClasses['mt-10']} */ ;
+/** @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['shadow-lg']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-white']} */ ;
+/** @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-3xl']} */ ;
+/** @type {__VLS_StyleScopedClasses['transition']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-16']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-16']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-white']} */ ;
+/** @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-3xl']} */ ;
+/** @type {__VLS_StyleScopedClasses['transition']} */ ;
+/** @type {__VLS_StyleScopedClasses['shadow-3xl']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-16']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-16']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-chat-error']} */ ;
+/** @type {__VLS_StyleScopedClasses['hover:bg-red-700']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-white']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['justify-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['shadow-3xl']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-16']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-16']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-chat-success']} */ ;
+/** @type {__VLS_StyleScopedClasses['hover:bg-green-600']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-white']} */ ;
+/** @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['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['justify-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['gap-8']} */ ;
+/** @type {__VLS_StyleScopedClasses['mt-10']} */ ;
+// @ts-ignore
+var __VLS_7 = __VLS_6;
+const __VLS_export = (await import('vue')).defineComponent({
+    setup: () => (__VLS_exposed),
+    __typeEmits: {},
+    __typeProps: {},
+    props: {},
+});
+export default {};

package/dist/components/chat/call/TimeLeft.vue.d.ts

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    time: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/chat/call/TimeLeft.vue.js

@@ -0,0 +1,59 @@
+/// <reference types="C:/phonghq/go-chat-v2/node_modules/.vue-global-types/vue_3.5_0.d.ts" />
+import { computed } from 'vue';
+import IconClock from '../../../assets/icons/call/IconClock.vue';
+const props = withDefaults(defineProps(), {});
+const emit = defineEmits();
+const limitTimeLabel = computed(() => {
+    const m2 = Math.floor(props.time / 60);
+    const s2 = props.time % 60;
+    return `${m2.toString().padStart(2, '0')}:${s2.toString().padStart(2, '0')}`;
+});
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_defaults = {};
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_elements;
+let __VLS_components;
+let __VLS_directives;
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "text-sm rounded-lg px-3 py-1.5 border border-chat-primary border-[2px] bg-[#eff6ff] absolute top-6 left-6 text-chat-primary flex items-center gap-1" },
+});
+/** @type {[typeof IconClock, ]} */ ;
+// @ts-ignore
+const __VLS_0 = __VLS_asFunctionalComponent(IconClock, new IconClock({
+    ...{ class: "w-4 h-4" },
+}));
+const __VLS_1 = __VLS_0({
+    ...{ class: "w-4 h-4" },
+}, ...__VLS_functionalComponentArgsRest(__VLS_0));
+(__VLS_ctx.limitTimeLabel);
+// @ts-ignore
+[limitTimeLabel,];
+/** @type {__VLS_StyleScopedClasses['text-sm']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-lg']} */ ;
+/** @type {__VLS_StyleScopedClasses['px-3']} */ ;
+/** @type {__VLS_StyleScopedClasses['py-1.5']} */ ;
+/** @type {__VLS_StyleScopedClasses['border']} */ ;
+/** @type {__VLS_StyleScopedClasses['border-chat-primary']} */ ;
+/** @type {__VLS_StyleScopedClasses['border-[2px]']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-[#eff6ff]']} */ ;
+/** @type {__VLS_StyleScopedClasses['absolute']} */ ;
+/** @type {__VLS_StyleScopedClasses['top-6']} */ ;
+/** @type {__VLS_StyleScopedClasses['left-6']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-chat-primary']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['gap-1']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-4']} */ ;
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+    props: {},
+});
+export default {};

package/dist/components/chat/card/CardCustomerDetail.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_1) => any;
+} & {
+    content?: (props: typeof __VLS_3) => any;
+};
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};