@bcc-code/vue-bcc-chat-ui 1.4.0 → 1.4.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@bcc-code/vue-bcc-chat-ui",
   "author": "bcc-code",
   "license": "Apache-2.0",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "type": "module",
   "private": false,
   "files": [
@@ -22,13 +22,12 @@
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.11.25",
+    "@types/node": "^20.11.24",
     "@vitejs/plugin-vue": "^4.6.2",
     "path": "^0.12.7",
     "sass": "^1.71.1",
-    "typescript": "^5.4.2",
-    "vite": "^5.1.5",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.4",
     "vite-plugin-dts": "^3.7.3",
     "vue": "^3.4.21"
   },

package/src/components/BccChatMessageList.vue

@@ -1,83 +1,91 @@
 <script setup lang="ts">
-import { onBeforeMount, onUnmounted, ref } from "vue";
-import chat from "../chat";
-import { connect, disconnect } from "../chat/connection";
-import { loggedIn } from "../chat/login";
-
-import {
+import { onBeforeMount, onMounted, onUnmounted, ref, nextTick, watch, Ref  } from "vue";
+import chat from '../chat';
+import { 
   CometChatMessages,
   CometChatMessageTemplate,
   CometChatUIKit,
   ImageBubbleStyle,
   MessageBubbleAlignment,
 } from "@cometchat/chat-uikit-vue";
-import {
-  MessageListConfiguration,
-  MessageComposerConfiguration,
-} from "@cometchat/uikit-shared";
-import { CometChatTheme } from "@cometchat/uikit-resources";
-import { BaseMessage, Group, User } from "@cometchat/chat-sdk-javascript";
-import { watch, Ref } from "vue";
+import {  MessageListConfiguration, MessageComposerConfiguration } from "@cometchat/uikit-shared";
+import { CometChatTheme } from '@cometchat/uikit-resources'
+import { BaseMessage, Group, User } from '@cometchat/chat-sdk-javascript';
+import { watchAndApplyStyle } from "../chat/mobileView";
 
 //import { ThreadedMessagesStyle } from '@cometchat/uikit-shared';
 
 const props = defineProps({
-  chatUid: { type: String, required: true },
+  chatUid:  {type: String, required: true},
+})
+
+const componentId = ref(`component-${Math.random().toString(36).substring(2, 11)}`);
+const chatGroup = ref<Group>();
+
+watch(chatGroup, (exists: any) => {
+  if (!exists) return;
+  nextTick(() => {
+    watchAndApplyStyle(
+      ".bcc-chat-message-list",
+      ".cc__imageviewer__close-button",
+      { "padding-top": "env(safe-area-inset-top)" },
+      'cometchat-full-screen-viewer'
+    );
+  });
+})
+
+onBeforeMount(async() => {
+    try {
+      await connect();
+      await loadData();
+    } catch (error) {
+      console.error('Failed to connect when mounting chat component', error);
+    }
 });
 
-const componentId = ref(
-  `component-${Math.random().toString(36).substring(2, 11)}`
-);
-const chatGroup = ref<Group | null>(null);
+watch(chat.connection.connected, async () => {
+    if (chat.connection.connected.value) {
+      await loadData();
+    }
+});
 
-onBeforeMount(async () => {
-  await connect(componentId.value);
-  await loadData();
+watch(() => props.chatUid, async () => {
+    if (chat.connection.connected.value) {
+      await loadData();
+    }
 });
 
 onUnmounted(async () => {
-  await disconnect(componentId.value);
+  await disconnect();
 });
 
-watch(
-  [loggedIn, chat.connection.connected, chat.initialized, () => props.chatUid],
-  () => {
-    loadData();
-  }
-);
+// Disconnects from chat server
+const disconnect = async () => {
+  await chat.connection.disconnect(componentId.value);
+};
+
+// Connect to chat server
+const connect = async() => {
+  await chat.connection.connect(componentId.value);
+};
 
 // Loads data if chat is connected
-const loadData = async () => {
-  if (
-    loggedIn.value &&
-    chat.initialized.value &&
-    chat.connection.connected.value
-  ) {
-    initTemplates();
-    if (props.chatUid) {
-      // Retreive group
+const loadData = async () => {  
+    if (chat.connection.connected.value && props.chatUid) {
+      initTemplates();
       chatGroup.value = await chat.data.getGroup(props.chatUid);
-
-      // Clear group chat count - assume user is viewing chat
-      if (chatGroup.value) {
-        await chat.data.clearGroupChatCount(props.chatUid);
-      }
+      await chat.data.clearGroupChatCount(props.chatUid);
     } else {
-      chatGroup.value = null;
+      chatGroup.value = undefined;
     }
-  } else {
-    if (!loggedIn.value) {
-      chatGroup.value = null;
-    }
-  }
 };
 
 const messageComposerConfiguration = new MessageComposerConfiguration({
   hideLiveReaction: true,
-  hideVoiceRecording: true,
+  hideVoiceRecording: true
 });
-const messageListConfiguration: Ref<any> = ref(null);
-
+const messageListConfiguration:Ref<any> = ref(null);
+  
 // Templates cannot be initialized before CometChat is initiazlied
 // CometChatUIKit.getDataSource().getAllMessageTemplates() will return null before cometchat is initialized
 // So we postpone overriding the templates until cometchat is connected
@@ -92,25 +100,16 @@ const initTemplates = () => {
 
 // Override message list configuration
 function getMessageListConfiguration(): MessageListConfiguration {
-  let templates = CometChatUIKit.getDataSource()
-    .getAllMessageTemplates()
-    .map((template: CometChatMessageTemplate) => {
-      // Override options
-      template.options = (
-        loggedInUser: User,
-        message: BaseMessage,
-        theme: CometChatTheme,
-        group: Group | undefined
-      ) => {
-        return getOptionsView(loggedInUser, message, theme, group);
-      };
-
-      // Override image styling
-      if (template.category === "message" && template.type === "image") {
-        template.contentView = getImageMessageContentView;
-      }
-      return template;
-    });
+  let templates = CometChatUIKit.getDataSource().getAllMessageTemplates().map((template: CometChatMessageTemplate) => {
+    // Override options
+    template.options = (loggedInUser: User, message: BaseMessage, theme: CometChatTheme, group: Group|undefined) => { return getOptionsView(loggedInUser, message, theme, group); };
+
+    // Override image styling
+    if (template.category === "message" && template.type === "image") {
+      template.contentView = getImageMessageContentView
+    }
+    return template;
+  });
 
   function getImageMessageContentView(
     message: CometChat.BaseMessage,
@@ -133,49 +132,40 @@ function getMessageListConfiguration(): MessageListConfiguration {
         }),
       },
     };
-  }
+  };
 
-  const getOptionsView = (
-    loggedInUser: User,
-    message: BaseMessage,
-    theme: any,
-    group: Group | undefined
-  ) => {
-    const optionsData = CometChatUIKit.getDataSource().getMessageOptions(
-      loggedInUser,
-      message,
-      theme,
-      group
-    );
-    const customOptionsView = optionsData.filter(
-      (ele) => ele.id !== "sendMessagePrivately"
-    );
+  const getOptionsView = (loggedInUser: User, message: BaseMessage, theme: any, group: Group|undefined) => {
+    const optionsData = CometChatUIKit.getDataSource().getMessageOptions(loggedInUser, message, theme, group);
+    const customOptionsView = optionsData.filter(ele => ele.id !== "sendMessagePrivately");
     return customOptionsView;
-  };
+  }
+   
 
   return new MessageListConfiguration({
     scrollToBottomOnNewMessages: true,
-    templates: templates,
+    templates: templates
   });
 }
+
+
 </script>
 
 <template>
   <div v-if="chatGroup" class="bcc-chat-message-list">
-    <CometChatMessages
-      v-if="chatGroup"
-      :hideMessageHeader="true"
-      :disableSoundForMessages="true"
-      :messageComposerConfiguration="messageComposerConfiguration"
-      :messageListConfiguration="messageListConfiguration"
-      :hideMessageComposer="false"
-      :hideDetails="true"
-      :group="chatGroup"
-    />
+    <CometChatMessages 
+        :hideMessageHeader="true" 
+        :disableSoundForMessages="true"
+        :messageComposerConfiguration="messageComposerConfiguration" 
+        :messageListConfiguration="messageListConfiguration" 
+        :hideMessageComposer="false" 
+        :hideDetails="true" 
+        :group="chatGroup"
+      />
   </div>
 </template>
 
-<style lang="scss">
+<style lang="scss" >
+  
 .bcc-chat-message-list {
   height: 100%;
   /* 1. Wrapper for Messages component */
@@ -190,14 +180,13 @@ function getMessageListConfiguration(): MessageListConfiguration {
   }
 }
 
-.cc-messagecomposer__emojikeyboard {
-  display: none;
+.cc-messagecomposer__emojikeyboard { 
+    display: none;
 }
 
 // Hide emoji keyboard
-.cc-messagecomposer__emojikeyboard {
-  display: none;
-}
+.cc-messagecomposer__emojikeyboard { display: none; }
+
 
 .cc-threadedmessages-wrapper__bubbleview::-webkit-scrollbar,
 .cc__message-list::-webkit-scrollbar {
@@ -210,4 +199,5 @@ function getMessageListConfiguration(): MessageListConfiguration {
   background: rgb(232, 229, 229);
   border-radius: 8px;
 }
-</style>
+
+</style>

package/dist/chat/login.d.ts

@@ -1,9 +0,0 @@
-export declare const loggedIn: import("vue").Ref<boolean>;
-export declare const login: (accessToken?: string | null | undefined) => Promise<boolean | undefined>;
-export declare const logout: () => Promise<boolean>;
-declare const _default: {
-    loggedIn: import("vue").Ref<boolean>;
-    login: (accessToken?: string | null | undefined) => Promise<boolean | undefined>;
-    logout: () => Promise<boolean>;
-};
-export default _default;