//code guidance from Chat with GPT Model by Dr. Mark Humphrys
//it follows the same kind of structure as to understand how to call the API.

//AI API that is being used is cohere. 
//Similar to OpenAI's APIs but it offers free API keys; thus why I picked it.


var COHERE_API_KEY = "E6vTBQ2D4AWDQHrv4kA0sIXekaq3BX731TMSjila"

var theprompt = "";

$('body').css({
 "margin": "25px",
 "padding": "12px",
 "font-family": "'Poppins', sans-serif",
 "font-family": "'Roboto', sans-serif",
 "font-size": "125%",
 "color": "#4A4B44",
});


document.write ( `

<style>
   @import url('https://fonts.googleapis.com/css2?family=Poppins&family=Roboto&display=swap');
</style>
<div style='position:absolute; left: 25%; right:25%'>
   <h1> Cohere AI API test </h1>
   <p> API key already set up. However, if it expires, you can put in your own key.</p>
   <div id=enterkey>
      <p>
         Enter your cohere API key. Get yours from
       <a href='https://dashboard.cohere.com/' style="color:#FF621F">here.  </a>
         <br></br>
         <input NAME="apikey" id="apikey" VALUE='' style='width:25vw; height:2vw; border-style:none none solid none' >
         <br></br>
         <button onclick='setkey();' style='background-color:#797267; color:white; text-align:center; padding:10px; font-size: 16px; border: none;  display:inline-block; margin:4px 2px; cursor:pointer; border-radius: 10px;'> Set API key</button>
      </p>
   </div>
   <div>
      <br></br>
      <hr style="border-top: 1px dotted #76877D">
      </hr>
      <h3> Chat with Cohere </h3>
      <input id=user value="Hello World" style='width:50vw; height:2vw; border-style:none none solid none'>
      <br></br>
      <button onclick="sendchat();" style='background-color:#797267; color:white; text-align:center; padding:10px; font-size: 16px; border: none; display:inline-block; margin:4px 2px; cursor:pointer; border-radius: 10px;'>Send</button>
      <p id="send">  </p>
   </div>
   <h3> Cohere says: </h3>
   <div id=cohere> </div>
</div>
` );

// Code followed from Chat with GPT model
// Reset the API KEY if it is expired. 
function setkey()          
{   
    COHERE_API_KEY = "";
	COHERE_API_KEY =  jQuery("input#apikey").val();
	COHERE_API_KEY = COHERE_API_KEY.trim();
	console.log(COHERE_API_KEY);
	$("#enterkey").html ( "<b> API key has been set. </b>" );
}

var chat_hist = [];
function sendchat() {
    var theprompt = $("#user").val();
    console.log(theprompt);
    $("#send").html("Fetching API response.")
    // Add the current user message to the chat history
    chat_hist.push({"role": "USER", "message": theprompt, "user_name": COHERE_API_KEY });
    
    // API DOCS: https://docs.cohere.com/reference/chat
    const settings = {
        async: true,
        crossDomain: true,
        url: 'https://api.cohere.ai/v1/chat',
        method: 'POST',
        headers: {
            accept: 'application/json',
            'content-type': 'application/json',
            'Authorization': 'BEARER ' + COHERE_API_KEY
        },
        processData: false,
        data: JSON.stringify({
            "message": theprompt,
            "model": "command",
            "temperature": 0.3,
            "chat_history": chat_hist,
            // ... other properties
        })
    };

    $.ajax(settings)
        .done(function (response) {
            console.log(response);
            var answer = response.text;
            // Add the chatbot's response to the chat history
            chat_hist.push({"role": "CHATBOT", "message": answer, "user_name": "CohereBot"});
            $("#cohere").text(answer);
            $("#send").html("");
        })
        .fail(function (error) {
            console.error("Error:", error);
            $("#cohere").text("An error occurred while fetching the response. Check your API key.");
        });
}