agora-appbuilder-core 4.0.30-beta-4 → 4.0.31-beta-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.30-beta-4",
+  "version": "4.0.31-beta-1",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/customization-api/sub-components.ts

@@ -86,3 +86,4 @@ export type {TranscriptProps} from '../src/subComponents/caption/Transcript';
 export {default as CaptionPanel} from '../src/subComponents/caption/CaptionContainer';
 export {default as VBPreview} from '../src/components/virtual-background/VideoPreview';
 export {default as Toast} from '../react-native-toast-message';
+export {default as CaptionContainer} from '../src/subComponents/caption/CaptionContainer';

package/template/defaultConfig.js

@@ -76,8 +76,8 @@ const DefaultConfig = {
   CHAT_ORG_NAME: '',
   CHAT_APP_NAME: '',
   CHAT_URL: '',
-  CLI_VERSION: '3.0.30-beta-4',
-  CORE_VERSION: '4.0.30-beta-4',
+  CLI_VERSION: '3.0.30-1',
+  CORE_VERSION: '4.0.30-1',
   DISABLE_LANDSCAPE_MODE: false,
   STT_AUTO_START: false,
   CLOUD_RECORDING_AUTO_START: false,

package/template/package.json

@@ -70,7 +70,6 @@
     "electron-log": "4.3.5",
     "electron-squirrel-startup": "1.0.0",
     "electron-updater": "4.3.9",
-    "emoji-mart-native": "^0.6.5-beta",
     "emoji-picker-react": "^4.7.1",
     "exponential-backoff": "3.1.0",
     "fetch-retry": "^5.0.6",
@@ -110,6 +109,7 @@
     "react-router-native": "5.2.0",
     "react-spring-bottom-sheet": "3.4.1",
     "react-tooltip": "4.5.1",
+    "rn-emoji-keyboard": "^1.7.0",
     "rn-fetch-blob": "0.12.0",
     "white-web-sdk": "2.16.42"
   },

package/template/src/components/ChatContext.ts

@@ -33,6 +33,8 @@ export interface ChatBubbleProps {
   previousMessageCreatedTimestamp?: string;
   reactions?: Reaction[];
   scrollOffset?: number;
+  replyToMsgId?: string;
+  isLastMsg?: boolean;
 
   render?: (
     isLocal: boolean,
@@ -50,6 +52,7 @@ export interface ChatBubbleProps {
     ext?: string,
     previousMessageCreatedTimestamp?: string,
     reactions?: Reaction[],
+    replyToMsgId?: string,
   ) => JSX.Element;
 }
 

package/template/src/components/Controls.tsx

@@ -254,6 +254,7 @@ export const WhiteboardListener = () => {
 
 const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
   const {label} = useToolbarProps();
+  const {data} = useRoomInfo();
   const noiseCancellationLabel = useString(toolbarItemNoiseCancellationText)();
   const whiteboardLabel = useString<boolean>(toolbarItemWhiteboardText);
   const captionLabel = useString<boolean>(toolbarItemCaptionText);
@@ -452,6 +453,13 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
     whiteboardRoomState === RoomPhase.Connecting ||
     whiteboardRoomState === RoomPhase.Disconnecting;
 
+  //Disable whiteboard button when backend sends error
+  const WhiteboardError =
+    data?.whiteboard?.error &&
+    (data?.whiteboard?.error?.code || data?.whiteboard?.error?.message)
+      ? true
+      : false;
+
   //whiteboard ends
 
   if (isHost && $config.ENABLE_WHITEBOARD && isWebInternal()) {
@@ -466,8 +474,31 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
       textColor: $config.FONT_COLOR,
       title: whiteboardLabel(whiteboardActive),
       onPress: () => {
-        setActionMenuVisible(false);
-        toggleWhiteboard(whiteboardActive, true);
+        if (WhiteboardError) {
+          setActionMenuVisible(false);
+          Toast.show({
+            leadingIconName: 'alert',
+            type: 'error',
+            text1: 'Failed to enable Whiteboard Service.',
+            text2: data?.whiteboard?.error?.message,
+            visibilityTime: 1000 * 10,
+            primaryBtn: null,
+            secondaryBtn: null,
+            leadingIcon: null,
+          });
+          logger.error(
+            LogSource.Internals,
+            'JOIN_MEETING',
+            'Failed to enable Whiteboard Service',
+            {
+              message: data?.whiteboard?.error?.message,
+              code: data?.whiteboard?.error?.code,
+            },
+          );
+        } else {
+          setActionMenuVisible(false);
+          toggleWhiteboard(whiteboardActive, true);
+        }
       },
     });
   }
@@ -572,22 +603,24 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
     },
   });
 
-  actionMenuitems.push({
-    hide: w => {
-      return w >= BREAKPOINTS.lg ? true : false;
-    },
-    componentName: 'chat',
-    order: 7,
-    icon: 'chat-nav',
-    iconColor: $config.SECONDARY_ACTION_COLOR,
-    textColor: $config.FONT_COLOR,
-    title: chatLabel,
-    onPress: () => {
-      setActionMenuVisible(false);
-      setChatType(ChatType.Group);
-      setSidePanel(SidePanelType.Chat);
-    },
-  });
+  if ($config.CHAT) {
+    actionMenuitems.push({
+      hide: w => {
+        return w >= BREAKPOINTS.lg ? true : false;
+      },
+      componentName: 'chat',
+      order: 7,
+      icon: 'chat-nav',
+      iconColor: $config.SECONDARY_ACTION_COLOR,
+      textColor: $config.FONT_COLOR,
+      title: chatLabel,
+      onPress: () => {
+        setActionMenuVisible(false);
+        setChatType(ChatType.Group);
+        setSidePanel(SidePanelType.Chat);
+      },
+    });
+  }
 
   if ($config.SCREEN_SHARING) {
     if (

package/template/src/components/Navbar.tsx

@@ -62,6 +62,8 @@ import {
   videoRoomRecordingText,
 } from '../language/default-labels/videoCallScreenLabels';
 import {useLanguage} from '../language/useLanguage';
+import Toast from '../../react-native-toast-message';
+import {logger, LogSource} from '../logger/AppBuilderLogger';
 
 export const ParticipantsCountView = ({
   isMobileView = false,
@@ -223,6 +225,12 @@ export const ChatIconButton = (props: ChatIconButtonProps) => {
   const {label = null, onPress: onPressCustom = null} = useToolbarProps();
   const {sidePanel, setSidePanel} = useSidePanel();
   const {isToolbarMenuItem} = useToolbarMenu();
+  const {data} = useRoomInfo();
+  //disable chat button when BE sends error on chat
+  const ChatError =
+    data?.chat?.error && (data?.chat?.error?.code || data?.chat?.error?.message)
+      ? true
+      : false;
   const {
     badgeContainerPosition = {
       top: 0,
@@ -249,7 +257,27 @@ export const ChatIconButton = (props: ChatIconButtonProps) => {
   }, [sidePanel]);
 
   const onPress = () => {
-    {
+    if (ChatError) {
+      Toast.show({
+        leadingIconName: 'alert',
+        type: 'error',
+        text1: 'Failed to enable Chat Service.',
+        text2: data?.chat?.error?.message,
+        visibilityTime: 1000 * 10,
+        primaryBtn: null,
+        secondaryBtn: null,
+        leadingIcon: null,
+      });
+      logger.error(
+        LogSource.Internals,
+        'JOIN_MEETING',
+        'Failed to enable Chat Service',
+        {
+          message: data?.chat?.error?.message,
+          code: data?.chat?.error?.code,
+        },
+      );
+    } else {
       if (isPanelActive) {
         setSidePanel(SidePanelType.None);
         setChatType(ChatType.Group);

package/template/src/components/chat/chatConfigure.native.tsx

@@ -1,7 +1,7 @@
 import {createHook} from 'customization-implementation';
 import React, {createContext, useEffect, useState} from 'react';
 import {useRoomInfo} from '../room-info/useRoomInfo';
-import {useContent} from 'customization-api';
+import {useChatUIControls, useContent} from 'customization-api';
 import {
   ChatClient,
   ChatConnectEventListener,
@@ -32,6 +32,7 @@ interface ChatMessageAttributes {
   from_platform?: string;
   channel?: string;
   msg?: string;
+  replyToMsgId?: string;
 }
 interface chatConfigureContextInterface {
   open: boolean;
@@ -49,6 +50,8 @@ interface chatConfigureContextInterface {
   ) => void;
   addReaction: (msgId: string, reaction: string) => void;
   removeReaction: (msgId: string, reaction: string) => void;
+  pinMessage: (messageId: string) => void;
+  unPinMessage: (messageId: string) => void;
 }
 
 export const chatConfigureContext =
@@ -61,6 +64,8 @@ export const chatConfigureContext =
     deleteAttachment: () => {},
     addReaction: () => {},
     removeReaction: () => {},
+    pinMessage: () => {},
+    unPinMessage: () => {},
   });
 
 const ChatConfigure = ({children}) => {
@@ -84,6 +89,7 @@ const ChatConfigure = ({children}) => {
     addReactionToPrivateStore,
     addReactionToStore,
   } = useChatMessages();
+  const {setPinMsgId, setPinnedByUser} = useChatUIControls();
 
   React.useEffect(() => {
     defaultContentRef.current = defaultContent;
@@ -131,8 +137,15 @@ const ChatConfigure = ({children}) => {
             const {msgId, from, body, localTime} = message;
             const chatType = body.type;
             const fromUser = from;
-            const {file_ext, file_name, file_url, from_platform, channel, msg} =
-              message.attributes as ChatMessageAttributes;
+            const {
+              file_ext,
+              file_name,
+              file_url,
+              from_platform,
+              channel,
+              msg,
+              replyToMsgId,
+            } = message.attributes as ChatMessageAttributes;
 
             // prevent cross-channel messages
             if (channel !== data.channel) {
@@ -151,6 +164,7 @@ const ChatConfigure = ({children}) => {
                     msgId: msgId,
                     isDeleted: false,
                     type: ChatMessageType.TXT,
+                    replyToMsgId,
                   });
                 }
                 if (isPeerChat) {
@@ -163,6 +177,7 @@ const ChatConfigure = ({children}) => {
                       msgId: msgId,
                       isDeleted: false,
                       type: ChatMessageType.TXT,
+                      replyToMsgId,
                     },
                     false,
                   );
@@ -197,6 +212,7 @@ const ChatConfigure = ({children}) => {
                     thumb: thumb,
                     url: url,
                     fileName: file_name,
+                    replyToMsgId,
                   });
                 }
                 if (isPeerChat) {
@@ -217,6 +233,7 @@ const ChatConfigure = ({children}) => {
                       thumb: thumb,
                       url: url,
                       fileName: file_name,
+                      replyToMsgId,
                     },
                     false,
                   );
@@ -242,6 +259,7 @@ const ChatConfigure = ({children}) => {
                     url: file_url,
                     ext: file_ext,
                     fileName: file_name,
+                    replyToMsgId,
                   });
                 }
                 if (isPeerChat) {
@@ -262,6 +280,7 @@ const ChatConfigure = ({children}) => {
                       url: file_url,
                       ext: file_ext,
                       fileName: file_name,
+                      replyToMsgId,
                     },
                     false,
                   );
@@ -285,6 +304,9 @@ const ChatConfigure = ({children}) => {
             );
           }
         },
+        // onMessagePinChanged: data => {
+        //   console.warn('onMessagePinChanged', data);
+        // },
       };
       console.warn('setup listener');
       chatManager.removeAllMessageListener();
@@ -372,8 +394,11 @@ const ChatConfigure = ({children}) => {
     switch (type) {
       case ChatMessageType.TXT:
         chatMsg = ChatMessage.createTextMessage(to, msg, chatMsgChatType);
+        console.warn('createTextMessage', chatMsg);
         chatMsg.attributes = {
           channel: data.channel,
+          replyToMsgId: option?.ext?.replyToMsgId,
+          from_platform: 'native',
         };
         break;
       case ChatMessageType.IMAGE:
@@ -385,6 +410,7 @@ const ChatConfigure = ({children}) => {
           file_url: option?.ext?.file_url, // this local url , when upload util is available for native then will use it
           from_platform: 'native',
           channel: data.channel,
+          replyToMsgId: option?.ext?.replyToMsgId,
         };
 
         console.warn('Image msg to be sent', chatMsg);
@@ -401,37 +427,20 @@ const ChatConfigure = ({children}) => {
           file_url: option?.url, // this local url , when upload util is available for native then will use it
           from_platform: 'native',
           channel: data.channel,
+          replyToMsgId: option?.ext?.replyToMsgId,
         };
         console.warn('File msg to be sent', chatMsg);
         break;
     }
-    //
+
     chatClient.chatManager
       .sendMessage(chatMsg, callback)
       .then(() => {
-        // log here if the method call succeeds.
-        console.warn('send message success');
-        // add to local store of sender
         // for image and file msgs we will update on upload success of chatAttachment.native
-        if (type === ChatMessageType.TXT) {
-          const messageData = {
-            msg: option.msg.replace(/^(\n)+|(\n)+$/g, ''),
-            createdTimestamp: timeNow(),
-            msgId: chatMsg.msgId,
-            isDeleted: false,
-            type: option.type,
-          };
-
-          // this is local user messages
-          if (option.chatType === SDKChatType.SINGLE_CHAT) {
-            addMessageToPrivateStore(Number(option.to), messageData, true);
-          } else {
-            addMessageToStore(Number(option.from), messageData);
-          }
-        }
+        // for text msgs ChatInput.native
+        console.warn('send message successfull ');
       })
       .catch(reason => {
-        //log here if the method call fails.
         console.warn('send message fail.', reason);
       });
   };
@@ -525,7 +534,8 @@ const ChatConfigure = ({children}) => {
         );
       })
       .catch(err => {
-        if (err.type === 1101) {
+        console.warn(err);
+        if (err.code === 1301) {
           // If user already added reaction then remove it
           removeReaction(msgId, reaction);
         } else {
@@ -559,6 +569,54 @@ const ChatConfigure = ({children}) => {
       });
   };
 
+  const pinMessage = (messageId: string) => {
+    return;
+    // available in 1.3.0 chat sdk
+    // chatClient.chatManager
+    //   .pinMessage(messageId)
+    //   .then(res => {
+    //     setPinMsgId(messageId);
+    //     setPinnedByUser(Number(localUid));
+    //     logger.debug(
+    //       LogSource.Internals,
+    //       'CHAT',
+    //       `Successfully Pinned message with id ${messageId}`,
+    //       res,
+    //     );
+    //   })
+    //   .catch(err => {
+    //     logger.debug(
+    //       LogSource.Internals,
+    //       'CHAT',
+    //       `Failed to Pin Message with id ${messageId}`,
+    //       err,
+    //     );
+    //   });
+  };
+
+  const unPinMessage = (messageId: string) => {
+    return; // available in 1.3.0 chat sdk
+    // chatClient.chatManager
+    //   .unpinMessage(messageId)
+    //   .then(res => {
+    //     setPinMsgId('');
+    //     logger.debug(
+    //       LogSource.Internals,
+    //       'CHAT',
+    //       `Successfully Pinned message with id ${messageId}`,
+    //       res,
+    //     );
+    //   })
+    //   .catch(err => {
+    //     logger.debug(
+    //       LogSource.Internals,
+    //       'CHAT',
+    //       `Failed to Pin Message with id ${messageId}`,
+    //       err,
+    //     );
+    //   });
+  };
+
   return (
     <chatConfigureContext.Provider
       value={{
@@ -570,6 +628,8 @@ const ChatConfigure = ({children}) => {
         deleteAttachment,
         addReaction,
         removeReaction,
+        pinMessage,
+        unPinMessage,
       }}>
       {children}
     </chatConfigureContext.Provider>