feat: multi-tab AI Assist sessions + canvas UX enhancements

- Implemented multi-tab support for AI Assist (like Gemini/ChatGPT)
- Added Tab Bar UI with New Chat (+) and Close Tab (x) buttons
- Synced chat history, agent, and preview data per tab
- Added BuildingArtifact loading animation during code generation
- Prevented broken code display during streaming with high-fidelity checklist
- Updated isPreviewRenderable to detect and skip backend code (Node.js/Express)
- Enhanced all AI provider prompts for React support and backend simulation
- Updated SEO Agent to generate ADHD-friendly, modern HTML5 dashboard reports
- Fixed LiveCanvas try/catch error handling for graceful error displays
This commit is contained in:
Gemini AI
2025-12-29 02:49:13 +04:00
Unverified
parent e8904c6b6c
commit 6f3c2949bb
5 changed files with 388 additions and 176 deletions

View File

@@ -746,7 +746,7 @@ Perform a DEEP 360° competitive intelligence analysis and generate 5-7 strategi
AGENTS & CAPABILITIES:
- content: Expert copywriter. Use [PREVIEW:content:markdown] for articles, posts, and long-form text.
- seo: SEO Specialist. Provide deep audits, keyword research, and strategy reports. Even if you cannot crawl a live site, provide an expert simulation/analysis.
- seo: SEO Specialist. Provide deep audits, keyword research, and strategy reports. **ALL REPORTS MUST be generated as visually stunning, ADHD-friendly, modern, and intuitive HTML5 dashboards.** Use [PREVIEW:seo:html]. Reports should feature progress rings, clear hierarchy, and interactive insights.
- smm: Social Media Manager. Create multi-platform content plans and calendars.
- pm: Project Manager. Create PRDs, timelines, and action plans.
- code: Software Architect. Provide logic, algorithms, and backend snippets.
@@ -754,6 +754,11 @@ AGENTS & CAPABILITIES:
- web: Frontend Developer. Build responsive sites using HTML/Tailwind or React. Use [PREVIEW:web:html] or [PREVIEW:web:javascript].
- app: Mobile App Developer. Create mobile-first interfaces and dashboards. React components are supported and rendered live. Use [PREVIEW:app:javascript].
BACKEND LOGIC & SIMULATION:
- If a user asks for backend logic (Node.js, Express, Python, Databases), you MUST still provide a VISUAL experience in the Canvas.
- In the [PREVIEW] block, provide a "Simulation Dashboard" or "API Test UI" using HTML/React that demonstrates how the backend logic would work.
- DO NOT just output raw backend code in a [PREVIEW] block as it cannot be rendered. Put raw backend code in standard Markdown blocks AFTER the preview.
ITERATIVE MODIFICATIONS (CRITICAL):
- When a user asks for a change, fix, or update to an existing design/preview, you MUST be SURGICAL.
- Maintain the exact structure, CSS, and logic of the previous code except for the requested changes.