@bcc-code/vue-bcc-chat-ui 4.6.1 → 5.0.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@bcc-code/vue-bcc-chat-ui",
   "author": "bcc-code",
   "license": "Apache-2.0",
-  "version": "4.6.1",
+  "version": "5.0.0",
   "type": "module",
   "private": false,
   "files": [
@@ -59,6 +59,7 @@
     "@cometchat/uikit-resources": "4.3.13",
     "@cometchat/uikit-shared": "4.3.19",
     "dompurify": "^3.1.7",
+    "fuse.js": "^7.0.0",
     "jwt-decode": "^4.0.0",
     "markdown-it": "^14.1.0",
     "panzoom": "^9.4.3"

package/src/components/BccAttachmentBox.vue

@@ -115,9 +115,6 @@ const wrapperStyle = () => {
 }
 </style>
 <style scoped>
-* {
-  box-sizing: border-box;
-}
 .bcc__attachment_box {
   padding: 8px;
   display: flex;

package/src/components/BccChatMessageBubble.vue

@@ -9,6 +9,11 @@ import BccImageBubble from './BccImageBubble.vue';
 import { offlineStore } from '../offline';
 
 const props = defineProps({
+	id: {
+		type: String,
+		required: false,
+		default: ""
+	},
 	text: {
 		type: String,
 		required: true
@@ -138,7 +143,7 @@ const replyPreviewStyle = {
 		</div>
 		<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-if="text" v-html="toMarkdownHtml(text)" class="bcc-chat-msg-bubble"
+		<div v-if="text" v-html="toMarkdownHtml(text)" class="bcc-chat-msg-bubble" :id="id"
 			:class="{ 'bcc-chat-msg-bubble--translated': metadata && !!metadata.translated_message }" />
 	</div>
 </template>

package/src/components/BccChatMessageList.vue

@@ -30,6 +30,7 @@ const props = defineProps({
     type: Function as PropType<(guid: string, query: string) => Promise<any>>,
     required: false,
   },
+  loadMessageId: { type: String, required: false, default: "" },
 });
 
 const componentId = ref(
@@ -55,6 +56,11 @@ const chatInstance: Ref<ChatInstance> = ref({
 
 provide("chatInstance", chatInstance);
 
+const localLoadMessageId = ref(props.loadMessageId);
+watch(() => props.loadMessageId, (newVal) => {
+  localLoadMessageId.value = newVal;
+});
+
 const onMessageSend = CometChatMessageEvents.ccMessageSent.subscribe(({ message, status }) => {
   if (status !== MessageStatus.inprogress) {
     return
@@ -80,9 +86,8 @@ const onMessageSend = CometChatMessageEvents.ccMessageSent.subscribe(({ message,
   (message as any).setMetadata(metadata);
 });
 
-watch([loggedIn, chat.onlineStatus, () => props.chatUid, chat.initialized, () => props.groupMessageGetter], async ([_loggedIn, _online, _chatUid, _initialized, _groupMessageGetter]) => {
+watch([loggedIn, chat.onlineStatus, () => props.chatUid, chat.initialized, () => props.groupMessageGetter, chat.scrollToMessageId, localLoadMessageId], async ([_loggedIn, _online, _chatUid, _initialized, _groupMessageGetter, _scrollToMessageId, _localLoadMessageId]) => {
   logger.debug("ChatMessageList watch changed", { chatUid: _chatUid, loggedIn: _loggedIn, online: _online, initialized: _initialized });
-
   try {
     if (_loggedIn && _chatUid && _initialized) {
       chatGroupNotFound.value = false;
@@ -97,6 +102,15 @@ watch([loggedIn, chat.onlineStatus, () => props.chatUid, chat.initialized, () =>
         chat.updateGetGroupMessages(_groupMessageGetter)
       }
 
+      if (_scrollToMessageId) {
+        chat.scrollToMessage(_scrollToMessageId);
+      }
+
+      if (_localLoadMessageId) {
+        chat.loadMessageId.value = _localLoadMessageId;
+        localLoadMessageId.value = "";
+      }
+
       if (chatGroup.value) {
 
         let isChannel = (chatGroup.value.getMetadata() as any).isChannel;
@@ -117,7 +131,6 @@ watch([loggedIn, chat.onlineStatus, () => props.chatUid, chat.initialized, () =>
         }
 
       }
-
       await chat.clearGroupChatCount(props.chatUid);
     } else if (chatGroup.value) {
       chatGroup.value = undefined;
@@ -277,16 +290,6 @@ function closeScheduledMessage() {
 </template>
 
 <style lang="scss">
-body {
-  background: #fff;
-  color: #000;
-}
-
-:host.dark body {
-  background: #000;
-  color: #fff;
-}
-
 .bcc-chat-message-list-wrapper {
   position: relative;
   height: 100%;
@@ -343,8 +346,6 @@ accent900: text in avatar
   --cc__link-color: #cfeac8;
 }
 
-
-
 .bcc-chat-message-list {
   height: 100%;
 

package/src/components/BccFileBubble.vue

@@ -18,9 +18,9 @@
       </div>
     </div>
     <div class="cc__file__icon">
-      <a :href="fileURL" target="_blank"
-        ><i :style="messageFileIconStyle"></i
-      ></a>
+      <a :href="fileURL" target="_blank">
+        <i :style="messageFileIconStyle" />
+      </a>
     </div>
   </div>
 </template>
@@ -127,7 +127,7 @@ const messageFileIconStyle = computed(() => {
   width: fit-content;
   line-height: 36px;
 }
-i {
+.cc__file__icon i {
   display: inline-block;
   width: 24px;
   height: 24px;

package/src/components/BccImageBubble.vue

@@ -90,7 +90,7 @@ function closeImageInFullScreen() {
 }
 
 /* Placeholder styles */
-.placeholder {
+.bcc-image_container .placeholder {
   width: 100%;
   height: auto;
   display: flex;
@@ -103,12 +103,12 @@ function closeImageInFullScreen() {
   z-index: -1;
 }
 
-.placeholder::before {
+.bcc-image_container .placeholder::before {
   content: "⌛";
   position: absolute;
 }
 
-.placeholder.landscape > img {
+.bcc-image_container .placeholder.landscape > img {
   width: 100%;
 }
 

package/src/components/BccReplyBox.vue

@@ -125,9 +125,6 @@ const wrapperStyle = () => {
 }
 </style>
 <style scoped>
-* {
-  box-sizing: border-box;
-}
 .bcc__reply_box {
   padding: 8px;
   display: flex;

package/src/components/BccScheduledMessageIcon.vue

@@ -51,7 +51,7 @@ async function redirectToScheduledMessagesChat() {
     </div>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .update-icon-style {
     height: 24px;
     width: 24px;

package/src/components/BccScheduledMessageModal.vue

@@ -53,115 +53,20 @@ function scheduleMessage() {
     <BccModal class="modal" :title="title" :open="true" @close="close()" :closeOnOutsideClick="closeOnOutsideClick"
         :closeButton="true">
         <div class="flex flex-col w-full">
-            <div class="flex flex-row w-full justify-between">
-                <input class="input" type="date" v-model="dateInput" required>
-                <p class="at">{{ localize("AT") }}</p>
-                <input class="input" type="time" v-model="timeInput" required>
+            <div class="flex w-full items-center justify-between">
+                <input class="bcc-input text-right justify-end" type="date" v-model="dateInput" required />
+                <p class="mx-2">{{ localize("AT") }}</p>
+                <input class="bcc-input text-right justify-end" 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>
-
-<style lang="scss">
-:root {
-    --cc__primary: #cfeac8;
-    --cc__primary150: #004e48;
-    --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;
-}
-
-:root.dark {
-    --cc__primary: #57639e;
-    --cc__primary150: #57639e;
-    --cc__background: hsl(230, 25%, 15%);
-    --cc__secondary: #111827;
-    --cc__accent: #758abc;
-    --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: #090A0B;
-    --cc__text-color: #fff;
-    --cc__link-color: #cfeac8;
-}
-
-.modal {
-    width: 90%;
-    margin-left: 5%;
-    margin-top: auto;
-    margin-bottom: auto;
-    background-color: var(--cc__background);
-    color: var(--cc__text-color);
-}
-
-.input {
-    background-color: var(--cc__primary);
-    border-radius: 5px;
-    color: var(--cc__text-color);
-    height: 40px;
-    padding: 5px;
-    width: 45%;
-    min-width: 37%;
-}
-
-.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>
+</template>