agora-appbuilder-core 4.0.13 → 4.0.15

package/template/src/components/chat-ui/useChatUIControls.tsx

@@ -20,22 +20,6 @@ export enum ChatType {
   Private,
 }
 
-export enum UploadStatus {
-  NOT_STARTED = 'notStarted',
-  IN_PROGRESS = 'inProgress',
-  SUCCESS = 'success',
-  FAILURE = 'failure',
-}
-
-export interface File {
-  file_length: number;
-  file_ext: string;
-  file_url: string;
-  file_name: string;
-  file_type: string;
-  file_obj: object;
-}
-
 export interface ChatUIControlsInterface {
   chatType: ChatType;
   privateChatUser: UidType;
@@ -45,14 +29,6 @@ export interface ChatUIControlsInterface {
   setInputActive: React.Dispatch<SetStateAction<boolean>>;
   message: string;
   setMessage: React.Dispatch<SetStateAction<string>>;
-  inputHeight: number;
-  setInputHeight: React.Dispatch<SetStateAction<number>>;
-  showEmojiPicker: boolean;
-  setShowEmojiPicker: React.Dispatch<SetStateAction<boolean>>;
-  uploadStatus: UploadStatus;
-  setUploadStatus: React.Dispatch<SetStateAction<UploadStatus>>;
-  uploadedFiles: File[];
-  setUploadedFiles: React.Dispatch<SetStateAction<File[]>>;
 }
 
 const ChatUIControlsContext = React.createContext<ChatUIControlsInterface>({
@@ -63,39 +39,18 @@ const ChatUIControlsContext = React.createContext<ChatUIControlsInterface>({
   setPrivateChatUser: () => {},
   setMessage: () => {},
   inputActive: false,
-  inputHeight: 0,
-  setInputHeight: () => {},
   setInputActive: () => {},
-  showEmojiPicker: false,
-  setShowEmojiPicker: () => {},
-  uploadStatus: UploadStatus.NOT_STARTED,
-  setUploadStatus: () => {},
-  uploadedFiles: [],
-  setUploadedFiles: () => {},
 });
 
 interface ChatUIControlsProviderProps {
   children: React.ReactNode;
 }
 
-export const MIN_HEIGHT = 43;
-export const MAX_HEIGHT = 92;
-export const LINE_HEIGHT = 17;
-export const MAX_UPLOAD_SIZE = 10; //MB
-export const MAX_TEXT_MESSAGE_SIZE = 5; //KB
-
 const ChatUIControlsProvider = (props: ChatUIControlsProviderProps) => {
   const [chatType, setChatType] = useState<ChatType>(ChatType.Group);
   const [inputActive, setInputActive] = useState(false);
   const [privateChatUser, setPrivateChatUser] = useState<UidType>(0);
   const [message, setMessage] = useState('');
-  const [showEmojiPicker, setShowEmojiPicker] = useState(false);
-  const [uploadStatus, setUploadStatus] = useState<UploadStatus>(
-    UploadStatus.NOT_STARTED,
-  );
-  const [uploadedFiles, setUploadedFiles] = useState<File[]>([]);
-  const [inputHeight, setInputHeight] = React.useState(MIN_HEIGHT);
-
   return (
     <ChatUIControlsContext.Provider
       value={{
@@ -105,16 +60,8 @@ const ChatUIControlsProvider = (props: ChatUIControlsProviderProps) => {
         setPrivateChatUser,
         message,
         setMessage,
-        inputHeight,
-        setInputHeight,
         inputActive,
         setInputActive,
-        showEmojiPicker,
-        setShowEmojiPicker,
-        uploadStatus,
-        setUploadStatus,
-        uploadedFiles,
-        setUploadedFiles,
       }}>
       {props.children}
     </ChatUIControlsContext.Provider>

package/template/src/components/meeting-info-invite/MeetingInfoGridTile.tsx

@@ -63,10 +63,7 @@ export default function MeetingInfoGridTile() {
   return (
     <View style={style.root}>
       <ScrollView
-        contentContainerStyle={[
-          style.scroll,
-          !isMobile && {paddingLeft: 0, paddingRight: 0},
-        ]}>
+        contentContainerStyle={[style.scroll, !isMobile && {paddingLeft: 0}]}>
         <View style={style.inviteContainerTile}>
           <View style={style.inviteTile}>
             <MeetingInfo

package/template/src/components/participants/Participant.tsx

@@ -19,6 +19,7 @@ import {isMobileUA, isWebInternal} from '../../utils/common';
 import ActionMenu, {ActionMenuItem} from '../../atoms/ActionMenu';
 import Spacer from '../../atoms/Spacer';
 import useRemoteEndCall from '../../utils/useRemoteEndCall';
+import {useChatMessages} from '../chat-messages/useChatMessages';
 import LocalVideoMute from '../../subComponents/LocalVideoMute';
 import LocalAudioMute from '../../subComponents/LocalAudioMute';
 import RemoveMeetingPopup from '../../subComponents/RemoveMeetingPopup';

package/template/src/components/precall/joinWaitingRoomBtn.native.tsx

@@ -100,7 +100,7 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
 
   useEffect(() => {
     events.on(EventNames.WAITING_ROOM_RESPONSE, data => {
-      const {approved, mainUser, screenShare, whiteboard, chat} = JSON.parse(
+      const {approved, mainUser, screenShare, whiteboard} = JSON.parse(
         data?.payload,
       );
       // stop polling if user has responsed with yes / no
@@ -127,11 +127,6 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
               screenShareToken: screenShare.rtc,
               screenShareUid: screenShare.uid,
               whiteboard,
-              chat: {
-                user_token: chat.userToken,
-                group_id: chat.groupId,
-                is_group_owner: chat.isGroupOwner,
-              },
             },
           };
         });

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

@@ -105,7 +105,7 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
 
   useEffect(() => {
     events.on(EventNames.WAITING_ROOM_RESPONSE, data => {
-      const {approved, mainUser, screenShare, whiteboard, chat} = JSON.parse(
+      const {approved, mainUser, screenShare, whiteboard} = JSON.parse(
         data?.payload,
       );
       // stop polling if user has responsed with yes / no
@@ -133,11 +133,6 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
               screenShareToken: screenShare.rtc,
               screenShareUid: screenShare.uid,
               whiteboard,
-              chat: {
-                user_token: chat.userToken,
-                group_id: chat.groupId,
-                is_group_owner: chat.isGroupOwner,
-              },
             },
           };
         });

package/template/src/components/room-info/useRoomInfo.tsx

@@ -14,6 +14,7 @@ import {createHook} from 'customization-implementation';
 import {UidType} from '../../../agora-rn-uikit';
 import {LanguageType} from '../../subComponents/caption/utils';
 import {BoardColor} from '../whiteboard/WhiteboardConfigure';
+import {joinRoomPreference} from '../../utils/useJoinRoom';
 
 export enum WaitingRoomStatus {
   NOT_REQUESTED = 1,
@@ -37,11 +38,6 @@ export interface RoomData {
     room_uuid: string;
     room_token: string;
   };
-  chat?: {
-    user_token: string;
-    group_id: string;
-    is_group_owner: boolean;
-  };
   isSeparateHostLink: boolean;
   channel?: string;
   uid?: UidType;
@@ -71,6 +67,7 @@ export interface RoomInfoContextInterface {
     langChanged?: Boolean;
   };
   isSTTActive?: boolean;
+  roomPreference?: joinRoomPreference;
 }
 
 export const validateMeetingInfoData = (
@@ -112,6 +109,9 @@ export const RoomInfoDefaultValue: RoomInfoContextInterface = {
     },
     isSeparateHostLink: true,
   },
+  roomPreference: {
+    disableShareTile: false,
+  },
 };
 
 const RoomInfoContext = createContext(RoomInfoDefaultValue);

package/template/src/language/default-labels/videoCallScreenLabels.ts

@@ -205,39 +205,10 @@ export const groupChatWelcomeContent = 'groupChatWelcomeContent';
 
 export const peoplePanelHeaderText = 'peoplePanelHeaderText';
 
-export const groupChatMeetingInputPlaceHolderText =
-  'groupChatMeetingInputPlaceHolderText';
-export const groupChatLiveInputPlaceHolderText =
-  'groupChatLiveInputPlaceHolderText';
+export const groupChatInputPlaceHolderText = 'groupChatInputPlaceHolderText';
 export const privateChatInputPlaceHolderText =
   'privateChatInputPlaceHolderText';
 
-export const chatActionMenuDownloadText = 'chatActionMenuDownloadText';
-export const chatActionMenuCopyLinkText = 'chatActionMenuCopyLinkText';
-export const chatActionMenuDeleteText = 'chatActionMenuDeleteText';
-export const chatMsgDeletedText = 'chatMsgDeletedText';
-export const chatSendMessageBtnText = 'chatSendMessageBtnText';
-export const chatUploadErrorToastHeading = 'chatUploadErrorToastHeading';
-export const chatUploadErrorFileSizeToastHeading =
-  'chatUploadErrorFileSizeToastHeading';
-export const chatUploadErrorFileSizeToastSubHeading =
-  'chatUploadErrorFileSizeToastSubHeading';
-export const chatUploadErrorFileTypeToastSubHeading =
-  'chatUploadErrorFileTypeToastSubHeading';
-export const chatSendErrorTextSizeToastHeading =
-  'chatSendErrorTextSizeToastHeading';
-export const chatSendErrorTextSizeToastSubHeading =
-  'chatSendErrorTextSizeToastSubHeading';
-
-export const chatMessageDeleteConfirmBtnText =
-  'chatMessageDeleteConfirmBtnText';
-export const chatPublicMessageDeletePopupText =
-  'chatPublicMessageDeletePopupText';
-export const chatPrivateMessageDeletePopupText =
-  'chatPrivateMessageDeletePopupText';
-export const chatUploadStatusInProgress = 'chatUploadStatusInProgress';
-export const chatUploadStatusFailure = 'chatUploadStatusFailure';
-
 export const peoplePanelTurnoffAllCameraBtnText =
   'peoplePanelTurnoffAllCameraBtnText';
 export const peoplePanelMuteAllMicBtnText = 'peoplePanelMuteAllMicBtnText';
@@ -319,8 +290,6 @@ export const livestreamingAttendeeWaitingForHostToJoinText =
   'livestreamingAttendeeWaitingForHostToJoinText';
 
 export const publicChatToastHeading = 'publicChatToastHeading';
-export const publicChatImgToastHeading = 'publicChatImgToastHeading';
-export const publicChatFileToastHeading = 'publicChatFileToastHeading';
 
 export const multiplePublicChatToastHeading = 'multiplePublicChatToastHeading';
 export const multiplePublicChatToastSubHeading =
@@ -627,27 +596,9 @@ export interface I18nVideoCallScreenLabelsInterface {
 
   [groupChatWelcomeContent]?: I18nConditionalType;
 
-  [groupChatLiveInputPlaceHolderText]?: I18nBaseType;
-  [groupChatMeetingInputPlaceHolderText]?: I18nBaseType;
+  [groupChatInputPlaceHolderText]?: I18nBaseType;
   [privateChatInputPlaceHolderText]?: I18nBaseType;
 
-  [chatActionMenuDownloadText]?: I18nBaseType;
-  [chatActionMenuCopyLinkText]?: I18nBaseType;
-  [chatActionMenuDeleteText]?: I18nBaseType;
-  [chatSendMessageBtnText]?: I18nBaseType;
-  [chatMsgDeletedText]?: I18nBaseType;
-  [chatMessageDeleteConfirmBtnText]?: I18nBaseType;
-  [chatPublicMessageDeletePopupText]?: I18nBaseType;
-  [chatPrivateMessageDeletePopupText]?: I18nBaseType;
-  [chatUploadErrorToastHeading]?: I18nBaseType;
-  [chatUploadErrorFileSizeToastHeading]?: I18nBaseType;
-  [chatSendErrorTextSizeToastHeading]?: I18nBaseType;
-  [chatUploadErrorFileSizeToastSubHeading]?: I18nBaseType;
-  [chatSendErrorTextSizeToastSubHeading]?: I18nBaseType;
-  [chatUploadErrorFileTypeToastSubHeading]?: I18nBaseType;
-  [chatUploadStatusInProgress]?: I18nBaseType;
-  [chatUploadStatusFailure]?: I18nBaseType;
-
   [peoplePanelTurnoffAllCameraBtnText]?: I18nBaseType;
   [peoplePanelMuteAllMicBtnText]?: I18nBaseType;
 
@@ -699,9 +650,6 @@ export interface I18nVideoCallScreenLabelsInterface {
   [livestreamingAttendeeInviteOthersText]?: I18nBaseType;
 
   [publicChatToastHeading]?: I18nBaseType;
-  [publicChatImgToastHeading]?: I18nBaseType;
-  [publicChatFileToastHeading]?: I18nBaseType;
-
   [multiplePublicChatToastHeading]?: I18nBaseType;
   [multiplePublicChatToastSubHeading]?: I18nBaseType<publicChatToastSubHeadingDataInterface>;
 
@@ -1009,7 +957,7 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
 
   [peoplePanelHeaderText]: 'People',
 
-  [chatPanelGroupTabText]: 'Public',
+  [chatPanelGroupTabText]: 'Group',
   [chatPanelPrivateTabText]: 'Private',
 
   [groupChatWelcomeContent]: noMessage =>
@@ -1017,31 +965,9 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
       ? 'Welcome to Chat!\nAll messages are deleted when call ends.'
       : 'All messages are deleted when call ends.',
 
-  [groupChatLiveInputPlaceHolderText]: name => `Chat publicly as ${name}...`,
-  [groupChatMeetingInputPlaceHolderText]: name => `Type Message Here`,
+  [groupChatInputPlaceHolderText]: name => `Chat publicly as ${name}...`,
   [privateChatInputPlaceHolderText]: name => `Private Message to ${name}`,
 
-  [chatActionMenuDownloadText]: 'Download',
-  [chatActionMenuCopyLinkText]: 'Copy File Link',
-  [chatActionMenuDeleteText]: 'Delete',
-  [chatSendMessageBtnText]: 'Send',
-  [chatMsgDeletedText]: name => `${name} deleted this message`,
-
-  [chatUploadErrorToastHeading]: 'Attachment Upload Error',
-  [chatUploadErrorFileSizeToastHeading]: 'File size is too large',
-  [chatSendErrorTextSizeToastHeading]: 'Text size is too large',
-  [chatUploadErrorFileSizeToastSubHeading]: size =>
-    `You can send attachments upto ${size}MB in size`,
-  [chatSendErrorTextSizeToastSubHeading]: size =>
-    `You can send text message upto ${size}KB in size`,
-  [chatUploadErrorFileTypeToastSubHeading]: type => `${type} is not supported`,
-  [chatUploadStatusInProgress]: `Uploading... Please wait`,
-  [chatUploadStatusFailure]: `Something went wrong while sharing.Let'as try again`,
-  [chatMessageDeleteConfirmBtnText]: `Delete`,
-  [chatPublicMessageDeletePopupText]: `Are you sure you want to delete this message for everyone in the public chat? `,
-  [chatPrivateMessageDeletePopupText]: (name: string) =>
-    `Are you sure you want to delete this message for ${name}`,
-
   [peoplePanelTurnoffAllCameraBtnText]: 'Turn off all cameras',
   [peoplePanelMuteAllMicBtnText]: 'Mute All',
 
@@ -1107,13 +1033,7 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
   [publicChatToastHeading]: (name: string) =>
     `${name} commented in the public chat`,
 
-  [publicChatImgToastHeading]: (name: string) =>
-    `${name} sent an image in the public chat`,
-
-  [publicChatFileToastHeading]: (name: string) =>
-    `${name} sent a file in the public chat`,
-
-  [multiplePublicChatToastHeading]: 'New messages in Public Chat',
+  [multiplePublicChatToastHeading]: 'New comments in Public Chat',
   [multiplePublicChatToastSubHeading]: ({count, from}) =>
     `You have ${count} new messages from ${from}`,
 
@@ -1123,7 +1043,7 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
     `You’ve received ${count} private messages`,
 
   [multiplePublicAndPrivateChatToastHeading]:
-    'New messages in Public & Private Chat',
+    'New comments in Public & Private Chat',
   [multiplePublicAndPrivateChatToastSubHeading]: ({
     publicChatCount,
     privateChatCount,

package/template/src/pages/VideoCall.tsx

@@ -46,6 +46,7 @@ import {SidePanelProvider} from '../utils/useSidePanel';
 import {NetworkQualityProvider} from '../components/NetworkQualityContext';
 import {ChatNotificationProvider} from '../components/chat-notification/useChatNotification';
 import {ChatUIControlsProvider} from '../components/chat-ui/useChatUIControls';
+import {ChatMessagesProvider} from '../components/chat-messages/useChatMessages';
 import {ScreenShareProvider} from '../components/contexts/ScreenShareContext';
 import {LiveStreamDataProvider} from '../components/contexts/LiveStreamDataContext';
 import {VideoMeetingDataProvider} from '../components/contexts/VideoMeetingDataContext';
@@ -67,8 +68,6 @@ import {VideoQualityContextProvider} from '../app-state/useVideoQuality';
 import {VBProvider} from '../components/virtual-background/useVB';
 import {DisableChatProvider} from '../components/disable-chat/useDisableChat';
 import {WaitingRoomProvider} from '../components/contexts/WaitingRoomContext';
-import {isWeb} from '../utils/common';
-import {ChatMessagesProvider} from '../components/chat-messages/useChatMessages';
 import VideoCallScreenWrapper from './video-call/VideoCallScreenWrapper';
 import {useIsRecordingBot} from '../subComponents/recording/useIsRecordingBot';
 import {videoRoomStartingCallText} from '../language/default-labels/videoCallScreenLabels';
@@ -232,6 +231,7 @@ const VideoCall: React.FC = () => {
       meetingDetails: sdkMeetingDetails,
       skipPrecall,
       promise,
+      preference,
     } = SdkJoinState;
 
     const sdkMeetingPath = `/${sdkMeetingPhrase}`;
@@ -247,12 +247,13 @@ const VideoCall: React.FC = () => {
             ...roomInfo.data,
             ...sdkMeetingDetails,
           },
+          roomPreference: preference,
         };
       });
     } else if (sdkMeetingPhrase) {
       setQueryComplete(false);
       currentMeetingPhrase.current = sdkMeetingPath;
-      useJoin(sdkMeetingPhrase).catch(error => {
+      useJoin(sdkMeetingPhrase, preference).catch(error => {
         setGlobalErrorMessage(error);
         history.push('/');
         currentMeetingPhrase.current = '';

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

@@ -24,7 +24,12 @@ import {
 import {useChatNotification} from '../../components/chat-notification/useChatNotification';
 import {SidePanelType} from '../../subComponents/SidePanelEnum';
 import {useSidePanel} from '../../utils/useSidePanel';
-import {useContent, useLocalUserInfo, ToolbarItem} from 'customization-api';
+import {
+  useContent,
+  useLocalUserInfo,
+  ToolbarItem,
+  ToolbarCustomItem,
+} from 'customization-api';
 import LayoutIconButton from '../../subComponents/LayoutIconButton';
 import CaptionIcon from '../../../src/subComponents/caption/CaptionIcon';
 import TranscriptIcon from '../../../src/subComponents/caption/TranscriptIcon';
@@ -38,7 +43,10 @@ import {EventNames} from '../../rtm-events';
 import events from '../../rtm-events-api';
 import {getLanguageLabel} from '../../subComponents/caption/utils';
 import Toast from '../../../react-native-toast-message';
-import {CustomToolbarSort} from '../../utils/common';
+import {
+  CustomToolbarSort,
+  updateToolbarDefaultConfig,
+} from '../../utils/common';
 import {ActionSheetProvider} from '../../utils/useActionSheet';
 import {useWaitingRoomContext} from '../../components/contexts/WaitingRoomContext';
 import {useSetRoomInfo} from '../../components/room-info/useSetRoomInfo';
@@ -257,6 +265,7 @@ const ActionSheetContent = props => {
     displayCustomBottomSheetContent = false,
     customBottomSheetContent,
     native = false,
+    defaultItemsConfig = {},
   } = props;
 
   const {localUid} = useContext(ChatContext);
@@ -387,6 +396,7 @@ const ActionSheetContent = props => {
       order: 0,
       hide: 'no',
       align: 'start',
+      componentName: 'local-audio',
       component: isAudioVideoControlsDisabled ? null : <AudioIcon />,
     },
     {
@@ -397,6 +407,7 @@ const ActionSheetContent = props => {
       /*For AudioCast Host:Chat ,Attendee:Raise Hand 
             For VoiceChat Host:Chat, Attendee:Chat
            */
+      componentName: 'chat',
       component: (isAudioCastHost ||
         isVoiceChatHost ||
         isVoiceChatAudience) && <ChatIcon />,
@@ -407,6 +418,7 @@ const ActionSheetContent = props => {
       order: 0,
       hide: 'no',
       align: 'start',
+      componentName: 'raise-hand',
       component:
         (isAudioCastAudience && isLiveStream && isAudience) ||
         (isBroadCasting && !isHost) ? (
@@ -420,6 +432,7 @@ const ActionSheetContent = props => {
       order: 1,
       hide: 'no',
       align: 'start',
+      componentName: 'local-video',
       component:
         !isAudioRoom && (isAudioVideoControlsDisabled ? null : <CamIcon />),
     },
@@ -428,6 +441,7 @@ const ActionSheetContent = props => {
       order: 2,
       hide: 'no',
       align: 'start',
+      componentName: 'end-call',
       component: <EndCallIcon />,
     },
     //reset of the controls
@@ -436,6 +450,7 @@ const ActionSheetContent = props => {
       order: 4,
       hide: 'no',
       align: 'start',
+      componentName: 'raise-hand',
       component:
         (isLiveStream && isAudience) || (isBroadCasting && !isHost) ? (
           $config.RAISE_HAND && !isAudioRoom ? (
@@ -449,6 +464,7 @@ const ActionSheetContent = props => {
       order: 5,
       hide: 'no',
       align: 'start',
+      componentName: 'chat',
       component: !(
         isAudioCastHost ||
         isVoiceChatHost ||
@@ -460,6 +476,7 @@ const ActionSheetContent = props => {
       order: 6,
       hide: 'no',
       align: 'start',
+      componentName: 'participant',
       component: <ParticipantsIcon />,
     },
     {
@@ -467,6 +484,7 @@ const ActionSheetContent = props => {
       order: 7,
       hide: 'no',
       align: 'start',
+      componentName: 'recording',
       component: isHost && $config.CLOUD_RECORDING ? <RecordingIcon /> : null,
     },
     {
@@ -474,6 +492,7 @@ const ActionSheetContent = props => {
       order: 7,
       hide: 'no',
       align: 'start',
+      componentName: 'virtual-background',
       component:
         $config.ENABLE_VIRTUAL_BACKGROUND && !$config.AUDIO_ROOM ? (
           <VBIcon />
@@ -484,6 +503,7 @@ const ActionSheetContent = props => {
       order: 8,
       hide: 'no',
       align: 'start',
+      componentName: 'switch-camera',
       component:
         !isAudioRoom &&
         (isAudioVideoControlsDisabled ? null : <SwitchCameraIcon />),
@@ -493,6 +513,7 @@ const ActionSheetContent = props => {
       order: 9,
       hide: 'no',
       align: 'start',
+      componentName: 'layout',
       component: <LayoutIcon />,
     },
     {
@@ -500,6 +521,7 @@ const ActionSheetContent = props => {
       order: 10,
       hide: 'no',
       align: 'start',
+      componentName: 'settings',
       component: <SettingsIcon />,
     },
     {
@@ -507,6 +529,7 @@ const ActionSheetContent = props => {
       order: 11,
       hide: 'no',
       align: 'start',
+      componentName: 'invite',
       component: <ShareIcon />,
     },
     {
@@ -514,6 +537,7 @@ const ActionSheetContent = props => {
       order: 12,
       hide: 'no',
       align: 'start',
+      componentName: 'caption',
       component: (
         <CaptionIconBtn
           onPress={() => handleSheetChanges(isExpanded ? 0 : 1)}
@@ -525,6 +549,7 @@ const ActionSheetContent = props => {
       order: 13,
       hide: 'no',
       align: 'start',
+      componentName: 'transcript',
       component: <TranscriptIconBtn />,
     },
   ];
@@ -533,8 +558,12 @@ const ActionSheetContent = props => {
     return i?.hide === 'yes';
   };
   const combinedItems = customItems
+    ?.concat(
+      includeDefaultItems
+        ? updateToolbarDefaultConfig(defaultItems, defaultItemsConfig)
+        : [],
+    )
     ?.filter(i => !isHidden(i))
-    ?.concat(includeDefaultItems ? defaultItems : [])
     //to filter empty component because of some condition array will have empty component
     ?.filter(i => i?.component)
     ?.sort(CustomToolbarSort);

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

@@ -6,7 +6,6 @@ import {useLocation} from '../../components/Router';
 import {getParamFromURL} from '../../utils/common';
 import {useUserPreference} from '../../components/useUserPreference';
 import WhiteboardConfigure from '../../components/whiteboard/WhiteboardConfigure';
-import ChatConfigure from '../../components/chat/chatConfigure';
 
 const VideoCallScreenWithRecordingBot: React.FC = () => {
   const location = useLocation();
@@ -22,30 +21,21 @@ const VideoCallScreenWithRecordingBot: React.FC = () => {
 
 const VideoCallScreenWrapper: React.FC = () => {
   const {rtcProps} = useContext(PropsContext);
-  let configComponent: React.ReactNode;
 
-  const videoComponent = rtcProps?.recordingBot ? (
-    <VideoCallScreenWithRecordingBot />
-  ) : (
-    <VideoCallScreen />
-  );
-
-  if ($config.CHAT && $config.ENABLE_WHITEBOARD) {
-    configComponent = (
-      <ChatConfigure>
-        <WhiteboardConfigure>{videoComponent}</WhiteboardConfigure>
-      </ChatConfigure>
-    );
-  } else if ($config.CHAT) {
-    configComponent = <ChatConfigure>{videoComponent}</ChatConfigure>;
-  } else if ($config.ENABLE_WHITEBOARD) {
-    configComponent = (
-      <WhiteboardConfigure>{videoComponent}</WhiteboardConfigure>
+  if ($config.ENABLE_WHITEBOARD) {
+    return (
+      <WhiteboardConfigure>
+        {rtcProps?.recordingBot ? (
+          <VideoCallScreenWithRecordingBot />
+        ) : (
+          <VideoCallScreen />
+        )}
+      </WhiteboardConfigure>
     );
-  } else {
-    configComponent = videoComponent;
+  } else if (rtcProps?.recordingBot) {
+    return <VideoCallScreenWithRecordingBot />;
   }
-  return <>{configComponent}</>;
+  return <VideoCallScreen />;
 };
 
 export default VideoCallScreenWrapper;

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

@@ -4,7 +4,7 @@ import useLayoutsData from './useLayoutsData';
 import {isArray, useIsDesktop, isValidReactComponent} from '../../utils/common';
 import {PropsContext, ClientRoleType} from '../../../agora-rn-uikit';
 import {useLayout} from '../../utils/useLayout';
-import {useContent} from 'customization-api';
+import {useContent, useRoomInfo} from 'customization-api';
 import {getGridLayoutName} from './DefaultLayouts';
 import {DispatchContext} from '../../../agora-rn-uikit';
 import MeetingInfoGridTile from '../../components/meeting-info-invite/MeetingInfoGridTile';
@@ -22,11 +22,17 @@ const VideoComponent = () => {
   const {audienceUids, hostUids} = useLiveStreamDataContext();
   const [showNoUserInfo, setShowNoUserInfo] = useState(false);
 
+  const {
+    roomPreference: {disableShareTile},
+  } = useRoomInfo();
+
   useEffect(() => {
-    setTimeout(() => {
-      setShowNoUserInfo(true);
-    }, 2500);
-  }, []);
+    if (!disableShareTile) {
+      setTimeout(() => {
+        setShowNoUserInfo(true);
+      }, 2500);
+    }
+  }, [disableShareTile]);
 
   const currentLayoutRef = useRef(currentLayout);
   const gridLayoutName = getGridLayoutName();

package/template/src/pages/video-call/index.ts

@@ -21,10 +21,6 @@ import Controls, {
 } from '../../components/Controls';
 import ChatBubble from '../../subComponents/ChatBubble';
 import {ChatInput} from '../../subComponents/ChatInput';
-import {ChatAttachmentButton} from '../../subComponents/chat/ChatAttachment';
-import ChatSendButton from '../../subComponents/chat/ChatSendButton';
-import ChatUploadStatus from '../../subComponents/chat/ChatUploadStatus';
-import {ChatEmojiButton} from '../../subComponents/chat/ChatEmoji';
 import SettingsView from '../../components/SettingsView';
 import WhiteboardButton from '../../components/whiteboard/WhiteboardButton';
 
@@ -54,9 +50,5 @@ export {
   Controls,
   ChatBubble,
   ChatInput,
-  ChatAttachmentButton,
-  ChatEmojiButton,
-  ChatUploadStatus,
-  ChatSendButton,
   ToolbarComponents,
 };