@bcc-code/vue-bcc-chat-ui 3.6.3 → 3.7.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@bcc-code/vue-bcc-chat-ui",
   "author": "bcc-code",
   "license": "Apache-2.0",
-  "version": "3.6.3",
+  "version": "3.7.0",
   "type": "module",
   "private": false,
   "files": [
@@ -33,22 +33,22 @@
   },
   "devDependencies": {
     "@types/dompurify": "^3.0.5",
-    "@types/markdown-it": "^13.0.7",
-    "@types/node": "^20.12.7",
+    "@types/markdown-it": "^13.0.8",
+    "@types/node": "^20.12.10",
     "@vitejs/plugin-vue": "^4.6.2",
     "path": "^0.12.7",
-    "sass": "^1.75.0",
+    "sass": "^1.77.0",
     "typescript": "^5.4.5",
-    "vite": "^5.2.8",
-    "vite-plugin-dts": "^3.8.1",
-    "vue": "^3.4.21"
+    "vite": "^5.2.11",
+    "vite-plugin-dts": "^3.9.1",
+    "vue": "^3.4.27"
   },
   "dependencies": {
-    "@cometchat/chat-sdk-javascript": "^4.0.4",
-    "@cometchat/chat-uikit-vue": "^4.3.3",
-    "@cometchat/uikit-resources": "^4.3.3",
-    "@cometchat/uikit-shared": "^4.3.4",
-    "dompurify": "^3.1.0",
+    "@cometchat/chat-sdk-javascript": "4.0.5",
+    "@cometchat/chat-uikit-vue": "4.3.6",
+    "@cometchat/uikit-resources": "4.3.7",
+    "@cometchat/uikit-shared": "4.3.7",
+    "dompurify": "^3.1.2",
     "jwt-decode": "^4.0.0",
     "markdown-it": "^14.1.0"
   },

package/src/components/BccChatMessageBubble.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import MarkdownIt from 'markdown-it'
-import { User } from '@cometchat/chat-sdk-javascript'
+import { BaseMessage, CometChat, 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,
@@ -54,10 +57,31 @@ function formatMentionsInText(text: string) {
 	});
 }
 
+let parentMsgRef = ref<BaseMessage>();
+if (props.metadata?.replyToMessageId) {
+	CometChat.getMessageDetails(props.metadata.replyToMessageId).then((msg: BaseMessage) => parentMsgRef.value = msg).catch(() => parentMsgRef.value = new CometChat.TextMessage("","Unknown message",""));
+};
+
+const { theme } = inject("theme", { theme: ref(new CometChatTheme({})) });
+const replyPreviewStyle = {
+	previewWrapperPadding: "6px 12px 6px 9px",
+	barLeftPosition: "0px",
+	titleColor: theme.value.palette.getAccent800(),
+	subtitleColor: theme.value.palette.getAccent800(),
+	titleFont: fontHelper(theme.value.typography.title2),
+};
 </script>
 
 <template>
 	<div>
+		<div v-if="metadata?.replyToMessageId" class="bcc-chat-msg-bubble">
+			<div class="bcc-chat-msg-bubble--reply">
+				<BccReplyPreview
+					:replyToMessage="parentMsgRef"
+					:previewStyle="replyPreviewStyle"
+				/>
+			</div>
+		</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"
@@ -141,5 +165,26 @@ function formatMentionsInText(text: string) {
 			display: block;
 		}
 	}
+
+	&--reply {
+		position: relative;
+		z-index: 0;
+		margin-top: 3px;
+		margin-bottom: -8px;
+		border-radius: 6px;
+		overflow: hidden;
+	}
+
+	&--reply::before {
+		content: "";
+		position: absolute;
+		top: 0; 
+		left: 0;
+		width: 100%; 
+		height: 100%;  
+		opacity: .5; 
+		z-index: -1;
+		background-color: var(--cc__background);
+	}
 }
 </style>

package/src/components/BccChatMessageList.vue

@@ -1,24 +1,28 @@
 <script setup lang="ts">
 import {
+  Ref,
   onBeforeMount,
+  onBeforeUnmount,
   onMounted,
   onUnmounted,
+  provide,
   ref,
   watch,
+watchEffect,
 } from "vue";
 import chat from "../chat";
 import { connect, disconnect } from "../chat/connection";
 import { loggedIn } from "../chat/login";
-import { CometChatMessages } from "@cometchat/chat-uikit-vue";
+import { CometChatMessages } from "../chat/cometChatPatches";
 import { Group } from "@cometchat/chat-sdk-javascript";
 import { watchAndApplyStyle } from "../chat/styleFix";
 import {
-  messageComposerConfiguration,
-  messageListConfiguration,
-  threadedMessagesConfiguration
+  getMessageComposerConfiguration,
+  getMessageListConfiguration,
+  getThreadedMessagesConfiguration
 } from "../chat/uiKit";
-import CometChatMessageListOverride from "./CometChatMessageListOverride.vue";
-CometChatMessages.components!.CometChatMessageList = CometChatMessageListOverride;
+import { ChatInstance } from "../chat/types";
+import { CometChatMessageEvents, MessageStatus } from "@cometchat/uikit-resources";
 
 const props = defineProps({
   chatUid: { type: String, required: true },
@@ -29,6 +33,37 @@ const componentId = ref(
 );
 const chatGroup = ref<Group>();
 
+const chatInstance: Ref<ChatInstance> = ref({
+  componentId: componentId,
+  replyToMessage: null
+});
+
+const messageComposerConfiguration = getMessageComposerConfiguration();
+const messageListConfiguration = getMessageListConfiguration(chatInstance);
+const threadedMessagesConfiguration = getThreadedMessagesConfiguration();
+
+provide("chatInstance", chatInstance);
+const onMessageSend = CometChatMessageEvents.ccMessageSent.subscribe(({ message, status }) => {
+  if (status === MessageStatus.inprogress && chatInstance.value.replyToMessage) {
+    (message as any).setMetadata({
+      replyToMessageId: chatInstance.value.replyToMessage?.getId()
+    });
+  }
+});
+
+watchEffect(() => {
+  if (!chatInstance.value.replyToMessage) {
+    messageComposerConfiguration.value.headerView = undefined;
+  } else {
+    messageComposerConfiguration.value.headerView = {
+      componentName: "bcc-reply-box",
+      props: {
+        replyToMessage: chatInstance.value.replyToMessage,
+      }
+    }
+  }
+});
+
 watch([loggedIn, ()=> props.chatUid, chat.initialized], async ([_loggedIn, _chatUid, _initialized]) => {
   if (_loggedIn && _chatUid && _initialized) {
     chatGroup.value = (await chat.getGroup(props.chatUid)) ?? undefined;
@@ -69,26 +104,24 @@ onMounted(() => {
       style: { 'flex-shrink': '0' },
       shadowDomSelector: "link-preview",
     },
-    // {
-    //   selector: ".messageinput",
-    //   style: {
-    //     "border-radius": "8px 8px 0 0",
-    //     "box-shadow":
-    //       "0px -1px 2px 0px rgba(17, 24, 39, 0.05), 1px -1px 3px 0px rgba(17, 24, 39, 0.1)",
-    //   },
-    // },
-    // {
-    //   selector: ".messageinput-input",
-    //   style: {
-    //     "font-size": "16px",
-    //     padding: "8px",
-    //     "max-height": "none",
-    //     height: "64px",
-    //   },
-    // },
+    {
+      selector: ".cc__preview__subtitle",
+      style: { 
+        "overflow": "hidden",
+        "display": "-webkit-box",
+        "-webkit-box-orient": "vertical",
+        "-webkit-line-clamp": "1",
+        "word-break": "break-all"
+      },
+      shadowDomSelector: "cometchat-preview",
+    }
   ]);
 });
 
+onBeforeUnmount(() => {
+  onMessageSend.unsubscribe();
+})
+
 onUnmounted(async () => {
   await disconnect(componentId.value);
 });
@@ -96,7 +129,7 @@ onUnmounted(async () => {
 </script>
 
 <template>
-  <div class="bcc-chat-message-list-wrapper">
+  <div class="bcc-chat-message-list-wrapper" :class="componentId">
     <!-- <div>
       <div>Connecting... <button @click="tryConnect(true)">[retry]</button></div>
       <div>Online status: {{chat.onlineStatus}}</div>
@@ -106,7 +139,7 @@ onUnmounted(async () => {
       <div>CometChat: {{cometChatStatus}} <button @click="getCometChatStatus()">[refresh]</button></div>
     </div> -->
     <div v-if="chatGroup" class="bcc-chat-message-list">
-      <CometChatMessages          
+      <CometChatMessages
         :hideMessageHeader="true"
         :disableSoundForMessages="true"
         :messageComposerConfiguration="messageComposerConfiguration"
@@ -212,6 +245,11 @@ accent900: text in avatar
       .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 {
+        margin-bottom: 5px;
+      }
     }
   }
 

package/src/components/BccReplyBox.vue

@@ -0,0 +1,128 @@
+<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,
+} from "vue";
+import { ChatInstance } from "../chat/types";
+import { ReplyPreviewStyle } from "../chat/replyStyle";
+import { BaseMessage } from "@cometchat/chat-sdk-javascript";
+import BccReplyPreview from "./BccReplyPreview.vue";
+
+const props = defineProps({
+  replyToMessage: { type: BaseMessage },
+  titlePrefix: { type: String },
+  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({})) });
+const previewStyle = new ReplyPreviewStyle(props.previewStyle, theme.value);
+
+function closePreview(_event?: MouseEvent) {
+  if (chatInstance) {
+    chatInstance.value.replyToMessage = 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();
+});
+
+const closeBtnIconStyle = () => {
+  return {
+    buttonIconTint: previewStyle?.closeButtonIconTint,
+    height: "14px",
+    width: "14px",
+    border: "none",
+    borderRadius: "0",
+    background: "transparent",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+  };
+};
+
+const wrapperStyle = () => {
+  return {
+    background: previewStyle?.background,
+    border: previewStyle?.border,
+    height: previewStyle?.height,
+    width: previewStyle?.width,
+    borderRadius: previewStyle?.borderRadius,
+  };
+};
+</script>
+
+<template>
+  <div class="bcc__reply_box" :style="wrapperStyle()">
+    <BccReplyPreview 
+      titlePrefix="Reply to "
+      :replyToMessage="props.replyToMessage"
+      :previewStyle="previewStyle"
+    />
+    <div class="bcc__reply_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__reply_box {
+  padding: 8px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin: 0;
+  min-height: 30px;
+}
+.bcc__reply_preview__close {
+  width: 14px;
+  height: 14px;
+  display: inline-block;
+}
+</style>

package/src/components/BccReplyPreview.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { CometChatTheme, CometChatUIKitConstants } from "@cometchat/uikit-resources";
+import { inject, ref } from "vue";
+import { ReplyPreviewStyle } from "../chat/replyStyle";
+import { BaseMessage, MediaMessage } from "@cometchat/chat-sdk-javascript";
+import { getMessageTextPreview, proxyImage } from "../chat/data";
+
+const props = defineProps({
+  replyToMessage: { type: BaseMessage },
+  titlePrefix: { type: String, default: "" },
+  previewStyle: { type: Object, default: {} },
+});
+
+const { theme } = inject("theme", { theme: ref(new CometChatTheme({})) });
+const previewStyle = new ReplyPreviewStyle(props.previewStyle, theme.value);
+
+const subtitleStyle = () => {
+  return {
+    font: previewStyle?.subtitleFont,
+    color: previewStyle?.subtitleColor,
+  };
+};
+
+const titleStyle = () => {
+  return {
+    font: previewStyle?.titleFont,
+    color: previewStyle?.titleColor,
+  };
+}
+
+const barStyle = () => {
+  return {
+    insetInlineStart: previewStyle?.barLeftPosition,
+    width: previewStyle?.barWidth,
+    background: previewStyle?.barBackground,
+    opacity: previewStyle?.barOpacity,
+  };
+};
+
+const previewWrapperStyle = () => {
+  return {
+    padding: previewStyle?.previewWrapperPadding,
+    opacity: previewStyle?.previewWrapperOpacity,
+  };
+};
+
+function getThumbnailURL() {
+  const msg = props.replyToMessage as MediaMessage;
+  const url = 
+    (msg?.getMetadata() as any)?.['@injected']?.extensions?.['thumbnail-generation']?.url_small || 
+    (msg?.getData() as any)?.url;
+  return proxyImage(url);
+}
+
+</script>
+
+<template>
+  <div class="bcc__reply_preview__content_wrapper" :style="previewWrapperStyle()">
+    <div class="bcc__reply_preview__content_bar" :style="barStyle()"></div>
+    <div v-if="props.replyToMessage?.getType() === CometChatUIKitConstants.MessageTypes.image" class="bcc__reply_preview__thumbnail">
+      <img :src="getThumbnailURL()" />
+    </div>
+    <div class="bcc__reply_preview__content">
+      <p class="bcc__reply_preview__title" :style="titleStyle()">
+        {{ props.titlePrefix + ( props?.replyToMessage?.getSender()?.getName() || "" ) || "Reply to ..." }}
+      </p>
+      <p class="cc__preview__subtitle" :style="subtitleStyle()">
+        {{ getMessageTextPreview(props?.replyToMessage) || "‎" }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.bcc__reply_preview__content_wrapper {
+  padding: 0 12px;
+  position: relative;
+  display: grid;
+}
+.bcc__reply_preview__content_bar {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  border-radius: 25px;
+}
+.bcc__reply_preview__content {
+  grid-column: 2;
+}
+.bcc__reply_preview__content > p {
+  margin: 0;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  word-break: break-all;
+}
+.bcc__reply_preview__content > .bcc__reply_preview__title {
+  margin-bottom: 2px;
+}
+.bcc__reply_preview__thumbnail {
+  grid-column: 1;
+  width: 2rem;
+  height: 2rem;
+  align-self: center;
+  border-radius: 3px;
+  overflow: hidden;
+  margin-right: 5px;
+}
+.bcc__reply_preview__thumbnail > img {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/components/CometChatMessageListOverride.vue

@@ -3,127 +3,9 @@ import {
   CometChatMessageList,
 } from "@cometchat/chat-uikit-vue";
 import chat from "../chat";
-
-defineProps({
-  hideError: {},
-  scrollToBottomOnNewMessages: {},
-  errorStateView: {},
-  loadingStateView: {},
-  emptyStateView: {},
-  state: {},
-  thresholdValue: {},
-  errorStateText: {},
-  emptyStateText: {},
-  loadingIconURL: {},
-  user: {},
-  group: {},
-  disableReceipt: {},
-  onError: {},
-  disableSoundForMessages: {},
-  customSoundForMessages: {},
-  readIcon: {},
-  deliveredIcon: {},
-  sentIcon: {},
-  waitIcon: {},
-  errorIcon: {},
-  alignment: {},
-  showAvatar: {},
-  timestampAlignment: {},
-  DateSeparatorPattern: {},
-  templates: {},
-  messagesRequestBuilder: {},
-  newMessageIndicatorText: {},
-  onThreadRepliesClick: {},
-  headerView: {},
-  footerView: {},
-  datePattern: {},
-  parentMessageId: {},
-  avatarStyle: {},
-  dateSeparatorStyle: {},
-  messageListStyle: {},
-  messageInformationConfiguration: {},
-  reactionsConfiguration: {},
-  disableReactions: {},
-  emojiKeyboardStyle: {},
-  threadIndicatorIcon: {},
-  disableMentions: {},
-  textFormatters: {}
-});
 </script>
 
 <template>
-  <CometChatMessageList v-if="chat.connected.value"
-    :hideError="hideError"
-    :disableSoundForMessages="disableSoundForMessages"
-    :customSoundForMessages="customSoundForMessages"
-    :emptyStateView="emptyStateView"
-    :loadingStateView="loadingStateView"
-    :user="user"
-    :group="group"
-    :errorStateView="errorStateView"
-    :disableReceipt="disableReceipt"
-    :readIcon="readIcon"
-    :deliveredIcon="deliveredIcon"
-    :sentIcon="sentIcon"
-    :waitIcon="waitIcon"
-    :errorIcon="errorIcon"
-    :alignment="alignment"
-    :showAvatar="showAvatar"
-    :datePattern="datePattern"
-    :timestampAlignment="timestampAlignment"
-    :DateSeparatorPattern="DateSeparatorPattern"
-    :templates="templates"
-    :messagesRequestBuilder="messagesRequestBuilder"
-    :thresholdValue="thresholdValue"
-    :onThreadRepliesClick="onThreadRepliesClick"
-    :headerView="headerView"
-    :footerView="footerView"
-    :avatarStyle="avatarStyle"
-    :dateSeparatorStyle="dateSeparatorStyle"
-    :messageListStyle="messageListStyle"
-    :onError="onError"
-    :reactionsConfiguration="reactionsConfiguration"
-    :disableReactions="disableReactions"
-    :emojiKeyboardStyle="emojiKeyboardStyle"
-    :threadIndicatorIcon="threadIndicatorIcon"
-    :disableMentions="disableMentions"
-    :textFormatters="textFormatters"
-  />
-  <CometChatMessageList v-else
-    :hideError="hideError"
-    :disableSoundForMessages="disableSoundForMessages"
-    :customSoundForMessages="customSoundForMessages"
-    :emptyStateView="emptyStateView"
-    :loadingStateView="loadingStateView"
-    :user="user"
-    :group="group"
-    :errorStateView="errorStateView"
-    :disableReceipt="disableReceipt"
-    :readIcon="readIcon"
-    :deliveredIcon="deliveredIcon"
-    :sentIcon="sentIcon"
-    :waitIcon="waitIcon"
-    :errorIcon="errorIcon"
-    :alignment="alignment"
-    :showAvatar="showAvatar"
-    :datePattern="datePattern"
-    :timestampAlignment="timestampAlignment"
-    :DateSeparatorPattern="DateSeparatorPattern"
-    :templates="templates"
-    :messagesRequestBuilder="messagesRequestBuilder"
-    :thresholdValue="thresholdValue"
-    :onThreadRepliesClick="onThreadRepliesClick"
-    :headerView="headerView"
-    :footerView="footerView"
-    :avatarStyle="avatarStyle"
-    :dateSeparatorStyle="dateSeparatorStyle"
-    :messageListStyle="messageListStyle"
-    :onError="onError"
-    :reactionsConfiguration="reactionsConfiguration"
-    :disableReactions="disableReactions"
-    :emojiKeyboardStyle="emojiKeyboardStyle"
-    :threadIndicatorIcon="threadIndicatorIcon"
-    :disableMentions="disableMentions"
-    :textFormatters="textFormatters"
-  />
+  <CometChatMessageList v-if="chat.connected.value" v-bind="$attrs"/>
+  <CometChatMessageList v-else v-bind="$attrs"/>
 </template>