@phonghq/go-chat 1.0.71 → 1.0.73

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

@@ -20,6 +20,7 @@ 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);
@@ -59,36 +60,42 @@ const tabs = computed(() => [
         badge: (listConversationsUnknownUnread.value || '').toString()
     }
 ]);
+const addQueueCheckConversationHasCustomer = (data) => {
+    return queue.add(() => checkConversationHasCustomer(data));
+};
 const checkConversationHasCustomer = (data) => {
-    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;
-        return 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;
-        return true;
-    }
-    return false;
+    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 { listConversations: listConversationsAll, getData: getDataAll, params: paramsAll, pageCount: pageCountAll, handleReadMessage: handleReadMessageAll, getDataCache: getDataCacheAll } = useListConversations(TAB_VALUE.ALL, dataProfile.value?.user_type === 'tenant', checkConversationHasCustomer);
-const { listConversations: listConversationsUnknown, getData: getDataUnknown, params: paramsUnknown, pageCount: pageCountUnknown, handleReadMessage: handleReadMessageUnknown, getDataCache: getDataCacheUnknown } = useListConversations(TAB_VALUE.UNKNOWN, dataProfile.value?.user_type === 'tenant', checkConversationHasCustomer);
+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, mqttMessageHandler);
+            addHandleMqttMessage('chat-list', topic_customer_update, handleMqttQueue);
         }
     }
     catch (error) {
@@ -151,13 +158,16 @@ const getData = async (data, option) => {
         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);
-    // console.log(customer,'aaaaaaaaaaa')
+    emit('reloadReceiver', customer);
     await nextTick();
     await sleep(500);
     const isAllTab = customer.is_known == 1;
@@ -167,7 +177,7 @@ const mqttMessageHandler = async (topic, data) => {
         username: customer.username,
         phone: customer.phone,
         avatar: customer.avatar,
-        color: customer.color,
+        color: customer.color
     };
     const correctIndex = correctList.findIndex((conversation) => conversation.receiver_id === customer.id);
     if (correctIndex > -1) {
@@ -215,7 +225,7 @@ const mqttMessageHandler = async (topic, data) => {
         }
     }
 };
-const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+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()) {
@@ -231,14 +241,18 @@ const getAllList = async (tab_value) => {
         }
     }
 };
-const checkHasReceiveId = () => {
-    const hasReceiveId = listConversations.value?.some((e) => e.receiver_id === receiver_id.value && receiver_id.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) => {
@@ -291,14 +305,16 @@ const handleTabChange = async (tab, option) => {
     else if (tab == TAB_VALUE.UNKNOWN && !listConversationsUnknown.value?.length) {
         await getData({}, { reset: true, tab, ...(option ?? {}) });
     }
-    // checkHasReceiveId()
+    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 == TAB_VALUE.ALL.toString()) {
-        activeTabs.value = Number(option?.is_known);
+    if (option?.is_known || option?.is_known == '0') {
+        activeTabs.value = Number(option?.is_known ?? 1);
     }
     let hideCheckHasReceiveId = false;
     if (option?.conversation_id) {
@@ -308,19 +324,36 @@ const initData = async (option) => {
             selectUser(conversation);
         }
     }
-    handleTabChange(activeTabs.value, { hideCheckHasReceiveId: hideCheckHasReceiveId });
+    handleTabChange(activeTabs.value, {
+        hideCheckHasReceiveId: hideCheckHasReceiveId,
+        isResponsiveChange: option?.isResponsiveChange
+    });
     handleTabChange(activeTabs.value == 1 ? 0 : 1, {
-        hideCheckHasReceiveId: true,
-        hideLoading: true
+        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
+    handleTabChange,
+    goToConversationRequest
 };
 defineExpose(__VLS_exposed);
 debugger; /* PartiallyEnd: #3632/scriptSetup.vue */

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

@@ -5,6 +5,7 @@ import ScrollEvent from '../../../components/chat/ScrollEvent/ScrollEvent.vue';
 import NewCustomer from '../../../chat/page/home/NewCustomer.vue';
 import ChatMessageItem from '../../../chat/page/home/ChatMessageItem.vue';
 import dayjs from 'dayjs';
+import { TIME_ZONE_UTC } from '../../../constant/datetime';
 const props = withDefaults(defineProps(), {});
 const emit = defineEmits();
 const scrollEventRef = ref(null);
@@ -40,6 +41,13 @@ const isChatStart = (index) => {
     const time2 = dayjs(props.message[index].created_at);
     return time2.diff(time1, 'minute') > 10;
 };
+const isStartNewDate = (index) => {
+    if (index == 0)
+        return true;
+    const time1 = dayjs.tz(props.message[index - 1].created_at, TIME_ZONE_UTC).local();
+    const time2 = dayjs.tz(props.message[index].created_at, TIME_ZONE_UTC).local();
+    return time2.diff(time1, 'day') > 0;
+};
 const handleScrollTop = () => {
     emit('scrollTop');
 };
@@ -150,6 +158,7 @@ for (const [item, index] of __VLS_getVForSourceType((__VLS_ctx.message))) {
         isEndMessage: (__VLS_ctx.isEndMessage(index)),
         isChatFinished: (__VLS_ctx.isChatFinished(index)),
         isChatStart: (__VLS_ctx.isChatStart(index)),
+        isStartNewDate: (__VLS_ctx.isStartNewDate(index)),
     }));
     const __VLS_19 = __VLS_18({
         ...{ 'onCallAgain': {} },
@@ -163,6 +172,7 @@ for (const [item, index] of __VLS_getVForSourceType((__VLS_ctx.message))) {
         isEndMessage: (__VLS_ctx.isEndMessage(index)),
         isChatFinished: (__VLS_ctx.isChatFinished(index)),
         isChatStart: (__VLS_ctx.isChatStart(index)),
+        isStartNewDate: (__VLS_ctx.isStartNewDate(index)),
     }, ...__VLS_functionalComponentArgsRest(__VLS_18));
     let __VLS_21;
     let __VLS_22;
@@ -170,7 +180,7 @@ for (const [item, index] of __VLS_getVForSourceType((__VLS_ctx.message))) {
         { onCallAgain: (...[$event]) => {
                 __VLS_ctx.emit('callBack');
                 // @ts-ignore
-                [data, message, responsive, dataProfile, shouldShowAvatar, isEndMessage, isChatFinished, isChatStart, emit,];
+                [data, message, responsive, dataProfile, shouldShowAvatar, isEndMessage, isChatFinished, isChatStart, isStartNewDate, emit,];
             } });
     var __VLS_20;
 }

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

@@ -9,6 +9,7 @@ type Props = {
     shouldShowAvatar: boolean;
     isChatFinished: boolean;
     isChatStart: boolean;
+    isStartNewDate: boolean;
     data: IResUser | null;
 };
 declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {

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

@@ -9,6 +9,7 @@ import dayjs from 'dayjs';
 import { DATE_FORMATS, TIME_ZONE_UTC } from '../../../constant/datetime';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
+// import IconMenuDot from '@/assets/icons/chat/IconMenuDot.vue'
 dayjs.extend(utc);
 dayjs.extend(timezone);
 const props = withDefaults(defineProps(), {});
@@ -77,6 +78,11 @@ const getFinishTime = (time) => {
         return '';
     return dayjs.tz(time, TIME_ZONE_UTC).local().format(DATE_FORMATS.TIME_12_FORMAT);
 };
+const getStartDate = (time) => {
+    if (!dayjs(time).isValid())
+        return '';
+    return dayjs.tz(time, TIME_ZONE_UTC).local().format('MMM D, YYYY');
+};
 debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
 const __VLS_defaults = {};
 const __VLS_ctx = {
@@ -89,6 +95,22 @@ const __VLS_ctx = {
 let __VLS_elements;
 let __VLS_components;
 let __VLS_directives;
+if (__VLS_ctx.isStartNewDate) {
+    // @ts-ignore
+    [isStartNewDate,];
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ class: "relative flex-center text-chat-haze-200" },
+    });
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ class: "absolute translate-x-1/2 bottom-1/2 right-1/2 w-3/4 h-[1px] bg-chat-haze-200" },
+    });
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ class: "bg-white text-sm px-4 py-2 z-[1]" },
+    });
+    (__VLS_ctx.getStartDate(__VLS_ctx.message?.created_at));
+    // @ts-ignore
+    [getStartDate, message,];
+}
 __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
     ...{ class: "flex items-end mt-1 relative" },
     ...{ class: ({
@@ -101,7 +123,7 @@ __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
 [shouldShowAvatar, isMyMessage, isMyMessage,];
 if (__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending || __VLS_ctx.isMyMessage) {
     // @ts-ignore
-    [isMyMessage, message, MessageState,];
+    [message, isMyMessage, MessageState,];
     if (!__VLS_ctx.isMyMessage) {
         // @ts-ignore
         [isMyMessage,];
@@ -123,7 +145,7 @@ if (__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending || __VLS_ctx.isMyM
                 name: (__VLS_ctx.data?.username),
                 size: (__VLS_ctx.responsive == 'mobile' ? 'sm' : 'md'),
                 ...{ class: ({
-                        'translate-y-[-2px]': __VLS_ctx.responsive == 'mobile',
+                        'translate-y-[-2px]': __VLS_ctx.responsive == 'mobile'
                     }) },
             }));
             const __VLS_1 = __VLS_0({
@@ -133,7 +155,7 @@ if (__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending || __VLS_ctx.isMyM
                 name: (__VLS_ctx.data?.username),
                 size: (__VLS_ctx.responsive == 'mobile' ? 'sm' : 'md'),
                 ...{ class: ({
-                        'translate-y-[-2px]': __VLS_ctx.responsive == 'mobile',
+                        'translate-y-[-2px]': __VLS_ctx.responsive == 'mobile'
                     }) },
             }, ...__VLS_functionalComponentArgsRest(__VLS_0));
             // @ts-ignore
@@ -150,7 +172,7 @@ if (__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending || __VLS_ctx.isMyM
     }
     __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({});
     __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-        ...{ class: "px-3 py-2 rounded-2xl text-left w-max" },
+        ...{ class: "px-3 py-2 rounded-2xl text-left w-max relative group" },
         ...{ class: ({
                 'rounded-tl-[6px]': !__VLS_ctx.isChatStart && !__VLS_ctx.isMyMessage,
                 'rounded-bl-[6px]': !__VLS_ctx.isChatFinished && !__VLS_ctx.isMyMessage,
@@ -166,7 +188,7 @@ if (__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending || __VLS_ctx.isMyM
             }) },
     });
     // @ts-ignore
-    [isMyMessage, isMyMessage, isMyMessage, isMyMessage, isMyMessage, isMyMessage, isMyMessage, isMyMessage, isMyMessage, message, message, message, message, message, responsive, responsive, isChatStart, isChatStart, isChatFinished, isChatFinished,];
+    [message, message, message, message, message, isMyMessage, isMyMessage, isMyMessage, isMyMessage, isMyMessage, isMyMessage, isMyMessage, isMyMessage, isMyMessage, responsive, responsive, isChatStart, isChatStart, isChatFinished, isChatFinished,];
     if (__VLS_ctx.message.is_call == 1) {
         // @ts-ignore
         [message,];
@@ -288,6 +310,21 @@ if (__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending || __VLS_ctx.isMyM
     }
 }
 /** @type {__VLS_StyleScopedClasses['']} */ ;
+/** @type {__VLS_StyleScopedClasses['relative']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-chat-haze-200']} */ ;
+/** @type {__VLS_StyleScopedClasses['absolute']} */ ;
+/** @type {__VLS_StyleScopedClasses['translate-x-1/2']} */ ;
+/** @type {__VLS_StyleScopedClasses['bottom-1/2']} */ ;
+/** @type {__VLS_StyleScopedClasses['right-1/2']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-3/4']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-[1px]']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-chat-haze-200']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-white']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-sm']} */ ;
+/** @type {__VLS_StyleScopedClasses['px-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['py-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['z-[1]']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
 /** @type {__VLS_StyleScopedClasses['items-end']} */ ;
 /** @type {__VLS_StyleScopedClasses['mt-1']} */ ;
@@ -307,6 +344,8 @@ if (__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending || __VLS_ctx.isMyM
 /** @type {__VLS_StyleScopedClasses['rounded-2xl']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-left']} */ ;
 /** @type {__VLS_StyleScopedClasses['w-max']} */ ;
+/** @type {__VLS_StyleScopedClasses['relative']} */ ;
+/** @type {__VLS_StyleScopedClasses['group']} */ ;
 /** @type {__VLS_StyleScopedClasses['rounded-tl-[6px]']} */ ;
 /** @type {__VLS_StyleScopedClasses['rounded-bl-[6px]']} */ ;
 /** @type {__VLS_StyleScopedClasses['rounded-tr-[6px]']} */ ;

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

@@ -13,6 +13,7 @@ declare const _default: import("vue").DefineComponent<Props, {
         is_mqtt?: boolean | undefined;
     } | undefined) => Promise<void>;
     infoUser: import("vue").ShallowRef<IResUser | null>;
+    handleGetDetailReceiverQuickly: (data: IResUser) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     call: (value: IResUser) => any;
     back: () => any;

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

@@ -128,6 +128,10 @@ const handleScrollTop = async () => {
     chatMessageRef.value?.hideScrollEvent();
     chatMessageRef.value?.fixedScroll();
 };
+const handleGetDetailReceiverQuickly = (data) => {
+    if (data?.id == infoUser.value?.id)
+        infoUser.value = data;
+};
 const handleGetDetailReceiver = async (data) => {
     const id = props.receiverId;
     if (data)
@@ -261,7 +265,7 @@ const reconcileAndSortMessages = (serverMessages) => {
     listMessage.value = currentMessages.sort((a, b) => dayjs(b.created_at).valueOf() - dayjs(a.created_at).valueOf());
 };
 const handleGetListMqtt = useDebounce(() => handleGetMessage({ is_mqtt: true }), 5000);
-const __VLS_exposed = { getData, handleGetMessage, infoUser };
+const __VLS_exposed = { getData, handleGetMessage, infoUser, handleGetDetailReceiverQuickly };
 defineExpose(__VLS_exposed);
 debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
 const __VLS_defaults = {};
@@ -275,140 +279,147 @@ 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 relative" },
-});
-/** @type {[typeof HomeHeader, ]} */ ;
-// @ts-ignore
-const __VLS_0 = __VLS_asFunctionalComponent(HomeHeader, new HomeHeader({
-    ...{ 'onCall': {} },
-    ...{ 'onBack': {} },
-    ...{ class: "shrink-0" },
-    data: (__VLS_ctx.infoUser),
-    responsive: (__VLS_ctx.responsive),
-}));
-const __VLS_1 = __VLS_0({
-    ...{ 'onCall': {} },
-    ...{ 'onBack': {} },
-    ...{ class: "shrink-0" },
-    data: (__VLS_ctx.infoUser),
-    responsive: (__VLS_ctx.responsive),
-}, ...__VLS_functionalComponentArgsRest(__VLS_0));
-let __VLS_3;
-let __VLS_4;
-const __VLS_5 = ({ call: {} },
-    { onCall: (__VLS_ctx.call) });
-const __VLS_6 = ({ back: {} },
-    { onBack: (...[$event]) => {
-            __VLS_ctx.emit('back');
-            // @ts-ignore
-            [infoUser, responsive, call, emit,];
-        } });
-var __VLS_2;
-if (__VLS_ctx.listMessage?.length) {
-    // @ts-ignore
-    [listMessage,];
-    /** @type {[typeof ChatMessage, ]} */ ;
-    // @ts-ignore
-    const __VLS_8 = __VLS_asFunctionalComponent(ChatMessage, new ChatMessage({
-        ...{ 'onScrollTop': {} },
-        ...{ 'onCallBack': {} },
-        ref: "chatMessageRef",
-        data: (__VLS_ctx.infoUser),
-        message: (__VLS_ctx.reversedList),
-        ...{ class: "grow" },
-        responsive: (__VLS_ctx.responsive),
-        showNewCustomer: (__VLS_ctx.page >= __VLS_ctx.pageCount),
-        isLoading: (__VLS_ctx.isLoading),
-    }));
-    const __VLS_9 = __VLS_8({
-        ...{ 'onScrollTop': {} },
-        ...{ 'onCallBack': {} },
-        ref: "chatMessageRef",
-        data: (__VLS_ctx.infoUser),
-        message: (__VLS_ctx.reversedList),
-        ...{ class: "grow" },
-        responsive: (__VLS_ctx.responsive),
-        showNewCustomer: (__VLS_ctx.page >= __VLS_ctx.pageCount),
-        isLoading: (__VLS_ctx.isLoading),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_8));
-    let __VLS_11;
-    let __VLS_12;
-    const __VLS_13 = ({ scrollTop: {} },
-        { onScrollTop: (__VLS_ctx.handleScrollTop) });
-    const __VLS_14 = ({ callBack: {} },
-        { onCallBack: (__VLS_ctx.call) });
-    /** @type {typeof __VLS_ctx.chatMessageRef} */ ;
-    var __VLS_15 = {};
-    // @ts-ignore
-    [infoUser, responsive, call, reversedList, page, pageCount, isLoading, handleScrollTop, chatMessageRef,];
-    var __VLS_10;
-}
-else if (!__VLS_ctx.isLoading) {
-    // @ts-ignore
-    [isLoading,];
-    /** @type {[typeof NewCustomer, ]} */ ;
+if (__VLS_ctx.infoUser) {
     // @ts-ignore
-    const __VLS_18 = __VLS_asFunctionalComponent(NewCustomer, new NewCustomer({
-        data: (__VLS_ctx.infoUser),
-        ...{ class: "grow" },
-        isNew: (!__VLS_ctx.listMessage.length),
-    }));
-    const __VLS_19 = __VLS_18({
-        data: (__VLS_ctx.infoUser),
-        ...{ class: "grow" },
-        isNew: (!__VLS_ctx.listMessage.length),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_18));
-    // @ts-ignore
-    [infoUser, listMessage,];
-}
-else {
-    __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
-        ...{ class: "grow" },
+    [infoUser,];
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ class: "flex flex-col overflow-hidden relative" },
     });
-}
-if (__VLS_ctx.receiverId != __VLS_ctx.digibotId) {
-    // @ts-ignore
-    [receiverId, digibotId,];
-    /** @type {[typeof InputChat, ]} */ ;
+    /** @type {[typeof HomeHeader, ]} */ ;
     // @ts-ignore
-    const __VLS_22 = __VLS_asFunctionalComponent(InputChat, new InputChat({
-        ...{ 'onSendMessage': {} },
-        ...{ 'onFocus': {} },
+    const __VLS_0 = __VLS_asFunctionalComponent(HomeHeader, new HomeHeader({
+        ...{ 'onCall': {} },
+        ...{ 'onBack': {} },
+        ...{ class: "shrink-0" },
         data: (__VLS_ctx.infoUser),
         responsive: (__VLS_ctx.responsive),
-        conversation: (__VLS_ctx.conversation),
-        ref: "inputChatRef",
-        ...{ class: "p-2 sm:p-6" },
     }));
-    const __VLS_23 = __VLS_22({
-        ...{ 'onSendMessage': {} },
-        ...{ 'onFocus': {} },
+    const __VLS_1 = __VLS_0({
+        ...{ 'onCall': {} },
+        ...{ 'onBack': {} },
+        ...{ class: "shrink-0" },
         data: (__VLS_ctx.infoUser),
         responsive: (__VLS_ctx.responsive),
-        conversation: (__VLS_ctx.conversation),
-        ref: "inputChatRef",
-        ...{ class: "p-2 sm:p-6" },
-    }, ...__VLS_functionalComponentArgsRest(__VLS_22));
-    let __VLS_25;
-    let __VLS_26;
-    const __VLS_27 = ({ sendMessage: {} },
-        { onSendMessage: (__VLS_ctx.handleSendMessage) });
-    const __VLS_28 = ({ focus: {} },
-        { onFocus: (...[$event]) => {
-                if (!(__VLS_ctx.receiverId != __VLS_ctx.digibotId))
+    }, ...__VLS_functionalComponentArgsRest(__VLS_0));
+    let __VLS_3;
+    let __VLS_4;
+    const __VLS_5 = ({ call: {} },
+        { onCall: (__VLS_ctx.call) });
+    const __VLS_6 = ({ back: {} },
+        { onBack: (...[$event]) => {
+                if (!(__VLS_ctx.infoUser))
                     return;
-                __VLS_ctx.emit('inputFocus');
+                __VLS_ctx.emit('back');
                 // @ts-ignore
-                [infoUser, responsive, emit, conversation, handleSendMessage,];
+                [infoUser, responsive, call, emit,];
             } });
-    /** @type {typeof __VLS_ctx.inputChatRef} */ ;
-    var __VLS_29 = {};
-    // @ts-ignore
-    [inputChatRef,];
-    var __VLS_24;
+    var __VLS_2;
+    if (__VLS_ctx.listMessage?.length) {
+        // @ts-ignore
+        [listMessage,];
+        /** @type {[typeof ChatMessage, ]} */ ;
+        // @ts-ignore
+        const __VLS_8 = __VLS_asFunctionalComponent(ChatMessage, new ChatMessage({
+            ...{ 'onScrollTop': {} },
+            ...{ 'onCallBack': {} },
+            ref: "chatMessageRef",
+            data: (__VLS_ctx.infoUser),
+            message: (__VLS_ctx.reversedList),
+            ...{ class: "grow" },
+            responsive: (__VLS_ctx.responsive),
+            showNewCustomer: (__VLS_ctx.page >= __VLS_ctx.pageCount),
+            isLoading: (__VLS_ctx.isLoading),
+        }));
+        const __VLS_9 = __VLS_8({
+            ...{ 'onScrollTop': {} },
+            ...{ 'onCallBack': {} },
+            ref: "chatMessageRef",
+            data: (__VLS_ctx.infoUser),
+            message: (__VLS_ctx.reversedList),
+            ...{ class: "grow" },
+            responsive: (__VLS_ctx.responsive),
+            showNewCustomer: (__VLS_ctx.page >= __VLS_ctx.pageCount),
+            isLoading: (__VLS_ctx.isLoading),
+        }, ...__VLS_functionalComponentArgsRest(__VLS_8));
+        let __VLS_11;
+        let __VLS_12;
+        const __VLS_13 = ({ scrollTop: {} },
+            { onScrollTop: (__VLS_ctx.handleScrollTop) });
+        const __VLS_14 = ({ callBack: {} },
+            { onCallBack: (__VLS_ctx.call) });
+        /** @type {typeof __VLS_ctx.chatMessageRef} */ ;
+        var __VLS_15 = {};
+        // @ts-ignore
+        [infoUser, responsive, call, reversedList, page, pageCount, isLoading, handleScrollTop, chatMessageRef,];
+        var __VLS_10;
+    }
+    else if (!__VLS_ctx.isLoading) {
+        // @ts-ignore
+        [isLoading,];
+        /** @type {[typeof NewCustomer, ]} */ ;
+        // @ts-ignore
+        const __VLS_18 = __VLS_asFunctionalComponent(NewCustomer, new NewCustomer({
+            data: (__VLS_ctx.infoUser),
+            ...{ class: "grow" },
+            isNew: (!__VLS_ctx.listMessage.length),
+        }));
+        const __VLS_19 = __VLS_18({
+            data: (__VLS_ctx.infoUser),
+            ...{ class: "grow" },
+            isNew: (!__VLS_ctx.listMessage.length),
+        }, ...__VLS_functionalComponentArgsRest(__VLS_18));
+        // @ts-ignore
+        [infoUser, listMessage,];
+    }
+    else {
+        __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
+            ...{ class: "grow" },
+        });
+    }
+    if (__VLS_ctx.receiverId != __VLS_ctx.digibotId) {
+        // @ts-ignore
+        [receiverId, digibotId,];
+        /** @type {[typeof InputChat, ]} */ ;
+        // @ts-ignore
+        const __VLS_22 = __VLS_asFunctionalComponent(InputChat, new InputChat({
+            ...{ 'onSendMessage': {} },
+            ...{ 'onFocus': {} },
+            data: (__VLS_ctx.infoUser),
+            responsive: (__VLS_ctx.responsive),
+            conversation: (__VLS_ctx.conversation),
+            ref: "inputChatRef",
+            ...{ class: "p-2 sm:p-6" },
+        }));
+        const __VLS_23 = __VLS_22({
+            ...{ 'onSendMessage': {} },
+            ...{ 'onFocus': {} },
+            data: (__VLS_ctx.infoUser),
+            responsive: (__VLS_ctx.responsive),
+            conversation: (__VLS_ctx.conversation),
+            ref: "inputChatRef",
+            ...{ class: "p-2 sm:p-6" },
+        }, ...__VLS_functionalComponentArgsRest(__VLS_22));
+        let __VLS_25;
+        let __VLS_26;
+        const __VLS_27 = ({ sendMessage: {} },
+            { onSendMessage: (__VLS_ctx.handleSendMessage) });
+        const __VLS_28 = ({ focus: {} },
+            { onFocus: (...[$event]) => {
+                    if (!(__VLS_ctx.infoUser))
+                        return;
+                    if (!(__VLS_ctx.receiverId != __VLS_ctx.digibotId))
+                        return;
+                    __VLS_ctx.emit('inputFocus');
+                    // @ts-ignore
+                    [infoUser, responsive, emit, conversation, handleSendMessage,];
+                } });
+        /** @type {typeof __VLS_ctx.inputChatRef} */ ;
+        var __VLS_29 = {};
+        // @ts-ignore
+        [inputChatRef,];
+        var __VLS_24;
+    }
 }
-/** @type {__VLS_StyleScopedClasses['h-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
 /** @type {__VLS_StyleScopedClasses['overflow-hidden']} */ ;