@phonghq/go-chat 1.0.11 → 1.0.14

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

@@ -31,6 +31,8 @@ const handleScrollTop = () => {
 };
 const hideScrollEvent = () => {
     scrollEventRef.value?.hideLoading();
+};
+const fixedScroll = () => {
     scrollEventRef.value?.fixedScroll();
 };
 const getMessageStateText = (item) => {
@@ -50,7 +52,7 @@ const getMessageStateText = (item) => {
             return '';
     }
 };
-const __VLS_exposed = { scrollBottom, hideScrollEvent };
+const __VLS_exposed = { scrollBottom, hideScrollEvent, fixedScroll };
 defineExpose(__VLS_exposed);
 debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
 const __VLS_defaults = {};
@@ -136,31 +138,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-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)
@@ -192,7 +197,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
@@ -232,7 +237,7 @@ for (const [item, index] of __VLS_getVForSourceType((__VLS_ctx.message))) {
             [message, MessageState, getMessageStateText,];
             __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
                 ...{ class: "text-chat-haze-200 text-xs mt-1" },
-                ...{ class: ({ 'text-danger': item.state == __VLS_ctx.MessageState.Failed }) },
+                ...{ class: ({ '!text-chat-error': item.state == __VLS_ctx.MessageState.Failed }) },
             });
             // @ts-ignore
             [MessageState,];
@@ -259,18 +264,24 @@ 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-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]']} */ ;
@@ -283,7 +294,7 @@ var __VLS_2;
 /** @type {__VLS_StyleScopedClasses['text-chat-haze-200']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-xs']} */ ;
 /** @type {__VLS_StyleScopedClasses['mt-1']} */ ;
-/** @type {__VLS_StyleScopedClasses['text-danger']} */ ;
+/** @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/Home.vue.js

@@ -77,6 +77,7 @@ const handleScrollTop = async () => {
     page = page + 1;
     await handleGetMessage();
     chatMessageRef.value?.hideScrollEvent();
+    chatMessageRef.value?.fixedScroll();
 };
 const handleGetDetailReceiver = async (data) => {
     const id = props.receiverId;
@@ -256,7 +257,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 +266,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 +276,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 = {};