84 lines
3.3 KiB
PHP
84 lines
3.3 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ChatEB</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
|
|
<link rel="icon" type="image/svg+xml" href="cat.svg">
|
|
<style>
|
|
main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
}
|
|
|
|
#conversation {
|
|
flex-grow: 2;
|
|
overflow-y: auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<main class="container">
|
|
<h1>ChatEB</h1>
|
|
<div id="conversation">
|
|
<p>😸 Posez-moi toutes vos questions !</p>
|
|
</div>
|
|
<form id="formulaire" action="question.php" method="post" role="group">
|
|
<textarea id="question" name="question" placeholder="Ma question" required></textarea>
|
|
<button type="submit">Envoyer</button>
|
|
</form>
|
|
</main>
|
|
<script>
|
|
const formulaire = document.getElementById('formulaire');
|
|
const bouton = document.querySelector('button[type="submit"]');
|
|
const conversation = document.getElementById('conversation');
|
|
const question = document.getElementById('question');
|
|
|
|
question.addEventListener('keydown', e => {
|
|
if (e.key === 'Enter' && !e.ctrlKey && !e.shiftKey) {
|
|
e.preventDefault();
|
|
e.target.form.requestSubmit();
|
|
}
|
|
});
|
|
|
|
formulaire.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
bouton.disabled = true;
|
|
bouton.setAttribute("aria-busy", true)
|
|
const formulaireData = new FormData(formulaire);
|
|
const citation = document.createElement('blockquote');
|
|
citation.innerText = formulaireData.get('question');
|
|
conversation.appendChild(citation);
|
|
|
|
formulaire.reset();
|
|
const requete = await fetch(formulaire.action, {
|
|
method: formulaire.method,
|
|
body: formulaireData
|
|
});
|
|
|
|
const paragraphe = document.createElement('p');
|
|
paragraphe.setAttribute('aria-busy', 'true');
|
|
conversation.appendChild(paragraphe);
|
|
const reponse = await requete.text();
|
|
paragraphe.setAttribute('aria-busy', 'false');
|
|
Array.from(reponse).forEach((lettre, i) => {
|
|
setTimeout(() => {
|
|
if (lettre == "\n") paragraphe.innerHTML += "<br>";
|
|
else paragraphe.innerHTML += lettre;
|
|
}, i * 40);
|
|
});
|
|
setTimeout(() => {
|
|
conversation.innerHTML += "<p>😸 Voulez-vous que je réponde à une autre question ?</p>";
|
|
conversation.scrollTop = conversation.scrollHeight;
|
|
bouton.disabled = false;
|
|
bouton.setAttribute("aria-busy", false);
|
|
}, reponse.length * 40);
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |