templates/home/forum/chatbot.html.twig line 1

Open in your IDE?
  1. {% extends 'home/homeLayout.html.twig' %} {% block stylesheets %} {{ parent() }}
  2. <link rel="stylesheet" href="{{ asset('css/forum.css') }}?v={{ random() }}"> {% endblock %} {% block body %}
  3. <div class="chatbot_page">
  5.     <div class="container-sm">
  6.         <div class="holder">
  7.             <div>
  10.                 <div class="indicators">
  11.                     <div class="single_in">
  12.                         <img src="{{ asset('images/forum/how.png') }}" alt="">
  13.                         <div class="txt">
  14.                             How
  15.                         </div>
  16.                     </div>
  17.                     <div class="single_in">
  18.                         <img src="{{ asset('images/forum/may i.png') }}" alt="">
  19.                         <div class="txt">
  20.                             may i
  21.                         </div>
  22.                     </div>
  23.                     <div class="single_in">
  24.                         <img src="{{ asset('images/forum/help.png') }}" alt="">
  25.                         <div class="txt">
  26.                             help you ?
  27.                         </div>
  28.                     </div>
  30.                 </div>
  33.                 <div class="list"  id="chatContainer">
  36.                 </div>
  37.             </div>
  38.             <div class="send_box">
  39.                 <input type="text" class="form-control" placeholder="Type your message.... " id="messageInput">
  40.                 <button id="sendMessage">Envoyer</button>
  42.             </div>
  43.         </div>
  46.     </div>
  48. </div>
  49. {% block javascripts %}
  51. <script>
  52. var userImage = "{{ userImage|default(asset('images/cours/person.jpg')) }}";
  54. console.log("fffffffffffffffffffffffff");
  55. document.getElementById("sendMessage").addEventListener("click", function() {
  56.     console.log("clicked!");
  57.     var messageInput = document.getElementById("messageInput");
  58.     var userMessage = messageInput.value;
  60.     if (userMessage.trim() !== '') {
  61.         fetch('{{ path('home_forum_chatbot_action') }}', { 
  62.             method: 'POST',
  63.             headers: {
  64.                 'Content-Type': 'application/json',
  65.                 'X-Requested-With': 'XMLHttpRequest', // Important for Symfony to recognize it as an AJAX request
  66.             },
  67.             body: JSON.stringify({message: userMessage})
  68.         })
  69.         .then(response => response.json())
  70.         .then(data => {
  71.             addMessageToChat(false, userMessage); // Display user's message
  72.             addMessageToChat(true, data.message); // Display bot's response
  73.             messageInput.value = ''; // Clear input field
  74.         })
  75.         .catch(error => console.error('Error:', error));
  76.     }
  77. });
  79. function addMessageToChat(isBot, message) {
  80.     var chatContainer = document.getElementById("chatContainer");
  81.     var messageElement = document.createElement("div");
  82.     messageElement.innerHTML = '<div class="single ' + (isBot ? 'bot' : '') + '"><div class="avatar"><img src="' + (isBot ? '{{ asset("images/forum/chat.jpg") }}' : userImage) + '" alt=""></div><div class="text">' + message + '</div></div>';
  83.     chatContainer.appendChild(messageElement);
  84. }
  85. </script>
  86. {% endblock %}
  87. {% endblock %}