admin/35632-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

December 16th, 2025 V.5

Browse Source
This commit is contained in:
Flatlogic Bot 2025-12-17 01:57:00 +00:00
parent a9b3eacb8c
commit 21d55d1a3c
2 changed files with 130 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/pasted-20251217-014544-0379569d.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

182
chat.php
View File

@ -23,14 +23,29 @@ require_once 'db/config.php';
background-color: #fafafa; background-color: #fafafa;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
/* Make main content fill the screen */
.main-content {
height: 100vh;
display: flex;
flex-direction: column;
}
.chat-layout {
display: grid;
grid-template-columns: 1fr 320px; /* Main chat area and right sidebar */
gap: 0;
height: 100%;
width: 100%;
}
.chat-container { .chat-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: calc(100vh - 120px); /* Adjust based on header/footer height */ height: 100%; /* Full height of its grid cell */
background-color: #fafafa;
} }
.chat-messages { .chat-messages {
flex-grow: 1; flex-grow: 1;
overflow-y: auto; overflow-y: auto;
padding: 1.5rem;
} }
.message-bubble { .message-bubble {
max-width: 75%; max-width: 75%;
@ -40,34 +55,25 @@ require_once 'db/config.php';
color: white; color: white;
} }
.ai-message { .ai-message {
background-color: #F3F4F6; background-color: #ffffff;
color: #1F2937; color: #1F2937;
border: 1px solid #e5e7eb;
} }
#chat-input-wrapper { #chat-input-wrapper {
position: relative; position: relative;
} }
#chat-input {
padding-right: 40px; /* Space for the button */
}
#send-btn { #send-btn {
position: absolute; position: absolute;
right: 8px; right: 8px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
color: #9CA3AF;
}
#send-btn:hover {
color: #374151;
} }
</style> </style>
</head> </head>
<body class="bg-gray-100"> <body class="bg-gray-100">
<div class="flex h-screen bg-gray-200"> <div class="flex h-screen bg-gray-200">
<!-- Sidebar --> <!-- Sidebar -->
<div class="w-64 bg-white shadow-md"> <div class="w-64 bg-white shadow-md flex-shrink-0">
<div class="p-6"> <div class="p-6">
<a href="app.php"> <a href="app.php">
<img src="assets/pasted-20251120-051320-b2b0cdfa.png" alt="FinMox Logo" style="height: 32px;"> <img src="assets/pasted-20251120-051320-b2b0cdfa.png" alt="FinMox Logo" style="height: 32px;">
@ -84,51 +90,108 @@ require_once 'db/config.php';
</div> </div>
<!-- Main content --> <!-- Main content -->
<main class="flex-1 flex flex-col overflow-hidden bg-[#fafafa]"> <main class="flex-1 flex flex-col overflow-hidden">
<div class="max-w-4xl w-full mx-auto px-4 sm:px-6 md:px-8 py-8 flex flex-col flex-grow"> <div class="chat-layout">
<h1 class="text-3xl font-bold text-gray-900 mb-6">AI Copilot</h1> <!-- Main Chat Area -->
<div class="chat-container" style="position: relative;">
<div class="chat-container bg-white border border-gray-200 rounded-xl shadow-sm flex-grow"> <a href="chat.php" id="refresh-chat" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors" title="Clear chat and refresh">
<div class="chat-messages p-6" id="chat-messages"> <i data-lucide="refresh-cw" class="w-5 h-5"></i>
</a>
<div class="chat-messages" id="chat-messages">
<!-- Initial Welcome Screen --> <!-- Initial Welcome Screen -->
<div id="welcome-screen" class="text-center h-full flex flex-col justify-center items-center"> <div id="welcome-screen" class="h-full flex flex-col justify-center items-center p-6">
<div class="w-full max-w-3xl text-center">
<div class="mb-8"> <div class="mb-8">
<h2 class="text-2xl font-semibold text-gray-800">Hi, I'm FinMox AI.</h2> <h1 class="text-3xl font-bold text-gray-800">Hi, I'm FinMox AI.</h1>
<p class="text-gray-500">How can I help you today?</p> <p class="text-lg text-gray-500 mt-2">Here are a few suggestions to get you started:</p>
</div> </div>
<div class="w-full max-w-2xl"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<p class="text-sm text-gray-600 mb-3">Here are a few suggestions:</p> <a href="#" class="suggestion-card bg-white p-4 rounded-lg border border-gray-200 hover:bg-gray-50 flex items-center gap-4 transition-colors" data-suggestion="Summarize active candidates">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="bg-purple-100 p-2 rounded-lg">
<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="users" class="w-6 h-6 text-purple-600"></i>
<i data-lucide="file-text" class="w-5 h-5 mb-2 text-gray-600"></i> </div>
<p class="text-sm font-medium text-gray-800">Summarize key candidate skills</p> <span class="font-medium text-gray-700">Summarize active candidates</span>
</button> </a>
<button class="suggestion-card text-left p-4 bg-gray-50 hover:bg-gray-100 rounded-lg border border-gray-200 transition"> <a href="#" class="suggestion-card bg-white p-4 rounded-lg border border-gray-200 hover:bg-gray-50 flex items-center gap-4 transition-colors" data-suggestion="List top compliance risks">
<i data-lucide="mail" class="w-5 h-5 mb-2 text-gray-600"></i> <div class="bg-red-100 p-2 rounded-lg">
<p class="text-sm font-medium text-gray-800">Draft a response to a candidate</p> <i data-lucide="shield-alert" class="w-6 h-6 text-red-600"></i>
</button> </div>
<button class="suggestion-card text-left p-4 bg-gray-50 hover:bg-gray-100 rounded-lg border border-gray-200 transition"> <span class="font-medium text-gray-700">List top compliance risks</span>
<i data-lucide="bar-chart-2" class="w-5 h-5 mb-2 text-gray-600"></i> </a>
<p class="text-sm font-medium text-gray-800">Analyze data from a resume</p> <a href="#" class="suggestion-card bg-white p-4 rounded-lg border border-gray-200 hover:bg-gray-50 flex items-center gap-4 transition-colors" data-suggestion="Draft a new job description for a Senior Product Manager">
</button> <div class="bg-blue-100 p-2 rounded-lg">
<i data-lucide="file-text" class="w-6 h-6 text-blue-600"></i>
</div>
<span class="font-medium text-gray-700">Draft a new job description</span>
</a>
<a href="#" class="suggestion-card bg-white p-4 rounded-lg border border-gray-200 hover:bg-gray-50 flex items-center gap-4 transition-colors" data-suggestion="Explain the latest HR policy update regarding remote work">
<div class="bg-green-100 p-2 rounded-lg">
<i data-lucide="info" class="w-6 h-6 text-green-600"></i>
</div>
<span class="font-medium text-gray-700">Explain the latest HR policy update</span>
</a>
</div> </div>
</div> </div>
</div> </div>
<!-- Chat messages will be appended here --> <!-- Chat messages will be appended here -->
</div> </div>
<div class="p-4 border-t border-gray-200"> <div class="p-4 border-t border-gray-200 bg-white">
<div class="typing-indicator text-sm text-gray-500 mb-2 hidden" id="typing-indicator"> <div class="typing-indicator text-sm text-gray-500 mb-2 hidden" id="typing-indicator">
AI is thinking... AI is thinking...
</div> </div>
<div id="chat-input-wrapper" class="relative"> <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..."> <input type="text" id="chat-input" class="w-full border-gray-300 rounded-lg p-3 pr-12 text-sm focus:ring-blue-500 focus:border-blue-500" placeholder="Ask about metrics, candidates, or company policies...">
<button id="send-btn"> <button id="send-btn" class="bg-blue-600 text-white rounded-md p-2 hover:bg-blue-700">
<i data-lucide="send" class="w-5 h-5"></i> <i data-lucide="send" class="w-5 h-5"></i>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<!-- Right Tools Sidebar -->
<aside class="bg-white border-l border-gray-200 p-6 flex-col gap-8 hidden lg:flex">
<div>
<h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-4">Available Tools</h3>
<div class="space-y-3">
<button class="suggestion-btn flex items-start gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors w-full text-left" data-suggestion="Get Weekly Metrics">
<i data-lucide="bar-chart-3" class="w-5 h-5 text-blue-600 flex-shrink-0 mt-1"></i>
<div>
<p class="font-semibold text-gray-800">Get Weekly Metrics</p>
<p class="text-sm text-gray-500">Retrieve key HR metrics for the current week</p>
</div>
</button>
<button class="suggestion-btn flex items-start gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors w-full text-left" data-suggestion="Get Candidate Summaries">
<i data-lucide="users" class="w-5 h-5 text-purple-600 flex-shrink-0 mt-1"></i>
<div>
<p class="font-semibold text-gray-800">Get Candidate Summaries</p>
<p class="text-sm text-gray-500">AI-generated summaries of active candidates</p>
</div>
</button>
<button class="suggestion-btn flex items-start gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors w-full text-left" data-suggestion="Search RAG">
<i data-lucide="search" class="w-5 h-5 text-emerald-600 flex-shrink-0 mt-1"></i>
<div>
<p class="font-semibold text-gray-800">Search RAG</p>
<p class="text-sm text-gray-500">Search company knowledge base and policies</p>
</div>
</button>
<button class="suggestion-btn flex items-start gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors w-full text-left" data-suggestion="List Onboarding Risks">
<i data-lucide="alert-triangle" class="w-5 h-5 text-amber-600 flex-shrink-0 mt-1"></i>
<div>
<p class="font-semibold text-gray-800">List Onboarding Risks</p>
<p class="text-sm text-gray-500">Identify potential onboarding issues and delays</p>
</div>
</button>
</div>
</div>
<div>
<h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-4">Quick Actions</h3>
<div class="space-y-2">
<button class="suggestion-btn w-full text-left p-2 rounded-md hover:bg-gray-100 text-gray-700 font-medium" data-suggestion="Generate the weekly HR report">Weekly Report</button>
<button class="suggestion-btn w-full text-left p-2 rounded-md hover:bg-gray-100 text-gray-700 font-medium" data-suggestion="List the top 5 candidates based on score">Top Candidates</button>
<button class="suggestion-btn w-full text-left p-2 rounded-md hover:bg-gray-100 text-gray-700 font-medium" data-suggestion="Check for any new onboarding risks">Check Risks</button>
</div>
</div>
</aside>
</div> </div>
</main> </main>
</div> </div>
@ -144,8 +207,9 @@ require_once 'db/config.php';
let welcomeMessageCleared = false; let welcomeMessageCleared = false;
function addMessage(sender, content) { function addMessage(sender, content) {
if (!welcomeMessageCleared) { if (welcomeScreen && !welcomeMessageCleared) {
chatMessages.innerHTML = ''; welcomeScreen.style.display = 'none';
chatMessages.innerHTML = ''; // Clear any lingering welcome message content if needed
welcomeMessageCleared = true; welcomeMessageCleared = true;
} }
@ -154,7 +218,11 @@ require_once 'db/config.php';
const bubble = document.createElement('div'); const bubble = document.createElement('div');
bubble.classList.add('p-3', 'rounded-lg', 'message-bubble'); bubble.classList.add('p-3', 'rounded-lg', 'message-bubble');
bubble.textContent = content;
const contentContainer = document.createElement('div');
contentContainer.textContent = content;
bubble.appendChild(contentContainer);
if (sender === 'user') { if (sender === 'user') {
messageWrapper.classList.add('justify-end'); messageWrapper.classList.add('justify-end');
@ -169,8 +237,8 @@ require_once 'db/config.php';
chatMessages.scrollTop = chatMessages.scrollHeight; chatMessages.scrollTop = chatMessages.scrollHeight;
} }
async function sendMessage() { async function sendMessage(messageOverride) {
const message = userInput.value.trim(); const message = messageOverride || userInput.value.trim();
if (!message) return; if (!message) return;
addMessage('user', message); addMessage('user', message);
@ -202,16 +270,7 @@ require_once 'db/config.php';
} }
} }
function handleSuggestionClick(event) { sendBtn.addEventListener('click', () => sendMessage());
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) => { userInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
e.preventDefault(); e.preventDefault();
@ -220,7 +279,18 @@ require_once 'db/config.php';
}); });
document.querySelectorAll('.suggestion-card').forEach(card => { document.querySelectorAll('.suggestion-card').forEach(card => {
card.addEventListener('click', handleSuggestionClick); card.addEventListener('click', (e) => {
e.preventDefault();
const suggestion = e.currentTarget.dataset.suggestion;
sendMessage(suggestion);
});
});
document.querySelectorAll('.suggestion-btn').forEach(button => {
button.addEventListener('click', (e) => {
const suggestion = e.currentTarget.dataset.suggestion;
sendMessage(suggestion);
});
}); });
</script> </script>