Update Vue Sample App for version v4.3.1

README.md

@@ -5,7 +5,7 @@ This is a reference application showcasing the integration of [**CometChat's Vue
 ## Prerequisites
 
 - Ensure that you have Node.js and npm installed:
-  
+
     ```sh
     npm install npm@latest -g
     ```
@@ -26,19 +26,19 @@ This is a reference application showcasing the integration of [**CometChat's Vue
     ```
     npm install
     ```
-4. Enter your CometChat _`App ID`_, _`Region`_, and _`Auth Key`_ in the [src/CONSTS.ts](https://github.com/cometchat/cometchat-sample-app-vue/blob/v4/src/consts.ts) file:
+4. Enter your CometChat _`App ID`_, _`Region`_, and _`Auth Key`_ in the [src/AppConstants.ts](https://github.com/cometchat/cometchat-sample-app-vue/blob/v4/src/AppConstants.ts) file:
     ```typescript
-    export const COMETCHAT_CONSTANTS = {
-		APP_ID: "APP_ID",
-		REGION: "REGION",
-		AUTH_KEY: "AUTH_KEY",
-	};
+    export const AppConstants = {
+    APP_ID: "APP_ID",
+    REGION: "REGION",
+    AUTH_KEY: "AUTH_KEY",
+    };
     ```
 5. Run the project locally to see all CometChat features in action:
     ```
     npm run serve
     ```
-![Screenshot 2024-03-15 at 11 37 17 PM](https://github.com/cometchat/cometchat-sample-app-vue/assets/2210730/ac51c426-e7ed-4761-b21a-9f892064aca8)
+![HomeScreen](./Screenshots/HomeScreen.png)
 
 
 ## Help and Support

main.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import "@cometchat/chat-uikit-vue/dist/style.css";
 
 import { CometChatTheme, CometChatUIKit } from "@cometchat/chat-uikit-vue";
@@ -6,11 +7,11 @@ import { createApp, ref } from "vue";
 import App from "./App.vue";
 import { COMETCHAT_CONSTANTS } from "./consts";
 import CardComponent from "../src/Card/index.vue";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
 import { CometChatConversations } from "@cometchat/chat-uikit-vue";
 import { UIKitSettingsBuilder } from "@cometchat/uikit-shared";
 import { Utils } from "./utils/Utils";
 import getRouter from "./router";
-import {CometChat} from '@cometchat/chat-sdk-javascript'
 import { metaInfo } from "./metaInfo";
 
 const uiKitSettings = new UIKitSettingsBuilder()
@@ -20,9 +21,13 @@ const uiKitSettings = new UIKitSettingsBuilder()
   .subscribePresenceForFriends()
   .build();
 
-CometChatUIKit.init(uiKitSettings)!
-  .then(() => {
-    try{CometChat.setDemoMetaInfo(metaInfo)}catch(err){}
+CometChatUIKit.init(uiKitSettings)
+  ?.then(() => {
+    try {
+      CometChat.setDemoMetaInfo(metaInfo);
+    } catch (err) {
+      console.log(err);
+    }
     const app = createApp(App);
     app.component("CometChatConversations", CometChatConversations);
     //global registration of vue component

metaInfo.ts

@@ -1,6 +1,6 @@
 export const metaInfo = {
-    name:"cometchat-chat-sample-app-vue",
-    version:"4.0.1",
-    type:"sample",
-    platform:"Vue"
-}
+  name: "cometchat-chat-sample-app-vue",
+  version: "4.3.1",
+  type: "sample",
+  platform: "Vue",
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cometchat-chat-sample-app-vue",
-  "version": "4.0.1",
+  "version": "4.3.1",
   "license": "SEE LICENSE IN LICENSE.md",
   "private": true,
   "scripts": {
@@ -9,7 +9,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@cometchat/chat-uikit-vue": "4.2.0",
+    "@cometchat/chat-uikit-vue": "4.3.1",
     "@cometchat/calls-sdk-javascript": "4.0.6",
     "core-js": "^3.8.3",
     "file-loader": "^6.2.0",

src/App.vue

@@ -4,11 +4,16 @@
       <router-view />
     </div>
   </Suspense>
+  <CometChatIncomingCall />
 </template>
 <script lang="ts">
+import { CometChatIncomingCall } from "@cometchat/chat-uikit-vue";
 import { computed, defineComponent, inject, onBeforeMount } from "vue";
 
 export default defineComponent({
+  components: {
+    CometChatIncomingCall,
+  },
   setup() {
     let { theme }: any = inject("theme");
     let { switchView }: any = inject("isMobileView");

src/consts.ts → src/AppConstants.ts

@@ -1,4 +1,4 @@
-export const COMETCHAT_CONSTANTS = {
+export const AppConstants = {
   APP_ID: "APP_ID",
   REGION: "REGION",
   AUTH_KEY: "AUTH_KEY",

src/Login/index.vue

@@ -6,7 +6,7 @@
           comet<b>chat</b>
         </div>
         <div class="release-tag" :style="styles.headerSubtitleStyle()">
-          4.0.0
+          <p v-text="`v${metaInfo.version}`"></p>
         </div>
       </div>
       <div class="content__section">
@@ -99,9 +99,7 @@
       </div>
     </div>
   </div>
-  <div class="footer__section" :style="styles.footerStyle()">
-    <footer>2022 &copy; CometChat</footer>
-  </div>
+  <div class="footer__section" :style="styles.footerStyle()"></div>
   <!-- loading banner -->
   <div class="spinner__wheel" v-if="inProgress">
     <div class="spinner__content">
@@ -125,7 +123,7 @@ import { defineComponent, inject, ref } from "vue";
 import "@cometchat/uikit-elements";
 import { fontHelper } from "@cometchat/uikit-resources";
 import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { COMETCHAT_CONSTANTS } from "../consts";
+import { AppConstants } from "../AppConstants";
 import { useRouter } from "vue-router";
 import { AvatarStyle } from "@cometchat/uikit-elements";
 import {
@@ -134,6 +132,7 @@ import {
   CometChatLogo,
 } from "../assets";
 import { CometChatUIKit } from "@cometchat/chat-uikit-vue";
+import { metaInfo } from "../../metaInfo";
 let buttonImage = "assets/button-opc.png";
 
 export default defineComponent({
@@ -199,7 +198,7 @@ export default defineComponent({
           user.setName(userName);
         }
         inProgress.value = true;
-        await CometChat.createUser(user, COMETCHAT_CONSTANTS.AUTH_KEY).then(
+        await CometChat.createUser(user, AppConstants.AUTH_KEY).then(
           (user) => {
             console.log("user created", user);
           },
@@ -402,6 +401,7 @@ export default defineComponent({
       inProgress,
       SpinnerSvg,
       CometChatLogo,
+      metaInfo,
     };
   },
 });

src/OptionsList/index.vue

@@ -48,7 +48,10 @@
         </CometChatList>
       </div>
     </div>
-    <footer :style="computedFooterStyle">3.0.10-pluto.beta.2</footer>
+    <footer
+      :style="computedFooterStyle"
+      v-text="`v${metaInfo.version}`"
+    ></footer>
   </div>
 </template>
 
@@ -64,6 +67,7 @@ import {
   States,
   fontHelper,
 } from "@cometchat/chat-uikit-vue";
+import { metaInfo } from "../../metaInfo";
 
 export default defineComponent({
   name: "OptionsListComponent",
@@ -153,6 +157,7 @@ export default defineComponent({
       computedOptionWrapperStyles,
       computedHeaderStyle,
       computedFooterStyle,
+      metaInfo,
     };
   },
 });

src/Signup/index.vue

@@ -6,7 +6,7 @@
           comet<b>chat</b>
         </div>
         <div class="release-tag" :style="styles.headerSubtitleStyle()">
-          4.0.0
+          <p v-text="`v${metaInfo.version}`"></p>
         </div>
       </div>
       <div class="content__section">
@@ -68,9 +68,7 @@
         </div>
         <div class="right__content" :style="styles.sectionImageStyle()"></div>
       </div>
-      <div class="footer__section">
-        <footer :style="styles.footerStyle()">2022 &copy; CometChat</footer>
-      </div>
+      <div class="footer__section"></div>
     </div>
   </div>
   <div class="spinner__wheel" v-if="inProgress">
@@ -103,6 +101,7 @@ import {
   CometChatLogo,
 } from "../assets";
 import { CometChatUIKit } from "@cometchat/chat-uikit-vue";
+import { metaInfo } from "../../metaInfo";
 
 export default defineComponent({
   name: "SignupComponent",
@@ -278,6 +277,7 @@ export default defineComponent({
       CometChatLogo,
       SpinnerSvg,
       inProgress,
+      metaInfo,
     };
   },
 });

src/main.ts

@@ -4,7 +4,7 @@ import { CometChatTheme, CometChatUIKit } from "@cometchat/chat-uikit-vue";
 import { createApp, ref } from "vue";
 
 import App from "./App.vue";
-import { COMETCHAT_CONSTANTS } from "./consts";
+import { AppConstants } from "./AppConstants";
 import CardComponent from "../src/Card/index.vue";
 import { CometChat } from "@cometchat/chat-sdk-javascript";
 import { CometChatConversations } from "@cometchat/chat-uikit-vue";
@@ -14,9 +14,9 @@ import getRouter from "./router";
 import { metaInfo } from "./metaInfo";
 
 const uiKitSettings = new UIKitSettingsBuilder()
-  .setAppId(COMETCHAT_CONSTANTS.APP_ID)
-  .setRegion(COMETCHAT_CONSTANTS.REGION)
-  .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
+  .setAppId(AppConstants.APP_ID)
+  .setRegion(AppConstants.REGION)
+  .setAuthKey(AppConstants.AUTH_KEY)
   .subscribePresenceForFriends()
   .build();