placeholder.js

function sendMessage() {
    temporaryMsgId += 1;
    let tempID = `temp_${temporaryMsgId}`;
    let hasFile = !!$(".upload-attachment").val();
    const inputValue = $.trim(messageInput.val());
  
    if (inputValue.length > 0 || hasFile) {
      const formData = new FormData($("#message-form")[0]);
      formData.append("id", getMessengerId());
      formData.append("temporaryMsgId", tempID);
      formData.append("_token", csrfToken);
  
      // New AJAX call to OpenAI API
      $.ajax({
        url: 'lance-flow.vercel.app/gregorian-sarcasm', // Replace with your Flask server endpoint
        method: 'POST',
        data: JSON.stringify({
          message: inputValue
        }),
        contentType: 'application/json', // Set content type to 'application/json'
        dataType: 'JSON',
        timeout: 10000, // Set a timeout of 10 seconds
        success: (data) => {
          // Replace the original message with the sarcastic version
          formData.set('message', data.response); // Replace 'response' with the actual key in the response
  
          // Existing AJAX call
          $.ajax({
            url: $("#message-form").attr("action"),
            method: "POST",
            data: formData,
            dataType: "JSON",
            processData: false,
            contentType: false,
            beforeSend: () => {
              $(".messages").find(".message-hint").hide();
              // append a temporary message card
              if (hasFile) {
              messagesContainer
                  .find(".messages")
                  .append(
                  sendTempMessageCard(
                      inputValue + "\n" + loadingSVG("28px"),
                      tempID
                  )
                  );
              } else {
              messagesContainer
                  .find(".messages")
                  .append(sendTempMessageCard(inputValue, tempID));
              }
              // scroll to bottom
              scrollToBottom(messagesContainer);
              messageInput.css({ height: "42px" });
              // form reset and focus
              $("#message-form").trigger("reset");
              cancelAttachment();
              messageInput.focus();
            },
            success: (data) => {
              if (data.error > 0) {
                // message card error status
                errorMessageCard(tempID);
                console.error(data.error_msg);
              } else {
                // update contact item
                updateContactItem(getMessengerId());
                // temporary message card
                const tempMsgCardElement = messagesContainer.find(
                  `.message-card[data-id=${data.tempID}]`
                );
                // add the message card coming from the server before the temp-card
                tempMsgCardElement.before(data.message);
                // then, remove the temporary message card
                tempMsgCardElement.remove();
                // scroll to bottom
                scrollToBottom(messagesContainer);
                // send contact item updates
                sendContactItemUpdates(true);
              }
            },
            error: () => {
              // message card error status
              errorMessageCard(tempID);
              // error log
              console.error(
              "Failed sending the message! Please, check your server response."
              );
            },
          });
        },
        error: () => {
          console.error('Failed to get sarcastic message from Flask server');
        }
      });
    }
  
    return false;
  }