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

package/README.md

@@ -11,23 +11,78 @@
 npm -i @bcc-code/vue-bcc-chat-ui
 
 ```
-
-2. Use component in Vue
+2. Register component in the Vue App
 ```ts
+import { chat } from "@bcc-code/vue-bcc-chat-ui";
+import "@bcc-code/vue-bcc-chat-ui/dist/styles.css";
 
-<template>
-   <div>
-      <BccChatMessageList :authToken="token" :chat="chatId" />
-   </div>
-</template>
+const app = createApp(App);
+app.use(chat, { environment: "prod", themeMode: "light" });
+```
 
+3. Use component in Vue
+```ts
 <script lang="ts" setup>
 import { BccChatMessageList } from '@bcc-code/vue-bcc-chat-ui';
 
 const authToken = ref('....');
-const chatId = ref('my-chat-id');
+const chatUid = ref('my-chat-id');
 
 </script>
 
+<template>
+   <div>
+      <BccChatMessageList :authToken="token" :chatUid="chatUid" />
+   </div>
+</template>
+
 ```
 
+
+## Styling
+
+The component can by styled with the folowing styles
+
+```css
+.bcc-chat-message-list {
+  /* 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 {
+
+        /* 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 {
+      }
+
+    }
+
+  }
+}
+```

package/dist/chat/connection.d.ts

@@ -1,7 +1,7 @@
-export declare const connect: (authToken: string | (() => string)) => Promise<import("@cometchat/chat-sdk-javascript").User | undefined>;
+export declare const connect: (authToken: string) => Promise<import("@cometchat/chat-sdk-javascript").User | undefined>;
 export declare const disconnect: () => Promise<void>;
 declare const _default: {
-    connect: (authToken: string | (() => string)) => Promise<import("@cometchat/chat-sdk-javascript").User | undefined>;
+    connect: (authToken: string) => Promise<import("@cometchat/chat-sdk-javascript").User | undefined>;
     disconnect: () => Promise<void>;
 };
 export default _default;

package/dist/chat/index.d.ts

@@ -21,7 +21,7 @@ declare const _default: {
         isMobileView: any;
     };
     connection: {
-        connect: (authToken: string | (() => string)) => Promise<import("@cometchat/chat-sdk-javascript").User | undefined>;
+        connect: (authToken: string) => Promise<import("@cometchat/chat-sdk-javascript").User | undefined>;
         disconnect: () => Promise<void>;
     };
     data: {

package/dist/chat/uiKit.d.ts

@@ -1,4 +1,3 @@
-import "@cometchat/chat-uikit-vue/dist/style.css";
 export declare const init: () => Promise<void>;
 declare const _default: {
     init: () => Promise<void>;

package/dist/components/BccChatMessageList.vue.d.ts

@@ -1,12 +1,20 @@
 declare const _default: import("vue").DefineComponent<{
-    accessToken: StringConstructor;
-    chatUid: StringConstructor;
-    active: BooleanConstructor;
+    accessToken: {
+        type: StringConstructor;
+        required: true;
+    };
+    chatUid: {
+        type: StringConstructor;
+        required: true;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    accessToken: StringConstructor;
-    chatUid: StringConstructor;
-    active: BooleanConstructor;
-}>>, {
-    active: boolean;
-}, {}>;
+    accessToken: {
+        type: StringConstructor;
+        required: true;
+    };
+    chatUid: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {}, {}>;
 export default _default;

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-import './style.css';
-import BccChatMessageList from './components/BccChatMessageList.vue';
-export { BccChatMessageList };
+import BccChatMessageList from "./components/BccChatMessageList.vue";
+import chat from "./chat";
+export { BccChatMessageList, chat };