agora-appbuilder-core 4.0.35 → 4.1.0-beta-2

package/template/src/pages/video-call/VideoCallMobileView.tsx

@@ -203,7 +203,9 @@ const VideoCallView = React.memo(() => {
       BottombarProps: {},
       TopbarComponent: NavbarMobile,
       TopbarProps: {},
-      VideocallWrapper: ContainerView,
+      VideocallWrapper: $config.ENABLE_CONVERSATIONAL_AI
+        ? ContainerView
+        : React.Fragment,
     };
     if (
       data?.components?.videoCall &&
@@ -254,7 +256,7 @@ const VideoCallView = React.memo(() => {
   });
 
   return (
-    <>
+    <VideocallWrapper>
       <ToolbarProvider value={{position: ToolbarPosition.top}}>
         {Object.keys(TopbarProps)?.length ? (
           <TopbarComponent items={TopbarProps} includeDefaultItems={false} />
@@ -274,11 +276,20 @@ const VideoCallView = React.memo(() => {
               includeDefaultItems={false}
             />
           ) : (
-            <BottombarComponent />
+            <>
+              <BottombarComponent />
+              <ActionSheet
+                includeDefaultItems={false}
+                items={{}}
+                hideDefaultActionSheet={
+                  $config.ENABLE_CONVERSATIONAL_AI ? true : false
+                }
+              />
+            </>
           )}
         </ActionSheetProvider>
       </ToolbarProvider>
-    </>
+    </VideocallWrapper>
   );
 });
 
@@ -286,7 +297,7 @@ export default VideoCallMobileView;
 
 const styles = StyleSheet.create({
   container: {
-    paddingHorizontal: 16,
+    paddingHorizontal: $config.ENABLE_CONVERSATIONAL_AI ? 20 : 16,
     paddingVertical: 20,
     flex: 1,
   },
@@ -299,7 +310,7 @@ const styles = StyleSheet.create({
     paddingVertical: 2,
   },
   videoView: {
-    flex: 0.85,
+    flex: $config.ENABLE_CONVERSATIONAL_AI ? (isMobileUA() ? 1 : 0.85) : 0.85,
     zIndex: 0,
     elevation: 0,
   },

package/template/src/pages/video-call/VideoCallScreen.tsx

@@ -264,7 +264,6 @@ const VideoCallScreen = () => {
           data?.components?.videoCall.virtualBackgroundPanel;
       }
 
-      //todo hari - need to remove wrapper
       if (
         data?.components?.videoCall.wrapper &&
         typeof data?.components?.videoCall.wrapper !== 'object' &&

package/template/src/pages/video-call/VideoRenderer.tsx

@@ -1,5 +1,5 @@
 import React, {useState, useRef, useContext, useEffect} from 'react';
-import {View, StyleSheet, useWindowDimensions} from 'react-native';
+import {View, StyleSheet, useWindowDimensions, ViewStyle} from 'react-native';
 import {
   PropsContext,
   DispatchContext,
@@ -10,7 +10,13 @@ import {MaxVideoView} from '../../../agora-rn-uikit';
 import FallbackLogo from '../../subComponents/FallbackLogo';
 import NetworkQualityPill from '../../subComponents/NetworkQualityPill';
 import NameWithMicIcon from './NameWithMicIcon';
-import {useLayout, useContent, useRtc, customEvents} from 'customization-api';
+import {
+  useLayout,
+  useContent,
+  useRtc,
+  useSpotlight,
+  customEvents,
+} from 'customization-api';
 import {
   DefaultLayouts,
   getGridLayoutName,
@@ -39,15 +45,24 @@ import {
 } from '../../language/default-labels/videoCallScreenLabels';
 import {LogSource, logger} from '../../logger/AppBuilderLogger';
 import {useFullScreen} from '../../utils/useFullScreen';
+import SpotlightHighligher from './SpotlightHighlighter';
 export interface VideoRendererProps {
   user: ContentInterface;
   isMax?: boolean;
   CustomChild?: React.ComponentType;
+  avatarRadius?: number;
+  hideMenuOptions?: boolean;
+  containerStyle?: ViewStyle;
+  innerContainerStyle?: ViewStyle;
 }
 const VideoRenderer: React.FC<VideoRendererProps> = ({
   user,
   isMax = false,
   CustomChild,
+  avatarRadius = 100,
+  hideMenuOptions = false,
+  containerStyle = {},
+  innerContainerStyle = {},
 }) => {
   const {height, width} = useWindowDimensions();
   const {requestFullscreen} = useFullScreen();
@@ -67,7 +82,7 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
     isHovered &&
     currentLayout === getPinnedLayoutName();
   const [videoTileWidth, setVideoTileWidth] = useState(0);
-  const [avatarSize, setAvatarSize] = useState(100);
+  const [avatarSize, setAvatarSize] = useState(avatarRadius);
   const videoMoreMenuRef = useRef(null);
   const [actionMenuVisible, setActionMenuVisible] = React.useState(false);
   const {setVideoTileInViewPortState} = useVideoCall();
@@ -155,6 +170,7 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
       };
     });
   };
+  const {setSpotlightUid, spotlightUid} = useSpotlight();
 
   return (
     <>
@@ -170,6 +186,8 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
         user={user}
         btnRef={videoMoreMenuRef}
         from={'video-tile'}
+        setSpotlightUid={setSpotlightUid}
+        spotlightUid={spotlightUid}
       />
       <PlatformWrapper isHovered={isHovered} setIsHovered={setIsHovered}>
         <View
@@ -179,7 +197,9 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
             },
           }) => {
             setVideoTileWidth(width);
-            setAvatarSize(Math.floor(width * 0.35));
+            setAvatarSize(
+              avatarRadius ? avatarRadius : Math.floor(width * 0.35),
+            );
           }}
           style={[
             maxStyle.container,
@@ -188,6 +208,7 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
               : user.video
               ? maxStyle.noVideoStyle
               : maxStyle.nonActiveContainerStyle,
+            containerStyle,
           ]}>
           {!showReplacePin && !showPinForMe && (
             <ScreenShareNotice uid={user.uid} isMax={isMax} />
@@ -329,6 +350,7 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
                       landscapeMode && isScreenShareOnFullView ? width : '100%',
                     borderRadius: 4,
                     overflow: 'hidden',
+                    ...innerContainerStyle,
                   }}
                   key={user.uid}
                   landscapeMode={
@@ -359,8 +381,14 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
           ) : (
             <></>
           )}
+          {$config.ENABLE_SPOTLIGHT && spotlightUid === user.uid ? (
+            <SpotlightHighligher />
+          ) : (
+            <></>
+          )}
           {!(isScreenShareOnFullView || isWhiteboardOnFullScreen) &&
           // user.uid !== rtcProps?.screenShareUid &&
+          hideMenuOptions === false &&
           (isHovered || actionMenuVisible || isMobileUA()) ? (
             <MoreMenu
               videoMoreMenuRef={videoMoreMenuRef}

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

@@ -39,6 +39,7 @@ const WHITEBOARD_ACTIVE = 'WHITEBOARD_ACTIVE';
 const BOARD_COLOR_CHANGED = 'BOARD_COLOR_CHANGED';
 const WHITEBOARD_LAST_IMAGE_UPLOAD_POSITION = 'WHITEBOARD_L_I_U_P';
 const RECORDING_DELETED = 'RECORDING_DELETED';
+const SPOTLIGHT_USER_CHANGED = 'SPOTLIGHT_USER_CHANGED';
 const EventNames = {
   RECORDING_STATE_ATTRIBUTE,
   RECORDING_STARTED_BY_ATTRIBUTE,
@@ -59,6 +60,7 @@ const EventNames = {
   BOARD_COLOR_CHANGED,
   WHITEBOARD_LAST_IMAGE_UPLOAD_POSITION,
   RECORDING_DELETED,
+  SPOTLIGHT_USER_CHANGED,
 };
 /** ***** EVENT NAMES ENDS ***** */
 

package/template/src/subComponents/ChatBubble.tsx

@@ -312,6 +312,7 @@ const ChatBubble = (props: ChatBubbleProps) => {
     scrollOffset,
     replyToMsgId,
     isLastMsg,
+    remoteUIConfig,
   } = props;
 
   const localUid = useLocalUid();
@@ -355,6 +356,18 @@ const ChatBubble = (props: ChatBubbleProps) => {
   //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
   const remoteUserDefaultLabel = useString(videoRoomUserFallbackText)();
 
+  const getUsername = () => {
+    if (isLocal) {
+      return 'You';
+    }
+    if (remoteUIConfig?.username) {
+      return trimText(remoteUIConfig?.username);
+    }
+    return defaultContent[uid]?.name
+      ? trimText(defaultContent[uid].name)
+      : remoteUserDefaultLabel;
+  };
+
   return props?.render ? (
     props.render(
       isLocal,
@@ -382,17 +395,21 @@ const ChatBubble = (props: ChatBubbleProps) => {
           style={{
             flexDirection: 'row',
             justifyContent: isLocal ? 'flex-end' : 'flex-start',
+            alignItems: 'center',
             marginBottom: 4,
             marginTop: 16,
             marginHorizontal: 12,
           }}>
-          <Text style={style.userNameStyle}>
-            {isLocal
-              ? 'You'
-              : defaultContent[uid]?.name
-              ? trimText(defaultContent[uid].name)
-              : remoteUserDefaultLabel}
-          </Text>
+          {!isLocal && remoteUIConfig?.avatarIcon && (
+            <View style={{marginRight: 5}}>
+              <ImageIcon
+                iconType="plain"
+                iconSize={24}
+                icon={remoteUIConfig?.avatarIcon}
+              />
+            </View>
+          )}
+          <Text style={style.userNameStyle}>{getUsername()}</Text>
           <Text style={style.timestampStyle}>{time}</Text>
         </View>
       ) : (!isSameUser || forceShowUserNameandTimeStamp) &&
@@ -421,7 +438,10 @@ const ChatBubble = (props: ChatBubbleProps) => {
               style={[
                 isLocal
                   ? style.chatBubbleLocalView
-                  : style.chatBubbleRemoteView,
+                  : {
+                      ...style.chatBubbleRemoteView,
+                      ...(remoteUIConfig?.bubbleStyleLayer1 || {}),
+                    },
                 isURL(message) ? {maxWidth: '88%'} : {},
               ]}>
               {isHovered && !isDeleted && (
@@ -438,7 +458,10 @@ const ChatBubble = (props: ChatBubbleProps) => {
                 style={[
                   isLocal
                     ? style.chatBubbleLocalViewLayer2
-                    : style.chatBubbleRemoteViewLayer2,
+                    : {
+                        ...style.chatBubbleRemoteViewLayer2,
+                        ...(remoteUIConfig?.bubbleStyleLayer2 || {}),
+                      },
                   type === ChatMessageType.IMAGE && style.chatBubbleViewImg,
                 ]}>
                 {isDeleted ? (
@@ -454,9 +477,7 @@ const ChatBubble = (props: ChatBubbleProps) => {
                         style.messageStyle,
                         {color: $config.SEMANTIC_NEUTRAL, marginLeft: 5},
                       ]}>
-                      {chatMsgDeletedTxt(
-                        isLocal ? 'You' : defaultContent[uid]?.name,
-                      )}
+                      {chatMsgDeletedTxt(getUsername())}
                     </Text>
                   </View>
                 ) : (
@@ -530,9 +551,7 @@ const ChatBubble = (props: ChatBubbleProps) => {
                             imageUrl={url}
                             msgId={msgId}
                             fileName={fileName}
-                            senderName={
-                              isLocal ? 'You' : defaultContent[uid]?.name
-                            }
+                            senderName={getUsername()}
                             timestamp={createdTimestamp}
                             isLocal={isLocal}
                           />

package/template/src/subComponents/FallbackLogo.tsx

@@ -102,7 +102,9 @@ export default function FallbackLogo(
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: $config.VIDEO_AUDIO_TILE_COLOR,
+    backgroundColor: $config.ENABLE_CONVERSATIONAL_AI
+      ? '#333'
+      : $config.VIDEO_AUDIO_TILE_COLOR,
     justifyContent: 'center',
   },
   // activeSpeakerBg: {

package/template/src/subComponents/LocalAudioMute.tsx

@@ -49,6 +49,9 @@ export interface LocalAudioMuteProps {
   render?: (onPress: () => void, isAudioEnabled: boolean) => JSX.Element;
   disabled?: boolean;
   showWarningIcon?: boolean;
+  iconBGColor?: string;
+  iconSize?: number;
+  containerStyle?: object;
 }
 
 function LocalAudioMute(props: LocalAudioMuteProps) {
@@ -100,12 +103,25 @@ function LocalAudioMute(props: LocalAudioMuteProps) {
     ? micButtonLabel(I18nDeviceStatus.ON)
     : micButtonLabel(I18nDeviceStatus.OFF);
 
+  let iconSize = props?.iconSize
+    ? {
+        iconSize: props?.iconSize,
+      }
+    : {};
+
+  let containerStyle = props?.containerStyle
+    ? {
+        iconContainerStyle: props?.containerStyle,
+      }
+    : {};
+
   let iconProps: IconButtonProps['iconProps'] = {
     showWarningIcon: permissionDenied && showWarningIcon ? true : false,
     name: isAudioEnabled ? 'mic-on' : 'mic-off',
-
     iconBackgroundColor: isAudioEnabled
-      ? $config.PRIMARY_ACTION_BRAND_COLOR
+      ? props?.iconBGColor
+        ? props.iconBGColor
+        : $config.PRIMARY_ACTION_BRAND_COLOR
       : '',
     tintColor: isAudioEnabled
       ? $config.PRIMARY_ACTION_TEXT_COLOR
@@ -117,6 +133,8 @@ function LocalAudioMute(props: LocalAudioMuteProps) {
     ...(props?.iconProps
       ? props.iconProps(isAudioEnabled, permissionDenied)
       : {}),
+    ...iconSize,
+    ...containerStyle,
   };
 
   let iconButtonProps: IconButtonProps = {

package/template/src/utils/index.tsx

@@ -81,10 +81,9 @@ export function isURL(str) {
   if (!str) {
     return false;
   }
-  var urlRegex =
-    '^(?!mailto:)(?:(?:http|https|ftp)://)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$';
-  var url = new RegExp(urlRegex, 'i');
-  return str.length < 2083 && url.test(str);
+  if (str?.indexOf('https') !== -1) {
+    return true;
+  }
 }
 
 export const base64ToUint8Array = (base64Str: string) => {

package/template/src/utils/useJoinRoom.ts

@@ -45,6 +45,13 @@ const JOIN_CHANNEL_PHRASE_AND_GET_USER = gql`
         rtm
         uid
       }
+      agents {
+        id
+        agent_type
+        model
+        agent_name
+        voice
+      }
     }
     getUser {
       name
@@ -88,6 +95,13 @@ const JOIN_CHANNEL_PHRASE = gql`
         rtm
         uid
       }
+      agents {
+        id
+        agent_type
+        model
+        agent_name
+        voice
+      }
     }
   }
 `;

package/template/src/utils/useSpotlight.ts

@@ -0,0 +1,31 @@
+import {DispatchContext, useContent} from 'customization-api';
+import {useContext, useEffect} from 'react';
+import {EventNames} from '../rtm-events';
+import events from '../rtm-events-api';
+
+export const useSpotlight = () => {
+  const {spotlightUid} = useContent();
+  const {dispatch} = useContext(DispatchContext);
+
+  useEffect(() => {
+    events.on(EventNames.SPOTLIGHT_USER_CHANGED, ({payload}) => {
+      if (payload) {
+        const data = JSON.parse(payload);
+        if (data && data?.user_id) {
+          setSpotlightUid(data?.user_id);
+        } else {
+          setSpotlightUid(0);
+        }
+      }
+    });
+  }, []);
+
+  const setSpotlightUid = (uid: number) => {
+    dispatch({
+      type: 'Spotlight',
+      value: [uid],
+    });
+  };
+
+  return {spotlightUid, setSpotlightUid};
+};

package/template/tsconfig.json

@@ -1,30 +1,32 @@
 {
   "compilerOptions": {
     /* Basic Options */
-    "target": "esnext",                       /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
-    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
-    "lib": ["es6", "DOM"],                           /* Specify library files to be included in the compilation. */
-    "typeRoots": [
-      "./global.d.ts"
-    ],
-    "allowJs": true,                          /* Allow javascript files to be compiled. */
+    "target": "esnext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
+    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
+    "lib": [
+      "es6",
+      "DOM",
+      "es2023"
+    ] /* Specify library files to be included in the compilation. */,
+    "typeRoots": ["./global.d.ts"],
+    "allowJs": true /* Allow javascript files to be compiled. */,
     // "checkJs": true,                       /* Report errors in .js files. */
-    "jsx": "react-native",                    /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
-    "declaration": true,                   /* Generates corresponding '.d.ts' file. */
+    "jsx": "react-native" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
+    "declaration": true /* Generates corresponding '.d.ts' file. */,
     // "sourceMap": true,                     /* Generates corresponding '.map' file. */
     // "outFile": "./",                       /* Concatenate and emit output to single file. */
     // "outDir": "./",                        /* Redirect output structure to the directory. */
     // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
     // "removeComments": true,                /* Do not emit comments to output. */
-    "noEmit": false,                           /* Do not emit outputs. */
+    "noEmit": false /* Do not emit outputs. */,
     // "incremental": true,                   /* Enable incremental compilation */
     // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
     // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
-    "isolatedModules": true,                  /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+    "isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
 
     /* Strict Type-Checking Options */
-    "strict": false,                           /* Enable all strict type-checking options. */
-    "noImplicitAny": false,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    "strict": false /* Enable all strict type-checking options. */,
+    "noImplicitAny": false /* Raise error on expressions and declarations with an implied 'any' type. */,
     // "strictNullChecks": true,              /* Enable strict null checks. */
     // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
     // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
@@ -38,15 +40,15 @@
     // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
 
     /* Module Resolution Options */
-    "moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
-    "baseUrl": "./",                          /* Base directory to resolve non-absolute module names. */
+    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+    "baseUrl": "./" /* Base directory to resolve non-absolute module names. */,
     "resolveJsonModule": true,
     // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
     // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
     // "typeRoots": [],                       /* List of folders to include type definitions from. */
     // "types": [],                           /* Type declaration files to be included in compilation. */
-    "allowSyntheticDefaultImports": true,     /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
-    "esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
+    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
     // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
 
     /* Source Map Options */
@@ -60,6 +62,9 @@
     // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
   },
   "exclude": [
-    "node_modules", "babel.config.js", "metro.config.js", "jest.config.js"
+    "node_modules",
+    "babel.config.js",
+    "metro.config.js",
+    "jest.config.js"
   ]
 }