agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

package/template/src/components/Chat.tsx

@@ -10,55 +10,52 @@
 *********************************************
 */
 import React, {useState, useContext} from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  Dimensions,
-} from 'react-native';
+import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
 import ChatContainer from '../subComponents/ChatContainer';
 import ChatInput from '../subComponents/ChatInput';
 import ChatParticipants from '../subComponents/chat/ChatParticipants';
 import ColorContext from './ColorContext';
 import {useChatNotification} from './chat-notification/useChatNotification';
 import {useString} from '../utils/useString';
-import {isIOS, isValidReactComponent, isWebInternal} from '../utils/common';
-import {useChatUIControl} from './chat-ui/useChatUIControl';
+import {
+  isIOS,
+  isMobileUA,
+  isValidReactComponent,
+  isWebInternal,
+  useIsSmall,
+} from '../utils/common';
+import {ChatType, useChatUIControls} from './chat-ui/useChatUIControls';
 import {useCustomization} from 'customization-implementation';
 import {UidType} from '../../agora-rn-uikit';
 import {ChatBubbleProps} from './ChatContext';
-import {
-  ChatTextInputProps,
-  ChatSendButtonProps,
-} from '../subComponents/ChatInput';
+import {useSidePanel} from '../utils/useSidePanel';
+import {SidePanelType} from '../subComponents/SidePanelEnum';
+import IconButton from '../atoms/IconButton';
+import ThemeConfig from '../theme';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+import SidePanelHeader from '../subComponents/SidePanelHeader';
+import CommonStyles from './CommonStyles';
+import {useLayout} from '../utils/useLayout';
+import {getGridLayoutName} from '../pages/video-call/DefaultLayouts';
+import {ChatHeader} from '../pages/video-call/SidePanelHeader';
+import useCaptionWidth from '../../src/subComponents/caption/useCaptionWidth';
+import {useIsRecordingBot} from '../subComponents/recording/useIsRecordingBot';
 
-interface ChatProps {
+export interface ChatProps {
   chatBubble?: React.ComponentType<ChatBubbleProps>;
-  chatInput?: React.ComponentType<ChatTextInputProps>;
-  chatSendButton?: React.ComponentType<ChatSendButtonProps>;
+  chatInput?: React.ComponentType;
+  showHeader?: boolean;
 }
 
 const Chat = (props?: ChatProps) => {
   // commented for v1 release
-  // const groupChatLabel = useString('groupChatLabel')();
-  // const privateChatLabel = useString('privateChatLabel')();
-  const groupChatLabel = 'Group';
-  const privateChatLabel = 'Private';
-  const [dim, setDim] = useState([
-    Dimensions.get('window').width,
-    Dimensions.get('window').height,
-    Dimensions.get('window').width > Dimensions.get('window').height,
-  ]);
-  const isSmall = dim[0] < 700;
+  const isSmall = useIsSmall();
+  const {setSidePanel} = useSidePanel();
+  const {showHeader = true} = props;
+  const {isRecordingBot} = useIsRecordingBot();
+  const {chatType, setChatType, setPrivateChatUser, showEmojiPicker} =
+    useChatUIControls();
 
-  const {
-    groupActive,
-    setGroupActive,
-    privateActive,
-    setPrivateActive,
-    setSelectedChatUserId: setSelectedUser,
-  } = useChatUIControl();
   const {
     unreadGroupMessageCount,
     setUnreadGroupMessageCount,
@@ -69,168 +66,148 @@ const Chat = (props?: ChatProps) => {
   } = useChatNotification();
 
   const {primaryColor} = useContext(ColorContext);
+  const {transcriptHeight} = useCaptionWidth();
 
   React.useEffect(() => {
     return () => {
       // reset both the active tabs
-      setGroupActive(false);
-      setPrivateActive(false);
-      setSelectedUser(0);
+      setChatType(ChatType.Group);
+      setPrivateChatUser(0);
     };
   }, []);
 
-  const selectGroup = () => {
-    setPrivateActive(false);
-    setGroupActive(true);
-    setUnreadGroupMessageCount(0);
-    setSelectedUser(0);
-  };
-  const selectPrivate = () => {
-    setGroupActive(false);
-    setSelectedUser(0);
-    setPrivateActive(false);
-  };
   const selectUser = (userUID: UidType) => {
-    setSelectedUser(userUID);
-    setPrivateActive(true);
-    setUnreadIndividualMessageCount((prevState) => {
-      return {
-        ...prevState,
-        [userUID]: 0,
-      };
-    });
-    setUnreadPrivateMessageCount(
-      unreadPrivateMessageCount - (unreadIndividualMessageCount[userUID] || 0),
-    );
+    setPrivateChatUser(userUID);
+    setChatType(ChatType.Private);
+    //move this logic into ChatContainer
+    // setUnreadIndividualMessageCount((prevState) => {
+    //   return {
+    //     ...prevState,
+    //     [userUID]: 0,
+    //   };
+    // });
+    // setUnreadPrivateMessageCount(
+    //   unreadPrivateMessageCount - (unreadIndividualMessageCount[userUID] || 0),
+    // );
   };
 
-  const {ChatAfterView, ChatBeforeView} = useCustomization((data) => {
-    let components: {
-      ChatAfterView: React.ComponentType;
-      ChatBeforeView: React.ComponentType;
-    } = {
-      ChatAfterView: React.Fragment,
-      ChatBeforeView: React.Fragment,
-    };
-    if (
-      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?.after &&
-      //     isValidReactComponent(data?.components?.videoCall?.chat?.after)
-      //   ) {
-      //     components.ChatAfterView = data?.components?.videoCall?.chat?.after;
-      //   }
-      //   if (
-      //     data?.components?.videoCall?.chat?.before &&
-      //     isValidReactComponent(data?.components?.videoCall?.chat?.before)
-      //   ) {
-      //     components.ChatBeforeView = data?.components?.videoCall?.chat?.before;
-      //   }
-      // }
-    }
-    return components;
-  });
-
+  const {ChatAfterView, ChatBeforeView, ChatInputComponent} = useCustomization(
+    data => {
+      let components: {
+        ChatAfterView: React.ComponentType;
+        ChatBeforeView: React.ComponentType;
+        ChatInputComponent: React.ComponentType;
+      } = {
+        ChatAfterView: React.Fragment,
+        ChatBeforeView: React.Fragment,
+        ChatInputComponent: ChatInput,
+      };
+      if (
+        data?.components?.videoCall &&
+        typeof data?.components?.videoCall === 'object'
+      ) {
+        if (
+          data?.components?.videoCall?.chat &&
+          typeof data?.components?.videoCall?.chat === 'object'
+        ) {
+          if (
+            data?.components?.videoCall?.chat?.chatInput &&
+            typeof data?.components?.videoCall?.chat?.chatInput !== 'object' &&
+            isValidReactComponent(data?.components?.videoCall?.chat?.chatInput)
+          ) {
+            components.ChatInputComponent =
+              data?.components?.videoCall?.chat?.chatInput;
+          }
+        }
+        // commented for v1 release
+        // if (
+        //   data?.components?.videoCall?.chat &&
+        //   typeof data?.components?.videoCall?.chat === 'object'
+        // ) {
+        //   if (
+        //     data?.components?.videoCall?.chat?.after &&
+        //     isValidReactComponent(data?.components?.videoCall?.chat?.after)
+        //   ) {
+        //     components.ChatAfterView = data?.components?.videoCall?.chat?.after;
+        //   }
+        //   if (
+        //     data?.components?.videoCall?.chat?.before &&
+        //     isValidReactComponent(data?.components?.videoCall?.chat?.before)
+        //   ) {
+        //     components.ChatBeforeView = data?.components?.videoCall?.chat?.before;
+        //   }
+        // }
+      } else {
+        if (props?.chatInput && isValidReactComponent(props.chatInput)) {
+          components.ChatInputComponent = props.chatInput;
+        }
+      }
+      return components;
+    },
+  );
+  const {currentLayout} = useLayout();
   return (
     <>
       <View
-        style={
-          isWebInternal()
-            ? !isSmall
-              ? style.chatView
-              : style.chatViewNative
-            : style.chatViewNative
-        }>
+        style={[
+          isMobileUA()
+            ? //mobile and mobile web
+              CommonStyles.sidePanelContainerNative
+            : isSmall()
+            ? // desktop minimized
+              CommonStyles.sidePanelContainerWebMinimzed
+            : // desktop maximized
+              CommonStyles.sidePanelContainerWeb,
+          isWebInternal() && !isSmall() && currentLayout === getGridLayoutName()
+            ? {marginVertical: 4}
+            : {},
+          // @ts-ignore
+          transcriptHeight && !isMobileUA() && {height: transcriptHeight},
+          // showEmojiPicker && {
+          //   backgroundColor:
+          //     $config.HARD_CODED_BLACK_COLOR + hexadecimalTransparency['60'],
+          // },
+          ,
+        ]}>
         {/**
          * In Native device we are setting absolute view. so placed ChatBeforeView and ChatAfterView inside the main view
          */}
         <ChatBeforeView />
-        <View style={style.chatNav}>
-          <TouchableOpacity
-            onPress={selectGroup}
-            style={
-              groupActive
-                ? [style.groupActive, {borderColor: primaryColor}]
-                : [
-                    style.group,
-                    {
-                      borderColor: primaryColor,
-                      borderTopColor: primaryColor + '80',
-                    },
-                  ]
-            }>
-            {unreadGroupMessageCount !== 0 ? (
-              <View style={style.chatNotification}>
-                <Text>{unreadGroupMessageCount}</Text>
-              </View>
-            ) : null}
-            <Text style={groupActive ? style.groupTextActive : style.groupText}>
-              {groupChatLabel}
-            </Text>
-          </TouchableOpacity>
-          <TouchableOpacity
-            onPress={selectPrivate}
-            style={
-              !groupActive
-                ? [style.privateActive, {borderColor: primaryColor}]
-                : [
-                    style.private,
-                    {
-                      borderColor: primaryColor,
-                      borderTopColor: primaryColor + '80',
-                    },
-                  ]
-            }>
-            {unreadPrivateMessageCount !== 0 ? (
-              <View style={style.chatNotification}>
-                <Text>{unreadPrivateMessageCount}</Text>
-              </View>
-            ) : null}
-            <Text
-              style={!groupActive ? style.groupTextActive : style.groupText}>
-              {privateChatLabel}
-            </Text>
-          </TouchableOpacity>
-        </View>
-        {groupActive ? (
+        {showHeader && <ChatHeader />}
+        {chatType === ChatType.Group ? (
           <>
             <ChatContainer {...props} />
-            <View style={[style.chatInputLineSeparator, {marginBottom: 0}]} />
-            <View>
+            {isRecordingBot ? (
+              <></>
+            ) : (
               <View style={style.chatInputContainer}>
-                <View style={[style.chatInputLineSeparator, {opacity: 0.3}]} />
-                <ChatInput {...props} />
+                <ChatInputComponent />
               </View>
-            </View>
+            )}
           </>
         ) : (
+          <></>
+        )}
+        {chatType === ChatType.MemberList ? (
+          <ChatParticipants selectUser={selectUser} />
+        ) : (
+          <></>
+        )}
+        {chatType === ChatType.Private ? (
           <>
-            {!privateActive ? (
-              <ChatParticipants selectUser={selectUser} />
+            <ChatContainer {...props} />
+            {isRecordingBot ? (
+              <></>
             ) : (
-              <>
-                <ChatContainer {...props} />
-                <View
-                  style={[style.chatInputLineSeparator, {marginBottom: 0}]}
-                />
-                <View>
-                  <View style={style.chatInputContainer}>
-                    <View
-                      style={[style.chatInputLineSeparator, {opacity: 0.3}]}
-                    />
-                    <ChatInput {...props} />
-                  </View>
+              <View>
+                <View style={style.chatInputContainer}>
+                  <ChatInputComponent />
                 </View>
-              </>
+              </View>
             )}
           </>
+        ) : (
+          <></>
         )}
         <ChatAfterView />
       </View>
@@ -239,137 +216,58 @@ const Chat = (props?: ChatProps) => {
 };
 
 const style = StyleSheet.create({
-  chatView: {
-    width: '20%',
-    minWidth: 200,
-    maxWidth: 300,
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
-    flex: 1,
-    shadowColor: $config.PRIMARY_FONT_COLOR + '80',
-    shadowOpacity: 0.5,
-    shadowOffset: {width: -2, height: 1},
-    shadowRadius: 3,
+  buttonHolder: {
+    backgroundColor:
+      $config.HARD_CODED_BLACK_COLOR + hexadecimalTransparency['30%'],
+    borderRadius: 12,
+    flexDirection: 'row',
   },
   chatViewNative: {
-    position: 'absolute',
     zIndex: 5,
     width: '100%',
     height: '100%',
     right: 0,
     bottom: 0,
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
-  },
-  heading: {
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
-    width: 150,
-    height: '7%',
-    paddingLeft: 20,
-    flexDirection: 'row',
-  },
-  headingText: {
-    flex: 1,
-    paddingLeft: 5,
-    marginVertical: 'auto',
-    fontWeight: '700',
-    color: $config.PRIMARY_FONT_COLOR,
-    fontSize: 25,
-    alignSelf: 'center',
-    justifyContent: 'center',
-  },
-  chatNav: {
-    flexDirection: 'row',
-    height: '6%',
   },
   chatInputContainer: {
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
-    paddingBottom: 10,
-  },
-  chatInputLineSeparator: {
-    backgroundColor: $config.PRIMARY_FONT_COLOR + '80',
     width: '100%',
-    height: 1,
-    marginHorizontal: -20,
-    alignSelf: 'center',
-    opacity: 0.5,
-    marginBottom: 10,
-  },
-  groupActive: {
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
-    flex: 1,
-    height: '100%',
-    textAlign: 'center',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  group: {
-    backgroundColor: $config.PRIMARY_FONT_COLOR + 22,
-    flex: 1,
-    height: '100%',
-    textAlign: 'center',
-    borderBottomRightRadius: 10,
+    flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
   },
-  privateActive: {
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
-    flex: 1,
-    height: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
+  activeContainer: {
+    margin: 2,
+    backgroundColor: $config.PRIMARY_ACTION_BRAND_COLOR,
+    borderRadius: 11,
+    alignSelf: 'center',
   },
-  private: {
-    backgroundColor: $config.PRIMARY_FONT_COLOR + 22,
-    flex: 1,
-    height: '100%',
-    borderBottomLeftRadius: 10,
-    alignItems: 'center',
-    justifyContent: 'center',
+  nonActiveContainer: {
+    alignSelf: 'center',
   },
-  groupTextActive: {
-    marginVertical: 'auto',
-    fontWeight: '700',
-    textAlign: 'center',
-    fontSize: 16,
-    color: $config.PRIMARY_FONT_COLOR,
-    justifyContent: 'center',
-    paddingVertical: 5,
+  activeText: {
+    paddingHorizontal: 24,
+    paddingVertical: 10,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '600',
+    fontSize: 12,
+    color: $config.PRIMARY_ACTION_TEXT_COLOR,
   },
-  groupText: {
-    marginVertical: 'auto',
-    fontWeight: '700',
-    textAlign: 'center',
-    fontSize: 16,
-    paddingVertical: 5,
-    justifyContent: 'center',
-    color: $config.PRIMARY_FONT_COLOR + 50,
+  nonActiveText: {
+    paddingHorizontal: 24,
+    paddingVertical: 10,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '600',
+    fontSize: 12,
+    color: $config.FONT_COLOR,
   },
   chatNotification: {
-    width: 20,
-    height: 20,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: $config.PRIMARY_COLOR,
-    color: $config.SECONDARY_FONT_COLOR,
-    fontFamily: isIOS() ? 'Helvetica' : 'sans-serif',
-    borderRadius: 10,
-    position: 'absolute',
-    left: 25,
-    top: -5,
-  },
-  chatNotificationPrivate: {
-    width: 20,
-    height: 20,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: $config.PRIMARY_COLOR,
-    color: $config.SECONDARY_FONT_COLOR,
-    fontFamily: isIOS() ? 'Helvetica' : 'sans-serif',
-    borderRadius: 10,
+    width: 8,
+    height: 8,
+    backgroundColor: $config.SEMANTIC_ERROR,
+    borderRadius: 30,
     position: 'absolute',
-    right: 20,
-    top: 0,
+    right: 8,
+    top: 4,
   },
 });
 

package/template/src/components/ChatContext.ts

@@ -12,6 +12,7 @@
 import RtmEngine from 'agora-react-native-rtm';
 import {UidType} from '../../agora-rn-uikit';
 import {createContext, SetStateAction} from 'react';
+import {ChatMessageType} from './chat-messages/useChatMessages';
 
 export interface ChatBubbleProps {
   isLocal: boolean;
@@ -21,6 +22,14 @@ export interface ChatBubbleProps {
   uid: UidType;
   msgId: string;
   isDeleted: boolean;
+  isSameUser: boolean;
+  type: ChatMessageType;
+  thumb?: string;
+  url?: string;
+  fileName?: string;
+  ext?: string;
+  previousMessageCreatedTimestamp?: string;
+
   render?: (
     isLocal: boolean,
     message: string,
@@ -28,7 +37,14 @@ export interface ChatBubbleProps {
     uid: UidType,
     msgId: string,
     isDeleted: boolean,
-    updatedTimestamp?: string,
+    updatedTimestamp: string,
+    isSameUser: boolean,
+    type: ChatMessageType,
+    thumb?: string,
+    url?: string,
+    fileName?: string,
+    ext?: string,
+    previousMessageCreatedTimestamp?: string,
   ) => JSX.Element;
 }
 
@@ -46,6 +62,7 @@ export enum messageActionType {
 
 export interface chatContext {
   hasUserJoinedRTM: boolean;
+  rtmInitTimstamp: number;
   engine: RtmEngine;
   localUid: UidType;
   onlineUsersCount: number;
@@ -57,6 +74,10 @@ export enum controlMessageEnum {
   muteSingleVideo = '3',
   muteSingleAudio = '4',
   kickUser = '5',
+  requestVideo = '6',
+  requestAudio = '7',
+  //newUserJoined = '8',
+  kickScreenshare = '9',
 }
 
 const ChatContext = createContext(null as unknown as chatContext);

package/template/src/components/ColorConfigure.tsx

@@ -13,8 +13,7 @@ import React from 'react';
 import ColorContext from './ColorContext';
 
 const ColorConfigure = (props: {children: React.ReactNode}) => {
-  const primaryColor = $config.PRIMARY_COLOR;
-  console.log(primaryColor);
+  const primaryColor = $config.PRIMARY_ACTION_BRAND_COLOR;
   return (
     <ColorContext.Provider
       value={{

package/template/src/components/ColorContext.ts

@@ -15,6 +15,6 @@ interface ColorContext {
   primaryColor: any;
 }
 
-const ColorContext = createContext((null as unknown) as ColorContext);
+const ColorContext = createContext({} as unknown as ColorContext);
 
 export default ColorContext;

package/template/src/components/CommonStyles.ts

@@ -0,0 +1,51 @@
+import {StyleSheet} from 'react-native';
+import ThemeConfig from '../theme';
+
+export const SIDE_PANEL_MAX_WIDTH = '20%';
+export const SIDE_PANEL_MIN_WIDTH = 372;
+export const SIDE_PANEL_GAP = 8;
+export const CAPTION_CONTAINER_HEIGHT = 144;
+export const MOBILE_CAPTION_CONTAINER_HEIGHT = 115;
+
+const CommonStyles = StyleSheet.create({
+  sidePanelContainerWeb: {
+    flex: 1,
+    maxWidth: SIDE_PANEL_MAX_WIDTH,
+    minWidth: 372,
+    borderRadius: ThemeConfig.BorderRadius.small,
+    marginLeft: SIDE_PANEL_GAP,
+    backgroundColor: $config.CARD_LAYER_1_COLOR,
+    borderColor: $config.CARD_LAYER_3_COLOR,
+    borderWidth: 1,
+    shadowColor: $config.HARD_CODED_BLACK_COLOR,
+    shadowOpacity: 0.2,
+    shadowOffset: {width: 0, height: 0},
+    shadowRadius: 20,
+    overflow: 'hidden',
+  },
+  sidePanelContainerNative: {
+    zIndex: 5,
+    width: '100%',
+    height: '100%',
+  },
+  sidePanelContainerWebMinimzed: {
+    position: 'absolute',
+    zIndex: 5,
+    width: '96%',
+    height: '96%',
+    right: '2%',
+    left: '2%',
+    top: '2%',
+    bottom: '2%',
+    borderRadius: ThemeConfig.BorderRadius.small,
+    backgroundColor: $config.CARD_LAYER_1_COLOR,
+    borderColor: $config.CARD_LAYER_3_COLOR,
+    borderWidth: 1,
+    shadowColor: $config.HARD_CODED_BLACK_COLOR,
+    shadowOpacity: 0.2,
+    shadowOffset: {width: 0, height: 0},
+    shadowRadius: 20,
+    overflow: 'hidden',
+  },
+});
+export default CommonStyles;