Criação de anexos de chat

No momento, você está lendo a documentação do Flex Legacy Messaging. Se você estiver começando com uma nova implementação do Flex, considere usar o Flex Conversations.

Os anexos de chat permitem que agentes e clientes enviem conteúdo que não seja de texto, como imagens, PDFs e vídeos usando o Flex WebChat. Embora você possa fazer muitas coisas interessantes usando anexos de chat, você precisará criar regras e proteções para manter os agentes seguros, os clientes felizes e sua empresa segura. Felizmente, os anexos de chat foram criados de maneira personalizável. Nos exemplos de código a seguir, você pode ver algumas das estratégias que a equipe da Twilio preparou para implementar alguns cenários comuns.

Há muitas outras maneiras de resolver esses problemas, e seus problemas provavelmente serão mais complexos do que os cenários apresentados aqui. Essas amostras de código devem ser um ponto de partida para ajudá‐lo a se familiarizar com algumas das ferramentas disponíveis. Então, ajuste‐as para que se ajustem às suas ferramentas e padrões preferidos!

Use o Programmable Chat e o Flex UI (IU do Flex) para excluir mensagens

Cada anexo de chat está associado a uma Message (Mensagem) na API do Programmable Chat. Para excluir um arquivo que foi enviado, você pode, portanto, excluir a mensagem usando remove o método fornecido pelo SDK do Programmable 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 });

Substitua Ações para carregar arquivos no armazenamento pessoal

Por padrão, os anexos de chat usam o Recurso de mídia do Twilio Chat para armazenamento de arquivos. Para usar seu próprio armazenamento para anexos de mensagens, você precisará substituir a ação SendMediaMessage, que é acionada quando um arquivo de mídia é enviado.

Você precisará:

Carregar o arquivo em nosso próprio armazenamento privado
Passar o identificador exclusivo para a Ação SendMessage substituída em messageAttributes
Acionar uma ação regular sendMessage.

// 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
});

Use hooks de Ação before da ação para filtrar conteúdo e verificar se há vírus

Dependendo do seu caso de uso, a filtragem de conteúdo e a verificação de vírus podem ser feitas de diferentes maneiras, mas a maioria das implementações envolverá os hooks de ação before. Por exemplo, você pode usá‐lo para fazer download do arquivo após a filtragem de conteúdo ou executar o arquivo baixado em um conjunto de diretrizes antes que ele seja enviado como uma mensagem.

// 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();
   }
});

Use o Programmable Chat para alterar as permissões de usuários inadequados

Às vezes, um usuário de chat pode enviar mensagens ou arquivos inadequados e, como um agente, você pode querer bloquear esse usuário de enviar mensagens ou mensagens de mídia. Isso pode ser feito usando a API REST do Programmable Chat.

Todos os usuários no chat estão associados a uma Role (Função) e Permissions (Permissões). Para bloquear usuários, você deverá criar uma função blockedUser. Com base em suas necessidades, remova as permissões sendMessage e/ou sendMediaMessage da nova Função

Para bloquear alguém, você pode atualizar a Função de seu Member Resource (Recurso de membro) usando uma Twilio Function. Forneça o novo SID blockedUser como o parâmetro roleSid. Consulte o guia sobre como usar o Functions a partir de seu plugin para obter suporte adicional.

Código do Twilio Functions

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))
};

Código do plugin

// 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
});

Precisa de ajuda?

Às vezes, todos nós precisamos; a programação é difícil. Receba ajuda agora da nossa equipe de suporte, ou confie na sabedoria da multidão navegando pelo Stack Overflow Collective da Twilio ou buscando a tag Twilio no Stack Overflow.