Desenvolvimento de uma interface de chatbot estilo Lovable via…

INEMA

huggingface.co ↗

huggingface.co ↗

chatMessages.removeChild(typingIndicator); // Show error message addBotMessage('Desculpe, ocorreu um erro ao processar sua mensagem. Porfavor, tente novamente.'); }); ` }

        function startNewChat() {
            // Clear chat messages (keep only the pla`c`eholder)

chatMessages.innerHTML = '

            // Ad`d` welcome `m`essage
            add`B`otMessage('Olá novamente! Como posso` `te ajudar hoje?');
    ` `   }

        function addUs`e`rMessage(message) {
            // Remove plac`e`holder if` `it exists
            c`o`nst placeholder = chatMessages.que`r`ySelector`(`'.text-center');
           ` `if (placeholder) {
 ` `              chatMessa`g`es.removeChild(placeholder);
     ` `      }

  ` `         const messageElement = do`c`ument.createElement('div')`;`
            messageElement.className = 'flex justif`y`-end mb-4`'`;
            messageElement.innerHTML = ```
                <div class="p`x`-4 py-3 r`o`unded-lg inline-block chat-bubble-user max-w-`x`s md:max-w-md">
              ` `     ${me`s`sage}
                <`/`div>
                <div class="flex-shrink-0 w-10` `h-10 bg-indigo-100 rounded-full flex items-cente`r` justify-`c`enter ml-2">`

<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round"stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /> </svg> </div>; chatMessages.appendChild(messageElement); chatMessages.scrollTop = chatMessages.scrollHeight; }

        function addBotMessage(message) {
            // Remove placeholder if it exists
            const placeholder = ch`a`tMessages.querySelecto`r`('.text-center');

if (placeholder) { chatMessages.removeChild(placeholder); }

            const messageElemen`t` = document.`c`reateElement('div');
          ` ` messageElement.class`N`ame = 'flex mb-4';
            messageElement.innerHTML = `
                <div class="flex-shrink-0 w-10 h-10 bg-white rounded-full flex items-center justify-center mr-2">
                    <svg xmlns="http:`/`/www.w3.org/2000/svg" `c`lass="h-6 w-6 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" `d`="M8 10h.01M12 10h.01M16 1`0`h.01M9 16H5a2 2 0 01-2-2V`6`a2 2 0 012-2h14a2 `2` 0 012 2v8a2 2` 0` 01-2 2h-5l-5 5v-5z" />
                   ` `</svg>
                </div>
                <div class="px-4 py-3 rounded-lg inline-block chat-bubble-bot max-w-xs md:m`a`x-w-md">
                   ` `${message}
                </div>
            `;
            chatMessages.ap`p`endChild(messageElement);
            chatM`essages.scrollTop = chatMessages.scrollHeight;
        }
    });
</script>

tUserEmail = email; userEmailDisplay.textContent = ema`il;

            // Switch to chat screen
        ` `   loginScreen.classList.add('hidden');
         ` `  chatScreen.classList.remove('hidden');
          ` ` 
            // Add welcome message
            addBotMessage('Olá! Eu sou o Mensam de Erro. Como posso` `te ajudar h`o`je?');
   ` `    }

        function handle`L`ogout() {
            // Clear sta`t`e
   ` `        currentUserEmail = `'`';
            chatHistory = [];

// Clear chat messages (keep only the placeholder) chatMessages.innerHTML = '

  ` `     function sendMessage(`)` {
            const message = messageInput.value.tr`i`m();
` `           
            if (!message) ret`u`rn;

         ` `  // Add `u`ser message to chat
            addUserMe`s`sage(message);
            mes`s`ageInput.`v`alue = '';
            `

// Show typing indicator const typingIndicator = document.createElement('div'); typingIndicator.className = 'flex mb-4'; typingIndicator.innerHTML =

            // Save message to history
            chatHistory.push({

            // Send to webhook
   ` `        fetch('https://hoo`k`.us2.make.com/uofs4ud5ywg`r`5n3qj982kr28zbkkwk`v`m', {
    `  `          method: 'POST',
                h`e`aders: {
                    'Content-Type': 'application/json',
                },
                body: JSON.string`i`fy({
                    ema`i`l: currentUserEmail,
                    message: message
                }),

                // Add bot response
                a`d`dBotMessage(data.response);

                // Save bot response to history
                chatHistory.push({
                    sender: 'bot',
                    message`:` data.response,
          ` `         timestamp: new Da`t`e().toISOString()
   ` `            });
            })
            .catch(error =`>` {
                console.error('Error:', error);
                // Remove ty`p`ing indicator`