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

package/package.json

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

package/src/components/BccAttachmentBox.vue

@@ -37,6 +37,7 @@ function closePreview(_event?: MouseEvent) {
 const onMessageEditStart = CometChatMessageEvents.ccMessageEdited.subscribe(
   ({ status }) => {
     if (status === MessageStatus.inprogress) {
+      if (chatInstance) chatInstance.value.replyToMessage = null;
       closePreview();
     }
   }
@@ -54,6 +55,7 @@ onMounted(() => {
   if (msgComposerData) {
     msgComposerData.inputRef.querySelector(".messageinput-input").focus()
     if (msgComposerData.messageToBeEdited) {
+      msgComposerData.showPreview = false; // This is only used for edit message preview
       msgComposerData.messageToBeEdited = null;
       msgComposerData.messageText = "";
       msgComposerData.textRef = "";

package/src/components/BccChatMessageBubble.vue

@@ -93,7 +93,7 @@ const replyPreviewStyle = {
 </script>
 
 <template>
-	<div :style="{'display': src != null ? 'table-caption' : 'block'}">
+	<div class="bcc-message-wrapper" :class="{'has-text': text, 'has-image': src != null}" >
 		<div v-if="metadata?.replyToMessageId" class="bcc-chat-msg-bubble">
 			<div class="bcc-chat-msg-bubble--reply">
 				<BccReplyPreview
@@ -102,29 +102,46 @@ const replyPreviewStyle = {
 				/>
 			</div>
 		</div>
-		<div v-if="src != null" style="display: block; width: max-content;">
+		<div v-if="src != null" class="bcc-chat-img-msg-bubble">
 			<BccImageBubble
 				:message="message"
 				:placeholderImage="placeholderImage" 
 				:src="src"
 			/>
 		</div>
-		<div v-if="metadata && metadata.translated_message" v-html="toMarkdownHtml(metadata.translated_message)"
+		<div v-if="text && metadata && metadata.translated_message" v-html="toMarkdownHtml(metadata.translated_message)"
 			class="bcc-chat-msg-bubble bcc-chat-msg-bubble--translation" />
-		<div v-html="toMarkdownHtml(text)" class="bcc-chat-msg-bubble"
+		<div v-if="text" v-html="toMarkdownHtml(text)" class="bcc-chat-msg-bubble"
 			:class="{ 'bcc-chat-msg-bubble--translated': metadata && !!metadata.translated_message }" />
 	</div>
 </template>
 
 <style lang="scss">
+.bcc-chat-img-msg-bubble {
+	display: block;
+	width: max-content;
+	max-width: 100%;
+	margin: 0 auto;
+	border-radius: 8px;
+	padding-bottom: 8px;
+	position: relative;
+
+	&:last-child {
+		padding-bottom: 0;
+	}
+}
 .bcc-chat-msg-bubble {
-	padding: 8px 12px;
+	padding: 0 12px 8px;
 	width: auto;
 	max-width: 500px;
 	line-height: 1.2;
 	font: 400 14px Archivo, sans-serif, Inter;
 	color: var(--cc__text-color);
 
+	&:first-child {
+		padding-top: 8px;
+	}
+
 	p {
 		color: var(--cc__text-color);
 		line-height: 1.2;
@@ -197,7 +214,6 @@ const replyPreviewStyle = {
 		position: relative;
 		z-index: 0;
 		margin-top: 3px;
-		margin-bottom: -8px;
 		border-radius: 6px;
 		overflow: hidden;
 	}

package/src/components/BccChatMessageList.vue

@@ -45,6 +45,7 @@ const chatInstance: Ref<ChatInstance> = ref({
 const messageComposerConfiguration = getMessageComposerConfiguration(chatInstance);
 const messageListConfiguration = getMessageListConfiguration(chatInstance, chatGroup);
 const threadedMessagesConfiguration = getThreadedMessagesConfiguration(chatGroup);
+threadedMessagesConfiguration.messageComposerConfiguration = messageComposerConfiguration.value;
 
 provide("chatInstance", chatInstance);
 
@@ -54,7 +55,8 @@ const onMessageSend = CometChatMessageEvents.ccMessageSent.subscribe(({ message,
     let scope: string | undefined = chatGroup.value?.getScope();
 
     if (chatInstance.value.replyToMessage) {
-      metadata.replyToMessageId = chatInstance.value.replyToMessage?.getId()
+      metadata.replyToMessageId = chatInstance.value.replyToMessage?.getId();
+      chatInstance.value.replyToMessage = null;
     }
 
     if (props.senderDisplayName && (scope == "moderator" || scope == "admin")) {
@@ -66,25 +68,7 @@ const onMessageSend = CometChatMessageEvents.ccMessageSent.subscribe(({ message,
 });
 
 watchEffect(() => {
-  if (!chatInstance.value.replyToMessage) {
-    messageComposerConfiguration.value.headerView = undefined;
-  } else {
-    messageComposerConfiguration.value.headerView = {
-      componentName: "bcc-reply-box",
-      props: {
-        replyToMessage: chatInstance.value.replyToMessage,
-      }
-    }
-  }
-});
-
-watchEffect(() => {
-  if (!chatInstance.value.captionedAttachment) {
-    messageComposerConfiguration.value.headerView = undefined;
-    messageComposerConfiguration.value.sendButtonView = undefined;
-  } else {
-    chatInstance.value.captionedAttachment.caption = messageComposerConfiguration.value.text;
-
+  if (chatInstance.value.captionedAttachment) {
     messageComposerConfiguration.value.headerView = {
       componentName: BccAttachmentBox,
       props: {
@@ -95,6 +79,18 @@ watchEffect(() => {
     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;
+    }
   }
 });
 
@@ -130,13 +126,6 @@ onMounted(() => {
       shadowDomSelector: "cometchat-preview",
     }
   ]);
-
-  messageComposerConfiguration.value.onTextChange = (text: any) => {
-    messageComposerConfiguration.value.text = text;
-    if (chatInstance.value.captionedAttachment?.caption) {
-      chatInstance.value.captionedAttachment.caption = text;
-    }
-  }
 });
 
 onBeforeUnmount(() => {
@@ -279,6 +268,22 @@ accent900: text in avatar
         margin-bottom: 5px;
       }
     }
+
+    .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__container {

package/src/components/BccChatSendButton.vue

@@ -64,14 +64,10 @@ onBeforeUnmount(() => {
 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);
+    const ccTextInput = msgComposerData.inputRef.querySelector(".messageinput-input");
+    ccTextInput.addEventListener("keydown", function(event: KeyboardEvent) {
+        if (msgComposerData.messageText?.trim() == "" && event.keyCode === 13 && !event.shiftKey) sendMessage();
+    });
 }
 
 </script>

package/src/components/BccReplyBox.vue

@@ -54,21 +54,26 @@ const onMessageSend = CometChatMessageEvents.ccMessageSent.subscribe(
   }
 );
 
+let originalGetAttachmentOptions: Function;
 onMounted(() => {
-  if (msgComposerData) {
-    msgComposerData.actionSheetRef.style.display="none";
+  if (msgComposerData && chatInstance) {
     msgComposerData.inputRef.querySelector(".messageinput-input").focus()
     if (msgComposerData.messageToBeEdited) {
+      msgComposerData.showPreview = false; // This is only used for edit message preview
       msgComposerData.messageToBeEdited = null;
       msgComposerData.messageText = "";
       msgComposerData.textRef = "";
       msgComposerData.inputRef?.emptyInputField();
     }
+    originalGetAttachmentOptions = msgComposerData.getAttachmentOptions;
+    msgComposerData.getAttachmentOptions = function() {
+      return originalGetAttachmentOptions().filter((option: any) => option.id === "captionedimage");
+    }
   }
 });
 
 onBeforeUnmount(() => {
-  msgComposerData.actionSheetRef.style.removeProperty("display");
+  msgComposerData.getAttachmentOptions = originalGetAttachmentOptions;
   onMessageEditStart.unsubscribe();
   onMessageSend.unsubscribe();
 });

package/src/components/BccReplyPreview.vue

@@ -76,6 +76,7 @@ function getThumbnailURL() {
   padding: 0 12px;
   position: relative;
   display: grid;
+  justify-content: start;
 }
 .bcc__reply_preview__content_bar {
   position: absolute;