@phonghq/go-chat 1.0.24 → 1.0.25

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

@@ -1,9 +1,10 @@
 /// <reference types="C:/phonghq/go-chat-v2/node_modules/.vue-global-types/vue_3.5_0.d.ts" />
+import { dataProfile } from '../../../utils/chat/auth';
 import { nextTick, ref } from 'vue';
 import ScrollEvent from '../../../components/chat/ScrollEvent/ScrollEvent.vue';
-import { MessageState } from '../../../constant/message';
 import NewCustomer from '../../../chat/page/home/NewCustomer.vue';
 import ChatMessageItem from '../../../chat/page/home/ChatMessageItem.vue';
+import dayjs from 'dayjs';
 const props = withDefaults(defineProps(), {});
 const emit = defineEmits();
 const scrollEventRef = ref(null);
@@ -25,6 +26,13 @@ const isEndMessage = (index) => {
         return true;
     return props.message[index + 1].sender_id !== props.message[index].sender_id;
 };
+const isChatFinished = (index) => {
+    if (isEndMessage(index))
+        return true;
+    const time1 = dayjs(props.message[index].created_at);
+    const time2 = dayjs(props.message[index + 1].created_at);
+    return time2.diff(time1, 'minute') > 10;
+};
 const handleScrollTop = () => {
     emit('scrollTop');
 };
@@ -34,23 +42,6 @@ const hideScrollEvent = () => {
 const fixedScroll = () => {
     scrollEventRef.value?.fixedScroll();
 };
-const getMessageStateText = (item) => {
-    const state = item.state;
-    switch (state) {
-        case MessageState.Sending:
-            return 'Sending...';
-        case MessageState.Uploading:
-            return 'Uploading...';
-        case MessageState.Sent:
-            return '';
-        case MessageState.Read:
-            return 'Seen';
-        case MessageState.Failed:
-            return item.error || 'Message failed';
-        default:
-            return '';
-    }
-};
 const __VLS_exposed = { scrollBottom, hideScrollEvent, fixedScroll };
 defineExpose(__VLS_exposed);
 debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
@@ -116,27 +107,45 @@ __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
     ...{ class: "chat-padding-page" },
 });
 for (const [item, index] of __VLS_getVForSourceType((__VLS_ctx.message))) {
-    (item.id);
     // @ts-ignore
     [message,];
     /** @type {[typeof ChatMessageItem, ]} */ ;
     // @ts-ignore
     const __VLS_13 = __VLS_asFunctionalComponent(ChatMessageItem, new ChatMessageItem({
+        ...{ 'onCallAgain': {} },
         message: (item),
         index: (index),
         listMessage: (__VLS_ctx.message),
         responsive: (__VLS_ctx.responsive),
+        isMyMessage: (item.sender_id == __VLS_ctx.dataProfile?.id),
         data: (__VLS_ctx.data),
+        shouldShowAvatar: (__VLS_ctx.shouldShowAvatar(index)),
+        isLastMessage: (index == __VLS_ctx.message.length - 1),
+        isEndMessage: (__VLS_ctx.isEndMessage(index)),
+        isChatFinished: (__VLS_ctx.isChatFinished(index)),
     }));
     const __VLS_14 = __VLS_13({
+        ...{ 'onCallAgain': {} },
         message: (item),
         index: (index),
         listMessage: (__VLS_ctx.message),
         responsive: (__VLS_ctx.responsive),
+        isMyMessage: (item.sender_id == __VLS_ctx.dataProfile?.id),
         data: (__VLS_ctx.data),
+        shouldShowAvatar: (__VLS_ctx.shouldShowAvatar(index)),
+        isLastMessage: (index == __VLS_ctx.message.length - 1),
+        isEndMessage: (__VLS_ctx.isEndMessage(index)),
+        isChatFinished: (__VLS_ctx.isChatFinished(index)),
     }, ...__VLS_functionalComponentArgsRest(__VLS_13));
-    // @ts-ignore
-    [data, message, responsive,];
+    let __VLS_16;
+    let __VLS_17;
+    const __VLS_18 = ({ callAgain: {} },
+        { onCallAgain: (...[$event]) => {
+                __VLS_ctx.emit('callBack');
+                // @ts-ignore
+                [data, message, message, responsive, dataProfile, shouldShowAvatar, isEndMessage, isChatFinished, emit,];
+            } });
+    var __VLS_15;
 }
 var __VLS_2;
 /** @type {__VLS_StyleScopedClasses['relative']} */ ;

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

@@ -1,15 +1,16 @@
 /// <reference types="C:/phonghq/go-chat-v2/node_modules/.vue-global-types/vue_3.5_0.d.ts" />
 import Avatar from '../../../components/chat/customer/Avatar.vue';
-import { dataProfile } from '../../../utils/chat/auth';
 import { computed, nextTick } from 'vue';
 import { MessageState } from '../../../constant/message';
 import IconPhoneCancel from '../../../assets/icons/call/IconPhoneCancel.vue';
 import { PLIVO_CALL_STATUS } from '../../../types/chat/call';
 import IconPhone from '../../../assets/icons/customer-detail/IconPhone.vue';
+import dayjs from 'dayjs';
+import { DATE_FORMATS } from '../../../constant/datetime';
 const props = withDefaults(defineProps(), {});
-const isMyMessage = computed(() => props.message.sender_id == dataProfile.value?.id);
+const emit = defineEmits();
 const callTitle = computed(() => {
-    if (isMyMessage.value) {
+    if (props.isMyMessage) {
         if (props.message?.call_status == PLIVO_CALL_STATUS.CONNECT_FAILED) {
             return 'Call canceled';
         }
@@ -21,7 +22,11 @@ const callTitle = computed(() => {
         }
     }
     else {
-        if (props.message?.call_status == PLIVO_CALL_STATUS.CONNECT_FAILED) {
+        if (props.message?.call_status == PLIVO_CALL_STATUS.CONNECT_FAILED ||
+            props.message?.call_status == PLIVO_CALL_STATUS.TIME_OUT ||
+            props.message?.call_status == PLIVO_CALL_STATUS.CANCEL ||
+            props.message?.call_status == PLIVO_CALL_STATUS.NO_ANSWER ||
+            props.message?.call_status == PLIVO_CALL_STATUS.BUSY) {
             return 'Call missed';
         }
         else if (props.message?.call_status == PLIVO_CALL_STATUS.CALL_END) {
@@ -43,16 +48,6 @@ const getCallDuration = (seconds) => {
     const secs = seconds % 60;
     return `${min} min${min > 1 ? 's' : ''} ${secs} sec`;
 };
-const shouldShowAvatar = (index) => {
-    if (index === 0)
-        return true;
-    return props.listMessage[index - 1].sender_id !== props.listMessage[index].sender_id;
-};
-const isEndMessage = (index) => {
-    if (props.listMessage?.length == index + 1)
-        return true;
-    return props.listMessage[index + 1].sender_id !== props.listMessage[index].sender_id;
-};
 const getMessageStateText = (item) => {
     const state = item.state;
     switch (state) {
@@ -77,6 +72,7 @@ const __VLS_ctx = {
     ...{},
     ...{},
     ...{},
+    ...{},
 };
 let __VLS_elements;
 let __VLS_components;
@@ -84,22 +80,22 @@ let __VLS_directives;
 __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
     ...{ class: "flex items-end mt-2" },
     ...{ class: ({
-            'mt-4': __VLS_ctx.shouldShowAvatar(__VLS_ctx.index),
+            'mt-4': __VLS_ctx.shouldShowAvatar,
             'flex-col justify-end  pl-[60px]': __VLS_ctx.isMyMessage,
             'gap-2': !__VLS_ctx.isMyMessage
         }) },
 });
 // @ts-ignore
-[shouldShowAvatar, index, isMyMessage, isMyMessage,];
+[shouldShowAvatar, isMyMessage, isMyMessage,];
 if (__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending) {
     // @ts-ignore
     [message, MessageState,];
     if (!__VLS_ctx.isMyMessage) {
         // @ts-ignore
         [isMyMessage,];
-        if (__VLS_ctx.shouldShowAvatar(__VLS_ctx.index)) {
+        if (__VLS_ctx.shouldShowAvatar) {
             // @ts-ignore
-            [shouldShowAvatar, index,];
+            [shouldShowAvatar,];
             /** @type {[typeof Avatar, ]} */ ;
             // @ts-ignore
             const __VLS_0 = __VLS_asFunctionalComponent(Avatar, new Avatar({
@@ -133,17 +129,17 @@ if (__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending) {
     __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
         ...{ class: "px-3 py-2 rounded-2xl max-w-xs" },
         ...{ class: ({
-                'rounded-tl-none': !__VLS_ctx.shouldShowAvatar(__VLS_ctx.index) && !__VLS_ctx.isMyMessage,
-                'rounded-bl-none': !__VLS_ctx.isEndMessage(__VLS_ctx.index) && !__VLS_ctx.isMyMessage,
-                'rounded-tr-none': !__VLS_ctx.shouldShowAvatar(__VLS_ctx.index) && __VLS_ctx.isMyMessage,
-                'rounded-br-none': !__VLS_ctx.isEndMessage(__VLS_ctx.index) && __VLS_ctx.isMyMessage,
+                'rounded-tl-none': !__VLS_ctx.shouldShowAvatar && !__VLS_ctx.isMyMessage,
+                'rounded-bl-none': !__VLS_ctx.isEndMessage && !__VLS_ctx.isMyMessage,
+                'rounded-tr-none': !__VLS_ctx.shouldShowAvatar && __VLS_ctx.isMyMessage,
+                'rounded-br-none': !__VLS_ctx.isEndMessage && __VLS_ctx.isMyMessage,
                 '!text-[#14532D] !bg-[#d4f8d4]': __VLS_ctx.message.message_uuid && !__VLS_ctx.message.is_call,
                 'bg-[#D0DFEC] text-[#266699]': __VLS_ctx.isMyMessage,
                 'bg-[#E4E4E4D4]  text-chat-haze-600 text-left  w-max ': !__VLS_ctx.isMyMessage
             }) },
     });
     // @ts-ignore
-    [shouldShowAvatar, shouldShowAvatar, index, index, index, index, isMyMessage, isMyMessage, isMyMessage, isMyMessage, isMyMessage, isMyMessage, message, message, isEndMessage, isEndMessage,];
+    [shouldShowAvatar, shouldShowAvatar, isMyMessage, isMyMessage, isMyMessage, isMyMessage, isMyMessage, isMyMessage, message, message, isEndMessage, isEndMessage,];
     if (__VLS_ctx.message.is_call == 1) {
         // @ts-ignore
         [message,];
@@ -151,7 +147,7 @@ if (__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending) {
             ...{ class: "flex flex-col gap-2 w-[200px]" },
         });
         __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
-            ...{ class: "font-medium " },
+            ...{ class: "font-medium" },
             ...{ class: ({ 'text-chat-error': __VLS_ctx.message.call_status !== __VLS_ctx.PLIVO_CALL_STATUS.CALL_END }) },
         });
         // @ts-ignore
@@ -193,20 +189,28 @@ if (__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending) {
                 ...{ class: "w-5 h-5" },
             }, ...__VLS_functionalComponentArgsRest(__VLS_8));
         }
+        __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({});
         (__VLS_ctx.getCallDuration(__VLS_ctx.message?.duration ?? 0));
         // @ts-ignore
         [message, getCallDuration,];
-        __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
-            ...{ class: "text-sm text-red-600 mt-1" },
-        });
-        __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
+            ...{ onClick: (...[$event]) => {
+                    if (!(__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending))
+                        return;
+                    if (!(__VLS_ctx.message.is_call == 1))
+                        return;
+                    __VLS_ctx.emit('callAgain');
+                    // @ts-ignore
+                    [emit,];
+                } },
             ...{ class: "flex-center h-10 rounded-xl bg-chat-haze-200 font-semibold" },
         });
-        __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({});
+        __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({});
     }
     else if (__VLS_ctx.message.message) {
         // @ts-ignore
         [message,];
+        __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({});
         __VLS_asFunctionalElement(__VLS_elements.div)({
             ...{ style: ({ wordBreak: 'break-word' }) },
         });
@@ -214,13 +218,13 @@ if (__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending) {
         // @ts-ignore
         [message,];
     }
-    else if (__VLS_ctx.message.attachments.length) {
+    else if (__VLS_ctx.message?.attachments?.length) {
         // @ts-ignore
         [message,];
         __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({});
         __VLS_asFunctionalElement(__VLS_elements.img)({
             ...{ onLoad: (() => {
-                    if (__VLS_ctx.index == __VLS_ctx.listMessage.length - 1) {
+                    if (__VLS_ctx.isLastMessage) {
                         __VLS_ctx.scrollBottom();
                     }
                 }) },
@@ -228,15 +232,25 @@ if (__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending) {
             alt: "avatar",
         });
         // @ts-ignore
-        [index, message, listMessage, scrollBottom,];
+        [message, isLastMessage, scrollBottom,];
+    }
+    if (__VLS_ctx.isChatFinished) {
+        // @ts-ignore
+        [isChatFinished,];
+        __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
+            ...{ class: "text-sm mt-1" },
+        });
+        (__VLS_ctx.dayjs(__VLS_ctx.message?.created_at).format(__VLS_ctx.DATE_FORMATS.TIME_12_FORMAT));
+        // @ts-ignore
+        [message, dayjs, DATE_FORMATS,];
     }
     if (__VLS_ctx.isMyMessage) {
         // @ts-ignore
         [isMyMessage,];
-        if ((__VLS_ctx.index == __VLS_ctx.listMessage.length - 1 && __VLS_ctx.getMessageStateText(__VLS_ctx.message)) ||
+        if ((__VLS_ctx.isLastMessage && __VLS_ctx.getMessageStateText(__VLS_ctx.message)) ||
             __VLS_ctx.message.state == __VLS_ctx.MessageState.Failed) {
             // @ts-ignore
-            [index, message, message, MessageState, listMessage, getMessageStateText,];
+            [message, message, MessageState, isLastMessage, getMessageStateText,];
             __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
                 ...{ class: "text-chat-haze-200 text-xs mt-1" },
                 ...{ class: ({ '!text-chat-error': __VLS_ctx.message.state == __VLS_ctx.MessageState.Failed }) },
@@ -302,19 +316,19 @@ if (__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending) {
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['w-5']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-5']} */ ;
-/** @type {__VLS_StyleScopedClasses['text-sm']} */ ;
-/** @type {__VLS_StyleScopedClasses['text-red-600']} */ ;
-/** @type {__VLS_StyleScopedClasses['mt-1']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex-center']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-10']} */ ;
 /** @type {__VLS_StyleScopedClasses['rounded-xl']} */ ;
 /** @type {__VLS_StyleScopedClasses['bg-chat-haze-200']} */ ;
 /** @type {__VLS_StyleScopedClasses['font-semibold']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-sm']} */ ;
+/** @type {__VLS_StyleScopedClasses['mt-1']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-chat-haze-200']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-xs']} */ ;
 /** @type {__VLS_StyleScopedClasses['mt-1']} */ ;
 /** @type {__VLS_StyleScopedClasses['!text-chat-error']} */ ;
 const __VLS_export = (await import('vue')).defineComponent({
+    __typeEmits: {},
     __typeProps: {},
     props: {},
 });

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

@@ -2,15 +2,13 @@
 import HomeHeader from '../../../chat/page/home/HomeHeader.vue';
 import NewCustomer from '../../../chat/page/home/NewCustomer.vue';
 import InputChat from '../../../chat/page/home/InputChat.vue';
-import { getCountUnread, getDetailReceiver, getMessage, sendMessage, upLoadImage } from '../../../utils/chat/message';
+import { getDetailReceiver, getMessage, sendMessage, upLoadImage } from '../../../utils/chat/message';
 import { nextTick, onMounted, onUnmounted, ref, shallowRef } from 'vue';
 import ChatMessage from '../../../chat/page/home/ChatMessage.vue';
 import { addHandleMqttMessage, connectMqtt, publishMessage, removeHandleMqttMessage, subscribeToTopic, unsubscribeFromTopic } from '../../../plugins/mqtt';
-import { TOPIC_DETAIL_CHAT, TOPIC_HOME } from '../../../constant/mqtt';
-import { dataProfile } from '../../../utils/chat/auth';
-import dayjs from 'dayjs';
-import { DATE_FORMATS, TIME_ZONE_UTC } from '../../../constant/datetime';
+import { TOPIC_DETAIL_CHAT } from '../../../constant/mqtt';
 import { MessageState } from '../../../constant/message';
+import { publicTopicConversationUpdate } from '../../../utils/chat/conversation';
 const props = withDefaults(defineProps(), {});
 const emit = defineEmits();
 let page = 1;
@@ -42,8 +40,8 @@ const handleDisconnectMqtt = async () => {
     removeHandleMqttMessage('chat-home');
 };
 const mqttMessageHandler = (topic, message) => {
-    if ((infoUser.value?.id && message?.sender_id?.toString() == infoUser.value?.id?.toString()) ||
-        true) {
+    console.log(message);
+    if ((infoUser.value?.id && message?.sender_id?.toString() == infoUser.value?.id?.toString())) {
         const index = listMessage.value.findIndex((item) => item.id === message?.id);
         if (index < 0) {
             listMessage.value.push(message);
@@ -53,6 +51,7 @@ const mqttMessageHandler = (topic, message) => {
         }
         chatMessageRef.value?.scrollBottom();
     }
+    console.log(listMessage.value);
 };
 const handleGetMessage = async (option) => {
     try {
@@ -89,7 +88,7 @@ const handleScrollTop = async () => {
 const handleGetDetailReceiver = async (data) => {
     const id = props.receiverId;
     if (data)
-        infoUser.value = data;
+        infoUser.value = { ...data, conversation_id: data.id };
     const res = (await getDetailReceiver(props.receiverId)) ?? null;
     if (id == props.receiverId) {
         infoUser.value = res;
@@ -100,7 +99,8 @@ const getData = async (data) => {
     try {
         isLoading.value = true;
         listMessage.value = [];
-        await Promise.allSettled([handleGetMessage(), handleGetDetailReceiver(data)]);
+        handleGetDetailReceiver(data);
+        await Promise.allSettled([handleGetMessage()]);
         // readMessages(infoUser.value?.conversation_id)
         await nextTick();
         chatMessageRef.value?.scrollBottom();
@@ -153,7 +153,7 @@ const handleSendMessage = async (data) => {
                 : []
         });
         updateMessageItem(data.id, { state: MessageState.Sent });
-        publicTopicConversationUpdate(false, data?.message ?? '');
+        publicTopicConversationUpdate({ message: data?.message ?? '', isSendImg: !!file_upload?.length, infoUser: infoUser.value });
     }
     catch (error) {
         updateMessageItem(data.id, {
@@ -174,49 +174,12 @@ const handleUploadImage = async (file) => {
     const res = await upLoadImage(formData);
     return res;
 };
-const publicTopicConversationUpdate = async (isSendImg, message) => {
-    const res = await getCountUnread({
-        conversation_id: infoUser.value?.conversation_id ?? 0,
-        receiver_id: Number(infoUser.value?.id)
-    });
-    const current = dayjs().tz(TIME_ZONE_UTC).format(DATE_FORMATS['DATE_FORMAT_FULL']);
-    const dataMessageForReceiver = {
-        id: infoUser.value?.conversation_id ?? 0,
-        receiver_id: Number(dataProfile.value?.id ?? 0),
-        username: dataProfile.value?.username ?? '',
-        customer_phone: dataProfile.value?.phone ?? '',
-        avatar: dataProfile.value?.avatar ?? '',
-        last_message: isSendImg ? `${infoUser.value?.username} sent images` : message,
-        last_message_time: current,
-        created_at: current,
-        updated_at: current,
-        unread_count: (res?.unread_count ?? 0) + 1,
-        status: 1,
-        color: dataProfile.value?.color ?? ''
-    };
-    publishMessage(`${TOPIC_HOME[0] + Number(infoUser.value?.id)}`, JSON.stringify(dataMessageForReceiver));
-    const dataMessageMyself = {
-        id: infoUser.value?.conversation_id ?? 0,
-        receiver_id: Number(dataProfile.value?.id ?? 0),
-        username: infoUser.value?.username ?? '',
-        customer_phone: infoUser.value?.phone ?? '',
-        avatar: infoUser.value?.avatar ?? '',
-        last_message: isSendImg ? `${infoUser.value?.username} sent images` : message,
-        last_message_time: current,
-        created_at: current,
-        updated_at: current,
-        unread_count: 0,
-        status: 1,
-        color: infoUser.value?.color
-    };
-    publishMessage(`${TOPIC_HOME[0] + Number(dataProfile.value?.id)}`, JSON.stringify(dataMessageMyself));
-};
 const call = () => {
     if (infoUser.value) {
         emit('call', infoUser.value);
     }
 };
-const __VLS_exposed = { getData, handleGetMessage };
+const __VLS_exposed = { getData, handleGetMessage, infoUser };
 defineExpose(__VLS_exposed);
 debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
 const __VLS_defaults = {};
@@ -259,6 +222,7 @@ if (__VLS_ctx.listMessage?.length) {
     // @ts-ignore
     const __VLS_7 = __VLS_asFunctionalComponent(ChatMessage, new ChatMessage({
         ...{ 'onScrollTop': {} },
+        ...{ 'onCallBack': {} },
         ref: "chatMessageRef",
         data: (__VLS_ctx.infoUser),
         message: (__VLS_ctx.listMessage),
@@ -268,6 +232,7 @@ if (__VLS_ctx.listMessage?.length) {
     }));
     const __VLS_8 = __VLS_7({
         ...{ 'onScrollTop': {} },
+        ...{ 'onCallBack': {} },
         ref: "chatMessageRef",
         data: (__VLS_ctx.infoUser),
         message: (__VLS_ctx.listMessage),
@@ -279,10 +244,12 @@ if (__VLS_ctx.listMessage?.length) {
     let __VLS_11;
     const __VLS_12 = ({ scrollTop: {} },
         { onScrollTop: (__VLS_ctx.handleScrollTop) });
+    const __VLS_13 = ({ callBack: {} },
+        { onCallBack: (__VLS_ctx.call) });
     /** @type {typeof __VLS_ctx.chatMessageRef} */ ;
-    var __VLS_13 = {};
+    var __VLS_14 = {};
     // @ts-ignore
-    [infoUser, listMessage, responsive, page, pageCount, handleScrollTop, chatMessageRef,];
+    [infoUser, call, listMessage, responsive, page, pageCount, handleScrollTop, chatMessageRef,];
     var __VLS_9;
 }
 else if (!__VLS_ctx.isLoading) {
@@ -290,14 +257,14 @@ else if (!__VLS_ctx.isLoading) {
     [isLoading,];
     /** @type {[typeof NewCustomer, ]} */ ;
     // @ts-ignore
-    const __VLS_16 = __VLS_asFunctionalComponent(NewCustomer, new NewCustomer({
+    const __VLS_17 = __VLS_asFunctionalComponent(NewCustomer, new NewCustomer({
         data: (__VLS_ctx.infoUser),
         ...{ class: "grow" },
     }));
-    const __VLS_17 = __VLS_16({
+    const __VLS_18 = __VLS_17({
         data: (__VLS_ctx.infoUser),
         ...{ class: "grow" },
-    }, ...__VLS_functionalComponentArgsRest(__VLS_16));
+    }, ...__VLS_functionalComponentArgsRest(__VLS_17));
     // @ts-ignore
     [infoUser,];
 }
@@ -308,23 +275,23 @@ else {
 }
 /** @type {[typeof InputChat, ]} */ ;
 // @ts-ignore
-const __VLS_20 = __VLS_asFunctionalComponent(InputChat, new InputChat({
+const __VLS_21 = __VLS_asFunctionalComponent(InputChat, new InputChat({
     ...{ 'onSendMessage': {} },
     data: (__VLS_ctx.infoUser),
     ...{ class: "p-6" },
 }));
-const __VLS_21 = __VLS_20({
+const __VLS_22 = __VLS_21({
     ...{ 'onSendMessage': {} },
     data: (__VLS_ctx.infoUser),
     ...{ class: "p-6" },
-}, ...__VLS_functionalComponentArgsRest(__VLS_20));
-let __VLS_23;
+}, ...__VLS_functionalComponentArgsRest(__VLS_21));
 let __VLS_24;
-const __VLS_25 = ({ sendMessage: {} },
+let __VLS_25;
+const __VLS_26 = ({ sendMessage: {} },
     { onSendMessage: (__VLS_ctx.handleSendMessage) });
 // @ts-ignore
 [infoUser, handleSendMessage,];
-var __VLS_22;
+var __VLS_23;
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
@@ -335,7 +302,7 @@ var __VLS_22;
 /** @type {__VLS_StyleScopedClasses['grow']} */ ;
 /** @type {__VLS_StyleScopedClasses['p-6']} */ ;
 // @ts-ignore
-var __VLS_14 = __VLS_13;
+var __VLS_15 = __VLS_14;
 const __VLS_export = (await import('vue')).defineComponent({
     setup: () => (__VLS_exposed),
     __typeEmits: {},

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

@@ -79,9 +79,6 @@ __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
 (__VLS_ctx.data?.username ?? 'n/a');
 // @ts-ignore
 [data,];
-__VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
-    ...{ class: "text-sm text-chat-gray-3 truncate" },
-});
 if (__VLS_ctx.data?.id && __VLS_ctx.data?.id != __VLS_ctx.digibotId.toString() && __VLS_ctx.dataProfile?.user_type == 'tenant') {
     // @ts-ignore
     [dataProfile, data, data, digibotId,];
@@ -116,9 +113,6 @@ if (__VLS_ctx.data?.id && __VLS_ctx.data?.id != __VLS_ctx.digibotId.toString() &
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
 /** @type {__VLS_StyleScopedClasses['items-center']} */ ;
 /** @type {__VLS_StyleScopedClasses['font-semibold']} */ ;
-/** @type {__VLS_StyleScopedClasses['text-sm']} */ ;
-/** @type {__VLS_StyleScopedClasses['text-chat-gray-3']} */ ;
-/** @type {__VLS_StyleScopedClasses['truncate']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex-center']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-[#0051E6]']} */ ;
 /** @type {__VLS_StyleScopedClasses['bg-chat-haze-200']} */ ;

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

@@ -42,7 +42,6 @@ const handleSendMessage = async (type) => {
     keyword.value = '';
     chatId++;
     const id = props.data?.id.toString() + '-' + chatId;
-    console.log(dayjs().tz(TIME_ZONE_UTC).format(DATE_FORMATS['DATE_FORMAT_FULL']));
     const data = {
         conversation_id: 135,
         created_at: dayjs().tz(TIME_ZONE_UTC).format(DATE_FORMATS['DATE_FORMAT_FULL']),

package/dist/test/chat/page/setting/Setting.vue.js

@@ -0,0 +1,125 @@
+/// <reference types="C:/phonghq/go-chat-v2/node_modules/.vue-global-types/vue_3.5_0.d.ts" />
+import { ref } from 'vue';
+import SelectBase from '../../../components/chat/select/SelectBase.vue';
+const open = ref(false);
+const phoneValue = ref('');
+const countries = [
+    // { value: 'VN', label: 'Vietnam', dial: 84,  flag: '🇻🇳' },
+    { value: 'US', label: '+1 US', dial: 1, flag: '🇺🇸' }
+    // { value: 'KR', label: 'Korea', dial: 82, flag: '🇰🇷' },
+    // { value: 'JP', label: 'Japan', dial: 81, flag: '🇯🇵' },
+    // { value: 'TH', label: 'Thailand', dial: 66, flag: '🇹🇭' },
+];
+const selected = ref(countries[0]);
+const error = ref('');
+const select = (c) => {
+    selected.value = c;
+    open.value = false;
+};
+const handleInput = () => {
+    error.value = '';
+    phoneValue.value = keepOnlyNumbers(phoneValue.value);
+};
+const keepOnlyNumbers = (str) => {
+    return str.replace(/\D/g, '');
+};
+const onSubmit = () => { };
+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)({});
+__VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
+    ...{ class: "text-xl font-semibold text-chat-haze-600 mb-4" },
+});
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "flex items-center gap-2 chat-input border border-chat-haze-200 p-2 bg-white shadow-md" },
+});
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "relative" },
+});
+/** @type {[typeof SelectBase, typeof SelectBase, ]} */ ;
+// @ts-ignore
+const __VLS_0 = __VLS_asFunctionalComponent(SelectBase, new SelectBase({
+    options: (__VLS_ctx.countries),
+    placement: "bottom",
+    disabled: true,
+}));
+const __VLS_1 = __VLS_0({
+    options: (__VLS_ctx.countries),
+    placement: "bottom",
+    disabled: true,
+}, ...__VLS_functionalComponentArgsRest(__VLS_0));
+const { default: __VLS_3 } = __VLS_2.slots;
+// @ts-ignore
+[countries,];
+__VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
+    ...{ class: "flex items-center gap-1 px-2 py-1 rounded-lg hover:bg-gray-100" },
+});
+__VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({});
+(__VLS_ctx.selected.flag);
+// @ts-ignore
+[selected,];
+__VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
+    ...{ class: "text-sm text-chat-haze-700" },
+});
+(__VLS_ctx.selected.dial);
+// @ts-ignore
+[selected,];
+__VLS_asFunctionalElement(__VLS_elements.svg, __VLS_elements.svg)({
+    ...{ class: "w-4 h-4 text-chat-haze-500" },
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: "0 0 20 20",
+});
+__VLS_asFunctionalElement(__VLS_elements.path)({
+    'stroke-linecap': "round",
+    'stroke-linejoin': "round",
+    'stroke-width': "2",
+    d: "M5 7l5 5 5-5",
+});
+var __VLS_2;
+__VLS_asFunctionalElement(__VLS_elements.input)({
+    ...{ onInput: (__VLS_ctx.handleInput) },
+    ...{ onKeyup: (__VLS_ctx.onSubmit) },
+    ...{ class: "!outline-none" },
+    type: "tel",
+    maxlength: (10),
+    placeholder: "Enter phone number",
+});
+(__VLS_ctx.phoneValue);
+// @ts-ignore
+[handleInput, onSubmit, phoneValue,];
+/** @type {__VLS_StyleScopedClasses['text-xl']} */ ;
+/** @type {__VLS_StyleScopedClasses['font-semibold']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-chat-haze-600']} */ ;
+/** @type {__VLS_StyleScopedClasses['mb-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['gap-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['chat-input']} */ ;
+/** @type {__VLS_StyleScopedClasses['border']} */ ;
+/** @type {__VLS_StyleScopedClasses['border-chat-haze-200']} */ ;
+/** @type {__VLS_StyleScopedClasses['p-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-white']} */ ;
+/** @type {__VLS_StyleScopedClasses['shadow-md']} */ ;
+/** @type {__VLS_StyleScopedClasses['relative']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['gap-1']} */ ;
+/** @type {__VLS_StyleScopedClasses['px-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['py-1']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-lg']} */ ;
+/** @type {__VLS_StyleScopedClasses['hover:bg-gray-100']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-sm']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-chat-haze-700']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-chat-haze-500']} */ ;
+/** @type {__VLS_StyleScopedClasses['!outline-none']} */ ;
+const __VLS_export = (await import('vue')).defineComponent({});
+export default {};