agora-appbuilder-core 4.0.13 → 4.0.14

package/template/src/subComponents/chat/ChatAttachment.native.tsx

@@ -1,234 +0,0 @@
-import {Platform, StyleSheet, Text, View} from 'react-native';
-import React from 'react';
-import IconButton from '../../../src/atoms/IconButton';
-import DocumentPicker from 'react-native-document-picker';
-import {useRoomInfo} from 'customization-api';
-import Toast from '../../../react-native-toast-message';
-import {
-  useChatUIControls,
-  UploadStatus,
-  MAX_UPLOAD_SIZE,
-} from '../../components/chat-ui/useChatUIControls';
-import {useChatConfigure} from '../../components/chat/chatConfigure.native';
-import {
-  ChatMessageType,
-  SDKChatType,
-  useChatMessages,
-} from '../../components/chat-messages/useChatMessages';
-import {
-  ChatError,
-  ChatMessage,
-  ChatMessageChatType,
-} from 'react-native-agora-chat';
-
-import {
-  chatUploadErrorToastHeading,
-  chatUploadErrorFileSizeToastHeading,
-  chatUploadErrorFileSizeToastSubHeading,
-  chatUploadErrorFileTypeToastSubHeading,
-} from '../../language/default-labels/videoCallScreenLabels';
-import {useString} from '../../utils/useString';
-
-export interface ChatAttachmentButtonProps {
-  render?: (onPress: () => void) => JSX.Element;
-}
-
-interface ExtendedChatMessage extends ChatMessage {
-  body: {
-    localPath?: string;
-    remotePath?: string;
-    type: ChatMessageType;
-  };
-  attributes: {
-    file_ext?: string;
-    file_name?: string;
-  };
-}
-
-export const ChatAttachmentButton = (props: ChatAttachmentButtonProps) => {
-  const {privateChatUser, setUploadStatus} = useChatUIControls();
-  const {sendChatSDKMessage} = useChatConfigure();
-  const {data} = useRoomInfo();
-
-  const {addMessageToPrivateStore, addMessageToStore} = useChatMessages();
-
-  const toastHeadingType = useString(chatUploadErrorToastHeading)();
-  const toastHeadingSize = useString(chatUploadErrorFileSizeToastHeading)();
-  const errorSubHeadingSize = useString(chatUploadErrorFileSizeToastSubHeading);
-  const errorSubHeadingType = useString(chatUploadErrorFileTypeToastSubHeading);
-
-  const fileAllowedTypes = {
-    zip: true,
-    txt: true,
-    doc: true,
-    pdf: true,
-  };
-
-  const imageAllowedTypes = {
-    jpg: true,
-    jpeg: true,
-    gif: true,
-    png: true,
-    bmp: true,
-  };
-
-  const onPress = async () => {
-    console.warn('attachment open');
-    try {
-      const result = await DocumentPicker.pick({
-        type: [
-          DocumentPicker.types.images,
-          DocumentPicker.types.pdf,
-          DocumentPicker.types.doc,
-          DocumentPicker.types.plainText,
-          DocumentPicker.types.zip,
-          DocumentPicker.types.docx,
-          DocumentPicker.types.ppt,
-          DocumentPicker.types.pptx,
-          DocumentPicker.types.xls,
-          DocumentPicker.types.xlsx,
-          DocumentPicker.types.csv,
-        ],
-        presentationStyle: 'fullScreen',
-        copyTo: 'documentDirectory',
-      });
-
-      if (result[0].size > MAX_UPLOAD_SIZE * 1024 * 1024) {
-        Toast.show({
-          leadingIconName: 'alert',
-          type: 'error',
-          text1: toastHeadingSize,
-          text2: errorSubHeadingSize(MAX_UPLOAD_SIZE.toString()),
-          visibilityTime: 3000,
-          primaryBtn: null,
-          secondaryBtn: null,
-        });
-        return;
-      }
-
-      //todo check for mime type of file above
-      const uploadedFileType = result[0].type;
-      const isImageUploaded = uploadedFileType.indexOf('image/') !== -1;
-      const isFileUploaded = !isImageUploaded;
-      const groupID = data.chat.group_id;
-
-      console.warn('file info => ', result[0]);
-      let filePath =
-        Platform.OS === 'ios'
-          ? result[0].fileCopyUri?.replace('file://', '')
-          : result[0].fileCopyUri;
-      console.warn('file path sending', filePath);
-      // replace %20 with space otherwise giving file not found
-      if (filePath?.includes('%20')) {
-        filePath = filePath?.replace(/%20/g, ' ');
-      }
-
-      if (isImageUploaded || isFileUploaded) {
-        const option = {
-          type: isImageUploaded ? ChatMessageType.IMAGE : ChatMessageType.FILE,
-          url: filePath,
-          to: privateChatUser ? privateChatUser.toString() : groupID,
-          chatType: privateChatUser
-            ? SDKChatType.SINGLE_CHAT
-            : SDKChatType.GROUP_CHAT,
-          from: data.uid.toString(),
-          fileName: result[0].name,
-          ext: {
-            file_length: result[0].size,
-            file_ext: uploadedFileType.split('/')[1],
-            file_name: result[0].name,
-            file_url: filePath,
-            from_platform: 'native',
-          },
-        };
-        console.warn('chatOPtion', option);
-        const onProgress = (localMsgId: string, progress: number) => {
-          // always gives 100 , its in WIP for agoar-chat-native-sdk
-          console.warn('upload in progress', progress);
-          setUploadStatus(UploadStatus.IN_PROGRESS);
-        };
-        const onError = (localMsgId: string, error: ChatError) => {
-          console.warn('upload on error', error);
-          setUploadStatus(UploadStatus.FAILURE);
-        };
-        const onSuccess = (message: ExtendedChatMessage) => {
-          console.warn('upload on success', message);
-          const messageData = {
-            msg: '',
-            createdTimestamp: message.localTime,
-            msgId: message.msgId,
-            isDeleted: false,
-            type: message.body.type,
-            thumb: message.body?.localPath,
-            url: message.body?.remotePath,
-            ext: message.attributes?.file_ext,
-            fileName: message.attributes?.file_name,
-          };
-          console.warn('message data', messageData);
-
-          // this is local user messages
-          if (message.chatType === ChatMessageChatType.PeerChat) {
-            addMessageToPrivateStore(Number(message.to), messageData, true);
-          } else {
-            addMessageToStore(Number(message.from), messageData);
-          }
-
-          setUploadStatus(UploadStatus.SUCCESS);
-        };
-        sendChatSDKMessage(option, {onProgress, onError, onSuccess});
-      } else {
-        Toast.show({
-          leadingIconName: 'chat_attachment_unknown',
-          type: 'info',
-          text1: toastHeadingType,
-          text2: errorSubHeadingType(uploadedFileType),
-          visibilityTime: 3000,
-          primaryBtn: null,
-          secondaryBtn: null,
-        });
-      }
-
-      // const allowedFormats = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', '.zip', '.txt', '.doc', '.pdf'];
-      // if (!allowedFormats.some(format => result[0].type === format || result[0].name.endsWith(format))) {
-      //   Toast.show({
-      //     leadingIconName: 'alert',
-      //     type: 'error',
-      //     text2: 'Inavlid upload format',
-      //     text1: 'Upload Failed',
-      //     visibilityTime: 3000,
-      //   });
-      // }
-    } catch (err) {
-      if (DocumentPicker.isCancel(err)) {
-        // User cancelled the picker
-      } else {
-        console.error(err);
-      }
-    }
-  };
-  return props?.render ? (
-    props.render(onPress)
-  ) : (
-    <View>
-      <IconButton
-        hoverEffect={true}
-        hoverEffectStyle={{
-          backgroundColor: $config.ICON_BG_COLOR,
-          borderRadius: 24,
-        }}
-        iconProps={{
-          iconType: 'plain',
-          iconContainerStyle: {
-            padding: 4,
-          },
-          iconSize: 24,
-          name: 'chat_attachment',
-          tintColor: $config.SECONDARY_ACTION_COLOR,
-        }}
-        onPress={onPress}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({});

package/template/src/subComponents/chat/ChatAttachment.tsx

@@ -1,145 +0,0 @@
-import React from 'react';
-import {StyleSheet} from 'react-native';
-import IconButton from '../../../src/atoms/IconButton';
-import AgoraChat from 'agora-chat';
-import {useRoomInfo} from 'customization-api';
-import {useChatConfigure} from '../../components/chat/chatConfigure';
-import Toast from '../../../react-native-toast-message';
-import {
-  File,
-  MAX_UPLOAD_SIZE,
-  UploadStatus,
-  useChatUIControls,
-} from '../../components/chat-ui/useChatUIControls';
-import {ChatMessageType} from '../../components/chat-messages/useChatMessages';
-import {
-  chatUploadErrorToastHeading,
-  chatUploadErrorFileSizeToastHeading,
-  chatUploadErrorFileSizeToastSubHeading,
-  chatUploadErrorFileTypeToastSubHeading,
-} from '../../language/default-labels/videoCallScreenLabels';
-import {useString} from '../../utils/useString';
-
-export interface ChatAttachmentButtonProps {
-  render?: (onPress: () => void) => JSX.Element;
-}
-
-export const ChatAttachmentButton = (props: ChatAttachmentButtonProps) => {
-  const fileInputRef = React.useRef<HTMLInputElement | null>(null);
-  const {data} = useRoomInfo();
-  const {privateChatUser, setUploadStatus, setUploadedFiles} =
-    useChatUIControls();
-  const {uploadAttachment} = useChatConfigure();
-  const toastHeadingType = useString(chatUploadErrorToastHeading)();
-  const toastHeadingSize = useString(chatUploadErrorFileSizeToastHeading)();
-  const errorSubHeadingSize = useString(chatUploadErrorFileSizeToastSubHeading);
-  const errorSubHeadingType = useString(chatUploadErrorFileTypeToastSubHeading);
-
-  const fileAllowedTypes = {
-    zip: true,
-    txt: true,
-    doc: true,
-    pdf: true,
-    docx: true,
-    ppt: true,
-    pptx: true,
-    xls: true,
-    xlsx: true,
-    csv: true,
-  };
-
-  const imageAllowedTypes = {
-    jpg: true,
-    jpeg: true,
-    gif: true,
-    png: true,
-    bmp: true,
-  };
-
-  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const selectedFile = e.target.files && e.target.files[0];
-    const file = AgoraChat.utils.getFileUrl(e.target);
-    const uploadedFileType = file.filetype.toLowerCase();
-    const isImageUploaded = uploadedFileType in imageAllowedTypes;
-    const isFileUploaded = uploadedFileType in fileAllowedTypes;
-
-    if (file.data.size > MAX_UPLOAD_SIZE * 1024 * 1024) {
-      Toast.show({
-        leadingIconName: 'alert',
-        type: 'error',
-        text1: toastHeadingSize,
-        text2: errorSubHeadingSize(MAX_UPLOAD_SIZE.toString()),
-        visibilityTime: 3000,
-        primaryBtn: null,
-        secondaryBtn: null,
-      });
-      return;
-    }
-    if (!(isImageUploaded || isFileUploaded)) {
-      // Toast.show({
-      //   leadingIconName: 'chat_attachment_unknown',
-      //   type: 'info',
-      //   text1: toastHeadingType,
-      //   text2: errorSubHeadingType(file.filetype),
-      //   visibilityTime: 3000,
-      //   primaryBtn: null,
-      //   secondaryBtn: null,
-      // });
-
-      return;
-    }
-
-    if (!selectedFile) return;
-
-    const uploadedFile: File = {
-      file_name: file.filename,
-      file_ext: uploadedFileType,
-      file_url: '',
-      file_length: 0,
-      file_type: isImageUploaded ? ChatMessageType.IMAGE : ChatMessageType.FILE,
-      file_obj: file,
-    };
-    // currently supporting only 1 upload
-    // setUploadedFiles(prev => [...prev, uploadedFile]);
-    setUploadedFiles(prev => [uploadedFile]);
-
-    uploadAttachment(uploadedFile);
-  };
-  const onPress = () => {
-    fileInputRef.current.value = null;
-    fileInputRef.current.click();
-  };
-  return props?.render ? (
-    props.render(onPress)
-  ) : (
-    <>
-      <input
-        type="file"
-        accept="image/jpeg, image/png, image/gif, image/bmp, .zip, .txt, .doc, .pdf, .docx, .ppt, .pptx, .xls, .xlsx .csv"
-        onChange={handleFileUpload}
-        style={{display: 'none'}}
-        id={`file-input-`}
-        ref={fileInputRef}
-      />
-      <IconButton
-        hoverEffect={true}
-        hoverEffectStyle={{
-          backgroundColor: $config.ICON_BG_COLOR,
-          borderRadius: 24,
-        }}
-        iconProps={{
-          iconType: 'plain',
-          iconContainerStyle: {
-            padding: 4,
-          },
-          iconSize: 24,
-          name: 'chat_attachment',
-          tintColor: $config.SECONDARY_ACTION_COLOR,
-        }}
-        onPress={onPress}
-      />
-    </>
-  );
-};
-
-const styles = StyleSheet.create({});

package/template/src/subComponents/chat/ChatEmoji.native.tsx

@@ -1,75 +0,0 @@
-import {StyleSheet, Text, View} from 'react-native';
-import React from 'react';
-import {useChatUIControls} from '../../components/chat-ui/useChatUIControls';
-import IconButton from '../../../src/atoms/IconButton';
-//import data from 'emoji-mart-native/data/google.json';
-import {Picker} from 'emoji-mart-native';
-
-export interface ChatEmojiButtonProps {
-  render?: (onPress: () => void) => JSX.Element;
-}
-
-export const ChatEmojiButton = (props: ChatEmojiButtonProps) => {
-  const {setShowEmojiPicker} = useChatUIControls();
-
-  const onPress = () => {
-    setShowEmojiPicker(prev => !prev);
-  };
-  return props?.render ? (
-    props.render(onPress)
-  ) : (
-    <View>
-      <IconButton
-        hoverEffect={true}
-        hoverEffectStyle={{
-          backgroundColor: $config.ICON_BG_COLOR,
-          borderRadius: 24,
-        }}
-        iconProps={{
-          iconType: 'plain',
-          iconContainerStyle: {
-            padding: 4,
-          },
-          iconSize: 24,
-          name: 'chat_emoji',
-          tintColor: $config.SECONDARY_ACTION_COLOR,
-        }}
-        onPress={onPress}
-      />
-    </View>
-  );
-};
-
-export const ChatEmojiPicker = () => {
-  const {setShowEmojiPicker, setMessage} = useChatUIControls();
-  const handleEmojiClick = emoji => {
-    setMessage(prev => prev + ' ' + emoji.native);
-  };
-  return (
-    <View style={styles.emojiContainer} testID={'emoji-container'}>
-      <Picker
-        //data={data}
-        // autoFocus={true}
-        native={true}
-        emojiSize={28}
-        perLine={9}
-        onPressClose={() => setShowEmojiPicker(false)}
-        showSkinTones={false}
-        color={$config.PRIMARY_ACTION_BRAND_COLOR}
-        theme={
-          $config.INPUT_FIELD_BACKGROUND_COLOR === '#FFFFFF' ? 'light' : 'dark'
-        }
-        showCloseButton={true}
-        onSelect={handleEmojiClick}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  emojiContainer: {
-    width: '100%',
-    flexDirection: 'row',
-    position: 'relative',
-  },
-});

package/template/src/subComponents/chat/ChatEmoji.tsx

@@ -1,181 +0,0 @@
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import EmojiPicker, {
-  EmojiStyle,
-  SuggestionMode,
-  Theme,
-} from 'emoji-picker-react';
-import {useChatUIControls} from '../../components/chat-ui/useChatUIControls';
-import IconButton from '../../../src/atoms/IconButton';
-
-const css = `
-.chatEmojiPicker .epr-emoji-category-label {
-  font-size:16px;
-  color:${$config.SECONDARY_ACTION_COLOR};
-  font-family:'Source Sans Pro';
-  font-weight:600;
-}
-.chatEmojiPicker.epr-dark-theme{
-  --epr-emoji-size: 32px;
-  --epr-emoji-gap:4px;
-  --epr-emoji-padding:4px;
-  --epr-header-padding:12px;
-  --epr-horizontal-padding:12px;
-  --epr-category-label-height:24px;
-  --epr-search-input-border-radius:4px;
-  --epr-search-bar-inner-padding:8px;
-  --epr-search-input-text-color:${$config.FONT_COLOR}
-
-}
-.chatEmojiPicker.epr-light-theme{
-  --epr-emoji-size: 32px;
-  --epr-emoji-gap:4px;
-   --epr-emoji-padding:4px;
-   --epr-header-padding:12px;
-   --epr-horizontal-padding:12px;
-   --epr-category-label-height:24px;
-   --epr-search-input-border-radius:4px;
-   --epr-search-bar-inner-padding:8px;
-   --epr-search-input-text-color:${$config.FONT_COLOR}
-}
-.chatEmojiPicker .epr-category-nav {
-  padding-top:0 !important
-}
-.chatEmojiPicker .epr-skin-tones {
-  visibility:hidden
-}
-
-.chatEmojiPicker .epr-search-container input:focus {
-border:1px solid ${$config.PRIMARY_ACTION_BRAND_COLOR}
-}
-
-.chatEmojiPicker .epr-icn-search {
-  left:8px
-}
-
-.chatEmojiPicker .epr-icn-clear-search {
-  visibility:hidden
-}
-.chatEmojiPicker .epr-search-container input {
-  font-family:'Source Sans Pro' !important;
-  font-size:14px;
-  font-weight:400
-}
-
-`;
-
-export const ChatEmojiPicker: React.FC = () => {
-  const {setMessage, showEmojiPicker, setShowEmojiPicker} = useChatUIControls();
-
-  const handleEmojiClick = (emojiObject: {emoji: string; names: string[]}) => {
-    setMessage(prev =>
-      prev ? prev + '  ' + emojiObject.emoji : emojiObject.emoji,
-    );
-    // setShowEmojiPicker(false);
-  };
-  return (
-    <View style={styles.emojiContainer} testID={'emoji-container'}>
-      <style type="text/css">{css}</style>
-      <EmojiPicker
-        style={styles.emojiPicker}
-        onEmojiClick={handleEmojiClick}
-        theme={
-          $config.INPUT_FIELD_BACKGROUND_COLOR === '#FFFFFF'
-            ? Theme.LIGHT
-            : Theme.DARK
-        }
-        suggestedEmojisMode={SuggestionMode.RECENT}
-        className="chatEmojiPicker"
-        lazyLoadEmojis={true}
-        previewConfig={{showPreview: false}}
-        height={370}
-        autoFocusSearch={false}
-      />
-      <View
-        style={{
-          width: 30,
-          height: 30,
-          position: 'absolute',
-          top: 20,
-          right: 8,
-        }}>
-        <IconButton
-          hoverEffect={false}
-          hoverEffectStyle={{
-            backgroundColor: $config.ICON_BG_COLOR,
-            borderRadius: 20,
-          }}
-          iconProps={{
-            iconType: 'plain',
-            iconContainerStyle: {
-              padding: 5,
-            },
-            iconSize: 20,
-            name: 'close',
-            tintColor: $config.SECONDARY_ACTION_COLOR,
-          }}
-          onPress={() => {
-            setShowEmojiPicker(false);
-          }}
-        />
-      </View>
-    </View>
-  );
-};
-
-export interface ChatEmojiButtonProps {
-  render?: (onPress: () => void) => JSX.Element;
-}
-
-export const ChatEmojiButton = (props: ChatEmojiButtonProps) => {
-  const {setShowEmojiPicker} = useChatUIControls();
-  const onPress = () => {
-    setShowEmojiPicker(prev => !prev);
-  };
-  return props?.render ? (
-    props.render(onPress)
-  ) : (
-    <IconButton
-      hoverEffect={true}
-      hoverEffectStyle={{
-        backgroundColor: $config.ICON_BG_COLOR,
-        borderRadius: 24,
-      }}
-      iconProps={{
-        iconType: 'plain',
-        base64: false,
-        hoverBase64: true,
-        iconContainerStyle: {
-          padding: 4,
-        },
-        iconSize: 24,
-        name: 'chat_emoji',
-        hoverIconName: 'chat_emoji_fill',
-        tintColor: $config.SECONDARY_ACTION_COLOR,
-      }}
-      onPress={onPress}
-    />
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  emojiContainer: {
-    width: '100%',
-    flexDirection: 'row',
-    position: 'relative',
-  },
-  emojiPicker: {
-    width: '100%',
-    borderWidth: 1,
-    borderColor: $config.CARD_LAYER_4_COLOR,
-    marginBottom: 16,
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0,
-  },
-});
-
-export default ChatEmojiButton;