@bcc-code/vue-bcc-chat-ui 3.2.1 → 3.3.0

package/package.json

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

package/src/components/BccChatMessageList.vue

@@ -5,7 +5,6 @@ import {
   onUnmounted,
   ref,
   watch,
-  watchEffect,
 } from "vue";
 import chat from "../chat";
 import { connect, disconnect } from "../chat/connection";
@@ -18,6 +17,8 @@ import {
   messageListConfiguration,
   threadedMessagesConfiguration
 } from "../chat/uiKit";
+import CometChatMessageListOverride from "./CometChatMessageListOverride.vue";
+CometChatMessages.components!.CometChatMessageList = CometChatMessageListOverride;
 
 const props = defineProps({
   chatUid: { type: String, required: true },
@@ -37,45 +38,8 @@ watch([loggedIn, ()=> props.chatUid, chat.initialized], async ([_loggedIn, _chat
   }
 }, { immediate: true });
 
-watch(chat.onlineStatus, () => {
-  tryConnect(false);
-});
-
-watch(chat.onlineMode, () => {
-  if (chat.onlineMode.value == 'online'){
-    tryConnect(true);
-  }
-});
-
-const showChat = ref(false);
-watchEffect(() => {
-  if (chatGroup && (chat.connected.value || chat.onlineStatus.value == 'offline')){
-    showChat.value = true;
-  } else {
-    // This line is a trade-off.
-    // With it, the entire chat will be hidden and then reloaded when a connection is being established.
-    // The advantage is that the chat should then scroll to the latest message after reconnecting.
-    // Without it, the chat window won't reload. New messages should still be loaded, but the chat won't scroll down.
-    // The advantage with removing this line would be that half finished messages that were being composed when the user went offline
-    // wouldn't be lost...
-    showChat.value = false;
-  }
-})
-
-let _connecting = false;
-async function tryConnect(force: boolean) {
-  if (chat.onlineStatus.value === "online" || force) {
-    if (!_connecting){
-      try {
-        await connect(componentId.value);
-      } catch {  }
-      _connecting = false;
-    }
-  }
-}
-
 onBeforeMount(() => {
-  tryConnect(true);
+  connect(componentId.value);
 });
 
 onMounted(() => {
@@ -141,8 +105,8 @@ onUnmounted(async () => {
       <div>Connecting: {{chat.connecting.value}}</div>
       <div>CometChat: {{cometChatStatus}} <button @click="getCometChatStatus()">[refresh]</button></div>
     </div> -->
-    <div v-if="showChat" class="bcc-chat-message-list">
-      <CometChatMessages
+    <div v-if="chatGroup" class="bcc-chat-message-list">
+      <CometChatMessages          
         :hideMessageHeader="true"
         :disableSoundForMessages="true"
         :messageComposerConfiguration="messageComposerConfiguration"

package/src/components/CometChatMessageListOverride.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+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"
+  />
+</template>