@bcc-code/vue-bcc-chat-ui 1.0.8 → 1.1.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@bcc-code/vue-bcc-chat-ui",
   "author": "bcc-code",
   "license": "Apache-2.0",
-  "version": "1.0.8",
+  "version": "1.1.1",
   "type": "module",
   "private": false,
   "files": [
@@ -13,17 +13,8 @@
     "type": "git",
     "url": "git+https://github.com/bcc-code/bcc-chat.git"
   },
-  "main": "./dist/vue-bcc-chat-ui.umd.cjs",
   "module": "./dist/vue-bcc-chat-ui.js",
   "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/vue-bcc-chat-ui.js",
-      "types": "./dist/index.d.ts",
-      "require": "./dist/vue-bcc-chat-ui.umd.cjs"
-    },
-    "./style.css": "./dist/style.css"
-  },
   "publishConfig": {
     "access": "public"
   },
@@ -38,18 +29,17 @@
     "vite": "^5.0.8",
     "vite-plugin-dts": "^3.7.2",
     "vue": "^3.3.11",
-    "vue-tsc": "^1.8.25"
+    "sass": "^1.70.0"
   },
   "dependencies": {
     "@cometchat/chat-sdk-javascript": "^4.0.3",
     "@cometchat/chat-uikit-vue": "^4.2.0",
     "@cometchat/uikit-resources": "^4.2.2",
-    "@cometchat/uikit-shared": "^4.2.1",
-    "sass": "^1.70.0"
+    "@cometchat/uikit-shared": "^4.2.1"
   },
   "scripts": {
     "dev": "vite",
-    "build": "vite build && vue-tsc --emitDeclarationOnly",
+    "build": "vite build",
     "preview": "vite preview"
   }
 }

package/src/components/BccChatMessageList.vue

@@ -1,69 +1,55 @@
 <script setup lang="ts">
-import { computed, onBeforeMount, ref } from 'vue'
+import { onBeforeMount, onUnmounted, ref } from 'vue'
 import chat from '../chat';
-import { watch } from 'vue';
 import { CometChatMessages } from '@cometchat/chat-uikit-vue'
+import { Group } from '@cometchat/chat-sdk-javascript';
+import { watch } from 'vue';
 //import { ThreadedMessagesStyle } from '@cometchat/uikit-shared';
 
 const props = defineProps({
-  accessToken: String,
-  chatUid: String,
-  active: Boolean
+  chatUid:  {type: String, required: true},
 })
 
-const accessToken = computed(() => props.accessToken);
-const active = computed(() => props.active);
-const connected = ref(false);
-const chatGroup = ref();
-const user = ref();
-
-
-const connect = async () => {
-  if (accessToken.value && active.value){
-    user.value = await chat.connection.connect(accessToken.value);
-    console.log('USER', user.value);
-    if (props.chatUid){
-      chatGroup.value = await chat.data.getGroup(props.chatUid);
-      console.log('GROUP', chatGroup.value);
-    }
-    connected.value = true;
-  }
-}
-
-const disconnect = async () => {
-  console.log('Disconnecting');
-  if (connected.value){
-    await chat.connection.disconnect();
-    console.log('Disconnected');
-    connected.value = false;
-  }
-}
+const componentId = ref(`component-${Math.random().toString(36).substring(2, 11)}`);
+const chatGroup = ref<Group>();
 
-watch(accessToken, async (token) => {
-  if (token && active){
-    await connect();
-  }
+onBeforeMount(async() => {
+    await connnect();
+    await loadData();
 });
 
-watch(active, async (isActive, wasActive) => {
-  if (isActive && !wasActive){
-    await connect();
-  }
-  if (!isActive && connected.value){
-    await disconnect();
-  }
+watch(chat.connection.connected, async () => {
+    await loadData();
 });
 
-onBeforeMount(async() => {
-  await connect();
+onUnmounted(async () => {
+  await disconnect();
 });
 
+// Disconnects from chat server
+const disconnect = async () => {
+  await chat.connection.disconnect(componentId.value);
+};
+
+// Connect to chat server
+const connnect = async() => {
+  await chat.connection.connect(componentId.value);
+};
+
+// Loads data if chat is connected
+const loadData = async () => {
+  if (chat.connection.connected.value && props.chatUid) {
+    chatGroup.value = await chat.data.getGroup(props.chatUid);
+  } else {
+    chatGroup.value = undefined;
+  }
+};
 
 </script>
 
 <template>
-  <div v-if="connected" class="bcc-chat-message-list">    
-        <CometChatMessages :hideMessageHeader="true" :hideMessageComposer="false" :hideDetails="true" :group="chatGroup"></CometChatMessages>
+  <div v-if="chatGroup" class="bcc-chat-message-list">
+    <CometChatMessages :hideMessageHeader="true" :hideMessageComposer="false" :hideDetails="true" :group="chatGroup"></CometChatMessages>
   </div>
 </template>
 
@@ -71,49 +57,18 @@ onBeforeMount(async() => {
   
 .bcc-chat-message-list {
   height: 100%;
-
   /* 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);
-
-        /* 1.1.1.1 Messages List header view */
-        .cc__messagelist__headerview {
-        }
-        
-        /* 1.1.1.2 Messages List messages */
-        .cc-messagelist {
-            .cc-list__wrapper {
-              .cc-list__header {
-              }
-              .cc-list__list {
-              }
-            }
-        }
-
-        /* 1.1.1.3 Message List footer */
-        .cc__messagelist__footerview {
-        }
       }
-
-      /* 1.1.2 Wrapper for Composer */
-      .cc-messages-wrapper__composer {
-      }
-
-      /* 1.1.3 Wrapper for Live Reaction */
-      .cc__messages__livereaction {
-      }
-
     }
-
   }
 }
+
 .cc-threadedmessages-wrapper__bubbleview::-webkit-scrollbar,
 .cc__message-list::-webkit-scrollbar {
   background: transparent;
@@ -126,5 +81,4 @@ onBeforeMount(async() => {
   border-radius: 8px;
 }
 
-
 </style>

package/dist/App.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
-export default _default;