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

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

@@ -0,0 +1,205 @@
+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_FILES_UPLOAD,
+  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';
+import getUniqueID from '../../utils/getUniqueID';
+
+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,
+    uploadStatus,
+    uploadedFiles,
+  } = 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 = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+
+    if (files) {
+      const fileArray = Array.from(files);
+      let localUploadCount = uploadedFiles.length; // to track uploads
+      const oversizedFileNames: string[] = []; // file names exceeding limit
+
+      for (const file of fileArray) {
+        if (localUploadCount >= MAX_FILES_UPLOAD) {
+          return;
+        }
+        //  temporary input element as upload utils requires it
+        const tempInput = document.createElement('input');
+        tempInput.type = 'file';
+        tempInput.style.display = 'none';
+
+        const dataTransfer = new DataTransfer();
+        dataTransfer.items.add(file);
+        tempInput.files = dataTransfer.files;
+
+        const fileObj = AgoraChat.utils.getFileUrl(tempInput);
+
+        const uploadedFileType = fileObj.filetype.toLowerCase();
+        const isImageUploaded = uploadedFileType in imageAllowedTypes;
+        const isFileUploaded = uploadedFileType in fileAllowedTypes;
+
+        if (file.size > MAX_UPLOAD_SIZE * 1024 * 1024) {
+          oversizedFileNames.push(file.name);
+          continue;
+        }
+        if (!(isImageUploaded || isFileUploaded)) {
+          return;
+        }
+
+        const uploadedFile: File = {
+          file_id: getUniqueID(),
+          file_name: file.name,
+          file_ext: uploadedFileType,
+          file_url: '',
+          file_length: file.size,
+          file_type: isImageUploaded
+            ? ChatMessageType.IMAGE
+            : ChatMessageType.FILE,
+          file_obj: fileObj,
+          upload_status: UploadStatus.IN_PROGRESS,
+        };
+
+        localUploadCount++;
+        // Add the uploaded file to the state
+        setUploadedFiles(prev => [...prev, uploadedFile]);
+
+        try {
+          // Start uploading the file and wait for it to complete
+          await uploadAttachment(uploadedFile);
+        } catch (error) {
+          console.error(
+            'Upload failed for file:',
+            uploadedFile.file_name,
+            error,
+          );
+          // Update the file status to FAILURE
+          setUploadedFiles(prev => {
+            const updatedFiles = prev.map(f =>
+              f.file_id === uploadedFile.file_id
+                ? {...f, upload_status: UploadStatus.FAILURE}
+                : f,
+            );
+            return updatedFiles;
+          });
+        }
+      }
+      // Show the toast notification for oversized files, if any
+      if (oversizedFileNames.length > 0) {
+        Toast.show({
+          leadingIconName: 'alert',
+          type: 'error',
+          text1: toastHeadingSize,
+          text2: errorSubHeadingSize(
+            MAX_UPLOAD_SIZE.toString(),
+            oversizedFileNames.join(', '),
+          ),
+          visibilityTime: 3000,
+          primaryBtn: null,
+          secondaryBtn: null,
+        });
+      }
+    }
+  };
+
+  const onPress = () => {
+    fileInputRef.current.value = null;
+    fileInputRef.current.click();
+  };
+
+  const isMaxFilesUploaded = uploadedFiles.length >= MAX_FILES_UPLOAD;
+  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}
+        multiple
+      />
+      <IconButton
+        hoverEffect={true}
+        hoverEffectStyle={{
+          backgroundColor: $config.ICON_BG_COLOR,
+          borderRadius: 24,
+        }}
+        disabled={
+          uploadStatus === UploadStatus.IN_PROGRESS || isMaxFilesUploaded
+            ? true
+            : false
+        }
+        iconProps={{
+          iconType: 'plain',
+          iconContainerStyle: {
+            padding: 4,
+          },
+          iconSize: 24,
+          name: 'chat_attachment',
+          tintColor:
+            uploadStatus === UploadStatus.IN_PROGRESS || isMaxFilesUploaded
+              ? $config.SEMANTIC_NEUTRAL
+              : $config.SECONDARY_ACTION_COLOR,
+        }}
+        onPress={onPress}
+      />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({});

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

@@ -0,0 +1,75 @@
+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

@@ -0,0 +1,182 @@
+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}
+        emojiStyle={EmojiStyle.NATIVE}
+      />
+      <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, uploadedFiles} = 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;