@phonghq/go-chat 1.0.22 → 1.0.24

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

@@ -1,15 +1,11 @@
 import InputSearch from '../../../components/chat/common/input/InputSearch.vue';
 import IconPlus from '../../../assets/icons/IconPlus.vue';
-import { nextTick, onMounted, onUnmounted, ref } from 'vue';
+import { computed, ref } from 'vue';
 import Avatar from '../../../components/chat/customer/Avatar.vue';
-import { getConversation } from '../../../utils/chat/conversation';
 import BaseSpin from '../../../components/chat/common/spin/BaseSpin.vue';
 import ScrollEvent from '../../../components/chat/ScrollEvent/ScrollEvent.vue';
 import { useDebounce } from '../../../utils/debounce';
-import { addHandleMqttMessage, connectMqtt, removeHandleMqttMessage, subscribeToTopic, unsubscribeFromTopic } from '../../../plugins/mqtt';
-import { TOPIC_HOME, TOPIC_STATUS_USER } from '../../../constant/mqtt';
 import { dataProfile } from '../../../utils/chat/auth';
-import { readMessages } from '../../../utils/chat/message';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import updateLocale from 'dayjs/plugin/updateLocale';
@@ -18,6 +14,8 @@ import timezone from 'dayjs/plugin/timezone';
 import { useDigibot } from '../../../composable/useDigibot';
 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';
 dayjs.extend(updateLocale);
 dayjs.extend(relativeTime);
 dayjs.extend(utc);
@@ -41,99 +39,135 @@ dayjs.updateLocale('en', {
 });
 const props = withDefaults(defineProps(), {});
 const emit = defineEmits();
+const TAB_VALUE = {
+    ALL: 0,
+    UNKNOWN: 1
+};
+const tabs = computed(() => [
+    { label: 'All', value: TAB_VALUE.ALL },
+    { label: 'Message Requests', value: TAB_VALUE.UNKNOWN, badge: (listConversationsUnknown.value?.length || '').toString() }
+]);
 const { digibotData, digibotId } = useDigibot();
+const { listConversations: listConversationsAll, getData: getDataAll, params: paramsAll, pageCount: pageCountAll, handleReadMessage: handleReadMessageAll } = useListConversations(TAB_VALUE.ALL);
+const { listConversations: listConversationsUnknown, getData: getDataUnknown, params: paramsUnknown, pageCount: pageCountUnknown, handleReadMessage: handleReadMessageUnknown } = useListConversations(TAB_VALUE.UNKNOWN);
 const receiver_id = defineModel('receiverId');
+const listConversations = computed(() => {
+    if (activeTabs.value == TAB_VALUE.ALL)
+        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([]);
-const params = ref({
-    page: 1,
-    search: ''
-});
-let pageCount = 0;
+// 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) => {
-        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) => {
-                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, data) => {
-    getDataMqtt();
-    if (topic === TOPIC_HOME[0] + dataProfile.value?.id) {
-        const index = listConversations.value.findIndex((item) => item.id === data.id);
-        const hasChatBox = listConversations.value.findIndex((item) => 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) => 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);
+//
+// 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);
-        if (option?.reset) {
-            listConversations.value = [];
-            listConversations.value.push(digibotData);
-            await nextTick();
+        // 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);
+        }
+        else if (activeTabs.value == TAB_VALUE.UNKNOWN) {
+            await getDataUnknown(data, option);
         }
-        listConversations.value.push(...(res?.items ?? []));
         checkHasReceiveId();
-        params.value.page = res?._meta?.currentPage || 1;
-        pageCount = res?._meta?.pageCount || 1;
         if (option?.reset) {
             getAllList();
         }
@@ -146,16 +180,29 @@ const getData = async (data, option) => {
     }
 };
 const getAllList = async () => {
-    while (params.value.page < pageCount && !scrollEventRef.value?.canScroll()) {
-        let page = params.value.page + 1;
-        await getData({ page });
+    if (activeTabs.value == TAB_VALUE.ALL) {
+        while (paramsAll.value.page < pageCountAll && !scrollEventRef.value?.canScroll()) {
+            let page = paramsAll.value.page + 1;
+            await getData({ page });
+        }
+    }
+    else if (activeTabs.value == TAB_VALUE.UNKNOWN) {
+        while (paramsUnknown.value.page < pageCountUnknown && !scrollEventRef.value?.canScroll()) {
+            let page = paramsUnknown.value.page + 1;
+            await getData({ page });
+        }
     }
 };
 const checkHasReceiveId = () => {
     const hasReceiveId = listConversations.value?.some((e) => e.receiver_id === receiver_id.value && receiver_id.value);
+    console.log(listConversations.value);
+    console.log(hasReceiveId);
     if (props.responsive == 'tablet') {
-        if (!hasReceiveId && listConversations.value?.length)
-            emit('selectReceiver', listConversations.value[0]);
+        if (!hasReceiveId) {
+            if (listConversations.value?.length) {
+                emit('selectReceiver', listConversations.value[0]);
+            }
+        }
     }
 };
 const handleSearch = (value) => {
@@ -163,34 +210,62 @@ const handleSearch = (value) => {
     getData({ search: value }, { reset: true });
 };
 const handleScroll = useDebounce(async () => {
-    if (params.value.page >= pageCount) {
+    if (activeTabs.value == TAB_VALUE.ALL) {
+        if (paramsAll.value.page >= pageCountAll) {
+            scrollEventRef.value?.hideLoading();
+            return;
+        }
+        let page = paramsAll.value.page + 1;
+        await getData({ page });
+        scrollEventRef.value?.hideLoading();
+    }
+    else if (activeTabs.value == TAB_VALUE.UNKNOWN) {
+        if (paramsUnknown.value.page >= pageCountUnknown) {
+            scrollEventRef.value?.hideLoading();
+            return;
+        }
+        let page = paramsUnknown.value.page + 1;
+        await getData({ page });
         scrollEventRef.value?.hideLoading();
-        return;
     }
-    let page = params.value.page + 1;
-    await getData({ page });
-    scrollEventRef.value?.hideLoading();
 }, 200);
 const selectUser = (user) => {
     emit('selectReceiver', user);
 };
 const handleReadMessage = () => {
-    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;
-        }
+    if (activeTabs.value == TAB_VALUE.ALL) {
+        handleReadMessageAll(receiver_id.value);
+    }
+    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();
     }
     return data ?? '';
 };
-getData({}, { reset: true });
-const __VLS_exposed = { handleReadMessage, listConversations };
+const handleTabChange = async (tab) => {
+    if (tab == TAB_VALUE.ALL && !listConversationsAll.value?.length) {
+        await getData({}, { reset: true });
+    }
+    else if (tab == TAB_VALUE.UNKNOWN && !listConversationsUnknown.value?.length) {
+        await getData({}, { reset: true });
+    }
+    checkHasReceiveId();
+};
+// getData({}, { reset: true })
+handleTabChange(TAB_VALUE.ALL);
+const __VLS_exposed = { handleReadMessage, listConversationsAll };
 defineExpose(__VLS_exposed);
 debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
 const __VLS_modelEmit = defineEmits();
@@ -209,7 +284,7 @@ __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
     ...{ class: "h-full flex flex-col chat-box-white pt-6" },
 });
 __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-    ...{ class: "shrink-0 w-full px-6 flex gap-2 mb-6" },
+    ...{ class: "shrink-0 w-full px-6 flex gap-2 mb-4" },
 });
 /** @type {[typeof InputSearch, ]} */ ;
 // @ts-ignore
@@ -243,6 +318,31 @@ const __VLS_7 = __VLS_asFunctionalComponent(IconPlus, new IconPlus({
 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({
+        ...{ 'onChange': {} },
+        ...{ class: "shrink-0 px-6" },
+        tabs: (__VLS_ctx.tabs),
+        active: (__VLS_ctx.activeTabs),
+    }));
+    const __VLS_12 = __VLS_11({
+        ...{ '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: {} },
+        { onChange: (__VLS_ctx.handleTabChange) });
+    // @ts-ignore
+    [tabs, activeTabs, handleTabChange,];
+    var __VLS_13;
+}
 __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
     ...{ class: "grow relative overflow-hidden" },
 });
@@ -254,29 +354,29 @@ __VLS_asFunctionalDirective(__VLS_directives.vShow)(null, { ...__VLS_directiveBi
 [isLoadingSearch,];
 /** @type {[typeof BaseSpin, ]} */ ;
 // @ts-ignore
-const __VLS_11 = __VLS_asFunctionalComponent(BaseSpin, new BaseSpin({}));
-const __VLS_12 = __VLS_11({}, ...__VLS_functionalComponentArgsRest(__VLS_11));
+const __VLS_18 = __VLS_asFunctionalComponent(BaseSpin, new BaseSpin({}));
+const __VLS_19 = __VLS_18({}, ...__VLS_functionalComponentArgsRest(__VLS_18));
 /** @type {[typeof ScrollEvent, typeof ScrollEvent, ]} */ ;
 // @ts-ignore
-const __VLS_15 = __VLS_asFunctionalComponent(ScrollEvent, new ScrollEvent({
+const __VLS_22 = __VLS_asFunctionalComponent(ScrollEvent, new ScrollEvent({
     ...{ 'onGetDataBottom': {} },
     ref: "scrollEventRef",
     ...{ class: "h-full overflow-auto" },
     bottom: true,
 }));
-const __VLS_16 = __VLS_15({
+const __VLS_23 = __VLS_22({
     ...{ 'onGetDataBottom': {} },
     ref: "scrollEventRef",
     ...{ class: "h-full overflow-auto" },
     bottom: true,
-}, ...__VLS_functionalComponentArgsRest(__VLS_15));
-let __VLS_18;
-let __VLS_19;
-const __VLS_20 = ({ getDataBottom: {} },
+}, ...__VLS_functionalComponentArgsRest(__VLS_22));
+let __VLS_25;
+let __VLS_26;
+const __VLS_27 = ({ getDataBottom: {} },
     { onGetDataBottom: (__VLS_ctx.handleScroll) });
 /** @type {typeof __VLS_ctx.scrollEventRef} */ ;
-var __VLS_21 = {};
-const { default: __VLS_23 } = __VLS_17.slots;
+var __VLS_28 = {};
+const { default: __VLS_30 } = __VLS_24.slots;
 // @ts-ignore
 [handleScroll, scrollEventRef,];
 for (const [user] of __VLS_getVForSourceType((__VLS_ctx.listConversations))) {
@@ -299,20 +399,20 @@ for (const [user] of __VLS_getVForSourceType((__VLS_ctx.listConversations))) {
     [responsive, receiver_id,];
     /** @type {[typeof Avatar, ]} */ ;
     // @ts-ignore
-    const __VLS_24 = __VLS_asFunctionalComponent(Avatar, new Avatar({
+    const __VLS_31 = __VLS_asFunctionalComponent(Avatar, new Avatar({
         id: (user.id),
         ...{ class: "shrink-0" },
         src: (user.avatar ?? ''),
         color: (user.color),
         name: (user.username ?? ''),
     }));
-    const __VLS_25 = __VLS_24({
+    const __VLS_32 = __VLS_31({
         id: (user.id),
         ...{ class: "shrink-0" },
         src: (user.avatar ?? ''),
         color: (user.color),
         name: (user.username ?? ''),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_24));
+    }, ...__VLS_functionalComponentArgsRest(__VLS_31));
     __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
         ...{ class: "grow ml-3 overflow-hidden" },
     });
@@ -334,12 +434,12 @@ for (const [user] of __VLS_getVForSourceType((__VLS_ctx.listConversations))) {
         [digibotId,];
         /** @type {[typeof IconAiCheck, ]} */ ;
         // @ts-ignore
-        const __VLS_28 = __VLS_asFunctionalComponent(IconAiCheck, new IconAiCheck({
+        const __VLS_35 = __VLS_asFunctionalComponent(IconAiCheck, new IconAiCheck({
             ...{ class: "ml-2" },
         }));
-        const __VLS_29 = __VLS_28({
+        const __VLS_36 = __VLS_35({
             ...{ class: "ml-2" },
-        }, ...__VLS_functionalComponentArgsRest(__VLS_28));
+        }, ...__VLS_functionalComponentArgsRest(__VLS_35));
     }
     if (user.unread_count) {
         __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
@@ -362,7 +462,7 @@ for (const [user] of __VLS_getVForSourceType((__VLS_ctx.listConversations))) {
     // @ts-ignore
     [getTimeFromNow,];
 }
-var __VLS_17;
+var __VLS_24;
 /** @type {__VLS_StyleScopedClasses['']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
@@ -374,7 +474,7 @@ var __VLS_17;
 /** @type {__VLS_StyleScopedClasses['px-6']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
 /** @type {__VLS_StyleScopedClasses['gap-2']} */ ;
-/** @type {__VLS_StyleScopedClasses['mb-6']} */ ;
+/** @type {__VLS_StyleScopedClasses['mb-4']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-[45px]']} */ ;
 /** @type {__VLS_StyleScopedClasses['grow']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-[45px]']} */ ;
@@ -383,6 +483,8 @@ var __VLS_17;
 /** @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']} */ ;
 /** @type {__VLS_StyleScopedClasses['relative']} */ ;
 /** @type {__VLS_StyleScopedClasses['overflow-hidden']} */ ;
@@ -432,7 +534,7 @@ var __VLS_17;
 /** @type {__VLS_StyleScopedClasses['text-chat-gray-4']} */ ;
 /** @type {__VLS_StyleScopedClasses['w-[130px]']} */ ;
 // @ts-ignore
-var __VLS_22 = __VLS_21;
+var __VLS_29 = __VLS_28;
 const __VLS_export = (await import('vue')).defineComponent({
     setup: () => (__VLS_exposed),
     __typeEmits: {},