@bcc-code/vue-bcc-chat-ui 3.34.0 → 3.37.0

package/package.json

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

package/src/components/BccChatMessageList.vue

@@ -40,6 +40,7 @@ const chatInstance: Ref<ChatInstance> = ref({
   decoyAttachment: null,
   showScheduledMessagesChat: false,
   showAlert: false,
+  showRescheduleAlert: false,
   userInput: null,
   rescheduleInfo: null
 });

package/src/components/BccChatMessages.vue

@@ -1,16 +1,12 @@
 <script setup lang="ts">
 import chat from "../chat";
 import { Group } from "@cometchat/chat-sdk-javascript";
-import { inject, nextTick, onMounted, onUnmounted, Ref, ref, watch, watchEffect } from 'vue';
-import { sendScheduledMessage } from '../chat/scheduledMessage';
+import { inject, nextTick, onMounted, 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 BccScheduledMessageModal from "./BccScheduledMessageModal.vue";
-import { BccAlert } from "@bcc-code/design-library-vue";
-import { localize } from "@cometchat/uikit-resources";
 import { MessageComposerConfiguration } from "@cometchat/uikit-shared";
 
 const props = defineProps({
@@ -30,11 +26,9 @@ onMounted(async () => {
     chatGroup.value = props.chatGroup
     // attachEventlisteners();
 
+    messageComposerConfiguration.value.text = chatInstance?.value.userInput ?? '';
+
     await nextTick();
-    const userInput = document.querySelector('.messageinput-input');
-    if (userInput && chatInstance?.value.userInput) {
-        userInput.innerHTML = chatInstance.value.userInput;
-    }
     if (chatInstance?.value.decoyAttachment) {
         chatInstance.value.captionedAttachment = chatInstance.value.decoyAttachment
         chatInstance.value.decoyAttachment = null

package/src/components/BccScheduledMessageModal.vue

@@ -4,7 +4,13 @@ import { localize } from '@cometchat/uikit-resources';
 import { computed, onMounted, ref } from 'vue';
 import "../style.css";
 
-const emit = defineEmits(['close', 'send']);
+const props = defineProps({
+    isReschedule: { type: Boolean, default: false }
+})
+
+const title = props.isReschedule ? localize("RESCHEDULE") : localize("SCHEDULE_MESSAGE")
+
+const emit = defineEmits(['close', 'schedule', 'reschedule']);
 
 const dateInput = ref<string>();
 const timeInput = ref<string>();
@@ -14,8 +20,6 @@ const localDateTime = computed<string>(() => {
     return new Date(dateInput.value + "T" + timeInput.value).toISOString()
 })
 
-const title = ref(localize("SCHEDULE_MESSAGE"));
-
 const isDateInFuture = computed<boolean>(() => {
     if (dateInput.value === '' || timeInput.value === '') return false
     return new Date(localDateTime.value) > new Date();
@@ -37,14 +41,14 @@ function close() {
 
 function scheduleMessage() {
     if (isDateInFuture && !messageSent.value) {
-        emit('send', localDateTime.value)
+        emit(props.isReschedule ? 'reschedule' : 'schedule', localDateTime.value)
         messageSent.value = true;
     }
 }
 </script>
 
 <template>
-    <BccModal class="modal" :title=title :open="true" @close="close()" :closeButton="true">
+    <BccModal class="modal" :title="title" :open="true" @close="close()" :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>

package/src/components/BccScheduledMessages.vue

@@ -65,6 +65,7 @@ onUnmounted(() => {
         chatInstance.value.scheduledMessageChat = undefined
         chatInstance.value.showScheduledMessagesChat = false
         chatInstance.value.showAlert = false
+        chatInstance.value.rescheduleInfo = null
     }
 })
 
@@ -90,6 +91,10 @@ onUnmounted(() => {
                 :open="chatInstance!.showAlert" @close="chatInstance!.showAlert = false">
                 {{ localize("ERROR_SENDING_SCHEDULED_MESSAGE") }}
             </BccAlert>
+            <BccAlert class="absolute top-0 w-[97%] mx-2 mt-11" icon closeButton context="danger"
+                :open="chatInstance!.showRescheduleAlert" @close="chatInstance!.showRescheduleAlert = false">
+                {{ localize("ERROR_RESCHEDULING_MESSAGE") }}
+            </BccAlert>
         </div>
     </div>
 </template>

package/src/components/BccScheduledSendButton.vue

@@ -10,6 +10,8 @@ const props = defineProps({
     chatUid: { type: String, required: true }
 })
 
+const isReschedule = ref<boolean>(false);
+
 const chatInstance = inject<Ref<ChatInstance>>("chatInstance");
 const vueInstance: any = getCurrentInstance();
 const msgComposerData = vueInstance?.parent?.type?.name === "CometChatMessageComposer" && vueInstance?.parent?.setupState;
@@ -53,8 +55,10 @@ onBeforeUnmount(() => {
 
 watchEffect(async () => {
     if (chatInstance && chatInstance.value.rescheduleInfo) {
+        isReschedule.value = true;
         showModal.value = true;
     } else {
+        isReschedule.value = false;
         showModal.value = false;
     }
 })
@@ -74,22 +78,32 @@ function closeModal() {
 
 function scheduleMessage(scheduleDate?: string) {
     if (scheduleDate && chatInstance) {
-        if (chatInstance.value.rescheduleInfo) {
-            rescheduleMessage(scheduleDate, props.chatUid, chatInstance.value.rescheduleInfo.rescheduleMuid, chatInstance.value.rescheduleInfo.messageId)
-        } else {
-            sendScheduledMessage(scheduleDate, props.chatUid, chatInstance).then((msgSuccessful) => {
-                if (!msgSuccessful) {
-                    showModal.value = false
-                    chatInstance.value.showAlert = true
-                    setTimeout(() => chatInstance.value.showAlert = false, 5000)
-                } else {
-                    showModal.value = false
-                    msgComposerData.messageText = "";
-                    msgComposerData.textRef = "";
-                    msgComposerData.inputRef?.emptyInputField();
-                }
-            });
-        }
+        sendScheduledMessage(scheduleDate, props.chatUid, chatInstance).then((msgSuccessful) => {
+            if (!msgSuccessful) {
+                showModal.value = false
+                chatInstance.value.showAlert = true
+                setTimeout(() => chatInstance.value.showAlert = false, 5000)
+            } else {
+                showModal.value = false
+                msgComposerData.messageText = "";
+                msgComposerData.textRef = "";
+                msgComposerData.inputRef?.emptyInputField();
+            }
+        });
+    }
+}
+
+function reschedule(scheduleDate?: string) {
+    if (scheduleDate && chatInstance && chatInstance.value.rescheduleInfo) {
+        rescheduleMessage(scheduleDate, props.chatUid, chatInstance.value.rescheduleInfo.rescheduleMuid, chatInstance.value.rescheduleInfo.messageId).then((successful) => {
+            if (!successful) {
+                showModal.value = false
+                chatInstance.value.showRescheduleAlert = true
+                setTimeout(() => chatInstance.value.showRescheduleAlert = false, 5000)
+            } else {
+                showModal.value = false
+            }
+        })
     }
 }
 </script>
@@ -99,5 +113,6 @@ function scheduleMessage(scheduleDate?: string) {
         <cometchat-button :iconURL="sendButtonIconURL" :buttonStyle="sendButtonStyle"
             :hoverText="localize('SCHEDULE_MESSAGE')" @click="sendMessage()" />
     </div>
-    <BccScheduledMessageModal v-if="showModal" @close="closeModal()" @send="scheduleMessage"></BccScheduledMessageModal>
+    <BccScheduledMessageModal v-if="showModal" @close="closeModal()" @schedule="scheduleMessage" @reschedule="reschedule" :isReschedule="isReschedule">
+    </BccScheduledMessageModal>
 </template>