@bcc-code/vue-bcc-chat-ui 6.5.0 → 7.0.1

package/src/components/BccScheduledMessageIcon.vue

@@ -1,65 +0,0 @@
-<script setup lang="ts">
-import { UpdateIcon } from '@bcc-code/icons-vue';
-import { CometChatUIKitLoginListener } from '@cometchat/uikit-shared';
-import { inject, Ref } from 'vue';
-import chat from '../chat';
-import { getAccessToken } from '../chat/accessToken';
-import { getCurrentEnvironment } from '../chat/environment';
-import { ChatInstance } from '../chat/types';
-
-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 ${getAccessToken()}`
-                }
-            }).then(async (res) => {
-                if (res.ok) {
-                    schedMsgChat = await chat.getGroup(schedMsgChatUid)
-                }
-            })
-
-        }
-        if (schedMsgChat) {
-            chatInstance.value.scheduledMessageChat = schedMsgChat
-            chatInstance.value.decoyAttachment = chatInstance.value.captionedAttachment
-            chatInstance.value.captionedAttachment = null
-            chatInstance.value.replyToMessage = null
-            chatInstance.value.showScheduledMessagesChat = true
-            chatInstance.value.userInput = document.querySelector<HTMLElement>(".messageinput-input")?.innerText ?? null;
-        }
-    }
-}
-</script>
-
-<template>
-    <div class="bcc-scheduled-message-icon">
-        <UpdateIcon class="update-icon-style" @click="redirectToScheduledMessagesChat()"></UpdateIcon>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-.update-icon-style {
-    height: 24px;
-    width: 24px;
-    border: none;
-    border-radius: 0;
-    color: var(--cc__primary150, #3F4669);
-    background: transparent;
-    cursor: pointer;
-    margin-right: -10px;
-}
-</style>

package/src/components/BccScheduledMessageModal.vue

@@ -1,70 +0,0 @@
-<script lang="ts" setup>
-import { BccButton, BccDialog, BccMessage } from '@bcc-code/component-library-vue';
-import { localize } from '@cometchat/uikit-resources';
-import { computed, onMounted, ref } from 'vue';
-
-const props = defineProps({
-    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>();
-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}`;
-
-    setTimeout(() => closeOnOutsideClick.value = true, 500);
-})
-
-function close() {
-    emit('close');
-}
-
-function scheduleMessage() {
-    if (isDateInFuture && !messageSent.value) {
-        emit(props.isReschedule ? 'reschedule' : 'schedule', localDateTime.value)
-        messageSent.value = true;
-    }
-}
-</script>
-
-<template>
-    <BccDialog class="modal" :header="title" :visible="true" modal @hide="close()"
-        :dismissableMask="closeOnOutsideClick" :closable="true">
-        <div class="flex flex-col w-full">
-            <div class="flex w-full items-center justify-between">
-                <input class="bcc-input text-right justify-end" type="date" v-model="dateInput" required />
-                <p class="mx-2">{{ localize("AT") }}</p>
-                <input class="bcc-input text-right justify-end" type="time" v-model="timeInput" required />
-            </div>
-            <BccMessage class="mt-2" v-if="!isDateInFuture" severity="error">
-                {{ localize("ERROR_DATE_IN_FUTURE") }}
-            </BccMessage>
-        </div>
-
-        <template #footer>
-            <BccButton class="button" :label="localize('SCHEDULE_MESSAGE')" :disabled="messageSent" @click="scheduleMessage()" />
-        </template>
-    </BccDialog>
-</template>

package/src/components/BccScheduledMessages.vue

@@ -1,125 +0,0 @@
-<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, nextTick, onMounted, onUnmounted, ref, Ref, watchEffect } from "vue";
-import { ChatInstance } from "../chat/types";
-import { localize } from "@cometchat/uikit-resources";
-import { BccMessage } from "@bcc-code/component-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() {
-    if (chatInstance?.value) {
-        chatInstance.value.userInput = document.querySelector('.messageinput-input')?.innerHTML ?? null;
-        chatInstance.value.decoyAttachment = chatInstance.value.captionedAttachment
-        chatInstance.value.captionedAttachment = null
-    }
-    emit('close');
-}
-
-watchEffect(() => {
-    if (chatInstance && chatInstance?.value.captionedAttachment) {
-        messageComposerConfiguration.value.headerView = {
-            componentName: BccAttachmentBox,
-            props: {
-                captionedAttachment: chatInstance.value.captionedAttachment
-            }
-        }
-    } else {
-        messageComposerConfiguration.value.headerView = undefined;
-    }
-})
-
-onMounted(async () => {
-    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
-    }
-})
-
-onUnmounted(() => {
-    if (chatInstance) {
-        chatInstance.value.captionedAttachment = null
-        chatInstance.value.replyToMessage = null
-        chatInstance.value.scheduledMessageChat = undefined
-        chatInstance.value.showScheduledMessagesChat = false
-        chatInstance.value.showAlert = false
-        chatInstance.value.rescheduleInfo = null
-    }
-})
-
-</script>
-
-<template>
-    <div class="bcc-chat-message-list">
-        <div class="title-bar">
-            <p class="title"> {{ 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>
-            <BccMessage v-if="chatInstance!.showAlert" class="absolute top-0 w-[97%] mx-2 mt-11" icon severity="error"
-                closable @close="chatInstance!.showAlert = false">
-                {{ localize("ERROR_SENDING_SCHEDULED_MESSAGE") }}
-            </BccMessage>
-            <BccMessage v-if="chatInstance!.showRescheduleAlert" class="absolute top-0 w-[97%] mx-2 mt-11" icon severity="error"
-                closable @close="chatInstance!.showRescheduleAlert = false">
-                {{ localize("ERROR_RESCHEDULING_MESSAGE") }}
-            </BccMessage>
-        </div>
-    </div>
-</template>
-
-<style scoped>
-.title-bar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background: var(--cc__secondary, #111827);
-    padding: 0.4rem 0.6rem;
-
-
-    .title {
-        color: var(--cc__text-color);
-    }
-
-    .closeIcon {
-        width: 1.2rem;
-        cursor: pointer;
-        color: var(--cc__text-color);
-    }
-}
-
-.scheduled-list {
-    height: calc(100% - 45px) !important;
-}
-</style>

package/src/components/BccScheduledSendButton.vue

@@ -1,118 +0,0 @@
-<script setup lang="ts">
-import { SendIcon } from "@cometchat/chat-uikit-vue";
-import { localize } from "@cometchat/uikit-resources";
-import { getCurrentInstance, inject, onBeforeUnmount, onMounted, Ref, ref, watchEffect } from "vue";
-import { rescheduleMessage, sendScheduledMessage } from '../chat/scheduledMessage';
-import { ChatInstance } from '../chat/types';
-import BccScheduledMessageModal from './BccScheduledMessageModal.vue';
-
-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;
-const msgComposerProps = vueInstance?.parent?.type?.name === "CometChatMessageComposer" && vueInstance?.parent?.props;
-const showModal = ref(false);
-
-const sendButtonIconURL = SendIcon;
-const sendButtonStyle = {
-    height: "24px",
-    width: "24px",
-    border: "none",
-    borderRadius: "0",
-    buttonIconTint: "var(--cc__primary150, #57639e)",
-    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;
-});
-
-watchEffect(async () => {
-    if (chatInstance && chatInstance.value.rescheduleInfo) {
-        isReschedule.value = true;
-        showModal.value = true;
-    } else {
-        isReschedule.value = false;
-        showModal.value = false;
-    }
-})
-
-
-function openModal() {
-    const userInput = document.querySelector<HTMLElement>(".messageinput-input")?.innerText;
-    if ((userInput && userInput !== "") || msgComposerProps.headerView !== undefined) {
-        showModal.value = true;
-    }
-}
-
-function closeModal() {
-    showModal.value = false;
-    if (chatInstance) chatInstance.value.rescheduleInfo = null;
-}
-
-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();
-            }
-        });
-    }
-}
-
-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>
-
-<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()" @schedule="scheduleMessage" @reschedule="reschedule" :isReschedule="isReschedule">
-    </BccScheduledMessageModal>
-</template>