|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Enhanced Super Agent UI</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #6e8efb, #a777e3); |
|
|
} |
|
|
.agent-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
.fade-in { |
|
|
animation: fadeIn 0.5s ease-in-out; |
|
|
} |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; } |
|
|
to { opacity: 1; } |
|
|
} |
|
|
.typing { |
|
|
border-right: 2px solid; |
|
|
animation: typing 1s steps(40, end), blink-caret .75s step-end infinite; |
|
|
} |
|
|
@keyframes typing { |
|
|
from { width: 0 } |
|
|
to { width: 100% } |
|
|
} |
|
|
@keyframes blink-caret { |
|
|
from, to { border-color: transparent } |
|
|
50% { border-color: #4f46e5; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen"> |
|
|
|
|
|
<header class="gradient-bg text-white shadow-lg"> |
|
|
<div class="container mx-auto px-4 py-6"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<i class="fas fa-robot text-3xl"></i> |
|
|
<h1 class="text-2xl font-bold">Enhanced Super Agent</h1> |
|
|
<span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded-full">v0.2-dev</span> |
|
|
</div> |
|
|
<div class="flex space-x-4"> |
|
|
<button class="bg-white/20 hover:bg-white/30 px-4 py-2 rounded-lg flex items-center space-x-2 transition"> |
|
|
<i class="fas fa-cog"></i> |
|
|
<span>Settings</span> |
|
|
</button> |
|
|
<button class="bg-white/20 hover:bg-white/30 px-4 py-2 rounded-lg flex items-center space-x-2 transition"> |
|
|
<i class="fas fa-question-circle"></i> |
|
|
<span>Help</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="container mx-auto px-4 py-8"> |
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="lg:col-span-1 space-y-6"> |
|
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
|
<h2 class="text-xl font-semibold mb-4 text-gray-800">Available Agents</h2> |
|
|
<div class="space-y-4"> |
|
|
|
|
|
<div class="agent-card bg-white border border-gray-200 rounded-lg p-4 transition cursor-pointer hover:border-indigo-300"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="bg-indigo-100 p-2 rounded-full"> |
|
|
<i class="fas fa-tasks text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Planner Agent</h3> |
|
|
<p class="text-sm text-gray-500">Creates detailed plans and itineraries</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="agent-card bg-white border border-gray-200 rounded-lg p-4 transition cursor-pointer hover:border-indigo-300"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="bg-blue-100 p-2 rounded-full"> |
|
|
<i class="fas fa-phone-alt text-blue-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Phone Agent</h3> |
|
|
<p class="text-sm text-gray-500">Makes calls and handles reservations</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="agent-card bg-white border border-gray-200 rounded-lg p-4 transition cursor-pointer hover:border-indigo-300"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="bg-purple-100 p-2 rounded-full"> |
|
|
<i class="fas fa-video text-purple-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Video Agent</h3> |
|
|
<p class="text-sm text-gray-500">Generates video content</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="agent-card bg-white border border-gray-200 rounded-lg p-4 transition cursor-pointer hover:border-indigo-300"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="bg-green-100 p-2 rounded-full"> |
|
|
<i class="fas fa-search text-green-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Research Agent</h3> |
|
|
<p class="text-sm text-gray-500">Performs deep research on topics</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="agent-card bg-white border border-gray-200 rounded-lg p-4 transition cursor-pointer hover:border-indigo-300"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="bg-yellow-100 p-2 rounded-full"> |
|
|
<i class="fas fa-chart-bar text-yellow-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Data Analysis</h3> |
|
|
<p class="text-sm text-gray-500">Analyzes datasets and statistics</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="agent-card bg-white border border-gray-200 rounded-lg p-4 transition cursor-pointer hover:border-indigo-300"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="bg-red-100 p-2 rounded-full"> |
|
|
<i class="fas fa-globe text-red-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Web Agent</h3> |
|
|
<p class="text-sm text-gray-500">Creates web content</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="agent-card bg-white border border-gray-200 rounded-lg p-4 transition cursor-pointer hover:border-indigo-300"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="bg-pink-100 p-2 rounded-full"> |
|
|
<i class="fas fa-file-alt text-pink-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Content Synthesis</h3> |
|
|
<p class="text-sm text-gray-500">Creates summaries and reports</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
|
<h2 class="text-xl font-semibold mb-4 text-gray-800">Quick Actions</h2> |
|
|
<div class="grid grid-cols-2 gap-3"> |
|
|
<button class="bg-indigo-50 hover:bg-indigo-100 text-indigo-700 py-2 px-3 rounded-lg text-sm font-medium transition flex items-center space-x-2"> |
|
|
<i class="fas fa-plane"></i> |
|
|
<span>Plan Trip</span> |
|
|
</button> |
|
|
<button class="bg-blue-50 hover:bg-blue-100 text-blue-700 py-2 px-3 rounded-lg text-sm font-medium transition flex items-center space-x-2"> |
|
|
<i class="fas fa-book"></i> |
|
|
<span>Research</span> |
|
|
</button> |
|
|
<button class="bg-purple-50 hover:bg-purple-100 text-purple-700 py-2 px-3 rounded-lg text-sm font-medium transition flex items-center space-x-2"> |
|
|
<i class="fas fa-video"></i> |
|
|
<span>Create Video</span> |
|
|
</button> |
|
|
<button class="bg-green-50 hover:bg-green-100 text-green-700 py-2 px-3 rounded-lg text-sm font-medium transition flex items-center space-x-2"> |
|
|
<i class="fas fa-file-csv"></i> |
|
|
<span>Analyze Data</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:col-span-2 space-y-6"> |
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden"> |
|
|
<div class="border-b border-gray-200 px-6 py-4"> |
|
|
<h2 class="text-xl font-semibold text-gray-800">Agent Console</h2> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="h-96 overflow-y-auto p-6 space-y-4" id="chat-messages"> |
|
|
<div class="flex items-start space-x-3"> |
|
|
<div class="bg-indigo-100 p-2 rounded-full"> |
|
|
<i class="fas fa-robot text-indigo-600"></i> |
|
|
</div> |
|
|
<div class="bg-gray-50 rounded-lg p-3 max-w-3xl"> |
|
|
<p class="text-gray-800">Hello! I'm your Enhanced Super Agent. How can I assist you today?</p> |
|
|
<p class="text-xs text-gray-500 mt-1">System initialized with safety protocols active</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start space-x-3"> |
|
|
<div class="bg-gray-100 p-2 rounded-full"> |
|
|
<i class="fas fa-user text-gray-600"></i> |
|
|
</div> |
|
|
<div class="bg-blue-50 rounded-lg p-3 max-w-3xl"> |
|
|
<p class="text-gray-800">Plan a trip to San Diego for April 24-29, focusing on seafood and cultural sites. Then book Peohe's for dinner on the 26th for 4 people (one shellfish allergy, one vegetarian), window table preferred.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start space-x-3"> |
|
|
<div class="bg-indigo-100 p-2 rounded-full"> |
|
|
<i class="fas fa-robot text-indigo-600"></i> |
|
|
</div> |
|
|
<div class="bg-gray-50 rounded-lg p-3 max-w-3xl"> |
|
|
<p class="text-gray-800">[PlannerAgent] Creating itinerary for 5-day trip to San Diego...</p> |
|
|
<p class="text-gray-800 mt-2">[PhoneAgent] Calling Peohe's restaurant for reservation...</p> |
|
|
<div class="mt-3 bg-green-50 border border-green-100 rounded-lg p-3"> |
|
|
<p class="text-green-800 font-medium">Success! Your trip is planned and reservation is confirmed.</p> |
|
|
<div class="mt-2 text-sm text-gray-700"> |
|
|
<p>• 5-day itinerary created with seafood and cultural focus</p> |
|
|
<p>• Dinner reservation at Peohe's on April 26th for 4 people</p> |
|
|
<p>• Special requests noted: shellfish allergy & vegetarian</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border-t border-gray-200 p-4 bg-gray-50"> |
|
|
<div class="flex space-x-3"> |
|
|
<div class="flex-grow relative"> |
|
|
<textarea id="user-input" class="w-full border border-gray-300 rounded-lg pl-4 pr-12 py-3 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" rows="2" placeholder="Type your request here..."></textarea> |
|
|
<div class="absolute right-3 bottom-3 flex space-x-2"> |
|
|
<button class="text-gray-400 hover:text-gray-600"> |
|
|
<i class="fas fa-paperclip"></i> |
|
|
</button> |
|
|
<button class="text-gray-400 hover:text-gray-600"> |
|
|
<i class="fas fa-microphone"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<button id="send-button" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-3 rounded-lg transition"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
|
<h2 class="text-xl font-semibold mb-4 text-gray-800">Agent Status</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div class="bg-gray-50 rounded-lg p-4"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<h3 class="font-medium text-gray-700">System Health</h3> |
|
|
<span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Active</span> |
|
|
</div> |
|
|
<div class="space-y-3"> |
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span class="text-gray-500">CPU Usage</span> |
|
|
<span class="font-medium">24%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-1.5"> |
|
|
<div class="bg-blue-600 h-1.5 rounded-full" style="width: 24%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span class="text-gray-500">Memory</span> |
|
|
<span class="font-medium">1.2GB/4GB</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-1.5"> |
|
|
<div class="bg-purple-600 h-1.5 rounded-full" style="width: 30%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 rounded-lg p-4"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<h3 class="font-medium text-gray-700">Recent Activity</h3> |
|
|
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full">3 tasks</span> |
|
|
</div> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="bg-green-100 p-1 rounded-full"> |
|
|
<i class="fas fa-check-circle text-green-600 text-sm"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm font-medium">Trip planning completed</p> |
|
|
<p class="text-xs text-gray-500">2 minutes ago</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="bg-green-100 p-1 rounded-full"> |
|
|
<i class="fas fa-check-circle text-green-600 text-sm"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm font-medium">Restaurant reservation</p> |
|
|
<p class="text-xs text-gray-500">5 minutes ago</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="bg-yellow-100 p-1 rounded-full"> |
|
|
<i class="fas fa-spinner text-yellow-600 text-sm animate-spin"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm font-medium">Processing request</p> |
|
|
<p class="text-xs text-gray-500">Just now</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-100 border-t border-gray-200 py-6 mt-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="flex items-center space-x-2 mb-4 md:mb-0"> |
|
|
<i class="fas fa-robot text-indigo-600"></i> |
|
|
<span class="font-medium">Enhanced Super Agent</span> |
|
|
</div> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-600 hover:text-indigo-600 transition">Privacy</a> |
|
|
<a href="#" class="text-gray-600 hover:text-indigo-600 transition">Terms</a> |
|
|
<a href="#" class="text-gray-600 hover:text-indigo-600 transition">Documentation</a> |
|
|
<a href="#" class="text-gray-600 hover:text-indigo-600 transition">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 text-center md:text-left text-sm text-gray-500"> |
|
|
<p>© 2023 Enhanced Super Agent. All rights reserved. Version 0.2-dev</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const sendButton = document.getElementById('send-button'); |
|
|
const userInput = document.getElementById('user-input'); |
|
|
const chatMessages = document.getElementById('chat-messages'); |
|
|
|
|
|
// Example requests for demo purposes |
|
|
const exampleRequests = [ |
|
|
"Plan a trip to San Diego for April 24-29, focusing on seafood and cultural sites", |
|
|
"Create slides about the latest developments in fusion energy", |
|
|
"Summarize the key points about the Genspark Super Agent", |
|
|
"Analyze the sales data in 'quarterly_report.xlsx' and give me summary statistics" |
|
|
]; |
|
|
|
|
|
// Add typing indicator |
|
|
function showTypingIndicator() { |
|
|
const typingDiv = document.createElement('div'); |
|
|
typingDiv.className = 'flex items-start space-x-3'; |
|
|
typingDiv.innerHTML = ` |
|
|
<div class="bg-indigo-100 p-2 rounded-full"> |
|
|
<i class="fas fa-robot text-indigo-600"></i> |
|
|
</div> |
|
|
<div class="bg-gray-50 rounded-lg p-3 max-w-3xl"> |
|
|
<div class="typing w-8 h-4"></div> |
|
|
</div> |
|
|
`; |
|
|
chatMessages.appendChild(typingDiv); |
|
|
chatMessages.scrollTop = chatMessages.scrollHeight; |
|
|
return typingDiv; |
|
|
} |
|
|
|
|
|
// Remove typing indicator |
|
|
function removeTypingIndicator(typingDiv) { |
|
|
if (typingDiv && typingDiv.parentNode) { |
|
|
typingDiv.parentNode.removeChild(typingDiv); |
|
|
} |
|
|
} |
|
|
|
|
|
// Add user message to chat |
|
|
function addUserMessage(message) { |
|
|
const messageDiv = document.createElement('div'); |
|
|
messageDiv.className = 'flex items-start space-x-3 fade-in'; |
|
|
messageDiv.innerHTML = ` |
|
|
<div class="bg-gray-100 p-2 rounded-full"> |
|
|
<i class="fas fa-user text-gray-600"></i> |
|
|
</div> |
|
|
<div class="bg-blue-50 rounded-lg p-3 max-w-3xl"> |
|
|
<p class="text-gray-800">${message}</p> |
|
|
</div> |
|
|
`; |
|
|
chatMessages.appendChild(messageDiv); |
|
|
chatMessages.scrollTop = chatMessages.scrollHeight; |
|
|
} |
|
|
|
|
|
// Add agent response to chat |
|
|
function addAgentResponse(response) { |
|
|
const responseDiv = document.createElement('div'); |
|
|
responseDiv.className = 'flex items-start space-x-3 fade-in'; |
|
|
responseDiv.innerHTML = ` |
|
|
<div class="bg-indigo-100 p-2 rounded-full"> |
|
|
<i class="fas fa-robot text-indigo-600"></i> |
|
|
</div> |
|
|
<div class="bg-gray-50 rounded-lg p-3 max-w-3xl"> |
|
|
${response} |
|
|
</div> |
|
|
`; |
|
|
chatMessages.appendChild(responseDiv); |
|
|
chatMessages.scrollTop = chatMessages.scrollHeight; |
|
|
} |
|
|
|
|
|
// Generate a random agent response (for demo) |
|
|
function generateAgentResponse(userMessage) { |
|
|
// Simple response logic for demo |
|
|
if (userMessage.toLowerCase().includes('trip') || userMessage.toLowerCase().includes('san diego')) { |
|
|
return ` |
|
|
<p class="text-gray-800">[PlannerAgent] Creating itinerary for trip to San Diego...</p> |
|
|
<p class="text-gray-800 mt-2">[PhoneAgent] Making restaurant reservations...</p> |
|
|
<div class="mt-3 bg-green-50 border border-green-100 rounded-lg p-3"> |
|
|
<p class="text-green-800 font-medium">Success! Your trip is planned and reservations are confirmed.</p> |
|
|
<div class="mt-2 text-sm text-gray-700"> |
|
|
<p>• 5-day itinerary created with seafood and cultural focus</p> |
|
|
<p>• Dinner reservations confirmed for your requested dates</p> |
|
|
<p>• Special dietary needs noted for all reservations</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
} else if (userMessage.toLowerCase().includes('slides') || userMessage.toLowerCase().includes('fusion')) { |
|
|
return ` |
|
|
<p class="text-gray-800">[ResearchAgent] Researching latest developments in fusion energy...</p> |
|
|
<p class="text-gray-800 mt-2">[ContentSynthesis] Creating slide deck outline...</p> |
|
|
<div class="mt-3 bg-green-50 border border-green-100 rounded-lg p-3"> |
|
|
<p class="text-green-800 font-medium">Research complete! Here's your slide deck outline:</p> |
|
|
<div class="mt-2 text-sm text-gray-700"> |
|
|
<p>1. Title Slide: Fusion Energy Breakthroughs</p> |
|
|
<p>2. Recent Developments in Tokamak Designs</p> |
|
|
<p>3. Advances in Laser Inertial Confinement</p> |
|
|
<p>4. Commercialization Roadmap</p> |
|
|
<p>5. Conclusion & Future Outlook</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
} else if (userMessage.toLowerCase().includes('summarize') || userMessage.toLowerCase().includes('genspark')) { |
|
|
return ` |
|
|
<p class="text-gray-800">[ResearchAgent] Gathering information about Genspark Super Agent...</p> |
|
|
<div class="mt-3 bg-green-50 border border-green-100 rounded-lg p-3"> |
|
|
<p class="text-green-800 font-medium">Summary of Genspark Super Agent:</p> |
|
|
<div class="mt-2 text-sm text-gray-700"> |
|
|
<p>• Advanced AI system with multi-agent architecture</p> |
|
|
<p>• Capabilities include planning, research, content creation</p> |
|
|
<p>• Version 0.2-dev with enhanced synthesis features</p> |
|
|
<p>• Safety protocols and transparency mechanisms built-in</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
} else if (userMessage.toLowerCase().includes('analyze') || userMessage.toLowerCase().includes('data')) { |
|
|
return ` |
|
|
<p class="text-gray-800">[DataAnalysisAgent] Loading 'quarterly_report.xlsx'...</p> |
|
|
<p class="text-gray-800 mt-2">Analyzing sales data patterns...</p> |
|
|
<div class="mt-3 bg-green-50 border border-green-100 rounded-lg p-3"> |
|
|
<p class="text-green-800 font-medium">Analysis Results:</p> |
|
|
<div class="mt-2 text-sm text-gray-700"> |
|
|
<p>• Total Revenue: $1.2M (Q3 2023)</p> |
|
|
<p>• Top Performing Product: Model X-200 (32% of revenue)</p> |
|
|
<p>• Growth Rate: 12% quarter-over-quarter</p> |
|
|
<p>• Customer Retention: 78% (up from 72% last quarter)</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
} else { |
|
|
return ` |
|
|
<p class="text-gray-800">I've received your request. Let me process that for you...</p> |
|
|
<div class="mt-3 bg-blue-50 border border-blue-100 rounded-lg p-3"> |
|
|
<p class="text-blue-800 font-medium">Request received</p> |
|
|
<p class="mt-1 text-sm text-gray-700">The appropriate agents are being activated to handle your request.</p> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
} |
|
|
|
|
|
// Handle send button click |
|
|
sendButton.addEventListener('click', function() { |
|
|
const message = userInput.value.trim(); |
|
|
if (message) { |
|
|
addUserMessage(message); |
|
|
userInput.value = ''; |
|
|
|
|
|
// Show typing indicator |
|
|
const typingDiv = showTypingIndicator(); |
|
|
|
|
|
// Simulate processing delay |
|
|
setTimeout(() => { |
|
|
removeTypingIndicator(typingDiv); |
|
|
const response = generateAgentResponse(message); |
|
|
addAgentResponse(response); |
|
|
}, 1500 + Math.random() * 2000); |
|
|
} |
|
|
}); |
|
|
|
|
|
// Handle Enter key press |
|
|
userInput.addEventListener('keypress', function(e) { |
|
|
if (e.key === 'Enter' && !e.shiftKey) { |
|
|
e.preventDefault(); |
|
|
sendButton.click(); |
|
|
} |
|
|
}); |
|
|
|
|
|
// Add example requests to input placeholder |
|
|
let currentExample = 0; |
|
|
function rotateExample() { |
|
|
userInput.placeholder = `Try: ${exampleRequests[currentExample]}`; |
|
|
currentExample = (currentExample + 1) % exampleRequests.length; |
|
|
} |
|
|
|
|
|
rotateExample(); |
|
|
setInterval(rotateExample, 3000); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=3rd3y3/w9s3r" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
