@bcc-code/vue-bcc-chat-ui 4.4.6 → 4.4.8

package/package.json

@@ -2,7 +2,7 @@
   "name": "@bcc-code/vue-bcc-chat-ui",
   "author": "bcc-code",
   "license": "Apache-2.0",
-  "version": "4.4.6",
+  "version": "4.4.8",
   "type": "module",
   "private": false,
   "files": [
@@ -51,7 +51,7 @@
     "vue": "^3.4.38"
   },
   "dependencies": {
-    "@bcc-code/design-library-vue": "^2.6.3",
+    "@bcc-code/design-library-vue": "^2.9.2",
     "@bcc-code/icons-vue": "^1.4.0",
     "@cometchat/chat-sdk-javascript": "4.0.10",
     "@cometchat/chat-uikit-vue": "4.3.17",

package/src/components/BccChatMessages.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
 import chat from "../chat";
 import { Group } from "@cometchat/chat-sdk-javascript";
-import { computed, inject, nextTick, onMounted, Ref, ref, watch, watchEffect } from 'vue';
+import { computed, inject, nextTick, onMounted, onUnmounted, Ref, ref, watch, watchEffect } from 'vue';
 import { ChatInstance } from '../chat/types';
 import BccAttachmentBox from "./BccAttachmentBox.vue";
 import BccChatSendButton from "./BccChatSendButton.vue";
 import { getMessageComposerConfiguration, getMessageListConfiguration, getThreadedMessagesConfiguration } from "../chat/uiKit";
 import { CometChatMessages } from "../chat/cometChatPatches";
 import { MessageComposerConfiguration } from "@cometchat/uikit-shared";
+import { sendScheduledMessage } from "../chat/scheduledMessage";
+import BccScheduledMessageModal from "./BccScheduledMessageModal.vue";
+import { BccAlert } from "@bcc-code/design-library-vue";
+import { localize } from "@cometchat/uikit-resources";
 
 const props = defineProps({
     chatUid: { type: String, required: true },
@@ -27,7 +31,7 @@ threadedMessagesConfiguration.messageComposerConfiguration = getThreadedMessageC
 
 onMounted(async () => {
     chatGroup.value = props.chatGroup
-    // attachEventlisteners();
+    attachEventlisteners();
 
     messageComposerConfiguration.value.text = chatInstance?.value.userInput ?? '';
 
@@ -38,9 +42,9 @@ onMounted(async () => {
     }
 })
 
-// onUnmounted(() => {
-//     detachEventlisteners();
-// })
+onUnmounted(() => {
+    detachEventlisteners();
+})
 
 watch(() => props.chatGroup,
     (group) => {
@@ -63,8 +67,8 @@ watchEffect(() => {
                 chatUid: props.chatUid
             }
         };
-        // detachEventlisteners()
-        // attachEventlisteners()
+        detachEventlisteners()
+        attachEventlisteners()
     } else {
         if (chatInstance && chatInstance.value.replyToMessage) {
             messageComposerConfiguration.value.headerView = {
@@ -87,91 +91,91 @@ function getThreadedMessageComposerConfig(): MessageComposerConfiguration {
 }
 
 // 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;
-//     }
-// }
-
-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)
-//             }
-//         })
-//     }
-// }
+
+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 showAlert = ref<boolean>(false);
+
+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;
+    }
+}
+
+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;
@@ -198,11 +202,11 @@ function isParticipant(): boolean {
             <span v-if="isOffline">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" :closeOnOutsideClick="false">
         </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

@@ -1,14 +1,15 @@
 <script lang="ts" setup>
 import { BccButton, BccFormMessage, BccModal } from '@bcc-code/design-library-vue';
 import { localize } from '@cometchat/uikit-resources';
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 
 const props = defineProps({
-    isReschedule: { type: Boolean, default: false }
+    isReschedule: { type: Boolean, default: false },
+    closeOnOutsideClick: { type: Boolean, default: true }
 })
 
 const title = props.isReschedule ? localize("RESCHEDULE") : localize("SCHEDULE_MESSAGE")
-
+const closeOnOutsideClick = ref<boolean>(props.closeOnOutsideClick);
 const emit = defineEmits(['close', 'schedule', 'reschedule']);
 
 const dateInput = ref<string>();
@@ -32,6 +33,8 @@ onMounted(() => {
     const hours = String(now.getHours()).padStart(2, '0');
     const minutes = String(now.getMinutes()).padStart(2, '0');
     timeInput.value = `${hours}:${minutes}`;
+
+    setTimeout(() => closeOnOutsideClick.value = true, 500);
 })
 
 function close() {
@@ -47,11 +50,12 @@ function scheduleMessage() {
 </script>
 
 <template>
-    <BccModal class="modal" :title="title" :open="true" @close="close()" :closeButton="true">
+    <BccModal class="modal" :title="title" :open="true" @close="close()" :closeOnOutsideClick="closeOnOutsideClick"
+        :closeButton="true">
         <div class="flex flex-col w-full">
             <div class="flex flex-row w-full justify-between">
                 <input class="input" type="date" v-model="dateInput" required>
-                <p class="at">at</p>
+                <p class="at">{{ localize("AT") }}</p>
                 <input class="input" type="time" v-model="timeInput" required>
             </div>
             <BccFormMessage class="text-center mt-2 mb-0 text-red-500" v-if="!isDateInFuture" state="error">{{