Criação de anexos de chat
No momento, você está lendo a documentação do Flex Legacy Messaging. Se você estiver começando com uma nova implementação do Flex, considere usar o Flex Conversations.
Os anexos de chat permitem que agentes e clientes enviem conteúdo que não seja de texto, como imagens, PDFs e vídeos usando o Flex WebChat. Embora você possa fazer muitas coisas interessantes usando anexos de chat, você precisará criar regras e proteções para manter os agentes seguros, os clientes felizes e sua empresa segura. Felizmente, os anexos de chat foram criados de maneira personalizável. Nos exemplos de código a seguir, você pode ver algumas das estratégias que a equipe da Twilio preparou para implementar alguns cenários comuns.
Há muitas outras maneiras de resolver esses problemas, e seus problemas provavelmente serão mais complexos do que os cenários apresentados aqui. Essas amostras de código devem ser um ponto de partida para ajudá‐lo a se familiarizar com algumas das ferramentas disponíveis. Então, ajuste‐as para que se ajustem às suas ferramentas e padrões preferidos!
Use o Programmable Chat e o Flex UI (IU do Flex) para excluir mensagens
Cada anexo de chat está associado a uma Message (Mensagem) na API do Programmable Chat. Para excluir um arquivo que foi enviado, você pode, portanto, excluir a mensagem usando remove
o mé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 Ações para carregar arquivos no armazenamento pessoal
Por padrão, os anexos de chat usam o Recurso de mídia do Twilio Chat para armazenamento de arquivos. Para usar seu próprio armazenamento para anexos de mensagens, você precisará substituir a ação SendMediaMessage, que é acionada quando um arquivo de mídia é enviado.
Você precisará:
- Carregar o arquivo em nosso próprio armazenamento privado
- Passar o identificador exclusivo para a Ação SendMessage substituída em messageAttributes
- Acionar uma 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 Ação before da ação para filtrar conteúdo e verificar se há vírus
Dependendo do seu caso de uso, a filtragem de conteúdo e a verificação de vírus podem ser feitas de diferentes maneiras, mas a maioria das implementações envolverá os hooks de ação before
. Por exemplo, você pode usá‐lo para fazer download do arquivo após a filtragem de conteú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 permissões de usuários inadequados
Às vezes, um usuário de chat pode enviar mensagens ou arquivos inadequados e, como um agente, você pode querer bloquear esse usuário de enviar mensagens ou mensagens de mídia. Isso pode ser feito usando a API REST do Programmable Chat.
Todos os usuários no chat estão associados a uma Role (Função) e Permissions (Permissões). Para bloquear usuários, você deverá criar uma função blockedUser
. Com base em suas necessidades, remova as permissões sendMessage
e/ou sendMediaMessage
da nova Função
Para bloquear alguém, você pode atualizar a Função de seu Member Resource (Recurso de membro) usando uma Twilio Function. Forneça o novo SID blockedUser
como o parâmetro roleSid
. Consulte o guia sobre como usar o Functions a partir de seu plugin para obter suporte adicional.
Có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))
};
Có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.