<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Renatiin - ChatGPT</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<body class="bg-dark">
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <div class="container-fluid">
            <a href="#" class="navbar-brand">Renatiin ChatGPT</a>
        </div>
    </nav><br><br><br>
    <h1 class="text-white">Renatiin ChatGPT - Test gpt-turbo</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>
    <br><br>
    <ul class="list-group bg-dark">
            <% if (cookies) { %>
            <% cookies.forEach((value) => { %>
                <% if (value.type == 'user') { %>
                    <li class="list-group-item list-group-item-dark" aria-disabled="true"><%= value.question %></li>
                <% } else { %>
                    <li class="list-group-item"><%= value.question %></li>
                <% } %>
            <% }) %>
            <% } %>
        </ul>
    <br><br>
    <div class="form-floating">
        <textarea id="questionUser" placeholder="FaÃ§a sua pergunta." style="width: 100%" rows="3"></textarea>
        <div class="d-grid gap-2 d-md-block">
            <button class="btn btn-primary btn-lg" type="button" onclick="main()" id="sendButton">Enviar</button>
            <button class="btn btn-danger btn-lg" type="button" onclick="remake()" id="deleteButton">Refazer chat.</button>
        </div>
    </div>
    <script>
        async function main() {
            const text = document.querySelector('textarea').value
            document.querySelector('textarea').value = ''
            if (text) {
                // document.querySelector('ul').appendChild
                const element = document.createElement('li')
                element.classList.add('list-group-item', 'list-group-item-dark')
                const textNode = document.createTextNode(text)
                element.appendChild(textNode)
                const ul = document.querySelector('ul')
                ul.appendChild(element)
                document.querySelector('button').disabled = true
                document.querySelectorAll('button')[1].disabled = true
                const loading = document.createElement('li')
                loading.classList.add('list-group-item')
                const textNode2 = document.createTextNode('Carregando...')
                loading.appendChild(textNode2)
                ul.appendChild(loading)
                await fetch('https://renatiingpt.acerolagamer.repl.co/api/addQuestion', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        type: 'user',
                        question: text
                    })
                })
                await fetch('https://renatiingpt.acerolagamer.repl.co/api/consulteOpenAi', {
                    method: 'GET'
                }).then(response => response.json())
                .then(res => {
                    const newUl = document.querySelector('ul')
                    newUl.removeChild(newUl.lastElementChild)
                    let i = 0
                    let txt = res.reply
                    let vel = 25
                    const aaaUl = document.querySelector('ul')
                    const elementResponse = document.createElement('li')
                    elementResponse.classList.add('list-group-item')
                    aaaUl.appendChild(elementResponse)
                    function digitacao() {
                        if (i<txt.length) {
                            const newA = document.querySelector('ul').lastElementChild.innerHTML += txt.charAt(i)
                            i++
                            setTimeout(digitacao,vel)
                        } else {
                            document.querySelector('button').disabled = false
                          document.querySelectorAll('button')[1].disabled = false
                        }
                    }
                    digitacao()
                })
            }
        }
        async function remake() {
            fetch(`https://renatiingpt.acerolagamer.repl.co`, {
                method: 'DELETE'
            }).then(() => {
                location.reload()
            })
        }
    </script>
    </body>
</html>
