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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@bcc-code/vue-bcc-chat-ui",
   "author": "bcc-code",
   "license": "Apache-2.0",
-  "version": "3.23.0",
+  "version": "3.24.0",
   "type": "module",
   "private": false,
   "files": [
@@ -33,18 +33,26 @@
     "vue": "^3.0.0"
   },
   "devDependencies": {
+    "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@tailwindcss/forms": "^0.5.8",
+    "@tailwindcss/typography": "^0.5.15",
     "@types/dompurify": "^3.0.5",
     "@types/markdown-it": "^14.1.2",
     "@types/node": "^20.14.9",
     "@vitejs/plugin-vue": "^5.1.3",
+    "autoprefixer": "^10.4.20",
     "path": "^0.12.7",
+    "postcss": "^8.4.44",
     "sass": "^1.77.8",
+    "tailwindcss": "^3.4.10",
     "typescript": "^5.5.4",
     "vite": "^5.4.2",
     "vite-plugin-dts": "^4.1.0",
     "vue": "^3.4.38"
   },
   "dependencies": {
+    "@bcc-code/design-library-vue": "^2.6.3",
+    "@bcc-code/icons-vue": "^1.4.0",
     "@cometchat/chat-sdk-javascript": "4.0.10",
     "@cometchat/chat-uikit-vue": "4.3.17",
     "@cometchat/uikit-elements": "4.3.17",

package/src/components/BccChatMessageList.vue

@@ -8,24 +8,16 @@ import {
   provide,
   ref,
   watch,
-  watchEffect,
 } from "vue";
 import chat from "../chat";
 import { connect, disconnect } from "../chat/connection";
 import { loggedIn } from "../chat/login";
-import { CometChatMessages } from "../chat/cometChatPatches";
 import { Group } from "@cometchat/chat-sdk-javascript";
 import { watchAndApplyStyle } from "../chat/styleFix";
-import {
-  getMessageComposerConfiguration,
-  getMessageListConfiguration,
-  getThreadedMessagesConfiguration
-} from "../chat/uiKit";
 import { ChatInstance } from "../chat/types";
 import { CometChatMessageEvents, MessageStatus } from "@cometchat/uikit-resources";
-import BccAttachmentBox from "./BccAttachmentBox.vue";
-import BccChatSendButton from "./BccChatSendButton.vue";
-
+import BccChatMessages from "./BccChatMessages.vue";
+import BccScheduledMessages from "./BccScheduledMessages.vue";
 const props = defineProps({
   chatUid: { type: String, required: true },
   senderDisplayName: { type: String, required: false },
@@ -39,13 +31,11 @@ const chatGroup = ref<Group>();
 const chatInstance: Ref<ChatInstance> = ref({
   componentId: componentId,
   replyToMessage: null,
-  captionedAttachment: null
+  captionedAttachment: null,
+  showScheduledMessagesChat: false,
+  showAlert: false
 });
 
-const messageComposerConfiguration = getMessageComposerConfiguration(chatInstance);
-const messageListConfiguration = getMessageListConfiguration(chatInstance, chatGroup);
-const threadedMessagesConfiguration = getThreadedMessagesConfiguration(chatGroup);
-threadedMessagesConfiguration.messageComposerConfiguration = messageComposerConfiguration.value;
 provide("chatInstance", chatInstance);
 
 const onMessageSend = CometChatMessageEvents.ccMessageSent.subscribe(({ message, status }) => {
@@ -66,33 +56,6 @@ const onMessageSend = CometChatMessageEvents.ccMessageSent.subscribe(({ message,
   }
 });
 
-watchEffect(() => {
-  if (chatInstance.value.captionedAttachment) {
-    messageComposerConfiguration.value.headerView = {
-      componentName: BccAttachmentBox,
-      props: {
-        captionedAttachment: chatInstance.value.captionedAttachment
-      }
-    }
-
-    messageComposerConfiguration.value.sendButtonView = {
-      componentName: BccChatSendButton
-    };
-  } else {
-    messageComposerConfiguration.value.sendButtonView = undefined;
-    if (chatInstance.value.replyToMessage) {
-      messageComposerConfiguration.value.headerView = {
-        componentName: "bcc-reply-box",
-        props: {
-          replyToMessage: chatInstance.value.replyToMessage,
-        }
-      };
-    } else {
-      messageComposerConfiguration.value.headerView = undefined;
-    }
-  }
-});
-
 watch([loggedIn, () => props.chatUid, chat.initialized], async ([_loggedIn, _chatUid, _initialized]) => {
   if (_loggedIn && _chatUid && _initialized) {
     chatGroup.value = (await chat.getGroup(props.chatUid)) ?? undefined;
@@ -118,6 +81,7 @@ onBeforeMount(() => {
   connect(componentId.value);
 });
 
+
 onMounted(() => {
   watchAndApplyStyle(".bcc-chat-message-list-wrapper", [
     {
@@ -147,16 +111,11 @@ onUnmounted(async () => {
   await disconnect(componentId.value);
 });
 
-function isChannel(): boolean {
-  return (chatGroup.value?.getMetadata() as any)?.isChannel;
-}
-
-function isParticipant(): boolean {
-  //if not part of the group return true anyway since getScope dosen't exist when not in the group
-  if (!chatGroup.value?.getHasJoined()) {
-    return true
-  }
-  return chatGroup.value?.getScope() == "participant";
+function closeScheduledMessage() {
+  chatInstance.value.captionedAttachment = null
+  chatInstance.value.replyToMessage = null
+  chatInstance.value.scheduledMessageChat = undefined
+  chatInstance.value.showScheduledMessagesChat = false;
 }
 
 </script>
@@ -171,19 +130,11 @@ function isParticipant(): boolean {
       <div>Connecting: {{chat.connecting.value}}</div>
       <div>CometChat: {{cometChatStatus}} <button @click="getCometChatStatus()">[refresh]</button></div>
     </div> -->
-    <div v-if="chatGroup" class="bcc-chat-message-list">
-      <CometChatMessages :hideMessageHeader="true" :disableSoundForMessages="true"
-        :messageComposerConfiguration="messageComposerConfiguration"
-        :messageListConfiguration="messageListConfiguration"
-        :threadedMessagesConfiguration="threadedMessagesConfiguration"
-        :hideMessageComposer="isParticipant() && isChannel()" :hideDetails="true" :group="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>
-    </div>
+    <BccChatMessages v-if="chatGroup && !chatInstance.showScheduledMessagesChat" :chatGroup="chatGroup"
+      :chatUid="props.chatUid"></BccChatMessages>
+    <BccScheduledMessages v-else-if="chatGroup && chatInstance.showScheduledMessagesChat"
+      class="bcc-scheduled-message-list" :chatGroup="chatInstance.scheduledMessageChat!"
+      :originalChatUid="props.chatUid" @close="closeScheduledMessage()"></BccScheduledMessages>
     <div v-else-if="!chat.connected.value" class="bcc-chat-message-list-offline">
       <span>Connecting...</span>
     </div>
@@ -198,18 +149,68 @@ function isParticipant(): boolean {
 
 <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;
+    }
+}
+
+.modal {
+    background-color: hsl(230, 25%, 15%);
+    color: white;
+
+    .bcc-modal-content {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+
+        .input {
+            background-color: #758abc;
+            border-radius: 5px;
+            color: white;
+            height: 40px;
+            padding: 5px;
+            width: 45%;
+        }
+
+        .at {
+            width: 10%;
+            text-align: center;
+            margin-top: 7px;
+        }
+    }
+
+    .bcc-modal-footer {
+        background-color: hsl(230, 25%, 15%);
+
+        .bcc-modal-actions {
+            background-color: hsl(230, 25%, 15%);
+            display: flex;
+            width: 100%;
+            justify-content: space-between;
+
+            .bcc-modal-secondary-action,
+            .bcc-modal-primary-action {
+                width: 100%;
+                background-color: hsl(230, 25%, 15%);
+
+                button {
+                    background-color: #2fb5e9d1 !important;
+                    width: 100%;
+                    border-radius: 5px;
+                    margin-top: -10px;
+                }
+            }
+        }
+    }
 }
 
 .bcc-chat-message-list-wrapper {
-  position: relative;
-  height: 100%;
+    position: relative;
+    height: 100%;
 }
 
 /*
@@ -224,148 +225,148 @@ 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);
-  --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);
+    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);
     --cc__accent900: #f3faf7;
-    --cc__text-color: #fff;
-    --cc__link-color: #cfeac8;
-  }
+    --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 {
+    /* 1. Wrapper for Messages component */
+    .cc-messages-wrapper {
 
-    /* 1.1 Messages component */
-    .cc-messages-wrapper__messages {
+        /* 1.1 Messages component */
+        .cc-messages-wrapper__messages {
 
-      /* 1.1.1 Wrapper for Messages List */
-      .cc-messages-wrapper__messages-list {
-        height: 100%;
-      }
+            /* 1.1.1 Wrapper for Messages List */
+            .cc-messages-wrapper__messages-list {
+                height: 100%;
+            }
 
-      /* 1.1.2 Wrapper for Messages Composer */
-      .cc-messagecomposer-wrapper {
-        //padding: 0; //Use to remove side padding on composer
-      }
+            /* 1.1.2 Wrapper for Messages Composer */
+            .cc-messagecomposer-wrapper {
+                //padding: 0; //Use to remove side padding on composer
+            }
 
-      /* 1.1.3 Wrapper for Messages Composer Header View */
-      .cc-messagecomposer-wrapper__headerview {
-        max-height: 100%;
-        margin-bottom: 5px;
-      }
-    }
+            /* 1.1.3 Wrapper for Messages Composer Header View */
+            .cc-messagecomposer-wrapper__headerview {
+                max-height: 100%;
+                margin-bottom: 5px;
+            }
+        }
 
-    .cc-messagebubble-wrapper__content {
-      max-width: 100%;
-    }
+        .cc-messagebubble-wrapper__content {
+            max-width: 100%;
+        }
 
-    .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>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__container {
-    max-width: 80%;
-  }
+    .cc-messagebubble-wrapper__container {
+        max-width: 80%;
+    }
 
-  .cc-messagebubble-wrapper__messageoptions {
-    border-radius: 8px;
+    .cc-messagebubble-wrapper__messageoptions {
+        border-radius: 8px;
 
-    .cc-context-menu__top-menu {
-      border: 1px var(--cc__secondary) solid !important;
+        .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>
+</style>

package/src/components/BccChatMessages.vue

@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import chat from "../chat";
+import { Group } from "@cometchat/chat-sdk-javascript";
+import { inject, onMounted, onUnmounted, Ref, ref, watch, watchEffect } from 'vue';
+import { sendScheduledMessage } from '../chat/scheduledMessage';
+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({
+    chatUid: { type: String, required: true },
+    chatGroup: { type: Group, required: true }
+})
+
+const chatGroup = ref<Group>();
+
+const chatInstance = inject<Ref<ChatInstance>>("chatInstance");
+const messageComposerConfiguration = getMessageComposerConfiguration(chatInstance);
+const messageListConfiguration = getMessageListConfiguration(chatInstance, chatGroup);
+const threadedMessagesConfiguration = getThreadedMessagesConfiguration(chatGroup);
+threadedMessagesConfiguration.messageComposerConfiguration = getThreadedMessageComposerConfig();
+
+onMounted(() => {
+    chatGroup.value = props.chatGroup
+    attachEventlisteners();
+})
+
+onUnmounted(() => {
+    detachEventlisteners();
+})
+
+watch(() => props.chatGroup,
+    (group) => {
+        chatGroup.value = group;
+    }
+);
+
+watchEffect(() => {
+    if (chatInstance && chatInstance.value.captionedAttachment) {
+        messageComposerConfiguration.value.headerView = {
+            componentName: BccAttachmentBox,
+            props: {
+                captionedAttachment: chatInstance.value.captionedAttachment
+            }
+        }
+
+        messageComposerConfiguration.value.sendButtonView = {
+            componentName: BccChatSendButton,
+            props: {
+                chatUid: props.chatUid
+            }
+        };
+        detachEventlisteners()
+        attachEventlisteners()
+    } else { 
+        if (chatInstance && chatInstance.value.replyToMessage) {
+            messageComposerConfiguration.value.headerView = {
+                componentName: "bcc-reply-box",
+                props: {
+                    replyToMessage: chatInstance.value.replyToMessage,
+                }
+            };
+        } else {
+            messageComposerConfiguration.value.headerView = undefined;
+        }
+        messageComposerConfiguration.value.sendButtonView = undefined;
+    }
+});
+
+function getThreadedMessageComposerConfig(): MessageComposerConfiguration {
+    let composerConfig = {...messageComposerConfiguration.value}
+    composerConfig.auxilaryButtonView = undefined
+    return composerConfig;
+}
+
+function attachEventlisteners() {
+    const interval = setInterval(() => {
+        const btns = document.querySelectorAll('.cc-messagecomposer-wrapper__sendbutton');
+        const sendButton = btns[btns.length - 1]
+
+        if (sendButton) {
+            sendButton.addEventListener("pointerdown", onMouseDown);
+            sendButton.addEventListener("pointerup", clearTimer);
+            sendButton.addEventListener("mouseleave", clearTimer);
+
+            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);
+    }
+}
+
+function isChannel(): boolean {
+    return (props.chatGroup.getMetadata() as any)?.isChannel;
+}
+
+function isParticipant(): boolean {
+    //if not part of the group return true anyway since getScope dosen't exist when not in the group
+    if (!chatGroup.value?.getHasJoined()) {
+        return true
+    }
+    return chatGroup.value?.getScope() == "participant";
+}
+
+function closeModal() {
+    showModal.value = false;
+}
+
+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)
+            }
+        })
+    }
+}
+const showModal = ref(false);
+let timerId: string | number | NodeJS.Timeout | null | undefined;
+const duration = 500;
+
+const openPopup = () => {
+    showModal.value = true;
+}
+
+const onMouseDown = () => {
+    const userInput = document.querySelector(".messageinput-input")?.innerText;
+
+    if (userInput) {
+        timerId = setTimeout(() => {
+            openPopup();
+        }, duration)
+    }
+}
+
+const clearTimer = () => {
+    if (timerId !== null) {
+        clearTimeout(timerId);
+        timerId = null;
+    }
+}
+
+</script>
+
+<template>
+    <div class="bcc-chat-message-list">
+        <CometChatMessages :hideMessageHeader="true" :disableSoundForMessages="true"
+            :messageComposerConfiguration="messageComposerConfiguration"
+            :messageListConfiguration="messageListConfiguration"
+            :threadedMessagesConfiguration="threadedMessagesConfiguration"
+            :hideMessageComposer="isParticipant() && isChannel()" :hideDetails="true" :group="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>
+        <BccScheduledMessageModal v-if="showModal" @close="closeModal()" @send="scheduleMessage">
+        </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>
+    </div>
+</template>