EvolutionAPI
Typebot não recebe imagens
Welcome!
- [x] Yes, I have searched for similar issues on GitHub and found none.
What did you do?
Conectei um bot do Typebot no WhatsApp, mas quando envio uma mensagem com imagem ou documento, a Evo não reconhece o arquivo como base64, gera apenas um nome aleatório e emenda com texto.
What did you expect?
Receber a imagem como base64 no query ou body.
What did you observe instead of what you expected?
A mensagem chega apenas como uma string curta, não chega como uma imagem base64, então não consigo trabalhar o reconhecimento de imagens no meu bot.
Screenshots/Videos
No response
Which version of the API are you using?
2.2.3
What is your environment?
Linux
Other environment specifications
No response
If applicable, paste the log output
No response
Additional Notes
No response
precisaria do print do log e o exemplo mostrando ao lado pra poder validar isso que vc falou com a hora exata do ocorrido
Anexei abaixo os prints. Ativei o bot e enviei uma imagem qualquer, anexei como ela chega nos logs do Typebot e como ela é enviada ao webhook do n8n.
EDIT Documentos como PDF e etc acontece o mesmo problema.
Amigo, aconteceu o mesmo comigo aqui e resolvi da seguinte forma:
A API da Evolution não envia uma resposta a API do typebot da forma que a do typebot espera.
A API da Evolution envia algo mais simples, como pode observar neste último print, apenas uma string "imageMessage|id" ou no caso de um documento "documentMessage|link".
Assim, a "solução" é no fluxo do Typebot você ao invés de colocar um input de imagem ou arquivo você colocar o input de texto e, então, manipular a string retornada.
Por exemplo, no meu caso eu estava querendo o link do documento em PDF. Então, criei uma variável no typebot com o código:
const texto = {{textoLink}}
if (!texto.includes('|')) {
return ""
}
const link = texto.split('|')[1]
if (!link) {
return ""
}
if (link === "undefined") {
return ""
}
const isPdf = link.split('?')[0].endsWith('.pdf')
if (ishPdf) {
return false
}
return link
Perceba que peguei o link justamente por dar um split na string no pipe ( | ).
A solução completa seria refatorar a forma como a API da Evolution retorna links quando se tratam de mensagem com anexos.
Qualquer dúvida estou a disposição.
@thiagoomatheus Bom dia, tudo certo? Obrigado pela informação, não achei nada relacionado no Google e também nem se passou pela minha cabeça de fazer o que falou.
Vou tentar entender mais pra poder aplicar isso, e se tiver algum material que fale mais sobre e puder me mandar, ficarei grato. Obrigado!
@thiagoomatheus mas de onde você pega essa imagem pelo ID caso eu queira captura-la e salvar via API? Antes vinha um link AWS q era simples
@cowaleinc e @HeitorAgily Vou explicar melhor o processo que funcionou aqui.
Ferramentas utlizadas: Typebot e Evolution API (com PostgreSQL, Redis e MinIo).
Fluxo do Typebot
Ao solicitar ao usuário uma imagem ou arquivo não utilize os Inputs do Typebot de Arquivo ou Seleção de Imagem, desta forma:
Fluxo com Input de Seleção de Imagem
Fluxo com Input de Arquivo
Ao utilizar uns desses inputs o resultado será a mensagem "Invalid message. Please, try again" como na foto abaixo:
Utilize o Input de texto do fluxo do Typebot
A "solução" para isso é utilizar um Input de texto como na imagem a seguir:
Fluxo com Input de Texto
Ao fazer isso, ao invés de você receber a mensagem "Invalid message. Please, try again", você receberá um string com o seguinte formato:
- Para imagem: imageMessage|linkDoArquivoViaMinio
- Para arquivo: documentMessage|linkDoArquivoViaMinio
Como na foto abaixo:
Tratando a string
Dessa forma, para pegar somente o link do arquivo você precisará manipular a string recebida.
Perceba que a string enviada pelo webhook da Evolution API ao Typebot tem um padrão: tipoDoArquivo|linkDoArquivo.
Assim, se desejo pegar o link do arquivo preciso pegar o valor depois do pipe (" | "). Para fazer isso você precisa usar o método split do js.
O método split recebe como parâmetro o valor que será encontrado para fazer a divisão da string. No nosso caso, queremos que a string seja dividida no pipe (" | "). O método split divide a string toda vez que encontrar um pipe. Como nossa string só tem um pipe, então, ela será dividida em duas.
Veja o código abaixo:
const texto = {{input}}
const array = texto.split("|")
Este código retornará algo como: ["imageMessage", "https://minio.minha-url.com/..."]
Agora, como já sabemos que nosso link está no índice 1 do nosso array nós criamos a variável link com está informação:
const texto = {{input}}
const array = texto.split("|")
const link = array[1]
return link
Ou, caso deseje simplificar, você poderá fazer da seguinte forma:
const texto = {{input}}
const link = texto.split("|")[1]
return link
Para usar isso no Typebot você precisará criar uma variável com esse código, como na imagem abaixo:
Nosso fluxo de demonstração ficaria assim:
Conclusão
Se ainda tiverem dúvidas podem enviar aqui.
Algo fundamental, pelo que pesquisei, é ter o MinIO instalado e configurado na Evolution API para que se possa gerar o link temporário do arquivo.
Para utilizar o MinIO junto com Evolution API você poderá adicionar as seguintes variáveis no seu env:
S3_ENABLED=true
S3_ACCESS_KEY=${USER_MINIO}
S3_SECRET_KEY=${PASSWORD_MINIO}
S3_BUCKET=typebot
S3_ENDPOINT=${URL_MINIO_EVO}
S3_PORT=443
S3_USE_SSL=true