Chatbot

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}

#chat-container {
width: 300px;
border: 1px solid #ccc;
border-radius: 8px;
overflow: hidden;
}

#chat-messages {
height: 200px;
overflow-y: scroll;
padding: 10px;
background-color: #fff;
}

#input-container {
display: flex;
padding: 10px;
background-color: #eee;
}

#user-input {
flex: 1;
padding: 5px;
margin-right: 10px;
}

#send-button {
padding: 5px 10px;
background-color: #4caf50;
color: #fff;
border: none;
cursor: pointer;
}

const chatMessages = document.getElementById(‘chat-messages’);
const userInput = document.getElementById(‘user-input’);

function sendMessage() {
const userMessage = userInput.value;
appendMessage(‘user’, userMessage);
userInput.value =  »;

// Envoyer la requête au service de chatbot (ici, GPT-3).
// Remplacez ‘VOTRE_CLE_API’ par votre clé API GPT-3 valide.
const apiKey = ‘VOTRE_CLE_API’;
const apiUrl = ‘https://api.openai.com/v1/engines/davinci-codex/completions’;

fetch(apiUrl, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’,
‘Authorization’: `Bearer ${apiKey}`
},
body: JSON.stringify({
prompt: userMessage,
max_tokens: 50
})
})
.then(response => response.json())
.then(data => {
const botMessage = data.choices[0].text.trim();
appendMessage(‘bot’, botMessage);
})
.catch(error => console.error(‘Erreur:’, error));
}

function appendMessage(sender, message) {
const messageElement = document.createElement(‘div’);
messageElement.className = sender;
messageElement.textContent = message;
chatMessages.appendChild(messageElement);
chatMessages.scrollTop = chatMessages.scrollHeight; // Fait défiler vers le bas pour afficher le dernier message.
}