@bcc-code/vue-bcc-chat-ui 3.23.0 → 3.24.0

package/src/components/BccScheduledMessageIcon.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { UpdateIcon } from '@bcc-code/icons-vue';
+import { inject, Ref } from 'vue';
+import { ChatInstance } from '../chat/types';
+import { CometChatUIKitLoginListener } from '@cometchat/uikit-shared';
+import chat from '../chat';
+import { getCurrentEnvironment } from '../chat/environment';
+
+const chatInstance = inject<Ref<ChatInstance>>("chatInstance");
+
+async function redirectToScheduledMessagesChat() {
+    let schedMsgChatUid = CometChatUIKitLoginListener.getLoggedInUser()?.getUid()
+    if (schedMsgChatUid && chatInstance) {
+        let schedMsgChat;
+        try {
+            schedMsgChat = await chat.getGroup(schedMsgChatUid);
+        } catch (error) {
+            schedMsgChat = undefined;
+        }
+        if (!schedMsgChat) {
+            const url = getCurrentEnvironment().chatApiBaseUrl + "/chats/" + schedMsgChatUid
+            await fetch(url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': "Bearer " + localStorage.getItem('at')
+                }
+            }).then(async (res) => {
+                if (res.ok) {
+                    schedMsgChat = await chat.getGroup(schedMsgChatUid)
+                }
+            })
+
+        }
+        if (schedMsgChat) {
+            chatInstance.value.scheduledMessageChat = schedMsgChat
+            chatInstance.value.captionedAttachment = null
+            chatInstance.value.replyToMessage = null
+            chatInstance.value.showScheduledMessagesChat = true
+        }
+    }
+}
+</script>
+
+<template>
+    <div class="bcc-scheduled-message-icon">
+        <UpdateIcon class="update-icon-style" @click="redirectToScheduledMessagesChat()"></UpdateIcon>
+    </div>
+</template>
+
+<style lang="scss">
+.update-icon-style {
+    height: 24px;
+    width: 24px;
+    border: none;
+    border-radius: 0;
+    color: #2fb5e9d1;
+    background: transparent;
+    cursor: pointer;
+    margin-right: -10px;
+}
+</style>

package/src/components/BccScheduledMessageModal.vue

@@ -0,0 +1,57 @@
+<template>
+    <BccModal class="modal" title="Schedule Message" :open="true" @close="close()" :closeButton="true">
+        <div class="flex flex-col w-full">
+            <div class="flex flex-row w-full">
+                <input class="input" type="date" v-model="dateInput" required>
+                <p class="at">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">{{ localize("ERROR_DATE_IN_FUTURE") }}</BccFormMessage>
+        </div>
+
+        <template #primaryAction>
+            <BccButton class="button" :disabled="messageSent" @click="scheduleMessage()"> {{ localize("SCHEDULE_MESSAGE") }}</BccButton>
+        </template>
+    </BccModal>
+</template>
+
+<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';
+const emit = defineEmits(['close', 'send']);
+
+const dateInput = ref<string>();
+const timeInput = ref<string>();
+const messageSent = ref<boolean>(false);
+
+const localDateTime = computed<string>(() => {
+    return new Date(dateInput.value + "T" + timeInput.value).toISOString()
+})
+
+const isDateInFuture = computed<boolean>(() => {
+    if (dateInput.value === '' || timeInput.value === '') return false
+    return new Date(localDateTime.value) > new Date();
+})
+
+onMounted(() => {
+    const now = new Date();
+
+    dateInput.value = now.toISOString().split('T')[0];
+    now.setHours(now.getHours() + 1); // Add 1 hour
+    const hours = String(now.getHours()).padStart(2, '0');
+    const minutes = String(now.getMinutes()).padStart(2, '0');
+    timeInput.value = `${hours}:${minutes}`;
+})
+
+function close() {
+    emit('close');
+}
+
+function scheduleMessage() {
+    if (isDateInFuture && !messageSent.value) {
+        emit('send', localDateTime.value)
+        messageSent.value = true;
+    }
+}
+</script>

package/src/components/BccScheduledMessages.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import chat from "../chat";
+import { Group } from "@cometchat/chat-sdk-javascript";
+import { CloseIcon } from "@bcc-code/icons-vue";
+import { CometChatMessages } from "../chat/cometChatPatches";
+import { getScheduledMessagesComposerConfiguration, getScheduledMessagesListConfiguration } from "../chat/uiKit";
+import { inject, onUnmounted, ref, Ref, watchEffect } from "vue";
+import { ChatInstance } from "../chat/types";
+import { localize } from "@cometchat/uikit-resources";
+import { BccAlert } from "@bcc-code/design-library-vue";
+import BccAttachmentBox from "./BccAttachmentBox.vue";
+const emit = defineEmits(['close']);
+
+const props = defineProps({
+    chatGroup: { type: Group, required: true },
+    originalChatUid: { type: String, required: true }
+})
+const chatGroup = ref<Group>();
+chatGroup.value = props.chatGroup
+const chatInstance = inject<Ref<ChatInstance>>("chatInstance");
+if (chatInstance) chatInstance.value.showAlert = false;
+
+const messageComposerConfiguration = getScheduledMessagesComposerConfiguration(props.originalChatUid, chatInstance);
+const messageListConfiguration = getScheduledMessagesListConfiguration(props.originalChatUid, chatInstance, chatGroup);
+
+function closeList() {
+    emit('close');
+}
+
+watchEffect(() => {
+    if (chatInstance && chatInstance?.value.captionedAttachment) {
+        messageComposerConfiguration.value.headerView = {
+            componentName: BccAttachmentBox,
+            props: {
+                captionedAttachment: chatInstance.value.captionedAttachment
+            }
+        }
+    } else {
+        messageComposerConfiguration.value.headerView = undefined;
+    }
+})
+
+onUnmounted(() => {
+    if (chatInstance) {
+        chatInstance.value.captionedAttachment = null
+        chatInstance.value.replyToMessage = null
+        chatInstance.value.scheduledMessageChat = undefined
+        chatInstance.value.showScheduledMessagesChat = false
+        chatInstance.value.showAlert = false
+    }
+})
+
+</script>
+
+<template>
+    <div class="bcc-chat-message-list">
+        <div class="title-bar">
+            <p class="chatName"> {{ localize("SCHEDULED_MESSAGES") }} </p>
+            <CloseIcon @click="closeList()" class="closeIcon" />
+        </div>
+        <div v-if="chatGroup" class="bcc-chat-message-list scheduled-list">
+            <CometChatMessages :hideMessageHeader="true" :disableSoundForMessages="true"
+                :messageComposerConfiguration="messageComposerConfiguration"
+                :messageListConfiguration="messageListConfiguration" :hideDetails="true" :group="props.chatGroup" />
+
+            <div v-if="chat.onlineStatus.value === 'offline' || !chat.connected.value"
+                class="bcc-chat-message-composer-offline">
+                <span v-if="chat.onlineStatus.value === 'offline'">Waiting for network...</span>
+                <span v-else>Connecting...</span>
+            </div>
+            <BccAlert class="absolute top-0 w-[97%] mx-2 mt-11" icon closeButton context="danger"
+                :open="chatInstance!.showAlert" @close="chatInstance!.showAlert = false">
+                {{ localize("ERROR_SENDING_SCHEDULED_MESSAGE") }}
+            </BccAlert>
+        </div>
+    </div>
+</template>
+
+<style>
+.title-bar {
+    display: flex;
+    background: var(--cc__accent200, #111827);
+    min-height: 40px;
+    padding: 5px;
+
+    .chatName {
+        width: 92%;
+        font-size: large;
+        vertical-align: middle;
+        margin: 3px
+    }
+
+    .closeIcon {
+        max-height: 35px;
+        width: 8%;
+        cursor: pointer;
+    }
+}
+
+.scheduled-list {
+    height: calc(100% - 45px) !important;
+}
+</style>

package/src/components/BccScheduledSendButton.vue

@@ -0,0 +1,89 @@
+<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 { getCurrentInstance, inject, onBeforeUnmount, onMounted, Ref, ref } from "vue";
+import { ChatInstance } from '../chat/types';
+import { sendScheduledMessage } from '../chat/scheduledMessage';
+import BccScheduledMessageModal from './BccScheduledMessageModal.vue';
+
+const props = defineProps({
+    chatUid: { type: String, required: true }
+})
+
+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 sendButtonIconURL = SendIcon;
+const sendButtonStyle = {
+    height: "24px",
+    width: "24px",
+    border: "none",
+    borderRadius: "0",
+    buttonIconTint: "#2fb5e9d1",
+    background: "transparent"
+}
+
+function sendMessage() {
+    if (msgComposerData.messageToBeEdited && msgComposerData.showPreview) {
+        msgComposerData?.customSendMethod(msgComposerData.inputRef.innerText)
+    } else {
+        openModal();
+    }
+}
+
+function sendMessageOnEnter(textEnteredEvent: CustomEventInit) {
+    if (!msgComposerData) return;
+    msgComposerData.messageText = textEnteredEvent.detail.value;
+    sendMessage()
+    msgComposerData.showMentionsCountWarning = false;
+    msgComposerData.showListForMentions = false;
+}
+
+const originalSendMessageOnEnter = msgComposerData?.sendMessageOnEnter;
+onMounted(() => {
+    if (!msgComposerData) return;
+    msgComposerData.sendMessageOnEnter = sendMessageOnEnter;
+});
+onBeforeUnmount(() => {
+    msgComposerData.sendMessageOnEnter = originalSendMessageOnEnter;
+});
+
+
+const showModal = ref(false);
+
+function openModal() {
+    showModal.value = true;
+}
+
+function closeModal() {
+    showModal.value = false;
+}
+
+function scheduleMessage(scheduleDate?: string) {
+    if (scheduleDate && chatInstance) {
+        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();
+            }
+        });
+    }
+}
+</script>
+
+<template>
+    <div class="cc-messagecomposer-wrapper__sendbutton" ref="sendButton">
+        <cometchat-button :iconURL="sendButtonIconURL" :buttonStyle="sendButtonStyle"
+            :hoverText="localize('SCHEDULE_MESSAGE')" @click="sendMessage()" />
+    </div>
+    <BccScheduledMessageModal v-if="showModal" @close="closeModal()" @send="scheduleMessage"></BccScheduledMessageModal>
+</template>