| |
| |
| |
| const AVAILABLE_TOOLS = ["Outlook", "Stripe", "Twilio", "OpenAI", "Gmail", "Google Calendar"]; |
|
|
| let currentActivePrompt = ""; |
| let fetchedAgentsArray = []; |
|
|
| function openMyModal(modalId) { |
| const modal = document.getElementById(modalId); |
| if(modal) { modal.classList.remove('hidden'); modal.classList.add('flex'); } |
| } |
|
|
| function closeMyModal(modalId) { |
| const modal = document.getElementById(modalId); |
| if(modal) { modal.classList.remove('flex'); modal.classList.add('hidden'); } |
| |
| setTimeout(() => { |
| document.getElementById('modalBox').className = "bg-white w-full max-w-[450px] rounded-3xl p-6 shadow-2xl relative border border-slate-100 transition-all duration-500 ease-in-out text-slate-800"; |
| document.getElementById('modalInitialState').classList.remove('hidden'); |
| document.getElementById('modalLoadingState').classList.add('hidden'); |
| document.getElementById('modalResultState').classList.add('hidden'); |
| }, 400); |
| } |
|
|
| |
| |
| |
| function generateSmartLocalAIResponse(promptText) { |
| const query = promptText.toLowerCase(); |
| |
| let detectedCategory = "Custom Business"; |
| let baseData = { |
| starterName: "Operational Assistant", |
| starterRole: "Automated processing agent built specifically to handle workflow queues. It monitors input parameters, processes standard data structures, and updates your main dashboard logs instantly.", |
| proName: "Professional Automator", |
| proRole: "Advanced operations manager configured to streamline your business pipeline. It automatically executes conditional multi-step routines, tracks customer metrics, filters entries, and generates status reports.", |
| entName: "Autonomous Expert Suite", |
| entRole: "Full-scale enterprise system designed to completely execute the entire lifecycle of your custom operations. It functions with self-healing data loops, connects to global databases, triggers multi-channel alerts, and scales workflows without manual supervision.", |
| t1: ["OpenAI"], t2: ["OpenAI", "Gmail"], t3: ["OpenAI", "Gmail", "Stripe"], |
| p1: 185, p2: 545, p3: 1295 |
| }; |
|
|
| if (query.includes("lead") || query.includes("scraper") || query.includes("maker") || query.includes("extract")) { |
| detectedCategory = "Lead Generation"; |
| baseData.starterName = "B2B Lead Scraper"; |
| baseData.starterRole = "High-efficiency extraction agent that automatically crawls digital directories to gather accurate names, verified corporate emails, and telephone records matching your exact target profile."; |
| |
| baseData.proName = "Targeted Lead Optimizer"; |
| baseData.proRole = "Advanced outbound engine that scans multiple networking websites, validates data in real-time, removes duplicate entries, and populates your team spreadsheets with clean b2b prospects."; |
| |
| baseData.entName = "Autonomous Pipeline Fleet"; |
| baseData.entRole = "Comprehensive lead command center that monitors incoming signals, auto-enriches cold profiles, cross-checks active email deliverability scores, and immediately updates your internal CRM hooks to keep pipelines loaded."; |
| |
| baseData.t1 = ["OpenAI", "Gmail"]; baseData.t2 = ["OpenAI", "Gmail", "Outlook"]; baseData.t3 = ["OpenAI", "Gmail", "Outlook", "Twilio"]; |
| baseData.p1 = 249; baseData.p2 = 689; baseData.p3 = 1580; |
| } |
| else if (query.includes("outreach") || query.includes("marketing") || query.includes("mail") || query.includes("campaign")) { |
| detectedCategory = "Cold Outreach"; |
| baseData.starterName = "Campaign Courier"; |
| baseData.starterRole = "Smart delivery bot that automates initial message sequencing, manages contact schedules, and routes cold communications systematically without triggering spam folders."; |
| |
| baseData.proName = "Outreach Relationship Manager"; |
| baseData.proRole = "Dedicated outreach assistant that dynamic-injects user context into communication scripts, keeps track of open-rates, filters automatic out-of-office text replies, and catalogs high-interest responses."; |
| |
| baseData.entName = "Conversational Acquisition Fleet"; |
| baseData.entRole = "Autonomous marketing architecture running continuous follow-up logic. It detects positive intent, books direct discovery conversations via smart links, updates lead scoring, and syncs data to company dashboards."; |
| |
| baseData.t1 = ["OpenAI", "Outlook"]; baseData.t2 = ["OpenAI", "Outlook", "Gmail"]; baseData.t3 = ["OpenAI", "Outlook", "Gmail", "Twilio"]; |
| baseData.p1 = 299; baseData.p2 = 749; baseData.p3 = 1650; |
| } |
| else if (query.includes("dropship") || query.includes("store") || query.includes("shop") || query.includes("product")) { |
| detectedCategory = "E-Commerce Store"; |
| baseData.starterName = "Catalog Sync Agent"; |
| baseData.starterRole = "Automated retail bot that monitors digital catalog listings, updates local stock quantities in real-time, and flags sudden wholesale price changes instantly to protect margins."; |
| |
| baseData.proName = "Order Processing Specialist"; |
| baseData.proRole = "Smart checkout companion that verifies incoming purchase requests, extracts shipping destination text, populates courier details, and pushes accurate notifications back to clients."; |
| |
| baseData.entName = "Fulfillment Matrix Fleet"; |
| baseData.entRole = "Autonomous commercial enterprise structure handling cart abandonment tracking, secure stripe checkout sequences, customized invoice deliveries, and automated international shipping allocation loops."; |
| |
| baseData.t1 = ["OpenAI", "Stripe"]; baseData.t2 = ["OpenAI", "Stripe", "Gmail"]; baseData.t3 = ["OpenAI", "Stripe", "Gmail", "Twilio"]; |
| baseData.p1 = 349; baseData.p2 = 899; baseData.p3 = 1950; |
| } |
| else if (query.includes("schedule") || query.includes("calendar") || query.includes("meet") || query.includes("booking")) { |
| detectedCategory = "AI Scheduler"; |
| baseData.starterName = "Smart Booking Clerk"; |
| baseData.starterRole = "Digital slot coordinator that scans configured calendar windows, blocks incoming public meeting requests, and avoids timing overlaps automatically."; |
| |
| baseData.proName = "Dynamic Meeting Coordinator"; |
| baseData.proRole = "Advanced schedule manager providing automatic timezone shifts, broadcasting personalized calendar confirmations, and distributing briefing notes prior to team sessions."; |
| |
| baseData.entName = "Multi-Zone Scheduling Fleet"; |
| baseData.entRole = "Enterprise logistics manager handling high-volume client intake pipelines, processing payment-backed session checkouts, updating centralized databases, and firing operational sms reminders via api."; |
| |
| baseData.t1 = ["OpenAI", "Google Calendar"]; baseData.t2 = ["OpenAI", "Google Calendar", "Outlook"]; baseData.t3 = ["OpenAI", "Google Calendar", "Outlook", "Twilio"]; |
| baseData.p1 = 199; baseData.p2 = 599; baseData.p3 = 1390; |
| } |
| else if (query.includes("wingman") || query.includes("assistant") || query.includes("helper")) { |
| detectedCategory = "Business Wingman"; |
| baseData.starterName = "Core Wingman Assistant"; |
| baseData.starterRole = "Personal organizational assistant handling daily notification filtering, action item tracking, and organizing notes to keep you focused on operational milestones."; |
| |
| baseData.proName = "Strategic Business Co-Pilot"; |
| baseData.proRole = "Proactive business wingman that summarizes lengthly text reports, suggests data-driven responses for conversations, and organizes your critical project goals systematically."; |
| |
| baseData.entName = "Autonomous Executive Suite"; |
| baseData.entRole = "The ultimate operations wingman running automated background checks across your business stack. It synchronizes calendars, drafts executive proposals, triggers custom task sequences, and maintains workflows."; |
| |
| baseData.t1 = ["OpenAI"]; baseData.t2 = ["OpenAI", "Gmail"]; baseData.t3 = ["OpenAI", "Gmail", "Google Calendar", "Outlook"]; |
| baseData.p1 = 220; baseData.p2 = 640; baseData.p3 = 1450; |
| } |
|
|
| const seed = Math.floor(Math.random() * 30); |
|
|
| return [ |
| { |
| "id": Date.now(), |
| "name": baseData.starterName, |
| "role": baseData.starterRole, |
| "tools": baseData.t1, |
| "price": "$" + (baseData.p1 + seed), |
| "complexity": "Normal" |
| }, |
| { |
| "id": Date.now() + 1, |
| "name": baseData.proName, |
| "role": baseData.proRole, |
| "tools": baseData.t2, |
| "price": "$" + (baseData.p2 + (seed * 2)), |
| "complexity": "Medium" |
| }, |
| { |
| "id": Date.now() + 2, |
| "name": baseData.entName, |
| "role": baseData.entRole, |
| "tools": baseData.t3, |
| "price": "$" + (baseData.p3 + (seed * 3)), |
| "complexity": "Hard" |
| } |
| ]; |
| } |
|
|
| |
| |
| |
| function handleSendAction() { |
| const userInput = document.getElementById('userInput'); |
| const text = userInput.value.trim(); |
| if (!text) return; |
|
|
| currentActivePrompt = text; |
| openMyModal('architectModal'); |
|
|
| userInput.value = ""; |
| const submitBtn = document.getElementById('submitBtn'); |
| if (submitBtn) { |
| submitBtn.disabled = true; |
| submitBtn.style.backgroundColor = '#f1f5f9'; |
| submitBtn.style.color = '#cbd5e1'; |
| submitBtn.style.cursor = 'not-allowed'; |
| } |
| } |
|
|
| async function processSystemArchitecture() { |
| const modalBox = document.getElementById('modalBox'); |
| const initialState = document.getElementById('modalInitialState'); |
| const loadingState = document.getElementById('modalLoadingState'); |
| const resultState = document.getElementById('modalResultState'); |
| const popupCardsGrid = document.getElementById('popupCardsGrid'); |
|
|
| if (!modalBox || !popupCardsGrid || !currentActivePrompt) return; |
|
|
| initialState.classList.add('hidden'); |
| loadingState.classList.remove('hidden'); |
|
|
| fetchedAgentsArray = generateSmartLocalAIResponse(currentActivePrompt); |
|
|
| setTimeout(() => { |
| loadingState.classList.add('hidden'); |
| modalBox.classList.remove('max-w-[450px]'); |
| modalBox.classList.add('max-w-[840px]'); |
| resultState.classList.remove('hidden'); |
|
|
| let cardsHTML = ""; |
| fetchedAgentsArray.forEach(agent => { |
| const toolsArr = agent.tools || ["OpenAI"]; |
| const badges = toolsArr.map(t => `<span class="bg-slate-100 text-slate-700 text-[9px] px-2 py-0.5 rounded font-bold border border-slate-200">${t}</span>`).join(' '); |
| |
| let compColor = "bg-emerald-50 text-emerald-700 border-emerald-200"; |
| if (agent.complexity === "Medium") compColor = "bg-amber-50 text-amber-700 border-amber-200"; |
| if (agent.complexity === "Hard") compColor = "bg-rose-50 text-rose-700 border-rose-200"; |
|
|
| cardsHTML += ` |
| <div class="bg-slate-50 border border-slate-200 rounded-2xl p-4 flex flex-col justify-between shadow-sm min-h-[220px]"> |
| <div> |
| <div class="flex items-center justify-between mb-2"> |
| <h4 class="font-black text-slate-800 text-[12px] truncate max-w-[190px]" title="${agent.name}">${agent.name}</h4> |
| <span class="${compColor} text-[8px] px-2 py-0.5 rounded border font-black uppercase">${agent.complexity || "Normal"}</span> |
| </div> |
| <p class="text-[11px] text-slate-500 leading-relaxed mb-4">${agent.role}</p> |
| </div> |
| <div> |
| <div class="flex flex-wrap gap-1 mb-3">${badges}</div> |
| <div class="flex items-center justify-between border-t border-slate-200/60 pt-2.5"> |
| <span class="text-sm font-black text-slate-900">${agent.price}</span> |
| <button onclick="handleHireAction(${agent.id})" class="bg-slate-950 text-white text-[9px] font-black px-3 py-1.5 rounded-xl hover:bg-slate-900 transition uppercase shadow-sm cursor-pointer">Hire Agent</button> |
| </div> |
| </div> |
| </div> |
| `; |
| }); |
|
|
| popupCardsGrid.innerHTML = cardsHTML; |
| currentActivePrompt = ""; |
| }, 800); |
| } |
|
|
| |
| |
| |
| function handleHireAction(agentId) { |
| const selectedAgent = fetchedAgentsArray.find(a => a.id === agentId); |
| if (!selectedAgent) return; |
|
|
| const isLoggedIn = localStorage.getItem('userIsLoggedIn'); |
|
|
| if (isLoggedIn === 'true' || isLoggedIn === true) { |
| let currentFleet = []; |
| try { |
| const existingFleet = localStorage.getItem('activeHiredAgentFleet'); |
| if (existingFleet) currentFleet = JSON.parse(existingFleet); |
| } catch(e) { currentFleet = []; } |
|
|
| currentFleet.push(selectedAgent); |
| localStorage.setItem('activeHiredAgentFleet', JSON.stringify(currentFleet)); |
| |
| renderHiredEmployeeState(); |
| closeMyModal('architectModal'); |
| } else { |
| localStorage.setItem('pendingHiredAgent', JSON.stringify(selectedAgent)); |
| window.location.href = 'auth.html'; |
| } |
| } |
|
|
| |
| |
| |
| function checkAndRenderUserState() { |
| const isLoggedIn = localStorage.getItem('userIsLoggedIn'); |
| const userDisplayName = localStorage.getItem('userDisplayName') || "User"; |
| |
| const guestAuthArea = document.getElementById('guestAuthArea'); |
| const userProfileArea = document.getElementById('userProfileArea'); |
| const profileLetterCircle = document.getElementById('profileLetterCircle'); |
| const promoBanner = document.getElementById('promoBanner'); |
|
|
| if (isLoggedIn === 'true' || isLoggedIn === true) { |
| if (guestAuthArea) guestAuthArea.classList.add('hidden'); |
| if (userProfileArea && profileLetterCircle) { |
| userProfileArea.classList.remove('hidden'); |
| userProfileArea.classList.add('flex'); |
| profileLetterCircle.innerText = userDisplayName.charAt(0); |
| } |
| if (promoBanner) promoBanner.classList.add('hidden'); |
|
|
| const pendingAgent = localStorage.getItem('pendingHiredAgent'); |
| if (pendingAgent) { |
| let currentFleet = []; |
| try { |
| const existingFleet = localStorage.getItem('activeHiredAgentFleet'); |
| if (existingFleet) currentFleet = JSON.parse(existingFleet); |
| } catch(e) { currentFleet = []; } |
|
|
| currentFleet.push(JSON.parse(pendingAgent)); |
| localStorage.setItem('activeHiredAgentFleet', JSON.stringify(currentFleet)); |
| localStorage.removeItem('pendingHiredAgent'); |
| } |
|
|
| renderHiredEmployeeState(); |
| } else { |
| if (guestAuthArea) guestAuthArea.classList.add('hidden'); |
| if (userProfileArea) userProfileArea.classList.add('hidden'); |
| if (promoBanner) promoBanner.classList.remove('hidden'); |
| } |
| } |
|
|
| |
| |
| |
| function renderHiredEmployeeState() { |
| const activeFleetData = localStorage.getItem('activeHiredAgentFleet'); |
| const hiredEmployeeSection = document.getElementById('hiredEmployeeSection'); |
| const hiredEmployeeCardSpace = document.getElementById('hiredEmployeeCardSpace'); |
|
|
| if (activeFleetData && hiredEmployeeSection && hiredEmployeeCardSpace) { |
| const fleetArray = JSON.parse(activeFleetData); |
| |
| if(fleetArray.length === 0) { |
| hiredEmployeeSection.classList.add('hidden'); |
| return; |
| } |
|
|
| hiredEmployeeSection.classList.remove('hidden'); |
| let fullFleetHTML = `<div class="space-y-4">`; |
|
|
| fleetArray.forEach(agent => { |
| const toolsArr = agent.tools || ["OpenAI"]; |
| const badges = toolsArr.map(t => `<span class="bg-indigo-600/20 text-indigo-900 text-[10px] px-2 py-0.5 rounded-md font-bold border border-indigo-300/30">${t}</span>`).join(' '); |
|
|
| fullFleetHTML += ` |
| <div onclick="window.location.href='workspace.html?agentId=${agent.id}'" class="bg-white/90 text-slate-800 rounded-2xl p-5 shadow-lg border border-white/50 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 transition duration-300 hover:shadow-xl hover:scale-[1.005] cursor-pointer"> |
| <div class="space-y-1"> |
| <div class="flex items-center space-x-2"> |
| <h4 class="font-black text-base text-slate-900">${agent.name}</h4> |
| <span class="bg-emerald-500 text-white text-[9px] px-2 py-0.5 rounded-full font-black uppercase tracking-wider">Live</span> |
| </div> |
| <p class="text-xs text-slate-600 leading-relaxed max-w-2xl">${agent.role}</p> |
| <div class="flex flex-wrap gap-1 pt-1">${badges}</div> |
| </div> |
| <div class="bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-center min-w-[100px] flex flex-col justify-center shadow-md self-stretch sm:self-auto"> |
| <span class="text-[8px] font-black text-indigo-400 uppercase tracking-wider">Subscribed</span> |
| <span class="text-sm font-black text-white">${agent.price}</span> |
| </div> |
| </div> |
| `; |
| }); |
|
|
| fullFleetHTML += `</div>`; |
| hiredEmployeeCardSpace.innerHTML = fullFleetHTML; |
| } |
| } |
|
|
| |
| |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| const userInput = document.getElementById('userInput'); |
| const submitBtn = document.getElementById('submitBtn'); |
| const architectTriggerBtn = document.getElementById('architectTriggerBtn'); |
| const closeArchitectModal = document.getElementById('closeArchitectModal'); |
| const closeBlueprintBtn = document.getElementById('closeBlueprintBtn'); |
| const logoutBtn = document.getElementById('logoutBtn'); |
|
|
| checkAndRenderUserState(); |
|
|
| if (logoutBtn) { |
| logoutBtn.addEventListener('click', () => { |
| localStorage.clear(); |
| window.location.reload(); |
| }); |
| } |
|
|
| if (architectTriggerBtn) architectTriggerBtn.addEventListener('click', processSystemArchitecture); |
| if (closeArchitectModal) closeArchitectModal.addEventListener('click', () => closeMyModal('architectModal')); |
| if (closeBlueprintBtn) closeBlueprintBtn.addEventListener('click', () => closeMyModal('architectModal')); |
|
|
| if (userInput && submitBtn) { |
| userInput.addEventListener('input', function() { |
| if(this.value.trim().length > 0) { |
| submitBtn.disabled = false; |
| submitBtn.style.backgroundColor = '#0f172a'; |
| submitBtn.style.color = '#ffffff'; |
| submitBtn.style.cursor = 'pointer'; |
| } else { |
| submitBtn.disabled = true; |
| submitBtn.style.backgroundColor = '#f1f5f9'; |
| submitBtn.style.color = '#cbd5e1'; |
| submitBtn.style.cursor = 'not-allowed'; |
| } |
| }); |
|
|
| submitBtn.addEventListener('click', handleSendAction); |
|
|
| userInput.addEventListener('keydown', function(e) { |
| if (e.key === 'Enter' && !e.shiftKey) { |
| e.preventDefault(); |
| handleSendAction(); |
| } |
| }); |
| } |
|
|
| document.querySelectorAll('.suggest-tag').forEach(tag => { |
| tag.addEventListener('click', function() { |
| const spans = this.querySelectorAll('span'); |
| let clickedText = spans.length >= 2 ? spans[1].innerText.trim() : this.innerText.trim(); |
| if (userInput && clickedText) { |
| userInput.value = `I need an AI workflow optimized for ${clickedText} integrations...`; |
| userInput.dispatchEvent(new Event('input')); |
| userInput.focus(); |
| } |
| }); |
| }); |
| }); |
|
|
