@bcc-code/vue-bcc-chat-ui 3.13.0 → 3.14.1

package/package.json

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

package/src/components/BccAttachmentBox.vue

@@ -11,7 +11,6 @@ import {
   inject,
   Ref,
   onBeforeUnmount,
-  onBeforeMount,
   onMounted,
 } from "vue";
 import { ChatInstance } from "../chat/types";
@@ -25,6 +24,7 @@ const props = defineProps({
 
 const chatInstance = inject<Ref<ChatInstance>>("chatInstance");
 const vueInstance: any = getCurrentInstance();
+const msgComposerData = vueInstance?.parent?.type?.name === "CometChatMessageComposer" && vueInstance?.parent?.setupState;
 
 const { theme } = inject("theme", { theme: ref(new CometChatTheme({})) });
 
@@ -50,8 +50,16 @@ const onMessageSend = CometChatMessageEvents.ccMessageSent.subscribe(
   }
 );
 
-onBeforeMount(() => {
-  vueInstance?.parent?.setupState?.closePreview();
+onMounted(() => {
+  if (msgComposerData) {
+    msgComposerData.inputRef.querySelector(".messageinput-input").focus()
+    if (msgComposerData.messageToBeEdited) {
+      msgComposerData.messageToBeEdited = null;
+      msgComposerData.messageText = "";
+      msgComposerData.textRef = "";
+      msgComposerData.inputRef?.emptyInputField();
+    }
+  }
 });
 
 onBeforeUnmount(() => {
@@ -59,14 +67,6 @@ onBeforeUnmount(() => {
   onMessageSend.unsubscribe();
 });
 
-onMounted(() => {
-  let inputField = document.querySelector(".messageinput-input");
-
-  if (inputField) {
-    inputField.innerHTML = props?.captionedAttachment?.caption ?? "";
-  }
-})
-
 const closeBtnIconStyle = () => {
   return {
     buttonIconTint: theme.value.palette.getAccent500(),

package/src/components/BccChatMessageList.vue

@@ -14,7 +14,7 @@ import chat from "../chat";
 import { connect, disconnect } from "../chat/connection";
 import { loggedIn } from "../chat/login";
 import { CometChatMessages } from "../chat/cometChatPatches";
-import { BaseMessage, Group, CometChat } from "@cometchat/chat-sdk-javascript";
+import { Group } from "@cometchat/chat-sdk-javascript";
 import { watchAndApplyStyle } from "../chat/styleFix";
 import {
   getMessageComposerConfiguration,
@@ -62,17 +62,6 @@ const onMessageSend = CometChatMessageEvents.ccMessageSent.subscribe(({ message,
     }
 
     (message as any)?.setMetadata(metadata);
-
-    if (chatInstance.value?.captionedAttachment?.caption && message instanceof CometChat.MediaMessage) {
-      message.setCaption(chatInstance.value.captionedAttachment.caption);
-      let inputField = document.querySelector(".messageinput-input");
-
-      if (inputField) {
-        inputField.innerHTML = "";
-      }
-      chatInstance.value.captionedAttachment = null;
-      messageComposerConfiguration.value.text = '';
-    }
   }
 });
 
@@ -104,14 +93,7 @@ watchEffect(() => {
     }
 
     messageComposerConfiguration.value.sendButtonView = {
-      componentName: BccChatSendButton,
-      props: {
-        msgComposerConfig: messageComposerConfiguration.value,
-        fileObject: chatInstance.value.captionedAttachment.fileObject,
-        receiverId: chatGroup.value?.getGuid(),
-        receiverType: "group",
-        messageType: "image"
-      }
+      componentName: BccChatSendButton
     };
   }
 });

package/src/components/BccChatSendButton.vue

@@ -1,16 +1,9 @@
 <script setup lang="ts">
 import { localize } from "@cometchat/uikit-resources";
 import { SendIcon } from "@cometchat/chat-uikit-vue";
-import { MessageComposerConfiguration } from "@cometchat/uikit-shared";
 import { sendMediaMessage } from "../chat/captionedAttachment";
-
-const props = defineProps({
-    msgComposerConfig: { type: MessageComposerConfiguration, required: true },
-    fileObject: { type: File, required: true },
-    receiverId: { type: String, required: true },
-    receiverType: { type: String, required: true },
-    messageType: { type: String, required: true }
-});
+import { ChatInstance } from "../chat/types";
+import { getCurrentInstance, inject, onBeforeUnmount, onMounted, Ref } from "vue";
 
 const sendButtonIconURL = SendIcon;
 const sendButtonStyle = {
@@ -22,16 +15,71 @@ const sendButtonStyle = {
     background: "transparent"
 }
 
-function sendMessageWithoutCaption() {
-    sendMediaMessage(props.msgComposerConfig, props.fileObject, props.receiverId, props.receiverType, props.messageType);
+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;
+
+function sendMessage() {
+    if (!msgComposerData) return false;
+    if (!chatInstance?.value.captionedAttachment?.fileObject) return false;
+    if (!msgComposerProps?.group && !msgComposerProps?.user) return false;
+
+    const receiverId = msgComposerProps?.group?.getGuid() || msgComposerProps?.user?.getUid();
+    const receiverType = msgComposerProps?.group ? "group" : "user";
+    const fileObject = chatInstance.value.captionedAttachment.fileObject;
+    const caption = msgComposerData.messageText;
+
+    const sendMessageResult = sendMediaMessage(msgComposerProps, fileObject, receiverId, receiverType, "image", caption);
+    if (sendMessageResult) {
+        msgComposerData.showSendButton = false;
+        // Clear text input
+        msgComposerData.messageText = "";
+        msgComposerData.textRef = "";
+        msgComposerData.inputRef?.emptyInputField();
+        return true;
+    }
+    return false;
+}
+
+function sendMessageOnEnter(textEnteredEvent: CustomEventInit) {
+    if (!msgComposerData) return;
+    msgComposerData.messageText = textEnteredEvent.detail.value;
+    if (sendMessage()) {
+        msgComposerData.showMentionsCountWarning = false;
+        msgComposerData.showListForMentions = false;
+    }
+}
+
+// The following will send the message when **enter is pressed** in the input box and the input box **is not empty**.
+const originalSendMessageOnEnter = msgComposerData?.sendMessageOnEnter;
+onMounted(() => {
+    if (!msgComposerData) return;
+    msgComposerData.sendMessageOnEnter = sendMessageOnEnter;
+});
+onBeforeUnmount(() => {
+    msgComposerData.sendMessageOnEnter = originalSendMessageOnEnter;
+});
+
+if (chatInstance) {
+    // Here we add an additional onKeyDown event on the input field that sends our image when pressing Enter if the input field **is empty**.
+    // We need this in addition to hooking into the "cc-text-input-entered" event because that event isn't triggered if the input field is empty.
+    const ccTextInputs = document.querySelectorAll(`.${chatInstance.value.componentId} cometchat-text-input .messageinput-input`);
+    const ccTextInput = ccTextInputs[ccTextInputs.length - 1];
+    (ccTextInput as Element & {onkeydown: Function}).onkeydown = (function(onkeydown){
+        return function(this: any, e: KeyboardEvent) {
+            if (chatInstance.value.captionedAttachment?.caption?.trim() == "" && e.keyCode === 13 && !e.shiftKey) sendMessage();
+            else if (onkeydown) return onkeydown.bind(this)(e);
+        }
+    })((ccTextInput as Element & {onkeydown: Function}).onkeydown);
 }
 
 </script>
 
 <template>
-    <div class="cc-messagecomposer-wrapper__sendbutton" ref="sendButton">
+    <div class="cc-messagecomposer-wrapper__sendbutton" ref="sendButton" :style="{ 'background': !msgComposerData || !msgComposerProps ? '#f00' : 'unset'}">
         <cometchat-button :iconURL="sendButtonIconURL" :buttonStyle="sendButtonStyle"
-            :hoverText="localize('SEND_MESSAGE')" @click=sendMessageWithoutCaption() />
+            :hoverText="localize('SEND_MESSAGE')" @click=sendMessage() />
     </div>
 </template>
 

package/src/components/BccReplyBox.vue

@@ -11,7 +11,7 @@ import {
   inject,
   Ref,
   onBeforeUnmount,
-  onBeforeMount,
+  onMounted,
 } from "vue";
 import { ChatInstance } from "../chat/types";
 import { ReplyPreviewStyle } from "../chat/replyStyle";
@@ -27,6 +27,7 @@ const props = defineProps({
 
 const chatInstance = inject<Ref<ChatInstance>>("chatInstance");
 const vueInstance: any = getCurrentInstance();
+const msgComposerData = vueInstance?.parent?.type?.name === "CometChatMessageComposer" && vueInstance?.parent?.setupState;
 
 const { theme } = inject("theme", { theme: ref(new CometChatTheme({})) });
 const previewStyle = new ReplyPreviewStyle(props.previewStyle, theme.value);
@@ -53,11 +54,21 @@ const onMessageSend = CometChatMessageEvents.ccMessageSent.subscribe(
   }
 );
 
-onBeforeMount(() => {
-  vueInstance?.parent?.setupState?.closePreview();
+onMounted(() => {
+  if (msgComposerData) {
+    msgComposerData.actionSheetRef.style.display="none";
+    msgComposerData.inputRef.querySelector(".messageinput-input").focus()
+    if (msgComposerData.messageToBeEdited) {
+      msgComposerData.messageToBeEdited = null;
+      msgComposerData.messageText = "";
+      msgComposerData.textRef = "";
+      msgComposerData.inputRef?.emptyInputField();
+    }
+  }
 });
 
 onBeforeUnmount(() => {
+  msgComposerData.actionSheetRef.style.removeProperty("display");
   onMessageEditStart.unsubscribe();
   onMessageSend.unsubscribe();
 });