agora-appbuilder-core 2.3.0-beta.6 → 2.3.0-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "2.3.0-beta.6",
+  "version": "2.3.0-beta.9",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/Gulpfile.js

@@ -24,14 +24,33 @@ const WebpackDevServer = require('webpack-dev-server');
 const webpackConfig = require('./webpack.renderer.config');
 const webpackRsdkConfig = require('./webpack.rsdk.config');
 
-const BUILD_PATH =
-  process.env.TARGET === 'wsdk'
+const outPathArg = process.argv.indexOf('--outpath')
+getBuildPath = () => {
+  if (outPathArg == -1) {
+    return process.env.TARGET === 'wsdk'
     ? path.join(__dirname, '../Builds/web-sdk')
     : process.env.TARGET === 'rsdk'
     ? path.join(__dirname, '../Builds/react-sdk')
     : process.env.TARGET === 'android'
     ? path.join(__dirname, '../Builds/android')
     : path.join(__dirname, '../Builds/.electron');
+  } else {
+    return process.argv[outPathArg+1].split('/').slice(0, -1).join('/')
+  }
+}
+const BUILD_PATH = getBuildPath();
+const TS_DEFS_BUILD_PATH = process.env.TARGET === 'wsdk'
+? path.join(__dirname, '../Builds/ts-defs/web-sdk')
+: process.env.TARGET === 'rsdk'
+? path.join(__dirname, '../Builds/ts-defs/react-sdk')
+: process.env.TARGET === 'android'
+? path.join(__dirname, '../Builds/ts-defs/android')
+: path.join(__dirname, '../Builds/ts-defs/.electron');
+
+const pkgNameArg = process.argv.indexOf('--pkgname')
+const PACKAGE_NAME = pkgNameArg == -1
+  ?  'agora-app-builder-sdk'
+  : process.argv[pkgNameArg+1]
 
 let PRODUCT_NAME;
 
@@ -73,7 +92,7 @@ const general = {
     });
 
     let newPackage = {
-      name: 'agora-app-builder-sdk',
+      name: PACKAGE_NAME,
       version,
       private,
       author,
@@ -129,6 +148,15 @@ const general = {
   typescriptClean: () => {
     return del([`${path.join(BUILD_PATH, '../', '/')}*.d.ts`], {force: true});
   },
+  genTsDefs: (cb) => {
+    runCli(`mkdir -p ${TS_DEFS_BUILD_PATH} && cp ${BUILD_PATH}/index.d.ts ${TS_DEFS_BUILD_PATH}/index.d.ts`, cb);
+  },
+  useTsDefs: (cb) => {
+    runCli(`cp ${TS_DEFS_BUILD_PATH}/index.d.ts ${BUILD_PATH}/index.d.ts`, cb)
+  },
+  npmPack: (cb) => {
+    runCli(`cd ${BUILD_PATH} && npm pack`, cb)
+  }
 };
 
 const electron = {
@@ -167,7 +195,18 @@ const reactSdk = {
     runCli('webpack --config ./webpack.rsdk.config.js', cb);
   },
   esbuild: (cb) => {
-    runCli('go build -o ../esbuild-bin/rsdk ./esbuild.rsdk.go && ../esbuild-bin/rsdk', cb);
+    let outPath = '';
+    if (outPathArg != -1) {
+      outPath = ` --outpath ${process.argv[outPathArg+1]}`
+    }
+    let configTransformerPath = '';
+    const configTransformerPathArg = process.argv.indexOf('--configtransformerpath')
+    if (configTransformerPathArg != -1) {
+      configTransformerPath = ` --configtransformerpath ${process.argv[configTransformerPathArg+1]}`
+    }
+    let esbuildCmd = `go build -o ../esbuild-bin/rsdk ./esbuild.rsdk.go && ../esbuild-bin/rsdk${outPath}${configTransformerPath}`
+    console.log(esbuildCmd)
+    runCli(esbuildCmd, cb);
   },
   typescript: (cb) => {
     runCli(
@@ -189,9 +228,6 @@ const reactSdk = {
       .pipe(replace('"fpe-api"', '"fpe-api/index"'))
       .pipe(header('// @ts-nocheck\n'))
       .pipe(dest(BUILD_PATH));
-  },
-  npmPack: (cb) => {
-    runCli('cd ../Builds/react-sdk && npm pack',cb)
   }
 };
 
@@ -284,7 +320,7 @@ module.exports.reactSdk = series(
   reactSdk.typescript,
   reactSdk.typescriptFix,
   general.typescriptClean,
-  reactSdk.npmPack,
+  general.npmPack,
 );
 
 // react-sdk-esbuild
@@ -298,7 +334,31 @@ module.exports.reactSdkEsbuild = series (
   reactSdk.typescript,
   reactSdk.typescriptFix,
   general.typescriptClean,
-  reactSdk.npmPack,
+  general.npmPack,
+)
+
+// generate typescript definitions
+module.exports.makeRsdkTsDefs = series (
+  general.clean,
+  general.createBuildDirectory,
+  general.packageJson,
+  reactSdk.esbuild,
+  general.typescript,
+  general.typescriptFix,
+  reactSdk.typescript,
+  reactSdk.typescriptFix,
+  general.typescriptClean,
+  general.genTsDefs,
+)
+
+// react-sdk-esbuild with cached type definitions
+module.exports.reactSdkEsbuildCachedTsc = series (
+  general.clean,
+  general.createBuildDirectory,
+  general.packageJson,
+  reactSdk.esbuild,
+  general.useTsDefs,
+  general.npmPack,
 )
 
 // web-sdk
@@ -316,7 +376,35 @@ module.exports.webSdk = series(
       general.typescriptClean,
     ),
   ),
-  webSdk.npmPack,
+  general.npmPack,
+);
+
+module.exports.makeWsdkTsDefs = series(
+  general.clean,
+  general.createBuildDirectory,
+  general.packageJson,
+  parallel(
+    webSdk.webpack,
+    series(
+      general.typescript,
+      general.typescriptFix,
+      webSdk.typescript,
+      webSdk.typescriptFix,
+      general.typescriptClean,
+    ),
+  ),
+  general.genTsDefs,
+);
+
+module.exports.webSdkCachedTsc = series(
+  general.clean,
+  general.createBuildDirectory,
+  general.packageJson,
+  parallel(
+    webSdk.webpack,
+    general.useTsDefs,
+  ),
+  general.npmPack,
 );
 
 module.exports.androidUnix = series(
@@ -334,7 +422,7 @@ module.exports.androidWin = series(
 );
 
 module.exports.test = series(
-  reactSdk.npmPack,
+  general.npmPack,
   // general.typescript,
   // general.typescriptFix,
   // reactSdk.typescript,

package/template/_package-lock.json

@@ -6631,9 +6631,9 @@
       }
     },
     "node_modules/acorn": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "version": "8.8.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
+      "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==",
       "dev": true,
       "bin": {
         "acorn": "bin/acorn"
@@ -12231,6 +12231,18 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/espree/node_modules/acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
@@ -20243,6 +20255,18 @@
         }
       }
     },
+    "node_modules/jsdom/node_modules/acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/jsdom/node_modules/tough-cookie": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-3.0.1.tgz",
@@ -26213,6 +26237,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/stacktrace-parser/node_modules/type-fest": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.7.1.tgz",
+      "integrity": "sha512-Ne2YiiGN8bmrmJJEuTWTLJR32nh/JdL1+PSicowtNb0WFpn59GK8/lfD61bVtzguz7b3PBt74nxpv/Pw5po5Rg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/stat-mode": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/stat-mode/-/stat-mode-1.0.0.tgz",
@@ -26770,18 +26802,6 @@
         }
       }
     },
-    "node_modules/terser-webpack-plugin/node_modules/acorn": {
-      "version": "8.8.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
-      "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==",
-      "dev": true,
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/terser-webpack-plugin/node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -27325,11 +27345,17 @@
       }
     },
     "node_modules/type-fest": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.7.1.tgz",
-      "integrity": "sha512-Ne2YiiGN8bmrmJJEuTWTLJR32nh/JdL1+PSicowtNb0WFpn59GK8/lfD61bVtzguz7b3PBt74nxpv/Pw5po5Rg==",
+      "version": "2.18.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.18.0.tgz",
+      "integrity": "sha512-pRS+/yrW5TjPPHNOvxhbNZexr2bS63WjrMU8a+VzEBhUi9Tz1pZeD+vQz3ut0svZ46P+SRqMEPnJmk2XnvNzTw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
-        "node": ">=8"
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/type-is": {
@@ -28750,18 +28776,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/webpack/node_modules/acorn": {
-      "version": "8.8.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
-      "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==",
-      "dev": true,
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/webpack/node_modules/enhanced-resolve": {
       "version": "5.10.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz",
@@ -34323,9 +34337,9 @@
       }
     },
     "acorn": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "version": "8.8.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
+      "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==",
       "dev": true
     },
     "acorn-globals": {
@@ -38670,6 +38684,14 @@
         "acorn": "^7.1.1",
         "acorn-jsx": "^5.2.0",
         "eslint-visitor-keys": "^1.1.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+          "dev": true
+        }
       }
     },
     "esprima": {
@@ -44861,6 +44883,12 @@
         "xml-name-validator": "^3.0.0"
       },
       "dependencies": {
+        "acorn": {
+          "version": "7.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+          "dev": true
+        },
         "tough-cookie": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-3.0.1.tgz",
@@ -49666,6 +49694,13 @@
       "integrity": "sha512-KJP1OCML99+8fhOHxwwzyWrlUuVX5GQ0ZpJTd1DFXhdkrvg1szxfHhawXUZ3g9TkXORQd4/WG68jMlQZ2p8wlg==",
       "requires": {
         "type-fest": "^0.7.1"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "0.7.1",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.7.1.tgz",
+          "integrity": "sha512-Ne2YiiGN8bmrmJJEuTWTLJR32nh/JdL1+PSicowtNb0WFpn59GK8/lfD61bVtzguz7b3PBt74nxpv/Pw5po5Rg=="
+        }
       }
     },
     "stat-mode": {
@@ -50094,12 +50129,6 @@
         "terser": "^5.7.2"
       },
       "dependencies": {
-        "acorn": {
-          "version": "8.8.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
-          "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==",
-          "dev": true
-        },
         "has-flag": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -50515,9 +50544,12 @@
       "dev": true
     },
     "type-fest": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.7.1.tgz",
-      "integrity": "sha512-Ne2YiiGN8bmrmJJEuTWTLJR32nh/JdL1+PSicowtNb0WFpn59GK8/lfD61bVtzguz7b3PBt74nxpv/Pw5po5Rg=="
+      "version": "2.18.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.18.0.tgz",
+      "integrity": "sha512-pRS+/yrW5TjPPHNOvxhbNZexr2bS63WjrMU8a+VzEBhUi9Tz1pZeD+vQz3ut0svZ46P+SRqMEPnJmk2XnvNzTw==",
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "type-is": {
       "version": "1.6.18",
@@ -51167,12 +51199,6 @@
         "webpack-sources": "^3.2.3"
       },
       "dependencies": {
-        "acorn": {
-          "version": "8.8.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
-          "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==",
-          "dev": true
-        },
         "enhanced-resolve": {
           "version": "5.10.0",
           "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz",

package/template/esbuild.rsdk.go

@@ -1,6 +1,7 @@
 package main
 
 import (
+	"flag"
 	"log"
 	"os"
 	"path/filepath"
@@ -9,6 +10,11 @@ import (
 	"github.com/evanw/esbuild/pkg/api"
 )
 
+type ioPaths struct {
+	outPath               string
+	configTransformerPath string
+}
+
 func commonAliasResolver() api.Plugin {
 	aliasResolvers := api.Plugin{
 		Name: "importAliases",
@@ -152,7 +158,7 @@ func commonLoader() map[string]api.Loader {
 	return loader
 }
 
-func common() api.BuildOptions {
+func common(iopath *ioPaths) api.BuildOptions {
 	commonBuildOpts := api.BuildOptions{
 		// we can safely ignore (webpack) plugins for now because they seem to be used only for not reactsdk
 
@@ -164,14 +170,14 @@ func common() api.BuildOptions {
 		Define: map[string]string{
 			"$config": "config",
 		},
-		Inject: []string{"./esbuildConfigTransform.js"},
+		Inject: []string{iopath.configTransformerPath},
 	}
 
 	return commonBuildOpts
 }
 
-func rsdk() api.BuildResult {
-	commonBuildOpts := common()
+func rsdk(iopath *ioPaths) api.BuildResult {
+	commonBuildOpts := common(iopath)
 	rsdkBuildOpts := api.BuildOptions{
 		// build options common to rsdk and other components
 		Plugins:           commonBuildOpts.Plugins,
@@ -197,7 +203,7 @@ func rsdk() api.BuildResult {
 		// bundle in cjs format because this index.js is meant to be used by other host applications
 		// like webpack which runs on node
 		Format:  api.FormatCommonJS,
-		Outfile: "../Builds/react-sdk/index.js",
+		Outfile: iopath.outPath,
 
 		// other esbuild options
 		Write:             true,
@@ -215,7 +221,15 @@ func rsdk() api.BuildResult {
 }
 
 func main() {
-	rsdkRes := rsdk()
+	outPath := flag.String("outpath", "../Builds/react-sdk/index.js", "path to write bundled js file")
+	configTransformerPath := flag.String("configtransformerpath", "./esbuildConfigTransform.js", "path to inject file")
+	flag.Parse()
+	iopath := &ioPaths{
+		outPath:               *outPath,
+		configTransformerPath: *configTransformerPath,
+	}
+	log.Println("esbuild args = ", iopath)
+	rsdkRes := rsdk(iopath)
 	if len(rsdkRes.Errors) > 0 {
 		spew.Dump(rsdkRes)
 		log.Fatalln("build failed")

package/template/fpe-api/components.ts

@@ -18,6 +18,7 @@ export {
   ParticipantsView,
   Controls,
   ControlsComponentsArray,
+  ChatBubble,
 } from '../src/pages/video-call/index';
 export {default as GridLayout} from '../src/components/GridVideo';
 export {default as PinnedLayout} from '../src/components/PinnedVideo';

package/template/fpe-api/typeDefinition.ts

@@ -45,10 +45,13 @@ export interface PreCallInterface extends BeforeAndAfterInterface {
   joinButton?: React.ComponentType;
   textBox?: React.ComponentType;
 }
-export interface ChatCmpInterface extends BeforeAndAfterInterface {
+export interface ChatCmpInterface {
+  //commented for v1 release
+  //extends BeforeAndAfterInterface
   chatBubble?: React.ComponentType<ChatBubbleProps>;
-  chatInput?: React.ComponentType<ChatTextInputProps>;
-  chatSentButton?: React.ComponentType<ChatSendButtonProps>;
+  //commented for v1 release
+  //chatInput?: React.ComponentType<ChatTextInputProps>;
+  //chatSentButton?: React.ComponentType<ChatSendButtonProps>;
 }
 
 export interface renderComponentInterface {
@@ -85,8 +88,7 @@ export interface VideoCallInterface extends BeforeAndAfterInterface {
   //settingsPanel?: React.ComponentType;
   participantsPanel?: React.ComponentType;
   bottomBar?: React.ComponentType;
-  // commented for v1 release
-  //chat?: ChatCmpInterface;
+  chat?: ChatCmpInterface;
   customContent?: renderComponentObjectInterface;
   customLayout?: (layouts: layoutObjectType[]) => layoutObjectType[];
 }

package/template/fpe-api/utils.ts

@@ -22,8 +22,7 @@ export {default as useIsAudioEnabled} from '../src/utils/isAudioEnabled';
 export {default as useIsVideoEnabled} from '../src/utils/isVideoEnabled';
 export {default as useSetName} from '../src/utils/useSetName';
 export {default as useGetName} from '../src/utils/useGetName';
-// commented for v1 release
-//export {useSidePanel} from '../src/utils/useSidePanel';
+export {useSidePanel} from '../src/utils/useSidePanel';
 // commented for v1 release
 // export {
 //   default as useUnreadMessageCount,

package/template/package.json

@@ -18,7 +18,6 @@
     "web-sdk:build": "cross-env TARGET=wsdk NODE_ENV=production gulp webSdk",
     "react-sdk": "cross-env TARGET=rsdk NODE_ENV=development gulp reactSdk",
     "react-sdk:build": "cross-env TARGET=rsdk NODE_ENV=production gulp reactSdk",
-    "react-sdk-esbuild": "cross-env TARGET=rsdk NODE_ENV=production gulp reactSdkEsbuild",
     "electron:start": "cross-env NODE_ENV=development gulp electron_development",
     "electron:build": "cross-env NODE_ENV=production gulp electron_build",
     "windows": "cross-env TARGET=windows npm run electron:start",
@@ -32,7 +31,9 @@
     "icons:android": "react-native set-icon --path ./build/icon.png",
     "icons:ios": "react-native set-icon --path ./build/icon.png",
     "package:mac": "npm run mac:build && electron-builder --publish=always",
-    "release": "electron-builder --mac --windows --linux --publish always --config ./electron-builder.js "
+    "release": "electron-builder --mac --windows --linux --publish always --config ./electron-builder.js ",
+    "make-rsdk-ts-defs": "cross-env TARGET=rsdk NODE_ENV=production gulp makeRsdkTsDefs",
+    "make-wsdk-ts-defs": "cross-env TARGET=wsdk NODE_ENV=production gulp makeWsdkTsDefs"
   },
   "publish": [
     {

package/template/src/components/ChatContext.ts

@@ -18,6 +18,12 @@ export interface ChatBubbleProps {
   message: string;
   timestamp: string;
   uid: UidType;
+  render?: (
+    isLocal: boolean,
+    message: string,
+    timestamp: string,
+    uid: UidType,
+  ) => JSX.Element;
 }
 
 export interface messageStoreInterface {
@@ -58,8 +64,6 @@ export interface chatContext {
   engine: RtmEngine;
   localUid: UidType;
   onlineUsersCount: number;
-  displayName: string;
-  setDisplayName: React.Dispatch<SetStateAction<string>>;
 }
 
 export enum controlMessageEnum {

package/template/src/components/RTMConfigure.tsx

@@ -33,6 +33,9 @@ import {
 import {EventUtils, EventsQueue, eventMessageType} from '../rtm-events';
 import RTMEngine from '../rtm/RTMEngine';
 import {filterObject} from '../utils';
+import CustomEvents, {EventLevel} from '../custom-events';
+import {EventNames} from '../rtm-events';
+import useLocalScreenShareUid from '../utils/useLocalShareScreenUid';
 
 export enum UserType {
   ScreenShare = 'screenshare',
@@ -56,6 +59,7 @@ const parsePayload = (data: string) => {
 
 const RtmConfigure = (props: any) => {
   const localUid = useLocalUid();
+  const screenShareUid = useLocalScreenShareUid();
   const {callActive} = props;
   const {rtcProps} = useContext(PropsContext);
   const {RtcEngine, dispatch} = useContext(RtcContext);
@@ -75,21 +79,6 @@ const RtmConfigure = (props: any) => {
     renderListRef.current.renderList = renderList;
   }, [renderList]);
 
-  const {store, setStore} = useContext(StorageContext);
-  const getInitialUsername = () =>
-    store?.displayName ? store.displayName : '';
-  const [displayName, setDisplayName] = useState(getInitialUsername());
-
-  //Update the store displayName value if the state is changed
-  useEffect(() => {
-    setStore((prevState) => {
-      return {
-        ...prevState,
-        displayName,
-      };
-    });
-  }, [displayName]);
-
   const [login, setLogin] = useState<boolean>(false);
 
   const [hasUserJoinedRTM, setHasUserJoinedRTM] = useState<boolean>(false);
@@ -145,7 +134,6 @@ const RtmConfigure = (props: any) => {
 
   const setAttribute = async () => {
     const rtmAttributes = [
-      {key: 'name', value: displayName || userText},
       {key: 'screenUid', value: String(rtcProps.screenShareUid)},
     ];
     try {
@@ -227,10 +215,6 @@ const RtmConfigure = (props: any) => {
                 const screenUid = parseInt(attr?.attributes?.screenUid);
                 //start - updating user data in rtc
                 const userData = {
-                  name:
-                    String(member.uid)[0] === '1'
-                      ? pstnUserLabel
-                      : attr?.attributes?.name || userText,
                   screenUid: screenUid,
                   //below thing for livestreaming
                   type: 'rtc',
@@ -240,7 +224,6 @@ const RtmConfigure = (props: any) => {
 
                 //start - updating screenshare data in rtc
                 const screenShareUser = {
-                  name: getScreenShareName(attr?.attributes?.name || userText),
                   type: UserType.ScreenShare,
                 };
                 updateRenderListState(screenUid, screenShareUser);
@@ -329,10 +312,6 @@ const RtmConfigure = (props: any) => {
           const screenUid = parseInt(attr?.attributes?.screenUid);
           //start - updating user data in rtc
           const userData = {
-            name:
-              String(data.uid)[0] === '1'
-                ? pstnUserLabel
-                : attr?.attributes?.name || userText,
             screenUid: screenUid,
             //below thing for livestreaming
             type: 'rtc',
@@ -342,7 +321,6 @@ const RtmConfigure = (props: any) => {
 
           //start - updating screenshare data in rtc
           const screenShareUser = {
-            name: getScreenShareName(attr?.attributes?.name || userText),
             type: UserType.ScreenShare,
           };
           updateRenderListState(screenUid, screenShareUser);
@@ -602,8 +580,6 @@ const RtmConfigure = (props: any) => {
         engine: engine.current,
         localUid: localUid,
         onlineUsersCount,
-        setDisplayName,
-        displayName,
       }}>
       {login ? props.children : <></>}
     </ChatContext.Provider>

package/template/src/components/precall/textInput.tsx

@@ -30,7 +30,7 @@ const PreCallTextInput: React.FC = () => {
   return (
     <TextInput
       value={username}
-      onChangeText={(text) => setUsername(text ? text.trim() : '')}
+      onChangeText={(text) => setUsername(text ? text : '')}
       onSubmitEditing={() => {}}
       placeholder={
         isJoinDataFetched ? userNamePlaceholder : fetchingNamePlaceholder

package/template/src/components/useShareLink.tsx

@@ -148,7 +148,7 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
       if (baseURL) {
         stringToCopy += `${baseURL}/${meetingPassphrase.attendee}`;
       } else {
-        stringToCopy += `${meetingIdText}: ${meetingPassphrase.attendee}`;
+        stringToCopy += `${meetingPassphrase.attendee}`;
       }
     }
     return stringToCopy;
@@ -161,7 +161,7 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
       if (baseURL) {
         stringToCopy += `${baseURL}/${meetingPassphrase.host}`;
       } else {
-        stringToCopy += `${meetingIdText}: ${meetingPassphrase.host}`;
+        stringToCopy += `${meetingPassphrase.host}`;
       }
     }
     return stringToCopy;

package/template/src/components/useUserPreference.tsx

@@ -0,0 +1,125 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+import React, {useState, useContext, useEffect} from 'react';
+import {RenderInterface, useLocalUid} from '../../agora-rn-uikit';
+import {RtcContext} from '../../agora-rn-uikit';
+import {useString} from '../utils/useString';
+import StorageContext from './StorageContext';
+import CustomEvents, {EventLevel} from '../custom-events';
+import {EventNames} from '../rtm-events';
+import useLocalScreenShareUid from '../utils/useLocalShareScreenUid';
+import {createHook} from 'fpe-implementation';
+import ChatContext from './ChatContext';
+
+interface UserPreferenceContextInterface {
+  displayName: string;
+  setDisplayName: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const UserPreferenceContext =
+  React.createContext<UserPreferenceContextInterface>({
+    displayName: '',
+    setDisplayName: () => {},
+  });
+
+const UserPreferenceProvider = (props: {children: React.ReactNode}) => {
+  const localUid = useLocalUid();
+  const screenShareUid = useLocalScreenShareUid();
+  const {dispatch} = useContext(RtcContext);
+
+  const {store, setStore} = useContext(StorageContext);
+  const {hasUserJoinedRTM} = useContext(ChatContext);
+  const getInitialUsername = () =>
+    store?.displayName ? store.displayName : '';
+  const [displayName, setDisplayName] = useState(getInitialUsername());
+
+  //commented for v1 release
+  // const userText = useString('remoteUserDefaultLabel')();
+  const userText = 'User';
+  const pstnUserLabel = useString('pstnUserLabel')();
+  //commented for v1 release
+  //const getScreenShareName = useString('screenshareUserName');
+  const getScreenShareName = (name: string) => `${name}'s screenshare`;
+
+  useEffect(() => {
+    CustomEvents.on(EventNames.NAME_ATTRIBUTE, (data) => {
+      const value = JSON.parse(data?.payload?.value);
+      if (value) {
+        if (value?.uid) {
+          updateRenderListState(value?.uid, {
+            name:
+              String(value?.uid)[0] === '1'
+                ? pstnUserLabel
+                : value?.name || userText,
+          });
+        }
+        if (value?.screenShareUid) {
+          updateRenderListState(value?.screenShareUid, {
+            name: getScreenShareName(value?.name),
+          });
+        }
+      }
+    });
+    return () => {
+      CustomEvents.off(EventNames.NAME_ATTRIBUTE);
+    };
+  }, []);
+
+  useEffect(() => {
+    //Update the store displayName value if the state is changed
+    setStore((prevState) => {
+      return {
+        ...prevState,
+        displayName,
+      };
+    });
+
+    //update local state for user and screenshare
+    updateRenderListState(localUid, {name: displayName});
+    updateRenderListState(screenShareUid, {
+      name: getScreenShareName(displayName),
+    });
+
+    if (hasUserJoinedRTM) {
+      //update remote state for user and screenshare
+      CustomEvents.send(EventNames.NAME_ATTRIBUTE, {
+        value: JSON.stringify({
+          uid: localUid,
+          screenShareUid: screenShareUid,
+          name: displayName,
+        }),
+        level: EventLevel.LEVEL2,
+      });
+    }
+  }, [displayName, hasUserJoinedRTM]);
+
+  const updateRenderListState = (
+    uid: number,
+    data: Partial<RenderInterface>,
+  ) => {
+    dispatch({type: 'UpdateRenderList', value: [uid, data]});
+  };
+
+  return (
+    <UserPreferenceContext.Provider
+      value={{
+        setDisplayName,
+        displayName,
+      }}>
+      {props.children}
+    </UserPreferenceContext.Provider>
+  );
+};
+
+const useUserPreference = createHook(UserPreferenceContext);
+
+export {useUserPreference, UserPreferenceProvider};

package/template/src/pages/VideoCall.tsx

@@ -52,6 +52,7 @@ import {WhiteboardProvider} from '../components/contexts/WhiteboardContext';
 import {useWakeLock} from '../components/useWakeLock';
 import StorageContext from '../components/StorageContext';
 import SDKEvents from '../utils/SdkEvents';
+import {UserPreferenceProvider} from '../components/useUserPreference';
 
 enum RnEncryptionEnum {
   /**
@@ -210,51 +211,53 @@ const VideoCall: React.FC = () => {
                             <RtmConfigure
                               setRecordingActive={setRecordingActive}
                               callActive={callActive}>
-                              <WhiteboardProvider>
-                                <LayoutProvider
-                                  value={{
-                                    activeLayoutName,
-                                    setActiveLayoutName,
-                                  }}>
-                                  <RecordingProvider
+                              <UserPreferenceProvider>
+                                <WhiteboardProvider>
+                                  <LayoutProvider
                                     value={{
-                                      setRecordingActive,
-                                      isRecordingActive,
+                                      activeLayoutName,
+                                      setActiveLayoutName,
                                     }}>
-                                    <ScreenshareConfigure>
-                                      <LiveStreamContextProvider
-                                        value={{
-                                          setRtcProps,
-                                          rtcProps,
-                                          callActive,
-                                        }}>
-                                        <LiveStreamDataProvider>
-                                          <LocalUserContext
-                                            localUid={rtcProps?.uid || 0}>
-                                            <CustomUserContextHolder>
-                                              <NetworkQualityProvider>
-                                                {callActive ? (
-                                                  <VideoCallScreen />
-                                                ) : $config.PRECALL ? (
-                                                  <PreCallProvider
-                                                    value={{
-                                                      callActive,
-                                                      setCallActive,
-                                                    }}>
-                                                    <Precall />
-                                                  </PreCallProvider>
-                                                ) : (
-                                                  <></>
-                                                )}
-                                              </NetworkQualityProvider>
-                                            </CustomUserContextHolder>
-                                          </LocalUserContext>
-                                        </LiveStreamDataProvider>
-                                      </LiveStreamContextProvider>
-                                    </ScreenshareConfigure>
-                                  </RecordingProvider>
-                                </LayoutProvider>
-                              </WhiteboardProvider>
+                                    <RecordingProvider
+                                      value={{
+                                        setRecordingActive,
+                                        isRecordingActive,
+                                      }}>
+                                      <ScreenshareConfigure>
+                                        <LiveStreamContextProvider
+                                          value={{
+                                            setRtcProps,
+                                            rtcProps,
+                                            callActive,
+                                          }}>
+                                          <LiveStreamDataProvider>
+                                            <LocalUserContext
+                                              localUid={rtcProps?.uid || 0}>
+                                              <CustomUserContextHolder>
+                                                <NetworkQualityProvider>
+                                                  {callActive ? (
+                                                    <VideoCallScreen />
+                                                  ) : $config.PRECALL ? (
+                                                    <PreCallProvider
+                                                      value={{
+                                                        callActive,
+                                                        setCallActive,
+                                                      }}>
+                                                      <Precall />
+                                                    </PreCallProvider>
+                                                  ) : (
+                                                    <></>
+                                                  )}
+                                                </NetworkQualityProvider>
+                                              </CustomUserContextHolder>
+                                            </LocalUserContext>
+                                          </LiveStreamDataProvider>
+                                        </LiveStreamContextProvider>
+                                      </ScreenshareConfigure>
+                                    </RecordingProvider>
+                                  </LayoutProvider>
+                                </WhiteboardProvider>
+                              </UserPreferenceProvider>
                             </RtmConfigure>
                           </ScreenShareProvider>
                         </SidePanelProvider>

package/template/src/rtm-events/constants.ts

@@ -26,7 +26,8 @@ const ROLE_ATTRIBUTE = 'role';
 // 3. CHAT MESSAGES
 const PUBLIC_CHAT_MESSAGE = 'PUBLIC_CHAT_MESSAGE';
 const PRIVATE_CHAT_MESSAGE = 'PRIVATE_CHAT_MESSAGE';
-
+// 4. NAME ATTRIBUTE
+const NAME_ATTRIBUTE = 'name';
 const EventNames = {
   RECORDING_ATTRIBUTE,
   RAISED_ATTRIBUTE,
@@ -34,6 +35,7 @@ const EventNames = {
   PUBLIC_CHAT_MESSAGE,
   PRIVATE_CHAT_MESSAGE,
   SCREENSHARE_ATTRIBUTE,
+  NAME_ATTRIBUTE,
 };
 /** ***** EVENT NAMES ENDS ***** */
 

package/template/src/subComponents/ChatBubble.tsx

@@ -36,7 +36,9 @@ const ChatBubble = (props: ChatBubbleProps) => {
   //commented for v1 release
   //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
   const remoteUserDefaultLabel = 'User';
-  return (
+  return props?.render ? (
+    props.render(isLocal, message, timestamp, uid)
+  ) : (
     <View>
       <View style={isLocal ? style.chatSenderViewLocal : style.chatSenderView}>
         <Text style={isLocal ? style.timestampTextLocal : style.timestampText}>

package/template/src/subComponents/ChatContainer.tsx

@@ -26,7 +26,7 @@ import {useLocalUid} from '../../agora-rn-uikit';
 import {ImageIcon} from '../../agora-rn-uikit';
 import TextWithTooltip from './TextWithTooltip';
 import {useFpe} from 'fpe-api';
-import {isWeb} from '../utils/common';
+import {isValidReactComponent, isWeb} from '../utils/common';
 import {useString} from '../utils/useString';
 import {useChatUIControl} from '../components/chat-ui/useChatUIControl';
 import useUserList from '../utils/useUserList';
@@ -66,20 +66,20 @@ const ChatContainer = (props: any) => {
       data?.components?.videoCall &&
       typeof data?.components?.videoCall === 'object'
     ) {
-      // commented for v1 release
-      // if (
-      //   data?.components?.videoCall?.chat &&
-      //   typeof data?.components?.videoCall?.chat === 'object'
-      // ) {
-      //   if (
-      //     data?.components?.videoCall?.chat?.chatBubble &&
-      //     typeof data?.components?.videoCall?.chat?.chatBubble !== 'object' &&
-      //     isValidReactComponent(data?.components?.videoCall?.chat?.chatBubble)
-      //   ) {
-      //     components.ChatBubbleComponent =
-      //       data?.components?.videoCall?.chat?.chatBubble;
-      //   }
-      // }
+      //commented for v1 release
+      if (
+        data?.components?.videoCall?.chat &&
+        typeof data?.components?.videoCall?.chat === 'object'
+      ) {
+        if (
+          data?.components?.videoCall?.chat?.chatBubble &&
+          typeof data?.components?.videoCall?.chat?.chatBubble !== 'object' &&
+          isValidReactComponent(data?.components?.videoCall?.chat?.chatBubble)
+        ) {
+          components.ChatBubbleComponent =
+            data?.components?.videoCall?.chat?.chatBubble;
+        }
+      }
     }
     return components;
   });

package/template/src/utils/useGetName.ts

@@ -9,11 +9,10 @@
  information visit https://appbuilder.agora.io.
 *********************************************
 */
-import {useContext} from 'react';
-import ChatContext from '../components/ChatContext';
+import {useUserPreference} from '../components/useUserPreference';
 
 function useGetName() {
-  const {displayName} = useContext(ChatContext);
+  const {displayName} = useUserPreference();
   return displayName;
 }
 

package/template/src/utils/useLocalShareScreenUid.ts

@@ -0,0 +1,19 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+import {useContext} from 'react';
+import {PropsContext} from '../../agora-rn-uikit';
+
+const useLocalScreenShareUid = () => {
+  const {rtcProps} = useContext(PropsContext);
+  return rtcProps?.screenShareUid || 0;
+};
+export default useLocalScreenShareUid;

package/template/src/utils/useSetName.ts

@@ -9,11 +9,9 @@
  information visit https://appbuilder.agora.io.
 *********************************************
 */
-import {useContext} from 'react';
-import ChatContext from '../components/ChatContext';
-
+import {useUserPreference} from '../components/useUserPreference';
 function useSetName() {
-  const {setDisplayName} = useContext(ChatContext);
+  const {setDisplayName} = useUserPreference();
   return setDisplayName;
 }