agora-appbuilder-core 4.1.10-beta.1 → 4.1.11

package/template/src/atoms/ActionMenu.tsx

@@ -12,6 +12,7 @@ import {
   StyleProp,
   TextStyle,
   Pressable,
+  ScrollView,
 } from 'react-native';
 import React, {SetStateAction, useState} from 'react';
 
@@ -35,7 +36,10 @@ export interface ActionMenuItem {
   isBase64Icon?: boolean;
   icon?: keyof IconsInterface;
   onHoverIcon?: keyof IconsInterface;
+  endIcon?: keyof IconsInterface;
+  onHoverEndIcon?: keyof IconsInterface;
   iconColor?: string;
+  endIconColor?: string;
   textColor?: string;
   title?: string;
   titleStyle?: StyleProp<TextStyle>;
@@ -48,8 +52,10 @@ export interface ActionMenuItem {
   onHoverContent?: JSX.Element;
   disabled?: boolean;
   iconSize?: number;
+  endIconSize?: number;
   hide?: ToolbarItemHide;
   type?: string;
+  iconPosition?: 'start' | 'end';
 }
 export interface ActionMenuProps {
   from: string;
@@ -71,18 +77,23 @@ export interface UserActionMenuItemProps {
   label: string;
   icon?: keyof IconsInterface;
   onHoverIcon?: keyof IconsInterface;
+  endIcon?: keyof IconsInterface;
+  onHoverEndIcon?: keyof IconsInterface;
   toggleStatus?: boolean;
   iconColor: string;
+  endIconColor?: string;
   textColor: string;
   onPress?: () => void;
   onToggle?: () => void;
   disabled?: boolean;
   iconSize?: number;
+  endIconSize?: number;
   isHovered?: boolean;
   isExternalIcon?: boolean;
   isBase64Icon?: boolean;
   externalIconString?: string;
   titleStyle?: StyleProp<TextStyle>;
+  iconPosition?: 'start' | 'end';
 }
 
 export const UserActionMenuItem = ({
@@ -92,42 +103,77 @@ export const UserActionMenuItem = ({
   onPress,
   onToggle,
   iconColor,
+  endIconColor,
   textColor,
   iconSize = 20,
+  endIconSize = 20,
   titleStyle = {},
   disabled = false,
   isHovered = false,
   onHoverIcon,
+  endIcon,
+  onHoverEndIcon,
   isExternalIcon = false,
   isBase64Icon = false,
   externalIconString = '',
+  iconPosition = 'start',
 }: UserActionMenuItemProps) => {
   const iconToShow = isHovered && onHoverIcon && !disabled ? onHoverIcon : icon;
+  const endIconToShow =
+    isHovered && onHoverEndIcon && !disabled ? onHoverEndIcon : endIcon;
 
-  const content = (
-    <>
-      <View style={styles.iconContainer}>
+  const renderIcon = (
+    iconName: keyof IconsInterface | undefined,
+    position: 'start' | 'end' = 'start',
+    size: number = 20,
+    color: string = iconColor,
+  ) => {
+    if (!iconName) return null;
+
+    return (
+      <View
+        style={[
+          styles.iconContainer,
+          position === 'end' && styles.iconContainerEnd,
+        ]}>
         {isExternalIcon ? (
           <ImageIcon
             base64={isBase64Icon}
-            base64TintColor={iconColor}
+            base64TintColor={color}
             iconType="plain"
-            iconSize={iconSize}
+            iconSize={size}
             icon={externalIconString}
-            tintColor={iconColor}
+            tintColor={color}
           />
         ) : (
           <ImageIcon
             base64={isBase64Icon}
-            base64TintColor={iconColor}
+            base64TintColor={color}
             iconType="plain"
-            iconSize={iconSize}
-            name={iconToShow}
-            tintColor={iconColor}
+            iconSize={size}
+            name={iconName}
+            tintColor={color}
           />
         )}
       </View>
-      <Text style={[styles.text, titleStyle, {color: textColor}]}>{label}</Text>
+    );
+  };
+
+  const content = (
+    <>
+      {renderIcon(iconToShow, 'start', iconSize, iconColor)}
+
+      <Text
+        style={[
+          styles.text,
+          titleStyle,
+          {color: textColor},
+          (iconPosition === 'end' || endIcon) && styles.textWithEndIcon,
+        ]}>
+        {label}
+      </Text>
+
+      {renderIcon(endIconToShow, 'end', endIconSize, endIconColor || iconColor)}
 
       {typeof toggleStatus === 'boolean' && (
         <View style={styles.toggleContainer}>
@@ -187,6 +233,8 @@ const ActionMenu = (props: ActionMenuProps) => {
         component: CustomActionItem = null,
         icon = '',
         onHoverIcon,
+        endIcon,
+        onHoverEndIcon,
         isBase64Icon = false,
         isExternalIcon = false,
         externalIconString = '',
@@ -195,13 +243,16 @@ const ActionMenu = (props: ActionMenuProps) => {
         closeActionMenu = () => {},
         uid,
         iconColor,
+        endIconColor,
         textColor,
         disabled = false,
         onHoverCallback = undefined,
         onHoverContent = undefined,
         iconSize = 20,
+        endIconSize = 20,
         titleStyle = {},
         type = '',
+        iconPosition = 'start',
       } = item;
       return (
         <PlatformWrapper key={props.from + '_' + title + index}>
@@ -262,18 +313,23 @@ const ActionMenu = (props: ActionMenuProps) => {
                   <UserActionMenuItem
                     label={label || title}
                     icon={icon}
+                    endIcon={endIcon}
                     toggleStatus={toggleStatus}
                     iconColor={iconColor}
+                    endIconColor={endIconColor}
                     textColor={textColor}
                     iconSize={iconSize}
+                    endIconSize={endIconSize}
                     titleStyle={titleStyle}
                     disabled={disabled}
                     onToggle={onPress}
                     isHovered={isHovered}
                     isExternalIcon={isExternalIcon}
                     externalIconString={externalIconString}
+                    iconPosition={iconPosition}
                     isBase64Icon={isBase64Icon}
                     onHoverIcon={onHoverIcon}
+                    onHoverEndIcon={onHoverEndIcon}
                   />
                 </TouchableOpacity>
               )}
@@ -284,6 +340,21 @@ const ActionMenu = (props: ActionMenuProps) => {
     });
   };
 
+  const shouldUseScrollView = props?.containerStyle?.maxHeight !== undefined;
+
+  const renderScrollableContent = () => {
+    return shouldUseScrollView ? (
+      <ScrollView
+        style={{maxHeight: props.containerStyle.maxHeight}}
+        showsVerticalScrollIndicator={true}
+        nestedScrollEnabled={true}>
+        {renderItems()}
+      </ScrollView>
+    ) : (
+      renderItems()
+    );
+  };
+
   return (
     <View>
       {hoverMode ? (
@@ -293,7 +364,7 @@ const ActionMenu = (props: ActionMenuProps) => {
             <div
               onMouseEnter={() => props?.onHover && props.onHover(true)}
               onMouseLeave={() => props?.onHover && props.onHover(false)}>
-              {renderItems()}
+              {renderScrollableContent()}
             </div>
           </View>
         )
@@ -311,7 +382,7 @@ const ActionMenu = (props: ActionMenuProps) => {
           </TouchableWithoutFeedback>
           <View
             style={[styles.modalView, props?.containerStyle, modalPosition]}>
-            {renderItems()}
+            {renderScrollableContent()}
           </View>
         </Modal>
       )}
@@ -388,6 +459,15 @@ const styles = StyleSheet.create({
     marginVertical: 12,
     marginLeft: 12,
   },
+  iconContainerEnd: {
+    marginLeft: 10,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  textWithEndIcon: {
+    marginRight: 0,
+  },
   toggleContainer: {
     justifyContent: 'center',
     alignItems: 'center',

package/template/src/atoms/CustomIcon.tsx

@@ -91,6 +91,7 @@ export interface IconsInterface {
   'closed-caption': string;
   globe: string;
   'lang-select': string;
+  'lang-translate': string;
   search: string;
   captions: string;
   'captions-off': string;
@@ -153,12 +154,4 @@ export interface IconsInterface {
   fullscreen: string;
   add_reaction: string;
   spotlight: string;
-  'people-assigned': string;
-  'double-up-arrow': string;
-  'move-up': string;
-  'close-room': string;
-  'open-room': string;
-  announcement: string;
-  'settings-outlined': string;
-  'breakout-room': string;
 }

package/template/src/atoms/DropDownMulti.tsx

@@ -14,6 +14,7 @@ import {
   Modal,
   View,
   Image,
+  ScrollView,
 } from 'react-native';
 import {isWebInternal} from '../utils/common';
 import ThemeConfig from '../theme';
@@ -34,6 +35,8 @@ interface Props {
   defaultSelectedValues?: LanguageType[];
   isOpen: boolean;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  maxAllowedSelection?: number;
+  protectedLanguages?: LanguageType[];
 }
 
 const DropdownMulti: FC<Props> = ({
@@ -45,6 +48,8 @@ const DropdownMulti: FC<Props> = ({
   icon,
   isOpen,
   setIsOpen,
+  maxAllowedSelection = 2,
+  protectedLanguages = [],
 }) => {
   const DropdownButton = useRef();
   const maxHeight = 170;
@@ -78,20 +83,20 @@ const DropdownMulti: FC<Props> = ({
     //setIsOpen(false);
 
     const isSelected = selectedValues.includes(item.value);
+    const isProtected = protectedLanguages.includes(item.value);
     let updatedValues = [...selectedValues];
 
     if (isSelected) {
-      // Item is already selected, remove it if there are more than one selected languages
-      if (selectedValues.length > 0) {
-        updatedValues = selectedValues.filter((value) => value !== item.value);
+      // Item is already selected, remove it if it's not protected and there are more than one selected languages
+      if (selectedValues.length > 0 && !isProtected) {
+        updatedValues = selectedValues.filter(value => value !== item.value);
       }
     } else {
       // Item is not selected, add it
-      if (selectedValues.length < 2) {
+      if (selectedValues.length < maxAllowedSelection) {
         updatedValues = [...selectedValues, item.value];
       } else {
-        // Max selection limit reached, replace the second selected value
-        //  updatedValues = [selectedValues[1], item.value];
+        // Max selection limit reached, do nothing or implement replacement logic
       }
     }
 
@@ -102,13 +107,15 @@ const DropdownMulti: FC<Props> = ({
   // renders each lang checkbox row
   const renderItem = ({item}): ReactElement<any, any> => {
     const isSelected = selectedValues.includes(item.value);
+    const isProtected = protectedLanguages.includes(item.value);
     const isUSEngLangSelected = selectedValues.includes('en-US');
     const isINEngLangSelected = selectedValues.includes('en-IN');
 
     const isDisabled =
-      (!isSelected && selectedValues.length === 2) ||
+      (!isSelected && selectedValues.length === maxAllowedSelection) ||
       (item.value === 'en-US' && isINEngLangSelected) ||
-      (item.value === 'en-IN' && isUSEngLangSelected);
+      (item.value === 'en-IN' && isUSEngLangSelected) ||
+      (isSelected && isProtected);
 
     setError(isDisabled || selectedValues.length === 0);
 
@@ -119,8 +126,12 @@ const DropdownMulti: FC<Props> = ({
             <Checkbox
               disabled={isDisabled}
               checked={isSelected}
-              label={item.label}
-              labelStye={styles.itemText}
+              label={item.label + (isProtected ? ' (Selected already)' : '')}
+              labelStye={
+                isProtected
+                  ? {...styles.itemText, ...styles.protectedItemText}
+                  : styles.itemText
+              }
               onChange={() => onItemPress(item)}
             />
           </View>
@@ -144,28 +155,39 @@ const DropdownMulti: FC<Props> = ({
     );
   };
 
-  const selectedLabels = selectedValues.map((value) => {
-    const selectedLanguage = data.find((item) => item.value === value);
+  const selectedLabels = selectedValues.map(value => {
+    const selectedLanguage = data.find(item => item.value === value);
+    const isProtected = protectedLanguages.includes(value);
     return selectedLanguage ? (
-      <View style={styles.selectedLang}>
+      <View style={[styles.selectedLang, isProtected && styles.protectedPill]}>
+        <Text
+          style={[
+            styles.dropdownOptionText,
+            isProtected && styles.protectedPillText,
+          ]}>
+          {selectedLanguage.label}
+        </Text>
         <TouchableOpacity
+          disabled={isProtected}
           onPress={() => {
-            const updatedValues = selectedValues.filter(
-              (value) => value !== selectedLanguage.value,
-            );
-            setSelectedValues(updatedValues);
+            if (!isProtected) {
+              const updatedValues = selectedValues.filter(
+                value => value !== selectedLanguage.value,
+              );
+              setSelectedValues(updatedValues);
+            }
           }}>
           <ImageIcon
             iconType="plain"
             name={'close'}
             iconSize={20}
-            tintColor={$config.CARD_LAYER_5_COLOR}
+            tintColor={
+              isProtected
+                ? $config.FONT_COLOR + hexadecimalTransparency['40%']
+                : $config.CARD_LAYER_5_COLOR
+            }
           />
         </TouchableOpacity>
-
-        <Text numberOfLines={1} style={styles.dropdownOptionText}>
-          {selectedLanguage.label}
-        </Text>
       </View>
     ) : (
       <></>
@@ -210,13 +232,20 @@ const DropdownMulti: FC<Props> = ({
             <></>
           )}
           {/* Dropdown Text */}
-          <View
+          <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={true}
+            contentContainerStyle={styles.scrollContainer}
             style={[
               styles.dropdownOptionTextContainer,
-              selectedValues.length === 2 && {flex: 0.9},
+              selectedValues.length === maxAllowedSelection && {flex: 1},
             ]}>
-            {formattedSelectedLanguages}
-          </View>
+            {selectedValues.length === 0 ? (
+              <Text style={styles.placeholderText}>Select languages</Text>
+            ) : (
+              formattedSelectedLanguages
+            )}
+          </ScrollView>
         </View>
         {/* Dropdown end Icon */}
         <View style={styles.dropdownIconContainer}>
@@ -274,14 +303,25 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
     flexDirection: 'row',
   },
+  scrollContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
   dropdownOptionText: {
     textAlign: 'left',
     fontFamily: ThemeConfig.FontFamily.sansPro,
     fontWeight: '400',
     fontSize: ThemeConfig.FontSize.normal,
     color: $config.FONT_COLOR,
-    marginLeft: 4,
-    flex: 1,
+    marginRight: 4,
+  },
+  placeholderText: {
+    textAlign: 'left',
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.normal,
+    color: $config.FONT_COLOR + hexadecimalTransparency['70%'],
+    paddingLeft: 8,
   },
   dropdownIconContainer: {
     alignSelf: 'center',
@@ -311,7 +351,7 @@ const styles = StyleSheet.create({
     paddingLeft: 8,
     backgroundColor: $config.CARD_LAYER_4_COLOR,
     borderRadius: 6,
-    flex: 1,
+    maxWidth: 140,
     justifyContent: 'flex-start',
     alignItems: 'center',
     flexDirection: 'row',
@@ -344,6 +384,17 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  protectedItemText: {
+    paddingVertical: 12,
+    opacity: 0.6,
+    fontStyle: 'italic',
+  },
+  protectedPill: {
+    backgroundColor: $config.CARD_LAYER_2_COLOR,
+  },
+  protectedPillText: {
+    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.low,
+  },
 });
 
 export default DropdownMulti;

package/template/src/atoms/Dropdown.tsx

@@ -14,8 +14,6 @@ import {
   Modal,
   View,
   Image,
-  StyleProp,
-  ViewStyle,
 } from 'react-native';
 import {isWebInternal} from '../utils/common';
 import ThemeConfig from '../theme';
@@ -30,7 +28,6 @@ interface Props {
   onSelect: (item: {label: string; value: string}) => void;
   enabled: boolean;
   selectedValue: string;
-  containerStyle?: StyleProp<ViewStyle>;
 }
 
 const Dropdown: FC<Props> = ({
@@ -40,7 +37,6 @@ const Dropdown: FC<Props> = ({
   enabled,
   selectedValue,
   icon,
-  containerStyle = {},
 }) => {
   const DropdownButton = useRef();
   const [visible, setVisible] = useState(false);
@@ -152,7 +148,6 @@ const Dropdown: FC<Props> = ({
       ref={DropdownButton}
       style={[
         styles.dropdownOptionContainer,
-        containerStyle,
         !enabled || !data || !data.length
           ? {opacity: ThemeConfig.EmphasisOpacity.disabled}
           : {},

package/template/src/atoms/Input.tsx

@@ -60,7 +60,7 @@ const styles = StyleSheet.create({
     // height: 60, //causes text cut off in android
     width: '100%',
     borderWidth: 1,
-    paddingVertical: 21,
+    paddingVertical: 12,
     paddingHorizontal: 16,
     borderColor: $config.INPUT_FIELD_BORDER_COLOR,
     color: $config.FONT_COLOR,
@@ -71,6 +71,7 @@ const styles = StyleSheet.create({
     ...Platform.select({
       web: {
         outlineStyle: 'none',
+        lineHeight: '26px',
       },
     }),
   },

package/template/src/atoms/TertiaryButton.tsx

@@ -120,6 +120,6 @@ const styles = StyleSheet.create({
     cursor: 'default',
   },
   disabledText: {
-    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.low,
+    color: $config.SEMANTIC_NEUTRAL,
   },
 });

package/template/src/atoms/UserAvatar.tsx

@@ -10,7 +10,7 @@ function getInitials(name: string) {
   return 'U';
 }
 
-const UserAvatar = ({name, containerStyle = {}, textStyle = {}}) => {
+const UserAvatar = ({name, containerStyle, textStyle}) => {
   return (
     <View
       style={[

package/template/src/components/ChatContext.ts

@@ -9,9 +9,8 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {type RTMClient} from 'agora-react-native-rtm';
-import {UidType, ContentInterface} from '../../agora-rn-uikit';
-import {RTMUserPreferences} from '../rtm/RTMGlobalStateProvider';
+import RtmEngine from 'agora-react-native-rtm';
+import {UidType} from '../../agora-rn-uikit';
 import {createContext, SetStateAction} from 'react';
 
 import {ChatMessageType, Reaction} from './chat-messages/useChatMessages';
@@ -90,10 +89,9 @@ export interface RtmContextInterface {
   isInitialQueueCompleted: boolean;
   hasUserJoinedRTM: boolean;
   rtmInitTimstamp: number;
-  engine: RTMClient;
+  engine: RtmEngine;
   localUid: UidType;
   onlineUsersCount: number;
-  syncUserState: (uid: number, data: Partial<ContentInterface>) => void;
 }
 
 export enum controlMessageEnum {