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

package/package.json

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

package/src/components/BccChatMessageList.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {
+  PropType,
   Ref,
   onBeforeMount,
   onBeforeUnmount,
@@ -8,6 +9,7 @@ import {
   provide,
   ref,
   watch,
+  watchEffect,
 } from "vue";
 import chat from "../chat";
 import { connect, disconnect } from "../chat/connection";
@@ -21,7 +23,10 @@ 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)}`
@@ -32,8 +37,10 @@ const chatInstance: Ref<ChatInstance> = ref({
   componentId: componentId,
   replyToMessage: null,
   captionedAttachment: null,
+  decoyAttachment: null,
   showScheduledMessagesChat: false,
-  showAlert: false
+  showAlert: false,
+  userInput: null
 });
 
 provide("chatInstance", chatInstance);
@@ -56,10 +63,14 @@ const onMessageSend = CometChatMessageEvents.ccMessageSent.subscribe(({ message,
   }
 });
 
-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", [
       {
@@ -158,56 +169,6 @@ body {
     }
 }
 
-.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%;

package/src/components/BccChatMessages.vue

@@ -1,7 +1,7 @@
 <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 { inject, nextTick, onMounted, onUnmounted, Ref, ref, watch, watchEffect } from 'vue';
 import { sendScheduledMessage } from '../chat/scheduledMessage';
 import { ChatInstance } from '../chat/types';
 import BccAttachmentBox from "./BccAttachmentBox.vue";
@@ -26,9 +26,19 @@ const messageListConfiguration = getMessageListConfiguration(chatInstance, chatG
 const threadedMessagesConfiguration = getThreadedMessagesConfiguration(chatGroup);
 threadedMessagesConfiguration.messageComposerConfiguration = getThreadedMessageComposerConfig();
 
-onMounted(() => {
+onMounted(async () => {
     chatGroup.value = props.chatGroup
     attachEventlisteners();
+
+    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(() => {
@@ -58,7 +68,7 @@ watchEffect(() => {
         };
         detachEventlisteners()
         attachEventlisteners()
-    } else { 
+    } else {
         if (chatInstance && chatInstance.value.replyToMessage) {
             messageComposerConfiguration.value.headerView = {
                 componentName: "bcc-reply-box",
@@ -74,7 +84,7 @@ watchEffect(() => {
 });
 
 function getThreadedMessageComposerConfig(): MessageComposerConfiguration {
-    let composerConfig = {...messageComposerConfiguration.value}
+    let composerConfig = { ...messageComposerConfiguration.value }
     composerConfig.auxilaryButtonView = undefined
     return composerConfig;
 }
@@ -88,6 +98,9 @@ function attachEventlisteners() {
             sendButton.addEventListener("pointerdown", onMouseDown);
             sendButton.addEventListener("pointerup", clearTimer);
             sendButton.addEventListener("mouseleave", clearTimer);
+            sendButton.addEventListener("touchstart", onMouseDown);
+            sendButton.addEventListener("touchend", clearTimer);
+            sendButton.addEventListener("touchcancel", clearTimer);
 
             clearInterval(interval)
         }
@@ -102,6 +115,9 @@ function detachEventlisteners() {
         sendButton.removeEventListener("pointerdown", onMouseDown);
         sendButton.removeEventListener("pointerup", clearTimer);
         sendButton.removeEventListener("mouseleave", clearTimer);
+        sendButton.removeEventListener("touchstart", onMouseDown);
+        sendButton.removeEventListener("touchend", clearTimer);
+        sendButton.removeEventListener("touchcancel", clearTimer);
     }
 }
 
@@ -175,7 +191,8 @@ const clearTimer = () => {
         </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">
+        <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>

package/src/components/BccChatSendButton.vue

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

package/src/components/BccScheduledMessageIcon.vue

@@ -34,9 +34,11 @@ async function redirectToScheduledMessagesChat() {
         }
         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(".messageinput-input")?.innerText;
         }
     }
 }
@@ -54,7 +56,7 @@ async function redirectToScheduledMessagesChat() {
     width: 24px;
     border: none;
     border-radius: 0;
-    color: #2fb5e9d1;
+    color: var(--cc__accent500, rgba(98, 116, 174, 0.66));
     background: transparent;
     cursor: pointer;
     margin-right: -10px;

package/src/components/BccScheduledMessageModal.vue

@@ -1,16 +1,18 @@
 <template>
-    <BccModal class="modal" title="Schedule Message" :open="true" @close="close()" :closeButton="true">
+    <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">
-                <input class="input" type="date" v-model="dateInput" required>
-                <p class="at">at</p>
-                <input class="input" type="time" v-model="timeInput" required>
+            <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>
+            <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>
+            <BccButton class="button" :disabled="messageSent" @click="scheduleMessage()"> {{
+                localize("SCHEDULE_MESSAGE") }}</BccButton>
         </template>
     </BccModal>
 </template>
@@ -19,6 +21,7 @@
 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>();
@@ -29,6 +32,8 @@ const localDateTime = computed<string>(() => {
     return new Date(dateInput.value + "T" + timeInput.value).toISOString()
 })
 
+const title = ref(localize("SCHEDULE_MESSAGE"));
+
 const isDateInFuture = computed<boolean>(() => {
     if (dateInput.value === '' || timeInput.value === '') return false
     return new Date(localDateTime.value) > new Date();
@@ -54,4 +59,105 @@ function scheduleMessage() {
         messageSent.value = true;
     }
 }
-</script>
+</script>
+
+<style lang="scss">
+:root {
+    --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);
+        --cc__accent900: #f3faf7;
+        --cc__text-color: #fff;
+        --cc__link-color: #cfeac8;
+    }
+}
+
+.modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    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 {
+    background-color: var(--cc__primary);
+    border-radius: 5px;
+    color: var(--cc__text-color);
+    height: 40px;
+    padding: 5px;
+    width: 45%;
+}
+
+.bcc-modal-content .at {
+    width: 10%;
+    text-align: center;
+    margin-top: 7px;
+}
+
+.bcc-modal-footer {
+    background-color: var(--cc__background);
+}
+
+.bcc-modal-actions {
+    background-color: var(--cc__background);
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+}
+
+.bcc-modal-actions .bcc-modal-secondary-action,
+.bcc-modal-primary-action {
+    width: 100%;
+    background-color: var(--cc__background);
+}
+
+.bcc-modal-secondary-action button,
+.bcc-modal-primary-action button {
+    background-color: var(--cc__accent800);
+    width: 100%;
+    border-radius: 5px;
+    margin-top: -10px;
+}
+
+.bcc-modal-secondary-action button:hover,
+.bcc-modal-primary-action button:hover {
+    background-color: var(--cc__accent700);
+}
+
+</style>

package/src/components/BccScheduledMessages.vue

@@ -4,7 +4,7 @@ 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 { inject, nextTick, onMounted, 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";
@@ -24,6 +24,11 @@ const messageComposerConfiguration = getScheduledMessagesComposerConfiguration(p
 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');
 }
 
@@ -40,6 +45,19 @@ watchEffect(() => {
     }
 })
 
+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

package/src/components/BccScheduledSendButton.vue

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