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

v4

Browse Source
This commit is contained in:
Flatlogic Bot 2025-10-02 10:22:16 +00:00
parent 94b10ba1f5
commit 85145488b5
1 changed files with 130 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

183
index.php
View File

@ -54,7 +54,6 @@
height: 90vh; height: 90vh;
max-height: 800px; max-height: 800px;
display: flex; display: flex;
flex-direction: column;
background: var(--card-bg); background: var(--card-bg);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border-radius: 24px; border-radius: 24px;
@ -62,6 +61,57 @@
border: 1px solid rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.18);
overflow: hidden; overflow: hidden;
z-index: 1; z-index: 1;
transition: all 0.5s ease;
}
.quick-actions-sidebar {
width: 0;
overflow: hidden;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.5);
transition: all 0.5s ease;
border-right: 1px solid rgba(255, 255, 255, 0.3);
}
.chat-container.sidebar-active .quick-actions-sidebar {
width: 220px;
padding: 1.5rem 1rem;
}
.quick-actions-sidebar h3 {
margin-top: 0;
font-weight: 600;
font-size: 1.1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #ddd;
margin-bottom: 1rem;
}
.quick-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.quick-action {
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid transparent;
color: var(--text-dark);
padding: 0.6rem 1.1rem;
border-radius: 12px;
cursor: pointer;
font-size: 0.85rem;
font-weight: 500;
transition: all 0.3s ease;
box-shadow: 0 1px 4px rgba(0,0,0,0.05);
text-align: left;
width: 100%;
}
.quick-action:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
background: white;
} }
.chat-main { .chat-main {
@ -112,36 +162,16 @@
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
} }
.quick-actions-container { .initial-quick-actions {
padding: 1rem 1.5rem 0.5rem; padding: 1rem 1.5rem 0.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.3); border-top: 1px solid rgba(255, 255, 255, 0.3);
flex-shrink: 0; flex-shrink: 0;
} }
.quick-actions { .initial-quick-actions .quick-actions {
display: flex; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.75rem; justify-content: flex-start;
justify-content: flex-start;
}
.quick-action {
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid transparent;
color: var(--text-dark);
padding: 0.6rem 1.1rem;
border-radius: 16px;
cursor: pointer;
font-size: 0.85rem;
font-weight: 500;
transition: all 0.3s ease;
box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.quick-action:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
background: white;
} }
.chat-input-container { .chat-input-container {
@ -211,6 +241,12 @@
</div> </div>
<div class="chat-container" id="chat-container"> <div class="chat-container" id="chat-container">
<div class="quick-actions-sidebar" id="quick-actions-sidebar">
<h3>Quick Actions</h3>
<div class="quick-actions" id="sidebar-quick-actions">
<!-- Quick actions will be moved here -->
</div>
</div>
<div class="chat-main"> <div class="chat-main">
<div class="chat-header"> <div class="chat-header">
Marketplace Business Assistant Marketplace Business Assistant
@ -220,14 +256,14 @@
Hello! I'm your Marketplace Assistant. How can I help you today? You can select one of the quick actions below or upload a file to analyze. Hello! I'm your Marketplace Assistant. How can I help you today? You can select one of the quick actions below or upload a file to analyze.
</div> </div>
</div> </div>
<div class="quick-actions-container"> <div class="initial-quick-actions" id="initial-quick-actions">
<div class="quick-actions" id="quick-actions"> <div class="quick-actions">
<button class="quick-action" data-task="summarize_feedback_weekly">Summarize feedback</button> <button class="quick-action" data-task="summarize_feedback_weekly">Summarize feedback</button>
<button class="quick-action" data-task="analyze_complaints">Analyze complaints</button> <button class="quick-action" data-task="analyze_complaints">Analyze complaints</button>
<button class="quick-action" data-task="generate_seller_dashboard">Generate seller dashboard</button> <button class="quick-action" data-task="generate_seller_dashboard">Generate seller dashboard</button>
<button class="quick-action" data-task="summarize_refunds">Summarize refunds</button> <button class="quick-action" data-task="summarize_refunds">Summarize refunds</button>
<button class="quick-action" data-task="draft_response_templates">Draft response templates</button> <button class="quick-action" data-task="draft_response_templates">Draft response templates</button>
<button class="quick-action" data-task="generate_sales_chart">Generate sales chart</button> <button class="quick-action" data-task="generate_sales_chart">Generate sales report chart</button>
</div> </div>
</div> </div>
<div class="chat-input-container"> <div class="chat-input-container">
@ -246,11 +282,14 @@
</div> </div>
<script> <script>
const chatContainer = document.getElementById('chat-container');
const chatMessages = document.getElementById('chat-messages'); const chatMessages = document.getElementById('chat-messages');
const userInput = document.getElementById('user-input'); const userInput = document.getElementById('user-input');
const sendButton = document.getElementById('send-button'); const sendButton = document.getElementById('send-button');
const quickActionsContainer = document.getElementById('quick-actions'); const initialQuickActions = document.getElementById('initial-quick-actions');
const sidebarQuickActions = document.getElementById('sidebar-quick-actions');
const fileInput = document.getElementById('file-input'); const fileInput = document.getElementById('file-input');
let firstInteraction = false;
const assistantResponses = { const assistantResponses = {
summarize_feedback_weekly: "This week’s customer feedback summary: Top 5 issues are 1. Late deliveries (23%), 2. Incorrect item received (15%), 3. Product not as described (12%), 4. Difficulty applying discounts (8%), 5. Slow seller response time (7%).", summarize_feedback_weekly: "This week’s customer feedback summary: Top 5 issues are 1. Late deliveries (23%), 2. Incorrect item received (15%), 3. Product not as described (12%), 4. Difficulty applying discounts (8%), 5. Slow seller response time (7%).",
@ -266,24 +305,52 @@
taskMap[button.textContent] = button.dataset.task; taskMap[button.textContent] = button.dataset.task;
}); });
function renderChart() { function activateSidebar() {
const chartCanvas = document.getElementById('salesChart'); if (firstInteraction) return;
if (!chartCanvas) return; firstInteraction = true;
const ctx = chartCanvas.getContext('2d');
new Chart(ctx, { chatContainer.classList.add('sidebar-active');
type: 'bar',
data: { const actions = initialQuickActions.querySelectorAll('.quick-action');
labels: ['January', 'February', 'March', 'April', 'May', 'June'], actions.forEach(action => {
datasets: [{ sidebarQuickActions.appendChild(action.cloneNode(true));
label: 'Sales',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: { scales: { y: { beginAtZero: true } } }
}); });
initialQuickActions.style.display = 'none';
// Re-bind events for the new sidebar actions
sidebarQuickActions.addEventListener('click', handleQuickActionClick);
}
function renderChart() {
// Use a MutationObserver to wait for the canvas to be added to the DOM
const observer = new MutationObserver((mutationsList, observer) => {
for(const mutation of mutationsList) {
if (mutation.type === 'childList') {
const chartCanvas = document.getElementById('salesChart');
if (chartCanvas) {
const ctx = chartCanvas.getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [{
label: 'Sales',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: { scales: { y: { beginAtZero: true } } }
});
observer.disconnect(); // Stop observing once the chart is rendered
return;
}
}
}
});
observer.observe(chatMessages, { childList: true, subtree: true });
} }
function addMessage(text, sender) { function addMessage(text, sender) {
@ -304,22 +371,32 @@
const trimmedText = text.trim(); const trimmedText = text.trim();
if (!trimmedText) return; if (!trimmedText) return;
activateSidebar();
addMessage(trimmedText, 'user'); addMessage(trimmedText, 'user');
userInput.value = ''; userInput.value = '';
const task = taskMap[trimmedText]; const task = taskMap[trimmedText] || Object.keys(taskMap).find(key => key.includes(trimmedText));
setTimeout(() => { setTimeout(() => {
const response = assistantResponses[task] || "I'm a demo assistant. My capabilities are limited to the quick actions for now. Please select one of the options or upload a file."; const response = assistantResponses[task] || "I'm a demo assistant. My capabilities are limited to the quick actions for now. Please select one of the options or upload a file.";
addMessage(response, 'assistant');
if (task === 'generate_sales_chart') { if (task === 'generate_sales_chart') {
setTimeout(renderChart, 10); renderChart();
} }
addMessage(response, 'assistant');
}, 1200); }, 1200);
} }
function handleQuickActionClick(event) {
if (event.target.classList.contains('quick-action')) {
processMessage(event.target.textContent);
}
}
function analyzeFile(file) { function analyzeFile(file) {
activateSidebar();
const reader = new FileReader(); const reader = new FileReader();
reader.onload = (e) => { reader.onload = (e) => {
const content = e.target.result; const content = e.target.result;
@ -347,11 +424,7 @@
} }
}); });
quickActionsContainer.addEventListener('click', (event) => { initialQuickActions.addEventListener('click', handleQuickActionClick);
if (event.target.classList.contains('quick-action')) {
processMessage(event.target.textContent);
}
});
sendButton.addEventListener('click', () => processMessage(userInput.value)); sendButton.addEventListener('click', () => processMessage(userInput.value));
userInput.addEventListener('keypress', (event) => { userInput.addEventListener('keypress', (event) => {