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
2025-12-29 02:49:13 +04:00
parent e8904c6b6c
commit 6f3c2949bb
5 changed files with 388 additions and 176 deletions
--- a/lib/services/ollama-cloud.ts
+++ b/lib/services/ollama-cloud.ts
@@ -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.
--- a/lib/services/qwen-oauth.ts
+++ b/lib/services/qwen-oauth.ts
@@ -1020,7 +1020,7 @@ Perform analysis based on provided instructions.`,

 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.
@@ -1028,6 +1028,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.
--- a/lib/services/zai-plan.ts
+++ b/lib/services/zai-plan.ts
@@ -819,7 +819,7 @@ MISSION: Perform a DEEP 360° competitive intelligence analysis and generate 5-7

 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.
@@ -827,6 +827,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.
--- a/lib/store.ts
+++ b/lib/store.ts
@@ -1,6 +1,14 @@
 import { create } from "zustand";
 import type { ModelProvider, PromptEnhancement, PRD, ActionPlan, SlidesPresentation, GoogleAdsResult, MagicWandResult, MarketResearchResult, AppView, AIAssistMessage } from "@/types";

+interface AIAssistTab {
+  id: string;
+  title: string;
+  history: AIAssistMessage[];
+  currentAgent: string;
+  previewData?: any | null; // PreviewData type from AIAssist
+}
+
 interface AppState {
  currentPrompt: string;
  enhancedPrompt: string | null;
@@ -10,7 +18,11 @@ interface AppState {
  googleAdsResult: GoogleAdsResult | null;
  magicWandResult: MagicWandResult | null;
  marketResearchResult: MarketResearchResult | null;
-  aiAssistHistory: AIAssistMessage[];
+
+  // AI Assist Tabs
+  aiAssistTabs: AIAssistTab[];
+  activeTabId: string | null;
+
  language: "en" | "ru" | "he";
  selectedProvider: ModelProvider;
  selectedModels: Record<ModelProvider, string>;
@@ -37,7 +49,14 @@ interface AppState {
  setGoogleAdsResult: (result: GoogleAdsResult | null) => void;
  setMagicWandResult: (result: MagicWandResult | null) => void;
  setMarketResearchResult: (result: MarketResearchResult | null) => void;
-  setAIAssistHistory: (history: AIAssistMessage[] | ((prev: AIAssistMessage[]) => AIAssistMessage[])) => void;
+
+  // Tab Management
+  setAIAssistTabs: (tabs: AIAssistTab[]) => void;
+  setActiveTabId: (id: string | null) => void;
+  addAIAssistTab: (agent?: string) => void;
+  removeAIAssistTab: (id: string) => void;
+  updateActiveTab: (updates: Partial<AIAssistTab>) => void;
+
  setLanguage: (lang: "en" | "ru" | "he") => void;
  setSelectedProvider: (provider: ModelProvider) => void;
  setSelectedModel: (provider: ModelProvider, model: string) => void;
@@ -60,7 +79,15 @@ const useStore = create<AppState>((set) => ({
  googleAdsResult: null,
  magicWandResult: null,
  marketResearchResult: null,
-  aiAssistHistory: [],
+
+  aiAssistTabs: [{
+    id: "default",
+    title: "New Chat",
+    history: [],
+    currentAgent: "general"
+  }],
+  activeTabId: "default",
+
  language: "en",
  selectedProvider: "qwen",
  selectedModels: {
@@ -90,9 +117,39 @@ const useStore = create<AppState>((set) => ({
  setGoogleAdsResult: (result) => set({ googleAdsResult: result }),
  setMagicWandResult: (result) => set({ magicWandResult: result }),
  setMarketResearchResult: (result) => set({ marketResearchResult: result }),
-  setAIAssistHistory: (update) => set((state) => ({
-    aiAssistHistory: typeof update === 'function' ? update(state.aiAssistHistory) : update
+
+  setAIAssistTabs: (tabs) => set({ aiAssistTabs: tabs }),
+  setActiveTabId: (id) => set({ activeTabId: id }),
+  addAIAssistTab: (agent = "general") => set((state) => {
+    const newId = Math.random().toString(36).substr(2, 9);
+    const newTab = {
+      id: newId,
+      title: `Chat ${state.aiAssistTabs.length + 1}`,
+      history: [],
+      currentAgent: agent
+    };
+    return {
+      aiAssistTabs: [...state.aiAssistTabs, newTab],
+      activeTabId: newId
+    };
+  }),
+  removeAIAssistTab: (id) => set((state) => {
+    const newTabs = state.aiAssistTabs.filter(t => t.id !== id);
+    let nextActiveId = state.activeTabId;
+    if (state.activeTabId === id) {
+      nextActiveId = newTabs.length > 0 ? newTabs[newTabs.length - 1].id : null;
+    }
+    return {
+      aiAssistTabs: newTabs,
+      activeTabId: nextActiveId
+    };
+  }),
+  updateActiveTab: (updates) => set((state) => ({
+    aiAssistTabs: state.aiAssistTabs.map(t =>
+      t.id === state.activeTabId ? { ...t, ...updates } : t
+    )
  })),
+
  setLanguage: (lang) => set({ language: lang }),
  setSelectedProvider: (provider) => set({ selectedProvider: provider }),
  setSelectedModel: (provider, model) =>
@@ -132,7 +189,13 @@ const useStore = create<AppState>((set) => ({
      googleAdsResult: null,
      magicWandResult: null,
      marketResearchResult: null,
-      aiAssistHistory: [],
+      aiAssistTabs: [{
+        id: "default",
+        title: "New Chat",
+        history: [],
+        currentAgent: "general"
+      }],
+      activeTabId: "default",
      error: null,
    }),
 }));