@phonghq/go-chat 1.0.52 → 1.0.54

package/dist/views/home/phone-numpad/PhoneNumpad.vue.js

@@ -1,12 +1,14 @@
 /// <reference types="C:/phonghq/go-chat-v2/node_modules/.vue-global-types/vue_3.5_0.d.ts" />
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import IconBackspace from '../../../assets/icons/global/IconBackspace.vue';
-import IconPhoneBase from '../../../assets/icons/call/IconPhoneBase.vue';
 import { phoneNumberFormat, phoneNumberFormatInput } from '../../../utils/string-helper';
 import { useDebounce } from '../../../utils/debounce';
 import ConversationList from '../../../views/home/phone-numpad/ConvercationList.vue';
 import { dataProfile } from '../../../utils/chat/store/auth';
 import IconArrowLeft from '../../../assets/icons/global/IconArrowLeft.vue';
+import ButtonBase from '@/components/common/button/ButtonBase.vue';
+import IconPhone from '@/assets/icons/customer-detail/IconPhone.vue';
+import IconMessageOutline from '@/assets/icons/global/IconMessageOutline.vue';
 const props = withDefaults(defineProps(), {});
 const emit = defineEmits();
 const phone = defineModel();
@@ -24,9 +26,11 @@ const keys = [
     { label: '0', value: '0' },
     { label: 'X', value: 'Backspace' }
 ];
+const disabled = computed(() => keepOnlyNumber(phone.value ?? '').length < 10 || loading.value);
 const activeKey = ref(null);
 const activeUser = ref(null);
 const conversationListRef = ref();
+const loading = ref(false);
 const handleKey = (key) => {
     if (props.disabled)
         return;
@@ -57,8 +61,29 @@ const handleInput = () => {
 function keepOnlyNumber(value) {
     return value.replace(/\D+/g, '');
 }
-const handleGetListKeyPad = useDebounce(() => conversationListRef.value?.getUserList(keepOnlyNumber(phone.value ?? ''), { reset: true }), 800);
-const handleGetListInput = useDebounce(() => conversationListRef.value?.getUserList(keepOnlyNumber(phone.value ?? ''), { reset: true }), 300);
+const handleGetConversationList = (delay) => {
+    return useDebounce(async () => {
+        try {
+            await conversationListRef.value?.getUserList(keepOnlyNumber(phone.value ?? ''), {
+                reset: true
+            });
+        }
+        catch (e) {
+            console.log(e);
+        }
+        loading.value = false;
+    }, delay);
+};
+const handleGetListKeyPadDebounce = handleGetConversationList(800);
+const handleGetListInputDebounce = handleGetConversationList(800);
+const handleGetListKeyPad = () => {
+    loading.value = true;
+    handleGetListKeyPadDebounce();
+};
+const handleGetListInput = () => {
+    loading.value = true;
+    handleGetListInputDebounce();
+};
 const call = () => {
     if (phone)
         conversationListRef.value?.checkActiveUserList();
@@ -134,52 +159,38 @@ __VLS_asFunctionalElement(__VLS_elements.input)({
 (__VLS_ctx.phone);
 // @ts-ignore
 [handleInput, dataProfile, phone,];
-__VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
-    ...{ onClick: (...[$event]) => {
-            __VLS_ctx.call();
-            // @ts-ignore
-            [call,];
-        } },
-    ...{ class: "shrink-0 h-14 w-14 rounded-full flex-center bg-[#C7DEFF] text-chat-primary" },
-    ...{ class: ({
-            'cursor-not-allowed opacity-[0.3] pointer-events-none': __VLS_ctx.keepOnlyNumber(__VLS_ctx.phone ?? '').length < 10
-        }) },
-});
-// @ts-ignore
-[phone, keepOnlyNumber,];
-/** @type {[typeof IconPhoneBase, ]} */ ;
-// @ts-ignore
-const __VLS_4 = __VLS_asFunctionalComponent(IconPhoneBase, new IconPhoneBase({}));
-const __VLS_5 = __VLS_4({}, ...__VLS_functionalComponentArgsRest(__VLS_4));
 __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
     ...{ class: "grow overflow-hidden relative" },
 });
 /** @type {[typeof ConversationList, ]} */ ;
 // @ts-ignore
-const __VLS_8 = __VLS_asFunctionalComponent(ConversationList, new ConversationList({
+const __VLS_4 = __VLS_asFunctionalComponent(ConversationList, new ConversationList({
     ...{ 'onSelectConversation': {} },
     ref: "conversationListRef",
     active: (__VLS_ctx.activeUser),
 }));
-const __VLS_9 = __VLS_8({
+const __VLS_5 = __VLS_4({
     ...{ 'onSelectConversation': {} },
     ref: "conversationListRef",
     active: (__VLS_ctx.activeUser),
-}, ...__VLS_functionalComponentArgsRest(__VLS_8));
-let __VLS_11;
-let __VLS_12;
-const __VLS_13 = ({ selectConversation: {} },
+}, ...__VLS_functionalComponentArgsRest(__VLS_4));
+let __VLS_7;
+let __VLS_8;
+const __VLS_9 = ({ selectConversation: {} },
     { onSelectConversation: (__VLS_ctx.handleSelectConversation) });
 /** @type {typeof __VLS_ctx.conversationListRef} */ ;
-var __VLS_14 = {};
+var __VLS_10 = {};
 // @ts-ignore
 [activeUser, handleSelectConversation, conversationListRef,];
-var __VLS_10;
+var __VLS_6;
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "shrink-0 w-full px-6 border-chat-gray-5 layout-shadow border-t" },
+});
 if (!__VLS_ctx.hideNumpad) {
     // @ts-ignore
     [hideNumpad,];
     __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-        ...{ class: "shrink-0 grid grid-cols-3 w-full h-[400px] sm:h-[500px] px-6 border-chat-gray-5 layout-shadow border-t" },
+        ...{ class: "w-full h-[400px] sm:h-[500px] grid grid-cols-3" },
     });
     for (const [item] of __VLS_getVForSourceType((__VLS_ctx.keys))) {
         // @ts-ignore
@@ -209,15 +220,86 @@ if (!__VLS_ctx.hideNumpad) {
             __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({});
             /** @type {[typeof IconBackspace, ]} */ ;
             // @ts-ignore
-            const __VLS_17 = __VLS_asFunctionalComponent(IconBackspace, new IconBackspace({
-                ...{ class: "w-14" },
+            const __VLS_13 = __VLS_asFunctionalComponent(IconBackspace, new IconBackspace({
+                ...{ class: "w-12" },
             }));
-            const __VLS_18 = __VLS_17({
-                ...{ class: "w-14" },
-            }, ...__VLS_functionalComponentArgsRest(__VLS_17));
+            const __VLS_14 = __VLS_13({
+                ...{ class: "w-12" },
+            }, ...__VLS_functionalComponentArgsRest(__VLS_13));
         }
     }
 }
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "w-full grid grid-cols-2 gap-4 mb-7" },
+});
+/** @type {[typeof ButtonBase, typeof ButtonBase, ]} */ ;
+// @ts-ignore
+const __VLS_17 = __VLS_asFunctionalComponent(ButtonBase, new ButtonBase({
+    ...{ 'onClick': {} },
+    ...{ class: "rounded-full h-12 shadow-lg" },
+    ...{ class: ({
+            'cursor-not-allowed opacity-[0.3] pointer-events-none': __VLS_ctx.disabled
+        }) },
+    type: "success",
+}));
+const __VLS_18 = __VLS_17({
+    ...{ 'onClick': {} },
+    ...{ class: "rounded-full h-12 shadow-lg" },
+    ...{ class: ({
+            'cursor-not-allowed opacity-[0.3] pointer-events-none': __VLS_ctx.disabled
+        }) },
+    type: "success",
+}, ...__VLS_functionalComponentArgsRest(__VLS_17));
+let __VLS_20;
+let __VLS_21;
+const __VLS_22 = ({ click: {} },
+    { onClick: (...[$event]) => {
+            __VLS_ctx.call();
+            // @ts-ignore
+            [disabled, call,];
+        } });
+const { default: __VLS_23 } = __VLS_19.slots;
+/** @type {[typeof IconPhone, ]} */ ;
+// @ts-ignore
+const __VLS_24 = __VLS_asFunctionalComponent(IconPhone, new IconPhone({
+    weight: (2),
+}));
+const __VLS_25 = __VLS_24({
+    weight: (2),
+}, ...__VLS_functionalComponentArgsRest(__VLS_24));
+var __VLS_19;
+/** @type {[typeof ButtonBase, typeof ButtonBase, ]} */ ;
+// @ts-ignore
+const __VLS_28 = __VLS_asFunctionalComponent(ButtonBase, new ButtonBase({
+    ...{ 'onClick': {} },
+    ...{ class: "rounded-full h-12 shadow-lg" },
+    ...{ class: ({
+            'cursor-not-allowed opacity-[0.3] pointer-events-none': true
+        }) },
+    type: "primary",
+}));
+const __VLS_29 = __VLS_28({
+    ...{ 'onClick': {} },
+    ...{ class: "rounded-full h-12 shadow-lg" },
+    ...{ class: ({
+            'cursor-not-allowed opacity-[0.3] pointer-events-none': true
+        }) },
+    type: "primary",
+}, ...__VLS_functionalComponentArgsRest(__VLS_28));
+let __VLS_31;
+let __VLS_32;
+const __VLS_33 = ({ click: {} },
+    { onClick: (...[$event]) => {
+            __VLS_ctx.call();
+            // @ts-ignore
+            [call,];
+        } });
+const { default: __VLS_34 } = __VLS_30.slots;
+/** @type {[typeof IconMessageOutline, ]} */ ;
+// @ts-ignore
+const __VLS_35 = __VLS_asFunctionalComponent(IconMessageOutline, new IconMessageOutline({}));
+const __VLS_36 = __VLS_35({}, ...__VLS_functionalComponentArgsRest(__VLS_35));
+var __VLS_30;
 /** @type {__VLS_StyleScopedClasses['w-[480px]']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
@@ -242,29 +324,20 @@ if (!__VLS_ctx.hideNumpad) {
 /** @type {__VLS_StyleScopedClasses['w-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-xl']} */ ;
-/** @type {__VLS_StyleScopedClasses['shrink-0']} */ ;
-/** @type {__VLS_StyleScopedClasses['h-14']} */ ;
-/** @type {__VLS_StyleScopedClasses['w-14']} */ ;
-/** @type {__VLS_StyleScopedClasses['rounded-full']} */ ;
-/** @type {__VLS_StyleScopedClasses['flex-center']} */ ;
-/** @type {__VLS_StyleScopedClasses['bg-[#C7DEFF]']} */ ;
-/** @type {__VLS_StyleScopedClasses['text-chat-primary']} */ ;
-/** @type {__VLS_StyleScopedClasses['cursor-not-allowed']} */ ;
-/** @type {__VLS_StyleScopedClasses['opacity-[0.3]']} */ ;
-/** @type {__VLS_StyleScopedClasses['pointer-events-none']} */ ;
 /** @type {__VLS_StyleScopedClasses['grow']} */ ;
 /** @type {__VLS_StyleScopedClasses['overflow-hidden']} */ ;
 /** @type {__VLS_StyleScopedClasses['relative']} */ ;
 /** @type {__VLS_StyleScopedClasses['shrink-0']} */ ;
-/** @type {__VLS_StyleScopedClasses['grid']} */ ;
-/** @type {__VLS_StyleScopedClasses['grid-cols-3']} */ ;
 /** @type {__VLS_StyleScopedClasses['w-full']} */ ;
-/** @type {__VLS_StyleScopedClasses['h-[400px]']} */ ;
-/** @type {__VLS_StyleScopedClasses['sm:h-[500px]']} */ ;
 /** @type {__VLS_StyleScopedClasses['px-6']} */ ;
 /** @type {__VLS_StyleScopedClasses['border-chat-gray-5']} */ ;
 /** @type {__VLS_StyleScopedClasses['layout-shadow']} */ ;
 /** @type {__VLS_StyleScopedClasses['border-t']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-[400px]']} */ ;
+/** @type {__VLS_StyleScopedClasses['sm:h-[500px]']} */ ;
+/** @type {__VLS_StyleScopedClasses['grid']} */ ;
+/** @type {__VLS_StyleScopedClasses['grid-cols-3']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-3xl']} */ ;
 /** @type {__VLS_StyleScopedClasses['sm:text-[40px]']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex-center']} */ ;
@@ -272,9 +345,26 @@ if (!__VLS_ctx.hideNumpad) {
 /** @type {__VLS_StyleScopedClasses['bg-chat-haze-200']} */ ;
 /** @type {__VLS_StyleScopedClasses['opacity-[0.6]']} */ ;
 /** @type {__VLS_StyleScopedClasses['cursor-not-allowed']} */ ;
-/** @type {__VLS_StyleScopedClasses['w-14']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-12']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['grid']} */ ;
+/** @type {__VLS_StyleScopedClasses['grid-cols-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['gap-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['mb-7']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-12']} */ ;
+/** @type {__VLS_StyleScopedClasses['shadow-lg']} */ ;
+/** @type {__VLS_StyleScopedClasses['cursor-not-allowed']} */ ;
+/** @type {__VLS_StyleScopedClasses['opacity-[0.3]']} */ ;
+/** @type {__VLS_StyleScopedClasses['pointer-events-none']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-12']} */ ;
+/** @type {__VLS_StyleScopedClasses['shadow-lg']} */ ;
+/** @type {__VLS_StyleScopedClasses['cursor-not-allowed']} */ ;
+/** @type {__VLS_StyleScopedClasses['opacity-[0.3]']} */ ;
+/** @type {__VLS_StyleScopedClasses['pointer-events-none']} */ ;
 // @ts-ignore
-var __VLS_15 = __VLS_14;
+var __VLS_11 = __VLS_10;
 const __VLS_export = (await import('vue')).defineComponent({
     setup: () => (__VLS_exposed),
     __typeEmits: {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phonghq/go-chat",
-  "version": "1.0.52",
+  "version": "1.0.54",
   "private": false,
   "files": [
     "dist"
@@ -32,7 +32,7 @@
     "loglevel": "^1.8.0",
     "lucide-react": "^0.546.0",
     "lucide-vue-next": "^0.536.0",
-    "mqtt": "^4.3.7",
+    "mqtt": "^5.14.1",
     "pinia": "^2.1.7",
     "plivo-browser-sdk": "^2.2.21",
     "pocketbase": "^0.26.5",