templates/index.html.twig line 1

  1. {# templates/chat/index.html.twig #}
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.   <meta name="viewport" content="width=device-width, initial-scale=1">
  6.   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  7.   <title>Poll</title>
  8.   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  9.   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  10.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  11.   <script>
  12.     var sessionId = 1;
  13.     $(document).ready(function() {
  14.       var lastMessageId = -1;
  15.       var pollSelector = document.getElementById('poll-selector');
  16.       var getSessionUrl = '{{ path('api_get_session',{'pollId': 1}) }}';
  17.       var getQuestionUrl = '{{ path('api_get_question',{'pollId': 1}) }}';
  18.       var postMessageUrl = '{{ path('api_post_message',{'pollId': 1}) }}';
  19.       var initialPollId = 1;
  20.       getSessionUrl = getSessionUrl.replace('initialPollId', initialPollId);
  22.       pollSelector.addEventListener('change', function() {
  23.         var selectedPollId = pollSelector.value;
  24.         getSessionUrl = getSessionUrl.replace(initialPollId, selectedPollId);
  25.         getQuestionUrl = getQuestionUrl.replace(initialPollId, selectedPollId);
  26.         postMessageUrl = postMessageUrl.replace(initialPollId, selectedPollId);
  27.         initialPollId = selectedPollId;
  29.         getSession();
  30.         loadFirstQuestion();
  31.         $('#chat-messages').html('');
  33.       });
  35.       function getSession() {
  36.         $.ajax({
  37.           url: getSessionUrl,
  38.           type: 'GET',
  39.           dataType: 'json',
  41.           success: function(data) {
  42.             sessionId = data.session_id;
  43.             loadFirstQuestion();
  44.             // Load messages initially
  45.             loadMessages();
  46.           },
  47.         });
  48.       }
  50.       function loadFirstQuestion() {
  51.         $.ajax({
  52.           url: getQuestionUrl,
  53.           type: 'GET',
  54.           dataType: 'json',
  55.           headers: {
  56.             'x-session-id': sessionId,
  57.           },
  59.           success: function(data) {
  60.             console.log(data);
  61.           },
  62.         });
  63.       }
  64.       // Function to load messages via AJAX
  65.       function loadMessages() {
  66.         $.ajax({
  67.           url: '{{ path('chat_messages')}}',
  68.           type: 'GET',
  69.           dataType: 'json',
  70.           headers: {
  71.             'x-session-id': sessionId
  72.           },
  73.           beforeSend: function(xhr) {
  74.             // Display loading icon3
  75.             $('#loading-icon').show();
  76.           },
  77.           success: function(data) {
  78.             // Process the JSON response
  79.             var chatMessages = '';
  80.             var isNewMessage = false;
  82.             for (var i = 0; i < data.length; i++) {
  83.               var message = data[i];
  84.               var createdAt = new Date(message.createdAt).toLocaleTimeString();
  86.               if (message.id > lastMessageId) {
  87.                 css = (message.user == 'user') ? 'userMessage' : 'assitantMessage';
  88.                 chatMessages += '<div class="message '+css+' new">';
  89.                 chatMessages += '<p class="content">' + message.content + '</p>';
  90.                 chatMessages += '<span class="timestamp">' + createdAt + '</span>';
  91.                 chatMessages += '</div>';
  93.                 isNewMessage = true;
  94.               }
  95.             }
  97.             if (isNewMessage) {
  98.               $('#chat-messages').append(chatMessages);
  100.               // Scroll to the bottom of the chat window if there is a new message
  101.               var chatWindow = $('#chat-window');
  102.               chatWindow.scrollTop(chatWindow[0].scrollHeight);
  104.               // Update the last message ID
  105.               lastMessageId = data[data.length - 1].id;
  106.             }
  108.             $('#loading-icon').hide();
  109.           }
  110.         });
  111.       }
  113.       getSession();
  117.       // Function to handle form submission
  118.       $('#message-form').submit(function(event) {
  119.         event.preventDefault();
  121.         var formData = $(this).serialize();
  123.         $.ajax({
  124.           url: postMessageUrl,
  125.           type: 'POST',
  126.           data: formData,
  127.           headers: {
  128.             'x-session-id': sessionId,
  129.           },
  130.           beforeSend: function() {
  131.             // Display loading icon
  132.             $('#loading-icon').show();
  133.           },
  134.           success: function() {
  135.             $('#message-content').val('');
  136.             loadMessages();
  137.           },
  138.           complete: function() {
  139.             // Hide loading icon
  140.             $('#loading-icon').hide();
  141.           }
  142.         });
  143.       });
  145.       // Function to periodically load messages
  146.       setInterval(loadMessages, 3000);
  147.     });
  149.   </script>
  150.   <style>
  151.     body, html {
  152.       height: 90%;
  153.     }
  154.     .message {
  155.       background-color: #f1f1f1;
  156.       padding: 10px;
  157.       margin-bottom: 10px;
  158.       border-radius: 5px;
  159.     }
  161.     .message.userMessage {
  162.       background-color: #6388b1;
  163.       padding: 10px;
  164.       margin-bottom: 10px;
  165.       border-radius: 5px;
  166.     }
  168.     .content {
  169.       font-weight: bold;
  170.       margin-bottom: 5px;
  171.     }
  173.     .timestamp {
  174.       font-size: 0.8rem;
  175.       color: #999;
  176.     }
  178.     .loading {
  179.     height: 32px;
  180.     }
  182.     .message-form {
  183.       margin-bottom: 30px;
  184.     }
  186.   </style>
  187. </head>
  188. <body>
  189.   <div class="container">
  190.     <div style="display: flex; justify-content: space-between;">
  191.       <h1>Poll Chat <span style="font-size: 10px;"> v0.2</span></h1>
  192.       <select id="poll-selector" style="padding: 5px; margin: 5px; margin-right: 0px; width: 200px; border-radius: 5px; border: 1px solid #ccc;">
  193.         {% for poll in polls %}
  194.           <option value="{{ poll.id }}">{{ poll.title }}</option>
  195.         {% endfor %}
  196.       </select>
  197.     </div>
  199.     <div id="chat-window" style="height: 80vh; overflow-y: scroll;">
  200.       <div id="chat-messages"></div>
  201.     </div>
  203.     <div class="loading">
  204.       <div id="loading-icon" style="display: none;">
  205.         <img src="images/Loading_icon.gif" alt="Loading" width="32" height="32">
  206.       </div>
  207.     </div>
  208.   </div>
  210.   <form autocomplete="off" id="message-form" method="post" class="fixed-bottom bg-light p-3 message-form">
  211.     <div class="container">
  212.       <div class="form-row">
  213.         <div class="col">
  214.           <input autocomplete="off" type="text" name="content" id="message-content" class="form-control" placeholder="Type your message" required>
  215.         </div>
  216.         <div class="col-auto">
  217.           <button type="submit" class="btn btn-primary">Send</button>
  218.         </div>
  219.       </div>
  220.     </div>
  221.   </form>
  223. </body>
  224. </html>