@phonghq/go-chat 1.0.23 → 1.0.25

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;
@@ -20,8 +18,7 @@ const isLoading = ref(false);
 const infoUser = shallowRef(null);
 const listMessage = ref([]);
 const chatMessageRef = ref(null);
-onMounted(() => {
-});
+onMounted(() => { });
 onUnmounted(() => {
     handleDisconnectMqtt();
 });
@@ -43,7 +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,8 +51,9 @@ const mqttMessageHandler = (topic, message) => {
         }
         chatMessageRef.value?.scrollBottom();
     }
+    console.log(listMessage.value);
 };
-const handleGetMessage = async () => {
+const handleGetMessage = async (option) => {
     try {
         const id = props.receiverId;
         const params = { page: page, receiver_id: props.receiverId };
@@ -62,8 +61,15 @@ const handleGetMessage = async () => {
         res.items = res.items.reverse();
         page = res._meta?.currentPage || 1;
         pageCount = res._meta?.pageCount || 1;
-        if (id == props.receiverId)
-            listMessage.value.unshift(...res.items);
+        if (id == props.receiverId) {
+            if (option?.resetList) {
+                listMessage.value = res.items;
+                chatMessageRef.value?.scrollBottom();
+            }
+            else {
+                listMessage.value.unshift(...res.items);
+            }
+        }
     }
     catch (error) {
         console.error(error);
@@ -82,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;
@@ -93,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();
@@ -110,7 +117,6 @@ const updateMessageItem = (id, data) => {
     if (index > -1) {
         const item = listMessage.value[index];
         listMessage.value[index] = { ...item, ...data };
-        console.log({ ...item, ...data });
     }
 };
 const handleSendMessage = async (data) => {
@@ -147,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, {
@@ -168,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 };
+const __VLS_exposed = { getData, handleGetMessage, infoUser };
 defineExpose(__VLS_exposed);
 debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
 const __VLS_defaults = {};
@@ -253,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),
@@ -262,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),
@@ -273,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) {
@@ -284,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,];
 }
@@ -302,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']} */ ;
@@ -329,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,21 +79,24 @@ __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" },
-});
-__VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
-    ...{ onClick: (...[$event]) => {
-            __VLS_ctx.emit('call');
-            // @ts-ignore
-            [emit,];
-        } },
-    ...{ class: "flex-center text-[#0051E6] bg-chat-haze-200 w-9 h-9 rounded-lg" },
-});
-/** @type {[typeof IconPhone, ]} */ ;
-// @ts-ignore
-const __VLS_7 = __VLS_asFunctionalComponent(IconPhone, new IconPhone({}));
-const __VLS_8 = __VLS_7({}, ...__VLS_functionalComponentArgsRest(__VLS_7));
+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,];
+    __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
+        ...{ onClick: (...[$event]) => {
+                if (!(__VLS_ctx.data?.id && __VLS_ctx.data?.id != __VLS_ctx.digibotId.toString() && __VLS_ctx.dataProfile?.user_type == 'tenant'))
+                    return;
+                __VLS_ctx.emit('call');
+                // @ts-ignore
+                [emit,];
+            } },
+        ...{ class: "flex-center text-[#0051E6] bg-chat-haze-200 w-9 h-9 rounded-lg" },
+    });
+    /** @type {[typeof IconPhone, ]} */ ;
+    // @ts-ignore
+    const __VLS_7 = __VLS_asFunctionalComponent(IconPhone, new IconPhone({}));
+    const __VLS_8 = __VLS_7({}, ...__VLS_functionalComponentArgsRest(__VLS_7));
+}
 /** @type {__VLS_StyleScopedClasses['px-8']} */ ;
 /** @type {__VLS_StyleScopedClasses['pb-4']} */ ;
 /** @type {__VLS_StyleScopedClasses['border-b']} */ ;
@@ -110,9 +113,6 @@ const __VLS_8 = __VLS_7({}, ...__VLS_functionalComponentArgsRest(__VLS_7));
 /** @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

@@ -5,16 +5,23 @@ import 'vue3-emoji-picker/css';
 import dayjs from 'dayjs';
 import { DATE_FORMATS, TIME_ZONE_UTC } from '../../../constant/datetime';
 import { dataProfile } from '../../../utils/chat/auth';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import PopoverBase from '../../../components/chat/common/popover/PopoverBase.vue';
+import SwitchBase from '../../../components/chat/common/switch/SwitchBase.vue';
 const props = withDefaults(defineProps(), {});
 const emit = defineEmits();
+const ChatModeOptions = [
+    { value: '0', label: 'Go Chat' },
+    { value: '1', label: 'Go sms' }
+];
+const modeLabel = computed(() => ChatModeOptions.find((v) => v.value === mode.value)?.label ?? '');
 const keyword = defineModel();
 let chatId = 1;
 const refInputImage = ref(null);
 const isLoadingImage = ref([]);
 const chatInputRef = ref(null);
 const emojiOpen = ref(false);
+const mode = ref('0');
 const handleSendMessage = async (type) => {
     const tempId = Date.now();
     let messageContent = '';
@@ -35,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']),
@@ -77,11 +83,30 @@ const __VLS_ctx = {
 let __VLS_elements;
 let __VLS_components;
 let __VLS_directives;
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "z-10" },
+    ...{ style: {} },
+});
+if (__VLS_ctx.dataProfile?.user_type == 'tenant') {
+    // @ts-ignore
+    [dataProfile,];
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ class: "mb-2" },
+    });
+    /** @type {[typeof SwitchBase, ]} */ ;
+    // @ts-ignore
+    const __VLS_0 = __VLS_asFunctionalComponent(SwitchBase, new SwitchBase({
+        label: "Active sms",
+    }));
+    const __VLS_1 = __VLS_0({
+        label: "Active sms",
+    }, ...__VLS_functionalComponentArgsRest(__VLS_0));
+}
 __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
     ...{ class: "flex gap-2" },
 });
 __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-    ...{ class: "w-full relative grow" },
+    ...{ class: "relative grow" },
 });
 __VLS_asFunctionalElement(__VLS_elements.input)({
     ...{ onKeydown: (...[$event]) => {
@@ -89,7 +114,7 @@ __VLS_asFunctionalElement(__VLS_elements.input)({
             // @ts-ignore
             [handleSendMessage,];
         } },
-    ...{ class: "w-full chat-input h-11 px-4 border border-chat-haze-200" },
+    ...{ class: "w-full chat-input !rounded-xl h-11 px-4 border border-chat-haze-200" },
     ref: "chatInputRef",
     placeholder: "Send Message",
 });
@@ -102,17 +127,17 @@ __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
 });
 /** @type {[typeof PopoverBase, typeof PopoverBase, ]} */ ;
 // @ts-ignore
-const __VLS_0 = __VLS_asFunctionalComponent(PopoverBase, new PopoverBase({
+const __VLS_4 = __VLS_asFunctionalComponent(PopoverBase, new PopoverBase({
     open: (__VLS_ctx.emojiOpen),
     align: "end",
     side: "top",
 }));
-const __VLS_1 = __VLS_0({
+const __VLS_5 = __VLS_4({
     open: (__VLS_ctx.emojiOpen),
     align: "end",
     side: "top",
-}, ...__VLS_functionalComponentArgsRest(__VLS_0));
-const { default: __VLS_3 } = __VLS_2.slots;
+}, ...__VLS_functionalComponentArgsRest(__VLS_4));
+const { default: __VLS_7 } = __VLS_6.slots;
 // @ts-ignore
 [emojiOpen,];
 __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
@@ -121,64 +146,64 @@ __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
             // @ts-ignore
             [emojiOpen, emojiOpen,];
         } },
-    ...{ class: "" },
+    ...{ class: "h-11 w-10" },
 });
 {
-    const { content: __VLS_4 } = __VLS_2.slots;
-    const __VLS_5 = {}.EmojiPicker;
+    const { content: __VLS_8 } = __VLS_6.slots;
+    const __VLS_9 = {}.EmojiPicker;
     /** @type {[typeof __VLS_components.EmojiPicker, typeof __VLS_components.emojiPicker, ]} */ ;
     // @ts-ignore
     EmojiPicker;
     // @ts-ignore
-    const __VLS_6 = __VLS_asFunctionalComponent(__VLS_5, new __VLS_5({
+    const __VLS_10 = __VLS_asFunctionalComponent(__VLS_9, new __VLS_9({
         ...{ 'onSelect': {} },
         ...{ class: "!w-[300px]" },
         native: (true),
         offset: (2),
         hideSearch: true,
     }));
-    const __VLS_7 = __VLS_6({
+    const __VLS_11 = __VLS_10({
         ...{ 'onSelect': {} },
         ...{ class: "!w-[300px]" },
         native: (true),
         offset: (2),
         hideSearch: true,
-    }, ...__VLS_functionalComponentArgsRest(__VLS_6));
-    let __VLS_9;
-    let __VLS_10;
-    const __VLS_11 = ({ select: {} },
+    }, ...__VLS_functionalComponentArgsRest(__VLS_10));
+    let __VLS_13;
+    let __VLS_14;
+    const __VLS_15 = ({ select: {} },
         { onSelect: (__VLS_ctx.onSelectEmoji) });
     // @ts-ignore
     [onSelectEmoji,];
-    var __VLS_8;
+    var __VLS_12;
 }
-var __VLS_2;
-const __VLS_13 = {}.EmojiPicker;
+var __VLS_6;
+const __VLS_17 = {}.EmojiPicker;
 /** @type {[typeof __VLS_components.EmojiPicker, typeof __VLS_components.emojiPicker, ]} */ ;
 // @ts-ignore
 EmojiPicker;
 // @ts-ignore
-const __VLS_14 = __VLS_asFunctionalComponent(__VLS_13, new __VLS_13({
+const __VLS_18 = __VLS_asFunctionalComponent(__VLS_17, new __VLS_17({
     ...{ 'onSelect': {} },
     ...{ class: "opacity-0 pointer-events-none absolute" },
     native: (true),
     offset: (2),
     hideSearch: true,
 }));
-const __VLS_15 = __VLS_14({
+const __VLS_19 = __VLS_18({
     ...{ 'onSelect': {} },
     ...{ class: "opacity-0 pointer-events-none absolute" },
     native: (true),
     offset: (2),
     hideSearch: true,
-}, ...__VLS_functionalComponentArgsRest(__VLS_14));
-let __VLS_17;
-let __VLS_18;
-const __VLS_19 = ({ select: {} },
+}, ...__VLS_functionalComponentArgsRest(__VLS_18));
+let __VLS_21;
+let __VLS_22;
+const __VLS_23 = ({ select: {} },
     { onSelect: (__VLS_ctx.onSelectEmoji) });
 // @ts-ignore
 [onSelectEmoji,];
-var __VLS_16;
+var __VLS_20;
 __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
     ...{ onClick: (...[$event]) => {
             __VLS_ctx.handleSendMessage('message');
@@ -189,8 +214,8 @@ __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
 });
 /** @type {[typeof IconPlan, ]} */ ;
 // @ts-ignore
-const __VLS_21 = __VLS_asFunctionalComponent(IconPlan, new IconPlan({}));
-const __VLS_22 = __VLS_21({}, ...__VLS_functionalComponentArgsRest(__VLS_21));
+const __VLS_25 = __VLS_asFunctionalComponent(IconPlan, new IconPlan({}));
+const __VLS_26 = __VLS_25({}, ...__VLS_functionalComponentArgsRest(__VLS_25));
 __VLS_asFunctionalElement(__VLS_elements.label, __VLS_elements.label)({
     ...{ class: "shrink-0 cursor-pointer relative" },
 });
@@ -209,20 +234,21 @@ __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
 });
 /** @type {[typeof IconPlus, ]} */ ;
 // @ts-ignore
-const __VLS_25 = __VLS_asFunctionalComponent(IconPlus, new IconPlus({
+const __VLS_29 = __VLS_asFunctionalComponent(IconPlus, new IconPlus({
     ...{ class: "text-white" },
 }));
-const __VLS_26 = __VLS_25({
+const __VLS_30 = __VLS_29({
     ...{ class: "text-white" },
-}, ...__VLS_functionalComponentArgsRest(__VLS_25));
-/** @type {__VLS_StyleScopedClasses['']} */ ;
+}, ...__VLS_functionalComponentArgsRest(__VLS_29));
+/** @type {__VLS_StyleScopedClasses['z-10']} */ ;
+/** @type {__VLS_StyleScopedClasses['mb-2']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
 /** @type {__VLS_StyleScopedClasses['gap-2']} */ ;
-/** @type {__VLS_StyleScopedClasses['w-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['relative']} */ ;
 /** @type {__VLS_StyleScopedClasses['grow']} */ ;
 /** @type {__VLS_StyleScopedClasses['w-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['chat-input']} */ ;
+/** @type {__VLS_StyleScopedClasses['!rounded-xl']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-11']} */ ;
 /** @type {__VLS_StyleScopedClasses['px-4']} */ ;
 /** @type {__VLS_StyleScopedClasses['border']} */ ;
@@ -232,6 +258,8 @@ const __VLS_26 = __VLS_25({
 /** @type {__VLS_StyleScopedClasses['absolute']} */ ;
 /** @type {__VLS_StyleScopedClasses['right-0']} */ ;
 /** @type {__VLS_StyleScopedClasses['bottom-0']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-11']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-10']} */ ;
 /** @type {__VLS_StyleScopedClasses['!w-[300px]']} */ ;
 /** @type {__VLS_StyleScopedClasses['opacity-0']} */ ;
 /** @type {__VLS_StyleScopedClasses['pointer-events-none']} */ ;

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 {};