@phonghq/go-chat 1.0.42 → 1.0.44

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

@@ -1,3 +1,4 @@
+/// <reference types="C:/phonghq/go-chat-v2/node_modules/.vue-global-types/vue_3.5_0.d.ts" />
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import IconPhone from '../../../assets/icons/call/IconPhone.vue';
 import { dataProfile } from '../../../utils/chat/auth.js';
@@ -12,9 +13,12 @@ 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 { useError } from '../../../composable/useError';
 import { useDebounce } from '../../../utils/debounce';
-const props = withDefaults(defineProps(), {});
+import { phoneNumberFormat } from '../../../utils/string-helper';
+import { handleMedialPermissionError, showPageError } from '../../../utils/chat/page-error';
+const props = withDefaults(defineProps(), {
+    responsive: 'window'
+});
 const emit = defineEmits();
 // const {
 //   // call,
@@ -47,11 +51,11 @@ const handlePlivoCallBack = (status, data) => {
         startTimer();
     }
     else if (status == PLIVO_CALL_STATUS.MEDIA_PERMISSION_FAIL) {
-        emit('error:mediaPermissionFail');
+        handleMedialPermissionError();
     }
 };
-const { plivoLogin, plivoCallAnswer, plivoCall, plivoEndCall, plivoCallSwishMute } = usePlivo(handlePlivoCallBack);
-const { showError } = useError();
+const { plivoLogin, plivoCallAnswer, plivoCall, plivoEndCall, plivoCallSwishMute, plivoCallSwishSpeaker } = usePlivo(handlePlivoCallBack);
+// const { showError } = useError()
 const STATUS_LABEL = computed(() => {
     return {
         [PLIVO_CALL_STATUS.CONNECTING]: 'Connecting...',
@@ -92,7 +96,7 @@ onMounted(async () => {
         }
     }
     catch {
-        showError('We’re having trouble connecting the call. Please try again in a moment');
+        showPageError('We’re having trouble connecting the call. Please try again in a moment');
     }
 });
 onUnmounted(() => {
@@ -156,7 +160,7 @@ const refreshToken = async () => {
             setTimeout(() => refreshToken(), 60 * 1000);
         }
         else {
-            showError('We’re having trouble connecting the call. Please try again in a moment');
+            showPageError('We’re having trouble connecting the call. Please try again in a moment');
         }
         console.log(e);
     }
@@ -166,9 +170,14 @@ const open = () => {
     disable.value = true;
     drawerVisibleRef.value?.open();
 };
-const handleMute = () => {
-    plivoCallSwishMute(!isMute.value);
-    isMute.value = !isMute.value;
+const handleMute = async () => {
+    try {
+        plivoCallSwishMute(!isMute.value);
+        isMute.value = !isMute.value;
+    }
+    catch (e) {
+        alert(e);
+    }
 };
 const startCall = async (data) => {
     try {
@@ -204,14 +213,15 @@ const getUserOffer = async (phone) => {
             phone: formatPhone10number(phone, '1'),
             client_id: dataProfile.value?.tenant_id ?? ''
         };
+        console.log(data);
         res = await getUserDetailChat(data);
     }
     catch (e) {
         console.log(e);
     }
     const user = {
-        username: res?.full_name || 'Unknown Name',
-        phone: '1' + res?.phone
+        username: res?.full_name || '',
+        phone: res?.phone ? '1' + res?.phone : phone
     };
     userRemoter.value = user;
     emit('userCalling', userRemoter.value);
@@ -272,7 +282,9 @@ const handleAfterClose = () => {
 let __VLS_exposed;
 defineExpose({ startCall, endCall, userRemoter, callStatus, answer, label });
 debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
-const __VLS_defaults = {};
+const __VLS_defaults = {
+    responsive: 'window'
+};
 const __VLS_ctx = {
     ...{},
     ...{},
@@ -283,6 +295,11 @@ 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 {__VLS_StyleScopedClasses['call-avatar']} */ ;
 /** @type {[typeof DrawerBaseCustom, typeof DrawerBaseCustom, ]} */ ;
 // @ts-ignore
 const __VLS_0 = __VLS_asFunctionalComponent(DrawerBaseCustom, new DrawerBaseCustom({
@@ -313,15 +330,19 @@ const { default: __VLS_8 } = __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" },
+        ...{ class: "flex flex-col items-center justify-center h-full relative bg-white" },
+        ...{ style: {} },
+    });
+    __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-gray-700 flex-center" },
+        ...{ class: "h-40 w-40 rounded-full overflow-hidden mb-4 border-4 border-white flex-center" },
     });
     /** @type {[typeof Avatar, ]} */ ;
     // @ts-ignore
     const __VLS_10 = __VLS_asFunctionalComponent(Avatar, new Avatar({
-        ...{ class: "" },
+        ...{ class: "bg-white z-[2]" },
         src: (__VLS_ctx.userRemoter?.avatar ?? ''),
         id: (__VLS_ctx.userRemoter?.id ?? ''),
         color: (__VLS_ctx.userRemoter?.color),
@@ -329,7 +350,7 @@ const { default: __VLS_8 } = __VLS_2.slots;
         size: "xxl",
     }));
     const __VLS_11 = __VLS_10({
-        ...{ class: "" },
+        ...{ class: "bg-white z-[2]" },
         src: (__VLS_ctx.userRemoter?.avatar ?? ''),
         id: (__VLS_ctx.userRemoter?.id ?? ''),
         color: (__VLS_ctx.userRemoter?.color),
@@ -338,38 +359,37 @@ const { default: __VLS_8 } = __VLS_2.slots;
     }, ...__VLS_functionalComponentArgsRest(__VLS_10));
     // @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.formatPhone10number(__VLS_ctx.userRemoter?.phone ?? ''));
+    (__VLS_ctx.userRemoter?.username || __VLS_ctx.phoneNumberFormat(__VLS_ctx.userRemoter?.phone ?? ''));
     // @ts-ignore
-    [userRemoter, userRemoter, formatPhone10number,];
+    [userRemoter, userRemoter, phoneNumberFormat,];
     __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
         ...{ class: "text-gray-400 mt-1" },
     });
-    (__VLS_ctx.STATUS_LABEL[__VLS_ctx.callStatus]);
+    (__VLS_ctx.callStatus == __VLS_ctx.PLIVO_CALL_STATUS.CALL_START ? __VLS_ctx.duration : __VLS_ctx.STATUS_LABEL[__VLS_ctx.callStatus]);
     // @ts-ignore
-    [STATUS_LABEL, callStatus,];
+    [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.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: "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,];
-        /** @type {[typeof IconPhone, ]} */ ;
-        // @ts-ignore
-        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,];
@@ -383,8 +403,8 @@ const { default: __VLS_8 } = __VLS_2.slots;
         [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));
+        const __VLS_14 = __VLS_asFunctionalComponent(IconSoundDownload, new IconSoundDownload({}));
+        const __VLS_15 = __VLS_14({}, ...__VLS_functionalComponentArgsRest(__VLS_14));
     }
     if (__VLS_ctx.callStatus == __VLS_ctx.PLIVO_CALL_STATUS.CALL_START) {
         // @ts-ignore
@@ -397,16 +417,16 @@ const { default: __VLS_8 } = __VLS_2.slots;
                     // @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" },
+            ...{ class: "w-16 h-16 shadow-lg bg-white hover:bg-green-600 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({
+        const __VLS_18 = __VLS_asFunctionalComponent(IconMic, new IconMic({
             mute: (__VLS_ctx.isMute),
         }));
-        const __VLS_23 = __VLS_22({
+        const __VLS_19 = __VLS_18({
             mute: (__VLS_ctx.isMute),
-        }, ...__VLS_functionalComponentArgsRest(__VLS_22));
+        }, ...__VLS_functionalComponentArgsRest(__VLS_18));
         // @ts-ignore
         [isMute,];
     }
@@ -421,12 +441,12 @@ const { default: __VLS_8 } = __VLS_2.slots;
                     // @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" },
+            ...{ class: "w-16 h-16 bg-white hover:bg-green-600 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));
+        const __VLS_22 = __VLS_asFunctionalComponent(IconClose, new IconClose({}));
+        const __VLS_23 = __VLS_22({}, ...__VLS_functionalComponentArgsRest(__VLS_22));
     }
     if (__VLS_ctx.callStatus != __VLS_ctx.PLIVO_CALL_STATUS.CALL_END) {
         // @ts-ignore
@@ -439,38 +459,59 @@ const { default: __VLS_8 } = __VLS_2.slots;
                     // @ts-ignore
                     [endCall,];
                 } },
-            ...{ class: "w-16 h-16 rounded-full bg-chat-error hover:bg-red-700 flex items-center justify-center" },
+            ...{ 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_26 = __VLS_asFunctionalComponent(IconPhoneCancel, new IconPhoneCancel({}));
+        const __VLS_27 = __VLS_26({}, ...__VLS_functionalComponentArgsRest(__VLS_26));
+    }
+    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_30 = __VLS_asFunctionalComponent(IconPhone, new IconPhone({}));
         const __VLS_31 = __VLS_30({}, ...__VLS_functionalComponentArgsRest(__VLS_30));
     }
-    __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
-        ...{ class: "absolute bottom-6 text-gray-500 text-sm" },
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ class: "flex items-center justify-center gap-8 mt-10" },
     });
-    (__VLS_ctx.duration);
-    // @ts-ignore
-    [duration,];
 }
 var __VLS_2;
-/** @type {__VLS_StyleScopedClasses['']} */ ;
 /** @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['bg-chat-haze-300']} */ ;
-/** @type {__VLS_StyleScopedClasses['text-white']} */ ;
 /** @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-gray-700']} */ ;
+/** @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']} */ ;
@@ -483,7 +524,7 @@ var __VLS_2;
 /** @type {__VLS_StyleScopedClasses['mt-10']} */ ;
 /** @type {__VLS_StyleScopedClasses['w-16']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-16']} */ ;
-/** @type {__VLS_StyleScopedClasses['bg-chat-success']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-white']} */ ;
 /** @type {__VLS_StyleScopedClasses['hover:bg-green-600']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-white']} */ ;
 /** @type {__VLS_StyleScopedClasses['rounded-full']} */ ;
@@ -494,49 +535,54 @@ var __VLS_2;
 /** @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['hover:bg-green-600']} */ ;
-/** @type {__VLS_StyleScopedClasses['text-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-lg']} */ ;
+/** @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['hover:bg-green-600']} */ ;
-/** @type {__VLS_StyleScopedClasses['text-black']} */ ;
+/** @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['shadow-3xl']} */ ;
 /** @type {__VLS_StyleScopedClasses['transition']} */ ;
+/** @type {__VLS_StyleScopedClasses['shadow-3xl']} */ ;
 /** @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['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-lg']} */ ;
-/** @type {__VLS_StyleScopedClasses['transition']} */ ;
+/** @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['bg-chat-error']} */ ;
-/** @type {__VLS_StyleScopedClasses['hover:bg-red-700']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-white']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
 /** @type {__VLS_StyleScopedClasses['items-center']} */ ;
 /** @type {__VLS_StyleScopedClasses['justify-center']} */ ;
-/** @type {__VLS_StyleScopedClasses['absolute']} */ ;
-/** @type {__VLS_StyleScopedClasses['bottom-6']} */ ;
-/** @type {__VLS_StyleScopedClasses['text-gray-500']} */ ;
-/** @type {__VLS_StyleScopedClasses['text-sm']} */ ;
+/** @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({

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

@@ -1,3 +1,4 @@
+/// <reference types="C:/phonghq/go-chat-v2/node_modules/.vue-global-types/vue_3.5_0.d.ts" />
 const props = withDefaults(defineProps(), {});
 const emit = defineEmits();
 const active = defineModel('active');

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

@@ -0,0 +1,92 @@
+import { Tabs, TabsList, TabsTrigger } from '../../../ui/tabs';
+const props = withDefaults(defineProps(), {});
+const active = defineModel('active');
+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: "flex w-full max-w-sm flex-col gap-6" },
+});
+const __VLS_0 = {}.Tabs;
+/** @type {[typeof __VLS_components.Tabs, typeof __VLS_components.Tabs, ]} */ ;
+// @ts-ignore
+Tabs;
+// @ts-ignore
+const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({
+    modelValue: (__VLS_ctx.active),
+}));
+const __VLS_2 = __VLS_1({
+    modelValue: (__VLS_ctx.active),
+}, ...__VLS_functionalComponentArgsRest(__VLS_1));
+const { default: __VLS_4 } = __VLS_3.slots;
+// @ts-ignore
+[active,];
+const __VLS_5 = {}.TabsList;
+/** @type {[typeof __VLS_components.TabsList, typeof __VLS_components.TabsList, ]} */ ;
+// @ts-ignore
+TabsList;
+// @ts-ignore
+const __VLS_6 = __VLS_asFunctionalComponent(__VLS_5, new __VLS_5({}));
+const __VLS_7 = __VLS_6({}, ...__VLS_functionalComponentArgsRest(__VLS_6));
+const { default: __VLS_9 } = __VLS_8.slots;
+for (const [item] of __VLS_getVForSourceType((__VLS_ctx.tabs))) {
+    // @ts-ignore
+    [tabs,];
+    const __VLS_10 = {}.TabsTrigger;
+    /** @type {[typeof __VLS_components.TabsTrigger, typeof __VLS_components.TabsTrigger, ]} */ ;
+    // @ts-ignore
+    TabsTrigger;
+    // @ts-ignore
+    const __VLS_11 = __VLS_asFunctionalComponent(__VLS_10, new __VLS_10({
+        ...{ class: "px-4 py-2 relative" },
+        value: (item.value),
+        key: (item.value),
+    }));
+    const __VLS_12 = __VLS_11({
+        ...{ class: "px-4 py-2 relative" },
+        value: (item.value),
+        key: (item.value),
+    }, ...__VLS_functionalComponentArgsRest(__VLS_11));
+    const { default: __VLS_14 } = __VLS_13.slots;
+    __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: (item.badge) }, null, null);
+    (item.badge);
+    (item.label);
+    var __VLS_13;
+}
+var __VLS_8;
+var __VLS_3;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['max-w-sm']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
+/** @type {__VLS_StyleScopedClasses['gap-6']} */ ;
+/** @type {__VLS_StyleScopedClasses['px-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['py-2']} */ ;
+/** @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']} */ ;
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+    props: {},
+});
+export default {};

package/dist/test/components/chat/customer/Avatar.vue.js

@@ -1,11 +1,12 @@
 /// <reference types="C:/phonghq/go-chat-v2/node_modules/.vue-global-types/vue_3.5_0.d.ts" />
 import { computed } from 'vue';
 import { digibotId } from '../../../composable/useDigibot';
+import IconUser from '../../../assets/icons/IconUser.vue';
 const props = withDefaults(defineProps(), {
     size: 'md',
     src: ''
 });
-const initials = computed(() => props.name?.[0]?.toUpperCase() ?? 'n/a');
+const initials = computed(() => props.name?.[0]?.toUpperCase() ?? '');
 const sizeClass = computed(() => {
     const s = props.size;
     if (typeof s === 'number')
@@ -50,10 +51,10 @@ let __VLS_directives;
 /** @type {__VLS_StyleScopedClasses['bot-wrap']} */ ;
 __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
     ...{ class: ([
-            'flex items-center justify-center rounded-full font-medium overflow-hidden select-none',
+            'flex items-center justify-center rounded-full font-medium overflow-hidden select-none  text-white',
             __VLS_ctx.sizeClass
         ]) },
-    ...{ style: ({ backgroundColor: __VLS_ctx.id == __VLS_ctx.digibotId ? 'transparent' : (__VLS_ctx.color || '#266699') }) },
+    ...{ style: ({ backgroundColor: __VLS_ctx.id == __VLS_ctx.digibotId ? 'transparent' : __VLS_ctx.color || '#4a7c9e' }) },
 });
 // @ts-ignore
 [sizeClass, id, digibotId, color,];
@@ -76,12 +77,28 @@ else if (__VLS_ctx.src) {
     // @ts-ignore
     [src,];
 }
-else {
+else if (__VLS_ctx.initials) {
+    // @ts-ignore
+    [initials,];
     __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({});
     (__VLS_ctx.initials);
     // @ts-ignore
     [initials,];
 }
+else {
+    /** @type {[typeof IconUser, ]} */ ;
+    // @ts-ignore
+    const __VLS_0 = __VLS_asFunctionalComponent(IconUser, new IconUser({
+        ...{ class: (__VLS_ctx.sizeClass) },
+        ...{ class: "scale-50" },
+    }));
+    const __VLS_1 = __VLS_0({
+        ...{ class: (__VLS_ctx.sizeClass) },
+        ...{ class: "scale-50" },
+    }, ...__VLS_functionalComponentArgsRest(__VLS_0));
+    // @ts-ignore
+    [sizeClass,];
+}
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
 /** @type {__VLS_StyleScopedClasses['items-center']} */ ;
 /** @type {__VLS_StyleScopedClasses['justify-center']} */ ;
@@ -89,11 +106,13 @@ else {
 /** @type {__VLS_StyleScopedClasses['font-medium']} */ ;
 /** @type {__VLS_StyleScopedClasses['overflow-hidden']} */ ;
 /** @type {__VLS_StyleScopedClasses['select-none']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-white']} */ ;
 /** @type {__VLS_StyleScopedClasses['w-4/5']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-4/5']} */ ;
 /** @type {__VLS_StyleScopedClasses['w-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['object-cover']} */ ;
+/** @type {__VLS_StyleScopedClasses['scale-50']} */ ;
 const __VLS_export = (await import('vue')).defineComponent({
     __typeProps: {},
     props: {},

package/dist/test/components/chat/layout/mobile/Footer.vue.js

@@ -52,7 +52,7 @@ let __VLS_elements;
 let __VLS_components;
 let __VLS_directives;
 __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-    ...{ class: "bg-white rounded-t-3xl shadow-lg pb-2 flex grid grid-cols-4 h-[80px]" },
+    ...{ class: "bg-white rounded-t-3xl sm:rounded-0 shadow-lg pb-2 flex grid grid-cols-4 sm:grid-cols-1 h-[80px] w-full sm:h-full sm:w-[100px]" },
 });
 for (const [item] of __VLS_getVForSourceType((__VLS_ctx.LAYOUT_CONFIG))) {
     // @ts-ignore
@@ -88,12 +88,17 @@ for (const [item] of __VLS_getVForSourceType((__VLS_ctx.LAYOUT_CONFIG))) {
 }
 /** @type {__VLS_StyleScopedClasses['bg-white']} */ ;
 /** @type {__VLS_StyleScopedClasses['rounded-t-3xl']} */ ;
+/** @type {__VLS_StyleScopedClasses['sm:rounded-0']} */ ;
 /** @type {__VLS_StyleScopedClasses['shadow-lg']} */ ;
 /** @type {__VLS_StyleScopedClasses['pb-2']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
 /** @type {__VLS_StyleScopedClasses['grid']} */ ;
 /** @type {__VLS_StyleScopedClasses['grid-cols-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['sm:grid-cols-1']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-[80px]']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['sm:h-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['sm:w-[100px]']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
 /** @type {__VLS_StyleScopedClasses['justify-center']} */ ;

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

@@ -1,3 +1,4 @@
+/// <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',