@phonghq/go-chat 1.0.22 → 1.0.24

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

@@ -1,10 +1,9 @@
 /// <reference types="C:/phonghq/go-chat-v2/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';
+import ChatMessageItem from '../../../chat/page/home/ChatMessageItem.vue';
 const props = withDefaults(defineProps(), {});
 const emit = defineEmits();
 const scrollEventRef = ref(null);
@@ -120,132 +119,24 @@ 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({
-                    ...{ class: "shrink-0" },
-                    src: (__VLS_ctx.data?.avatar ?? ''),
-                    color: (__VLS_ctx.data?.color),
-                    name: (__VLS_ctx.data?.username),
-                    size: (__VLS_ctx.responsive == 'mobile' ? 'sm' : 'md'),
-                    ...{ class: (__VLS_ctx.responsive == 'mobile' ? 'translate-y-[-2px]' : '') },
-                }));
-                const __VLS_14 = __VLS_13({
-                    ...{ class: "shrink-0" },
-                    src: (__VLS_ctx.data?.avatar ?? ''),
-                    color: (__VLS_ctx.data?.color),
-                    name: (__VLS_ctx.data?.username),
-                    size: (__VLS_ctx.responsive == 'mobile' ? 'sm' : 'md'),
-                    ...{ class: (__VLS_ctx.responsive == 'mobile' ? 'translate-y-[-2px]' : '') },
-                }, ...__VLS_functionalComponentArgsRest(__VLS_13));
-                // @ts-ignore
-                [data, data, data, responsive, responsive,];
-            }
-            else {
-                __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-                    ...{ class: "shrink-0" },
-                    ...{ class: (__VLS_ctx.responsive == 'mobile' ? 'w-8' : 'w-12') },
-                });
-                // @ts-ignore
-                [responsive,];
-            }
-            __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-                ...{ class: "bg-[#E4E4E4D4] text-left text-chat-haze-600 px-3 py-2 rounded-2xl max-w-xs w-max" },
-                ...{ 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 justify-end mt-2 pl-[60px]" },
-            ...{ 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-chat-error': item.state == __VLS_ctx.MessageState.Failed }) },
-            });
-            // @ts-ignore
-            [MessageState,];
-            (__VLS_ctx.getMessageStateText(item));
-            // @ts-ignore
-            [getMessageStateText,];
-        }
-    }
+    /** @type {[typeof ChatMessageItem, ]} */ ;
+    // @ts-ignore
+    const __VLS_13 = __VLS_asFunctionalComponent(ChatMessageItem, new ChatMessageItem({
+        message: (item),
+        index: (index),
+        listMessage: (__VLS_ctx.message),
+        responsive: (__VLS_ctx.responsive),
+        data: (__VLS_ctx.data),
+    }));
+    const __VLS_14 = __VLS_13({
+        message: (item),
+        index: (index),
+        listMessage: (__VLS_ctx.message),
+        responsive: (__VLS_ctx.responsive),
+        data: (__VLS_ctx.data),
+    }, ...__VLS_functionalComponentArgsRest(__VLS_13));
+    // @ts-ignore
+    [data, message, responsive,];
 }
 var __VLS_2;
 /** @type {__VLS_StyleScopedClasses['relative']} */ ;
@@ -259,42 +150,6 @@ var __VLS_2;
 /** @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['shrink-0']} */ ;
-/** @type {__VLS_StyleScopedClasses['shrink-0']} */ ;
-/** @type {__VLS_StyleScopedClasses['bg-[#E4E4E4D4]']} */ ;
-/** @type {__VLS_StyleScopedClasses['text-left']} */ ;
-/** @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['w-max']} */ ;
-/** @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['justify-end']} */ ;
-/** @type {__VLS_StyleScopedClasses['mt-2']} */ ;
-/** @type {__VLS_StyleScopedClasses['pl-[60px]']} */ ;
-/** @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-chat-error']} */ ;
 // @ts-ignore
 var __VLS_7 = __VLS_6;
 const __VLS_export = (await import('vue')).defineComponent({

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

@@ -0,0 +1,321 @@
+/// <reference types="C:/phonghq/go-chat-v2/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 { computed, nextTick } from 'vue';
+import { MessageState } from '../../../constant/message';
+import IconPhoneCancel from '../../../assets/icons/call/IconPhoneCancel.vue';
+import { PLIVO_CALL_STATUS } from '../../../types/chat/call';
+import IconPhone from '../../../assets/icons/customer-detail/IconPhone.vue';
+const props = withDefaults(defineProps(), {});
+const isMyMessage = computed(() => props.message.sender_id == dataProfile.value?.id);
+const callTitle = computed(() => {
+    if (isMyMessage.value) {
+        if (props.message?.call_status == PLIVO_CALL_STATUS.CONNECT_FAILED) {
+            return 'Call canceled';
+        }
+        else if (props.message?.call_status == PLIVO_CALL_STATUS.CALL_END) {
+            return 'Outgoing audio call';
+        }
+        else if (props.message?.call_status == PLIVO_CALL_STATUS.CANCEL) {
+            return 'Call canceled';
+        }
+    }
+    else {
+        if (props.message?.call_status == PLIVO_CALL_STATUS.CONNECT_FAILED) {
+            return 'Call missed';
+        }
+        else if (props.message?.call_status == PLIVO_CALL_STATUS.CALL_END) {
+            return 'Incomming audio call';
+        }
+    }
+    return '';
+});
+const scrollBottom = () => {
+    nextTick(() => {
+        const eleIdContentChat = document.getElementById('content-chat');
+        if (eleIdContentChat) {
+            eleIdContentChat.scrollTop = eleIdContentChat.scrollHeight;
+        }
+    });
+};
+const getCallDuration = (seconds) => {
+    const min = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${min} min${min > 1 ? 's' : ''} ${secs} sec`;
+};
+const shouldShowAvatar = (index) => {
+    if (index === 0)
+        return true;
+    return props.listMessage[index - 1].sender_id !== props.listMessage[index].sender_id;
+};
+const isEndMessage = (index) => {
+    if (props.listMessage?.length == index + 1)
+        return true;
+    return props.listMessage[index + 1].sender_id !== props.listMessage[index].sender_id;
+};
+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 '';
+    }
+};
+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: "flex items-end mt-2" },
+    ...{ class: ({
+            'mt-4': __VLS_ctx.shouldShowAvatar(__VLS_ctx.index),
+            'flex-col justify-end  pl-[60px]': __VLS_ctx.isMyMessage,
+            'gap-2': !__VLS_ctx.isMyMessage
+        }) },
+});
+// @ts-ignore
+[shouldShowAvatar, index, isMyMessage, isMyMessage,];
+if (__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending) {
+    // @ts-ignore
+    [message, MessageState,];
+    if (!__VLS_ctx.isMyMessage) {
+        // @ts-ignore
+        [isMyMessage,];
+        if (__VLS_ctx.shouldShowAvatar(__VLS_ctx.index)) {
+            // @ts-ignore
+            [shouldShowAvatar, index,];
+            /** @type {[typeof Avatar, ]} */ ;
+            // @ts-ignore
+            const __VLS_0 = __VLS_asFunctionalComponent(Avatar, new Avatar({
+                ...{ class: "shrink-0" },
+                src: (__VLS_ctx.data?.avatar ?? ''),
+                color: (__VLS_ctx.data?.color),
+                name: (__VLS_ctx.data?.username),
+                size: (__VLS_ctx.responsive == 'mobile' ? 'sm' : 'md'),
+                ...{ class: (__VLS_ctx.responsive == 'mobile' ? 'translate-y-[-2px]' : '') },
+            }));
+            const __VLS_1 = __VLS_0({
+                ...{ class: "shrink-0" },
+                src: (__VLS_ctx.data?.avatar ?? ''),
+                color: (__VLS_ctx.data?.color),
+                name: (__VLS_ctx.data?.username),
+                size: (__VLS_ctx.responsive == 'mobile' ? 'sm' : 'md'),
+                ...{ class: (__VLS_ctx.responsive == 'mobile' ? 'translate-y-[-2px]' : '') },
+            }, ...__VLS_functionalComponentArgsRest(__VLS_0));
+            // @ts-ignore
+            [data, data, data, responsive, responsive,];
+        }
+        else {
+            __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+                ...{ class: "shrink-0" },
+                ...{ class: (__VLS_ctx.responsive == 'mobile' ? 'w-8' : 'w-12') },
+            });
+            // @ts-ignore
+            [responsive,];
+        }
+    }
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ class: "px-3 py-2 rounded-2xl max-w-xs" },
+        ...{ class: ({
+                'rounded-tl-none': !__VLS_ctx.shouldShowAvatar(__VLS_ctx.index) && !__VLS_ctx.isMyMessage,
+                'rounded-bl-none': !__VLS_ctx.isEndMessage(__VLS_ctx.index) && !__VLS_ctx.isMyMessage,
+                'rounded-tr-none': !__VLS_ctx.shouldShowAvatar(__VLS_ctx.index) && __VLS_ctx.isMyMessage,
+                'rounded-br-none': !__VLS_ctx.isEndMessage(__VLS_ctx.index) && __VLS_ctx.isMyMessage,
+                '!text-[#14532D] !bg-[#d4f8d4]': __VLS_ctx.message.message_uuid && !__VLS_ctx.message.is_call,
+                'bg-[#D0DFEC] text-[#266699]': __VLS_ctx.isMyMessage,
+                'bg-[#E4E4E4D4]  text-chat-haze-600 text-left  w-max ': !__VLS_ctx.isMyMessage
+            }) },
+    });
+    // @ts-ignore
+    [shouldShowAvatar, shouldShowAvatar, index, index, index, index, isMyMessage, isMyMessage, isMyMessage, isMyMessage, isMyMessage, isMyMessage, message, message, isEndMessage, isEndMessage,];
+    if (__VLS_ctx.message.is_call == 1) {
+        // @ts-ignore
+        [message,];
+        __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+            ...{ class: "flex flex-col gap-2 w-[200px]" },
+        });
+        __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
+            ...{ class: "font-medium " },
+            ...{ class: ({ 'text-chat-error': __VLS_ctx.message.call_status !== __VLS_ctx.PLIVO_CALL_STATUS.CALL_END }) },
+        });
+        // @ts-ignore
+        [message, PLIVO_CALL_STATUS,];
+        (__VLS_ctx.callTitle);
+        // @ts-ignore
+        [callTitle,];
+        __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+            ...{ class: "flex items-center gap-2 shrink-0" },
+        });
+        __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+            ...{ class: "overflow-hidden w-8 h-8 rounded-full text-white" },
+        });
+        if (__VLS_ctx.message.call_status == __VLS_ctx.PLIVO_CALL_STATUS.CALL_END) {
+            // @ts-ignore
+            [message, PLIVO_CALL_STATUS,];
+            __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+                ...{ class: "bg-chat-success flex-center w-full h-full" },
+            });
+            /** @type {[typeof IconPhone, ]} */ ;
+            // @ts-ignore
+            const __VLS_4 = __VLS_asFunctionalComponent(IconPhone, new IconPhone({
+                ...{ class: "w-5 h-5" },
+            }));
+            const __VLS_5 = __VLS_4({
+                ...{ class: "w-5 h-5" },
+            }, ...__VLS_functionalComponentArgsRest(__VLS_4));
+        }
+        else {
+            __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+                ...{ class: "bg-chat-error flex-center w-full h-full" },
+            });
+            /** @type {[typeof IconPhoneCancel, ]} */ ;
+            // @ts-ignore
+            const __VLS_8 = __VLS_asFunctionalComponent(IconPhoneCancel, new IconPhoneCancel({
+                ...{ class: "w-5 h-5" },
+            }));
+            const __VLS_9 = __VLS_8({
+                ...{ class: "w-5 h-5" },
+            }, ...__VLS_functionalComponentArgsRest(__VLS_8));
+        }
+        (__VLS_ctx.getCallDuration(__VLS_ctx.message?.duration ?? 0));
+        // @ts-ignore
+        [message, getCallDuration,];
+        __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
+            ...{ class: "text-sm text-red-600 mt-1" },
+        });
+        __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+            ...{ class: "flex-center h-10 rounded-xl bg-chat-haze-200 font-semibold" },
+        });
+        __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({});
+    }
+    else if (__VLS_ctx.message.message) {
+        // @ts-ignore
+        [message,];
+        __VLS_asFunctionalElement(__VLS_elements.div)({
+            ...{ style: ({ wordBreak: 'break-word' }) },
+        });
+        __VLS_asFunctionalDirective(__VLS_directives.vHtml)(null, { ...__VLS_directiveBindingRestFields, value: (__VLS_ctx.message.message) }, null, null);
+        // @ts-ignore
+        [message,];
+    }
+    else if (__VLS_ctx.message.attachments.length) {
+        // @ts-ignore
+        [message,];
+        __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({});
+        __VLS_asFunctionalElement(__VLS_elements.img)({
+            ...{ onLoad: (() => {
+                    if (__VLS_ctx.index == __VLS_ctx.listMessage.length - 1) {
+                        __VLS_ctx.scrollBottom();
+                    }
+                }) },
+            src: (__VLS_ctx.message.attachments[0]?.file_path),
+            alt: "avatar",
+        });
+        // @ts-ignore
+        [index, message, listMessage, scrollBottom,];
+    }
+    if (__VLS_ctx.isMyMessage) {
+        // @ts-ignore
+        [isMyMessage,];
+        if ((__VLS_ctx.index == __VLS_ctx.listMessage.length - 1 && __VLS_ctx.getMessageStateText(__VLS_ctx.message)) ||
+            __VLS_ctx.message.state == __VLS_ctx.MessageState.Failed) {
+            // @ts-ignore
+            [index, message, message, MessageState, listMessage, getMessageStateText,];
+            __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
+                ...{ class: "text-chat-haze-200 text-xs mt-1" },
+                ...{ class: ({ '!text-chat-error': __VLS_ctx.message.state == __VLS_ctx.MessageState.Failed }) },
+            });
+            // @ts-ignore
+            [message, MessageState,];
+            (__VLS_ctx.getMessageStateText(__VLS_ctx.message));
+            // @ts-ignore
+            [message, getMessageStateText,];
+        }
+    }
+}
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-end']} */ ;
+/** @type {__VLS_StyleScopedClasses['mt-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['mt-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
+/** @type {__VLS_StyleScopedClasses['justify-end']} */ ;
+/** @type {__VLS_StyleScopedClasses['pl-[60px]']} */ ;
+/** @type {__VLS_StyleScopedClasses['gap-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['shrink-0']} */ ;
+/** @type {__VLS_StyleScopedClasses['shrink-0']} */ ;
+/** @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['rounded-tr-none']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-br-none']} */ ;
+/** @type {__VLS_StyleScopedClasses['!text-[#14532D]']} */ ;
+/** @type {__VLS_StyleScopedClasses['!bg-[#d4f8d4]']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-[#D0DFEC]']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-[#266699]']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-[#E4E4E4D4]']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-chat-haze-600']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-left']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-max']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
+/** @type {__VLS_StyleScopedClasses['gap-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-[200px]']} */ ;
+/** @type {__VLS_StyleScopedClasses['font-medium']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-chat-error']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['gap-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['shrink-0']} */ ;
+/** @type {__VLS_StyleScopedClasses['overflow-hidden']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-8']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-8']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-white']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-chat-success']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-5']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-5']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-chat-error']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-5']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-5']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-sm']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-red-600']} */ ;
+/** @type {__VLS_StyleScopedClasses['mt-1']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-10']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-xl']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-chat-haze-200']} */ ;
+/** @type {__VLS_StyleScopedClasses['font-semibold']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-chat-haze-200']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-xs']} */ ;
+/** @type {__VLS_StyleScopedClasses['mt-1']} */ ;
+/** @type {__VLS_StyleScopedClasses['!text-chat-error']} */ ;
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeProps: {},
+    props: {},
+});
+export default {};

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

@@ -20,8 +20,7 @@ const isLoading = ref(false);
 const infoUser = shallowRef(null);
 const listMessage = ref([]);
 const chatMessageRef = ref(null);
-onMounted(() => {
-});
+onMounted(() => { });
 onUnmounted(() => {
     handleDisconnectMqtt();
 });
@@ -43,7 +42,8 @@ const handleDisconnectMqtt = async () => {
     removeHandleMqttMessage('chat-home');
 };
 const mqttMessageHandler = (topic, message) => {
-    if (infoUser.value?.id && message?.sender_id?.toString() == infoUser.value?.id?.toString() || true) {
+    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);
@@ -54,7 +54,7 @@ const mqttMessageHandler = (topic, message) => {
         chatMessageRef.value?.scrollBottom();
     }
 };
-const handleGetMessage = async () => {
+const handleGetMessage = async (option) => {
     try {
         const id = props.receiverId;
         const params = { page: page, receiver_id: props.receiverId };
@@ -62,8 +62,15 @@ const handleGetMessage = async () => {
         res.items = res.items.reverse();
         page = res._meta?.currentPage || 1;
         pageCount = res._meta?.pageCount || 1;
-        if (id == props.receiverId)
-            listMessage.value.unshift(...res.items);
+        if (id == props.receiverId) {
+            if (option?.resetList) {
+                listMessage.value = res.items;
+                chatMessageRef.value?.scrollBottom();
+            }
+            else {
+                listMessage.value.unshift(...res.items);
+            }
+        }
     }
     catch (error) {
         console.error(error);
@@ -110,7 +117,6 @@ const updateMessageItem = (id, data) => {
     if (index > -1) {
         const item = listMessage.value[index];
         listMessage.value[index] = { ...item, ...data };
-        console.log({ ...item, ...data });
     }
 };
 const handleSendMessage = async (data) => {
@@ -210,7 +216,7 @@ const call = () => {
         emit('call', infoUser.value);
     }
 };
-const __VLS_exposed = { getData };
+const __VLS_exposed = { getData, handleGetMessage };
 defineExpose(__VLS_exposed);
 debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
 const __VLS_defaults = {};

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

@@ -82,18 +82,24 @@ __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
 __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
     ...{ class: "text-sm text-chat-gray-3 truncate" },
 });
-__VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
-    ...{ onClick: (...[$event]) => {
-            __VLS_ctx.emit('call');
-            // @ts-ignore
-            [emit,];
-        } },
-    ...{ class: "flex-center text-[#0051E6] bg-chat-haze-200 w-9 h-9 rounded-lg" },
-});
-/** @type {[typeof IconPhone, ]} */ ;
-// @ts-ignore
-const __VLS_7 = __VLS_asFunctionalComponent(IconPhone, new IconPhone({}));
-const __VLS_8 = __VLS_7({}, ...__VLS_functionalComponentArgsRest(__VLS_7));
+if (__VLS_ctx.data?.id && __VLS_ctx.data?.id != __VLS_ctx.digibotId.toString() && __VLS_ctx.dataProfile?.user_type == 'tenant') {
+    // @ts-ignore
+    [dataProfile, data, data, digibotId,];
+    __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
+        ...{ onClick: (...[$event]) => {
+                if (!(__VLS_ctx.data?.id && __VLS_ctx.data?.id != __VLS_ctx.digibotId.toString() && __VLS_ctx.dataProfile?.user_type == 'tenant'))
+                    return;
+                __VLS_ctx.emit('call');
+                // @ts-ignore
+                [emit,];
+            } },
+        ...{ class: "flex-center text-[#0051E6] bg-chat-haze-200 w-9 h-9 rounded-lg" },
+    });
+    /** @type {[typeof IconPhone, ]} */ ;
+    // @ts-ignore
+    const __VLS_7 = __VLS_asFunctionalComponent(IconPhone, new IconPhone({}));
+    const __VLS_8 = __VLS_7({}, ...__VLS_functionalComponentArgsRest(__VLS_7));
+}
 /** @type {__VLS_StyleScopedClasses['px-8']} */ ;
 /** @type {__VLS_StyleScopedClasses['pb-4']} */ ;
 /** @type {__VLS_StyleScopedClasses['border-b']} */ ;