@phonghq/go-chat 1.0.11 → 1.0.13

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

@@ -17,6 +17,7 @@ import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import { useDigibot } from '../../../composable/useDigibot';
 import { TIME_ZONE_UTC } from '../../../constant/datetime';
+import IconAiCheck from '../../../assets/icons/IconAiCheck.vue';
 dayjs.extend(updateLocale);
 dayjs.extend(relativeTime);
 dayjs.extend(utc);
@@ -92,7 +93,6 @@ const mqttMessageHandler = (topic, data) => {
         if (index != -1) {
             listConversations.value.splice(index, 1);
         }
-        console.log(hasChatBox);
         if (hasChatBox > -1) {
             listConversations.value.splice(1, 0, data);
         }
@@ -131,10 +131,12 @@ const getData = async (data, option) => {
             await nextTick();
         }
         listConversations.value.push(...(res?.items ?? []));
-        console.log(listConversations.value);
         checkHasReceiveId();
         params.value.page = res?._meta?.currentPage || 1;
         pageCount = res?._meta?.pageCount || 1;
+        if (option?.reset) {
+            getAllList();
+        }
     }
     catch (error) {
         console.error(error);
@@ -143,9 +145,15 @@ const getData = async (data, option) => {
         isLoadingSearch.value = false;
     }
 };
+const getAllList = async () => {
+    while (params.value.page < pageCount && !scrollEventRef.value?.canScroll()) {
+        let page = params.value.page + 1;
+        await getData({ page });
+    }
+};
 const checkHasReceiveId = () => {
     const hasReceiveId = listConversations.value?.some((e) => e.receiver_id === receiver_id.value && receiver_id.value);
-    if (props.response == 'tablet') {
+    if (props.responsive == 'tablet') {
         if (!hasReceiveId && listConversations.value?.length)
             emit('selectReceiver', listConversations.value[0]);
     }
@@ -182,7 +190,7 @@ const getTimeFromNow = (data) => {
     return data ?? '';
 };
 getData({}, { reset: true });
-const __VLS_exposed = { handleReadMessage };
+const __VLS_exposed = { handleReadMessage, listConversations };
 defineExpose(__VLS_exposed);
 debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
 const __VLS_modelEmit = defineEmits();
@@ -208,13 +216,13 @@ __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
 const __VLS_0 = __VLS_asFunctionalComponent(InputSearch, new InputSearch({
     ...{ 'onSearch': {} },
     ...{ class: "h-[45px] grow" },
-    response: (__VLS_ctx.response),
+    responsive: (__VLS_ctx.responsive),
     modelValue: (__VLS_ctx.keyword),
 }));
 const __VLS_1 = __VLS_0({
     ...{ 'onSearch': {} },
     ...{ class: "h-[45px] grow" },
-    response: (__VLS_ctx.response),
+    responsive: (__VLS_ctx.responsive),
     modelValue: (__VLS_ctx.keyword),
 }, ...__VLS_functionalComponentArgsRest(__VLS_0));
 let __VLS_3;
@@ -222,7 +230,7 @@ let __VLS_4;
 const __VLS_5 = ({ search: {} },
     { onSearch: (__VLS_ctx.handleSearch) });
 // @ts-ignore
-[response, keyword, handleSearch,];
+[responsive, keyword, handleSearch,];
 var __VLS_2;
 __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
     ...{ class: "h-[45px] w-[45px] rounded-full flex-center bg-[#C7DEFF]" },
@@ -285,10 +293,10 @@ for (const [user] of __VLS_getVForSourceType((__VLS_ctx.listConversations))) {
     });
     __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
         ...{ class: "w-full overflow-hidden flex items-center hover:bg-[#EDF5FF] cursor-pointer px-6 py-2" },
-        ...{ class: ({ 'bg-[#EDF5FF]': __VLS_ctx.receiver_id == user.receiver_id && __VLS_ctx.response == 'tablet' }) },
+        ...{ class: ({ 'bg-[#EDF5FF]': __VLS_ctx.receiver_id == user.receiver_id && __VLS_ctx.responsive == 'tablet' }) },
     });
     // @ts-ignore
-    [response, receiver_id,];
+    [responsive, receiver_id,];
     /** @type {[typeof Avatar, ]} */ ;
     // @ts-ignore
     const __VLS_24 = __VLS_asFunctionalComponent(Avatar, new Avatar({
@@ -321,6 +329,18 @@ for (const [user] of __VLS_getVForSourceType((__VLS_ctx.listConversations))) {
         ...{ class: "font-semibold" },
     });
     (user.username);
+    if (user.id == __VLS_ctx.digibotId) {
+        // @ts-ignore
+        [digibotId,];
+        /** @type {[typeof IconAiCheck, ]} */ ;
+        // @ts-ignore
+        const __VLS_28 = __VLS_asFunctionalComponent(IconAiCheck, new IconAiCheck({
+            ...{ class: "ml-2" },
+        }));
+        const __VLS_29 = __VLS_28({
+            ...{ class: "ml-2" },
+        }, ...__VLS_functionalComponentArgsRest(__VLS_28));
+    }
     if (user.unread_count) {
         __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
             ...{ class: "ml-2 bg-[#E60000] text-white text-xs font-bold px-2 py-[1px] flex-center rounded-full" },
@@ -394,6 +414,7 @@ var __VLS_17;
 /** @type {__VLS_StyleScopedClasses['items-center']} */ ;
 /** @type {__VLS_StyleScopedClasses['font-semibold']} */ ;
 /** @type {__VLS_StyleScopedClasses['ml-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['ml-2']} */ ;
 /** @type {__VLS_StyleScopedClasses['bg-[#E60000]']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-white']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-xs']} */ ;

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

@@ -136,31 +136,34 @@ for (const [item, index] of __VLS_getVForSourceType((__VLS_ctx.message))) {
                 /** @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.response == 'mobile' ? 'sm' : 'md'),
-                    ...{ class: (__VLS_ctx.response == 'mobile' ? 'translate-y-[-2px]' : '') },
+                    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.response == 'mobile' ? 'sm' : 'md'),
-                    ...{ class: (__VLS_ctx.response == 'mobile' ? 'translate-y-[-2px]' : '') },
+                    size: (__VLS_ctx.responsive == 'mobile' ? 'sm' : 'md'),
+                    ...{ class: (__VLS_ctx.responsive == 'mobile' ? 'translate-y-[-2px]' : '') },
                 }, ...__VLS_functionalComponentArgsRest(__VLS_13));
                 // @ts-ignore
-                [data, data, data, response, response,];
+                [data, data, data, responsive, responsive,];
             }
             else {
                 __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-                    ...{ class: (__VLS_ctx.response == 'mobile' ? 'w-8' : 'w-12') },
+                    ...{ class: "shrink-0" },
+                    ...{ class: (__VLS_ctx.responsive == 'mobile' ? 'w-8' : 'w-12') },
                 });
                 // @ts-ignore
-                [response,];
+                [responsive,];
             }
             __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-                ...{ class: "bg-[#E4E4E4D4] text-chat-haze-600 px-3 py-2 rounded-2xl max-w-xs" },
+                ...{ class: "bg-[#E4E4E4D4] text-chat-haze-600 px-3 py-2 rounded-2xl max-w-xs w-[75%]" },
                 ...{ class: ({
                         'rounded-tl-none': !__VLS_ctx.shouldShowAvatar(index),
                         'rounded-bl-none': !__VLS_ctx.isEndMessage(index)
@@ -192,7 +195,7 @@ for (const [item, index] of __VLS_getVForSourceType((__VLS_ctx.message))) {
     }
     else {
         __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-            ...{ class: "flex flex-col items-end mt-2" },
+            ...{ class: "flex flex-col items-end justify-end mt-2 pl-[60px]" },
             ...{ class: ({ 'mt-4': __VLS_ctx.shouldShowAvatar(index) }) },
         });
         // @ts-ignore
@@ -259,18 +262,23 @@ var __VLS_2;
 /** @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-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-[75%]']} */ ;
 /** @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]']} */ ;

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

@@ -256,7 +256,7 @@ if (__VLS_ctx.listMessage?.length) {
         data: (__VLS_ctx.infoUser),
         message: (__VLS_ctx.listMessage),
         ...{ class: "grow" },
-        response: (__VLS_ctx.response),
+        responsive: (__VLS_ctx.responsive),
         showNewCustomer: (__VLS_ctx.page >= __VLS_ctx.pageCount),
     }));
     const __VLS_8 = __VLS_7({
@@ -265,7 +265,7 @@ if (__VLS_ctx.listMessage?.length) {
         data: (__VLS_ctx.infoUser),
         message: (__VLS_ctx.listMessage),
         ...{ class: "grow" },
-        response: (__VLS_ctx.response),
+        responsive: (__VLS_ctx.responsive),
         showNewCustomer: (__VLS_ctx.page >= __VLS_ctx.pageCount),
     }, ...__VLS_functionalComponentArgsRest(__VLS_7));
     let __VLS_10;
@@ -275,7 +275,7 @@ if (__VLS_ctx.listMessage?.length) {
     /** @type {typeof __VLS_ctx.chatMessageRef} */ ;
     var __VLS_13 = {};
     // @ts-ignore
-    [infoUser, listMessage, response, page, pageCount, handleScrollTop, chatMessageRef,];
+    [infoUser, listMessage, responsive, page, pageCount, handleScrollTop, chatMessageRef,];
     var __VLS_9;
 }
 else if (!__VLS_ctx.isLoading) {

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

@@ -47,12 +47,6 @@ __VLS_asFunctionalElement(__VLS_elements.h2, __VLS_elements.h2)({
 __VLS_asFunctionalElement(__VLS_elements.img)({
     src: "../../../assets/images/icons/new-customer.png",
 });
-__VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-    ...{ class: "text-chat-haze-400 text-sm mt-1 flex items-center gap-1" },
-});
-__VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({});
-__VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({});
-__VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({});
 __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
     ...{ class: "text-chat-haze-400 text-sm mt-3 max-w-md" },
 });
@@ -69,12 +63,6 @@ __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
 /** @type {__VLS_StyleScopedClasses['font-semibold']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-chat-haze-400']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-sm']} */ ;
-/** @type {__VLS_StyleScopedClasses['mt-1']} */ ;
-/** @type {__VLS_StyleScopedClasses['flex']} */ ;
-/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
-/** @type {__VLS_StyleScopedClasses['gap-1']} */ ;
-/** @type {__VLS_StyleScopedClasses['text-chat-haze-400']} */ ;
-/** @type {__VLS_StyleScopedClasses['text-sm']} */ ;
 /** @type {__VLS_StyleScopedClasses['mt-3']} */ ;
 /** @type {__VLS_StyleScopedClasses['max-w-md']} */ ;
 const __VLS_export = (await import('vue')).defineComponent({

package/dist/test/components/chat/ScrollEvent/ScrollEvent.vue.js

@@ -133,7 +133,13 @@ const fixedScroll = () => {
     const newHeight = scrollEvent.value?.scrollHeight ?? 0;
     scrollEvent.value.scrollTop += newHeight - oldScrollHeight;
 };
-const __VLS_exposed = { hideLoading, fixedScroll };
+const canScroll = () => {
+    if (!scrollEvent.value)
+        return false;
+    const canScrollY = scrollEvent.value.scrollHeight > scrollEvent.value.clientHeight;
+    return canScrollY;
+};
+const __VLS_exposed = { hideLoading, fixedScroll, canScroll };
 defineExpose(__VLS_exposed);
 debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
 const __VLS_defaults = {};