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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@bcc-code/vue-bcc-chat-ui",
   "author": "bcc-code",
   "license": "Apache-2.0",
-  "version": "3.11.0",
+  "version": "3.13.0",
   "type": "module",
   "private": false,
   "files": [
@@ -34,22 +34,23 @@
   },
   "devDependencies": {
     "@types/dompurify": "^3.0.5",
-    "@types/markdown-it": "^14.1.1",
+    "@types/markdown-it": "^14.1.2",
     "@types/node": "^20.14.9",
-    "@vitejs/plugin-vue": "^5.0.5",
+    "@vitejs/plugin-vue": "^5.1.3",
     "path": "^0.12.7",
-    "sass": "^1.77.6",
-    "typescript": "^5.5.2",
-    "vite": "^5.3.2",
-    "vite-plugin-dts": "^3.9.1",
-    "vue": "^3.4.31"
+    "sass": "^1.77.8",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.2",
+    "vite-plugin-dts": "^4.1.0",
+    "vue": "^3.4.38"
   },
   "dependencies": {
-    "@cometchat/chat-sdk-javascript": "4.0.7",
-    "@cometchat/chat-uikit-vue": "4.3.11",
-    "@cometchat/uikit-resources": "4.3.9",
-    "@cometchat/uikit-shared": "4.3.12",
-    "dompurify": "^3.1.5",
+    "@cometchat/chat-sdk-javascript": "4.0.10",
+    "@cometchat/chat-uikit-vue": "4.3.16",
+    "@cometchat/uikit-elements": "4.3.15",
+    "@cometchat/uikit-resources": "4.3.11",
+    "@cometchat/uikit-shared": "4.3.17",
+    "dompurify": "^3.1.6",
     "jwt-decode": "^4.0.0",
     "markdown-it": "^14.1.0",
     "panzoom": "^9.4.3"

package/src/components/BccAttachmentBox.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import {
+  CometChatMessageEvents,
+  CometChatTheme,
+  MessageStatus,
+} from "@cometchat/uikit-resources";
+import { CloseIcon } from "@cometchat/chat-uikit-vue";
+import {
+  getCurrentInstance,
+  ref,
+  inject,
+  Ref,
+  onBeforeUnmount,
+  onBeforeMount,
+  onMounted,
+} from "vue";
+import { ChatInstance } from "../chat/types";
+import BccAttachmentPreview from "./BccAttachmentPreview.vue";
+
+const props = defineProps({
+  captionedAttachment: { type: Object },
+  closeButtonIconURL: { type: String, default: CloseIcon },
+  previewStyle: { type: Object, default: {} },
+});
+
+const chatInstance = inject<Ref<ChatInstance>>("chatInstance");
+const vueInstance: any = getCurrentInstance();
+
+const { theme } = inject("theme", { theme: ref(new CometChatTheme({})) });
+
+function closePreview(_event?: MouseEvent) {
+  if (chatInstance) {
+    chatInstance.value.captionedAttachment = null;
+  }
+}
+
+const onMessageEditStart = CometChatMessageEvents.ccMessageEdited.subscribe(
+  ({ status }) => {
+    if (status === MessageStatus.inprogress) {
+      closePreview();
+    }
+  }
+);
+
+const onMessageSend = CometChatMessageEvents.ccMessageSent.subscribe(
+  ({ status }) => {
+    if (status === MessageStatus.inprogress) {
+      closePreview();
+    }
+  }
+);
+
+onBeforeMount(() => {
+  vueInstance?.parent?.setupState?.closePreview();
+});
+
+onBeforeUnmount(() => {
+  onMessageEditStart.unsubscribe();
+  onMessageSend.unsubscribe();
+});
+
+onMounted(() => {
+  let inputField = document.querySelector(".messageinput-input");
+
+  if (inputField) {
+    inputField.innerHTML = props?.captionedAttachment?.caption ?? "";
+  }
+})
+
+const closeBtnIconStyle = () => {
+  return {
+    buttonIconTint: theme.value.palette.getAccent500(),
+    height: "14px",
+    width: "14px",
+    border: "none",
+    borderRadius: "0",
+    background: "transparent",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+  };
+};
+
+const wrapperStyle = () => {
+  return {
+    background: theme.value.palette.getBackground(),
+    border: `1px solid ${theme.value.palette.getAccent200()}`,
+    height: "100%",
+    width: "100%",
+    borderRadius: "12px",
+  };
+};
+</script>
+
+<template>
+  <div class="bcc__attachment_box" :style="wrapperStyle()">
+    <BccAttachmentPreview
+      :captionedAttachment="props.captionedAttachment"
+      :previewStyle="previewStyle"
+    />
+    <div class="bcc__attachment_preview__close" @click="closePreview">
+      <cometchat-button
+        :buttonStyle="closeBtnIconStyle()"
+        :iconURL="props.closeButtonIconURL"
+      ></cometchat-button>
+    </div>
+  </div>
+</template>
+
+<style>
+.cc-messagecomposer-wrapper__headerview {
+  position: static !important;
+}
+</style>
+<style scoped>
+* {
+  box-sizing: border-box;
+}
+.bcc__attachment_box {
+  padding: 8px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin: 0;
+  min-height: 30px;
+}
+.bcc__attachment_preview__close {
+  width: 14px;
+  height: 14px;
+  display: inline-block;
+}
+</style>

package/src/components/BccAttachmentPreview.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+const props = defineProps({
+  captionedAttachment: { type: Object, default: {} },
+  previewStyle: { type: Object, default: {} },
+});
+</script>
+
+<template>
+  <div class="bcc__attachment_preview__content_wrapper">
+    <div class="bcc__attachment_preview__content">
+      <img :src="props.captionedAttachment?.image" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.bcc__attachment_preview__content_wrapper {
+  padding: 0 5px 0 20px;
+  position: relative;
+  width: 100%;
+}
+
+.bcc__attachment_preview__content {
+  width: 100%;
+  max-height: 350px;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.bcc__attachment_preview__content>img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+</style>

package/src/components/BccChatMessageBubble.vue

@@ -1,16 +1,36 @@
 <script setup lang="ts">
 import MarkdownIt from 'markdown-it'
-import { BaseMessage, CometChat, User } from '@cometchat/chat-sdk-javascript'
+import { BaseMessage, CometChat, MediaMessage, User } from '@cometchat/chat-sdk-javascript'
 import DOMPurify from 'dompurify';
 import { inject, ref } from 'vue';
 import { CometChatTheme, fontHelper } from '@cometchat/uikit-resources';
 import BccReplyPreview from "./BccReplyPreview.vue";
-
-const props = defineProps<{
-	text: string,
-	metadata: Record<string, any>,
-	mentionedUsers: User[],
-}>()
+import BccImageBubble from './BccImageBubble.vue';
+
+const props = defineProps({
+	text: {
+		type: String,
+		required: true
+	},
+	metadata: {
+		type: Object
+	},
+	mentionedUsers: {
+    type: Array<User>
+  },
+	message: {
+    type: MediaMessage,
+    default: null
+  },
+	placeholderImage: {
+    type: String,
+    default: null
+  },
+	src: {
+    type: String,
+    default: null
+  }
+})
 
 function toMarkdownHtml(str: string) {
 	str = formatMentionsInText(str);
@@ -73,7 +93,7 @@ const replyPreviewStyle = {
 </script>
 
 <template>
-	<div>
+	<div :style="{'display': src != null ? 'table-caption' : 'block'}">
 		<div v-if="metadata?.replyToMessageId" class="bcc-chat-msg-bubble">
 			<div class="bcc-chat-msg-bubble--reply">
 				<BccReplyPreview
@@ -82,6 +102,13 @@ const replyPreviewStyle = {
 				/>
 			</div>
 		</div>
+		<div v-if="src != null" style="display: block; width: max-content;">
+			<BccImageBubble
+				:message="message"
+				:placeholderImage="placeholderImage" 
+				:src="src"
+			/>
+		</div>
 		<div v-if="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"

package/src/components/BccChatMessageList.vue

@@ -8,13 +8,13 @@ import {
   provide,
   ref,
   watch,
-watchEffect,
+  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 { BaseMessage, Group, CometChat } from "@cometchat/chat-sdk-javascript";
 import { watchAndApplyStyle } from "../chat/styleFix";
 import {
   getMessageComposerConfiguration,
@@ -23,10 +23,12 @@ import {
 } 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";
 
 const props = defineProps({
   chatUid: { type: String, required: true },
-  senderDisplayName: { type: String, required: false}
+  senderDisplayName: { type: String, required: false }
 });
 
 const componentId = ref(
@@ -36,19 +38,20 @@ const chatGroup = ref<Group>();
 
 const chatInstance: Ref<ChatInstance> = ref({
   componentId: componentId,
-  replyToMessage: null
+  replyToMessage: null,
+  captionedAttachment: null
 });
 
-const messageComposerConfiguration = getMessageComposerConfiguration();
-const messageListConfiguration = getMessageListConfiguration(chatInstance);
-const threadedMessagesConfiguration = getThreadedMessagesConfiguration();
+const messageComposerConfiguration = getMessageComposerConfiguration(chatInstance);
+const messageListConfiguration = getMessageListConfiguration(chatInstance, chatGroup);
+const threadedMessagesConfiguration = getThreadedMessagesConfiguration(chatGroup);
 
 provide("chatInstance", chatInstance);
 
 const onMessageSend = CometChatMessageEvents.ccMessageSent.subscribe(({ message, status }) => {
   if (status === MessageStatus.inprogress) {
-    let metadata: any = {};
-    let scope: string | undefined = chatGroup.value?.getScope()
+    let metadata: any = (message as any)?.getMetadata() || {};
+    let scope: string | undefined = chatGroup.value?.getScope();
 
     if (chatInstance.value.replyToMessage) {
       metadata.replyToMessageId = chatInstance.value.replyToMessage?.getId()
@@ -58,11 +61,18 @@ const onMessageSend = CometChatMessageEvents.ccMessageSent.subscribe(({ message,
       metadata.senderDisplayName = props.senderDisplayName
     }
 
-    if (Object.keys(metadata).length === 0) {
-      return
-    }
+    (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");
 
-    (message as any).setMetadata(metadata);
+      if (inputField) {
+        inputField.innerHTML = "";
+      }
+      chatInstance.value.captionedAttachment = null;
+      messageComposerConfiguration.value.text = '';
+    }
   }
 });
 
@@ -79,10 +89,37 @@ watchEffect(() => {
   }
 });
 
-watch([loggedIn, ()=> props.chatUid, chat.initialized], async ([_loggedIn, _chatUid, _initialized]) => {
+watchEffect(() => {
+  if (!chatInstance.value.captionedAttachment) {
+    messageComposerConfiguration.value.headerView = undefined;
+    messageComposerConfiguration.value.sendButtonView = undefined;
+  } else {
+    chatInstance.value.captionedAttachment.caption = messageComposerConfiguration.value.text;
+
+    messageComposerConfiguration.value.headerView = {
+      componentName: BccAttachmentBox,
+      props: {
+        captionedAttachment: chatInstance.value.captionedAttachment
+      }
+    }
+
+    messageComposerConfiguration.value.sendButtonView = {
+      componentName: BccChatSendButton,
+      props: {
+        msgComposerConfig: messageComposerConfiguration.value,
+        fileObject: chatInstance.value.captionedAttachment.fileObject,
+        receiverId: chatGroup.value?.getGuid(),
+        receiverType: "group",
+        messageType: "image"
+      }
+    };
+  }
+});
+
+watch([loggedIn, () => props.chatUid, chat.initialized], async ([_loggedIn, _chatUid, _initialized]) => {
   if (_loggedIn && _chatUid && _initialized) {
     chatGroup.value = (await chat.getGroup(props.chatUid)) ?? undefined;
-    await chat.clearGroupChatCount(props.chatUid);  
+    await chat.clearGroupChatCount(props.chatUid);
   } else if (chatGroup.value) {
     chatGroup.value = undefined;
   }
@@ -101,7 +138,7 @@ onMounted(() => {
     },
     {
       selector: ".cc__preview__subtitle",
-      style: { 
+      style: {
         "overflow": "hidden",
         "display": "-webkit-box",
         "-webkit-box-orient": "vertical",
@@ -111,6 +148,13 @@ onMounted(() => {
       shadowDomSelector: "cometchat-preview",
     }
   ]);
+
+  messageComposerConfiguration.value.onTextChange = (text: any) => {
+    messageComposerConfiguration.value.text = text;
+    if (chatInstance.value.captionedAttachment?.caption) {
+      chatInstance.value.captionedAttachment.caption = text;
+    }
+  }
 });
 
 onBeforeUnmount(() => {
@@ -121,6 +165,14 @@ onUnmounted(async () => {
   await disconnect(componentId.value);
 });
 
+function isChannel(): boolean {
+  return (chatGroup.value?.getMetadata() as any)?.isChannel;
+}
+
+function isParticipant(): boolean {
+  return chatGroup.value?.getScope() == "participant";
+}
+
 </script>
 
 <template>
@@ -134,18 +186,14 @@ onUnmounted(async () => {
       <div>CometChat: {{cometChatStatus}} <button @click="getCometChatStatus()">[refresh]</button></div>
     </div> -->
     <div v-if="chatGroup" class="bcc-chat-message-list">
-      <CometChatMessages
-        :hideMessageHeader="true"
-        :disableSoundForMessages="true"
+      <CometChatMessages :hideMessageHeader="true" :disableSoundForMessages="true"
         :messageComposerConfiguration="messageComposerConfiguration"
         :messageListConfiguration="messageListConfiguration"
         :threadedMessagesConfiguration="threadedMessagesConfiguration"
-        :hideMessageComposer="false"
-        :hideDetails="true"
-        :group="chatGroup"
-      />
-      
-      <div v-if="chat.onlineStatus.value === 'offline' || !chat.connected.value" class="bcc-chat-message-composer-offline">
+        :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>
@@ -229,11 +277,13 @@ accent900: text in avatar
 
   /* 1. Wrapper for Messages component */
   .cc-messages-wrapper {
+
     /* 1.1 Messages component */
     .cc-messages-wrapper__messages {
+
       /* 1.1.1 Wrapper for Messages List */
       .cc-messages-wrapper__messages-list {
-        height: calc(100% - 96px);
+        height: 100%;
       }
 
       /* 1.1.2 Wrapper for Messages Composer */
@@ -243,6 +293,7 @@ accent900: text in avatar
 
       /* 1.1.3 Wrapper for Messages Composer Header View */
       .cc-messagecomposer-wrapper__headerview {
+        max-height: 100%;
         margin-bottom: 5px;
       }
     }
@@ -254,10 +305,12 @@ accent900: text in avatar
 
   .cc-messagebubble-wrapper__messageoptions {
     border-radius: 8px;
+
     .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;

package/src/components/BccChatSendButton.vue

@@ -0,0 +1,42 @@
+<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 }
+});
+
+const sendButtonIconURL = SendIcon;
+const sendButtonStyle = {
+    height: "24px",
+    width: "24px",
+    border: "none",
+    borderRadius: "0",
+    buttonIconTint: "#2fb5e9d1",
+    background: "transparent"
+}
+
+function sendMessageWithoutCaption() {
+    sendMediaMessage(props.msgComposerConfig, props.fileObject, props.receiverId, props.receiverType, props.messageType);
+}
+
+</script>
+
+<template>
+    <div class="cc-messagecomposer-wrapper__sendbutton" ref="sendButton">
+        <cometchat-button :iconURL="sendButtonIconURL" :buttonStyle="sendButtonStyle"
+            :hoverText="localize('SEND_MESSAGE')" @click=sendMessageWithoutCaption() />
+    </div>
+</template>
+
+<style scoped>
+.cc-messagecomposer-wrapper__sendbutton {
+    margin: 0 5px
+}
+</style>