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

package/package.json

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

package/src/components/BccChatMessageList.vue

@@ -9,7 +9,6 @@ import {
   provide,
   ref,
   watch,
-  watchEffect,
 } from "vue";
 import chat from "../chat";
 import { connect, disconnect } from "../chat/connection";
@@ -26,7 +25,8 @@ const props = defineProps({
   groupMessageGetter: {
     type: Function as PropType<(guid: string, query: string) => Promise<any>>,
     required: false,
-  },});
+  },
+});
 
 const componentId = ref(
   `component-${Math.random().toString(36).substring(2, 11)}`
@@ -40,7 +40,8 @@ const chatInstance: Ref<ChatInstance> = ref({
   decoyAttachment: null,
   showScheduledMessagesChat: false,
   showAlert: false,
-  userInput: null
+  userInput: null,
+  rescheduleInfo: null
 });
 
 provide("chatInstance", chatInstance);
@@ -72,17 +73,17 @@ watch([loggedIn, () => props.chatUid, chat.initialized, () => props.groupMessage
     }
 
     if (chatGroup.value) {
-    watchAndApplyStyle(".bcc-chat-message-list-wrapper", [
-      {
-        selector: ".cc-messagebubble-wrapper__container",
-        style: {
-          "max-width": (chatGroup.value.getMetadata() as any).isChannel ? "95%": "80%"
+      watchAndApplyStyle(".bcc-chat-message-list-wrapper", [
+        {
+          selector: ".cc-messagebubble-wrapper__container",
+          style: {
+            "max-width": (chatGroup.value.getMetadata() as any).isChannel ? "95%" : "80%"
+          }
         }
-      }
-    ])
-  }
+      ])
+    }
 
-  await chat.clearGroupChatCount(props.chatUid);
+    await chat.clearGroupChatCount(props.chatUid);
   } else if (chatGroup.value) {
     chatGroup.value = undefined;
   }
@@ -160,18 +161,18 @@ function closeScheduledMessage() {
 
 <style lang="scss">
 body {
-    background: #fff;
-    color: #000;
+  background: #fff;
+  color: #000;
 
-    @media (prefers-color-scheme: dark) {
-        background: #000;
-        color: #fff;
-    }
+  @media (prefers-color-scheme: dark) {
+    background: #000;
+    color: #fff;
+  }
 }
 
 .bcc-chat-message-list-wrapper {
-    position: relative;
-    height: 100%;
+  position: relative;
+  height: 100%;
 }
 
 /*
@@ -186,148 +187,150 @@ accent900: text in avatar
 */
 
 .bcc-chat-message-list {
-    height: 100%;
-    --cc__primary: #cfeac8;
-    --cc__background: #f3faf7;
-    --cc__secondary: white;
-    --cc__accent: #004e48;
-    --cc__accent50: rgba(62, 142, 117, 0.04);
-    --cc__accent100: #ffffff;
-    --cc__accent200: rgba(62, 142, 117, 0.15);
-    --cc__accent300: rgba(62, 142, 117, 0.24);
-    --cc__accent400: rgba(62, 142, 117, 0.33);
-    --cc__accent500: rgba(62, 142, 117, 0.46);
-    --cc__accent600: #004e48;
-    --cc__accent700: #254a40;
-    --cc__accent800: rgba(62, 142, 117, 0.82);
+  height: 100%;
+  --cc__primary: #cfeac8;
+  --cc__primary150: #004e48;
+  --cc__background: #f3faf7;
+  --cc__secondary: white;
+  --cc__accent: #004e48;
+  --cc__accent50: rgba(62, 142, 117, 0.04);
+  --cc__accent100: #ffffff;
+  --cc__accent200: rgba(62, 142, 117, 0.15);
+  --cc__accent300: rgba(62, 142, 117, 0.24);
+  --cc__accent400: rgba(62, 142, 117, 0.33);
+  --cc__accent500: rgba(62, 142, 117, 0.46);
+  --cc__accent600: #004e48;
+  --cc__accent700: #254a40;
+  --cc__accent800: rgba(62, 142, 117, 0.82);
+  --cc__accent900: #f3faf7;
+  --cc__text-color: #000;
+  --cc__link-color: #57639e;
+
+  @media (prefers-color-scheme: dark) {
+    --cc__primary: #57639e;
+    --cc__primary150: #57639e;
+    --cc__background: hsl(230, 25%, 15%);
+    --cc__secondary: #111827;
+    --cc__accent: #6274ae;
+    --cc__accent50: rgba(98, 116, 174, 0.24);
+    --cc__accent100: linear-gradient(45deg, #05070b 0%, #0c111c 100%);
+    --cc__accent200: rgba(98, 116, 174, 0.35);
+    --cc__accent300: rgba(98, 116, 174, 0.44);
+    --cc__accent400: rgba(98, 116, 174, 0.53);
+    --cc__accent500: rgba(98, 116, 174, 0.66);
+    --cc__accent600: #758abc;
+    --cc__accent700: #6274ae;
+    --cc__accent800: rgba(98, 116, 174, 0.92);
     --cc__accent900: #f3faf7;
-    --cc__text-color: #000;
-    --cc__link-color: #57639e;
-
-    @media (prefers-color-scheme: dark) {
-        --cc__primary: #57639e;
-        --cc__background: hsl(230, 25%, 15%);
-        --cc__secondary: #111827;
-        --cc__accent: #6274ae;
-        --cc__accent50: rgba(98, 116, 174, 0.24);
-        --cc__accent100: linear-gradient(45deg, #05070b 0%, #0c111c 100%);
-        --cc__accent200: rgba(98, 116, 174, 0.35);
-        --cc__accent300: rgba(98, 116, 174, 0.44);
-        --cc__accent400: rgba(98, 116, 174, 0.53);
-        --cc__accent500: rgba(98, 116, 174, 0.66);
-        --cc__accent600: #758abc;
-        --cc__accent700: #6274ae;
-        --cc__accent800: rgba(98, 116, 174, 0.92);
-        --cc__accent900: #f3faf7;
-        --cc__text-color: #fff;
-        --cc__link-color: #cfeac8;
-    }
-
-    /* 1. Wrapper for Messages component */
-    .cc-messages-wrapper {
+    --cc__text-color: #fff;
+    --cc__link-color: #cfeac8;
+  }
 
-        /* 1.1 Messages component */
-        .cc-messages-wrapper__messages {
+  /* 1. Wrapper for Messages component */
+  .cc-messages-wrapper {
 
-            /* 1.1.1 Wrapper for Messages List */
-            .cc-messages-wrapper__messages-list {
-                height: 100%;
-            }
+    /* 1.1 Messages component */
+    .cc-messages-wrapper__messages {
 
-            /* 1.1.2 Wrapper for Messages Composer */
-            .cc-messagecomposer-wrapper {
-                //padding: 0; //Use to remove side padding on composer
-            }
+      /* 1.1.1 Wrapper for Messages List */
+      .cc-messages-wrapper__messages-list {
+        height: 100%;
+      }
 
-            /* 1.1.3 Wrapper for Messages Composer Header View */
-            .cc-messagecomposer-wrapper__headerview {
-                max-height: 100%;
-                margin-bottom: 5px;
-            }
-        }
+      /* 1.1.2 Wrapper for Messages Composer */
+      .cc-messagecomposer-wrapper {
+        //padding: 0; //Use to remove side padding on composer
+      }
 
-        .cc-messagebubble-wrapper__content {
-            max-width: 100%;
-        }
+      /* 1.1.3 Wrapper for Messages Composer Header View */
+      .cc-messagecomposer-wrapper__headerview {
+        max-height: 100%;
+        margin-bottom: 5px;
+      }
+    }
 
-        .cc-messagebubble-wrapper__content>div>.bcc-message-wrapper.has-text.has-image+div>div>div:not([class]) {
-            justify-content: flex-end !important;
-            padding: 0px 8px 8px !important;
-            margin-top: -5px !important;
-            height: unset !important;
-            border-radius: unset !important;
-            line-height: unset !important;
-            position: unset !important;
-            margin-right: unset !important;
-            background: unset !important;
-        }
+    .cc-messagebubble-wrapper__content {
+      max-width: 100%;
     }
 
-    .cc-messagebubble-wrapper__container {
-        max-width: 80%;
+    .cc-messagebubble-wrapper__content>div>.bcc-message-wrapper.has-text.has-image+div>div>div:not([class]) {
+      justify-content: flex-end !important;
+      padding: 0px 8px 8px !important;
+      margin-top: -5px !important;
+      height: unset !important;
+      border-radius: unset !important;
+      line-height: unset !important;
+      position: unset !important;
+      margin-right: unset !important;
+      background: unset !important;
     }
+  }
 
-    .cc-messagebubble-wrapper__messageoptions {
-        border-radius: 8px;
+  .cc-messagebubble-wrapper__container {
+    max-width: 80%;
+  }
 
-        .cc-context-menu__top-menu {
-            border: 1px var(--cc__secondary) solid !important;
-        }
+  .cc-messagebubble-wrapper__messageoptions {
+    border-radius: 8px;
+
+    .cc-context-menu__top-menu {
+      border: 1px var(--cc__secondary) solid !important;
     }
+  }
 
-    /* 2. Message for Messages Composer when offline */
-    .bcc-chat-message-composer-offline {
-        position: relative;
-        top: -96px;
-        height: 96px;
-        width: 100%;
-        backdrop-filter: blur(4px);
-        color: var(--cc__text-color);
-        font: 700 1rem sans-serif;
-
-        /* 2.1 Text of Messages Composer offline view */
-        span {
-            width: 100%;
-            height: 100%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            border-radius: 8px 8px 0 0;
-        }
+  /* 2. Message for Messages Composer when offline */
+  .bcc-chat-message-composer-offline {
+    position: relative;
+    top: -96px;
+    height: 96px;
+    width: 100%;
+    backdrop-filter: blur(4px);
+    color: var(--cc__text-color);
+    font: 700 1rem sans-serif;
+
+    /* 2.1 Text of Messages Composer offline view */
+    span {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 8px 8px 0 0;
     }
+  }
 }
 
 .bcc-chat-message-list-offline {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font: 700 22px sans-serif;
-    color: #bcbcbc;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font: 700 22px sans-serif;
+  color: #bcbcbc;
 }
 
 .cc-messagecomposer__emojikeyboard {
-    display: none;
+  display: none;
 }
 
 // Hide emoji keyboard
 .cc-messagecomposer__emojikeyboard {
-    display: none;
+  display: none;
 }
 
 .cc-threadedmessages-wrapper__bubbleview::-webkit-scrollbar,
 .cc__message-list::-webkit-scrollbar {
-    background: transparent;
-    width: 8px;
+  background: transparent;
+  width: 8px;
 }
 
 .cc-threadedmessages-wrapper__bubbleview::-webkit-scrollbar-thumb,
 .cc__message-list::-webkit-scrollbar-thumb {
-    background: rgb(232, 229, 229);
-    border-radius: 8px;
+  background: rgb(232, 229, 229);
+  border-radius: 8px;
 }
 </style>

package/src/components/BccChatSendButton.vue

@@ -11,7 +11,7 @@ const sendButtonStyle = {
     width: "24px",
     border: "none",
     borderRadius: "0",
-    buttonIconTint: "var(--cc__accent500, rgba(98, 116, 174, 0.66))",
+    buttonIconTint: "var(--cc__primary150, #3F4669)",
     background: "transparent"
 }
 

package/src/components/BccScheduledMessageIcon.vue

@@ -56,7 +56,7 @@ async function redirectToScheduledMessagesChat() {
     width: 24px;
     border: none;
     border-radius: 0;
-    color: var(--cc__accent500, rgba(98, 116, 174, 0.66));
+    color: var(--cc__primary150, #3F4669);
     background: transparent;
     cursor: pointer;
     margin-right: -10px;

package/src/components/BccScheduledMessageModal.vue

@@ -1,26 +1,8 @@
-<template>
-    <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 w-[45%]" type="date" v-model="dateInput" required>
-                <p class="at w-[10%]">at</p>
-                <input class="input w-[45%]" 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';
+import "../style.css";
 
 const emit = defineEmits(['close', 'send']);
 
@@ -61,9 +43,29 @@ function scheduleMessage() {
 }
 </script>
 
+<template>
+    <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>
+                <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>
+
 <style lang="scss">
 :root {
     --cc__primary: #cfeac8;
+    --cc__primary150: #004e48;
     --cc__background: #f3faf7;
     --cc__secondary: white;
     --cc__accent: #004e48;
@@ -82,6 +84,7 @@ function scheduleMessage() {
 
     @media (prefers-color-scheme: dark) {
         --cc__primary: #57639e;
+        --cc__primary150: #57639e;
         --cc__background: hsl(230, 25%, 15%);
         --cc__secondary: #111827;
         --cc__accent: #6274ae;
@@ -101,31 +104,24 @@ function scheduleMessage() {
 }
 
 .modal {
-    position: fixed;
     width: 90%;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    margin-left: 5%;
+    margin-bottom: 40%;
     background-color: var(--cc__background);
     color: var(--cc__text-color);
 }
 
-.bcc-modal-content {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-}
-
-.bcc-modal-content .input {
+.input {
     background-color: var(--cc__primary);
     border-radius: 5px;
     color: var(--cc__text-color);
     height: 40px;
     padding: 5px;
     width: 45%;
+    min-width: 37%;
 }
 
-.bcc-modal-content .at {
+.at {
     width: 10%;
     text-align: center;
     margin-top: 7px;
@@ -160,5 +156,4 @@ function scheduleMessage() {
 .bcc-modal-primary-action button:hover {
     background-color: var(--cc__accent700);
 }
-
 </style>

package/src/components/BccScheduledSendButton.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { BccAlert, BccButton, BccModal } from '@bcc-code/design-library-vue';
 import { localize } from "@cometchat/uikit-resources";
-import { MessageComposerConfiguration, SendIcon } from "@cometchat/chat-uikit-vue";
-import { getCurrentInstance, inject, onBeforeUnmount, onMounted, Ref, ref } from "vue";
+import { SendIcon } from "@cometchat/chat-uikit-vue";
+import { getCurrentInstance, inject, onBeforeUnmount, onMounted, Ref, ref, watchEffect } from "vue";
 import { ChatInstance } from '../chat/types';
-import { sendScheduledMessage } from '../chat/scheduledMessage';
+import { rescheduleMessage, sendScheduledMessage } from '../chat/scheduledMessage';
 import BccScheduledMessageModal from './BccScheduledMessageModal.vue';
 
 const props = defineProps({
@@ -15,6 +14,7 @@ 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 = {
@@ -22,7 +22,7 @@ const sendButtonStyle = {
     width: "24px",
     border: "none",
     borderRadius: "0",
-    buttonIconTint: "var(--cc__accent500, rgba(98, 116, 174, 0.66))",
+    buttonIconTint: "var(--cc__primary150, #57639e)",
     background: "transparent"
 }
 
@@ -51,8 +51,14 @@ onBeforeUnmount(() => {
     msgComposerData.sendMessageOnEnter = originalSendMessageOnEnter;
 });
 
+watchEffect(async () => {
+    if (chatInstance && chatInstance.value.rescheduleInfo) {
+        showModal.value = true;
+    } else {
+        showModal.value = false;
+    }
+})
 
-const showModal = ref(false);
 
 function openModal() {
     const userInput = document.querySelector(".messageinput-input")?.innerText;
@@ -63,22 +69,27 @@ function openModal() {
 
 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();
-            }
-        });
+        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();
+                }
+            });
+        }
     }
 }
 </script>