@phonghq/go-chat 1.0.26 → 1.0.28

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

@@ -55,111 +55,14 @@ const listConversations = computed(() => {
         return listConversationsAll.value;
     return listConversationsUnknown.value;
 });
-const isOpen = ref(false);
 const keyword = ref('');
 const activeTabs = ref(TAB_VALUE.ALL);
 const scrollEventRef = ref(null);
-// const listConversations = ref<IConversation[]>([])
-// const params = ref({
-//   page: 1,
-//   search: ''
-// })
-// let pageCount = 0
 const isLoadingSearch = ref(false);
-//
-// onMounted(() => {
-//   handleConnectMqtt()
-// })
-//
-// onUnmounted(() => {
-//   handleDisconnectMqtt
-// })
-//
-// const handleDisconnectMqtt = () => {
-//   TOPIC_HOME.forEach((item: string) => {
-//     unsubscribeFromTopic(item + dataProfile.value?.id)
-//     removeHandleMqttMessage('chat-list-' + item)
-//   })
-//   if (dataProfile.value?.user_type == 'tenant') {
-//     subscribeToTopic(TOPIC_STATUS_USER + dataProfile.value?.id)
-//     removeHandleMqttMessage('chat-list-' + TOPIC_STATUS_USER)
-//   }
-// }
-//
-// const handleConnectMqtt = async () => {
-//   try {
-//     if (dataProfile.value) {
-//       await connectMqtt()
-//       TOPIC_HOME.forEach((item: string) => {
-//         subscribeToTopic(item + dataProfile.value?.id)
-//         addHandleMqttMessage('chat-list-' + item, item + dataProfile.value?.id, mqttMessageHandler)
-//       })
-//       subscribeToTopic(TOPIC_STATUS_USER + dataProfile.value?.id)
-//       addHandleMqttMessage(
-//         'chat-list-' + TOPIC_STATUS_USER,
-//         TOPIC_STATUS_USER + dataProfile.value?.id,
-//         mqttMessageHandler
-//       )
-//     }
-//   } catch (error) {
-//     console.error(error)
-//   }
-// }
-//
-// const mqttMessageHandler = (topic: string, data: any) => {
-//   getDataMqtt()
-//   if (topic === TOPIC_HOME[0] + dataProfile.value?.id) {
-//     const index = listConversations.value.findIndex((item: any) => item.id === data.id)
-//     const hasChatBox = listConversations.value.findIndex((item: any) => item.id === digibotId)
-//     if (index != -1) {
-//       listConversations.value.splice(index, 1)
-//     }
-//     if (hasChatBox > -1) {
-//       listConversations.value.splice(1, 0, data)
-//     } else {
-//       listConversations.value.unshift(data)
-//     }
-//   }
-//
-//   if (topic === TOPIC_HOME[1] + dataProfile.value?.id) {
-//     const index = listConversations.value.findIndex((item: any) => item.id === data.id)
-//     if (index != -1) {
-//       listConversations.value[index].unread_count = 0
-//     }
-//   }
-//
-//   if (topic === TOPIC_HOME[2] + dataProfile.value?.id) {
-//     listConversations.value.unshift(data?.conversations)
-//   }
-//
-//   if (topic === TOPIC_STATUS_USER + dataProfile.value?.id) {
-//     const index = listConversations.value.findIndex(
-//       (e) => e.receiver_id == Number(data?.customer_id)
-//     )
-//     if (index != -1) {
-//       listConversations.value[index].status = data.is_online ? 1 : 0
-//     }
-//   }
-// }
-//
-// const getDataMqtt = useDebounce(() => {
-//   getData(undefined, { hideLoading: true, reset: true })
-// }, 5000)
-//
 const getData = async (data, option) => {
     try {
         if (!option?.hideLoading)
             isLoadingSearch.value = true;
-        // params.value = { ...params.value, ...(data ?? {}) }
-        // const res = await getConversation({ ...params.value, is_unknown: activeTabs.value })
-        // if (option?.reset) {
-        //   listConversations.value = []
-        //   listConversations.value.push(digibotData)
-        //   await nextTick()
-        // }
-        // listConversations.value.push(...(res?.items ?? []))
-        // params.value.page = res?._meta?.currentPage || 1
-        // pageCount = res?._meta?.pageCount || 1
         if (activeTabs.value == TAB_VALUE.ALL) {
             await getDataAll(data, option);
         }
@@ -236,15 +139,7 @@ const handleReadMessage = () => {
     else if (activeTabs.value == TAB_VALUE.UNKNOWN) {
         handleReadMessageUnknown(receiver_id.value);
     }
-    // const index = listConversations.value.findIndex((e) => e.receiver_id == receiver_id.value)
-    // if (index > -1) {
-    //   if (listConversations.value[index].unread_count) {
-    //     readMessages(listConversations.value[index].id)
-    //     listConversations.value[index].unread_count = 0
-    //   }
-    // }
 };
-//
 const getTimeFromNow = (data) => {
     if (data && dayjs(data).isValid()) {
         return dayjs.tz(data, TIME_ZONE_UTC).local().fromNow();
@@ -290,13 +185,13 @@ __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
 // @ts-ignore
 const __VLS_0 = __VLS_asFunctionalComponent(InputSearch, new InputSearch({
     ...{ 'onSearch': {} },
-    ...{ class: "h-[45px] grow" },
+    ...{ class: "h-11 grow" },
     responsive: (__VLS_ctx.responsive),
     modelValue: (__VLS_ctx.keyword),
 }));
 const __VLS_1 = __VLS_0({
     ...{ 'onSearch': {} },
-    ...{ class: "h-[45px] grow" },
+    ...{ class: "h-11 grow" },
     responsive: (__VLS_ctx.responsive),
     modelValue: (__VLS_ctx.keyword),
 }, ...__VLS_functionalComponentArgsRest(__VLS_0));
@@ -308,7 +203,7 @@ const __VLS_5 = ({ search: {} },
 [responsive, keyword, handleSearch,];
 var __VLS_2;
 __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
-    ...{ class: "h-[45px] w-[45px] rounded-full flex-center bg-[#C7DEFF]" },
+    ...{ class: "h-11 w-11 rounded-full flex-center bg-[#C7DEFF]" },
 });
 /** @type {[typeof IconPlus, ]} */ ;
 // @ts-ignore
@@ -413,10 +308,10 @@ for (const [user] of __VLS_getVForSourceType((__VLS_ctx.listConversations))) {
         ...{ class: "truncate" },
     });
     __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-        ...{ class: "flex items-center" },
+        ...{ class: "flex items-center text-left" },
     });
     __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
-        ...{ class: "font-semibold" },
+        ...{ class: "truncate font-semibold" },
     });
     (user.username);
     if (user.id == __VLS_ctx.digibotId) {
@@ -433,7 +328,7 @@ for (const [user] of __VLS_getVForSourceType((__VLS_ctx.listConversations))) {
     }
     if (user.unread_count) {
         __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
-            ...{ class: "ml-2 bg-[#E60000] text-white text-xs font-bold px-2 py-[1px] flex-center rounded-full" },
+            ...{ class: "shrink-0 ml-2 bg-[#E60000] text-white text-xs font-bold px-2 py-[1px] flex-center rounded-full" },
         });
         (user.unread_count);
     }
@@ -446,7 +341,7 @@ for (const [user] of __VLS_getVForSourceType((__VLS_ctx.listConversations))) {
     });
     (user.last_message ?? 'No messages');
     __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
-        ...{ class: "text-sm text-right text-chat-gray-4 w-[130px]" },
+        ...{ class: "shrink-0 text-sm text-right text-chat-gray-4 w-[130px]" },
     });
     (__VLS_ctx.getTimeFromNow(user.last_message_time ?? ''));
     // @ts-ignore
@@ -465,10 +360,10 @@ var __VLS_20;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
 /** @type {__VLS_StyleScopedClasses['gap-2']} */ ;
 /** @type {__VLS_StyleScopedClasses['mb-4']} */ ;
-/** @type {__VLS_StyleScopedClasses['h-[45px]']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-11']} */ ;
 /** @type {__VLS_StyleScopedClasses['grow']} */ ;
-/** @type {__VLS_StyleScopedClasses['h-[45px]']} */ ;
-/** @type {__VLS_StyleScopedClasses['w-[45px]']} */ ;
+/** @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]']} */ ;
@@ -500,8 +395,11 @@ var __VLS_20;
 /** @type {__VLS_StyleScopedClasses['truncate']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
 /** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-left']} */ ;
+/** @type {__VLS_StyleScopedClasses['truncate']} */ ;
 /** @type {__VLS_StyleScopedClasses['font-semibold']} */ ;
 /** @type {__VLS_StyleScopedClasses['ml-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['shrink-0']} */ ;
 /** @type {__VLS_StyleScopedClasses['ml-2']} */ ;
 /** @type {__VLS_StyleScopedClasses['bg-[#E60000]']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-white']} */ ;
@@ -515,6 +413,7 @@ var __VLS_20;
 /** @type {__VLS_StyleScopedClasses['truncate']} */ ;
 /** @type {__VLS_StyleScopedClasses['font-semibold']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-chat-gray-3']} */ ;
+/** @type {__VLS_StyleScopedClasses['shrink-0']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-sm']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-right']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-chat-gray-4']} */ ;

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

@@ -115,7 +115,6 @@ for (const [item, index] of __VLS_getVForSourceType((__VLS_ctx.message))) {
         ...{ '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),
@@ -128,7 +127,6 @@ for (const [item, index] of __VLS_getVForSourceType((__VLS_ctx.message))) {
         ...{ '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),
@@ -143,7 +141,7 @@ for (const [item, index] of __VLS_getVForSourceType((__VLS_ctx.message))) {
         { onCallAgain: (...[$event]) => {
                 __VLS_ctx.emit('callBack');
                 // @ts-ignore
-                [data, message, message, responsive, dataProfile, shouldShowAvatar, isEndMessage, isChatFinished, emit,];
+                [data, message, responsive, dataProfile, shouldShowAvatar, isEndMessage, isChatFinished, emit,];
             } });
     var __VLS_15;
 }

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

@@ -127,7 +127,7 @@ 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: "px-3 py-2 rounded-2xl max-w-xs text-left" },
         ...{ class: ({
                 'rounded-tl-none': !__VLS_ctx.shouldShowAvatar && !__VLS_ctx.isMyMessage,
                 'rounded-bl-none': !__VLS_ctx.isEndMessage && !__VLS_ctx.isMyMessage,
@@ -135,7 +135,7 @@ if (__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending) {
                 '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
+                'bg-[#E4E4E4D4]  text-chat-haze-600  w-max ': !__VLS_ctx.isMyMessage
             }) },
     });
     // @ts-ignore
@@ -277,6 +277,7 @@ if (__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending) {
 /** @type {__VLS_StyleScopedClasses['py-2']} */ ;
 /** @type {__VLS_StyleScopedClasses['rounded-2xl']} */ ;
 /** @type {__VLS_StyleScopedClasses['max-w-xs']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-left']} */ ;
 /** @type {__VLS_StyleScopedClasses['rounded-tl-none']} */ ;
 /** @type {__VLS_StyleScopedClasses['rounded-bl-none']} */ ;
 /** @type {__VLS_StyleScopedClasses['rounded-tr-none']} */ ;
@@ -287,7 +288,6 @@ if (__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending) {
 /** @type {__VLS_StyleScopedClasses['text-[#266699]']} */ ;
 /** @type {__VLS_StyleScopedClasses['bg-[#E4E4E4D4]']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-chat-haze-600']} */ ;
-/** @type {__VLS_StyleScopedClasses['text-left']} */ ;
 /** @type {__VLS_StyleScopedClasses['w-max']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex-col']} */ ;

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

@@ -3,17 +3,19 @@ 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 { getDetailReceiver, getMessage, sendMessage, upLoadImage } from '../../../utils/chat/message';
-import { nextTick, onMounted, onUnmounted, ref, shallowRef } from 'vue';
+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_DETAIL_CHAT } from '../../../constant/mqtt';
+import { TOPIC_DETAIL_CHAT, TOPIC_PLIVO_SMS } from '../../../constant/mqtt';
 import { MessageState } from '../../../constant/message';
 import { publicTopicConversationUpdate } from '../../../utils/chat/conversation';
 const props = withDefaults(defineProps(), {});
 const emit = defineEmits();
+const reversedList = computed(() => listMessage.value.slice().reverse());
 let page = 1;
 let pageCount = 1;
 let topic = '';
+let topic_plivo_chat = '';
 const isLoading = ref(false);
 const infoUser = shallowRef(null);
 const listMessage = ref([]);
@@ -22,12 +24,13 @@ onMounted(() => { });
 onUnmounted(() => {
     handleDisconnectMqtt();
 });
-const showNewCustomer = ref(false);
 const handleConnectMqtt = async () => {
     try {
         await connectMqtt();
         topic = TOPIC_DETAIL_CHAT + infoUser.value?.conversation_id;
+        topic_plivo_chat = TOPIC_PLIVO_SMS + infoUser.value?.conversation_id;
         subscribeToTopic(topic);
+        subscribeToTopic(topic_plivo_chat);
         addHandleMqttMessage('chat-home', topic, mqttMessageHandler);
     }
     catch (error) {
@@ -35,15 +38,17 @@ const handleConnectMqtt = async () => {
     }
 };
 const handleDisconnectMqtt = async () => {
-    const topic = TOPIC_DETAIL_CHAT + infoUser.value?.conversation_id;
     unsubscribeFromTopic(topic);
+    unsubscribeFromTopic(topic_plivo_chat);
     removeHandleMqttMessage('chat-home');
 };
 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) {
-            listMessage.value.push(message);
+            listMessage.value.unshift(message);
+            // listMessage.value.push(message)
         }
         else {
             listMessage.value[index] = message;
@@ -56,7 +61,7 @@ const handleGetMessage = async (option) => {
         const id = props.receiverId;
         const params = { page: option?.resetList ? 1 : page, receiver_id: props.receiverId };
         let res = await getMessage(params);
-        res.items = res.items.reverse();
+        // res.items = res.items.reverse()
         page = res._meta?.currentPage || 1;
         pageCount = res._meta?.pageCount || 1;
         if (id == props.receiverId) {
@@ -65,7 +70,8 @@ const handleGetMessage = async (option) => {
                 chatMessageRef.value?.scrollBottom();
             }
             else {
-                listMessage.value.unshift(...res.items);
+                listMessage.value.push(...res.items);
+                // listMessage.value.unshift(...res.items)
             }
         }
     }
@@ -90,6 +96,7 @@ const handleGetDetailReceiver = async (data) => {
     const res = (await getDetailReceiver(props.receiverId)) ?? null;
     if (id == props.receiverId) {
         infoUser.value = res;
+        handleDisconnectMqtt();
         await handleConnectMqtt();
     }
 };
@@ -119,7 +126,8 @@ const updateMessageItem = (id, data) => {
 };
 const handleSendMessage = async (data) => {
     try {
-        listMessage.value.push({ ...data, state: MessageState.Sending });
+        // listMessage.value.push({ ...data, state: MessageState.Sending })
+        listMessage.value.unshift({ ...data, state: MessageState.Sending });
         publishMessage(topic, {
             ...data,
             state: MessageState.Sending
@@ -134,7 +142,7 @@ const handleSendMessage = async (data) => {
         const formData = new FormData();
         formData.append('message', data.message ?? '');
         formData.append('receiver_id', infoUser.value?.id ?? '');
-        if (file_upload.length) {
+        if (file_upload?.length) {
             formData.append('url', file_upload[0]?.url ?? '');
         }
         await sendMessage(formData);
@@ -151,14 +159,15 @@ const handleSendMessage = async (data) => {
                 : []
         });
         updateMessageItem(data.id, { state: MessageState.Sent });
+        chatMessageRef.value?.scrollBottom();
         publicTopicConversationUpdate({ message: data?.message ?? '', isSendImg: !!file_upload?.length, infoUser: infoUser.value });
     }
     catch (error) {
+        console.log(error);
         updateMessageItem(data.id, {
             state: MessageState.Failed,
             error: typeof error?.message == 'string' ? error.message : ''
         });
-        console.log(error.message);
     }
 };
 const handleUploadImage = async (file) => {
@@ -223,7 +232,7 @@ if (__VLS_ctx.listMessage?.length) {
         ...{ 'onCallBack': {} },
         ref: "chatMessageRef",
         data: (__VLS_ctx.infoUser),
-        message: (__VLS_ctx.listMessage),
+        message: (__VLS_ctx.reversedList),
         ...{ class: "grow" },
         responsive: (__VLS_ctx.responsive),
         showNewCustomer: (__VLS_ctx.page >= __VLS_ctx.pageCount),
@@ -233,7 +242,7 @@ if (__VLS_ctx.listMessage?.length) {
         ...{ 'onCallBack': {} },
         ref: "chatMessageRef",
         data: (__VLS_ctx.infoUser),
-        message: (__VLS_ctx.listMessage),
+        message: (__VLS_ctx.reversedList),
         ...{ class: "grow" },
         responsive: (__VLS_ctx.responsive),
         showNewCustomer: (__VLS_ctx.page >= __VLS_ctx.pageCount),
@@ -247,7 +256,7 @@ if (__VLS_ctx.listMessage?.length) {
     /** @type {typeof __VLS_ctx.chatMessageRef} */ ;
     var __VLS_14 = {};
     // @ts-ignore
-    [infoUser, call, listMessage, responsive, page, pageCount, handleScrollTop, chatMessageRef,];
+    [infoUser, call, reversedList, responsive, page, pageCount, handleScrollTop, chatMessageRef,];
     var __VLS_9;
 }
 else if (!__VLS_ctx.isLoading) {
@@ -275,11 +284,13 @@ else {
 // @ts-ignore
 const __VLS_21 = __VLS_asFunctionalComponent(InputChat, new InputChat({
     ...{ 'onSendMessage': {} },
+    ...{ 'onFocus': {} },
     data: (__VLS_ctx.infoUser),
     ...{ class: "p-6" },
 }));
 const __VLS_22 = __VLS_21({
     ...{ 'onSendMessage': {} },
+    ...{ 'onFocus': {} },
     data: (__VLS_ctx.infoUser),
     ...{ class: "p-6" },
 }, ...__VLS_functionalComponentArgsRest(__VLS_21));
@@ -287,8 +298,12 @@ let __VLS_24;
 let __VLS_25;
 const __VLS_26 = ({ sendMessage: {} },
     { onSendMessage: (__VLS_ctx.handleSendMessage) });
-// @ts-ignore
-[infoUser, handleSendMessage,];
+const __VLS_27 = ({ focus: {} },
+    { onFocus: (...[$event]) => {
+            __VLS_ctx.emit('inputFocus');
+            // @ts-ignore
+            [infoUser, handleSendMessage, emit,];
+        } });
 var __VLS_23;
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;

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

@@ -8,6 +8,8 @@ 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 = [
@@ -19,6 +21,8 @@ const keyword = defineModel();
 let chatId = 1;
 const refInputImage = ref(null);
 const isLoadingImage = ref([]);
+const activePlivoSms = ref(false);
+const loading = ref(false);
 const chatInputRef = ref(null);
 const emojiOpen = ref(false);
 const mode = ref('0');
@@ -70,6 +74,20 @@ 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 handleInput = () => {
+    emit('focus');
+};
 debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
 const __VLS_modelEmit = defineEmits();
 const __VLS_defaults = {};
@@ -91,16 +109,41 @@ if (__VLS_ctx.dataProfile?.user_type == 'tenant') {
     // @ts-ignore
     [dataProfile,];
     __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-        ...{ class: "mb-2" },
+        ...{ 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" },
@@ -114,6 +157,11 @@ __VLS_asFunctionalElement(__VLS_elements.input)({
             // @ts-ignore
             [handleSendMessage,];
         } },
+    ...{ onFocus: (...[$event]) => {
+            __VLS_ctx.handleInput();
+            // @ts-ignore
+            [handleInput,];
+        } },
     ...{ class: "w-full chat-input !rounded-xl h-11 px-4 border border-chat-haze-200" },
     ref: "chatInputRef",
     placeholder: "Send Message",
@@ -127,17 +175,17 @@ __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
 });
 /** @type {[typeof PopoverBase, typeof PopoverBase, ]} */ ;
 // @ts-ignore
-const __VLS_4 = __VLS_asFunctionalComponent(PopoverBase, new PopoverBase({
+const __VLS_11 = __VLS_asFunctionalComponent(PopoverBase, new PopoverBase({
     open: (__VLS_ctx.emojiOpen),
     align: "end",
     side: "top",
 }));
-const __VLS_5 = __VLS_4({
+const __VLS_12 = __VLS_11({
     open: (__VLS_ctx.emojiOpen),
     align: "end",
     side: "top",
-}, ...__VLS_functionalComponentArgsRest(__VLS_4));
-const { default: __VLS_7 } = __VLS_6.slots;
+}, ...__VLS_functionalComponentArgsRest(__VLS_11));
+const { default: __VLS_14 } = __VLS_13.slots;
 // @ts-ignore
 [emojiOpen,];
 __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
@@ -149,61 +197,61 @@ __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
     ...{ class: "h-11 w-10" },
 });
 {
-    const { content: __VLS_8 } = __VLS_6.slots;
-    const __VLS_9 = {}.EmojiPicker;
+    const { content: __VLS_15 } = __VLS_13.slots;
+    const __VLS_16 = {}.EmojiPicker;
     /** @type {[typeof __VLS_components.EmojiPicker, typeof __VLS_components.emojiPicker, ]} */ ;
     // @ts-ignore
     EmojiPicker;
     // @ts-ignore
-    const __VLS_10 = __VLS_asFunctionalComponent(__VLS_9, new __VLS_9({
+    const __VLS_17 = __VLS_asFunctionalComponent(__VLS_16, new __VLS_16({
         ...{ 'onSelect': {} },
         ...{ class: "!w-[300px]" },
         native: (true),
         offset: (2),
         hideSearch: true,
     }));
-    const __VLS_11 = __VLS_10({
+    const __VLS_18 = __VLS_17({
         ...{ 'onSelect': {} },
         ...{ class: "!w-[300px]" },
         native: (true),
         offset: (2),
         hideSearch: true,
-    }, ...__VLS_functionalComponentArgsRest(__VLS_10));
-    let __VLS_13;
-    let __VLS_14;
-    const __VLS_15 = ({ select: {} },
+    }, ...__VLS_functionalComponentArgsRest(__VLS_17));
+    let __VLS_20;
+    let __VLS_21;
+    const __VLS_22 = ({ select: {} },
         { onSelect: (__VLS_ctx.onSelectEmoji) });
     // @ts-ignore
     [onSelectEmoji,];
-    var __VLS_12;
+    var __VLS_19;
 }
-var __VLS_6;
-const __VLS_17 = {}.EmojiPicker;
+var __VLS_13;
+const __VLS_24 = {}.EmojiPicker;
 /** @type {[typeof __VLS_components.EmojiPicker, typeof __VLS_components.emojiPicker, ]} */ ;
 // @ts-ignore
 EmojiPicker;
 // @ts-ignore
-const __VLS_18 = __VLS_asFunctionalComponent(__VLS_17, new __VLS_17({
+const __VLS_25 = __VLS_asFunctionalComponent(__VLS_24, new __VLS_24({
     ...{ 'onSelect': {} },
     ...{ class: "opacity-0 pointer-events-none absolute" },
     native: (true),
     offset: (2),
     hideSearch: true,
 }));
-const __VLS_19 = __VLS_18({
+const __VLS_26 = __VLS_25({
     ...{ 'onSelect': {} },
     ...{ class: "opacity-0 pointer-events-none absolute" },
     native: (true),
     offset: (2),
     hideSearch: true,
-}, ...__VLS_functionalComponentArgsRest(__VLS_18));
-let __VLS_21;
-let __VLS_22;
-const __VLS_23 = ({ select: {} },
+}, ...__VLS_functionalComponentArgsRest(__VLS_25));
+let __VLS_28;
+let __VLS_29;
+const __VLS_30 = ({ select: {} },
     { onSelect: (__VLS_ctx.onSelectEmoji) });
 // @ts-ignore
 [onSelectEmoji,];
-var __VLS_20;
+var __VLS_27;
 __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
     ...{ onClick: (...[$event]) => {
             __VLS_ctx.handleSendMessage('message');
@@ -214,8 +262,8 @@ __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
 });
 /** @type {[typeof IconPlan, ]} */ ;
 // @ts-ignore
-const __VLS_25 = __VLS_asFunctionalComponent(IconPlan, new IconPlan({}));
-const __VLS_26 = __VLS_25({}, ...__VLS_functionalComponentArgsRest(__VLS_25));
+const __VLS_32 = __VLS_asFunctionalComponent(IconPlan, new IconPlan({}));
+const __VLS_33 = __VLS_32({}, ...__VLS_functionalComponentArgsRest(__VLS_32));
 __VLS_asFunctionalElement(__VLS_elements.label, __VLS_elements.label)({
     ...{ class: "shrink-0 cursor-pointer relative" },
 });
@@ -234,13 +282,15 @@ __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
 });
 /** @type {[typeof IconPlus, ]} */ ;
 // @ts-ignore
-const __VLS_29 = __VLS_asFunctionalComponent(IconPlus, new IconPlus({
+const __VLS_36 = __VLS_asFunctionalComponent(IconPlus, new IconPlus({
     ...{ class: "text-white" },
 }));
-const __VLS_30 = __VLS_29({
+const __VLS_37 = __VLS_36({
     ...{ class: "text-white" },
-}, ...__VLS_functionalComponentArgsRest(__VLS_29));
+}, ...__VLS_functionalComponentArgsRest(__VLS_36));
 /** @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']} */ ;