@phonghq/go-chat 1.0.74 → 1.0.76

package/dist/assets/icons/chat/IconCopy.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/assets/icons/chat/IconCopy.vue.js

@@ -0,0 +1,22 @@
+/// <reference types="C:/phonghq/go-chat-v2/node_modules/.vue-global-types/vue_3.5_0.d.ts" />
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_ctx = {};
+let __VLS_elements;
+let __VLS_components;
+let __VLS_directives;
+__VLS_asFunctionalElement(__VLS_elements.svg, __VLS_elements.svg)({
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+});
+__VLS_asFunctionalElement(__VLS_elements.path)({
+    d: "M3 16V4C3 2.89543 3.89543 2 5 2H15M9 22H18C19.1046 22 20 21.1046 20 20V8C20 6.89543 19.1046 6 18 6H9C7.89543 6 7 6.89543 7 8V20C7 21.1046 7.89543 22 9 22Z",
+    stroke: "currentColor",
+    'stroke-width': "2",
+    'stroke-linecap': "round",
+    'stroke-linejoin': "round",
+});
+const __VLS_export = (await import('vue')).defineComponent({});
+export default {};

package/dist/assets/icons/chat/IconMenuDot.vue.js

@@ -6,8 +6,8 @@ let __VLS_components;
 let __VLS_directives;
 __VLS_asFunctionalElement(__VLS_elements.svg, __VLS_elements.svg)({
     fill: "#000000",
-    width: "16",
-    height: "16",
+    width: "20",
+    height: "20",
     viewBox: "0 0 32 32",
     'enable-background': "new 0 0 32 32",
     id: "Glyph",

package/dist/assets/icons/chat/IconResend.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/assets/icons/chat/IconResend.vue.js

@@ -0,0 +1,48 @@
+/// <reference types="C:/phonghq/go-chat-v2/node_modules/.vue-global-types/vue_3.5_0.d.ts" />
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_ctx = {};
+let __VLS_elements;
+let __VLS_components;
+let __VLS_directives;
+__VLS_asFunctionalElement(__VLS_elements.svg, __VLS_elements.svg)({
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    'xmlns:xlink': "http://www.w3.org/1999/xlink",
+});
+__VLS_asFunctionalElement(__VLS_elements.g, __VLS_elements.g)({
+    id: "Page-1",
+    stroke: "none",
+    'stroke-width': "1",
+    fill: "none",
+    'fill-rule': "evenodd",
+});
+__VLS_asFunctionalElement(__VLS_elements.g, __VLS_elements.g)({
+    id: "Reload",
+});
+__VLS_asFunctionalElement(__VLS_elements.rect, __VLS_elements.rect)({
+    id: "Rectangle",
+    'fill-rule': "nonzero",
+    x: "0",
+    y: "0",
+    width: "24",
+    height: "24",
+});
+__VLS_asFunctionalElement(__VLS_elements.path, __VLS_elements.path)({
+    d: "M4,13 C4,17.4183 7.58172,21 12,21 C16.4183,21 20,17.4183 20,13 C20,8.58172 16.4183,5 12,5 C10.4407,5 8.98566,5.44609 7.75543,6.21762",
+    id: "Path",
+    stroke: "currentColor",
+    'stroke-width': "2",
+    'stroke-linecap': "round",
+});
+__VLS_asFunctionalElement(__VLS_elements.path, __VLS_elements.path)({
+    d: "M9.2384,1.89795 L7.49856,5.83917 C7.27552,6.34441 7.50429,6.9348 8.00954,7.15784 L11.9508,8.89768",
+    id: "Path",
+    stroke: "currentColor",
+    'stroke-width': "2",
+    'stroke-linecap': "round",
+});
+const __VLS_export = (await import('vue')).defineComponent({});
+export default {};

package/dist/chat/App.vue.js

@@ -541,10 +541,10 @@ else {
         var __VLS_45;
     }
     __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-        ...{ class: "relative flex w-full h-full" },
+        ...{ class: "relative flex grow h-full overflow-hidden" },
         ...{ class: ({
                 '': __VLS_ctx.responsiveRender != 'mobile',
-                'grow flex-col mx-auto bg-[#F9FAFC] overflow-hidden chat-mobile': __VLS_ctx.responsiveRender == 'mobile'
+                'grow flex-col mx-auto bg-[#F9FAFC] chat-mobile': __VLS_ctx.responsiveRender == 'mobile'
             }) },
     });
     // @ts-ignore
@@ -564,7 +564,7 @@ else {
         ref: "chatListRef",
         ...{ class: "" },
         ...{ class: ({
-                'w-[38%] max-w-[500px] min-w-[300px] xl:min-w-[450px] border-r layout-border': __VLS_ctx.responsiveRender != 'mobile',
+                'w-[38%] max-w-[500px] min-w-[350px] xl:min-w-[450px] border-r layout-border': __VLS_ctx.responsiveRender != 'mobile',
                 'w-full max-w-[500px] !bg-[#F9FAFC]': __VLS_ctx.responsiveRender == 'mobile'
             }) },
         responsive: (__VLS_ctx.responsiveRender),
@@ -577,7 +577,7 @@ else {
         ref: "chatListRef",
         ...{ class: "" },
         ...{ class: ({
-                'w-[38%] max-w-[500px] min-w-[300px] xl:min-w-[450px] border-r layout-border': __VLS_ctx.responsiveRender != 'mobile',
+                'w-[38%] max-w-[500px] min-w-[350px] xl:min-w-[450px] border-r layout-border': __VLS_ctx.responsiveRender != 'mobile',
                 'w-full max-w-[500px] !bg-[#F9FAFC]': __VLS_ctx.responsiveRender == 'mobile'
             }) },
         responsive: (__VLS_ctx.responsiveRender),
@@ -870,20 +870,20 @@ else {
 /** @type {__VLS_StyleScopedClasses['relative']} */ ;
 /** @type {__VLS_StyleScopedClasses['relative']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
-/** @type {__VLS_StyleScopedClasses['w-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['grow']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['overflow-hidden']} */ ;
 /** @type {__VLS_StyleScopedClasses['grow']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
 /** @type {__VLS_StyleScopedClasses['mx-auto']} */ ;
 /** @type {__VLS_StyleScopedClasses['bg-[#F9FAFC]']} */ ;
-/** @type {__VLS_StyleScopedClasses['overflow-hidden']} */ ;
 /** @type {__VLS_StyleScopedClasses['chat-mobile']} */ ;
 /** @type {__VLS_StyleScopedClasses['grow']} */ ;
 /** @type {__VLS_StyleScopedClasses['overflow-hidden']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
 /** @type {__VLS_StyleScopedClasses['w-[38%]']} */ ;
 /** @type {__VLS_StyleScopedClasses['max-w-[500px]']} */ ;
-/** @type {__VLS_StyleScopedClasses['min-w-[300px]']} */ ;
+/** @type {__VLS_StyleScopedClasses['min-w-[350px]']} */ ;
 /** @type {__VLS_StyleScopedClasses['xl:min-w-[450px]']} */ ;
 /** @type {__VLS_StyleScopedClasses['border-r']} */ ;
 /** @type {__VLS_StyleScopedClasses['layout-border']} */ ;

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

@@ -13,9 +13,11 @@ declare const _default: import("vue").DefineComponent<Props, {
     fixedScroll: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     scrollTop: () => any;
+    resend: (data: IResMessage) => any;
     callBack: () => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onScrollTop?: (() => any) | undefined;
+    onResend?: ((data: IResMessage) => any) | undefined;
     onCallBack?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -148,8 +148,8 @@ for (const [item, index] of __VLS_getVForSourceType((__VLS_ctx.message))) {
     // @ts-ignore
     const __VLS_18 = __VLS_asFunctionalComponent(ChatMessageItem, new ChatMessageItem({
         ...{ 'onCallAgain': {} },
+        ...{ 'onResend': {} },
         message: (item),
-        index: (index),
         responsive: (__VLS_ctx.responsive),
         isMyMessage: (item.sender_id == __VLS_ctx.dataProfile?.id),
         data: (__VLS_ctx.data),
@@ -162,8 +162,8 @@ for (const [item, index] of __VLS_getVForSourceType((__VLS_ctx.message))) {
     }));
     const __VLS_19 = __VLS_18({
         ...{ 'onCallAgain': {} },
+        ...{ 'onResend': {} },
         message: (item),
-        index: (index),
         responsive: (__VLS_ctx.responsive),
         isMyMessage: (item.sender_id == __VLS_ctx.dataProfile?.id),
         data: (__VLS_ctx.data),
@@ -182,6 +182,12 @@ for (const [item, index] of __VLS_getVForSourceType((__VLS_ctx.message))) {
                 // @ts-ignore
                 [data, message, responsive, dataProfile, shouldShowAvatar, isEndMessage, isChatFinished, isChatStart, isStartNewDate, emit,];
             } });
+    const __VLS_24 = ({ resend: {} },
+        { onResend: (...[$event]) => {
+                __VLS_ctx.emit('resend', item);
+                // @ts-ignore
+                [emit,];
+            } });
     var __VLS_20;
 }
 var __VLS_16;

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

@@ -14,7 +14,9 @@ type Props = {
 };
 declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     callAgain: () => any;
+    resend: () => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onCallAgain?: (() => any) | undefined;
+    onResend?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,6 +1,6 @@
 /// <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 { computed, nextTick, ref } from 'vue';
 import { MessageState } from '../../../constant/message';
 import IconPhoneCancel from '../../../assets/icons/call/IconPhoneCancel.vue';
 import { PLIVO_CALL_STATUS } from '../../../types/chat/call';
@@ -10,7 +10,11 @@ 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'
+import IconMenuDot from '../../../assets/icons/chat/IconMenuDot.vue';
+import IconResend from '../../../assets/icons/chat/IconResend.vue';
+import IconCopy from '../../../assets/icons/chat/IconCopy.vue';
+import PopoverBase from '../../../components/chat/common/popover/PopoverBase.vue';
+import { userHistory } from '../../../utils/chat/store/user';
 dayjs.extend(utc);
 dayjs.extend(timezone);
 const props = withDefaults(defineProps(), {});
@@ -43,6 +47,33 @@ const callTitle = computed(() => {
     }
     return '';
 });
+const popoverContent = computed(() => {
+    let result = [];
+    if (props.message?.is_call != 1) {
+        result.unshift({
+            icon: IconCopy,
+            title: 'Copy',
+            disabled: !userHistory.value?.appointment?.length,
+            click: () => {
+                copyToClipboard(props.message.message ?? '');
+                popoverOpen.value = false;
+            }
+        });
+        if (props.isMyMessage) {
+            result.unshift({
+                icon: IconResend,
+                title: 'Resend',
+                disabled: false,
+                click: () => {
+                    emit('resend');
+                    popoverOpen.value = false;
+                }
+            });
+        }
+    }
+    return result;
+});
+const popoverOpen = ref(false);
 const scrollBottom = () => {
     nextTick(() => {
         const eleIdContentChat = document.getElementById('content-chat');
@@ -83,6 +114,16 @@ const getStartDate = (time) => {
     }
     return getTimeLocal(time)?.format(DATE_FORMATS['DATE_FORMAT_MEDIUM']) ?? '';
 };
+const copyToClipboard = async (text) => {
+    try {
+        await navigator.clipboard.writeText(text);
+        return true;
+    }
+    catch (error) {
+        console.error('Copy failed:', error);
+        return false;
+    }
+};
 debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
 const __VLS_defaults = {};
 const __VLS_ctx = {
@@ -112,7 +153,7 @@ if (__VLS_ctx.isStartNewDate) {
     [getStartDate, message,];
 }
 __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-    ...{ class: "flex items-end mt-1 relative" },
+    ...{ class: "flex items-end mt-1 relative group" },
     ...{ class: ({
             'mt-2': __VLS_ctx.shouldShowAvatar,
             'flex-col justify-end  pl-[60px]': __VLS_ctx.isMyMessage,
@@ -172,7 +213,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 relative group" },
+        ...{ class: "px-3 py-2 rounded-2xl text-left w-max relative" },
         ...{ class: ({
                 'rounded-tl-[6px]': !__VLS_ctx.isChatStart && !__VLS_ctx.isMyMessage,
                 'rounded-bl-[6px]': !__VLS_ctx.isChatFinished && !__VLS_ctx.isMyMessage,
@@ -189,6 +230,72 @@ if (__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending || __VLS_ctx.isMyM
     });
     // @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.popoverContent.length) {
+        // @ts-ignore
+        [popoverContent,];
+        /** @type {[typeof PopoverBase, typeof PopoverBase, ]} */ ;
+        // @ts-ignore
+        const __VLS_4 = __VLS_asFunctionalComponent(PopoverBase, new PopoverBase({
+            open: (__VLS_ctx.popoverOpen),
+            trigger: "click",
+            side: "top",
+            align: (__VLS_ctx.isMyMessage ? 'end' : 'start'),
+            ...{ class: "" },
+            triggerClass: (`absolute w-6 opacity-0 group-hover:opacity-[1] ${__VLS_ctx.isMyMessage ? '-left-6 ' : '-right-6'}`),
+            contentClass: "min-w-0 -translate-y-4 shadow-none",
+        }));
+        const __VLS_5 = __VLS_4({
+            open: (__VLS_ctx.popoverOpen),
+            trigger: "click",
+            side: "top",
+            align: (__VLS_ctx.isMyMessage ? 'end' : 'start'),
+            ...{ class: "" },
+            triggerClass: (`absolute w-6 opacity-0 group-hover:opacity-[1] ${__VLS_ctx.isMyMessage ? '-left-6 ' : '-right-6'}`),
+            contentClass: "min-w-0 -translate-y-4 shadow-none",
+        }, ...__VLS_functionalComponentArgsRest(__VLS_4));
+        const { default: __VLS_7 } = __VLS_6.slots;
+        // @ts-ignore
+        [isMyMessage, isMyMessage, popoverOpen,];
+        __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+            ...{ class: "" },
+        });
+        /** @type {[typeof IconMenuDot, ]} */ ;
+        // @ts-ignore
+        const __VLS_8 = __VLS_asFunctionalComponent(IconMenuDot, new IconMenuDot({}));
+        const __VLS_9 = __VLS_8({}, ...__VLS_functionalComponentArgsRest(__VLS_8));
+        {
+            const { content: __VLS_12 } = __VLS_6.slots;
+            __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+                ...{ class: "flex bg-chat-primary-dark text-chat-text rounded-xl py-2" },
+            });
+            for (const [item, i] of __VLS_getVForSourceType((__VLS_ctx.popoverContent))) {
+                // @ts-ignore
+                [popoverContent,];
+                __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+                    ...{ onClick: (...[$event]) => {
+                            if (!(__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending || __VLS_ctx.isMyMessage))
+                                return;
+                            if (!(__VLS_ctx.popoverContent.length))
+                                return;
+                            item.click?.();
+                        } },
+                    ...{ class: "flex items-center flex-col w-[70px] text-white text-base duration-200 cursor-pointer border-r last:border-none" },
+                    key: (i),
+                    ...{ class: ({ 'opacity-[0.3] pointer-events-none': item.disabled }) },
+                });
+                const __VLS_13 = ((item.icon));
+                // @ts-ignore
+                const __VLS_14 = __VLS_asFunctionalComponent(__VLS_13, new __VLS_13({
+                    ...{ class: "w-5 h-5" },
+                }));
+                const __VLS_15 = __VLS_14({
+                    ...{ class: "w-5 h-5" },
+                }, ...__VLS_functionalComponentArgsRest(__VLS_14));
+                (item.title);
+            }
+        }
+        var __VLS_6;
+    }
     if (__VLS_ctx.message.is_call == 1) {
         // @ts-ignore
         [message,];
@@ -203,26 +310,26 @@ if (__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending || __VLS_ctx.isMyM
             [message, PLIVO_CALL_STATUS,];
             /** @type {[typeof IconPhone, ]} */ ;
             // @ts-ignore
-            const __VLS_4 = __VLS_asFunctionalComponent(IconPhone, new IconPhone({
+            const __VLS_18 = __VLS_asFunctionalComponent(IconPhone, new IconPhone({
                 weight: (2),
                 ...{ class: "w-5 h-5 text-chat-success" },
             }));
-            const __VLS_5 = __VLS_4({
+            const __VLS_19 = __VLS_18({
                 weight: (2),
                 ...{ class: "w-5 h-5 text-chat-success" },
-            }, ...__VLS_functionalComponentArgsRest(__VLS_4));
+            }, ...__VLS_functionalComponentArgsRest(__VLS_18));
         }
         else {
             /** @type {[typeof IconPhoneCancel, ]} */ ;
             // @ts-ignore
-            const __VLS_8 = __VLS_asFunctionalComponent(IconPhoneCancel, new IconPhoneCancel({
+            const __VLS_22 = __VLS_asFunctionalComponent(IconPhoneCancel, new IconPhoneCancel({
                 weight: (2),
                 ...{ class: "w-5 h-5 text-chat-error" },
             }));
-            const __VLS_9 = __VLS_8({
+            const __VLS_23 = __VLS_22({
                 weight: (2),
                 ...{ class: "w-5 h-5 text-chat-error" },
-            }, ...__VLS_functionalComponentArgsRest(__VLS_8));
+            }, ...__VLS_functionalComponentArgsRest(__VLS_22));
         }
         __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
             ...{ class: "font-semibold" },
@@ -310,6 +417,8 @@ if (__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending || __VLS_ctx.isMyM
     }
 }
 /** @type {__VLS_StyleScopedClasses['']} */ ;
+/** @type {__VLS_StyleScopedClasses['']} */ ;
+/** @type {__VLS_StyleScopedClasses['']} */ ;
 /** @type {__VLS_StyleScopedClasses['relative']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex-center']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-chat-haze-200']} */ ;
@@ -329,6 +438,7 @@ if (__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending || __VLS_ctx.isMyM
 /** @type {__VLS_StyleScopedClasses['items-end']} */ ;
 /** @type {__VLS_StyleScopedClasses['mt-1']} */ ;
 /** @type {__VLS_StyleScopedClasses['relative']} */ ;
+/** @type {__VLS_StyleScopedClasses['group']} */ ;
 /** @type {__VLS_StyleScopedClasses['mt-2']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
 /** @type {__VLS_StyleScopedClasses['justify-end']} */ ;
@@ -345,7 +455,6 @@ if (__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending || __VLS_ctx.isMyM
 /** @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]']} */ ;
@@ -361,6 +470,25 @@ if (__VLS_ctx.message.state != __VLS_ctx.MessageState.Sending || __VLS_ctx.isMyM
 /** @type {__VLS_StyleScopedClasses['max-w-[280px]']} */ ;
 /** @type {__VLS_StyleScopedClasses['max-w-[480px]']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-chat-primary-dark']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-chat-text']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-xl']} */ ;
+/** @type {__VLS_StyleScopedClasses['py-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-[70px]']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-white']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-base']} */ ;
+/** @type {__VLS_StyleScopedClasses['duration-200']} */ ;
+/** @type {__VLS_StyleScopedClasses['cursor-pointer']} */ ;
+/** @type {__VLS_StyleScopedClasses['border-r']} */ ;
+/** @type {__VLS_StyleScopedClasses['last:border-none']} */ ;
+/** @type {__VLS_StyleScopedClasses['opacity-[0.3]']} */ ;
+/** @type {__VLS_StyleScopedClasses['pointer-events-none']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-5']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-5']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
 /** @type {__VLS_StyleScopedClasses['gap-2']} */ ;
 /** @type {__VLS_StyleScopedClasses['w-[210px]']} */ ;

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

@@ -1,5 +1,5 @@
 /// <reference types="C:/phonghq/go-chat-v2/node_modules/.vue-global-types/vue_3.5_0.d.ts" />
-import HomeHeader from '../../../chat/page/home/HomeHeader.vue';
+import HomeHeader from './header/HomeHeader.vue';
 import NewCustomer from '../../../chat/page/home/NewCustomer.vue';
 import InputChat from '../../../chat/page/home/InputChat.vue';
 import { getMessage, sendMessage, upLoadImage } from '../../../utils/chat/store/message';
@@ -138,7 +138,7 @@ const handleGetDetailReceiver = async (data) => {
     const id = props.receiverId;
     if (!data)
         return;
-    infoUser.value = { ...data, conversation_id: data.id };
+    infoUser.value = { ...data, conversation_id: data.id, id: data.receiver_id };
     // const res = (await getDetailReceiver(props.receiverId)) ?? null
     userHistory.value = null;
     customerLoading.value = true;
@@ -209,34 +209,42 @@ const handleSendMessage = async (data) => {
             formData.append('url', file_upload[0]?.url ?? '');
         }
         const res = await sendMessage(formData);
-        publishMessage(topic_plivo_chat, {
-            ...data,
-            state: MessageState.Sent,
-            attachments: file_upload
-                ? [
-                    {
-                        file_name: data.attachments[0]?.file_name ?? '',
-                        file_path: file_upload[0]?.url ?? ''
-                    }
-                ]
-                : [],
-            id: res?.message?.id,
-            is_sms: res?.message?.is_sms,
-            local_id: data?.id
-        });
-        updateMessageItem(data.id, {
-            state: MessageState.Sent,
-            id: res?.message?.id,
-            is_sms: res?.message?.is_sms
-        });
-        chatMessageRef.value?.scrollBottom();
-        publicTopicConversationUpdate({
-            message: data?.message ?? '',
-            isSendImg: !!file_upload?.length,
-            infoUser: infoUser.value,
-            is_known: props.conversation?.is_known ?? 0,
-            conversation_id: props.conversation?.id ?? 0
-        });
+        if (res?.message?.id) {
+            publishMessage(topic_plivo_chat, {
+                ...data,
+                state: MessageState.Sent,
+                attachments: file_upload
+                    ? [
+                        {
+                            file_name: data.attachments[0]?.file_name ?? '',
+                            file_path: file_upload[0]?.url ?? ''
+                        }
+                    ]
+                    : [],
+                id: res?.message?.id,
+                is_sms: res?.message?.is_sms,
+                local_id: data?.id
+            });
+            updateMessageItem(data.id, {
+                state: MessageState.Sent,
+                id: res?.message?.id,
+                is_sms: res?.message?.is_sms
+            });
+            chatMessageRef.value?.scrollBottom();
+            publicTopicConversationUpdate({
+                message: data?.message ?? '',
+                isSendImg: !!file_upload?.length,
+                infoUser: infoUser.value,
+                is_known: props.conversation?.is_known ?? 0,
+                conversation_id: props.conversation?.id ?? 0
+            });
+        }
+        else {
+            updateMessageItem(data.id, {
+                state: MessageState.Failed,
+                error: res?.messages ?? ''
+            });
+        }
     }
     catch (error) {
         console.log(error);
@@ -281,6 +289,9 @@ const reconcileAndSortMessages = (serverMessages) => {
     });
     listMessage.value = currentMessages.sort((a, b) => dayjs(b.created_at).valueOf() - dayjs(a.created_at).valueOf());
 };
+const handleResent = (message) => {
+    inputChatRef.value?.handleSendMessage('message', { message: message.message ?? '' });
+};
 const handleGetListMqtt = useDebounce(() => handleGetMessage({ is_mqtt: true }), 5000);
 const __VLS_exposed = { getData, handleGetMessage, infoUser, handleGetDetailReceiverQuickly };
 defineExpose(__VLS_exposed);
@@ -353,6 +364,7 @@ if (__VLS_ctx.infoUser) {
         const __VLS_9 = __VLS_asFunctionalComponent(ChatMessage, new ChatMessage({
             ...{ 'onScrollTop': {} },
             ...{ 'onCallBack': {} },
+            ...{ 'onResend': {} },
             ref: "chatMessageRef",
             data: (__VLS_ctx.infoUser),
             message: (__VLS_ctx.reversedList),
@@ -364,6 +376,7 @@ if (__VLS_ctx.infoUser) {
         const __VLS_10 = __VLS_9({
             ...{ 'onScrollTop': {} },
             ...{ 'onCallBack': {} },
+            ...{ 'onResend': {} },
             ref: "chatMessageRef",
             data: (__VLS_ctx.infoUser),
             message: (__VLS_ctx.reversedList),
@@ -378,10 +391,12 @@ if (__VLS_ctx.infoUser) {
             { onScrollTop: (__VLS_ctx.handleScrollTop) });
         const __VLS_15 = ({ callBack: {} },
             { onCallBack: (__VLS_ctx.call) });
+        const __VLS_16 = ({ resend: {} },
+            { onResend: (__VLS_ctx.handleResent) });
         /** @type {typeof __VLS_ctx.chatMessageRef} */ ;
-        var __VLS_16 = {};
+        var __VLS_17 = {};
         // @ts-ignore
-        [infoUser, responsive, call, reversedList, page, pageCount, isLoading, handleScrollTop, chatMessageRef,];
+        [infoUser, responsive, call, reversedList, page, pageCount, isLoading, handleScrollTop, handleResent, chatMessageRef,];
         var __VLS_11;
     }
     else if (!__VLS_ctx.isLoading) {
@@ -389,16 +404,16 @@ if (__VLS_ctx.infoUser) {
         [isLoading,];
         /** @type {[typeof NewCustomer, ]} */ ;
         // @ts-ignore
-        const __VLS_19 = __VLS_asFunctionalComponent(NewCustomer, new NewCustomer({
+        const __VLS_20 = __VLS_asFunctionalComponent(NewCustomer, new NewCustomer({
             data: (__VLS_ctx.infoUser),
             ...{ class: "grow" },
             isNew: (!__VLS_ctx.listMessage.length),
         }));
-        const __VLS_20 = __VLS_19({
+        const __VLS_21 = __VLS_20({
             data: (__VLS_ctx.infoUser),
             ...{ class: "grow" },
             isNew: (!__VLS_ctx.listMessage.length),
-        }, ...__VLS_functionalComponentArgsRest(__VLS_19));
+        }, ...__VLS_functionalComponentArgsRest(__VLS_20));
         // @ts-ignore
         [infoUser, listMessage,];
     }
@@ -412,7 +427,7 @@ if (__VLS_ctx.infoUser) {
         [receiverId, digibotId,];
         /** @type {[typeof InputChat, ]} */ ;
         // @ts-ignore
-        const __VLS_23 = __VLS_asFunctionalComponent(InputChat, new InputChat({
+        const __VLS_24 = __VLS_asFunctionalComponent(InputChat, new InputChat({
             ...{ 'onSendMessage': {} },
             ...{ 'onFocus': {} },
             data: (__VLS_ctx.infoUser),
@@ -421,7 +436,7 @@ if (__VLS_ctx.infoUser) {
             ref: "inputChatRef",
             ...{ class: "p-2 sm:p-6" },
         }));
-        const __VLS_24 = __VLS_23({
+        const __VLS_25 = __VLS_24({
             ...{ 'onSendMessage': {} },
             ...{ 'onFocus': {} },
             data: (__VLS_ctx.infoUser),
@@ -429,12 +444,12 @@ if (__VLS_ctx.infoUser) {
             conversation: (__VLS_ctx.conversation),
             ref: "inputChatRef",
             ...{ class: "p-2 sm:p-6" },
-        }, ...__VLS_functionalComponentArgsRest(__VLS_23));
-        let __VLS_26;
+        }, ...__VLS_functionalComponentArgsRest(__VLS_24));
         let __VLS_27;
-        const __VLS_28 = ({ sendMessage: {} },
+        let __VLS_28;
+        const __VLS_29 = ({ sendMessage: {} },
             { onSendMessage: (__VLS_ctx.handleSendMessage) });
-        const __VLS_29 = ({ focus: {} },
+        const __VLS_30 = ({ focus: {} },
             { onFocus: (...[$event]) => {
                     if (!(__VLS_ctx.infoUser))
                         return;
@@ -445,10 +460,10 @@ if (__VLS_ctx.infoUser) {
                     [infoUser, responsive, emit, conversation, handleSendMessage,];
                 } });
         /** @type {typeof __VLS_ctx.inputChatRef} */ ;
-        var __VLS_30 = {};
+        var __VLS_31 = {};
         // @ts-ignore
         [inputChatRef,];
-        var __VLS_25;
+        var __VLS_26;
     }
 }
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
@@ -462,7 +477,7 @@ if (__VLS_ctx.infoUser) {
 /** @type {__VLS_StyleScopedClasses['p-2']} */ ;
 /** @type {__VLS_StyleScopedClasses['sm:p-6']} */ ;
 // @ts-ignore
-var __VLS_17 = __VLS_16, __VLS_31 = __VLS_30;
+var __VLS_18 = __VLS_17, __VLS_32 = __VLS_31;
 const __VLS_export = (await import('vue')).defineComponent({
     setup: () => (__VLS_exposed),
     __typeEmits: {},