v4
This commit is contained in:
Flatlogic Bot
parent
94b10ba1f5
commit
85145488b5
187
index.php
187
index.php
@ -54,7 +54,6 @@
|
||||
height: 90vh;
|
||||
max-height: 800px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--card-bg);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 24px;
|
||||
@ -62,6 +61,57 @@
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
overflow: hidden;
|
||||
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 {
|
||||
@ -111,37 +161,17 @@
|
||||
align-self: flex-end;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.quick-actions-container {
|
||||
|
||||
.initial-quick-actions {
|
||||
padding: 1rem 1.5rem 0.5rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.3);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
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;
|
||||
.initial-quick-actions .quick-actions {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.chat-input-container {
|
||||
@ -211,6 +241,12 @@
|
||||
</div>
|
||||
|
||||
<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-header">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<div class="quick-actions-container">
|
||||
<div class="quick-actions" id="quick-actions">
|
||||
<div class="initial-quick-actions" id="initial-quick-actions">
|
||||
<div class="quick-actions">
|
||||
<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="generate_seller_dashboard">Generate seller dashboard</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="generate_sales_chart">Generate sales chart</button>
|
||||
<button class="quick-action" data-task="generate_sales_chart">Generate sales report chart</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-input-container">
|
||||
@ -246,11 +282,14 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const chatContainer = document.getElementById('chat-container');
|
||||
const chatMessages = document.getElementById('chat-messages');
|
||||
const userInput = document.getElementById('user-input');
|
||||
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');
|
||||
let firstInteraction = false;
|
||||
|
||||
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%).",
|
||||
@ -266,24 +305,52 @@
|
||||
taskMap[button.textContent] = button.dataset.task;
|
||||
});
|
||||
|
||||
function renderChart() {
|
||||
const chartCanvas = document.getElementById('salesChart');
|
||||
if (!chartCanvas) return;
|
||||
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 } } }
|
||||
function activateSidebar() {
|
||||
if (firstInteraction) return;
|
||||
firstInteraction = true;
|
||||
|
||||
chatContainer.classList.add('sidebar-active');
|
||||
|
||||
const actions = initialQuickActions.querySelectorAll('.quick-action');
|
||||
actions.forEach(action => {
|
||||
sidebarQuickActions.appendChild(action.cloneNode(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) {
|
||||
@ -304,22 +371,32 @@
|
||||
const trimmedText = text.trim();
|
||||
if (!trimmedText) return;
|
||||
|
||||
activateSidebar();
|
||||
addMessage(trimmedText, 'user');
|
||||
userInput.value = '';
|
||||
|
||||
const task = taskMap[trimmedText];
|
||||
|
||||
const task = taskMap[trimmedText] || Object.keys(taskMap).find(key => key.includes(trimmedText));
|
||||
|
||||
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.";
|
||||
addMessage(response, 'assistant');
|
||||
|
||||
if (task === 'generate_sales_chart') {
|
||||
setTimeout(renderChart, 10);
|
||||
renderChart();
|
||||
}
|
||||
|
||||
addMessage(response, 'assistant');
|
||||
|
||||
}, 1200);
|
||||
}
|
||||
|
||||
function handleQuickActionClick(event) {
|
||||
if (event.target.classList.contains('quick-action')) {
|
||||
processMessage(event.target.textContent);
|
||||
}
|
||||
}
|
||||
|
||||
function analyzeFile(file) {
|
||||
activateSidebar();
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const content = e.target.result;
|
||||
@ -347,11 +424,7 @@
|
||||
}
|
||||
});
|
||||
|
||||
quickActionsContainer.addEventListener('click', (event) => {
|
||||
if (event.target.classList.contains('quick-action')) {
|
||||
processMessage(event.target.textContent);
|
||||
}
|
||||
});
|
||||
initialQuickActions.addEventListener('click', handleQuickActionClick);
|
||||
|
||||
sendButton.addEventListener('click', () => processMessage(userInput.value));
|
||||
userInput.addEventListener('keypress', (event) => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user