@phonghq/go-chat 1.0.72 → 1.0.74

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

@@ -0,0 +1,210 @@
+/// <reference types="C:/phonghq/go-chat-v2/node_modules/.vue-global-types/vue_3.5_0.d.ts" />
+import { dataProfile } from '../../../utils/chat/store/auth';
+import { nextTick, ref } from 'vue';
+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 { getTimeLocal } from '../../../utils/dayjs-helper';
+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 isChatFinished = (index) => {
+    if (isEndMessage(index))
+        return true;
+    const time1 = dayjs(props.message[index].created_at);
+    const time2 = dayjs(props.message[index + 1].created_at);
+    return time2.diff(time1, 'minute') > 10;
+};
+const isChatStart = (index) => {
+    if (shouldShowAvatar(index))
+        return true;
+    const time1 = dayjs(props.message[index - 1].created_at);
+    const time2 = dayjs(props.message[index].created_at);
+    return time2.diff(time1, 'minute') > 10;
+};
+const isStartNewDate = (index) => {
+    if (index == 0)
+        return true;
+    const time1 = getTimeLocal(props.message[index - 1].created_at);
+    const time2 = getTimeLocal(props.message[index].created_at);
+    return !!time2 && time2?.date() != time1?.date();
+};
+const handleScrollTop = () => {
+    emit('scrollTop');
+};
+const hideScrollEvent = () => {
+    scrollEventRef.value?.hideLoading();
+};
+const fixedScroll = () => {
+    scrollEventRef.value?.fixedScroll();
+};
+const __VLS_exposed = { scrollBottom, hideScrollEvent, fixedScroll };
+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] chat-padding-page" },
+    });
+    /** @type {[typeof NewCustomer, ]} */ ;
+    // @ts-ignore
+    const __VLS_9 = __VLS_asFunctionalComponent(NewCustomer, new NewCustomer({
+        ...{ class: "h-full" },
+        data: (__VLS_ctx.data),
+        isNew: (!__VLS_ctx.message.length),
+    }));
+    const __VLS_10 = __VLS_9({
+        ...{ class: "h-full" },
+        data: (__VLS_ctx.data),
+        isNew: (!__VLS_ctx.message.length),
+    }, ...__VLS_functionalComponentArgsRest(__VLS_9));
+    // @ts-ignore
+    [data, message,];
+}
+__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+    ...{ class: "chat-padding-page" },
+});
+const __VLS_13 = {}.TransitionGroup;
+/** @type {[typeof __VLS_components.TransitionGroup, typeof __VLS_components.transitionGroup, typeof __VLS_components.TransitionGroup, typeof __VLS_components.transitionGroup, ]} */ ;
+// @ts-ignore
+TransitionGroup;
+// @ts-ignore
+const __VLS_14 = __VLS_asFunctionalComponent(__VLS_13, new __VLS_13({
+    name: (__VLS_ctx.isLoading ? '' : 'message'),
+    tag: "div",
+    ...{ class: "chat-list" },
+}));
+const __VLS_15 = __VLS_14({
+    name: (__VLS_ctx.isLoading ? '' : 'message'),
+    tag: "div",
+    ...{ class: "chat-list" },
+}, ...__VLS_functionalComponentArgsRest(__VLS_14));
+const { default: __VLS_17 } = __VLS_16.slots;
+// @ts-ignore
+[isLoading,];
+for (const [item, index] of __VLS_getVForSourceType((__VLS_ctx.message))) {
+    // @ts-ignore
+    [message,];
+    /** @type {[typeof ChatMessageItem, ]} */ ;
+    // @ts-ignore
+    const __VLS_18 = __VLS_asFunctionalComponent(ChatMessageItem, new ChatMessageItem({
+        ...{ 'onCallAgain': {} },
+        message: (item),
+        index: (index),
+        responsive: (__VLS_ctx.responsive),
+        isMyMessage: (item.sender_id == __VLS_ctx.dataProfile?.id),
+        data: (__VLS_ctx.data),
+        shouldShowAvatar: (__VLS_ctx.shouldShowAvatar(index)),
+        isLastMessage: (index == __VLS_ctx.message.length - 1),
+        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': {} },
+        message: (item),
+        index: (index),
+        responsive: (__VLS_ctx.responsive),
+        isMyMessage: (item.sender_id == __VLS_ctx.dataProfile?.id),
+        data: (__VLS_ctx.data),
+        shouldShowAvatar: (__VLS_ctx.shouldShowAvatar(index)),
+        isLastMessage: (index == __VLS_ctx.message.length - 1),
+        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;
+    const __VLS_23 = ({ callAgain: {} },
+        { onCallAgain: (...[$event]) => {
+                __VLS_ctx.emit('callBack');
+                // @ts-ignore
+                [data, message, responsive, dataProfile, shouldShowAvatar, isEndMessage, isChatFinished, isChatStart, isStartNewDate, emit,];
+            } });
+    var __VLS_20;
+}
+var __VLS_16;
+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['chat-padding-page']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['chat-padding-page']} */ ;
+/** @type {__VLS_StyleScopedClasses['chat-list']} */ ;
+// @ts-ignore
+var __VLS_7 = __VLS_6;
+const __VLS_export = (await import('vue')).defineComponent({
+    setup: () => (__VLS_exposed),
+    __typeEmits: {},
+    __typeProps: {},
+    props: {},
+});
+export default {};

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

@@ -0,0 +1,20 @@
+import type { IResMessage, IResUser } from '../../../types/message';
+import type { PAGE_RESPONSIVE } from '../../../types/chat/global';
+type Props = {
+    message: IResMessage;
+    responsive: PAGE_RESPONSIVE;
+    isEndMessage: boolean;
+    isMyMessage: boolean;
+    isLastMessage: boolean;
+    shouldShowAvatar: boolean;
+    isChatFinished: boolean;
+    isChatStart: boolean;
+    isStartNewDate: boolean;
+    data: IResUser | null;
+};
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    callAgain: () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onCallAgain?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,397 @@
+/// <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 { 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';
+import dayjs from 'dayjs';
+import { DATE_FORMATS } from '../../../constant/datetime';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import { getTimeLocal } from '../../../utils/dayjs-helper';
+// import IconMenuDot from '@/assets/icons/chat/IconMenuDot.vue'
+dayjs.extend(utc);
+dayjs.extend(timezone);
+const props = withDefaults(defineProps(), {});
+const emit = defineEmits();
+const callTitle = computed(() => {
+    if (props.isMyMessage) {
+        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.BUSY ||
+            props.message?.call_status == PLIVO_CALL_STATUS.CANCEL) {
+            return 'Call canceled';
+        }
+        else if (props.message?.call_status == PLIVO_CALL_STATUS.CONNECT_FAILED ||
+            props.message?.call_status == PLIVO_CALL_STATUS.TIME_OUT ||
+            props.message?.call_status == PLIVO_CALL_STATUS.NO_ANSWER) {
+            return 'Call missed';
+        }
+        else if (props.message?.call_status == PLIVO_CALL_STATUS.CALL_END) {
+            return 'Incoming 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`
+    return `${String(min).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
+};
+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 getFinishTime = (time) => {
+    return getTimeLocal(time)?.format(DATE_FORMATS.TIME_12_FORMAT) ?? '';
+};
+const getStartDate = (time) => {
+    if (getTimeLocal(time)?.date() == dayjs().date()) {
+        return 'Today';
+    }
+    return getTimeLocal(time)?.format(DATE_FORMATS['DATE_FORMAT_MEDIUM']) ?? '';
+};
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_defaults = {};
+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: ({
+            'mt-2': __VLS_ctx.shouldShowAvatar,
+            'flex-col justify-end  pl-[60px]': __VLS_ctx.isMyMessage,
+            'gap-2': !__VLS_ctx.isMyMessage
+        }) },
+});
+// @ts-ignore
+[shouldShowAvatar, isMyMessage, isMyMessage,];
+if (__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending || __VLS_ctx.isMyMessage) {
+    // @ts-ignore
+    [message, isMyMessage, MessageState,];
+    if (!__VLS_ctx.isMyMessage) {
+        // @ts-ignore
+        [isMyMessage,];
+        if (__VLS_ctx.shouldShowAvatar) {
+            // @ts-ignore
+            [shouldShowAvatar,];
+            __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+                ...{ class: "" },
+                ...{ class: (__VLS_ctx.responsive == 'mobile' ? 'w-8' : 'w-12') },
+            });
+            // @ts-ignore
+            [responsive,];
+            /** @type {[typeof Avatar, ]} */ ;
+            // @ts-ignore
+            const __VLS_0 = __VLS_asFunctionalComponent(Avatar, new Avatar({
+                ...{ class: "shrink-0 absolute top-0" },
+                src: (__VLS_ctx.data?.avatar ?? ''),
+                color: (__VLS_ctx.data?.color),
+                name: (__VLS_ctx.data?.username),
+                size: (__VLS_ctx.responsive == 'mobile' ? 'sm' : 'md'),
+                ...{ class: ({
+                        'translate-y-[-2px]': __VLS_ctx.responsive == 'mobile'
+                    }) },
+            }));
+            const __VLS_1 = __VLS_0({
+                ...{ class: "shrink-0 absolute top-0" },
+                src: (__VLS_ctx.data?.avatar ?? ''),
+                color: (__VLS_ctx.data?.color),
+                name: (__VLS_ctx.data?.username),
+                size: (__VLS_ctx.responsive == 'mobile' ? 'sm' : 'md'),
+                ...{ class: ({
+                        'translate-y-[-2px]': __VLS_ctx.responsive == 'mobile'
+                    }) },
+            }, ...__VLS_functionalComponentArgsRest(__VLS_0));
+            // @ts-ignore
+            [responsive, responsive, data, data, data,];
+        }
+        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)({});
+    __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+        ...{ 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,
+                'rounded-tr-[6px]': !__VLS_ctx.isChatStart && __VLS_ctx.isMyMessage,
+                'rounded-br-[6px]': !__VLS_ctx.isChatFinished && __VLS_ctx.isMyMessage,
+                '!text-white !bg-chat-success': ((__VLS_ctx.message.message_uuid && !__VLS_ctx.message.is_call) || __VLS_ctx.message.is_sms) && __VLS_ctx.isMyMessage,
+                'bg-chat-primary text-white': __VLS_ctx.isMyMessage && !__VLS_ctx.message.is_call,
+                'bg-[#E4E4E4D4]  text-chat-haze-600': !__VLS_ctx.isMyMessage || __VLS_ctx.message.is_call,
+                'ml-auto': __VLS_ctx.isMyMessage,
+                'mr-auto': !__VLS_ctx.isMyMessage,
+                'max-w-[280px]': __VLS_ctx.responsive == 'mobile',
+                'max-w-[480px]': __VLS_ctx.responsive !== 'mobile'
+            }) },
+    });
+    // @ts-ignore
+    [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,];
+        __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+            ...{ class: "flex flex-col gap-2 w-[210px]" },
+        });
+        __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+            ...{ class: "flex items-center gap-1" },
+        });
+        if (__VLS_ctx.message.call_status == __VLS_ctx.PLIVO_CALL_STATUS.CALL_END) {
+            // @ts-ignore
+            [message, PLIVO_CALL_STATUS,];
+            /** @type {[typeof IconPhone, ]} */ ;
+            // @ts-ignore
+            const __VLS_4 = __VLS_asFunctionalComponent(IconPhone, new IconPhone({
+                weight: (2),
+                ...{ class: "w-5 h-5 text-chat-success" },
+            }));
+            const __VLS_5 = __VLS_4({
+                weight: (2),
+                ...{ class: "w-5 h-5 text-chat-success" },
+            }, ...__VLS_functionalComponentArgsRest(__VLS_4));
+        }
+        else {
+            /** @type {[typeof IconPhoneCancel, ]} */ ;
+            // @ts-ignore
+            const __VLS_8 = __VLS_asFunctionalComponent(IconPhoneCancel, new IconPhoneCancel({
+                weight: (2),
+                ...{ class: "w-5 h-5 text-chat-error" },
+            }));
+            const __VLS_9 = __VLS_8({
+                weight: (2),
+                ...{ class: "w-5 h-5 text-chat-error" },
+            }, ...__VLS_functionalComponentArgsRest(__VLS_8));
+        }
+        __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
+            ...{ class: "font-semibold" },
+        });
+        (__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.span, __VLS_elements.span)({});
+        (__VLS_ctx.getCallDuration(__VLS_ctx.message?.duration ?? 0));
+        // @ts-ignore
+        [message, getCallDuration,];
+        __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
+            ...{ onClick: (...[$event]) => {
+                    if (!(__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending || __VLS_ctx.isMyMessage))
+                        return;
+                    if (!(__VLS_ctx.message.is_call == 1))
+                        return;
+                    __VLS_ctx.emit('callAgain');
+                    // @ts-ignore
+                    [emit,];
+                } },
+            ...{ class: "flex-center h-10 rounded-xl bg-chat-haze-200 font-semibold" },
+        });
+        __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({});
+    }
+    else if (__VLS_ctx.message.message) {
+        // @ts-ignore
+        [message,];
+        __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({});
+        __VLS_asFunctionalElement(__VLS_elements.div)({
+            ...{ style: ({ wordBreak: 'break-word', whiteSpace: 'pre-line' }) },
+        });
+        __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.isLastMessage) {
+                        __VLS_ctx.scrollBottom();
+                    }
+                }) },
+            src: (__VLS_ctx.message.attachments[0]?.file_path),
+            alt: "image",
+        });
+        // @ts-ignore
+        [message, isLastMessage, scrollBottom,];
+    }
+    if (__VLS_ctx.isChatFinished) {
+        // @ts-ignore
+        [isChatFinished,];
+        __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
+            ...{ class: "text-sm mt-1" },
+            ...{ class: (__VLS_ctx.isMyMessage ? 'text-right' : 'text-left') },
+        });
+        // @ts-ignore
+        [isMyMessage,];
+        (__VLS_ctx.getFinishTime(__VLS_ctx.message?.created_at));
+        // @ts-ignore
+        [message, getFinishTime,];
+    }
+    if (__VLS_ctx.isMyMessage) {
+        // @ts-ignore
+        [isMyMessage,];
+        if ((__VLS_ctx.isLastMessage && __VLS_ctx.getMessageStateText(__VLS_ctx.message)) || __VLS_ctx.message.state == __VLS_ctx.MessageState.Failed) {
+            // @ts-ignore
+            [message, message, MessageState, isLastMessage, getMessageStateText,];
+            __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
+                ...{ class: "text-chat-haze-400 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['']} */ ;
+/** @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']} */ ;
+/** @type {__VLS_StyleScopedClasses['relative']} */ ;
+/** @type {__VLS_StyleScopedClasses['mt-2']} */ ;
+/** @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['absolute']} */ ;
+/** @type {__VLS_StyleScopedClasses['top-0']} */ ;
+/** @type {__VLS_StyleScopedClasses['translate-y-[-2px]']} */ ;
+/** @type {__VLS_StyleScopedClasses['shrink-0']} */ ;
+/** @type {__VLS_StyleScopedClasses['px-3']} */ ;
+/** @type {__VLS_StyleScopedClasses['py-2']} */ ;
+/** @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]']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-br-[6px]']} */ ;
+/** @type {__VLS_StyleScopedClasses['!text-white']} */ ;
+/** @type {__VLS_StyleScopedClasses['!bg-chat-success']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-chat-primary']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-white']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-[#E4E4E4D4]']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-chat-haze-600']} */ ;
+/** @type {__VLS_StyleScopedClasses['ml-auto']} */ ;
+/** @type {__VLS_StyleScopedClasses['mr-auto']} */ ;
+/** @type {__VLS_StyleScopedClasses['max-w-[280px]']} */ ;
+/** @type {__VLS_StyleScopedClasses['max-w-[480px]']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
+/** @type {__VLS_StyleScopedClasses['gap-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-[210px]']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['gap-1']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-5']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-5']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-chat-success']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-5']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-5']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-chat-error']} */ ;
+/** @type {__VLS_StyleScopedClasses['font-semibold']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['gap-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['shrink-0']} */ ;
+/** @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-sm']} */ ;
+/** @type {__VLS_StyleScopedClasses['mt-1']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-chat-haze-400']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-xs']} */ ;
+/** @type {__VLS_StyleScopedClasses['mt-1']} */ ;
+/** @type {__VLS_StyleScopedClasses['!text-chat-error']} */ ;
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+    props: {},
+});
+export default {};

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

@@ -0,0 +1,19 @@
+import type { IResMessage, IResUser } from '../../../types/message';
+import type { PAGE_RESPONSIVE } from '../../../types/chat/global';
+type Props = {
+    message: IResMessage;
+    responsive: PAGE_RESPONSIVE;
+    isEndMessage: boolean;
+    isMyMessage: boolean;
+    isLastMessage: boolean;
+    shouldShowAvatar: boolean;
+    isChatFinished: boolean;
+    isChatStart: boolean;
+    data: IResUser | null;
+};
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    callAgain: () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onCallAgain?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;