@phonghq/go-chat 1.0.4 → 1.0.6

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

@@ -0,0 +1,295 @@
+/// <reference types="C:/phonghq/go-chat/node_modules/.vue-global-types/vue_3.5_0.d.ts" />
+import Avatar from '../../../components/chat/customer/Avatar.vue';
+import { dataProfile } from '../../../utils/chat/auth';
+import { nextTick, ref } from 'vue';
+import ScrollEvent from '../../../components/chat/ScrollEvent/ScrollEvent.vue';
+import { MessageState } from '../../../constant/message';
+import NewCustomer from '../../../chat/page/home/NewCustomer.vue';
+const props = withDefaults(defineProps(), {});
+const emit = defineEmits();
+const scrollEventRef = ref(null);
+const scrollBottom = () => {
+    nextTick(() => {
+        const eleIdContentChat = document.getElementById('content-chat');
+        if (eleIdContentChat) {
+            eleIdContentChat.scrollTop = eleIdContentChat.scrollHeight;
+        }
+    });
+};
+const shouldShowAvatar = (index) => {
+    if (index === 0)
+        return true;
+    return props.message[index - 1].sender_id !== props.message[index].sender_id;
+};
+const isEndMessage = (index) => {
+    if (props.message?.length == index + 1)
+        return true;
+    return props.message[index + 1].sender_id !== props.message[index].sender_id;
+};
+const handleScrollTop = () => {
+    emit('scrollTop');
+};
+const hideScrollEvent = () => {
+    scrollEventRef.value?.hideLoading();
+    scrollEventRef.value?.fixedScroll();
+};
+const getMessageStateText = (item) => {
+    const state = item.state;
+    switch (state) {
+        case MessageState.Sending:
+            return 'Sending...';
+        case MessageState.Uploading:
+            return 'Uploading...';
+        case MessageState.Sent:
+            return '';
+        case MessageState.Read:
+            return 'Seen';
+        case MessageState.Failed:
+            return item.error || 'Message failed';
+        default:
+            return '';
+    }
+};
+const __VLS_exposed = { scrollBottom, hideScrollEvent };
+defineExpose(__VLS_exposed);
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_defaults = {};
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_elements;
+let __VLS_components;
+let __VLS_directives;
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "relative overflow-hidden" },
+});
+/** @type {[typeof ScrollEvent, typeof ScrollEvent, ]} */ ;
+// @ts-ignore
+const __VLS_0 = __VLS_asFunctionalComponent(ScrollEvent, new ScrollEvent({
+    ...{ 'onGetDataTop': {} },
+    ...{ class: "bg-white h-full flex flex-col overflow-auto" },
+    id: "content-chat",
+    top: true,
+    ref: "scrollEventRef",
+}));
+const __VLS_1 = __VLS_0({
+    ...{ 'onGetDataTop': {} },
+    ...{ class: "bg-white h-full flex flex-col overflow-auto" },
+    id: "content-chat",
+    top: true,
+    ref: "scrollEventRef",
+}, ...__VLS_functionalComponentArgsRest(__VLS_0));
+let __VLS_3;
+let __VLS_4;
+const __VLS_5 = ({ getDataTop: {} },
+    { onGetDataTop: (__VLS_ctx.handleScrollTop) });
+/** @type {typeof __VLS_ctx.scrollEventRef} */ ;
+var __VLS_6 = {};
+const { default: __VLS_8 } = __VLS_2.slots;
+// @ts-ignore
+[handleScrollTop, scrollEventRef,];
+if (__VLS_ctx.showNewCustomer) {
+    // @ts-ignore
+    [showNewCustomer,];
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ class: "shrink-0 h-[500px]" },
+    });
+    /** @type {[typeof NewCustomer, ]} */ ;
+    // @ts-ignore
+    const __VLS_9 = __VLS_asFunctionalComponent(NewCustomer, new NewCustomer({
+        ...{ class: "h-full" },
+        data: (__VLS_ctx.data),
+    }));
+    const __VLS_10 = __VLS_9({
+        ...{ class: "h-full" },
+        data: (__VLS_ctx.data),
+    }, ...__VLS_functionalComponentArgsRest(__VLS_9));
+    // @ts-ignore
+    [data,];
+}
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "chat-padding-page" },
+});
+for (const [item, index] of __VLS_getVForSourceType((__VLS_ctx.message))) {
+    (item.id);
+    // @ts-ignore
+    [message,];
+    if (item.sender_id !== __VLS_ctx.dataProfile?.id) {
+        // @ts-ignore
+        [dataProfile,];
+        __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+            ...{ class: "flex items-end gap-2 mt-2" },
+            ...{ class: ({ 'mt-4': __VLS_ctx.shouldShowAvatar(index) }) },
+        });
+        // @ts-ignore
+        [shouldShowAvatar,];
+        if (item.state != __VLS_ctx.MessageState.Sending) {
+            // @ts-ignore
+            [MessageState,];
+            if (__VLS_ctx.shouldShowAvatar(index)) {
+                // @ts-ignore
+                [shouldShowAvatar,];
+                /** @type {[typeof Avatar, ]} */ ;
+                // @ts-ignore
+                const __VLS_13 = __VLS_asFunctionalComponent(Avatar, new Avatar({
+                    src: (__VLS_ctx.data?.avatar ?? ''),
+                    color: (__VLS_ctx.data?.color),
+                    name: (__VLS_ctx.data?.username),
+                    size: (__VLS_ctx.response == 'mobile' ? 'sm' : 'md'),
+                    ...{ class: (__VLS_ctx.response == 'mobile' ? 'translate-y-[-2px]' : '') },
+                }));
+                const __VLS_14 = __VLS_13({
+                    src: (__VLS_ctx.data?.avatar ?? ''),
+                    color: (__VLS_ctx.data?.color),
+                    name: (__VLS_ctx.data?.username),
+                    size: (__VLS_ctx.response == 'mobile' ? 'sm' : 'md'),
+                    ...{ class: (__VLS_ctx.response == 'mobile' ? 'translate-y-[-2px]' : '') },
+                }, ...__VLS_functionalComponentArgsRest(__VLS_13));
+                // @ts-ignore
+                [data, data, data, response, response,];
+            }
+            else {
+                __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+                    ...{ class: (__VLS_ctx.response == 'mobile' ? 'w-8' : 'w-12') },
+                });
+                // @ts-ignore
+                [response,];
+            }
+            __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+                ...{ class: "bg-[#E4E4E4D4] text-chat-haze-600 px-3 py-2 rounded-2xl max-w-xs" },
+                ...{ class: ({
+                        'rounded-tl-none': !__VLS_ctx.shouldShowAvatar(index),
+                        'rounded-bl-none': !__VLS_ctx.isEndMessage(index)
+                    }) },
+            });
+            // @ts-ignore
+            [shouldShowAvatar, isEndMessage,];
+            if (item.message) {
+                __VLS_asFunctionalElement(__VLS_elements.div)({
+                    ...{ style: ({ wordBreak: 'break-word' }) },
+                });
+                __VLS_asFunctionalDirective(__VLS_directives.vHtml)(null, { ...__VLS_directiveBindingRestFields, value: (item.message) }, null, null);
+            }
+            else if (item.attachments.length) {
+                __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({});
+                __VLS_asFunctionalElement(__VLS_elements.img)({
+                    ...{ onLoad: (() => {
+                            if (index == __VLS_ctx.message.length - 1) {
+                                __VLS_ctx.scrollBottom();
+                            }
+                        }) },
+                    src: (item.attachments[0]?.file_path),
+                    alt: "avatar",
+                });
+                // @ts-ignore
+                [message, scrollBottom,];
+            }
+        }
+    }
+    else {
+        __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+            ...{ class: "flex flex-col items-end mt-2" },
+            ...{ class: ({ 'mt-4': __VLS_ctx.shouldShowAvatar(index) }) },
+        });
+        // @ts-ignore
+        [shouldShowAvatar,];
+        __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+            ...{ class: "bg-[#D0DFEC] text-[#266699] px-3 py-2 rounded-2xl max-w-xs" },
+            ...{ class: ({
+                    'rounded-tr-none': !__VLS_ctx.shouldShowAvatar(index),
+                    'rounded-br-none': !__VLS_ctx.isEndMessage(index)
+                }) },
+        });
+        // @ts-ignore
+        [shouldShowAvatar, isEndMessage,];
+        if (item.message) {
+            __VLS_asFunctionalElement(__VLS_elements.div)({
+                ...{ style: ({ wordBreak: 'break-word' }) },
+            });
+            __VLS_asFunctionalDirective(__VLS_directives.vHtml)(null, { ...__VLS_directiveBindingRestFields, value: (item.message) }, null, null);
+        }
+        else if (item?.attachments?.length) {
+            __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({});
+            __VLS_asFunctionalElement(__VLS_elements.img)({
+                ...{ onLoad: (() => {
+                        if (index == __VLS_ctx.message.length - 1) {
+                            __VLS_ctx.scrollBottom();
+                        }
+                    }) },
+                src: (item.attachments[0]?.file_path),
+                alt: "avatar",
+            });
+            // @ts-ignore
+            [message, scrollBottom,];
+        }
+        if ((index == __VLS_ctx.message.length - 1 && __VLS_ctx.getMessageStateText(item)) ||
+            item.state == __VLS_ctx.MessageState.Failed) {
+            // @ts-ignore
+            [message, MessageState, getMessageStateText,];
+            __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
+                ...{ class: "text-chat-haze-200 text-xs mt-1" },
+                ...{ class: ({ 'text-danger': item.state == __VLS_ctx.MessageState.Failed }) },
+            });
+            // @ts-ignore
+            [MessageState,];
+            (__VLS_ctx.getMessageStateText(item));
+            // @ts-ignore
+            [getMessageStateText,];
+        }
+    }
+}
+var __VLS_2;
+/** @type {__VLS_StyleScopedClasses['relative']} */ ;
+/** @type {__VLS_StyleScopedClasses['overflow-hidden']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-white']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
+/** @type {__VLS_StyleScopedClasses['overflow-auto']} */ ;
+/** @type {__VLS_StyleScopedClasses['shrink-0']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-[500px]']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['chat-padding-page']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-end']} */ ;
+/** @type {__VLS_StyleScopedClasses['gap-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['mt-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['mt-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-[#E4E4E4D4]']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-chat-haze-600']} */ ;
+/** @type {__VLS_StyleScopedClasses['px-3']} */ ;
+/** @type {__VLS_StyleScopedClasses['py-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-2xl']} */ ;
+/** @type {__VLS_StyleScopedClasses['max-w-xs']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-tl-none']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-bl-none']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-end']} */ ;
+/** @type {__VLS_StyleScopedClasses['mt-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['mt-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-[#D0DFEC]']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-[#266699]']} */ ;
+/** @type {__VLS_StyleScopedClasses['px-3']} */ ;
+/** @type {__VLS_StyleScopedClasses['py-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-2xl']} */ ;
+/** @type {__VLS_StyleScopedClasses['max-w-xs']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-tr-none']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-br-none']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-chat-haze-200']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-xs']} */ ;
+/** @type {__VLS_StyleScopedClasses['mt-1']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-danger']} */ ;
+// @ts-ignore
+var __VLS_7 = __VLS_6;
+const __VLS_export = (await import('vue')).defineComponent({
+    setup: () => (__VLS_exposed),
+    __typeEmits: {},
+    __typeProps: {},
+    props: {},
+});
+export default {};

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

@@ -0,0 +1,332 @@
+/// <reference types="C:/phonghq/go-chat/node_modules/.vue-global-types/vue_3.5_0.d.ts" />
+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 { getCountUnread, getDetailReceiver, getMessage, sendMessage, upLoadImage } from '../../../utils/chat/message';
+import { 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, TOPIC_HOME } from '../../../constant/mqtt';
+import { dataProfile } from '../../../utils/chat/auth';
+import dayjs from 'dayjs';
+import { DATE_FORMATS } from '../../../constant/datetime';
+import { MessageState } from '../../../constant/message';
+const props = withDefaults(defineProps(), {});
+const emit = defineEmits();
+let page = 1;
+let pageCount = 1;
+let topic = '';
+const isLoading = ref(false);
+const infoUser = shallowRef(null);
+const listMessage = ref([]);
+const chatMessageRef = ref(null);
+onMounted(() => {
+});
+onUnmounted(() => {
+    handleDisconnectMqtt();
+});
+const showNewCustomer = ref(false);
+const handleConnectMqtt = async () => {
+    try {
+        await connectMqtt();
+        topic = TOPIC_DETAIL_CHAT + infoUser.value?.conversation_id;
+        subscribeToTopic(topic);
+        addHandleMqttMessage('chat-home', topic, mqttMessageHandler);
+    }
+    catch (error) {
+        console.error(error);
+    }
+};
+const handleDisconnectMqtt = async () => {
+    const topic = TOPIC_DETAIL_CHAT + infoUser.value?.conversation_id;
+    unsubscribeFromTopic(topic);
+    removeHandleMqttMessage('chat-home');
+};
+const mqttMessageHandler = (topic, message) => {
+    if (infoUser.value?.id && message?.sender_id?.toString() == infoUser.value?.id?.toString() || true) {
+        const index = listMessage.value.findIndex((item) => item.id === message?.id);
+        if (index < 0) {
+            listMessage.value.push(message);
+        }
+        else {
+            listMessage.value[index] = message;
+        }
+        chatMessageRef.value?.scrollBottom();
+    }
+};
+const handleGetMessage = async () => {
+    try {
+        const id = props.receiverId;
+        const params = { page: page, receiver_id: props.receiverId };
+        let res = await getMessage(params);
+        res.items = res.items.reverse();
+        page = res._meta?.currentPage || 1;
+        pageCount = res._meta?.pageCount || 1;
+        if (id == props.receiverId)
+            listMessage.value.unshift(...res.items);
+    }
+    catch (error) {
+        console.error(error);
+    }
+};
+const handleScrollTop = async () => {
+    if (page >= pageCount) {
+        chatMessageRef.value?.hideScrollEvent();
+        return;
+    }
+    page = page + 1;
+    await handleGetMessage();
+    chatMessageRef.value?.hideScrollEvent();
+};
+const handleGetDetailReceiver = async (data) => {
+    const id = props.receiverId;
+    if (data)
+        infoUser.value = data;
+    const res = (await getDetailReceiver(props.receiverId)) ?? null;
+    if (id == props.receiverId) {
+        infoUser.value = res;
+        await handleConnectMqtt();
+    }
+};
+const getData = async (data) => {
+    try {
+        isLoading.value = true;
+        listMessage.value = [];
+        await Promise.allSettled([handleGetMessage(), handleGetDetailReceiver(data)]);
+        // readMessages(infoUser.value?.conversation_id)
+        await nextTick();
+        chatMessageRef.value?.scrollBottom();
+    }
+    catch (error) {
+        console.error(error);
+    }
+    finally {
+        isLoading.value = false;
+    }
+};
+const updateMessageItem = (id, data) => {
+    const index = listMessage.value.findIndex((e) => e.id == id);
+    if (index > -1) {
+        const item = listMessage.value[index];
+        listMessage.value[index] = { ...item, ...data };
+        console.log({ ...item, ...data });
+    }
+};
+const handleSendMessage = async (data) => {
+    try {
+        listMessage.value.push({ ...data, state: MessageState.Sending });
+        publishMessage(topic, {
+            ...data,
+            state: MessageState.Sending
+        });
+        let file_upload = [];
+        if (data?.attachments?.length) {
+            updateMessageItem(data.id, { state: MessageState.Uploading });
+            file_upload = await handleUploadImage(data?.attachments[0].file_local);
+        }
+        updateMessageItem(data.id, { state: MessageState.Sending });
+        chatMessageRef.value?.scrollBottom();
+        const formData = new FormData();
+        formData.append('message', data.message ?? '');
+        formData.append('receiver_id', infoUser.value?.id ?? '');
+        if (file_upload.length) {
+            formData.append('url', file_upload[0]?.url ?? '');
+        }
+        await sendMessage(formData);
+        publishMessage(topic, {
+            ...data,
+            state: MessageState.Sent,
+            attachments: file_upload
+                ? [
+                    {
+                        file_name: data.attachments[0]?.file_name ?? '',
+                        file_path: file_upload[0]?.url ?? ''
+                    }
+                ]
+                : []
+        });
+        updateMessageItem(data.id, { state: MessageState.Sent });
+        publicTopicConversationUpdate(false, data?.message ?? '');
+    }
+    catch (error) {
+        updateMessageItem(data.id, {
+            state: MessageState.Failed,
+            error: typeof error?.message == 'string' ? error.message : ''
+        });
+        console.log(error.message);
+    }
+};
+const handleUploadImage = async (file) => {
+    if (file == null || file == undefined)
+        return [];
+    if (file.size > 1 * 1024 * 1024) {
+        throw new Error('File size exceeds limit');
+    }
+    const formData = new FormData();
+    formData.append('file', file);
+    const res = await upLoadImage(formData);
+    return res;
+};
+const publicTopicConversationUpdate = async (isSendImg, message) => {
+    const res = await getCountUnread({
+        conversation_id: infoUser.value?.conversation_id ?? 0,
+        receiver_id: Number(infoUser.value?.id)
+    });
+    const current = dayjs().format(DATE_FORMATS['DATE_FORMAT_FULL']);
+    const dataMessageForReceiver = {
+        id: infoUser.value?.conversation_id ?? 0,
+        receiver_id: Number(dataProfile.value?.id ?? 0),
+        username: dataProfile.value?.username ?? '',
+        customer_phone: dataProfile.value?.phone ?? '',
+        avatar: dataProfile.value?.avatar ?? '',
+        last_message: isSendImg ? `${infoUser.value?.username} sent images` : message,
+        last_message_time: current,
+        created_at: current,
+        updated_at: current,
+        unread_count: (res?.unread_count ?? 0) + 1,
+        status: 1,
+        color: dataProfile.value?.color ?? ''
+    };
+    publishMessage(`${TOPIC_HOME[0] + Number(infoUser.value?.id)}`, JSON.stringify(dataMessageForReceiver));
+    const dataMessageMyself = {
+        id: infoUser.value?.conversation_id ?? 0,
+        receiver_id: Number(dataProfile.value?.id ?? 0),
+        username: infoUser.value?.username ?? '',
+        customer_phone: infoUser.value?.phone ?? '',
+        avatar: infoUser.value?.avatar ?? '',
+        last_message: isSendImg ? `${infoUser.value?.username} sent images` : message,
+        last_message_time: current,
+        created_at: current,
+        updated_at: current,
+        unread_count: 0,
+        status: 1,
+        color: infoUser.value?.color
+    };
+    publishMessage(`${TOPIC_HOME[0] + Number(dataProfile.value?.id)}`, JSON.stringify(dataMessageMyself));
+};
+const call = () => {
+    if (infoUser.value) {
+        emit('call', infoUser.value);
+    }
+};
+const __VLS_exposed = { getData };
+defineExpose(__VLS_exposed);
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+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 overflow-hidden" },
+});
+/** @type {[typeof HomeHeader, ]} */ ;
+// @ts-ignore
+const __VLS_0 = __VLS_asFunctionalComponent(HomeHeader, new HomeHeader({
+    ...{ 'onCall': {} },
+    ...{ class: "shrink-0" },
+    data: (__VLS_ctx.infoUser),
+}));
+const __VLS_1 = __VLS_0({
+    ...{ 'onCall': {} },
+    ...{ class: "shrink-0" },
+    data: (__VLS_ctx.infoUser),
+}, ...__VLS_functionalComponentArgsRest(__VLS_0));
+let __VLS_3;
+let __VLS_4;
+const __VLS_5 = ({ call: {} },
+    { onCall: (__VLS_ctx.call) });
+// @ts-ignore
+[infoUser, call,];
+var __VLS_2;
+if (__VLS_ctx.listMessage?.length) {
+    // @ts-ignore
+    [listMessage,];
+    /** @type {[typeof ChatMessage, ]} */ ;
+    // @ts-ignore
+    const __VLS_7 = __VLS_asFunctionalComponent(ChatMessage, new ChatMessage({
+        ...{ 'onScrollTop': {} },
+        ref: "chatMessageRef",
+        data: (__VLS_ctx.infoUser),
+        message: (__VLS_ctx.listMessage),
+        ...{ class: "grow" },
+        response: (__VLS_ctx.response),
+        showNewCustomer: (__VLS_ctx.page >= __VLS_ctx.pageCount),
+    }));
+    const __VLS_8 = __VLS_7({
+        ...{ 'onScrollTop': {} },
+        ref: "chatMessageRef",
+        data: (__VLS_ctx.infoUser),
+        message: (__VLS_ctx.listMessage),
+        ...{ class: "grow" },
+        response: (__VLS_ctx.response),
+        showNewCustomer: (__VLS_ctx.page >= __VLS_ctx.pageCount),
+    }, ...__VLS_functionalComponentArgsRest(__VLS_7));
+    let __VLS_10;
+    let __VLS_11;
+    const __VLS_12 = ({ scrollTop: {} },
+        { onScrollTop: (__VLS_ctx.handleScrollTop) });
+    /** @type {typeof __VLS_ctx.chatMessageRef} */ ;
+    var __VLS_13 = {};
+    // @ts-ignore
+    [infoUser, listMessage, response, page, pageCount, handleScrollTop, chatMessageRef,];
+    var __VLS_9;
+}
+else if (!__VLS_ctx.isLoading) {
+    // @ts-ignore
+    [isLoading,];
+    /** @type {[typeof NewCustomer, ]} */ ;
+    // @ts-ignore
+    const __VLS_16 = __VLS_asFunctionalComponent(NewCustomer, new NewCustomer({
+        data: (__VLS_ctx.infoUser),
+        ...{ class: "grow" },
+    }));
+    const __VLS_17 = __VLS_16({
+        data: (__VLS_ctx.infoUser),
+        ...{ class: "grow" },
+    }, ...__VLS_functionalComponentArgsRest(__VLS_16));
+    // @ts-ignore
+    [infoUser,];
+}
+/** @type {[typeof InputChat, ]} */ ;
+// @ts-ignore
+const __VLS_20 = __VLS_asFunctionalComponent(InputChat, new InputChat({
+    ...{ 'onSendMessage': {} },
+    data: (__VLS_ctx.infoUser),
+    ...{ class: "p-6" },
+}));
+const __VLS_21 = __VLS_20({
+    ...{ 'onSendMessage': {} },
+    data: (__VLS_ctx.infoUser),
+    ...{ class: "p-6" },
+}, ...__VLS_functionalComponentArgsRest(__VLS_20));
+let __VLS_23;
+let __VLS_24;
+const __VLS_25 = ({ sendMessage: {} },
+    { onSendMessage: (__VLS_ctx.handleSendMessage) });
+// @ts-ignore
+[infoUser, handleSendMessage,];
+var __VLS_22;
+/** @type {__VLS_StyleScopedClasses['h-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
+/** @type {__VLS_StyleScopedClasses['overflow-hidden']} */ ;
+/** @type {__VLS_StyleScopedClasses['shrink-0']} */ ;
+/** @type {__VLS_StyleScopedClasses['grow']} */ ;
+/** @type {__VLS_StyleScopedClasses['grow']} */ ;
+/** @type {__VLS_StyleScopedClasses['p-6']} */ ;
+// @ts-ignore
+var __VLS_14 = __VLS_13;
+const __VLS_export = (await import('vue')).defineComponent({
+    setup: () => (__VLS_exposed),
+    __typeEmits: {},
+    __typeProps: {},
+    props: {},
+});
+export default {};