[Dúvida] Criação de um chat com respostas prontas | Front-end

Estou criando um chat de teste para responder algumas perguntas sobre as vendas de determinados produtos, mas o meu arquivo JS não está escrevendo na tela

HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Chat | Bot de Vendas</title>
  <link rel="icon" type="image/x-icon" href="/img/Imagem_do_WhatsApp_de_2023-12-25_à_s__20.46.15_5aa9915f-removebg-preview.png">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/chat.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,1,0" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
    integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
  <div class="logo-imagem">
    <img src="./img/Imagem_do_WhatsApp_de_2023-12-25_à_s__20.46.15_5aa9915f-removebg-preview.png" alt="">
  </div>
<section class="container">
  <div class="chat-perfil"></div>
  <div class="chat-container" id="chat-container">
    <!-- Aqui serão exibidas as mensagens do chat -->
  </div>

  <div class="chat-form">
    <input type="text" id="usuario-input" class="chat-input" placeholder="Digite sua mensagem...">
      <button class="chat-button" onclick="enviarMensagem()"> <span class="material-symbols-outlined">send</span>
    </button>
  </div>
</section>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="js/script.js"></script>

</body>
</html>

JS:

const chatContainer = $("#chat-container");
const usuarioInput = $("#usuario-input");

function enviarMensagem() {
  const mensagemUsuario = usuarioInput.val();
  exibirMensagem("Usuário", mensagemUsuario);
  usuarioInput.val(""); // Limpar a caixa de entrada do usuário

  // Verificar a mensagem do usuário e gerar uma resposta
  const respostaBot = gerarResposta(mensagemUsuario);
  exibirMensagem("Bot", respostaBot);
}

function exibirMensagem(remetente, mensagem) {
  const classeMensagem = remetente.toLowerCase() === "usuário" ? "user-message" : "bot-message";
  const mensagemHTML = `<div class="mensagem ${classeMensagem}">${remetente}: ${mensagem}</div>`;
  chatContainer.append(mensagemHTML);
  rolarParaUltimaMensagem();
}

function rolarParaUltimaMensagem() {
  chatContainer.scrollTop(chatContainer[0].scrollHeight);
}

function gerarResposta(pergunta) {
  // Lógica para gerar respostas com base nas perguntas do usuário
  if (pergunta.toLowerCase().includes("quero comprar")) {
    return "Ótimo! Estamos felizes em ajudar. Por favor, informe-nos sobre o produto que você deseja comprar.";
  } else if (pergunta.toLowerCase().includes("qual o preço")) {
    return "Os preços variam dependendo do produto. Por favor, forneça mais detalhes para que possamos fornecer uma cotação precisa.";
  } else {
    return "Desculpe, não entendi. Como posso ajudar você hoje?";
  }
}

Oi, Arthur. Tudo bem?

O problema pode estar na forma como você está tentando acionar a função enviarMensagem() através do botão no seu HTML.

No seu código HTML, você tem um botão com um evento onclick que chama a função enviarMensagem(), mas parece que essa função não está sendo acionada da forma certa.

Uma alternativa que posso te indicar é usar a jQuery para lidar com o evento de clique do botão. Você pode atribuir um ID ao botão e depois usar esse ID para adicionar um manipulador de eventos de clique no seu arquivo JS.

No seu HTML, basta adicionar um ID ao botão:

<button id="botao-enviar" class="chat-button"> <span class="material-symbols-outlined">send</span>
</button>

E no seu JS, um manipulador de eventos de clique:

$("#botao-enviar").click(function() {
  enviarMensagem();
});

Ou seja: sempre que o botão for clicado, a função enviarMensagem() acionará da forma que você quer.

Espero que isso tenha ajudado. Se outra dúvida surgir, fique à vontade para postar.

Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.