@phonghq/go-chat 1.0.56 → 1.0.58

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

@@ -6,11 +6,13 @@ import { getDetailReceiver, getMessage, sendMessage, upLoadImage } from '../../.
 import { computed, 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_PLIVO_SMS } from '../../../constant/mqtt';
+import { TOPIC_PLIVO_CALL, TOPIC_PLIVO_SMS } from '../../../constant/mqtt';
 import { MessageState } from '../../../constant/message';
 import { publicTopicConversationUpdate } from '../../../utils/chat/store/conversation';
 import { getCache, removeOldestCache, setCache } from '../../../utils/chat/cache';
 import { digibotId } from '../../../composable/useDigibot';
+import dayjs from 'dayjs';
+import { useDebounce } from '../../../utils/debounce';
 const props = withDefaults(defineProps(), {});
 const emit = defineEmits();
 const MESSAGE_STORAGE_KEY = 'chat-message-';
@@ -24,19 +26,29 @@ const infoUser = shallowRef(null);
 const listMessage = ref([]);
 const chatMessageRef = ref(null);
 const inputChatRef = ref(null);
-onMounted(() => { });
+onMounted(() => {
+    document.addEventListener('visibilitychange', handleVisibilitychange);
+});
 onUnmounted(() => {
+    document.removeEventListener('visibilitychange', handleVisibilitychange);
     handleDisconnectMqtt();
 });
+const handleVisibilitychange = () => {
+    if (document.visibilityState === 'visible') {
+        handleGetMessage({ is_mqtt: true });
+    }
+};
 const handleConnectMqtt = async () => {
     try {
         await connectMqtt();
-        // topic = TOPIC_DETAIL_CHAT + infoUser.value?.conversation_id
+        topic = TOPIC_PLIVO_CALL + infoUser.value?.conversation_id;
         topic_plivo_chat = TOPIC_PLIVO_SMS + infoUser.value?.conversation_id;
         // subscribeToTopic(topic)
         subscribeToTopic(topic_plivo_chat);
+        subscribeToTopic(topic);
         // addHandleMqttMessage('chat-home', topic, mqttMessageHandler)
         addHandleMqttMessage('chat-home-1', topic_plivo_chat, mqttMessageHandler);
+        addHandleMqttMessage('chat-home-2', topic, mqttMessageHandler);
     }
     catch (error) {
         console.error(error);
@@ -45,20 +57,23 @@ const handleConnectMqtt = async () => {
 const handleDisconnectMqtt = async () => {
     // unsubscribeFromTopic(topic)
     await unsubscribeFromTopic(topic_plivo_chat);
+    await unsubscribeFromTopic(topic);
     // removeHandleMqttMessage('chat-home')
     removeHandleMqttMessage('chat-home-1');
+    removeHandleMqttMessage('chat-home-2');
 };
 const mqttMessageHandler = (topic, message) => {
-    // console.log(topic, message)
     if ((infoUser.value?.id && message?.sender_id?.toString() == infoUser.value?.id?.toString()) ||
         (infoUser.value?.id && message?.receiver_id?.toString() == infoUser.value?.id?.toString())) {
+        handleGetListMqtt();
         const index = listMessage.value.findIndex((item) => item.id === message?.id);
         if (index < 0) {
-            listMessage.value.unshift(message);
-            // listMessage.value.push(message)
+            // listMessage.value.unshift(data)
+            listMessage.value.unshift({ ...message, local_id: message?.id });
         }
         else {
-            listMessage.value[index] = message;
+            let data = listMessage.value[index];
+            listMessage.value[index] = { ...data, ...message };
         }
         chatMessageRef.value?.scrollBottom();
     }
@@ -66,8 +81,11 @@ const mqttMessageHandler = (topic, message) => {
 const handleGetMessage = async (option) => {
     try {
         const id = props.receiverId;
-        const params = { page: option?.resetList ? 1 : page, receiver_id: props.receiverId };
-        if (params.page <= 1) {
+        const params = {
+            page: option?.resetList || option?.is_mqtt ? 1 : page,
+            receiver_id: props.receiverId
+        };
+        if (params.page <= 1 && !option?.is_mqtt) {
             const cache = getCache(MESSAGE_STORAGE_KEY + id);
             if (cache.data) {
                 listMessage.value = cache.data ?? [];
@@ -75,18 +93,23 @@ const handleGetMessage = async (option) => {
             }
         }
         let res = await getMessage(params);
+        if (option?.is_mqtt) {
+            reconcileAndSortMessages(res.items);
+            return;
+        }
         // res.items = res.items.reverse()
         page = res._meta?.currentPage || 1;
         pageCount = res._meta?.pageCount || 1;
+        const data = res.items?.map((e) => ({ ...e, local_id: e?.id }));
         if (id == props.receiverId) {
             if (page <= 1) {
-                listMessage.value = res.items;
+                listMessage.value = data;
                 chatMessageRef.value?.scrollBottom();
                 setCache(MESSAGE_STORAGE_KEY + id, res.items);
                 removeOldestCache(8, MESSAGE_STORAGE_KEY);
             }
             else {
-                listMessage.value.push(...res.items);
+                listMessage.value.push(...data);
                 // listMessage.value.unshift(...res.items)
             }
         }
@@ -135,16 +158,17 @@ const getData = async (data) => {
     }
 };
 const updateMessageItem = (id, data) => {
-    const index = listMessage.value.findIndex((e) => e.id == id);
+    const index = listMessage.value.findIndex((e) => e.local_id == id);
     if (index > -1) {
-        const item = listMessage.value[index];
-        listMessage.value[index] = { ...item, ...data };
+        let item = listMessage.value[index];
+        item = { ...item, ...data };
+        listMessage.value[index] = item;
     }
 };
 const handleSendMessage = async (data) => {
     try {
         // listMessage.value.push({ ...data, state: MessageState.Sending })
-        listMessage.value.unshift({ ...data, state: MessageState.Sending });
+        listMessage.value.unshift({ ...data, state: MessageState.Sending, local_id: data?.id });
         await nextTick();
         // publishMessage(topic, {
         //   ...data,
@@ -163,7 +187,7 @@ const handleSendMessage = async (data) => {
         if (file_upload?.length) {
             formData.append('url', file_upload[0]?.url ?? '');
         }
-        await sendMessage(formData);
+        const res = await sendMessage(formData);
         publishMessage(topic_plivo_chat, {
             ...data,
             state: MessageState.Sent,
@@ -174,9 +198,16 @@ const handleSendMessage = async (data) => {
                         file_path: file_upload[0]?.url ?? ''
                     }
                 ]
-                : []
+                : [],
+            id: res?.message?.id,
+            is_sms: res?.message?.is_sms,
+            local_id: data?.id
+        });
+        updateMessageItem(data.id, {
+            state: MessageState.Sent,
+            id: res?.message?.id,
+            is_sms: res?.message?.is_sms
         });
-        updateMessageItem(data.id, { state: MessageState.Sent });
         chatMessageRef.value?.scrollBottom();
         publicTopicConversationUpdate({
             message: data?.message ?? '',
@@ -212,6 +243,23 @@ const call = () => {
         emit('call', infoUser.value);
     }
 };
+const reconcileAndSortMessages = (serverMessages) => {
+    let currentMessages = [...listMessage.value];
+    serverMessages.forEach((serverMsg) => {
+        const index = currentMessages.findIndex((msg) => msg.id === serverMsg.id);
+        if (index !== -1) {
+            currentMessages[index] = {
+                ...currentMessages[index],
+                ...serverMsg
+            };
+        }
+        else {
+            currentMessages.push(serverMsg);
+        }
+    });
+    listMessage.value = currentMessages.sort((a, b) => dayjs(b.created_at).valueOf() - dayjs(a.created_at).valueOf());
+};
+const handleGetListMqtt = useDebounce(() => handleGetMessage({ is_mqtt: true }), 5000);
 const __VLS_exposed = { getData, handleGetMessage, infoUser };
 defineExpose(__VLS_exposed);
 debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
@@ -227,7 +275,7 @@ let __VLS_elements;
 let __VLS_components;
 let __VLS_directives;
 __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-    ...{ class: "h-full flex flex-col overflow-hidden" },
+    ...{ class: "h-full flex flex-col overflow-hidden relative" },
 });
 /** @type {[typeof HomeHeader, ]} */ ;
 // @ts-ignore
@@ -270,6 +318,7 @@ if (__VLS_ctx.listMessage?.length) {
         ...{ class: "grow" },
         responsive: (__VLS_ctx.responsive),
         showNewCustomer: (__VLS_ctx.page >= __VLS_ctx.pageCount),
+        isLoading: (__VLS_ctx.isLoading),
     }));
     const __VLS_9 = __VLS_8({
         ...{ 'onScrollTop': {} },
@@ -280,6 +329,7 @@ if (__VLS_ctx.listMessage?.length) {
         ...{ class: "grow" },
         responsive: (__VLS_ctx.responsive),
         showNewCustomer: (__VLS_ctx.page >= __VLS_ctx.pageCount),
+        isLoading: (__VLS_ctx.isLoading),
     }, ...__VLS_functionalComponentArgsRest(__VLS_8));
     let __VLS_11;
     let __VLS_12;
@@ -290,7 +340,7 @@ if (__VLS_ctx.listMessage?.length) {
     /** @type {typeof __VLS_ctx.chatMessageRef} */ ;
     var __VLS_15 = {};
     // @ts-ignore
-    [infoUser, responsive, call, reversedList, page, pageCount, handleScrollTop, chatMessageRef,];
+    [infoUser, responsive, call, reversedList, page, pageCount, isLoading, handleScrollTop, chatMessageRef,];
     var __VLS_10;
 }
 else if (!__VLS_ctx.isLoading) {
@@ -357,6 +407,7 @@ if (__VLS_ctx.receiverId != __VLS_ctx.digibotId) {
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
 /** @type {__VLS_StyleScopedClasses['overflow-hidden']} */ ;
+/** @type {__VLS_StyleScopedClasses['relative']} */ ;
 /** @type {__VLS_StyleScopedClasses['shrink-0']} */ ;
 /** @type {__VLS_StyleScopedClasses['grow']} */ ;
 /** @type {__VLS_StyleScopedClasses['grow']} */ ;

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

@@ -25,7 +25,7 @@ const goToViewUser = () => {
     }
 };
 const handleActivePlivoSmsChange = async (is_active) => {
-    // return
+    return;
     try {
         loading.value = true;
         await activePlivoMode({ id: dataProfile.value?.id, is_sms: is_active ? 1 : 0 });
@@ -136,13 +136,15 @@ if (__VLS_ctx.data?.id && __VLS_ctx.data?.id != __VLS_ctx.digibotId.toString() &
         ...{ 'onClick': {} },
         type: (__VLS_ctx.activePlivoSms ? 'success' : 'danger'),
         loading: (__VLS_ctx.loading),
-        ...{ class: "shrink-0 px-1 flex-center gap-2 text-white font-semibold w-9 md:w-[140px] h-9" },
+        ...{ class: "shrink-0 px-1 flex-center gap-2 text-white font-semibold w-9 h-9" },
+        ...{ class: ({ 'w-[140px]': __VLS_ctx.responsive != 'mobile' }) },
     }));
     const __VLS_12 = __VLS_11({
         ...{ 'onClick': {} },
         type: (__VLS_ctx.activePlivoSms ? 'success' : 'danger'),
         loading: (__VLS_ctx.loading),
-        ...{ class: "shrink-0 px-1 flex-center gap-2 text-white font-semibold w-9 md:w-[140px] h-9" },
+        ...{ class: "shrink-0 px-1 flex-center gap-2 text-white font-semibold w-9 h-9" },
+        ...{ class: ({ 'w-[140px]': __VLS_ctx.responsive != 'mobile' }) },
     }, ...__VLS_functionalComponentArgsRest(__VLS_11));
     let __VLS_14;
     let __VLS_15;
@@ -152,7 +154,7 @@ if (__VLS_ctx.data?.id && __VLS_ctx.data?.id != __VLS_ctx.digibotId.toString() &
                     return;
                 __VLS_ctx.handleActivePlivoSmsChange(!__VLS_ctx.activePlivoSms);
                 // @ts-ignore
-                [activePlivoSms, activePlivoSms, loading, handleActivePlivoSmsChange,];
+                [responsive, activePlivoSms, activePlivoSms, loading, handleActivePlivoSmsChange,];
             } });
     const { default: __VLS_17 } = __VLS_13.slots;
     /** @type {[typeof IconSms, ]} */ ;
@@ -227,8 +229,8 @@ if (__VLS_ctx.data?.id && __VLS_ctx.data?.id != __VLS_ctx.digibotId.toString() &
 /** @type {__VLS_StyleScopedClasses['text-white']} */ ;
 /** @type {__VLS_StyleScopedClasses['font-semibold']} */ ;
 /** @type {__VLS_StyleScopedClasses['w-9']} */ ;
-/** @type {__VLS_StyleScopedClasses['md:w-[140px]']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-9']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-[140px]']} */ ;
 /** @type {__VLS_StyleScopedClasses['hidden']} */ ;
 /** @type {__VLS_StyleScopedClasses['md:block']} */ ;
 /** @type {__VLS_StyleScopedClasses['shrink-0']} */ ;

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

@@ -6,30 +6,45 @@ import { useDebounce } from '../../../utils/debounce';
 import dayjs from 'dayjs';
 import { DATE_FORMATS, TIME_ZONE_UTC } from '../../../constant/datetime';
 import { dataProfile } from '../../../utils/chat/store/auth';
-import { computed, ref } from 'vue';
+import { ref, onMounted, onUnmounted } from 'vue';
 import PopoverBase from '../../../components/chat/common/popover/PopoverBase.vue';
-import { activePlivoMode } from '../../../utils/chat/store/message';
+import IconCloseCircle from '../../../assets/icons/global/IconCloseCircle.vue';
+import DropZone from '@/chat/page/home/DropZone.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 modeLabel = computed(() => ChatModeOptions.find((v) => v.value === mode.value)?.label ?? '')
 const keyword = defineModel();
 let chatId = 1;
+let dragCounter = 0;
+onMounted(() => { });
+onUnmounted(() => { });
 const refInputImage = ref(null);
-const isLoadingImage = ref([]);
+// const isLoadingImage = ref<any>([])
 const activePlivoSms = ref(false);
 const loading = ref(false);
 const chatInputRef = ref(null);
 const emojiOpen = ref(false);
-const mode = ref('0');
+// const mode = ref('0')
+const dropFile = ref(null);
+const dropFileLink = ref('');
+const removeDropFile = () => {
+    dropFileLink.value = '';
+    dropFile.value = null;
+};
 const handleSendMessage = async (type) => {
     const tempId = Date.now();
     let messageContent = '';
     let attachments = [];
-    if (type == 'message') {
+    if (dropFile.value) {
+        attachments = [
+            { file_name: String(tempId), file_path: dropFileLink.value, file_local: dropFile.value }
+        ];
+    }
+    else if (type == 'message') {
         if (!keyword.value)
             return;
         messageContent = keyword.value;
@@ -43,14 +58,14 @@ const handleSendMessage = async (type) => {
         const file_path = URL.createObjectURL(file);
         attachments = [{ file_name: String(tempId), file_path, file_local: file }];
     }
-    keyword.value = '';
-    // chatInputRef.value.style.height = 'auto'
+    clearInput();
     chatId++;
     const id = props.data?.id.toString() + '-' + chatId + '-' + Date.now();
     const data = {
         conversation_id: props.data?.conversation_id,
         created_at: dayjs().tz(TIME_ZONE_UTC).format(DATE_FORMATS['DATE_FORMAT_FULL']),
         id,
+        local_id: id,
         message: messageContent,
         receiver_id: props.data?.id || 0,
         sender_id: dataProfile.value?.id,
@@ -76,17 +91,6 @@ const onSelectEmoji = (value) => {
     // emojiOpen.value = false
     // chatInputRef.value?.focus?.()
 };
-const handleActivePlivoSmsChange = async (is_active) => {
-    try {
-        loading.value = true;
-        await activePlivoMode({ id: dataProfile.value?.id, is_sms: is_active ? 1 : 0 });
-    }
-    catch (e) {
-        activePlivoSms.value = !is_active;
-        console.log(e);
-    }
-    loading.value = false;
-};
 const setInputHeight = (e) => {
     const el = chatInputRef.value;
     el.style.height = 'auto';
@@ -108,7 +112,9 @@ const handleInput = () => {
 };
 const clearInput = () => {
     keyword.value = '';
+    removeDropFile();
 };
+const newline = () => { };
 const __VLS_exposed = { clearInput };
 defineExpose(__VLS_exposed);
 debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
@@ -133,55 +139,91 @@ __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
 __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
     ...{ class: "relative grow" },
 });
-__VLS_asFunctionalElement(__VLS_elements.textarea)({
-    ...{ onKeydown: (...[$event]) => {
-            __VLS_ctx.handleSendMessage('message');
-            // @ts-ignore
-            [handleSendMessage,];
-        } },
-    ...{ onFocus: (...[$event]) => {
-            __VLS_ctx.handleInput();
-            // @ts-ignore
-            [handleInput,];
-        } },
-    ...{ onInput: (...[$event]) => {
-            __VLS_ctx.setInputHeight($event);
-            // @ts-ignore
-            [setInputHeight,];
-        } },
-    ...{ class: "text-[14px] sm:text-base w-full min-h-11 overflow-hidden chat-input !rounded-xl px-4 py-2 border border-chat-haze-200 leading-[24px]" },
-    ref: "chatInputRef",
-    rows: "1",
-    placeholder: "Send Message",
-    value: (__VLS_ctx.keyword),
-});
-/** @type {typeof __VLS_ctx.chatInputRef} */ ;
-// @ts-ignore
-[keyword, chatInputRef,];
+if (__VLS_ctx.dropFileLink) {
+    // @ts-ignore
+    [dropFileLink,];
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ class: "border border-chat-haze-200 rounded-xl p-4" },
+    });
+    __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
+        ...{ onClick: (...[$event]) => {
+                if (!(__VLS_ctx.dropFileLink))
+                    return;
+                __VLS_ctx.removeDropFile();
+                // @ts-ignore
+                [removeDropFile,];
+            } },
+        ...{ class: "absolute top-4 right-4" },
+    });
+    /** @type {[typeof IconCloseCircle, ]} */ ;
+    // @ts-ignore
+    const __VLS_0 = __VLS_asFunctionalComponent(IconCloseCircle, new IconCloseCircle({}));
+    const __VLS_1 = __VLS_0({}, ...__VLS_functionalComponentArgsRest(__VLS_0));
+    __VLS_asFunctionalElement(__VLS_elements.img)({
+        ...{ class: "max-h-[150px] w-auto" },
+        src: (__VLS_ctx.dropFileLink),
+    });
+    // @ts-ignore
+    [dropFileLink,];
+}
+else {
+    __VLS_asFunctionalElement(__VLS_elements.textarea)({
+        ...{ onKeydown: (...[$event]) => {
+                if (!!(__VLS_ctx.dropFileLink))
+                    return;
+                __VLS_ctx.handleSendMessage('message');
+                // @ts-ignore
+                [handleSendMessage,];
+            } },
+        ...{ onKeydown: (__VLS_ctx.newline) },
+        ...{ onFocus: (...[$event]) => {
+                if (!!(__VLS_ctx.dropFileLink))
+                    return;
+                __VLS_ctx.handleInput();
+                // @ts-ignore
+                [newline, handleInput,];
+            } },
+        ...{ onInput: (...[$event]) => {
+                if (!!(__VLS_ctx.dropFileLink))
+                    return;
+                __VLS_ctx.setInputHeight($event);
+                // @ts-ignore
+                [setInputHeight,];
+            } },
+        ...{ class: "text-[14px] sm:text-base w-full min-h-11 overflow-hidden chat-input !rounded-xl px-4 py-2 border border-chat-haze-200 leading-[24px]" },
+        ref: "chatInputRef",
+        rows: "1",
+        placeholder: "Send Message",
+        value: (__VLS_ctx.keyword),
+    });
+    /** @type {typeof __VLS_ctx.chatInputRef} */ ;
+    // @ts-ignore
+    [keyword, chatInputRef,];
+}
 __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
     ...{ class: "flex gap-2 -translate-y-2" },
 });
-if (!__VLS_ctx.dataProfile?.is_sms_active) {
+if (!__VLS_ctx.dataProfile?.is_sms_active && !__VLS_ctx.dropFileLink) {
     // @ts-ignore
-    [dataProfile,];
+    [dropFileLink, dataProfile,];
     /** @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)({
         ...{ onClick: (...[$event]) => {
-                if (!(!__VLS_ctx.dataProfile?.is_sms_active))
+                if (!(!__VLS_ctx.dataProfile?.is_sms_active && !__VLS_ctx.dropFileLink))
                     return;
                 __VLS_ctx.emojiOpen = !__VLS_ctx.emojiOpen;
                 // @ts-ignore
@@ -190,63 +232,65 @@ if (!__VLS_ctx.dataProfile?.is_sms_active) {
         ...{ class: "h-11 w-8" },
     });
     {
-        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;
+    var __VLS_6;
 }
 if (!__VLS_ctx.dataProfile?.is_sms_active) {
     // @ts-ignore
     [dataProfile,];
-    const __VLS_13 = {}.EmojiPicker;
+    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({
         ...{ class: "opacity-0 pointer-events-none absolute" },
         native: (true),
         offset: (2),
         hideSearch: true,
     }));
-    const __VLS_15 = __VLS_14({
+    const __VLS_19 = __VLS_18({
         ...{ class: "opacity-0 pointer-events-none absolute" },
         native: (true),
         offset: (2),
         hideSearch: true,
-    }, ...__VLS_functionalComponentArgsRest(__VLS_14));
+    }, ...__VLS_functionalComponentArgsRest(__VLS_18));
 }
 __VLS_asFunctionalElement(__VLS_elements.label, __VLS_elements.label)({
     ...{ class: "cursor-pointer relative" },
 });
-__VLS_asFunctionalDirective(__VLS_directives.vShow)(null, { ...__VLS_directiveBindingRestFields, value: (!(__VLS_ctx.keyword != '' && __VLS_ctx.responsive == 'mobile') && !__VLS_ctx.dataProfile?.is_sms_active) }, null, null);
+__VLS_asFunctionalDirective(__VLS_directives.vShow)(null, { ...__VLS_directiveBindingRestFields, value: (!(__VLS_ctx.keyword != '' && __VLS_ctx.responsive == 'mobile') &&
+        !__VLS_ctx.dataProfile?.is_sms_active &&
+        !__VLS_ctx.dropFileLink) }, null, null);
 // @ts-ignore
-[keyword, dataProfile, responsive,];
+[dropFileLink, keyword, dataProfile, responsive,];
 __VLS_asFunctionalElement(__VLS_elements.input)({
     ...{ onChange: (__VLS_ctx.handleFileUpload) },
     type: "file",
@@ -283,12 +327,28 @@ __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
 });
 /** @type {[typeof IconPlan, ]} */ ;
 // @ts-ignore
-const __VLS_18 = __VLS_asFunctionalComponent(IconPlan, new IconPlan({
+const __VLS_22 = __VLS_asFunctionalComponent(IconPlan, new IconPlan({
     color: "#fff",
 }));
-const __VLS_19 = __VLS_18({
+const __VLS_23 = __VLS_22({
     color: "#fff",
-}, ...__VLS_functionalComponentArgsRest(__VLS_18));
+}, ...__VLS_functionalComponentArgsRest(__VLS_22));
+if (!__VLS_ctx.dataProfile?.is_sms_active) {
+    // @ts-ignore
+    [dataProfile,];
+    /** @type {[typeof DropZone, ]} */ ;
+    // @ts-ignore
+    const __VLS_26 = __VLS_asFunctionalComponent(DropZone, new DropZone({
+        link: (__VLS_ctx.dropFileLink),
+        file: (__VLS_ctx.dropFile),
+    }));
+    const __VLS_27 = __VLS_26({
+        link: (__VLS_ctx.dropFileLink),
+        file: (__VLS_ctx.dropFile),
+    }, ...__VLS_functionalComponentArgsRest(__VLS_26));
+    // @ts-ignore
+    [dropFileLink, dropFile,];
+}
 /** @type {__VLS_StyleScopedClasses['z-10']} */ ;
 /** @type {__VLS_StyleScopedClasses['layout-shadow']} */ ;
 /** @type {__VLS_StyleScopedClasses['border-t']} */ ;
@@ -299,6 +359,15 @@ const __VLS_19 = __VLS_18({
 /** @type {__VLS_StyleScopedClasses['h-max']} */ ;
 /** @type {__VLS_StyleScopedClasses['relative']} */ ;
 /** @type {__VLS_StyleScopedClasses['grow']} */ ;
+/** @type {__VLS_StyleScopedClasses['border']} */ ;
+/** @type {__VLS_StyleScopedClasses['border-chat-haze-200']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-xl']} */ ;
+/** @type {__VLS_StyleScopedClasses['p-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['absolute']} */ ;
+/** @type {__VLS_StyleScopedClasses['top-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['right-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['max-h-[150px]']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-auto']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-[14px]']} */ ;
 /** @type {__VLS_StyleScopedClasses['sm:text-base']} */ ;
 /** @type {__VLS_StyleScopedClasses['w-full']} */ ;

package/dist/chat/page/home/PhoneNumpad.vue.js

@@ -65,10 +65,12 @@ else {
     const __VLS_8 = __VLS_asFunctionalComponent(DrawerBaseCustom, new DrawerBaseCustom({
         ref: "drawerVisibleRef",
         responsive: (__VLS_ctx.responsive),
+        absolute: true,
     }));
     const __VLS_9 = __VLS_8({
         ref: "drawerVisibleRef",
         responsive: (__VLS_ctx.responsive),
+        absolute: true,
     }, ...__VLS_functionalComponentArgsRest(__VLS_8));
     /** @type {typeof __VLS_ctx.drawerVisibleRef} */ ;
     var __VLS_11 = {};