const input = document.querySelector('input')
const button = document.querySelector('button')
const dialogue = document.querySelector('#dialogue')

var communicator = ''
button.onclick = () => {
    bottomScroll();
    makeRequest();
}

input.addEventListener("keypress", function(event) {
    //bottomScroll();
    // If the user presses the "Enter" key on the keyboard
    if (event.key === "Enter") {
        // Cancel the default action, if needed
        event.preventDefault();
        bottomScroll();
        makeRequest();
    }
});

function makeRequest(){
    var prompt = input.value
    if(prompt != ''){
        bottomScroll();
        (dialogue.innerHTML == '') ? communicator = '<i class="fa fa-user" aria-hidden="true" style="color:green;"></i>: <br>' : communicator = '<br><br><i class="fa fa-user" aria-hidden="true" style="color:green;"></i>: <br>'
        dialogue.innerHTML += communicator + prompt
        // use SSE to get server Events
        var source = new SSE("request.php?prompt=" + prompt);
        input.value = ''
        input.focus()   
        dialogue.innerHTML += '<br><br><i class="fa fa-android" aria-hidden="true" style="color:blue;"></i>: '   
        var counts = 1
        source.addEventListener('message', function (e) {            
            if(e.data){
                if(e.data != '[DONE]'){                    
                    var tokens = JSON.parse(e.data).choices[0].delta.content

                    if(counts==2){
                        if(tokens!=undefined){
                            if(tokens!='\n\n'){
                                dialogue.innerHTML += "<br>"+tokens
                            } else {
                                dialogue.innerHTML += '<br>'
                            }
                        }                        
                        
                    } else {
                        if(tokens!=undefined){
                            dialogue.innerHTML += tokens
                        }    
                    }
                    
                    
                    bottomScroll();
                    counts++;
                }else{
                    console.log('Completed');
                    counts = 1;
                }
                
            }
        })
        source.stream()
        bottomScroll();
    }
}

function bottomScroll(){
    //dialogue.scrollIntoView(false)
    //dialogue.scrollTo(0, dialogue.scrollHeight)
}