228 lines
9.7 KiB
PHP
228 lines
9.7 KiB
PHP
<?php
|
|
session_start();
|
|
if (!isset($_SESSION['user_id'])) {
|
|
header('Location: login.php');
|
|
exit;
|
|
}
|
|
require_once 'db/config.php';
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AI Copilot - FinMox</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
|
* {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
}
|
|
body {
|
|
background-color: #fafafa;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
.chat-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: calc(100vh - 120px); /* Adjust based on header/footer height */
|
|
}
|
|
.chat-messages {
|
|
flex-grow: 1;
|
|
overflow-y: auto;
|
|
}
|
|
.message-bubble {
|
|
max-width: 75%;
|
|
}
|
|
.user-message {
|
|
background-color: #3B82F6;
|
|
color: white;
|
|
}
|
|
.ai-message {
|
|
background-color: #F3F4F6;
|
|
color: #1F2937;
|
|
}
|
|
#chat-input-wrapper {
|
|
position: relative;
|
|
}
|
|
#chat-input {
|
|
padding-right: 40px; /* Space for the button */
|
|
}
|
|
#send-btn {
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: #9CA3AF;
|
|
}
|
|
#send-btn:hover {
|
|
color: #374151;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-100">
|
|
<div class="flex h-screen bg-gray-200">
|
|
<!-- Sidebar -->
|
|
<div class="w-64 bg-white shadow-md">
|
|
<div class="p-6">
|
|
<a href="app.php">
|
|
<img src="assets/pasted-20251120-051320-b2b0cdfa.png" alt="FinMox Logo" style="height: 32px;">
|
|
</a>
|
|
</div>
|
|
<nav class="mt-6">
|
|
<a href="dashboard.php" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-200 text-gray-700">Dashboard</a>
|
|
<a href="chat.php" class="block py-2.5 px-4 rounded transition duration-200 bg-gray-200 text-gray-900 font-semibold">AI Copilot</a>
|
|
<a href="workflows.php" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-200 text-gray-700">Workflows</a>
|
|
<a href="roles.php" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-200 text-gray-700">Roles</a>
|
|
<a href="settings.php" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-200 text-gray-700">Settings</a>
|
|
<a href="logout.php" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-200 text-gray-700">Logout</a>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Main content -->
|
|
<main class="flex-1 flex flex-col overflow-hidden bg-[#fafafa]">
|
|
<div class="max-w-4xl w-full mx-auto px-4 sm:px-6 md:px-8 py-8 flex flex-col flex-grow">
|
|
<h1 class="text-3xl font-bold text-gray-900 mb-6">AI Copilot</h1>
|
|
|
|
<div class="chat-container bg-white border border-gray-200 rounded-xl shadow-sm flex-grow">
|
|
<div class="chat-messages p-6" id="chat-messages">
|
|
<!-- Initial Welcome Screen -->
|
|
<div id="welcome-screen" class="text-center h-full flex flex-col justify-center items-center">
|
|
<div class="mb-8">
|
|
<h2 class="text-2xl font-semibold text-gray-800">Hi, I'm FinMox AI.</h2>
|
|
<p class="text-gray-500">How can I help you today?</p>
|
|
</div>
|
|
<div class="w-full max-w-2xl">
|
|
<p class="text-sm text-gray-600 mb-3">Here are a few suggestions:</p>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<button class="suggestion-card text-left p-4 bg-gray-50 hover:bg-gray-100 rounded-lg border border-gray-200 transition">
|
|
<i data-lucide="file-text" class="w-5 h-5 mb-2 text-gray-600"></i>
|
|
<p class="text-sm font-medium text-gray-800">Summarize key candidate skills</p>
|
|
</button>
|
|
<button class="suggestion-card text-left p-4 bg-gray-50 hover:bg-gray-100 rounded-lg border border-gray-200 transition">
|
|
<i data-lucide="mail" class="w-5 h-5 mb-2 text-gray-600"></i>
|
|
<p class="text-sm font-medium text-gray-800">Draft a response to a candidate</p>
|
|
</button>
|
|
<button class="suggestion-card text-left p-4 bg-gray-50 hover:bg-gray-100 rounded-lg border border-gray-200 transition">
|
|
<i data-lucide="bar-chart-2" class="w-5 h-5 mb-2 text-gray-600"></i>
|
|
<p class="text-sm font-medium text-gray-800">Analyze data from a resume</p>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Chat messages will be appended here -->
|
|
</div>
|
|
|
|
<div class="p-4 border-t border-gray-200">
|
|
<div class="typing-indicator text-sm text-gray-500 mb-2 hidden" id="typing-indicator">
|
|
AI is thinking...
|
|
</div>
|
|
<div id="chat-input-wrapper" class="relative">
|
|
<input type="text" id="chat-input" class="w-full border-gray-300 rounded-lg p-3 pr-12 text-sm" placeholder="Send a message...">
|
|
<button id="send-btn">
|
|
<i data-lucide="send" class="w-5 h-5"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
lucide.createIcons();
|
|
|
|
const chatMessages = document.getElementById('chat-messages');
|
|
const userInput = document.getElementById('chat-input');
|
|
const sendBtn = document.getElementById('send-btn');
|
|
const typingIndicator = document.getElementById('typing-indicator');
|
|
const welcomeScreen = document.getElementById('welcome-screen');
|
|
let welcomeMessageCleared = false;
|
|
|
|
function addMessage(sender, content) {
|
|
if (!welcomeMessageCleared) {
|
|
chatMessages.innerHTML = '';
|
|
welcomeMessageCleared = true;
|
|
}
|
|
|
|
const messageWrapper = document.createElement('div');
|
|
messageWrapper.classList.add('flex', 'mb-4');
|
|
|
|
const bubble = document.createElement('div');
|
|
bubble.classList.add('p-3', 'rounded-lg', 'message-bubble');
|
|
bubble.textContent = content;
|
|
|
|
if (sender === 'user') {
|
|
messageWrapper.classList.add('justify-end');
|
|
bubble.classList.add('user-message');
|
|
} else {
|
|
messageWrapper.classList.add('justify-start');
|
|
bubble.classList.add('ai-message');
|
|
}
|
|
|
|
messageWrapper.appendChild(bubble);
|
|
chatMessages.appendChild(messageWrapper);
|
|
chatMessages.scrollTop = chatMessages.scrollHeight;
|
|
}
|
|
|
|
async function sendMessage() {
|
|
const message = userInput.value.trim();
|
|
if (!message) return;
|
|
|
|
addMessage('user', message);
|
|
userInput.value = '';
|
|
sendBtn.disabled = true;
|
|
typingIndicator.classList.remove('hidden');
|
|
|
|
try {
|
|
const response = await fetch('api/chat.php', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ message })
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
|
|
const data = await response.json();
|
|
const aiReply = data.reply || data.error || 'No reply from AI.';
|
|
addMessage('ai', aiReply);
|
|
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
addMessage('ai', 'Sorry, something went wrong. Please check the console.');
|
|
} finally {
|
|
sendBtn.disabled = false;
|
|
typingIndicator.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
function handleSuggestionClick(event) {
|
|
const button = event.target.closest('.suggestion-card');
|
|
if (button) {
|
|
const text = button.querySelector('p').textContent;
|
|
userInput.value = text;
|
|
userInput.focus();
|
|
}
|
|
}
|
|
|
|
sendBtn.addEventListener('click', sendMessage);
|
|
userInput.addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
sendMessage();
|
|
}
|
|
});
|
|
|
|
document.querySelectorAll('.suggestion-card').forEach(card => {
|
|
card.addEventListener('click', handleSuggestionClick);
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|