Criação de anexos de chat

// Add a delete button. to every MessageListItem

const DeleteMessage = ({ message }) => (
   // message is the default prop passed through by the MessageListItem
   <button type="button" onClick={() => message.source.remove()}>
       delete
   </button>
);

Flex.MessageListItem.Content.add(<DeleteMessage key="delete-message" />, { sortOrder: -1 });

// Implement personal storage

const uploadFileToMyStorage = async (file) => {
   const formData = new FormData();
   formData.append("image", file);

   // Upload the file to private storage
   const res = await fetch("https://api.imgur.com/3/image", {
       method: "POST",
       headers: new Headers({
           Authorization: "Client-ID 546c25a59c58ad7"
       }),
       body: formData
   });
   return res.json();
};

// Replace the action
Flex.Actions.replaceAction("SendMediaMessage", async (payload: Flex.ActionPayload) => {
   const { file, messageAttributes, channelSid } = payload;

   // Retrieve the uploaded file location
   const res = await uploadFileToMyStorage(file);

   // Include the new media file when sending the message
   return Flex.Actions.invokeAction("SendMessage", {
       messageAttributes: {
           ...messageAttributes,
           media: {
               url: res.data.link,
               filename: file.name,
               contentType: file.type,
               size: file.size
           }
       },
       body: file.name,
       channelSid
   });
});

// Now you need to render your uploaded file. First, delete the body of the MessageBubble. Then, add a new body, including appropriate HTML that points to your uploaded file (in this example, an image tag is sufficient for rendering the image. Don’t forget your alt text!)

// Create new message bubble content
const PersonalStorageContent = ({ message }) => (
   <div>
       <img src={message.source.attributes.media.url) alt=”file uploaded from custom storage” style={{ width: "100%" }} />
   </div>
);

Flex.MessageBubble.Content.remove("body", {
   if: (props) => !!props.message.source.attributes.media
});

Flex.MessageBubble.Content.add(<PersonalStorageContent key="message-bubble-body" />, {
   if: (props) => !!props.message.source.attributes.media
});

// Check file content

Flex.Actions.addListener("beforeDownloadMedia", async (payload, cancelAction) => {

   const { message } = payload;

   const url = await message.media.getContentUrl();

   // Validate file before download (note that checkFileContent method needs to be written)

   const result = await checkFileContent(url);

   if (!result.pass) {

       // Failed to validate content of the file

       cancelAction();

   }

});

Flex.Actions.addListener("beforeSendMediaMessage", async (payload, cancelAction) => {
   const { file } = payload;

   // Validate file before sending
   const result = await checkFileContent(file);

   if (!result.pass) {
       // Failed to validate content of the file
       cancelAction();
   }
});

Flex.Actions.addListener("beforeAttachFile", async (payload, cancelAction) => {

   const { file } = payload;

   // Validate file before attaching
   const result = await checkFileContent(file);

   if (!result.pass) {
       // Failed to validate content of the file
       cancelAction();
   }
});

exports.handler = function(context, event, callback) {
    // Use context parameter to initialize Twilio client and retrieve stored environment variables
	const twilioClient = context.getTwilioClient();
	const chatServiceSid = context.CHAT_SERVICE_SID; // // Get Chat service sid from https://www.twilio.com/console/chat/dashboard
	const blockedUserSid = context.BLOCKED_USER_SID

    
    // Use the event parameter to retrieve dynamic information, like the current chat channel and the member to blockedUserSid
    const {chatChannelSid, memberSid} = event
    
    console.log(event)
    
    twilioClient.chat.services(chatServiceSid)
       .channels(chatChannelSid)
       .members(memberSid)
       .update({roleSid: blockedUserSid})
       .then(member => callback(null, member.sid))
       .catch(err => callback(err, null))
};

// Create function to block user
const blockUser = (chatChannelSid, memberSid) => {
    const body = { chatChannelSid, memberSid };

    // Set up the HTTP options for your request
    const options = {
      method: 'POST',
      body: new URLSearchParams(body),
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
      }
    };

    // Make the network request using the Fetch API
    fetch('https://YOUR_DOMAIN.twil.io/block-user', options)
      .then(resp => resp.json())
      .then(data => console.log(data));
  }
}

// Create a button component to block users
const BlockUserButton = (props) => (
   <button type="button" onClick={() => blockUser(props.channelSid, props.member.source.sid)}>
       block
   </button>
);

// Insert Block User Button into the Flex UI
Flex.MessageBubble.Content.add(<BlockUserButton key="block-user" />, {
   if: (props) => !props.message.isFromMe
});