agora-appbuilder-core 4.0.0 → 4.0.2

package/template/src/auth/useTokenAuth.tsx

@@ -0,0 +1,194 @@
+import React, {useEffect, useContext, useRef} from 'react';
+import jwt_decode from 'jwt-decode';
+import StorageContext from '../components/StorageContext';
+import SdkEvents from '../utils/SdkEvents';
+import isSDK from '../utils/isSDK';
+import {getPlatformId} from './config';
+const REFRESH_TOKEN_DURATION_IN_SEC = 59;
+
+const useTokenAuth = () => {
+  const tokenRef = useRef(null);
+  const {setStore, store} = useContext(StorageContext);
+  const [tokenExpiresAt, setTokenExpiresAt] = React.useState(0);
+  const timerRef = useRef(null);
+  const updateToken = (token: string) => {
+    setStore && setStore(store => ({...store, token}));
+  };
+
+  const validateToken = (token: string) => {
+    if (token && token.trim() !== '') {
+      const decoded = jwt_decode(token);
+      // @ts-ignore
+      const expiresAt = decoded?.exp * 1000;
+      if (Date.now() >= expiresAt) {
+        if (isSDK()) {
+          SdkEvents.emit('did-token-expire');
+        }
+        throw 'Token expired. Pass a new token';
+      }
+    } else {
+      if (isSDK()) {
+        SdkEvents.emit('token-not-found');
+      }
+      throw 'Token is missing in the options';
+    }
+    return true;
+  };
+
+  const getRefreshToken = async () => {
+    if (store?.token) {
+      await fetch(`${$config.BACKEND_ENDPOINT}/v1/token/refresh`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          authorization: store?.token ? `Bearer ${store.token}` : '',
+          'X-Platform-ID': getPlatformId(),
+        },
+      })
+        .then(response => response.json())
+        .then(data => {
+          if (data?.token) {
+            updateToken(data.token);
+            if (isSDK()) {
+              SdkEvents.emit('token-refreshed');
+            }
+          }
+        });
+    } else {
+      //'debugging no token to refresh'
+    }
+  };
+
+  useEffect(() => {
+    if (!tokenExpiresAt) return;
+
+    timerRef.current = setInterval(() => {
+      const diffInSeconds = Math.floor(
+        Math.abs(tokenExpiresAt - Date.now()) / 1000,
+      );
+      // const minutesLeft = Math.floor(diffInSeconds / 60) % 60;
+      // const secondsLeft = (diffInSeconds - minutes * 60) % 60;
+
+      if (diffInSeconds < REFRESH_TOKEN_DURATION_IN_SEC) {
+        try {
+          if (isSDK()) {
+            SdkEvents.emit('will-token-expire');
+          }
+          getRefreshToken();
+          clearInterval(timerRef.current);
+        } catch (error) {
+          clearInterval(timerRef.current);
+        }
+      }
+      if (diffInSeconds < 0) {
+        clearInterval(timerRef.current);
+      }
+    }, 1000);
+
+    return () => {
+      clearInterval(timerRef.current);
+    };
+  }, [tokenExpiresAt]);
+
+  useEffect(() => {
+    const syncToken = async () => {
+      if (!store?.token) {
+        try {
+          timerRef.current && clearInterval(timerRef.current);
+        } catch (error) {
+          console.log('debugging error on clearing interval');
+        }
+      } else {
+        const decoded = jwt_decode(store.token);
+        // @ts-ignore
+        const expiresAt = decoded?.exp * 1000;
+        if (Date.now() >= expiresAt) {
+          if (isSDK()) {
+            SdkEvents.emit('did-token-expire');
+          }
+          //token expired
+        } else {
+          setTokenExpiresAt(expiresAt);
+        }
+      }
+    };
+    tokenRef.current = store.token;
+    syncToken();
+  }, [store?.token]);
+
+  const enableTokenAuth = async (tokenparam?: string) => {
+    return new Promise(async (resolve, reject) => {
+      let token = '';
+      let updateTokenInStore = false;
+      try {
+        if (tokenparam) {
+          token = tokenparam;
+          updateTokenInStore = true;
+        } else {
+          token = store?.token;
+        }
+        if (token) {
+          try {
+            if (validateToken(token)) {
+              if (updateTokenInStore) {
+                updateToken(token);
+              }
+              setTimeout(() => {
+                resolve(true);
+              });
+            } else {
+              if (isSDK()) {
+                SdkEvents.emit('did-token-expire');
+              }
+            }
+          } catch (e) {
+            reject('Token expired');
+          }
+        } else {
+          if (isSDK()) {
+            SdkEvents.emit('token-not-found');
+          }
+          reject('Token not found');
+        }
+      } catch (error) {
+        reject(error);
+      }
+    });
+  };
+
+  const tokenLogout = async (cookieLogout: boolean = false) => {
+    return new Promise((resolve, reject) => {
+      try {
+        fetch(
+          `${$config.BACKEND_ENDPOINT}/v1/logout`,
+          cookieLogout
+            ? {credentials: 'include'}
+            : {
+                headers: {
+                  authorization: tokenRef.current
+                    ? `Bearer ${tokenRef.current}`
+                    : '',
+                },
+              },
+        )
+          .then(response => response.text())
+          .then(_ => {
+            resolve(true);
+            updateToken(null);
+          })
+          .catch(_ => {
+            reject(false);
+          });
+      } catch (error) {
+        reject(false);
+      }
+    });
+  };
+
+  return {
+    enableTokenAuth,
+    tokenLogout,
+  };
+};
+
+export default useTokenAuth;

package/template/src/components/Chat.tsx

@@ -24,14 +24,10 @@ import {
   isWebInternal,
   useIsSmall,
 } from '../utils/common';
-import {useChatUIControl} from './chat-ui/useChatUIControl';
+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';
@@ -42,33 +38,22 @@ 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';
 
 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 chatLabel = 'Chat';
-  const groupChatLabel = 'Group';
-  const privateChatLabel = 'Private';
-
   const isSmall = useIsSmall();
   const {setSidePanel} = useSidePanel();
   const {showHeader = true} = props;
-
-  const {
-    groupActive,
-    setGroupActive,
-    privateActive,
-    setPrivateActive,
-    setSelectedChatUserId: setSelectedUser,
-  } = useChatUIControl();
+  const {isRecordingBot} = useIsRecordingBot();
+  const {chatType, setChatType, setPrivateChatUser} = useChatUIControls();
 
   const {
     unreadGroupMessageCount,
@@ -80,19 +65,19 @@ 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 selectUser = (userUID: UidType) => {
-    setSelectedUser(userUID);
-    setPrivateActive(true);
+    setPrivateChatUser(userUID);
+    setChatType(ChatType.Private);
     //move this logic into ChatContainer
     // setUnreadIndividualMessageCount((prevState) => {
     //   return {
@@ -105,39 +90,60 @@ const Chat = (props?: ChatProps) => {
     // );
   };
 
-  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 (
     <>
@@ -154,34 +160,48 @@ const Chat = (props?: ChatProps) => {
           isWebInternal() && !isSmall() && currentLayout === getGridLayoutName()
             ? {marginVertical: 4}
             : {},
+          // @ts-ignore
+          transcriptHeight && !isMobileUA() && {height: transcriptHeight},
         ]}>
         {/**
          * In Native device we are setting absolute view. so placed ChatBeforeView and ChatAfterView inside the main view
          */}
         <ChatBeforeView />
         {showHeader && <ChatHeader />}
-        {groupActive ? (
+        {chatType === ChatType.Group ? (
           <>
             <ChatContainer {...props} />
-            <View style={style.chatInputContainer}>
-              <ChatInput {...props} />
-            </View>
+            {isRecordingBot ? (
+              <></>
+            ) : (
+              <View style={style.chatInputContainer}>
+                <ChatInputComponent />
+              </View>
+            )}
           </>
         ) : (
+          <></>
+        )}
+        {chatType === ChatType.MemberList ? (
+          <ChatParticipants selectUser={selectUser} />
+        ) : (
+          <></>
+        )}
+        {chatType === ChatType.Private ? (
           <>
-            {!privateActive ? (
-              <ChatParticipants selectUser={selectUser} />
+            <ChatContainer {...props} />
+            {isRecordingBot ? (
+              <></>
             ) : (
-              <>
-                <ChatContainer {...props} />
-                <View>
-                  <View style={style.chatInputContainer}>
-                    <ChatInput {...props} />
-                  </View>
+              <View>
+                <View style={style.chatInputContainer}>
+                  <ChatInputComponent />
                 </View>
-              </>
+              </View>
             )}
           </>
+        ) : (
+          <></>
         )}
         <ChatAfterView />
       </View>

package/template/src/components/ChatContext.ts

@@ -22,6 +22,7 @@ export interface ChatBubbleProps {
   msgId: string;
   isDeleted: boolean;
   isSameUser: boolean;
+  previousMessageCreatedTimestamp?: string;
   render?: (
     isLocal: boolean,
     message: string,
@@ -31,6 +32,7 @@ export interface ChatBubbleProps {
     isDeleted: boolean,
     updatedTimestamp: string,
     isSameUser: boolean,
+    previousMessageCreatedTimestamp?: string,
   ) => JSX.Element;
 }
 

package/template/src/components/ColorConfigure.tsx

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

package/template/src/components/CommonStyles.ts

@@ -1,12 +1,19 @@
 import {StyleSheet} from 'react-native';
 import ThemeConfig from '../theme';
+
+export const SIDE_PANEL_MAX_WIDTH = '20%';
+export const SIDE_PANEL_MIN_WIDTH = 338;
+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: '20%',
+    maxWidth: SIDE_PANEL_MAX_WIDTH,
     minWidth: 338,
     borderRadius: ThemeConfig.BorderRadius.small,
-    marginLeft: 12,
+    marginLeft: SIDE_PANEL_GAP,
     backgroundColor: $config.CARD_LAYER_1_COLOR,
     borderColor: $config.CARD_LAYER_3_COLOR,
     borderWidth: 1,