Compare commits

..

4 Commits

2 changed files with 133 additions and 47 deletions

View File

@@ -780,7 +780,7 @@ export default function AIAssist({ vibeMode = false }: { vibeMode?: boolean } =
} }
// If no URL found and web search not enabled, auto-enable web search for SEO // If no URL found and web search not enabled, auto-enable web search for SEO
if ((currentAgent === "seo" || currentAgent === "leads") && uniqueUrls.length === 0 && !webSearchEnabled) { if (uniqueUrls.length === 0 && !webSearchEnabled) {
try { try {
setStatus("Searching for SEO context..."); setStatus("Searching for SEO context...");
const searchRes = await fetch("/api/search?q=" + encodeURIComponent(finalInput.split("\n")[0].substring(0, 200))); const searchRes = await fetch("/api/search?q=" + encodeURIComponent(finalInput.split("\n")[0].substring(0, 200)));
@@ -798,6 +798,24 @@ export default function AIAssist({ vibeMode = false }: { vibeMode?: boolean } =
} }
} }
// Leads mode: auto-search for leads
if (currentAgent === "leads" && !webSearchEnabled) {
try {
setStatus("Finding leads...");
const searchRes = await fetch("/api/search?q=" + encodeURIComponent(finalInput.split("\n")[0].substring(0, 200)));
if (searchRes.ok) {
const searchData = await searchRes.json();
if (searchData.results && searchData.results.length > 0) {
const searchContext = searchData.results.slice(0, 5).map((r: { title: string; url: string; snippet: string }, i: number) =>
(i + 1) + ". **" + r.title + "** (" + r.url + ") - " + r.snippet
).join("\n");
enrichedInput = "[WEB SEARCH CONTEXT - Use these results to find leads]\n" + searchContext + "\n\n---\nExtract leads/prospects from the above results. Search for more leads using [WEB_SEARCH:query] with different angles. Then output results as a [PREVIEW:leads:html] table.\n\nUser request: " + finalInput;
}
}
} catch (e) { console.warn("Leads web search failed:", e); }
setStatus(null);
}
const response = await modelAdapter.generateAIAssistStream( const response = await modelAdapter.generateAIAssistStream(
{ {
messages: [...formattedHistory, { role: "user" as const, content: enrichedInput, timestamp: new Date() }], messages: [...formattedHistory, { role: "user" as const, content: enrichedInput, timestamp: new Date() }],
@@ -885,7 +903,11 @@ export default function AIAssist({ vibeMode = false }: { vibeMode?: boolean } =
} catch (error) { } catch (error) {
console.error("Assist error:", error); console.error("Assist error:", error);
const message = error instanceof Error ? error.message : "Vibe Architect failed"; const rawMessage = error instanceof Error ? error.message : "Vibe Architect failed";
let message = rawMessage;
if (rawMessage.includes("429") || rawMessage.includes("insufficient_quota") || rawMessage.includes("Free allocated quota exceeded") || rawMessage.includes("rate_limit")) {
message = "API quota exceeded or rate limited. Please switch to a different AI provider in Settings, or wait a few minutes and try again.";
}
const errorMsg: AIAssistMessage = { role: "assistant", content: message, timestamp: new Date() }; const errorMsg: AIAssistMessage = { role: "assistant", content: message, timestamp: new Date() };
updateTabById(requestTabId, { history: [...aiAssistHistory, errorMsg] }); updateTabById(requestTabId, { history: [...aiAssistHistory, errorMsg] });
} finally { } finally {
@@ -919,6 +941,50 @@ export default function AIAssist({ vibeMode = false }: { vibeMode?: boolean } =
downloadSeoReport(seoAuditData, format); downloadSeoReport(seoAuditData, format);
}; };
const exportLeadsReport = (format: "html" | "csv") => {
const htmlContent = previewData?.data;
if (!htmlContent) return;
if (format === "html") {
const blob = new Blob([htmlContent], { type: "text/html" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "leads-report.html";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
} else {
// Extract table rows from HTML and convert to CSV
const parser = new DOMParser();
const doc = parser.parseFromString(htmlContent, "text/html");
const rows = doc.querySelectorAll("tbody tr");
if (rows.length === 0) return;
let csv = "Name,Platform,Followers,Region,Bio,Link\n";
rows.forEach((row) => {
const cells = row.querySelectorAll("td");
if (cells.length >= 7) {
const name = cells[1]?.textContent?.trim().replace(/,/g, ";") || "";
const platform = cells[2]?.textContent?.trim() || "";
const followers = cells[3]?.textContent?.trim() || "";
const region = cells[4]?.textContent?.trim().replace(/,/g, ";") || "";
const bio = cells[5]?.textContent?.trim().replace(/,/g, ";") || "";
const link = cells[6]?.querySelector("a")?.href || "";
csv += `"${name}","${platform}","${followers}","${region}","${bio}","${link}"\n`;
}
});
const blob = new Blob([csv], { type: "text/csv" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "leads-report.csv";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
};
const clearHistory = () => { const clearHistory = () => {
updateActiveTab({ updateActiveTab({
@@ -1422,6 +1488,24 @@ export default function AIAssist({ vibeMode = false }: { vibeMode?: boolean } =
</Button> </Button>
</div> </div>
)} )}
{currentAgent === "leads" && previewData?.data && (
<div className="mt-2 flex gap-2 animate-in zoom-in-95 duration-300">
<Button
onClick={() => exportLeadsReport("html")}
variant="outline"
className="flex-1 bg-emerald-500/10 hover:bg-emerald-500/20 border-emerald-500/20 text-emerald-300 font-black uppercase text-[9px] tracking-wider py-3 rounded-xl min-w-0"
>
<Download className="h-3.5 w-3.5 mr-1" /> <span className="truncate">Export HTML</span>
</Button>
<Button
onClick={() => exportLeadsReport("csv")}
variant="outline"
className="flex-1 bg-blue-500/10 hover:bg-blue-500/20 border-blue-500/20 text-blue-300 font-black uppercase text-[9px] tracking-wider py-3 rounded-xl min-w-0"
>
<FileText className="h-3.5 w-3.5 mr-1" /> <span className="truncate">Export CSV</span>
</Button>
</div>
)}
</> </>
)} )}
{/* Inline SEO Export - always visible in chat when SEO data exists */} {/* Inline SEO Export - always visible in chat when SEO data exists */}
@@ -1443,6 +1527,25 @@ export default function AIAssist({ vibeMode = false }: { vibeMode?: boolean } =
</Button> </Button>
</div> </div>
)} )}
{/* Inline Leads Export - always visible in chat when leads data exists */}
{msg.role === "assistant" && msg.agent === "leads" && msg.preview?.data && (
<div className="mt-3 flex gap-2 animate-in zoom-in-95 duration-300">
<Button
onClick={() => { setPreviewData(msg.preview as any); setTimeout(() => exportLeadsReport("html"), 100); }}
variant="outline"
className="flex-1 bg-emerald-500/10 hover:bg-emerald-500/20 border-emerald-500/30 text-emerald-300 font-black uppercase text-[9px] tracking-wider py-2.5 rounded-xl min-w-0"
>
<Download className="h-3 w-3 mr-1.5" /> <span className="truncate">Export HTML</span>
</Button>
<Button
onClick={() => { setPreviewData(msg.preview as any); setTimeout(() => exportLeadsReport("csv"), 100); }}
variant="outline"
className="flex-1 bg-blue-500/10 hover:bg-blue-500/20 border-blue-500/30 text-blue-300 font-black uppercase text-[9px] tracking-wider py-2.5 rounded-xl min-w-0"
>
<FileText className="h-3 w-3 mr-1.5" /> <span className="truncate">Export CSV</span>
</Button>
</div>
)}
</div> </div>
{msg.role === "assistant" && isProcessing && i === aiAssistHistory.length - 1 && status && ( {msg.role === "assistant" && isProcessing && i === aiAssistHistory.length - 1 && status && (

View File

@@ -534,64 +534,47 @@ AGENTS & CAPABILITIES:
- design: UI/UX Designer. Create high-fidelity mockups and components. - design: UI/UX Designer. Create high-fidelity mockups and components.
- web: Frontend Developer. Build responsive sites. Use [PREVIEW:web:html]. Tailwind CSS CDN by default. - web: Frontend Developer. Build responsive sites. Use [PREVIEW:web:html]. Tailwind CSS CDN by default.
- app: Mobile App Developer. Create mobile-first interfaces and dashboards. Use [PREVIEW:app:javascript]. - app: Mobile App Developer. Create mobile-first interfaces and dashboards. Use [PREVIEW:app:javascript].
- leads: Leads Finder. Expert at finding relevant influencers, prospects, and leads across social media platforms. When given a niche, industry, topic, or target audience, use [WEB_SEARCH:query] to find relevant leads from Instagram, Twitter/X, LinkedIn, YouTube, and TikTok. - leads: Leads Finder. You are a SILENT data tool. DO NOT chat, greet, ask questions, or explain. Your ONLY job: use [WEB_SEARCH:query] to find leads, then output them as an HTML table. NEVER say "I'd be happy to help" or "Let me search" or "Here are some leads" — just output data.
**MUST wrap results in [PREVIEW:leads:html] so they render as a table in the Canvas.** **OUTPUT SEQUENCE (follow exactly):**
1. Use [WEB_SEARCH:query] multiple times with different queries to find leads
**OUTPUT FORMAT:** 2. One line summary: "Found X leads in Y niche across Z platforms"
Before [PREVIEW], give a brief chat summary (e.g. "Found 25 leads in forex across Singapore and UAE"). 3. [PREVIEW:leads:html] with the COMPLETE HTML below — replace placeholders with real data
Then output the full table inside [PREVIEW:leads:html]...[/PREVIEW] using this HTML template: 4. [/PREVIEW]
5. Brief changelog bullet points
That is ALL. No greetings, no filler, no conversation.
**HTML TEMPLATE — copy this exactly, fill in the data:**
<!DOCTYPE html><html><head><meta charset="utf-8"><style> <!DOCTYPE html><html><head><meta charset="utf-8"><style>
*{margin:0;padding:0;box-sizing:border-box} *{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#0a0f0f;color:#e2e8f0;padding:24px}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#0a0f0f;color:#e2e8f0;padding:24px} .header{text-align:center;margin-bottom:24px}.header h1{font-size:24px;font-weight:800;background:linear-gradient(135deg,#10b981,#34d399);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.header p{color:#94a3b8;font-size:13px;margin-top:4px}
.header{text-align:center;margin-bottom:24px} .stats{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.stat{background:rgba(16,185,129,0.08);border:1px solid rgba(16,185,129,0.15);border-radius:10px;padding:10px 16px;text-align:center;flex:1;min-width:100px}.stat .num{font-size:20px;font-weight:800;color:#10b981}.stat .lbl{font-size:10px;color:#94a3b8;text-transform:uppercase;letter-spacing:1px;margin-top:2px}
.header h1{font-size:24px;font-weight:800;background:linear-gradient(135deg,#10b981,#34d399);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.header p{color:#94a3b8;font-size:13px;margin-top:4px}
.stats{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.stat{background:rgba(16,185,129,0.08);border:1px solid rgba(16,185,129,0.15);border-radius:10px;padding:10px 16px;text-align:center;flex:1;min-width:100px}
.stat .num{font-size:20px;font-weight:800;color:#10b981}
.stat .lbl{font-size:10px;color:#94a3b8;text-transform:uppercase;letter-spacing:1px;margin-top:2px}
table{width:100%;border-collapse:collapse;background:rgba(15,23,42,0.6);border-radius:12px;overflow:hidden;border:1px solid rgba(148,163,184,0.1)} table{width:100%;border-collapse:collapse;background:rgba(15,23,42,0.6);border-radius:12px;overflow:hidden;border:1px solid rgba(148,163,184,0.1)}
thead th{background:rgba(16,185,129,0.12);color:#10b981;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;padding:12px 14px;text-align:left;border-bottom:1px solid rgba(148,163,184,0.1);white-space:nowrap} thead th{background:rgba(16,185,129,0.12);color:#10b981;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;padding:12px 14px;text-align:left;border-bottom:1px solid rgba(148,163,184,0.1)}
tbody tr{border-bottom:1px solid rgba(148,163,184,0.06);transition:background .2s} tbody tr{border-bottom:1px solid rgba(148,163,184,0.06)}tbody tr:hover{background:rgba(16,185,129,0.04)}
tbody tr:hover{background:rgba(16,185,129,0.04)} tbody td{padding:10px 14px;font-size:13px;color:#cbd5e1}
tbody td{padding:10px 14px;font-size:13px;color:#cbd5e1;border-bottom:1px solid rgba(148,163,184,0.04)} .name{font-weight:700;color:#f1f5f9}.url{color:#10b981;text-decoration:none;font-size:12px}.url:hover{text-decoration:underline}
.name{font-weight:700;color:#f1f5f9}
.url{color:#10b981;text-decoration:none;font-size:12px}
.url:hover{text-decoration:underline}
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:600} .badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:600}
.badge-instagram{background:rgba(225,48,108,0.15);color:#f472b6} .badge-instagram{background:rgba(225,48,108,0.15);color:#f472b6}.badge-twitter{background:rgba(59,130,246,0.15);color:#60a5fa}.badge-linkedin{background:rgba(59,130,246,0.15);color:#93c5fd}.badge-youtube{background:rgba(239,68,68,0.15);color:#fca5a5}.badge-tiktok{background:rgba(168,85,247,0.15);color:#c084fc}
.badge-twitter{background:rgba(59,130,246,0.15);color:#60a5fa} .followers{color:#10b981;font-weight:700}.region{color:#94a3b8;font-size:12px}.bio{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge-linkedin{background:rgba(59,130,246,0.15);color:#93c5fd}
.badge-youtube{background:rgba(239,68,68,0.15);color:#fca5a5}
.badge-tiktok{background:rgba(168,85,247,0.15);color:#c084fc}
.followers{color:#10b981;font-weight:700}
.region{color:#94a3b8;font-size:12px}
.bio{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:768px){table{font-size:11px}thead th,tbody td{padding:8px}.bio{max-width:120px}}
</style></head><body> </style></head><body>
<div class="header"><h1>Leads Report</h1><p>Generated by PromptArch Leads Finder</p></div> <div class="header"><h1>Leads Report</h1><p>Generated by PromptArch</p></div>
<div class="stats"> <div class="stats">
<div class="stat"><div class="num">TOTAL_LEADS_COUNT</div><div class="lbl">Total Leads</div></div> <div class="stat"><div class="num">TOTAL_COUNT</div><div class="lbl">Total Leads</div></div>
<div class="stat"><div class="num">COMBINED_FOLLOWERS</div><div class="lbl">Combined Reach</div></div> <div class="stat"><div class="num">COMBINED_FOLLOWERS</div><div class="lbl">Combined Reach</div></div>
<div class="stat"><div class="num">TOP_PLATFORM</div><div class="lbl">Top Platform</div></div> <div class="stat"><div class="num">TOP_PLATFORM</div><div class="lbl">Top Platform</div></div>
<div class="stat"><div class="num">TOP_REGION</div><div class="lbl">Top Region</div></div> <div class="stat"><div class="num">TOP_REGION</div><div class="lbl">Top Region</div></div>
</div> </div>
<table><thead><tr><th>#</th><th>Name</th><th>Platform</th><th>Followers</th><th>Region</th><th>Bio</th><th>Link</th></tr></thead> <table><thead><tr><th>#</th><th>Name</th><th>Platform</th><th>Followers</th><th>Region</th><th>Bio</th><th>Link</th></tr></thead><tbody>
<tbody> <tr><td>1</td><td class="name">NAME</td><td><span class="badge badge-PLATFORM">PLATFORM</span></td><td class="followers">FOLLOWERS</td><td class="region">REGION</td><td class="bio" title="FULL BIO">SHORT BIO</td><td><a class="url" href="URL" target="_blank">Visit &rarr;</a></td></tr>
<!-- Output one <tr> per lead: --> <!-- Repeat <tr> for each lead. Use badge-instagram/badge-twitter/badge-linkedin/badge-youtube/badge-tiktok -->
<!-- <tr><td>1</td><td class="name">Name</td><td><span class="badge badge-PLATFORM">Platform</span></td><td class="followers">44.1K</td><td class="region">Region</td><td class="bio" title="Full bio">Brief description...</td><td><a class="url" href="URL" target="_blank">Visit Profile &rarr;</a></td></tr> -->
</tbody></table></body></html> </tbody></table></body></html>
**RULES:** **RULES:**
- Find 20+ leads per request unless user specifies a different number. - Find 20+ leads. Sort by relevance/follower count.
- Sort by relevance and follower count (most relevant first). - Use exact follower counts (e.g. "44.1K", "1.2M").
- Include the most prominent social media URL for each lead. - REAL leads from search results only — never fabricate profiles or URLs.
- Use exact follower counts when available (e.g. "44.1K", "275.6K", "1.2M"). - Fill STATS div with real counts from your results.
- Use correct badge classes per platform: badge-instagram, badge-twitter, badge-linkedin, badge-youtube, badge-tiktok. - The entire HTML must be between [PREVIEW:leads:html] and [/PREVIEW].
- Fill in the STATS div with actual counts from your results.
- Provide real, verifiable leads — never fabricate profiles or URLs.
- The ENTIRE HTML table MUST be between [PREVIEW:leads:html] and [/PREVIEW] tags.
CANVAS MODE: CANVAS MODE:
- When building, designing, or auditing, you MUST use the [PREVIEW] tag. - When building, designing, or auditing, you MUST use the [PREVIEW] tag.