templates/functionality/chatbot/chatbot.html.twig line 1

Open in your IDE?
  1. <!-- Chatbot button -->
  2. <div id="chatbot-button" class="chatbot-button">
  3. <i class="far fa-comment-dots"></i>
  4. </div>
  6. <!-- Chatbot popup -->
  7. <div id="chatbot-popup" class="chatbot-popup">
  8. <div class="chatbot-header">
  9. <div class="chatbot-header-title">
  10. <i class="fas fa-circle-info"></i>
  11. </div>
  12. <div class="chatbot-header-title">
  13. <span>{{ 'chatbot.title'|trans({}, 'chatbot')|default('Assistència') }}</span>
  14. </div>
  15. <div class="chatbot-header-actions">
  16. <button class="chatbot-clear-button" title="{{ 'chatbot.clear_conversation'|trans({}, 'chatbot')|default('Borrar conversación') }}">
  17. <i class="fas fa-trash-alt"></i>
  18. </button>
  19. <div class="chatbot-header-close">
  20. <i class="fas fa-times"></i>
  21. </div>
  22. </div>
  23. </div>
  24. <div class="chatbot-content">
  25. <div class="chatbot-messages">
  26. {% if conversation is defined and conversation|length > 0 %}
  27. {# Mostrar conversación previa desde la sesión #}
  28. {% for message in conversation %}
  29. <div class="chatbot-message chatbot-message-{{ message.type }}">
  30. <div class="chatbot-message-icon">
  31. <i class="fas {% if message.type == 'user' %}fa-user{% else %}fa-circle-info{% endif %}"></i>
  32. </div>
  33. <div class="chatbot-message-content">
  34. <p>{{ message.message }}</p>
  35. </div>
  36. </div>
  37. {% endfor %}
  38. {% else %}
  39. {# Mensaje de bienvenida y temas de ayuda si no hay conversación previa #}
  40. <div class="chatbot-message chatbot-message-bot">
  41. <div class="chatbot-message-icon">
  42. <i class="fas fa-circle-info"></i>
  43. </div>
  44. <div class="chatbot-message-content">
  45. <p>{{ 'chatbot.welcome'|trans({}, 'chatbot')|default('Hola! En què puc ajudar-te avui?') }}</p>
  46. </div>
  47. </div>
  48. {# <div class="chatbot-help-topics">#}
  49. {# <div class="chatbot-help-topic" data-query="Com puc trobar un curs?">#}
  50. {# <div class="chatbot-help-topic-icon">#}
  51. {# <i class="fas fa-circle-question"></i>#}
  52. {# </div>#}
  53. {# <div class="chatbot-help-topic-content">#}
  54. {# <p>{{ 'chatbot.help.find_course'|trans({}, 'chatbot')|default('Com puc trobar un curs?') }}</p>#}
  55. {# </div>#}
  56. {# </div>#}
  57. {# <div class="chatbot-help-topic" data-query="Informació sobre inscripcions">#}
  58. {# <div class="chatbot-help-topic-icon">#}
  59. {# <i class="fas fa-circle-info"></i>#}
  60. {# </div>#}
  61. {# <div class="chatbot-help-topic-content">#}
  62. {# <p>{{ 'chatbot.help.inscriptions'|trans({}, 'chatbot')|default('Informació sobre inscripcions') }}</p>#}
  63. {# </div>#}
  64. {# </div>#}
  65. {# <div class="chatbot-help-topic" data-query="Com contactar amb un punt d'orientació?">#}
  66. {# <div class="chatbot-help-topic-icon">#}
  67. {# <i class="fas fa-comments"></i>#}
  68. {# </div>#}
  69. {# <div class="chatbot-help-topic-content">#}
  70. {# <p>{{ 'chatbot.help.orientation'|trans({}, 'chatbot')|default('Com contactar amb un punt d\'orientació?') }}</p>#}
  71. {# </div>#}
  72. {# </div>#}
  73. {# </div>#}
  74. {% endif %}
  75. </div>
  76. <div class="chatbot-input">
  77. <input type="text" placeholder="{{ 'chatbot.input_placeholder'|trans({}, 'chatbot')|default('Escriu la teva pregunta...') }}">
  78. <button type="button">
  79. <i class="fas fa-paper-plane"></i>
  80. </button>
  81. </div>
  82. </div>
  83. </div>
  85. <script type="text/javascript">
  86. document.addEventListener('DOMContentLoaded', function() {
  87. // Debug: Check if we have cookies
  88. console.log('Cookies available:', document.cookie);
  90. // Manual check for conversation cookie and display
  91. function getCookieValue(cookieName) {
  92. const name = cookieName + "=";
  93. const decodedCookie = decodeURIComponent(document.cookie);
  94. const cookieArray = decodedCookie.split(';');
  96. for (let i = 0; i < cookieArray.length; i++) {
  97. let cookie = cookieArray[i].trim();
  98. if (cookie.indexOf(name) === 0) {
  99. return cookie.substring(name.length, cookie.length);
  100. }
  101. }
  102. return "";
  103. }
  105. const chatbotCookie = getCookieValue('chatbot_conversation');
  106. console.log('Chatbot cookie found:', chatbotCookie ? 'Yes' : 'No');
  108. if (chatbotCookie) {
  109. try {
  110. // Try to decode the cookie value
  111. const decodedValue = atob(chatbotCookie);
  112. const conversation = JSON.parse(decodedValue);
  113. console.log('Parsed conversation:', conversation);
  115. // If the server didn't render the conversation, let's do it manually
  116. const chatbotMessages = document.querySelector('.chatbot-messages');
  117. const helpTopics = document.querySelector('.chatbot-help-topics');
  119. if (conversation && conversation.length > 0 && helpTopics) {
  120. console.log('Rendering conversation from cookie...');
  122. // Clear existing welcome message
  123. chatbotMessages.innerHTML = '';
  125. // Add messages from conversation
  126. conversation.forEach(message => {
  127. const messageDiv = document.createElement('div');
  128. messageDiv.className = `chatbot-message chatbot-message-${message.type}`;
  130. const iconDiv = document.createElement('div');
  131. iconDiv.className = 'chatbot-message-icon';
  133. const icon = document.createElement('i');
  134. if (message.type === 'user') {
  135. icon.className = 'fas fa-user';
  136. } else {
  137. icon.className = 'fas fa-circle-info';
  138. }
  140. iconDiv.appendChild(icon);
  142. const contentDiv = document.createElement('div');
  143. contentDiv.className = 'chatbot-message-content';
  145. const paragraph = document.createElement('p');
  147. // For bot messages, process Markdown-like formatting and preserve line breaks
  148. if (message.type === 'bot') {
  149. // Convert ** text ** to <strong>text</strong>
  150. const formattedMessage = message.message
  151. .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
  152. .replace(/\n/g, '<br>');
  154. paragraph.innerHTML = formattedMessage;
  155. } else {
  156. // For user messages, keep using textContent for security
  157. paragraph.textContent = message.message;
  158. }
  160. contentDiv.appendChild(paragraph);
  161. messageDiv.appendChild(iconDiv);
  162. messageDiv.appendChild(contentDiv);
  164. chatbotMessages.appendChild(messageDiv);
  165. });
  167. // Hide help topics since we have a conversation
  168. helpTopics.style.display = 'none';
  169. }
  170. } catch (error) {
  171. console.error('Error parsing conversation cookie:', error);
  172. }
  173. }
  174. const chatbotButton = document.getElementById('chatbot-button');
  175. const chatbotPopup = document.getElementById('chatbot-popup');
  176. const chatbotClose = document.querySelector('.chatbot-header-close');
  177. const chatbotClear = document.querySelector('.chatbot-clear-button');
  178. const chatbotMessages = document.querySelector('.chatbot-messages');
  179. const chatbotInput = document.querySelector('.chatbot-input input');
  180. const chatbotSendButton = document.querySelector('.chatbot-input button');
  181. const chatbotHelpTopics = document.querySelectorAll('.chatbot-help-topic');
  183. // Toggle chatbot popup
  184. chatbotButton.addEventListener('click', function() {
  185. chatbotPopup.classList.toggle('open');
  186. if (chatbotPopup.classList.contains('open')) {
  187. chatbotInput.focus();
  188. }
  189. });
  191. // Close chatbot popup
  192. chatbotClose.addEventListener('click', function() {
  193. chatbotPopup.classList.remove('open');
  194. });
  196. // Clear conversation
  197. chatbotClear.addEventListener('click', function() {
  198. // Send request to clear the conversation
  199. fetch('{{ path("chatbot_clear") }}', {
  200. method: 'POST',
  201. })
  202. .then(response => response.json())
  203. .then(data => {
  204. if (data.success) {
  205. // Clear all messages in the UI
  206. chatbotMessages.innerHTML = '';
  208. // Add welcome message back
  209. const welcomeMessage = document.createElement('div');
  210. welcomeMessage.className = 'chatbot-message chatbot-message-bot';
  211. welcomeMessage.innerHTML = `
  212. <div class="chatbot-message-icon">
  213. <i class="fas fa-circle-info"></i>
  214. </div>
  215. <div class="chatbot-message-content">
  216. <p>{{ 'chatbot.welcome'|trans({}, 'chatbot')|default('Hola! En què puc ajudar-te avui?') }}</p>
  217. </div>
  218. `;
  219. chatbotMessages.appendChild(welcomeMessage);
  221. // Add help topics back
  222. const helpTopics = document.createElement('div');
  223. helpTopics.className = 'chatbot-help-topics';
  224. helpTopics.innerHTML = ``;
  225. {#helpTopics.innerHTML = `#}
  226. {# <div class="chatbot-help-topic" data-query="Com puc trobar un curs?">#}
  227. {# <div class="chatbot-help-topic-icon">#}
  228. {# <i class="fas fa-circle-question"></i>#}
  229. {# </div>#}
  230. {# <div class="chatbot-help-topic-content">#}
  231. {# <p>{{ 'chatbot.help.find_course'|trans({}, 'chatbot')|default('Com puc trobar un curs?') }}</p>#}
  232. {# </div>#}
  233. {# </div>#}
  234. {# <div class="chatbot-help-topic" data-query="Informació sobre inscripcions">#}
  235. {# <div class="chatbot-help-topic-icon">#}
  236. {# <i class="fas fa-circle-info"></i>#}
  237. {# </div>#}
  238. {# <div class="chatbot-help-topic-content">#}
  239. {# <p>{{ 'chatbot.help.inscriptions'|trans({}, 'chatbot')|default('Informació sobre inscripcions') }}</p>#}
  240. {# </div>#}
  241. {# </div>#}
  242. {# <div class="chatbot-help-topic" data-query="Com contactar amb un punt d'orientació?">#}
  243. {# <div class="chatbot-help-topic-icon">#}
  244. {# <i class="fas fa-comments"></i>#}
  245. {# </div>#}
  246. {# <div class="chatbot-help-topic-content">#}
  247. {# <p>{{ 'chatbot.help.orientation'|trans({}, 'chatbot')|default('Com contactar amb un punt d\'orientació?') }}</p>#}
  248. {# </div>#}
  249. {# </div>#}
  250. {#`;#}
  251. chatbotMessages.appendChild(helpTopics);
  253. // Re-attach event listeners to new help topics
  254. document.querySelectorAll('.chatbot-help-topic').forEach(topic => {
  255. topic.addEventListener('click', function() {
  256. const query = this.getAttribute('data-query');
  257. chatbotInput.value = query;
  258. sendMessage(query);
  259. });
  260. });
  261. }
  262. })
  263. .catch(error => {
  264. console.error('Error clearing conversation:', error);
  265. });
  266. });
  268. // Handle help topic clicks
  269. chatbotHelpTopics.forEach(topic => {
  270. topic.addEventListener('click', function() {
  271. const query = this.getAttribute('data-query');
  272. chatbotInput.value = query;
  273. sendMessage(query);
  274. });
  275. });
  277. // Send message on button click
  278. chatbotSendButton.addEventListener('click', function() {
  279. sendMessage(chatbotInput.value);
  280. });
  282. // Send message on Enter key press
  283. chatbotInput.addEventListener('keypress', function(e) {
  284. if (e.key === 'Enter') {
  285. sendMessage(chatbotInput.value);
  286. }
  287. });
  289. // Function to send message to the backend
  290. function sendMessage(message) {
  291. if (!message.trim()) return;
  293. // Add user message to chat
  294. addMessage(message, 'user');
  296. // Clear input
  297. chatbotInput.value = '';
  299. // Show loading indicator
  300. addLoadingMessage();
  302. // Send request to backend
  303. fetch('{{ path("chatbot_query") }}', {
  304. method: 'POST',
  305. headers: {
  306. 'Content-Type': 'application/json',
  307. },
  308. body: JSON.stringify({ query: message }),
  309. })
  310. .then(response => response.json())
  311. .then(data => {
  312. // Remove loading indicator
  313. removeLoadingMessage();
  315. if (data.success) {
  316. // Add bot response to chat
  317. const botResponse = data.data.respuesta || data.data.response || '{{ 'chatbot.no_response'|trans({}, 'chatbot')|default('No s ha trobat una resposta.') }}';
  318. addMessage(botResponse, 'bot');
  320. // Check if we received an updated conversation from the server
  321. if (data.conversation) {
  322. console.log('Updated conversation received from server');
  323. }
  324. } else {
  325. // Handle error
  326. addMessage('{{ 'chatbot.error.processing'|trans({}, 'chatbot')|default('Ho sento, no he pogut processar la teva pregunta. Si us plau, intenta-ho de nou més tard.') }}', 'bot error');
  327. console.error('Error:', data.error);
  328. }
  329. })
  330. .catch(error => {
  331. // Remove loading indicator
  332. removeLoadingMessage();
  334. // Handle network error
  335. addMessage('{{ 'chatbot.error.connection'|trans({}, 'chatbot')|default('Hi ha hagut un problema de connexió. Si us plau, intenta-ho de nou més tard.') }}', 'bot error');
  336. console.error('Error:', error);
  337. });
  338. }
  340. // Function to add a message to the chat
  341. function addMessage(message, type) {
  342. const messageDiv = document.createElement('div');
  343. messageDiv.className = `chatbot-message chatbot-message-${type}`;
  345. const iconDiv = document.createElement('div');
  346. iconDiv.className = 'chatbot-message-icon';
  348. const icon = document.createElement('i');
  349. if (type === 'user') {
  350. icon.className = 'fas fa-user';
  351. } else {
  352. icon.className = 'fas fa-circle-info';
  353. }
  355. iconDiv.appendChild(icon);
  357. const contentDiv = document.createElement('div');
  358. contentDiv.className = 'chatbot-message-content';
  360. const paragraph = document.createElement('p');
  362. // For bot messages, process Markdown-like formatting and preserve line breaks
  363. if (type.includes('bot')) {
  364. // Convert ** text ** to <strong>text</strong>
  365. const formattedMessage = message
  366. .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
  367. .replace(/\n/g, '<br>');
  369. paragraph.innerHTML = formattedMessage;
  370. } else {
  371. // For user messages, keep using textContent for security
  372. paragraph.textContent = message;
  373. }
  375. contentDiv.appendChild(paragraph);
  376. messageDiv.appendChild(iconDiv);
  377. messageDiv.appendChild(contentDiv);
  379. // Hide help topics after first user message
  380. if (type === 'user') {
  381. const helpTopics = document.querySelector('.chatbot-help-topics');
  382. if (helpTopics) {
  383. helpTopics.style.display = 'none';
  384. }
  385. }
  387. chatbotMessages.appendChild(messageDiv);
  389. // Scroll to bottom
  390. chatbotMessages.scrollTop = chatbotMessages.scrollHeight;
  391. }
  393. // Function to add loading indicator
  394. function addLoadingMessage() {
  395. const loadingDiv = document.createElement('div');
  396. loadingDiv.className = 'chatbot-message chatbot-message-bot chatbot-loading';
  398. const iconDiv = document.createElement('div');
  399. iconDiv.className = 'chatbot-message-icon';
  401. const icon = document.createElement('i');
  402. icon.className = 'fas fa-circle-info';
  403. iconDiv.appendChild(icon);
  405. const contentDiv = document.createElement('div');
  406. contentDiv.className = 'chatbot-message-content';
  408. const loadingDots = document.createElement('div');
  409. loadingDots.className = 'chatbot-loading-dots';
  411. for (let i = 0; i < 3; i++) {
  412. const dot = document.createElement('span');
  413. loadingDots.appendChild(dot);
  414. }
  416. contentDiv.appendChild(loadingDots);
  417. loadingDiv.appendChild(iconDiv);
  418. loadingDiv.appendChild(contentDiv);
  420. chatbotMessages.appendChild(loadingDiv);
  422. // Scroll to bottom
  423. chatbotMessages.scrollTop = chatbotMessages.scrollHeight;
  424. }
  426. // Function to remove loading indicator
  427. function removeLoadingMessage() {
  428. const loadingMessage = document.querySelector('.chatbot-loading');
  429. if (loadingMessage) {
  430. loadingMessage.remove();
  431. }
  432. }
  433. });
  434. </script>