var MESSAGES = [{
  "role": "assistant",
  "content": "Halo, ada yang bisa saya bantu?"
}];

$(document).ready(function() {
  // Handler for sending messages
  $('#message-form').submit(function(event) {
    event.preventDefault();
    var message = $('#message').val();
    if (message) {
      $('#messages').append(
        '<div class="alert alert-primary" role="alert">' +
          message +
        '</div>'
      );
      MESSAGES.push({
        "role": "user",
        "content": message
      })
      $('#message').val('');
      $('#video-container').append(
      '<div id="wait-text" class="alert alert-info" role="alert">' +
          'Please wait...' +
          '</div>')
      $.ajax({
        url: '/process',
        type: 'POST',
        contentType: 'application/json',
        dataType: 'json',
        data: JSON.stringify({"use_video": "1", "payload": MESSAGES}),
        success: function(response) {
          $('#messages').append(
            '<div class="alert alert-secondary" role="alert">' +
              response.content +
            '</div>'
          );
          MESSAGES.push({
            "role": "assistant",
            "content": response.content
          })
          $('#video-container video source').attr('src', "/files/"+response.video);
          $("#video-container video")[0].load();
          $('#wait-text').remove()
        },
        error: function(error) {
          console.log(error);
        }
      });
    }
  });
});