111 lines
4.8 KiB
HTML
111 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AI Agent Chat</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9AReq41fQ0lR8IKkKtZSL8TorASlonYWTfqj0vCH7j4dUnbKKL+XYIPh3MAa948aKJCtkOtfMtpEihvkzruhaNg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
<style>
|
|
/* Basic Styling - Customize as needed */
|
|
body { font-family: sans-serif; }
|
|
.chat-container { width: 80%; margin: 20px auto; border: 1px solid #ccc; padding: 15px; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
|
|
.chat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
|
|
.agent-selector { display: flex; gap: 5px;}
|
|
.agent-button { padding: 8px 12px; border: none; background-color: #f0f0f0; cursor: pointer; border-radius: 4px; }
|
|
.agent-button.selected { background-color: #ddd; font-weight: bold;}
|
|
.chat-messages { height: 300px; overflow-y: scroll; padding: 10px; margin-bottom: 10px; }
|
|
.message { margin-bottom: 5px; padding: 8px; border-radius: 4px; }
|
|
.user-message { background-color: #e2f7ff; text-align: right;}
|
|
.agent-message { background-color: #f0f0f0; text-align: left;}
|
|
.input-area { display: flex; gap: 5px; }
|
|
.chat-input { width: calc(100% - 60px); padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
|
|
.send-button { padding: 8px 12px; background-color: #3498db; color: white; border: none; cursor: pointer; border-radius: 4px; }
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="chat-container">
|
|
<div class="chat-header">
|
|
<h3>AI Agent Chat</h3>
|
|
<div class="agent-selector">
|
|
<button class="agent-button selected" data-agent="general">General Search</button>
|
|
<button class="agent-button" data-agent="it_support">IT Support</button>
|
|
<button class="agent-button" data-agent="data_analysis">Data Analysis</button>
|
|
<button class="agent-button" data-agent="security">Security Agent</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chat-messages" id="chatMessages">
|
|
<!-- Messages will appear here -->
|
|
</div>
|
|
|
|
<div class="input-area">
|
|
<input type="text" class="chat-input" id="chatInput" placeholder="Type your message...">
|
|
<button class="send-button" onclick="sendMessage()">Send</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
const chatMessages = document.getElementById('chatMessages');
|
|
const chatInput = document.getElementById('chatInput');
|
|
const agentButtons = document.querySelectorAll('.agent-button');
|
|
|
|
let currentAgent = 'general'; // Default Agent
|
|
|
|
// Select Agent Functionality
|
|
agentButtons.forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
// Remove 'selected' class from all buttons
|
|
agentButtons.forEach(btn => btn.classList.remove('selected'));
|
|
// Add 'selected' class to the clicked button
|
|
button.classList.add('selected');
|
|
currentAgent = button.dataset.agent;
|
|
console.log("Current Agent:", currentAgent); // Debugging
|
|
});
|
|
});
|
|
|
|
async function sendMessage() {
|
|
const messageText = chatInput.value.trim();
|
|
if (messageText !== "") {
|
|
// Display user message
|
|
displayMessage('user', messageText);
|
|
chatInput.value = "";
|
|
|
|
// Call the backend to get agent response
|
|
try {
|
|
const response = await fetch('/api/chat', { // Replace with your API endpoint
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ message: messageText, agent: currentAgent })
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
displayMessage('agent', data.reply); // Assuming the backend returns a 'reply' field
|
|
} else {
|
|
displayMessage('system', "Error sending message.");
|
|
}
|
|
} catch (error) {
|
|
console.error("Error:", error);
|
|
displayMessage('system', "Network error or server unavailable.");
|
|
}
|
|
}
|
|
}
|
|
|
|
function displayMessage(sender, text) {
|
|
const messageDiv = document.createElement('div');
|
|
messageDiv.classList.add('message', sender === 'user' ? 'user-message' : 'agent-message');
|
|
messageDiv.textContent = text;
|
|
chatMessages.appendChild(messageDiv);
|
|
|
|
// Scroll to the bottom of the chat
|
|
chatMessages.scrollTop = chatMessages.scrollHeight;
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html> |