@phonghq/go-chat 1.0.72 → 1.0.74

package/dist/components/ui/tabs/Tabs.vue.js

@@ -0,0 +1,54 @@
+/// <reference types="C:/phonghq/go-chat-v2/node_modules/.vue-global-types/vue_3.5_0.d.ts" />
+import { reactiveOmit } from "@vueuse/core";
+import { TabsRoot, useForwardPropsEmits } from "reka-ui";
+import { cn } from "../../../lib/utils";
+const props = defineProps();
+const emits = defineEmits();
+const delegatedProps = reactiveOmit(props, "class");
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_elements;
+let __VLS_components;
+let __VLS_directives;
+const __VLS_0 = {}.TabsRoot;
+/** @type {[typeof __VLS_components.TabsRoot, typeof __VLS_components.TabsRoot, ]} */ ;
+// @ts-ignore
+TabsRoot;
+// @ts-ignore
+const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({
+    dataSlot: "tabs",
+    ...(__VLS_ctx.forwarded),
+    ...{ class: (__VLS_ctx.cn('flex flex-col gap-2', props.class)) },
+}));
+const __VLS_2 = __VLS_1({
+    dataSlot: "tabs",
+    ...(__VLS_ctx.forwarded),
+    ...{ class: (__VLS_ctx.cn('flex flex-col gap-2', props.class)) },
+}, ...__VLS_functionalComponentArgsRest(__VLS_1));
+var __VLS_4 = {};
+{
+    const { default: __VLS_5 } = __VLS_3.slots;
+    const [slotProps] = __VLS_getSlotParameters(__VLS_5);
+    // @ts-ignore
+    [forwarded, cn,];
+    var __VLS_6 = {
+        ...(slotProps),
+    };
+    __VLS_3.slots['' /* empty slot name completion */];
+}
+var __VLS_3;
+// @ts-ignore
+var __VLS_7 = __VLS_6;
+const __VLS_base = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+});
+const __VLS_export = {};
+export default {};

package/dist/components/ui/tabs/TabsContent.vue.d.ts

@@ -0,0 +1,14 @@
+import type { TabsContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+type __VLS_Props = TabsContentProps & {
+    class?: HTMLAttributes["class"];
+};
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: ((props: {}) => any) | undefined;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ui/tabs/TabsContent.vue.js

@@ -0,0 +1,44 @@
+/// <reference types="C:/phonghq/go-chat-v2/node_modules/.vue-global-types/vue_3.5_0.d.ts" />
+import { reactiveOmit } from "@vueuse/core";
+import { TabsContent } from "reka-ui";
+import { cn } from "../../../lib/utils";
+const props = defineProps();
+const delegatedProps = reactiveOmit(props, "class");
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_elements;
+let __VLS_components;
+let __VLS_directives;
+const __VLS_0 = {}.TabsContent;
+/** @type {[typeof __VLS_components.TabsContent, typeof __VLS_components.TabsContent, ]} */ ;
+// @ts-ignore
+TabsContent;
+// @ts-ignore
+const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({
+    dataSlot: "tabs-content",
+    ...{ class: (__VLS_ctx.cn('flex-1 outline-none', props.class)) },
+    ...(__VLS_ctx.delegatedProps),
+}));
+const __VLS_2 = __VLS_1({
+    dataSlot: "tabs-content",
+    ...{ class: (__VLS_ctx.cn('flex-1 outline-none', props.class)) },
+    ...(__VLS_ctx.delegatedProps),
+}, ...__VLS_functionalComponentArgsRest(__VLS_1));
+var __VLS_4 = {};
+const { default: __VLS_5 } = __VLS_3.slots;
+// @ts-ignore
+[cn, delegatedProps,];
+var __VLS_6 = {};
+var __VLS_3;
+// @ts-ignore
+var __VLS_7 = __VLS_6;
+const __VLS_base = (await import('vue')).defineComponent({
+    __typeProps: {},
+});
+const __VLS_export = {};
+export default {};

package/dist/components/ui/tabs/TabsList.vue.d.ts

@@ -0,0 +1,14 @@
+import type { TabsListProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+type __VLS_Props = TabsListProps & {
+    class?: HTMLAttributes["class"];
+};
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: ((props: {}) => any) | undefined;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ui/tabs/TabsList.vue.js

@@ -0,0 +1,44 @@
+/// <reference types="C:/phonghq/go-chat-v2/node_modules/.vue-global-types/vue_3.5_0.d.ts" />
+import { reactiveOmit } from "@vueuse/core";
+import { TabsList } from "reka-ui";
+import { cn } from "../../../lib/utils";
+const props = defineProps();
+const delegatedProps = reactiveOmit(props, "class");
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_elements;
+let __VLS_components;
+let __VLS_directives;
+const __VLS_0 = {}.TabsList;
+/** @type {[typeof __VLS_components.TabsList, typeof __VLS_components.TabsList, ]} */ ;
+// @ts-ignore
+TabsList;
+// @ts-ignore
+const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({
+    dataSlot: "tabs-list",
+    ...(__VLS_ctx.delegatedProps),
+    ...{ class: (__VLS_ctx.cn('bg-chat-haze-200 inline-flex w-fit items-center justify-center rounded-xl p-[3px]', props.class)) },
+}));
+const __VLS_2 = __VLS_1({
+    dataSlot: "tabs-list",
+    ...(__VLS_ctx.delegatedProps),
+    ...{ class: (__VLS_ctx.cn('bg-chat-haze-200 inline-flex w-fit items-center justify-center rounded-xl p-[3px]', props.class)) },
+}, ...__VLS_functionalComponentArgsRest(__VLS_1));
+var __VLS_4 = {};
+const { default: __VLS_5 } = __VLS_3.slots;
+// @ts-ignore
+[delegatedProps, cn,];
+var __VLS_6 = {};
+var __VLS_3;
+// @ts-ignore
+var __VLS_7 = __VLS_6;
+const __VLS_base = (await import('vue')).defineComponent({
+    __typeProps: {},
+});
+const __VLS_export = {};
+export default {};

package/dist/components/ui/tabs/TabsTrigger.vue.d.ts

@@ -0,0 +1,14 @@
+import type { TabsTriggerProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+type __VLS_Props = TabsTriggerProps & {
+    class?: HTMLAttributes["class"];
+};
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: ((props: {}) => any) | undefined;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ui/tabs/TabsTrigger.vue.js

@@ -0,0 +1,45 @@
+/// <reference types="C:/phonghq/go-chat-v2/node_modules/.vue-global-types/vue_3.5_0.d.ts" />
+import { reactiveOmit } from "@vueuse/core";
+import { TabsTrigger, useForwardProps } from "reka-ui";
+import { cn } from "../../../lib/utils";
+const props = defineProps();
+const delegatedProps = reactiveOmit(props, "class");
+const forwardedProps = useForwardProps(delegatedProps);
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_elements;
+let __VLS_components;
+let __VLS_directives;
+const __VLS_0 = {}.TabsTrigger;
+/** @type {[typeof __VLS_components.TabsTrigger, typeof __VLS_components.TabsTrigger, ]} */ ;
+// @ts-ignore
+TabsTrigger;
+// @ts-ignore
+const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({
+    dataSlot: "tabs-trigger",
+    ...{ class: (__VLS_ctx.cn('data-[state=active]:bg-white focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground inline-flex flex-1 items-center justify-center gap-1.5 rounded-xl px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow,background-color] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4', props.class)) },
+    ...(__VLS_ctx.forwardedProps),
+}));
+const __VLS_2 = __VLS_1({
+    dataSlot: "tabs-trigger",
+    ...{ class: (__VLS_ctx.cn('data-[state=active]:bg-white focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground inline-flex flex-1 items-center justify-center gap-1.5 rounded-xl px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow,background-color] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4', props.class)) },
+    ...(__VLS_ctx.forwardedProps),
+}, ...__VLS_functionalComponentArgsRest(__VLS_1));
+var __VLS_4 = {};
+const { default: __VLS_5 } = __VLS_3.slots;
+// @ts-ignore
+[cn, forwardedProps,];
+var __VLS_6 = {};
+var __VLS_3;
+// @ts-ignore
+var __VLS_7 = __VLS_6;
+const __VLS_base = (await import('vue')).defineComponent({
+    __typeProps: {},
+});
+const __VLS_export = {};
+export default {};

package/dist/components/ui/tabs/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Tabs } from "./Tabs.vue";
+export { default as TabsContent } from "./TabsContent.vue";
+export { default as TabsList } from "./TabsList.vue";
+export { default as TabsTrigger } from "./TabsTrigger.vue";

package/dist/components/ui/tabs/index.js

@@ -0,0 +1,4 @@
+export { default as Tabs } from "./Tabs.vue";
+export { default as TabsContent } from "./TabsContent.vue";
+export { default as TabsList } from "./TabsList.vue";
+export { default as TabsTrigger } from "./TabsTrigger.vue";

package/dist/composable/useDigibot.d.ts

@@ -0,0 +1,7 @@
+import type { IConversation } from '../types/conversation';
+export declare const digibotId = -98;
+export declare const digibotData: IConversation;
+export declare function useDigibot(): {
+    digibotData: IConversation;
+    digibotId: number;
+};

package/dist/composable/useDigibot.js

@@ -0,0 +1,23 @@
+//PINIA
+export const digibotId = -98;
+export const digibotData = {
+    id: digibotId,
+    receiver_id: digibotId,
+    username: 'Gocheckin AI',
+    phone: '',
+    avatar: '',
+    last_message: '',
+    last_message_time: '',
+    created_at: '',
+    updated_at: '',
+    unread_count: 0,
+    status: 1,
+    color: '#4F46E5',
+    is_known: 1
+};
+export function useDigibot() {
+    return {
+        digibotData,
+        digibotId,
+    };
+}

package/dist/composable/useInitData.d.ts

@@ -0,0 +1,12 @@
+import type { PAGE_RESPONSIVE, GoChatProps } from '../types/chat/global';
+export declare const isRouterReady: import("vue").Ref<boolean, boolean>;
+export declare function useInitData(): {
+    NOTIFY_ID_APPOINTMENT_NAME: string;
+    initPage: (data: {
+        props: GoChatProps;
+        responsive: PAGE_RESPONSIVE;
+    }) => Promise<{
+        conversation_id?: string;
+        is_known?: string;
+    }>;
+};

package/dist/composable/useInitData.js

@@ -0,0 +1,101 @@
+import { ref } from 'vue';
+import { sdkInit } from '../plugins/sdk';
+import { dataProfile, getProfile, loginLink } from '../utils/chat/store/auth';
+import { routerPush } from '../utils/chat/chat-router';
+import { PAGE } from '../constant/general';
+import { connectMqtt, subscribeToTopic, unsubscribeFromTopic } from '../plugins/mqtt';
+import { TOPIC_DETAIL_CALL } from '../constant/mqtt';
+import { getPhoneTimeLimit } from '../utils/chat/store/time-limit';
+// import router from '../router'
+//PINIA
+export const isRouterReady = ref(false);
+export function useInitData() {
+    const NOTIFY_ID_APPOINTMENT_NAME = 'notifyIdAppointment';
+    const initPage = async (data) => {
+        try {
+            isRouterReady.value = false;
+            const sdk_res = await sdkInit(data.props);
+            if (sdk_res.tenant_error) {
+                const api_link_res = await loginApiLink();
+                // if (api_link_res.client_error) {
+                //   routerPush(PAGE.TENANT_ERROR)
+                //   return
+                // }
+            }
+            await initData(data.props, data.responsive);
+            await connectMqtt();
+            const res = checkNotificationParams();
+            getPhoneTimeLimit({ phone: dataProfile.value?.phone ?? '', tenant_id: dataProfile.value?.tenant_id ?? '' });
+            isRouterReady.value = true;
+            return res;
+        }
+        catch (error) {
+            isRouterReady.value = true;
+            console.log(error);
+            return {};
+        }
+    };
+    const initData = async (props, responsive) => {
+        await getProfile();
+        if (dataProfile.value?.user_type == 'tenant') {
+            // await checkTenantPhoneOnGapInsight()
+        }
+        unsubscribeFromTopic(TOPIC_DETAIL_CALL + dataProfile.value?.id);
+        subscribeToTopic(TOPIC_DETAIL_CALL + dataProfile.value?.id);
+        if (responsive == 'mobile') {
+            routerPush(PAGE.CHAT_LIST);
+        }
+        else {
+            routerPush(PAGE.HOME);
+        }
+    };
+    const checkNotificationParams = () => {
+        // return {conversation_id: '339', is_known: '1'}
+        const queryString = window.location.search;
+        const urlParams = new URLSearchParams(queryString);
+        const conversation_id = urlParams.get('conversation_id') || '';
+        const is_known = urlParams.get('is_known') || '';
+        if (!conversation_id || !is_known)
+            return {};
+        clearApiParams();
+        return { conversation_id, is_known };
+    };
+    const loginApiLink = async () => {
+        try {
+            const queryString = window.location.search;
+            const urlParams = new URLSearchParams(queryString);
+            const tenant_id = urlParams.get('tenant_id') || '';
+            const phone = urlParams.get('phone') || '';
+            const message = urlParams.get('message') || '';
+            const customer_name = urlParams.get('customer_name') || '';
+            const business_name = urlParams.get('business_name') || '';
+            if (!tenant_id || !phone || !message || !customer_name || !business_name)
+                return { client_error: true };
+            const param = {
+                tenant_id,
+                phone,
+                message,
+                customer_name,
+                business_name
+            };
+            await loginLink(param);
+            clearApiParams();
+            return {};
+        }
+        catch (error) {
+            console.log(error);
+            return { client_error: true };
+        }
+        finally {
+        }
+    };
+    const clearApiParams = () => {
+        const url = new URL(window.location.href);
+        url.search = '';
+        window.history.replaceState({}, document.title, url);
+    };
+    return {
+        NOTIFY_ID_APPOINTMENT_NAME,
+        initPage
+    };
+}

package/dist/composable/useListConversations.d.ts

@@ -0,0 +1,59 @@
+import type { IConversation, IParamGetConversation } from '../types/conversation';
+export declare const useListConversations: (is_known: number, is_tenant: boolean, checkConversationHasCustomer: (data: IConversation) => Promise<boolean>) => {
+    listConversations: import("vue").Ref<{
+        id: number;
+        receiver_id: number;
+        username: string | null;
+        phone: string;
+        avatar: string | null;
+        last_message: string;
+        last_message_time: string;
+        created_at: string;
+        updated_at: string;
+        unread_count: number;
+        status: number;
+        color: string;
+        is_known: number;
+        customer_id?: number | undefined;
+        tenant_id?: number | undefined;
+    }[], IConversation[] | {
+        id: number;
+        receiver_id: number;
+        username: string | null;
+        phone: string;
+        avatar: string | null;
+        last_message: string;
+        last_message_time: string;
+        created_at: string;
+        updated_at: string;
+        unread_count: number;
+        status: number;
+        color: string;
+        is_known: number;
+        customer_id?: number | undefined;
+        tenant_id?: number | undefined;
+    }[]>;
+    params: import("vue").Ref<{
+        page: number;
+        search: string;
+    }, {
+        page: number;
+        search: string;
+    } | {
+        page: number;
+        search: string;
+    }>;
+    pageCount: import("vue").Ref<number, number>;
+    getData: (data?: IParamGetConversation, option?: {
+        reset?: boolean;
+        hideLoading?: boolean;
+        page?: number;
+        is_mqtt?: boolean;
+    }) => Promise<void>;
+    handleReadMessage: (receiver_id: any) => void;
+    getDataCache: () => boolean;
+    insertConversation: (option: {
+        data: any;
+        is_full_conversation?: boolean;
+    }) => Promise<void>;
+};

package/dist/composable/useListConversations.js

@@ -0,0 +1,220 @@
+import { nextTick, onMounted, onUnmounted, ref } from 'vue';
+import { TOPIC_HOME } from '../constant/mqtt';
+import { addHandleMqttMessage, connectMqtt, publishMessage, removeHandleMqttMessage, subscribeToTopic, unsubscribeFromTopic } from '../plugins/mqtt';
+import { dataProfile } from '../utils/chat/store/auth';
+import { useDebounce } from '../utils/debounce';
+import { getConversation, getConversationView } from '../utils/chat/store/conversation';
+import { readMessages } from '../utils/chat/store/message';
+import dayjs from 'dayjs';
+import { useDigibot } from '../composable/useDigibot';
+import { getCache, setCache } from '../utils/chat/cache';
+const { digibotData, digibotId } = useDigibot();
+export const useListConversations = (is_known, is_tenant, checkConversationHasCustomer) => {
+    const STORAGE_KEY = 'chat-conversation-';
+    const pageCount = ref(0);
+    const listConversations = ref([]);
+    const params = ref({
+        page: 1,
+        search: ''
+    });
+    const isLoadingSearch = ref(false);
+    onMounted(() => {
+        handleConnectMqtt();
+        document.addEventListener('visibilitychange', handleVisibilitychange);
+    });
+    onUnmounted(() => {
+        document.removeEventListener('visibilitychange', handleVisibilitychange);
+        handleDisconnectMqtt;
+    });
+    const handleVisibilitychange = () => {
+        if (document.visibilityState === 'visible') {
+            getDataMqtt();
+        }
+    };
+    const handleDisconnectMqtt = () => {
+        TOPIC_HOME.forEach((item) => {
+            unsubscribeFromTopic(item + dataProfile.value?.id);
+            removeHandleMqttMessage('chat-list-' + item + '-' + is_known);
+        });
+        if (dataProfile.value?.user_type == 'tenant') {
+            // unsubscribeFromTopic(TOPIC_STATUS_USER + dataProfile.value?.id)
+            // removeHandleMqttMessage('chat-list-' + TOPIC_STATUS_USER + '-' + is_known)
+        }
+    };
+    const handleConnectMqtt = async () => {
+        try {
+            if (dataProfile.value) {
+                await connectMqtt();
+                TOPIC_HOME.forEach((item) => {
+                    if (is_known == 0) {
+                        subscribeToTopic(item + dataProfile.value?.id);
+                    }
+                    addHandleMqttMessage('chat-list-' + item + '-' + is_known, item + dataProfile.value?.id, mqttMessageHandler);
+                });
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+    };
+    const mqttMessageHandler = async (topic, data) => {
+        // if(topic == TOPIC_HOME[3] + dataProfile.value?.id ) {
+        //   getData({}, {reset: true})
+        //   return
+        // }
+        if ((data.is_known ?? 1) == is_known || (!is_tenant && is_known == 1)) {
+            getDataMqttDebounce();
+            if (topic ===
+                TOPIC_HOME[0] + dataProfile.value?.id
+                || topic === TOPIC_HOME[1] + dataProfile.value?.id) {
+                insertConversation({ data: data });
+            }
+            if (topic === TOPIC_HOME[2] + dataProfile.value?.id) {
+                if (data.is_known == is_known) {
+                    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 getDataMqttDebounce = useDebounce(() => {
+        getDataMqtt();
+    }, 5000);
+    const getData = async (data, option) => {
+        try {
+            if (!is_tenant && is_known == 1)
+                return;
+            params.value = { ...params.value, ...(data ?? {}) };
+            if (option?.reset) {
+                params.value.page = 1;
+            }
+            const is_known_value = is_tenant ? is_known : undefined;
+            const page_request = option?.page ?? params.value.page;
+            const res = await getConversation({
+                ...params.value,
+                is_known: is_known_value,
+                page: page_request
+            });
+            if (page_request <= 1 && !params.value?.search) {
+                setCache(STORAGE_KEY + is_known, res.items);
+            }
+            if (option?.is_mqtt) {
+                mergeChats(res?.items);
+                return;
+            }
+            if (option?.reset) {
+                listConversations.value = [];
+                if (is_known == 1 && dataProfile.value?.user_type == 'tenant')
+                    listConversations.value.push(digibotData);
+                await nextTick();
+            }
+            listConversations.value.push(...(res?.items ?? []));
+            params.value.page = res?._meta?.currentPage || 1;
+            pageCount.value = res?._meta?.pageCount || 1;
+        }
+        catch (error) {
+            console.error(error);
+        }
+        finally {
+        }
+    };
+    const mergeChats = (newChats) => {
+        const map = new Map();
+        listConversations.value.forEach((c) => {
+            map.set(c.id, c);
+        });
+        newChats.forEach((c) => {
+            map.set(c.id, {
+                ...(map.get(c.id) ?? {}),
+                ...c
+            });
+        });
+        listConversations.value = Array.from(map.values()).sort((a, b) => dayjs(b.updated_at).valueOf() - dayjs(a.updated_at).valueOf());
+    };
+    const getDataMqtt = async () => {
+        let page = params.value.page;
+        for (let i = 1; i <= page; i++) {
+            await getData(undefined, { page: i, is_mqtt: true });
+        }
+    };
+    const getDataCache = () => {
+        const cache_data = getCache(STORAGE_KEY + is_known);
+        if (cache_data.data) {
+            listConversations.value = [];
+            listConversations.value.push(...(cache_data.data ?? []));
+            return true;
+        }
+        return false;
+    };
+    const handleReadMessage = (receiver_id) => {
+        const index = listConversations.value.findIndex((e) => e.receiver_id == receiver_id);
+        if (index > -1) {
+            if (listConversations.value[index].unread_count) {
+                readMessages(listConversations.value[index].id);
+                listConversations.value[index].unread_count = 0;
+                publishMessage(TOPIC_HOME[1] + dataProfile.value?.id, listConversations.value[index]);
+            }
+        }
+    };
+    const insertConversation = async (option) => {
+        let data = option.data;
+        const index = listConversations.value.findIndex(item => item.id === data.id);
+        const hasChatBox = listConversations.value.findIndex(item => item.id === digibotId);
+        if (index != -1) {
+            let conversation = listConversations.value[index];
+            data.username = conversation.username;
+            data.color = conversation.color;
+            data.receiver_id = conversation.receiver_id;
+            data.phone = conversation.phone;
+            listConversations.value.splice(index, 1);
+        }
+        else {
+            if (is_known == 0) {
+                const isHasCustomer = await checkConversationHasCustomer(data);
+                await nextTick();
+                if (isHasCustomer)
+                    return;
+            }
+            let conversation = null;
+            if (option.is_full_conversation) {
+                conversation = data;
+            }
+            else {
+                conversation = await getConversationView(data.id);
+            }
+            data.username = conversation?.username ?? '';
+            data.color = conversation?.color ?? '';
+            data.receiver_id = conversation?.receiver_id ?? '';
+            data.phone = conversation?.phone ?? '';
+        }
+        // data.receiver_id = data.receiver_id != dataProfile.value?.id ? data.receiver_id : data.sender_id
+        if (is_known == 1) {
+            listConversations.value.splice(1, 0, data);
+        }
+        else {
+            listConversations.value.unshift(data);
+        }
+    };
+    return {
+        listConversations,
+        params,
+        pageCount,
+        getData,
+        handleReadMessage,
+        getDataCache,
+        insertConversation
+    };
+};