@phonghq/go-chat 1.0.42 → 1.0.44

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

@@ -9,8 +9,10 @@ import { addHandleMqttMessage, connectMqtt, publishMessage, removeHandleMqttMess
 import { TOPIC_DETAIL_CHAT, TOPIC_PLIVO_SMS } from '../../../constant/mqtt';
 import { MessageState } from '../../../constant/message';
 import { publicTopicConversationUpdate } from '../../../utils/chat/conversation';
+import { getCache, removeOldestCache, setCache } from '../../../utils/chat/cache';
 const props = withDefaults(defineProps(), {});
 const emit = defineEmits();
+const MESSAGE_STORAGE_KEY = 'chat-message-';
 const reversedList = computed(() => listMessage.value.slice().reverse());
 let page = 1;
 let pageCount = 1;
@@ -46,8 +48,9 @@ const handleDisconnectMqtt = async () => {
     removeHandleMqttMessage('chat-home-1');
 };
 const mqttMessageHandler = (topic, message) => {
-    if ((infoUser.value?.id && message?.sender_id?.toString() == infoUser.value?.id?.toString())
-        || (infoUser.value?.id && message?.receiver_id?.toString() == infoUser.value?.id?.toString())) {
+    // console.log(topic, message)
+    if ((infoUser.value?.id && message?.sender_id?.toString() == infoUser.value?.id?.toString()) ||
+        (infoUser.value?.id && message?.receiver_id?.toString() == infoUser.value?.id?.toString())) {
         const index = listMessage.value.findIndex((item) => item.id === message?.id);
         if (index < 0) {
             listMessage.value.unshift(message);
@@ -63,14 +66,23 @@ const handleGetMessage = async (option) => {
     try {
         const id = props.receiverId;
         const params = { page: option?.resetList ? 1 : page, receiver_id: props.receiverId };
+        if (params.page <= 1) {
+            const cache = getCache(MESSAGE_STORAGE_KEY + id);
+            if (cache.data) {
+                listMessage.value = cache.data ?? [];
+                chatMessageRef.value?.scrollBottom();
+            }
+        }
         let res = await getMessage(params);
         // res.items = res.items.reverse()
         page = res._meta?.currentPage || 1;
         pageCount = res._meta?.pageCount || 1;
         if (id == props.receiverId) {
-            if (option?.resetList) {
+            if (page <= 1) {
                 listMessage.value = res.items;
                 chatMessageRef.value?.scrollBottom();
+                setCache(MESSAGE_STORAGE_KEY + id, res.items);
+                removeOldestCache(8, MESSAGE_STORAGE_KEY);
             }
             else {
                 listMessage.value.push(...res.items);
@@ -165,13 +177,18 @@ const handleSendMessage = async (data) => {
         });
         updateMessageItem(data.id, { state: MessageState.Sent });
         chatMessageRef.value?.scrollBottom();
-        publicTopicConversationUpdate({ message: data?.message ?? '', isSendImg: !!file_upload?.length, infoUser: infoUser.value });
+        publicTopicConversationUpdate({
+            message: data?.message ?? '',
+            isSendImg: !!file_upload?.length,
+            infoUser: infoUser.value,
+            is_unknown: props.conversation?.is_unknown ?? 0
+        });
     }
     catch (error) {
         console.log(error);
         updateMessageItem(data.id, {
             state: MessageState.Failed,
-            error: typeof error?.message == 'string' ? error.message : ''
+            error: typeof error?.messages == 'string' ? error.messages : ''
         });
     }
 };
@@ -299,15 +316,17 @@ const __VLS_22 = __VLS_asFunctionalComponent(InputChat, new InputChat({
     ...{ 'onSendMessage': {} },
     ...{ 'onFocus': {} },
     data: (__VLS_ctx.infoUser),
+    responsive: (__VLS_ctx.responsive),
     ref: "inputChatRef",
-    ...{ class: "p-6" },
+    ...{ class: "p-2 sm:p-6" },
 }));
 const __VLS_23 = __VLS_22({
     ...{ 'onSendMessage': {} },
     ...{ 'onFocus': {} },
     data: (__VLS_ctx.infoUser),
+    responsive: (__VLS_ctx.responsive),
     ref: "inputChatRef",
-    ...{ class: "p-6" },
+    ...{ class: "p-2 sm:p-6" },
 }, ...__VLS_functionalComponentArgsRest(__VLS_22));
 let __VLS_25;
 let __VLS_26;
@@ -317,7 +336,7 @@ const __VLS_28 = ({ focus: {} },
     { onFocus: (...[$event]) => {
             __VLS_ctx.emit('inputFocus');
             // @ts-ignore
-            [infoUser, emit, handleSendMessage,];
+            [infoUser, responsive, emit, handleSendMessage,];
         } });
 /** @type {typeof __VLS_ctx.inputChatRef} */ ;
 var __VLS_29 = {};
@@ -332,7 +351,8 @@ var __VLS_24;
 /** @type {__VLS_StyleScopedClasses['grow']} */ ;
 /** @type {__VLS_StyleScopedClasses['grow']} */ ;
 /** @type {__VLS_StyleScopedClasses['grow']} */ ;
-/** @type {__VLS_StyleScopedClasses['p-6']} */ ;
+/** @type {__VLS_StyleScopedClasses['p-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['sm:p-6']} */ ;
 // @ts-ignore
 var __VLS_16 = __VLS_15, __VLS_30 = __VLS_29;
 const __VLS_export = (await import('vue')).defineComponent({

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

@@ -30,7 +30,7 @@ const handleActivePlivoSmsChange = async (is_active) => {
         loading.value = true;
         await activePlivoMode({ id: dataProfile.value?.id, is_sms: is_active ? 1 : 0 });
         if (dataProfile.value != null)
-            dataProfile.value.is_sms_active = (is_active ? 1 : 0);
+            dataProfile.value.is_sms_active = is_active ? 1 : 0;
         activePlivoSms.value = is_active;
     }
     catch (e) {
@@ -52,10 +52,10 @@ let __VLS_elements;
 let __VLS_components;
 let __VLS_directives;
 __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-    ...{ class: "px-8 pb-4 border-b border-chat-gray-5" },
+    ...{ class: "px-8 py-4 h-[96px] layout-shadow border-b border-chat-gray-5 z-10" },
 });
 __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-    ...{ class: "flex items-center gap-2" },
+    ...{ class: "flex items-center gap-2 h-full" },
 });
 if (__VLS_ctx.responsive == 'mobile') {
     // @ts-ignore
@@ -187,12 +187,16 @@ if (__VLS_ctx.data?.id && __VLS_ctx.data?.id != __VLS_ctx.digibotId.toString() &
     const __VLS_23 = __VLS_22({}, ...__VLS_functionalComponentArgsRest(__VLS_22));
 }
 /** @type {__VLS_StyleScopedClasses['px-8']} */ ;
-/** @type {__VLS_StyleScopedClasses['pb-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['py-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-[96px]']} */ ;
+/** @type {__VLS_StyleScopedClasses['layout-shadow']} */ ;
 /** @type {__VLS_StyleScopedClasses['border-b']} */ ;
 /** @type {__VLS_StyleScopedClasses['border-chat-gray-5']} */ ;
+/** @type {__VLS_StyleScopedClasses['z-10']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
 /** @type {__VLS_StyleScopedClasses['items-center']} */ ;
 /** @type {__VLS_StyleScopedClasses['gap-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['shrink-0']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
 /** @type {__VLS_StyleScopedClasses['items-center']} */ ;

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

@@ -1,4 +1,4 @@
-import IconPlus from '../../../assets/icons/IconPlus.vue';
+/// <reference types="C:/phonghq/go-chat-v2/node_modules/.vue-global-types/vue_3.5_0.d.ts" />
 import IconPlan from '../../../assets/icons/IconPlan.vue';
 import EmojiPicker from 'vue3-emoji-picker';
 import 'vue3-emoji-picker/css';
@@ -34,6 +34,7 @@ const handleSendMessage = async (type) => {
             return;
         messageContent = keyword.value;
         keyword.value = '';
+        setInputHeight(chatInputRef.value);
     }
     else if (type == 'file') {
         const file = uploadImage();
@@ -55,7 +56,7 @@ const handleSendMessage = async (type) => {
         sender_id: dataProfile.value?.id,
         status: 'read',
         attachments: attachments,
-        is_sms: dataProfile.value?.is_sms_active,
+        is_sms: dataProfile.value?.is_sms_active
     };
     emit('sendMessage', data);
 };
@@ -89,7 +90,7 @@ const handleActivePlivoSmsChange = async (is_active) => {
 const setInputHeight = (e) => {
     const el = chatInputRef.value;
     el.style.height = 'auto';
-    if (keyword.value?.replace(/\s+/g, "") == '') {
+    if (keyword.value?.replace(/\s+/g, '') == '') {
         el.style.height = 42 + 'px';
         keyword.value = '';
     }
@@ -101,6 +102,8 @@ const handleSetInputHeight = useDebounce((e) => {
     setInputHeight(e);
 }, 200);
 const handleInput = () => {
+    if (props.responsive == 'mobile') {
+    }
     emit('focus');
 };
 const clearInput = () => {
@@ -122,8 +125,7 @@ let __VLS_elements;
 let __VLS_components;
 let __VLS_directives;
 __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-    ...{ class: "z-10" },
-    ...{ style: {} },
+    ...{ class: "z-10 layout-shadow border-t border-chat-gray-5" },
 });
 __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
     ...{ class: "flex gap-2 items-end h-max" },
@@ -147,7 +149,7 @@ __VLS_asFunctionalElement(__VLS_elements.textarea)({
             // @ts-ignore
             [setInputHeight,];
         } },
-    ...{ class: "w-full min-h-11 overflow-hidden chat-input !rounded-xl pl-4 py-2 pr-[96px] border border-chat-haze-200" },
+    ...{ class: "text-[14px] sm:text-base w-full min-h-11 overflow-hidden chat-input !rounded-xl pl-4 py-2 pr-[96px] border border-chat-haze-200" },
     ref: "chatInputRef",
     rows: "1",
     placeholder: "Send Message",
@@ -157,7 +159,7 @@ __VLS_asFunctionalElement(__VLS_elements.textarea)({
 // @ts-ignore
 [keyword, chatInputRef,];
 __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-    ...{ class: "flex gap-2 absolute right-0 bottom-2" },
+    ...{ class: "flex gap-2 -translate-y-2" },
 });
 /** @type {[typeof PopoverBase, typeof PopoverBase, ]} */ ;
 // @ts-ignore
@@ -180,8 +182,11 @@ __VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
             // @ts-ignore
             [emojiOpen, emojiOpen,];
         } },
-    ...{ class: "h-11 w-10" },
+    ...{ class: "h-11 w-8" },
 });
+__VLS_asFunctionalDirective(__VLS_directives.vShow)(null, { ...__VLS_directiveBindingRestFields, value: (!(__VLS_ctx.keyword != '' && __VLS_ctx.responsive == 'mobile')) }, null, null);
+// @ts-ignore
+[keyword, responsive,];
 {
     const { content: __VLS_4 } = __VLS_2.slots;
     const __VLS_5 = {}.EmojiPicker;
@@ -229,21 +234,12 @@ const __VLS_15 = __VLS_14({
     offset: (2),
     hideSearch: true,
 }, ...__VLS_functionalComponentArgsRest(__VLS_14));
-__VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
-    ...{ onClick: (...[$event]) => {
-            __VLS_ctx.handleSendMessage('message');
-            // @ts-ignore
-            [handleSendMessage,];
-        } },
-    ...{ class: "h-11 w-10" },
-});
-/** @type {[typeof IconPlan, ]} */ ;
-// @ts-ignore
-const __VLS_18 = __VLS_asFunctionalComponent(IconPlan, new IconPlan({}));
-const __VLS_19 = __VLS_18({}, ...__VLS_functionalComponentArgsRest(__VLS_18));
 __VLS_asFunctionalElement(__VLS_elements.label, __VLS_elements.label)({
-    ...{ class: "shrink-0 cursor-pointer relative -translate-y-1" },
+    ...{ class: "cursor-pointer relative" },
 });
+__VLS_asFunctionalDirective(__VLS_directives.vShow)(null, { ...__VLS_directiveBindingRestFields, value: (!(__VLS_ctx.keyword != '' && __VLS_ctx.responsive == 'mobile')) }, null, null);
+// @ts-ignore
+[keyword, responsive,];
 __VLS_asFunctionalElement(__VLS_elements.input)({
     ...{ onChange: (__VLS_ctx.handleFileUpload) },
     type: "file",
@@ -255,23 +251,49 @@ __VLS_asFunctionalElement(__VLS_elements.input)({
 // @ts-ignore
 [handleFileUpload, refInputImage,];
 __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
-    ...{ class: "h-11 w-11 rounded-full flex-center bg-[#002E6B]" },
+    ...{ class: "h-11 w-8 flex-center" },
+});
+__VLS_asFunctionalElement(__VLS_elements.svg, __VLS_elements.svg)({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    'stroke-width': "1.5",
+    'stroke-linecap': "round",
+    'stroke-linejoin': "round",
+    ...{ class: "w-5 h-5" },
 });
-/** @type {[typeof IconPlus, ]} */ ;
+__VLS_asFunctionalElement(__VLS_elements.path)({
+    d: "M21.44 11.05l-8.49 8.49a5 5 0 01-7.07-7.07l8.49-8.49a3.5 3.5 0 014.95 4.95l-8.5 8.49a2 2 0 11-2.83-2.83l7.78-7.78",
+});
+__VLS_asFunctionalElement(__VLS_elements.button, __VLS_elements.button)({
+    ...{ onClick: (...[$event]) => {
+            __VLS_ctx.handleSendMessage('message');
+            // @ts-ignore
+            [handleSendMessage,];
+        } },
+    ...{ class: "h-11 w-11 rounded-full flex-center bg-[#002E6B] ml-2" },
+});
+/** @type {[typeof IconPlan, ]} */ ;
 // @ts-ignore
-const __VLS_22 = __VLS_asFunctionalComponent(IconPlus, new IconPlus({
-    ...{ class: "text-white" },
+const __VLS_18 = __VLS_asFunctionalComponent(IconPlan, new IconPlan({
+    color: "#fff",
 }));
-const __VLS_23 = __VLS_22({
-    ...{ class: "text-white" },
-}, ...__VLS_functionalComponentArgsRest(__VLS_22));
+const __VLS_19 = __VLS_18({
+    color: "#fff",
+}, ...__VLS_functionalComponentArgsRest(__VLS_18));
 /** @type {__VLS_StyleScopedClasses['z-10']} */ ;
+/** @type {__VLS_StyleScopedClasses['layout-shadow']} */ ;
+/** @type {__VLS_StyleScopedClasses['border-t']} */ ;
+/** @type {__VLS_StyleScopedClasses['border-chat-gray-5']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
 /** @type {__VLS_StyleScopedClasses['gap-2']} */ ;
 /** @type {__VLS_StyleScopedClasses['items-end']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-max']} */ ;
 /** @type {__VLS_StyleScopedClasses['relative']} */ ;
 /** @type {__VLS_StyleScopedClasses['grow']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-[14px]']} */ ;
+/** @type {__VLS_StyleScopedClasses['sm:text-base']} */ ;
 /** @type {__VLS_StyleScopedClasses['w-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['min-h-11']} */ ;
 /** @type {__VLS_StyleScopedClasses['overflow-hidden']} */ ;
@@ -284,28 +306,27 @@ const __VLS_23 = __VLS_22({
 /** @type {__VLS_StyleScopedClasses['border-chat-haze-200']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
 /** @type {__VLS_StyleScopedClasses['gap-2']} */ ;
-/** @type {__VLS_StyleScopedClasses['absolute']} */ ;
-/** @type {__VLS_StyleScopedClasses['right-0']} */ ;
-/** @type {__VLS_StyleScopedClasses['bottom-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['-translate-y-2']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-11']} */ ;
-/** @type {__VLS_StyleScopedClasses['w-10']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-8']} */ ;
 /** @type {__VLS_StyleScopedClasses['!w-[300px]']} */ ;
 /** @type {__VLS_StyleScopedClasses['opacity-0']} */ ;
 /** @type {__VLS_StyleScopedClasses['pointer-events-none']} */ ;
 /** @type {__VLS_StyleScopedClasses['absolute']} */ ;
-/** @type {__VLS_StyleScopedClasses['h-11']} */ ;
-/** @type {__VLS_StyleScopedClasses['w-10']} */ ;
-/** @type {__VLS_StyleScopedClasses['shrink-0']} */ ;
 /** @type {__VLS_StyleScopedClasses['cursor-pointer']} */ ;
 /** @type {__VLS_StyleScopedClasses['relative']} */ ;
-/** @type {__VLS_StyleScopedClasses['-translate-y-1']} */ ;
 /** @type {__VLS_StyleScopedClasses['hidden']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-11']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-8']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-5']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-5']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-11']} */ ;
 /** @type {__VLS_StyleScopedClasses['w-11']} */ ;
 /** @type {__VLS_StyleScopedClasses['rounded-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex-center']} */ ;
 /** @type {__VLS_StyleScopedClasses['bg-[#002E6B]']} */ ;
-/** @type {__VLS_StyleScopedClasses['text-white']} */ ;
+/** @type {__VLS_StyleScopedClasses['ml-2']} */ ;
 const __VLS_export = (await import('vue')).defineComponent({
     setup: () => (__VLS_exposed),
     __typeEmits: {},