@phonghq/go-chat 1.0.34 → 1.0.36

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

@@ -1,5 +1,4 @@
 import InputSearch from '../../../components/chat/common/input/InputSearch.vue';
-import IconPlus from '../../../assets/icons/IconPlus.vue';
 import { computed, ref } from 'vue';
 import Avatar from '../../../components/chat/customer/Avatar.vue';
 import ScrollEvent from '../../../components/chat/ScrollEvent/ScrollEvent.vue';
@@ -15,6 +14,7 @@ import { TIME_ZONE_UTC } from '../../../constant/datetime';
 import IconAiCheck from '../../../assets/icons/IconAiCheck.vue';
 import TabBase from '../../../components/chat/common/tab/TabBase.vue';
 import { useListConversations } from '../../../composable/useListConversations';
+import { phoneNumberFormat } from '../../../utils/string-helper';
 dayjs.extend(updateLocale);
 dayjs.extend(relativeTime);
 dayjs.extend(utc);
@@ -202,66 +202,55 @@ const __VLS_5 = ({ search: {} },
 // @ts-ignore
 [responsive, keyword, handleSearch,];
 var __VLS_2;
-__VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
-    ...{ class: "h-11 w-11 rounded-full flex-center bg-[#C7DEFF]" },
-});
-/** @type {[typeof IconPlus, ]} */ ;
-// @ts-ignore
-const __VLS_7 = __VLS_asFunctionalComponent(IconPlus, new IconPlus({
-    ...{ class: "text-[#004AB3]" },
-}));
-const __VLS_8 = __VLS_7({
-    ...{ class: "text-[#004AB3]" },
-}, ...__VLS_functionalComponentArgsRest(__VLS_7));
 if (__VLS_ctx.dataProfile?.user_type == 'tenant') {
     // @ts-ignore
     [dataProfile,];
     /** @type {[typeof TabBase, ]} */ ;
     // @ts-ignore
-    const __VLS_11 = __VLS_asFunctionalComponent(TabBase, new TabBase({
+    const __VLS_7 = __VLS_asFunctionalComponent(TabBase, new TabBase({
         ...{ 'onChange': {} },
         ...{ class: "shrink-0 px-6" },
         tabs: (__VLS_ctx.tabs),
         active: (__VLS_ctx.activeTabs),
     }));
-    const __VLS_12 = __VLS_11({
+    const __VLS_8 = __VLS_7({
         ...{ 'onChange': {} },
         ...{ class: "shrink-0 px-6" },
         tabs: (__VLS_ctx.tabs),
         active: (__VLS_ctx.activeTabs),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_11));
-    let __VLS_14;
-    let __VLS_15;
-    const __VLS_16 = ({ change: {} },
+    }, ...__VLS_functionalComponentArgsRest(__VLS_7));
+    let __VLS_10;
+    let __VLS_11;
+    const __VLS_12 = ({ change: {} },
         { onChange: (__VLS_ctx.handleTabChange) });
     // @ts-ignore
     [tabs, activeTabs, handleTabChange,];
-    var __VLS_13;
+    var __VLS_9;
 }
 __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
     ...{ class: "grow relative overflow-hidden" },
 });
 /** @type {[typeof ScrollEvent, typeof ScrollEvent, ]} */ ;
 // @ts-ignore
-const __VLS_18 = __VLS_asFunctionalComponent(ScrollEvent, new ScrollEvent({
+const __VLS_14 = __VLS_asFunctionalComponent(ScrollEvent, new ScrollEvent({
     ...{ 'onGetDataBottom': {} },
     ref: "scrollEventRef",
     ...{ class: "h-full overflow-auto" },
     bottom: true,
 }));
-const __VLS_19 = __VLS_18({
+const __VLS_15 = __VLS_14({
     ...{ 'onGetDataBottom': {} },
     ref: "scrollEventRef",
     ...{ class: "h-full overflow-auto" },
     bottom: true,
-}, ...__VLS_functionalComponentArgsRest(__VLS_18));
-let __VLS_21;
-let __VLS_22;
-const __VLS_23 = ({ getDataBottom: {} },
+}, ...__VLS_functionalComponentArgsRest(__VLS_14));
+let __VLS_17;
+let __VLS_18;
+const __VLS_19 = ({ getDataBottom: {} },
     { onGetDataBottom: (__VLS_ctx.handleScroll) });
 /** @type {typeof __VLS_ctx.scrollEventRef} */ ;
-var __VLS_24 = {};
-const { default: __VLS_26 } = __VLS_20.slots;
+var __VLS_20 = {};
+const { default: __VLS_22 } = __VLS_16.slots;
 // @ts-ignore
 [handleScroll, scrollEventRef,];
 for (const [user] of __VLS_getVForSourceType((__VLS_ctx.listConversations))) {
@@ -284,20 +273,20 @@ for (const [user] of __VLS_getVForSourceType((__VLS_ctx.listConversations))) {
     [responsive, receiver_id,];
     /** @type {[typeof Avatar, ]} */ ;
     // @ts-ignore
-    const __VLS_27 = __VLS_asFunctionalComponent(Avatar, new Avatar({
+    const __VLS_23 = __VLS_asFunctionalComponent(Avatar, new Avatar({
         id: (user.id),
         ...{ class: "shrink-0" },
         src: (user.avatar ?? ''),
         color: (user.color),
         name: (user.username ?? ''),
     }));
-    const __VLS_28 = __VLS_27({
+    const __VLS_24 = __VLS_23({
         id: (user.id),
         ...{ class: "shrink-0" },
         src: (user.avatar ?? ''),
         color: (user.color),
         name: (user.username ?? ''),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_27));
+    }, ...__VLS_functionalComponentArgsRest(__VLS_23));
     __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
         ...{ class: "grow ml-3 overflow-hidden" },
     });
@@ -313,18 +302,20 @@ for (const [user] of __VLS_getVForSourceType((__VLS_ctx.listConversations))) {
     __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
         ...{ class: "truncate font-semibold" },
     });
-    (user.username);
+    (user.username || __VLS_ctx.phoneNumberFormat(user.phone) || 'n/a');
+    // @ts-ignore
+    [phoneNumberFormat,];
     if (user.id == __VLS_ctx.digibotId) {
         // @ts-ignore
         [digibotId,];
         /** @type {[typeof IconAiCheck, ]} */ ;
         // @ts-ignore
-        const __VLS_31 = __VLS_asFunctionalComponent(IconAiCheck, new IconAiCheck({
+        const __VLS_27 = __VLS_asFunctionalComponent(IconAiCheck, new IconAiCheck({
             ...{ class: "ml-2" },
         }));
-        const __VLS_32 = __VLS_31({
+        const __VLS_28 = __VLS_27({
             ...{ class: "ml-2" },
-        }, ...__VLS_functionalComponentArgsRest(__VLS_31));
+        }, ...__VLS_functionalComponentArgsRest(__VLS_27));
     }
     if (user.unread_count) {
         __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
@@ -341,13 +332,13 @@ for (const [user] of __VLS_getVForSourceType((__VLS_ctx.listConversations))) {
     });
     (user.last_message ?? 'No messages');
     __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
-        ...{ class: "shrink-0 text-sm text-right text-chat-gray-4 w-[130px]" },
+        ...{ class: "shrink-0 text-sm text-right text-chat-gray-4 w-[80px] md:w-[130px]" },
     });
     (__VLS_ctx.getTimeFromNow(user.last_message_time ?? ''));
     // @ts-ignore
     [getTimeFromNow,];
 }
-var __VLS_20;
+var __VLS_16;
 /** @type {__VLS_StyleScopedClasses['']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
@@ -362,12 +353,6 @@ var __VLS_20;
 /** @type {__VLS_StyleScopedClasses['mb-4']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-11']} */ ;
 /** @type {__VLS_StyleScopedClasses['grow']} */ ;
-/** @type {__VLS_StyleScopedClasses['h-11']} */ ;
-/** @type {__VLS_StyleScopedClasses['w-11']} */ ;
-/** @type {__VLS_StyleScopedClasses['rounded-full']} */ ;
-/** @type {__VLS_StyleScopedClasses['flex-center']} */ ;
-/** @type {__VLS_StyleScopedClasses['bg-[#C7DEFF]']} */ ;
-/** @type {__VLS_StyleScopedClasses['text-[#004AB3]']} */ ;
 /** @type {__VLS_StyleScopedClasses['shrink-0']} */ ;
 /** @type {__VLS_StyleScopedClasses['px-6']} */ ;
 /** @type {__VLS_StyleScopedClasses['grow']} */ ;
@@ -417,9 +402,10 @@ var __VLS_20;
 /** @type {__VLS_StyleScopedClasses['text-sm']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-right']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-chat-gray-4']} */ ;
-/** @type {__VLS_StyleScopedClasses['w-[130px]']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-[80px]']} */ ;
+/** @type {__VLS_StyleScopedClasses['md:w-[130px]']} */ ;
 // @ts-ignore
-var __VLS_25 = __VLS_24;
+var __VLS_21 = __VLS_20;
 const __VLS_export = (await import('vue')).defineComponent({
     setup: () => (__VLS_exposed),
     __typeEmits: {},

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

@@ -87,9 +87,9 @@ __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
 });
 // @ts-ignore
 [shouldShowAvatar, isMyMessage, isMyMessage,];
-if (__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending) {
+if (__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending || __VLS_ctx.isMyMessage) {
     // @ts-ignore
-    [message, MessageState,];
+    [isMyMessage, message, MessageState,];
     if (!__VLS_ctx.isMyMessage) {
         // @ts-ignore
         [isMyMessage,];
@@ -133,13 +133,13 @@ if (__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending) {
                 '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,
+                '!text-[#14532D] !bg-[#d4f8d4]': (__VLS_ctx.message.message_uuid && !__VLS_ctx.message.is_call) || __VLS_ctx.message.is_sms,
                 'bg-[#D0DFEC] text-[#266699]': __VLS_ctx.isMyMessage,
                 'bg-[#E4E4E4D4]  text-chat-haze-600  w-max ': !__VLS_ctx.isMyMessage
             }) },
     });
     // @ts-ignore
-    [shouldShowAvatar, shouldShowAvatar, isMyMessage, isMyMessage, isMyMessage, isMyMessage, isMyMessage, isMyMessage, message, message, isEndMessage, isEndMessage,];
+    [shouldShowAvatar, shouldShowAvatar, isMyMessage, isMyMessage, isMyMessage, isMyMessage, isMyMessage, isMyMessage, message, message, message, isEndMessage, isEndMessage,];
     if (__VLS_ctx.message.is_call == 1) {
         // @ts-ignore
         [message,];
@@ -195,7 +195,7 @@ if (__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending) {
         [message, getCallDuration,];
         __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
             ...{ onClick: (...[$event]) => {
-                    if (!(__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending))
+                    if (!(__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending || __VLS_ctx.isMyMessage))
                         return;
                     if (!(__VLS_ctx.message.is_call == 1))
                         return;

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

@@ -35,6 +35,7 @@ const handleConnectMqtt = async () => {
         // console.log(topic)
         // console.log(topic_plivo_chat)
         addHandleMqttMessage('chat-home', topic, mqttMessageHandler);
+        addHandleMqttMessage('chat-home-1', topic_plivo_chat, mqttMessageHandler);
     }
     catch (error) {
         console.error(error);
@@ -44,9 +45,9 @@ const handleDisconnectMqtt = async () => {
     unsubscribeFromTopic(topic);
     unsubscribeFromTopic(topic_plivo_chat);
     removeHandleMqttMessage('chat-home');
+    removeHandleMqttMessage('chat-home-1');
 };
 const mqttMessageHandler = (topic, message) => {
-    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) {
@@ -132,6 +133,7 @@ const handleSendMessage = async (data) => {
     try {
         // listMessage.value.push({ ...data, state: MessageState.Sending })
         listMessage.value.unshift({ ...data, state: MessageState.Sending });
+        await nextTick();
         publishMessage(topic, {
             ...data,
             state: MessageState.Sending

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

@@ -7,8 +7,14 @@ import { user } from '../../../utils/chat/user';
 import { dataProfile } from '../../../utils/chat/auth';
 import { digibotId } from '../../../composable/useDigibot';
 import IconArrowLeft from '../../../assets/icons/IconArrowLeft.vue';
+import IconSms from '../../../assets/icons/IconSms.vue';
+import { activePlivoMode } from '../../..//utils/chat/message';
+import { ref } from 'vue';
+import ButtonBase from '../../../components/common/button/ButtonBase.vue';
 const props = withDefaults(defineProps(), {});
 const emit = defineEmits();
+const activePlivoSms = ref(dataProfile.value?.is_sms_active == 1);
+const loading = ref(false);
 const goToViewUser = () => {
     if (props.data?.id == digibotId.toString())
         return;
@@ -17,6 +23,21 @@ const goToViewUser = () => {
         routerPush(PAGE.CUSTOMER_DETAIL);
     }
 };
+const handleActivePlivoSmsChange = async (is_active) => {
+    return;
+    try {
+        loading.value = true;
+        await activePlivoMode({ id: dataProfile.value?.id, is_sms: is_active ? 1 : 0 });
+        if (dataProfile.value != null)
+            dataProfile.value.is_sms_active = (is_active ? 1 : 0);
+        activePlivoSms.value = is_active;
+    }
+    catch (e) {
+        activePlivoSms.value = !is_active;
+        console.log(e);
+    }
+    loading.value = false;
+};
 debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
 const __VLS_defaults = {};
 const __VLS_ctx = {
@@ -102,6 +123,46 @@ __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
 (__VLS_ctx.data?.username ?? 'n/a');
 // @ts-ignore
 [data,];
+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,];
+    /** @type {[typeof ButtonBase, typeof ButtonBase, ]} */ ;
+    // @ts-ignore
+    const __VLS_11 = __VLS_asFunctionalComponent(ButtonBase, new ButtonBase({
+        ...{ '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" },
+    }));
+    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" },
+    }, ...__VLS_functionalComponentArgsRest(__VLS_11));
+    let __VLS_14;
+    let __VLS_15;
+    const __VLS_16 = ({ click: {} },
+        { onClick: (...[$event]) => {
+                if (!(__VLS_ctx.data?.id && __VLS_ctx.data?.id != __VLS_ctx.digibotId.toString() && __VLS_ctx.dataProfile?.user_type == 'tenant'))
+                    return;
+                __VLS_ctx.handleActivePlivoSmsChange(!__VLS_ctx.activePlivoSms);
+                // @ts-ignore
+                [activePlivoSms, activePlivoSms, loading, handleActivePlivoSmsChange,];
+            } });
+    const { default: __VLS_17 } = __VLS_13.slots;
+    /** @type {[typeof IconSms, ]} */ ;
+    // @ts-ignore
+    const __VLS_18 = __VLS_asFunctionalComponent(IconSms, new IconSms({}));
+    const __VLS_19 = __VLS_18({}, ...__VLS_functionalComponentArgsRest(__VLS_18));
+    __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
+        ...{ class: "hidden md:block" },
+    });
+    (__VLS_ctx.activePlivoSms ? 'ON' : 'OFF');
+    // @ts-ignore
+    [activePlivoSms,];
+    var __VLS_13;
+}
 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,];
@@ -117,8 +178,8 @@ if (__VLS_ctx.data?.id && __VLS_ctx.data?.id != __VLS_ctx.digibotId.toString() &
     });
     /** @type {[typeof IconPhone, ]} */ ;
     // @ts-ignore
-    const __VLS_11 = __VLS_asFunctionalComponent(IconPhone, new IconPhone({}));
-    const __VLS_12 = __VLS_11({}, ...__VLS_functionalComponentArgsRest(__VLS_11));
+    const __VLS_22 = __VLS_asFunctionalComponent(IconPhone, new IconPhone({}));
+    const __VLS_23 = __VLS_22({}, ...__VLS_functionalComponentArgsRest(__VLS_22));
 }
 /** @type {__VLS_StyleScopedClasses['px-8']} */ ;
 /** @type {__VLS_StyleScopedClasses['pb-4']} */ ;
@@ -147,6 +208,17 @@ if (__VLS_ctx.data?.id && __VLS_ctx.data?.id != __VLS_ctx.digibotId.toString() &
 /** @type {__VLS_StyleScopedClasses['font-semibold']} */ ;
 /** @type {__VLS_StyleScopedClasses['truncate']} */ ;
 /** @type {__VLS_StyleScopedClasses['shrink-0']} */ ;
+/** @type {__VLS_StyleScopedClasses['px-1']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['gap-2']} */ ;
+/** @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['hidden']} */ ;
+/** @type {__VLS_StyleScopedClasses['md:block']} */ ;
+/** @type {__VLS_StyleScopedClasses['shrink-0']} */ ;
 /** @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

@@ -8,9 +8,7 @@ import { DATE_FORMATS, TIME_ZONE_UTC } from '../../../constant/datetime';
 import { dataProfile } from '../../../utils/chat/auth';
 import { computed, ref } from 'vue';
 import PopoverBase from '../../../components/chat/common/popover/PopoverBase.vue';
-import SwitchBase from '../../../components/chat/common/switch/SwitchBase.vue';
 import { activePlivoMode } from '../../../utils/chat/message';
-import BaseSpin from '../../../components/chat/common/spin/BaseSpin.vue';
 const props = withDefaults(defineProps(), {});
 const emit = defineEmits();
 const ChatModeOptions = [
@@ -45,17 +43,19 @@ const handleSendMessage = async (type) => {
         attachments = [{ file_name: String(tempId), file_path, file_local: file }];
     }
     keyword.value = '';
+    // chatInputRef.value.style.height = 'auto'
     chatId++;
     const id = props.data?.id.toString() + '-' + chatId;
     const data = {
-        conversation_id: 135,
+        conversation_id: props.data?.conversation_id,
         created_at: dayjs().tz(TIME_ZONE_UTC).format(DATE_FORMATS['DATE_FORMAT_FULL']),
         id,
         message: messageContent,
         receiver_id: props.data?.id || 0,
         sender_id: dataProfile.value?.id,
         status: 'read',
-        attachments: attachments
+        attachments: attachments,
+        is_sms: dataProfile.value?.is_sms_active,
     };
     emit('sendMessage', data);
 };
@@ -86,14 +86,20 @@ const handleActivePlivoSmsChange = async (is_active) => {
     }
     loading.value = false;
 };
-const setInputHeight = () => {
+const setInputHeight = (e) => {
     const el = chatInputRef.value;
     el.style.height = 'auto';
-    el.style.height = el.scrollHeight + 'px';
+    if (keyword.value?.replace(/\s+/g, "") == '') {
+        el.style.height = 42 + 'px';
+        keyword.value = '';
+    }
+    else {
+        el.style.height = el.scrollHeight + 'px';
+    }
 };
-const handleSetInputHeight = useDebounce(() => {
-    setInputHeight();
-}, 50);
+const handleSetInputHeight = useDebounce((e) => {
+    setInputHeight(e);
+}, 200);
 const handleInput = () => {
     emit('focus');
 };
@@ -119,46 +125,6 @@ __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: "flex gap-2 mb-2" },
-    });
-    /** @type {[typeof SwitchBase, ]} */ ;
-    // @ts-ignore
-    const __VLS_0 = __VLS_asFunctionalComponent(SwitchBase, new SwitchBase({
-        ...{ 'onChange': {} },
-        modelValue: (__VLS_ctx.activePlivoSms),
-        label: "Active sms",
-    }));
-    const __VLS_1 = __VLS_0({
-        ...{ 'onChange': {} },
-        modelValue: (__VLS_ctx.activePlivoSms),
-        label: "Active sms",
-    }, ...__VLS_functionalComponentArgsRest(__VLS_0));
-    let __VLS_3;
-    let __VLS_4;
-    const __VLS_5 = ({ change: {} },
-        { onChange: (__VLS_ctx.handleActivePlivoSmsChange) });
-    // @ts-ignore
-    [activePlivoSms, handleActivePlivoSmsChange,];
-    var __VLS_2;
-    if (__VLS_ctx.loading) {
-        // @ts-ignore
-        [loading,];
-        /** @type {[typeof BaseSpin, ]} */ ;
-        // @ts-ignore
-        const __VLS_7 = __VLS_asFunctionalComponent(BaseSpin, new BaseSpin({
-            size: (24),
-            border: (3),
-        }));
-        const __VLS_8 = __VLS_7({
-            size: (24),
-            border: (3),
-        }, ...__VLS_functionalComponentArgsRest(__VLS_7));
-    }
-}
 __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
     ...{ class: "flex gap-2 items-end h-max" },
 });
@@ -177,14 +143,14 @@ __VLS_asFunctionalElement(__VLS_elements.textarea)({
             [handleInput,];
         } },
     ...{ onInput: (...[$event]) => {
-            __VLS_ctx.setInputHeight();
+            __VLS_ctx.setInputHeight($event);
             // @ts-ignore
             [setInputHeight,];
         } },
-    ...{ class: "w-full min-h-11 resize-none overflow-hidden chat-input !rounded-xl pl-4 py-2 pr-[96px] border border-chat-haze-200" },
+    ...{ class: "w-full min-h-11 overflow-hidden chat-input !rounded-xl pl-4 py-2 pr-[96px] border border-chat-haze-200" },
     ref: "chatInputRef",
-    placeholder: "Send Message",
     rows: "1",
+    placeholder: "Send Message",
     value: (__VLS_ctx.keyword),
 });
 /** @type {typeof __VLS_ctx.chatInputRef} */ ;
@@ -195,17 +161,17 @@ __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
 });
 /** @type {[typeof PopoverBase, typeof PopoverBase, ]} */ ;
 // @ts-ignore
-const __VLS_11 = __VLS_asFunctionalComponent(PopoverBase, new PopoverBase({
+const __VLS_0 = __VLS_asFunctionalComponent(PopoverBase, new PopoverBase({
     open: (__VLS_ctx.emojiOpen),
     align: "end",
     side: "top",
 }));
-const __VLS_12 = __VLS_11({
+const __VLS_1 = __VLS_0({
     open: (__VLS_ctx.emojiOpen),
     align: "end",
     side: "top",
-}, ...__VLS_functionalComponentArgsRest(__VLS_11));
-const { default: __VLS_14 } = __VLS_13.slots;
+}, ...__VLS_functionalComponentArgsRest(__VLS_0));
+const { default: __VLS_3 } = __VLS_2.slots;
 // @ts-ignore
 [emojiOpen,];
 __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
@@ -217,35 +183,35 @@ __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
     ...{ class: "h-11 w-10" },
 });
 {
-    const { content: __VLS_15 } = __VLS_13.slots;
-    const __VLS_16 = {}.EmojiPicker;
+    const { content: __VLS_4 } = __VLS_2.slots;
+    const __VLS_5 = {}.EmojiPicker;
     /** @type {[typeof __VLS_components.EmojiPicker, typeof __VLS_components.emojiPicker, ]} */ ;
     // @ts-ignore
     EmojiPicker;
     // @ts-ignore
-    const __VLS_17 = __VLS_asFunctionalComponent(__VLS_16, new __VLS_16({
+    const __VLS_6 = __VLS_asFunctionalComponent(__VLS_5, new __VLS_5({
         ...{ 'onSelect': {} },
         ...{ class: "!w-[300px]" },
         native: (true),
         offset: (2),
         hideSearch: true,
     }));
-    const __VLS_18 = __VLS_17({
+    const __VLS_7 = __VLS_6({
         ...{ 'onSelect': {} },
         ...{ class: "!w-[300px]" },
         native: (true),
         offset: (2),
         hideSearch: true,
-    }, ...__VLS_functionalComponentArgsRest(__VLS_17));
-    let __VLS_20;
-    let __VLS_21;
-    const __VLS_22 = ({ select: {} },
+    }, ...__VLS_functionalComponentArgsRest(__VLS_6));
+    let __VLS_9;
+    let __VLS_10;
+    const __VLS_11 = ({ select: {} },
         { onSelect: (__VLS_ctx.onSelectEmoji) });
     // @ts-ignore
     [onSelectEmoji,];
-    var __VLS_19;
+    var __VLS_8;
 }
-var __VLS_13;
+var __VLS_2;
 __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
     ...{ onClick: (...[$event]) => {
             __VLS_ctx.handleSendMessage('message');
@@ -256,8 +222,8 @@ __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
 });
 /** @type {[typeof IconPlan, ]} */ ;
 // @ts-ignore
-const __VLS_24 = __VLS_asFunctionalComponent(IconPlan, new IconPlan({}));
-const __VLS_25 = __VLS_24({}, ...__VLS_functionalComponentArgsRest(__VLS_24));
+const __VLS_13 = __VLS_asFunctionalComponent(IconPlan, new IconPlan({}));
+const __VLS_14 = __VLS_13({}, ...__VLS_functionalComponentArgsRest(__VLS_13));
 __VLS_asFunctionalElement(__VLS_elements.label, __VLS_elements.label)({
     ...{ class: "shrink-0 cursor-pointer relative -translate-y-1" },
 });
@@ -276,25 +242,21 @@ __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
 });
 /** @type {[typeof IconPlus, ]} */ ;
 // @ts-ignore
-const __VLS_28 = __VLS_asFunctionalComponent(IconPlus, new IconPlus({
+const __VLS_17 = __VLS_asFunctionalComponent(IconPlus, new IconPlus({
     ...{ class: "text-white" },
 }));
-const __VLS_29 = __VLS_28({
+const __VLS_18 = __VLS_17({
     ...{ class: "text-white" },
-}, ...__VLS_functionalComponentArgsRest(__VLS_28));
+}, ...__VLS_functionalComponentArgsRest(__VLS_17));
 /** @type {__VLS_StyleScopedClasses['z-10']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
 /** @type {__VLS_StyleScopedClasses['gap-2']} */ ;
-/** @type {__VLS_StyleScopedClasses['mb-2']} */ ;
-/** @type {__VLS_StyleScopedClasses['flex']} */ ;
-/** @type {__VLS_StyleScopedClasses['gap-2']} */ ;
 /** @type {__VLS_StyleScopedClasses['items-end']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-max']} */ ;
 /** @type {__VLS_StyleScopedClasses['relative']} */ ;
 /** @type {__VLS_StyleScopedClasses['grow']} */ ;
 /** @type {__VLS_StyleScopedClasses['w-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['min-h-11']} */ ;
-/** @type {__VLS_StyleScopedClasses['resize-none']} */ ;
 /** @type {__VLS_StyleScopedClasses['overflow-hidden']} */ ;
 /** @type {__VLS_StyleScopedClasses['chat-input']} */ ;
 /** @type {__VLS_StyleScopedClasses['!rounded-xl']} */ ;

package/dist/test/components/chat/ScrollEvent/ScrollEvent.vue.js

@@ -107,6 +107,8 @@ const hideLoading = () => {
     loadingTop.value = false;
 };
 const handleScroll = (event, el) => {
+    if (props.disabled)
+        return;
     const scrollTop = el.scrollTop;
     const scrollHeight = el.scrollHeight;
     const clientHeight = el.clientHeight;