120 lines
4.2 KiB
Twig
120 lines
4.2 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% block title %}ChatGPT Integration{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="container mx-auto p-4 max-w-4xl">
|
|
<h1 class="text-3xl font-bold mb-6 text-gray-800">ChatGPT Integration</h1>
|
|
|
|
<div id="chat-container" class="bg-white rounded-lg shadow-md p-4 mb-4 min-h-80 max-h-96 overflow-y-auto flex flex-col">
|
|
<div id="chat-messages" class="flex-grow">
|
|
<div class="message system p-3 mb-3 bg-gray-100 rounded-lg">
|
|
<p>Hello! How can I help you today?</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex mt-4">
|
|
<input
|
|
type="text"
|
|
id="user-input"
|
|
class="flex-grow px-4 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
placeholder="Type your message..."
|
|
>
|
|
<button
|
|
id="send-button"
|
|
class="bg-blue-500 text-white px-6 py-2 rounded-r-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
Send
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block javascripts %}
|
|
{{ parent() }}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const chatMessages = document.getElementById('chat-messages');
|
|
const userInput = document.getElementById('user-input');
|
|
const sendButton = document.getElementById('send-button');
|
|
let conversation = [];
|
|
|
|
function addMessage(content, role) {
|
|
const messageDiv = document.createElement('div');
|
|
messageDiv.className = `message ${role} p-3 mb-3 rounded-lg ${role === 'user' ? 'bg-blue-100 ml-12' : 'bg-gray-100 mr-12'}`;
|
|
|
|
const messagePara = document.createElement('p');
|
|
messagePara.textContent = content;
|
|
|
|
messageDiv.appendChild(messagePara);
|
|
chatMessages.appendChild(messageDiv);
|
|
|
|
// Scroll to bottom
|
|
const chatContainer = document.getElementById('chat-container');
|
|
chatContainer.scrollTop = chatContainer.scrollHeight;
|
|
}
|
|
|
|
function sendMessage() {
|
|
const message = userInput.value.trim();
|
|
if (!message) return;
|
|
|
|
// Add user message to chat
|
|
addMessage(message, 'user');
|
|
|
|
// Clear input
|
|
userInput.value = '';
|
|
|
|
// Show loading indicator
|
|
const loadingDiv = document.createElement('div');
|
|
loadingDiv.className = 'message assistant p-3 mb-3 bg-gray-100 rounded-lg mr-12';
|
|
loadingDiv.innerHTML = '<p>Thinking...</p>';
|
|
chatMessages.appendChild(loadingDiv);
|
|
|
|
// Send to API
|
|
fetch('/api/chat', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
message: message,
|
|
conversation: conversation
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
// Remove loading indicator
|
|
chatMessages.removeChild(loadingDiv);
|
|
|
|
if (data.error) {
|
|
// Show error
|
|
addMessage('Error: ' + data.error, 'system');
|
|
} else {
|
|
// Show response
|
|
addMessage(data.response, 'assistant');
|
|
// Update conversation history
|
|
conversation = data.conversation;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
// Remove loading indicator
|
|
chatMessages.removeChild(loadingDiv);
|
|
|
|
// Show error
|
|
addMessage('Error communicating with the server. Please try again.', 'system');
|
|
console.error('Error:', error);
|
|
});
|
|
}
|
|
|
|
// Event listeners
|
|
sendButton.addEventListener('click', sendMessage);
|
|
|
|
userInput.addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
sendMessage();
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |