@bcc-code/vue-bcc-chat-ui 3.23.0 → 3.25.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.25.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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {
+  PropType,
   Ref,
   onBeforeMount,
   onBeforeUnmount,
@@ -8,28 +9,23 @@ 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 },
-});
+  groupMessageGetter: {
+    type: Function as PropType<(guid: string, query: string) => Promise<any>>,
+    required: false,
+  },});
 
 const componentId = ref(
   `component-${Math.random().toString(36).substring(2, 11)}`
@@ -39,13 +35,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,37 +60,14 @@ 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]) => {
+watch([loggedIn, () => props.chatUid, chat.initialized, () => props.groupMessageGetter], async ([_loggedIn, _chatUid, _initialized, _groupMessageGetter]) => {
   if (_loggedIn && _chatUid && _initialized) {
     chatGroup.value = (await chat.getGroup(props.chatUid)) ?? undefined;
 
+    if (_groupMessageGetter && !chatGroup.value?.getHasJoined()) {
+      chat.updateGetGroupMessages(_groupMessageGetter)
+    }
+
     if (chatGroup.value) {
     watchAndApplyStyle(".bcc-chat-message-list-wrapper", [
       {
@@ -118,6 +89,7 @@ onBeforeMount(() => {
   connect(componentId.value);
 });
 
+
 onMounted(() => {
   watchAndApplyStyle(".bcc-chat-message-list-wrapper", [
     {
@@ -147,16 +119,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 +138,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 +157,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 +233,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>