@phonghq/go-chat 1.0.72 → 1.0.74

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

@@ -0,0 +1,654 @@
+import InputSearch from '../../../components/chat/common/input/InputSearch.vue';
+import IconPlus from '../../../assets/icons/global/IconPlus.vue';
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
+import Avatar from '../../../components/chat/customer/Avatar.vue';
+import { getConversationView } from '../../../utils/chat/store/conversation';
+import ScrollEvent from '../../../components/chat/ScrollEvent/ScrollEvent.vue';
+import { useDebounce } from '../../../utils/debounce';
+import { addHandleMqttMessage, connectMqtt, removeHandleMqttMessage, subscribeToTopic, unsubscribeFromTopic } from '../../../plugins/mqtt';
+import { TOPIC_CUSTOMER_RELOAD } from '../../../constant/mqtt';
+import { dataProfile } from '../../../utils/chat/store/auth';
+import { getDetailReceiver } from '../../../utils/chat/store/message';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import updateLocale from 'dayjs/plugin/updateLocale';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import { useDigibot } from '../../../composable/useDigibot';
+import { TIME_ZONE_UTC } from '../../../constant/datetime';
+import IconAiCheck from '../../../assets/icons/global/IconAiCheck.vue';
+import TabBase2 from '../../../components/chat/common/tabs/TabBase.vue';
+import { useListConversations } from '../../../composable/useListConversations';
+import { phoneNumberFormat } from '../../../utils/string-helper';
+import { AsyncQueue } from '../../../utils/chat/queue';
+dayjs.extend(updateLocale);
+dayjs.extend(relativeTime);
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.updateLocale('en', {
+    relativeTime: {
+        future: '%s',
+        past: '%s',
+        s: 'a few seconds',
+        m: 'a minute',
+        mm: '%d minutes',
+        h: 'an hour',
+        hh: '%d hours',
+        d: 'a day',
+        dd: '%d days',
+        M: 'a month',
+        MM: '%d months',
+        y: 'a year',
+        yy: '%d years'
+    }
+});
+const props = withDefaults(defineProps(), {});
+const emit = defineEmits();
+const TAB_VALUE = {
+    ALL: 1,
+    UNKNOWN: 0
+};
+const tabs = computed(() => [
+    {
+        label: 'All',
+        value: TAB_VALUE.ALL,
+        badge: (listConversationsAllUnread.value || '').toString()
+    },
+    {
+        label: 'Message Requests',
+        value: TAB_VALUE.UNKNOWN,
+        badge: (listConversationsUnknownUnread.value || '').toString()
+    }
+]);
+const addQueueCheckConversationHasCustomer = (data) => {
+    return queue.add(() => checkConversationHasCustomer(data));
+};
+const checkConversationHasCustomer = (data) => {
+    return new Promise((resolve) => {
+        const index = listConversationsAll.value.findIndex((item) => item.receiver_id == data.receiver_id);
+        const unknown_index = listConversationsUnknown.value.findIndex((item) => item.receiver_id == data.receiver_id);
+        if (index > -1) {
+            listConversationsAll.value[index].last_message = data.last_message;
+            listConversationsAll.value[index].last_message_time = data.last_message_time;
+            listConversationsAll.value[index].unread_count = data.unread_count;
+            listConversationsAll.value[index].id = data.id;
+            resolve(true);
+        }
+        else if (unknown_index > -1) {
+            listConversationsUnknown.value[index].last_message = data.last_message;
+            listConversationsUnknown.value[index].last_message_time = data.last_message_time;
+            listConversationsUnknown.value[index].unread_count = data.unread_count;
+            listConversationsUnknown.value[index].id = data.id;
+            resolve(true);
+        }
+        resolve(false);
+    });
+};
+let topic_customer_update = '';
+const { digibotData, digibotId } = useDigibot();
+const queue = new AsyncQueue();
+const { listConversations: listConversationsAll, getData: getDataAll, params: paramsAll, pageCount: pageCountAll, handleReadMessage: handleReadMessageAll, getDataCache: getDataCacheAll, insertConversation: insertConversationAll } = useListConversations(TAB_VALUE.ALL, dataProfile.value?.user_type === 'tenant', addQueueCheckConversationHasCustomer);
+const { listConversations: listConversationsUnknown, getData: getDataUnknown, params: paramsUnknown, pageCount: pageCountUnknown, handleReadMessage: handleReadMessageUnknown, getDataCache: getDataCacheUnknown, insertConversation: insertConversationUnknown } = useListConversations(TAB_VALUE.UNKNOWN, dataProfile.value?.user_type === 'tenant', addQueueCheckConversationHasCustomer);
+onMounted(async () => {
+    try {
+        if (dataProfile.value) {
+            await connectMqtt();
+            topic_customer_update = `tenant/${dataProfile.value?.tenant_id}/customer/+/update`;
+            subscribeToTopic(topic_customer_update);
+            addHandleMqttMessage('chat-list', topic_customer_update, handleMqttQueue);
+        }
+    }
+    catch (error) {
+        console.error(error);
+    }
+});
+onUnmounted(() => {
+    unsubscribeFromTopic(topic_customer_update);
+    removeHandleMqttMessage('chat-list');
+});
+const receiver_id = defineModel('receiverId');
+const listConversations = computed(() => {
+    if (activeTabs.value == TAB_VALUE.ALL)
+        return listConversationsAll.value;
+    return listConversationsUnknown.value;
+});
+const listConversationsUnknownUnread = computed(() => {
+    return (listConversationsUnknown.value.reduce((total, cur) => total + (cur?.unread_count ?? 0), 0) ?? 0);
+});
+const listConversationsAllUnread = computed(() => {
+    return listConversationsAll.value.reduce((total, cur) => total + (cur?.unread_count ?? 0), 0) ?? 0;
+});
+const keyword = ref('');
+const activeTabs = ref(TAB_VALUE.ALL);
+const scrollEventRef = ref(null);
+const isLoadingSearch = ref(false);
+const getData = async (data, option) => {
+    try {
+        const tab_value = option?.tab ?? activeTabs.value;
+        if (!option?.hideLoading)
+            isLoadingSearch.value = true;
+        if (option?.reset && !data?.search) {
+            let cache = false;
+            if (tab_value == TAB_VALUE.ALL) {
+                cache = getDataCacheAll();
+            }
+            else if (tab_value == TAB_VALUE.UNKNOWN) {
+                cache = getDataCacheUnknown();
+            }
+            if (cache)
+                isLoadingSearch.value = false;
+        }
+        if (tab_value == TAB_VALUE.ALL) {
+            await getDataAll(data, option);
+        }
+        else if (tab_value == TAB_VALUE.UNKNOWN) {
+            await getDataUnknown(data, option);
+        }
+        if (!option?.hideCheckHasReceiveId) {
+            checkHasReceiveId();
+        }
+        if (option?.reset) {
+            getAllList(tab_value);
+        }
+    }
+    catch (error) {
+        console.error(error);
+    }
+    finally {
+        isLoadingSearch.value = false;
+    }
+};
+const handleMqttQueue = (topic, data) => {
+    queue.add(() => mqttMessageHandler(topic, data));
+};
+const mqttMessageHandler = async (topic, data) => {
+    const subParts = TOPIC_CUSTOMER_RELOAD.split('/');
+    const topicParts = topic.split('/');
+    const idIndex = subParts.findIndex((p) => p === '+');
+    const id = topicParts[idIndex];
+    const customer = await getDetailReceiver(id);
+    emit('reloadReceiver', customer);
+    await nextTick();
+    await sleep(500);
+    const isAllTab = customer.is_known == 1;
+    const correctList = isAllTab ? listConversationsAll.value : listConversationsUnknown.value;
+    const wrongList = isAllTab ? listConversationsUnknown.value : listConversationsAll.value;
+    const updatePayload = {
+        username: customer.username,
+        phone: customer.phone,
+        avatar: customer.avatar,
+        color: customer.color
+    };
+    const correctIndex = correctList.findIndex((conversation) => conversation.receiver_id === customer.id);
+    if (correctIndex > -1) {
+        Object.assign(correctList[correctIndex], updatePayload);
+    }
+    const wrongIndex = wrongList.findIndex((c) => c.receiver_id === customer.id);
+    // const hasChatBox = correctList.findIndex((item: any) => item.id === digibotId)
+    if (wrongIndex > -1) {
+        // if(!isAllTab) {
+        //   wrongList.splice(wrongIndex, 1)
+        // }
+        const conversation = wrongList[wrongIndex];
+        wrongList.splice(wrongIndex, 1);
+        const data_format = {
+            ...conversation,
+            ...updatePayload
+        };
+        if (correctIndex == -1) {
+            if (isAllTab) {
+                correctList.splice(1, 0, data_format);
+            }
+            else {
+                correctList.unshift(data_format);
+            }
+        }
+    }
+    if (wrongIndex == -1 && correctIndex == -1) {
+        const conversation = {
+            id: -99,
+            last_message: '',
+            last_message_time: '',
+            unread_count: 0,
+            created_at: '',
+            updated_at: '',
+            receiver_id: Number(customer?.id) ?? 0,
+            is_known: customer.is_known,
+            status: 1,
+            ...updatePayload
+        };
+        if (isAllTab) {
+            correctList.splice(1, 0, conversation);
+        }
+        else {
+            correctList.unshift(conversation);
+        }
+    }
+};
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+const getAllList = async (tab_value) => {
+    if (tab_value == TAB_VALUE.ALL) {
+        while (paramsAll.value.page < pageCountAll.value && !scrollEventRef.value?.canScroll()) {
+            let page = paramsAll.value.page + 1;
+            await getData({ page }, { tab: tab_value });
+        }
+    }
+    else if (tab_value == TAB_VALUE.UNKNOWN) {
+        while (paramsUnknown.value.page < pageCountUnknown.value &&
+            !scrollEventRef.value?.canScroll()) {
+            let page = paramsUnknown.value.page + 1;
+            await getData({ page }, { tab: tab_value });
+        }
+    }
+};
+const checkHasReceiveId = (need_select) => {
+    const hasReceiveId = listConversations.value?.find((e) => e.receiver_id === receiver_id.value && receiver_id.value);
+    if (props.responsive != 'mobile') {
+        if (!hasReceiveId) {
+            if (listConversations.value?.length) {
+                emit('selectReceiver', listConversations.value[0]);
+            }
+        }
+        else if (need_select) {
+            emit('selectReceiver', null);
+            emit('selectReceiver', hasReceiveId);
+        }
+    }
+};
+const handleSearch = (value) => {
+    // listConversations.value = []
+    getData({ search: value }, { reset: true });
+};
+const handleScroll = useDebounce(async () => {
+    if (activeTabs.value == TAB_VALUE.ALL) {
+        if (paramsAll.value.page >= pageCountAll.value) {
+            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.value) {
+            scrollEventRef.value?.hideLoading();
+            return;
+        }
+        let page = paramsUnknown.value.page + 1;
+        await getData({ page });
+        scrollEventRef.value?.hideLoading();
+    }
+}, 200);
+const selectUser = (user) => {
+    handleReadMessage(user.receiver_id);
+    emit('selectReceiver', user);
+};
+const handleReadMessage = (receiver_id_request) => {
+    const id = receiver_id_request ?? receiver_id.value;
+    if (activeTabs.value == TAB_VALUE.ALL) {
+        handleReadMessageAll(id);
+    }
+    else if (activeTabs.value == TAB_VALUE.UNKNOWN) {
+        handleReadMessageUnknown(id);
+    }
+};
+const getTimeFromNow = (data) => {
+    if (data && dayjs(data).isValid()) {
+        return dayjs.tz(data, TIME_ZONE_UTC).local().fromNow();
+    }
+    return data ?? '';
+};
+const handleTabChange = async (tab, option) => {
+    if (tab == TAB_VALUE.ALL && !listConversationsAll.value?.length) {
+        await getData({}, { reset: true, tab, ...(option ?? {}) });
+    }
+    else if (tab == TAB_VALUE.UNKNOWN && !listConversationsUnknown.value?.length) {
+        await getData({}, { reset: true, tab, ...(option ?? {}) });
+    }
+    if (option?.isResponsiveChange) {
+        checkHasReceiveId(true);
+    }
+};
+const getCurrentConversation = () => {
+    return listConversations.value?.find((user) => user.receiver_id == receiver_id.value);
+};
+const initData = async (option) => {
+    if (option?.is_known || option?.is_known == '0') {
+        activeTabs.value = Number(option?.is_known ?? 1);
+    }
+    let hideCheckHasReceiveId = false;
+    if (option?.conversation_id) {
+        const conversation = await getConversationView(option?.conversation_id);
+        if (conversation.receiver_id) {
+            hideCheckHasReceiveId = true;
+            selectUser(conversation);
+        }
+    }
+    handleTabChange(activeTabs.value, {
+        hideCheckHasReceiveId: hideCheckHasReceiveId,
+        isResponsiveChange: option?.isResponsiveChange
+    });
+    handleTabChange(activeTabs.value == 1 ? 0 : 1, {
+        hideCheckHasReceiveId: hideCheckHasReceiveId,
+        hideLoading: true,
+        isResponsiveChange: option?.isResponsiveChange
+    });
+};
+const goToConversationRequest = async (conversation) => {
+    if (conversation?.is_known || conversation?.is_known == 0) {
+        activeTabs.value = Number(conversation?.is_known ?? 1);
+    }
+    if (activeTabs.value == TAB_VALUE.ALL) {
+        insertConversationAll({ data: conversation, is_full_conversation: true });
+    }
+    else {
+        insertConversationUnknown({ data: conversation, is_full_conversation: true });
+    }
+    selectUser(conversation);
+};
+const __VLS_exposed = {
+    handleReadMessage,
+    listConversationsAll,
+    listConversationsUnknown,
+    getCurrentConversation,
+    initData,
+    handleTabChange,
+    goToConversationRequest
+};
+defineExpose(__VLS_exposed);
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_modelEmit = defineEmits();
+const __VLS_defaults = {};
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_elements;
+let __VLS_components;
+let __VLS_directives;
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "h-full flex flex-col bg-white pt-6" },
+});
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "shrink-0 w-full px-6 flex gap-2 mb-4" },
+});
+/** @type {[typeof InputSearch, ]} */ ;
+// @ts-ignore
+const __VLS_0 = __VLS_asFunctionalComponent(InputSearch, new InputSearch({
+    ...{ 'onSearch': {} },
+    ...{ class: "h-11 grow" },
+    responsive: (__VLS_ctx.responsive),
+    modelValue: (__VLS_ctx.keyword),
+}));
+const __VLS_1 = __VLS_0({
+    ...{ 'onSearch': {} },
+    ...{ class: "h-11 grow" },
+    responsive: (__VLS_ctx.responsive),
+    modelValue: (__VLS_ctx.keyword),
+}, ...__VLS_functionalComponentArgsRest(__VLS_0));
+let __VLS_3;
+let __VLS_4;
+const __VLS_5 = ({ search: {} },
+    { onSearch: (__VLS_ctx.handleSearch) });
+// @ts-ignore
+[responsive, keyword, handleSearch,];
+var __VLS_2;
+if (__VLS_ctx.responsive != 'window') {
+    // @ts-ignore
+    [responsive,];
+    __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
+        ...{ onClick: (...[$event]) => {
+                if (!(__VLS_ctx.responsive != 'window'))
+                    return;
+                __VLS_ctx.emit('openPhoneNumpad');
+                // @ts-ignore
+                [emit,];
+            } },
+        ...{ class: "shrink-0 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 TabBase2, ]} */ ;
+    // @ts-ignore
+    const __VLS_11 = __VLS_asFunctionalComponent(TabBase2, new TabBase2({
+        ...{ 'onChange': {} },
+        ...{ class: "shrink-0 px-6 mb-4" },
+        tabs: (__VLS_ctx.tabs),
+        active: (__VLS_ctx.activeTabs),
+    }));
+    const __VLS_12 = __VLS_11({
+        ...{ 'onChange': {} },
+        ...{ class: "shrink-0 px-6 mb-4" },
+        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" },
+});
+/** @type {[typeof ScrollEvent, typeof ScrollEvent, ]} */ ;
+// @ts-ignore
+const __VLS_18 = __VLS_asFunctionalComponent(ScrollEvent, new ScrollEvent({
+    ...{ 'onGetDataBottom': {} },
+    ref: "scrollEventRef",
+    ...{ class: "h-full overflow-auto" },
+    disabled: (__VLS_ctx.activeTabs == __VLS_ctx.TAB_VALUE.ALL
+        ? __VLS_ctx.paramsAll.page >= __VLS_ctx.pageCountAll
+        : __VLS_ctx.paramsUnknown.page >= __VLS_ctx.pageCountUnknown),
+    bottom: true,
+}));
+const __VLS_19 = __VLS_18({
+    ...{ 'onGetDataBottom': {} },
+    ref: "scrollEventRef",
+    ...{ class: "h-full overflow-auto" },
+    disabled: (__VLS_ctx.activeTabs == __VLS_ctx.TAB_VALUE.ALL
+        ? __VLS_ctx.paramsAll.page >= __VLS_ctx.pageCountAll
+        : __VLS_ctx.paramsUnknown.page >= __VLS_ctx.pageCountUnknown),
+    bottom: true,
+}, ...__VLS_functionalComponentArgsRest(__VLS_18));
+let __VLS_21;
+let __VLS_22;
+const __VLS_23 = ({ getDataBottom: {} },
+    { onGetDataBottom: (__VLS_ctx.handleScroll) });
+/** @type {typeof __VLS_ctx.scrollEventRef} */ ;
+var __VLS_24 = {};
+const { default: __VLS_26 } = __VLS_20.slots;
+// @ts-ignore
+[activeTabs, TAB_VALUE, paramsAll, pageCountAll, paramsUnknown, pageCountUnknown, handleScroll, scrollEventRef,];
+for (const [user] of __VLS_getVForSourceType((__VLS_ctx.listConversations))) {
+    // @ts-ignore
+    [listConversations,];
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ onClick: (...[$event]) => {
+                __VLS_ctx.selectUser(user);
+                // @ts-ignore
+                [selectUser,];
+            } },
+        ...{ class: "" },
+        key: (user.id),
+    });
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ class: "w-full overflow-hidden flex items-center hover:bg-[#EDF5FF] cursor-pointer px-6 py-2" },
+        ...{ class: ({ 'bg-[#EDF5FF]': __VLS_ctx.receiver_id == user.receiver_id && __VLS_ctx.responsive != 'mobile' }) },
+    });
+    // @ts-ignore
+    [responsive, receiver_id,];
+    /** @type {[typeof Avatar, ]} */ ;
+    // @ts-ignore
+    const __VLS_27 = __VLS_asFunctionalComponent(Avatar, new Avatar({
+        id: (user.id),
+        ...{ class: "shrink-0" },
+        ...{ class: ({ 'animal-icon': user?.id === __VLS_ctx.digibotId }) },
+        src: (user.avatar ?? ''),
+        color: (user.color),
+        name: (user.username ?? ''),
+    }));
+    const __VLS_28 = __VLS_27({
+        id: (user.id),
+        ...{ class: "shrink-0" },
+        ...{ class: ({ 'animal-icon': user?.id === __VLS_ctx.digibotId }) },
+        src: (user.avatar ?? ''),
+        color: (user.color),
+        name: (user.username ?? ''),
+    }, ...__VLS_functionalComponentArgsRest(__VLS_27));
+    // @ts-ignore
+    [digibotId,];
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ class: "grow ml-3 overflow-hidden" },
+    });
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ class: "flex justify-between items-center gap-4" },
+    });
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ class: "truncate text-left" },
+    });
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ class: "flex items-center" },
+    });
+    __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
+        ...{ class: "truncate font-semibold" },
+    });
+    (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({
+            ...{ class: "ml-2" },
+        }));
+        const __VLS_32 = __VLS_31({
+            ...{ class: "ml-2" },
+        }, ...__VLS_functionalComponentArgsRest(__VLS_31));
+    }
+    if (user.unread_count) {
+        __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
+            ...{ class: "shrink-0 ml-2 bg-[#E60000] text-white text-xs font-bold px-2 py-[1px] flex-center rounded-full" },
+        });
+        (user.unread_count);
+    }
+    __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
+        ...{ class: "text-sm truncate" },
+        ...{ class: ({
+                'font-semibold': user.unread_count,
+                'text-chat-gray-3': !user.unread_count
+            }) },
+    });
+    (user.last_message ?? 'No messages');
+    if (user.id != __VLS_ctx.digibotId) {
+        // @ts-ignore
+        [digibotId,];
+        __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
+            ...{ 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;
+/** @type {__VLS_StyleScopedClasses['']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-white']} */ ;
+/** @type {__VLS_StyleScopedClasses['pt-6']} */ ;
+/** @type {__VLS_StyleScopedClasses['shrink-0']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['px-6']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['gap-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['mb-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-11']} */ ;
+/** @type {__VLS_StyleScopedClasses['grow']} */ ;
+/** @type {__VLS_StyleScopedClasses['shrink-0']} */ ;
+/** @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['mb-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['grow']} */ ;
+/** @type {__VLS_StyleScopedClasses['relative']} */ ;
+/** @type {__VLS_StyleScopedClasses['overflow-hidden']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['overflow-auto']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['overflow-hidden']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['hover:bg-[#EDF5FF]']} */ ;
+/** @type {__VLS_StyleScopedClasses['cursor-pointer']} */ ;
+/** @type {__VLS_StyleScopedClasses['px-6']} */ ;
+/** @type {__VLS_StyleScopedClasses['py-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-[#EDF5FF]']} */ ;
+/** @type {__VLS_StyleScopedClasses['shrink-0']} */ ;
+/** @type {__VLS_StyleScopedClasses['animal-icon']} */ ;
+/** @type {__VLS_StyleScopedClasses['grow']} */ ;
+/** @type {__VLS_StyleScopedClasses['ml-3']} */ ;
+/** @type {__VLS_StyleScopedClasses['overflow-hidden']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['justify-between']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['gap-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['truncate']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-left']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @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']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-xs']} */ ;
+/** @type {__VLS_StyleScopedClasses['font-bold']} */ ;
+/** @type {__VLS_StyleScopedClasses['px-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['py-[1px]']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-sm']} */ ;
+/** @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']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-[80px]']} */ ;
+/** @type {__VLS_StyleScopedClasses['md:w-[130px]']} */ ;
+// @ts-ignore
+var __VLS_25 = __VLS_24;
+const __VLS_export = (await import('vue')).defineComponent({
+    setup: () => (__VLS_exposed),
+    __typeEmits: {},
+    __typeProps: {},
+    props: {},
+});
+export default {};

package/dist/chat/page/home/ChatMessage.vue.d.ts

@@ -0,0 +1,21 @@
+import type { IResMessage, IResUser } from '../../../types/message';
+import type { PAGE_RESPONSIVE } from '../../../types/chat/global';
+type Props = {
+    data: IResUser | null;
+    message: IResMessage[];
+    responsive: PAGE_RESPONSIVE;
+    showNewCustomer: boolean;
+    isLoading: boolean;
+};
+declare const _default: import("vue").DefineComponent<Props, {
+    scrollBottom: () => void;
+    hideScrollEvent: () => void;
+    fixedScroll: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    scrollTop: () => any;
+    callBack: () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onScrollTop?: (() => any) | undefined;
+    onCallBack?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;