<style>
#mistral-chatbot {<br /> position: fixed;<br /> bottom: 20px;<br /> right: 20px;<br /> width: 300px;<br /> border: 1px solid #ccc;<br /> border-radius: 5px;<br /> background-color: #fff;<br /> box-shadow: 0 0 10px rgba(0,0,0,0.1);<br /> }</p>
<p> #chat-window {<br /> padding: 10px;<br /> }</p>
<p> #chat-messages {<br /> height: 200px;<br /> overflow-y: scroll;<br /> border: 1px solid #ccc;<br /> margin-bottom: 10px;<br /> padding: 5px;<br /> }</p>
<p> #user-input {<br /> width: calc(100% – 60px);<br /> padding: 5px;<br /> }</p>
<p> #send-button {<br /> padding: 5px 10px;<br /> }</p>
<p> .user-message {<br /> background-color: #e0e0e0;<br /> padding: 5px;<br /> margin: 5px 0;<br /> border-radius: 5px;<br /> }</p>
<p> .ai-message {<br /> background-color: #d0f0d0;<br /> padding: 5px;<br /> margin: 5px 0;<br /> border-radius: 5px;<br /> }</p>
<p> .error-message {<br /> background-color: #f0d0d0;<br /> padding: 5px;<br /> margin: 5px 0;<br /> border-radius: 5px;<br /> }<br /> </style>

&nbsp;
<div id= »mistral-chatbot »>
<div id= »chat-window »>
<div id= »chat-messages »></div>
<input id= »user-input » type= »text » placeholder= »Tapez votre message… » />
<button id= »send-button »>Envoyer</button>

</div>
</div>
<script src= »https://code.jquery.com/jquery-3.6.0.min.js »></script>
<script>
jQuery(document).ready(function($) {
$(‘#send-button’).click(function() {
var userInput = $(‘#user-input’).val();
if (userInput.trim() ===  ») return;

// Afficher le message de l’utilisateur
$(‘#chat-messages’).append(‘</p>
<p>
</p>
<div class= »user-message »>’ + userInput + ‘</div>
<p>
</p>
<p>’);

// Envoyer la requête à l’API Mistral
$.ajax({
url: ‘https://api.mistral.ai/v1/chat’, // URL correcte
method: ‘POST’,
headers: {
‘Authorization’: ‘Bearer 8b68739c:20241110:expert-comptable:0d14b26e’, // Clé API correcte
‘Content-Type’: ‘application/json’ // Type de contenu correct
},
data: JSON.stringify({ message: userInput }),
success: function(response) {
// Vérifier si la réponse contient la propriété ‘reply’
if (response && response.reply) {
// Afficher la réponse de l’IA
$(‘#chat-messages’).append(‘</p>
<p>
</p>
<div class= »ai-message »>’ + response.reply + ‘</div>
<p>
</p>
<p>’);
} else {
console.error(‘Erreur: Réponse inattendue de l\’API’, response);
}
},
error: function(error) {
console.error(‘Erreur:’, error);
// Afficher un message d’erreur à l’utilisateur
$(‘#chat-messages’).append(‘</p>
<p>
</p>
<div class= »error-message »>Erreur lors de l\’envoi du message. Veuillez réessayer.</div>
<p>
</p>
<p>’);
}
});

// Vider le champ de saisie
$(‘#user-input’).val( »);
});
});
</script>