@bcc-code/vue-bcc-chat-ui 3.26.0 → 3.27.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@bcc-code/vue-bcc-chat-ui",
   "author": "bcc-code",
   "license": "Apache-2.0",
-  "version": "3.26.0",
+  "version": "3.27.0",
   "type": "module",
   "private": false,
   "files": [

package/src/components/BccChatMessages.vue

@@ -28,7 +28,7 @@ threadedMessagesConfiguration.messageComposerConfiguration = getThreadedMessageC
 
 onMounted(async () => {
     chatGroup.value = props.chatGroup
-    attachEventlisteners();
+    // attachEventlisteners();
 
     await nextTick();
     const userInput = document.querySelector('.messageinput-input');
@@ -41,9 +41,9 @@ onMounted(async () => {
     }
 })
 
-onUnmounted(() => {
-    detachEventlisteners();
-})
+// onUnmounted(() => {
+//     detachEventlisteners();
+// })
 
 watch(() => props.chatGroup,
     (group) => {
@@ -66,8 +66,8 @@ watchEffect(() => {
                 chatUid: props.chatUid
             }
         };
-        detachEventlisteners()
-        attachEventlisteners()
+        // detachEventlisteners()
+        // attachEventlisteners()
     } else {
         if (chatInstance && chatInstance.value.replyToMessage) {
             messageComposerConfiguration.value.headerView = {
@@ -89,37 +89,92 @@ function getThreadedMessageComposerConfig(): MessageComposerConfiguration {
     return composerConfig;
 }
 
-function attachEventlisteners() {
-    const interval = setInterval(() => {
-        const btns = document.querySelectorAll('.cc-messagecomposer-wrapper__sendbutton');
-        const sendButton = btns[btns.length - 1]
-
-        if (sendButton) {
-            sendButton.addEventListener("pointerdown", onMouseDown);
-            sendButton.addEventListener("pointerup", clearTimer);
-            sendButton.addEventListener("mouseleave", clearTimer);
-            sendButton.addEventListener("touchstart", onMouseDown);
-            sendButton.addEventListener("touchend", clearTimer);
-            sendButton.addEventListener("touchcancel", clearTimer);
+// Holding functionality temporarily disabled due to some bugs
+//
+// function attachEventlisteners() {
+//     const interval = setInterval(() => {
+//         const btns = document.querySelectorAll('.cc-messagecomposer-wrapper__sendbutton');
+//         const sendButton = btns[btns.length - 1]
+//         document.querySelector("body")?.addEventListener("contextmenu", (event) => event.preventDefault());
+
+//         if (sendButton) {
+//             sendButton.addEventListener("pointerdown", onMouseDown);
+//             sendButton.addEventListener("pointerup", clearTimer);
+//             sendButton.addEventListener("mouseleave", clearTimer);
+//             sendButton.addEventListener("contextmenu", onContextMenu);
+//             clearInterval(interval)
+//         }
+//     }, 500);
+// }
+
+// function detachEventlisteners() {
+//     const btns = document.querySelectorAll('.cc-messagecomposer-wrapper__sendbutton');
+//     const sendButton = btns[btns.length - 1]
+
+//     if (sendButton) {
+//         sendButton.removeEventListener("pointerdown", onMouseDown);
+//         sendButton.removeEventListener("pointerup", clearTimer);
+//         sendButton.removeEventListener("mouseleave", clearTimer);
+//         sendButton.removeEventListener("contextmenu", onContextMenu);
+//     }
+// }
+
+// function closeModal() {
+//     showModal.value = false;
+// }
+
+// const showModal = ref(false);
+// let timerId: string | number | NodeJS.Timeout | null | undefined;
+// const duration = 500;
+// let longPressDetected = false;
+
+// const openPopup = () => {
+//     showModal.value = true;
+// }
+
+// const onMouseDown = (event: Event) => {
+//     const userInput = document.querySelector(".messageinput-input")?.innerText;
+//     event.preventDefault();
+//     event.stopPropagation();
+//     if (userInput) {
+//         // Only handle long press when there is user input
+//         timerId = setTimeout(() => {
+//             longPressDetected = true;
+//             openPopup();
+//         }, duration); // assuming duration is 500ms for long press
+//     }
+// };
+
+// const onContextMenu = (event: Event) => {
+//     if (longPressDetected) {
+//         // Prevent context menu only when long press is detected
+//         event.preventDefault();
+//         event.stopPropagation();
+//     }
+// };
+
+// const clearTimer = (event: Event) => {
+//     event.preventDefault();
+//     event.stopPropagation();
+//     if (timerId !== null) {
+//         clearTimeout(timerId);
+//         timerId = null;
+//     }
+// }
 
-            clearInterval(interval)
-        }
-    }, 500);
-}
+const showAlert = ref<boolean>(false)
 
-function detachEventlisteners() {
-    const btns = document.querySelectorAll('.cc-messagecomposer-wrapper__sendbutton');
-    const sendButton = btns[btns.length - 1]
-
-    if (sendButton) {
-        sendButton.removeEventListener("pointerdown", onMouseDown);
-        sendButton.removeEventListener("pointerup", clearTimer);
-        sendButton.removeEventListener("mouseleave", clearTimer);
-        sendButton.removeEventListener("touchstart", onMouseDown);
-        sendButton.removeEventListener("touchend", clearTimer);
-        sendButton.removeEventListener("touchcancel", clearTimer);
-    }
-}
+// function scheduleMessage(scheduleDate?: string) {
+//     if (scheduleDate && chatInstance) {
+//         sendScheduledMessage(scheduleDate, props.chatUid, chatInstance).then((msgSuccessful) => {
+//             if (!msgSuccessful) {
+//                 showModal.value = false
+//                 showAlert.value = true
+//                 setTimeout(() => showAlert.value = false, 3000)
+//             }
+//         })
+//     }
+// }
 
 function isChannel(): boolean {
     return (props.chatGroup.getMetadata() as any)?.isChannel;
@@ -132,49 +187,6 @@ function isParticipant(): boolean {
     }
     return chatGroup.value?.getScope() == "participant";
 }
-
-function closeModal() {
-    showModal.value = false;
-}
-
-const showAlert = ref<boolean>(false)
-
-function scheduleMessage(scheduleDate?: string) {
-    if (scheduleDate && chatInstance) {
-        sendScheduledMessage(scheduleDate, props.chatUid, chatInstance).then((msgSuccessful) => {
-            if (!msgSuccessful) {
-                showModal.value = false
-                showAlert.value = true
-                setTimeout(() => showAlert.value = false, 3000)
-            }
-        })
-    }
-}
-const showModal = ref(false);
-let timerId: string | number | NodeJS.Timeout | null | undefined;
-const duration = 500;
-
-const openPopup = () => {
-    showModal.value = true;
-}
-
-const onMouseDown = () => {
-    const userInput = document.querySelector(".messageinput-input")?.innerText;
-
-    if (userInput) {
-        timerId = setTimeout(() => {
-            openPopup();
-        }, duration)
-    }
-}
-
-const clearTimer = () => {
-    if (timerId !== null) {
-        clearTimeout(timerId);
-        timerId = null;
-    }
-}
-
 </script>
 
 <template>
@@ -189,11 +201,11 @@ const clearTimer = () => {
             <span v-if="chat.onlineStatus.value === 'offline'">Waiting for network...</span>
             <span v-else>Connecting...</span>
         </div>
-        <BccScheduledMessageModal v-if="showModal" @close="closeModal()" @send="scheduleMessage">
+        <!-- <BccScheduledMessageModal v-if="showModal" @close="closeModal()" @send="scheduleMessage">
         </BccScheduledMessageModal>
         <BccAlert class="absolute top-0 w-[97%] mx-2 mt-1" icon closeButton context="danger" :open="showAlert"
             @close="showAlert = false">
             {{ localize("ERROR_SENDING_SCHEDULED_MESSAGE") }}
-        </BccAlert>
+        </BccAlert> -->
     </div>
 </template>

package/src/components/BccScheduledMessageModal.vue

@@ -102,6 +102,7 @@ function scheduleMessage() {
 
 .modal {
     position: fixed;
+    width: 90%;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);

package/src/components/BccScheduledSendButton.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { BccAlert, BccButton, BccModal } from '@bcc-code/design-library-vue';
 import { localize } from "@cometchat/uikit-resources";
-import { SendIcon } from "@cometchat/chat-uikit-vue";
+import { MessageComposerConfiguration, SendIcon } from "@cometchat/chat-uikit-vue";
 import { getCurrentInstance, inject, onBeforeUnmount, onMounted, Ref, ref } from "vue";
 import { ChatInstance } from '../chat/types';
 import { sendScheduledMessage } from '../chat/scheduledMessage';
@@ -14,7 +14,7 @@ const props = defineProps({
 const chatInstance = inject<Ref<ChatInstance>>("chatInstance");
 const vueInstance: any = getCurrentInstance();
 const msgComposerData = vueInstance?.parent?.type?.name === "CometChatMessageComposer" && vueInstance?.parent?.setupState;
-// const msgComposerProps = vueInstance?.parent?.type?.name === "CometChatMessageComposer" && vueInstance?.parent?.props;
+const msgComposerProps = vueInstance?.parent?.type?.name === "CometChatMessageComposer" && vueInstance?.parent?.props;
 
 const sendButtonIconURL = SendIcon;
 const sendButtonStyle = {
@@ -55,7 +55,10 @@ onBeforeUnmount(() => {
 const showModal = ref(false);
 
 function openModal() {
-    showModal.value = true;
+    const userInput = document.querySelector(".messageinput-input")?.innerText;
+    if ((userInput && userInput !== "") || msgComposerProps.headerView !== undefined) {
+        showModal.value = true;
+    }
 }
 
 function closeModal() {