STT Bot per user

config.json

@@ -14,7 +14,7 @@
   "PRECALL": true,
   "CHAT": true,
   "CLOUD_RECORDING": true,
-  "RECORDING_MODE": "WEB",
+  "RECORDING_MODE": "MIX",
   "SCREEN_SHARING": true,
   "LANDING_SUB_HEADING": "The Real-Time Engagement Platform",
   "ENCRYPTION_ENABLED": true,

package.json

@@ -9,7 +9,7 @@
   ],
   "scripts": {
     "vercel-build": "npm run dev-setup && cd template && npm run web:build && cd .. && npm run copy-vercel",
-    "uikit": "rm -rf template/agora-rn-uikit && git clone https://github.com/AgoraIO-Community/appbuilder-ui-kit.git template/agora-rn-uikit && cd template/agora-rn-uikit && git checkout appbuilder-uikit-3.1.8",
+    "uikit": "rm -rf template/agora-rn-uikit && git clone https://github.com/AgoraIO-Community/appbuilder-ui-kit.git template/agora-rn-uikit && cd template/agora-rn-uikit && git checkout appbuilder-uikit-3.1.11",
     "deps": "cd template && npm i --force",
     "dev-setup": "npm run uikit && npm run deps && node devSetup.js",
     "web-build": "cd template && npm run web:build && cd .. && npm run copy-vercel",

template/package.json

@@ -81,7 +81,7 @@
     "nosleep.js": "0.12.0",
     "npm": "^9.7.2",
     "p-queue": "^7.3.4",
-    "protobufjs": "^7.2.3",
+    "protobufjs": "^7.2.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-is": "18.0.0",

template/src/assets/font-styles.css

@@ -24,6 +24,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-lang-translate:before {
+  content: '\e9a4';
+  color: #fff;
+}
 .icon-spotlight:before {
   content: '\e9a3';
   color: #fff;

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',

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;