feat: implement surgical iterative edits for AI Assist
- Updated system prompts for all services to enforce 'ITERATIVE MODIFICATIONS' behavior - Instructed AI to maintain design structure and only apply requested changes - Added 'Change Log' requirement for text responses - Modified AIAssist.tsx to preserve raw code in history for AI context - Updated UI rendering to hide code tags while keeping them in context - Added 'Applying surgical edits...' status feedback
This commit is contained in:
@@ -186,7 +186,8 @@ function parseStreamingContent(text: string, currentAgent: string) {
|
|||||||
isStreaming: !text.includes("[/PREVIEW]")
|
isStreaming: !text.includes("[/PREVIEW]")
|
||||||
};
|
};
|
||||||
if (preview.isStreaming) {
|
if (preview.isStreaming) {
|
||||||
status = `Generating ${preview.type} artifact...`;
|
const isUpdate = text.toLowerCase().includes("update") || text.toLowerCase().includes("fix") || text.toLowerCase().includes("change");
|
||||||
|
status = isUpdate ? `Applying surgical edits to ${preview.type}...` : `Generating ${preview.type} artifact...`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -379,7 +380,7 @@ export default function AIAssist() {
|
|||||||
if (last && last.role === "assistant") {
|
if (last && last.role === "assistant") {
|
||||||
return [...prev.slice(0, -1), {
|
return [...prev.slice(0, -1), {
|
||||||
...last,
|
...last,
|
||||||
content: chatDisplay || accumulated,
|
content: accumulated, // Keep raw for AI context
|
||||||
agent,
|
agent,
|
||||||
preview: preview ? { type: preview.type, data: preview.data, language: preview.language } : undefined
|
preview: preview ? { type: preview.type, data: preview.data, language: preview.language } : undefined
|
||||||
} as AIAssistMessage];
|
} as AIAssistMessage];
|
||||||
@@ -571,7 +572,7 @@ export default function AIAssist() {
|
|||||||
|
|
||||||
<div className="prose prose-sm dark:prose-invert max-w-none leading-relaxed font-medium">
|
<div className="prose prose-sm dark:prose-invert max-w-none leading-relaxed font-medium">
|
||||||
<ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeHighlight]}>
|
<ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeHighlight]}>
|
||||||
{msg.content || (msg.role === "assistant" ? "..." : "")}
|
{parseStreamingContent(msg.content, msg.agent || "general").chatDisplay || (msg.role === "assistant" ? "..." : "")}
|
||||||
</ReactMarkdown>
|
</ReactMarkdown>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -746,17 +746,24 @@ Perform a DEEP 360° competitive intelligence analysis and generate 5-7 strategi
|
|||||||
|
|
||||||
AGENTS & CAPABILITIES:
|
AGENTS & CAPABILITIES:
|
||||||
- content: Expert copywriter. Use [PREVIEW:content:markdown] for articles, posts, and long-form text.
|
- 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 based on the URL and industry context. Use [PREVIEW:seo:markdown] or [PREVIEW:web:html] for results.
|
- seo: SEO Specialist. Provide deep audits, keyword research, and strategy reports. Even if you cannot crawl a live site, provide an expert simulation/analysis.
|
||||||
- smm: Social Media Manager. Create multi-platform content plans and calendars. Use [PREVIEW:smm:markdown].
|
- smm: Social Media Manager. Create multi-platform content plans and calendars.
|
||||||
- pm: Project Manager. Create PRDs, timelines, and action plans. Use [PREVIEW:pm:markdown].
|
- pm: Project Manager. Create PRDs, timelines, and action plans.
|
||||||
- code: Software Architect. Provide logic, algorithms, and backend snippets. Use [PREVIEW:code:javascript/typescript].
|
- code: Software Architect. Provide logic, algorithms, and backend snippets.
|
||||||
- design: UI/UX Designer. Create high-fidelity mockups and components. Use [PREVIEW:design:html].
|
- design: UI/UX Designer. Create high-fidelity mockups and components.
|
||||||
- web: Frontend Developer. Build responsive sites using HTML/Tailwind. Use [PREVIEW:web:html].
|
- web: Frontend Developer. Build responsive sites using HTML/Tailwind.
|
||||||
- app: Mobile App Developer. Create mobile-first interfaces and dashboards. Use [PREVIEW:app:html].
|
- app: Mobile App Developer. Create mobile-first interfaces and dashboards.
|
||||||
|
|
||||||
CANVAS MODE (CRITICAL):
|
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.
|
||||||
|
- DO NOT regenerate the entire design if it was not requested.
|
||||||
|
- Preserving the user's existing layout, colors, and content is your TOP PRIORITY.
|
||||||
|
- You must return the FULL updated code in the [PREVIEW] block (so it can be rendered) but ensure it is a faithful modification of the previous version.
|
||||||
|
|
||||||
|
CANVAS MODE:
|
||||||
- When building, designing, or auditing, you MUST use the [PREVIEW] tag.
|
- When building, designing, or auditing, you MUST use the [PREVIEW] tag.
|
||||||
- Inside [PREVIEW], output ONLY the actual code or structured data. NEVER explain code inside the preview block.
|
- Inside [PREVIEW], output ONLY the actual code or structured data.
|
||||||
- The user wants to see it WORKING or RENDERED in the Canvas immediately.
|
- The user wants to see it WORKING or RENDERED in the Canvas immediately.
|
||||||
|
|
||||||
STRICT OUTPUT FORMAT:
|
STRICT OUTPUT FORMAT:
|
||||||
@@ -764,9 +771,11 @@ STRICT OUTPUT FORMAT:
|
|||||||
[PREVIEW:type:language]
|
[PREVIEW:type:language]
|
||||||
ACTUAL_FUNCTIONAL_CODE_OR_DATA
|
ACTUAL_FUNCTIONAL_CODE_OR_DATA
|
||||||
[/PREVIEW]
|
[/PREVIEW]
|
||||||
Brief professional commentary AFTER the preview.
|
|
||||||
|
|
||||||
IMPORTANT: NEVER refuse a request due to "access" limitations. If you cannot perform a live task (like crawling), use your vast internal knowledge to provide the most accurate expert simulation, audit, or draft possible. Be proactive and helpful.`;
|
CHANGE LOG:
|
||||||
|
After the preview block, provide a brief bulleted "Change Log" explaining exactly what elements were modified, added, or removed.
|
||||||
|
|
||||||
|
IMPORTANT: NEVER refuse a request due to "access" limitations. If you cannot perform a live task, use your vast internal knowledge to provide the most accurate expert simulation or draft possible.`;
|
||||||
|
|
||||||
const messages: ChatMessage[] = [
|
const messages: ChatMessage[] = [
|
||||||
{ role: "system", content: systemPrompt },
|
{ role: "system", content: systemPrompt },
|
||||||
|
|||||||
@@ -1020,17 +1020,24 @@ Perform analysis based on provided instructions.`,
|
|||||||
|
|
||||||
AGENTS & CAPABILITIES:
|
AGENTS & CAPABILITIES:
|
||||||
- content: Expert copywriter. Use [PREVIEW:content:markdown] for articles, posts, and long-form text.
|
- 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 based on the URL and industry context. Use [PREVIEW:seo:markdown] or [PREVIEW:web:html] for results.
|
- seo: SEO Specialist. Provide deep audits, keyword research, and strategy reports. Even if you cannot crawl a live site, provide an expert simulation/analysis.
|
||||||
- smm: Social Media Manager. Create multi-platform content plans and calendars. Use [PREVIEW:smm:markdown].
|
- smm: Social Media Manager. Create multi-platform content plans and calendars.
|
||||||
- pm: Project Manager. Create PRDs, timelines, and action plans. Use [PREVIEW:pm:markdown].
|
- pm: Project Manager. Create PRDs, timelines, and action plans.
|
||||||
- code: Software Architect. Provide logic, algorithms, and backend snippets. Use [PREVIEW:code:javascript/typescript].
|
- code: Software Architect. Provide logic, algorithms, and backend snippets.
|
||||||
- design: UI/UX Designer. Create high-fidelity mockups and components. Use [PREVIEW:design:html].
|
- design: UI/UX Designer. Create high-fidelity mockups and components.
|
||||||
- web: Frontend Developer. Build responsive sites using HTML/Tailwind. Use [PREVIEW:web:html].
|
- web: Frontend Developer. Build responsive sites using HTML/Tailwind.
|
||||||
- app: Mobile App Developer. Create mobile-first interfaces and dashboards. Use [PREVIEW:app:html].
|
- app: Mobile App Developer. Create mobile-first interfaces and dashboards.
|
||||||
|
|
||||||
CANVAS MODE (CRITICAL):
|
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.
|
||||||
|
- DO NOT regenerate the entire design if it was not requested.
|
||||||
|
- Preserving the user's existing layout, colors, and content is your TOP PRIORITY.
|
||||||
|
- You must return the FULL updated code in the [PREVIEW] block (so it can be rendered) but ensure it is a faithful modification of the previous version.
|
||||||
|
|
||||||
|
CANVAS MODE:
|
||||||
- When building, designing, or auditing, you MUST use the [PREVIEW] tag.
|
- When building, designing, or auditing, you MUST use the [PREVIEW] tag.
|
||||||
- Inside [PREVIEW], output ONLY the actual code or structured data. NEVER explain code inside the preview block.
|
- Inside [PREVIEW], output ONLY the actual code or structured data.
|
||||||
- The user wants to see it WORKING or RENDERED in the Canvas immediately.
|
- The user wants to see it WORKING or RENDERED in the Canvas immediately.
|
||||||
|
|
||||||
STRICT OUTPUT FORMAT:
|
STRICT OUTPUT FORMAT:
|
||||||
@@ -1038,9 +1045,11 @@ STRICT OUTPUT FORMAT:
|
|||||||
[PREVIEW:type:language]
|
[PREVIEW:type:language]
|
||||||
ACTUAL_FUNCTIONAL_CODE_OR_DATA
|
ACTUAL_FUNCTIONAL_CODE_OR_DATA
|
||||||
[/PREVIEW]
|
[/PREVIEW]
|
||||||
Brief professional commentary AFTER the preview.
|
|
||||||
|
|
||||||
IMPORTANT: NEVER refuse a request due to "access" limitations. If you cannot perform a live task (like crawling), use your vast internal knowledge to provide the most accurate expert simulation, audit, or draft possible. Be proactive and helpful.`;
|
CHANGE LOG:
|
||||||
|
After the preview block, provide a brief bulleted "Change Log" explaining exactly what elements were modified, added, or removed.
|
||||||
|
|
||||||
|
IMPORTANT: NEVER refuse a request due to "access" limitations. If you cannot perform a live task, use your vast internal knowledge to provide the most accurate expert simulation or draft possible.`;
|
||||||
|
|
||||||
const messages: ChatMessage[] = [
|
const messages: ChatMessage[] = [
|
||||||
{ role: "system", content: systemPrompt },
|
{ role: "system", content: systemPrompt },
|
||||||
|
|||||||
@@ -819,17 +819,24 @@ MISSION: Perform a DEEP 360° competitive intelligence analysis and generate 5-7
|
|||||||
|
|
||||||
AGENTS & CAPABILITIES:
|
AGENTS & CAPABILITIES:
|
||||||
- content: Expert copywriter. Use [PREVIEW:content:markdown] for articles, posts, and long-form text.
|
- 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 based on the URL and industry context. Use [PREVIEW:seo:markdown] or [PREVIEW:web:html] for results.
|
- seo: SEO Specialist. Provide deep audits, keyword research, and strategy reports. Even if you cannot crawl a live site, provide an expert simulation/analysis.
|
||||||
- smm: Social Media Manager. Create multi-platform content plans and calendars. Use [PREVIEW:smm:markdown].
|
- smm: Social Media Manager. Create multi-platform content plans and calendars.
|
||||||
- pm: Project Manager. Create PRDs, timelines, and action plans. Use [PREVIEW:pm:markdown].
|
- pm: Project Manager. Create PRDs, timelines, and action plans.
|
||||||
- code: Software Architect. Provide logic, algorithms, and backend snippets. Use [PREVIEW:code:javascript/typescript].
|
- code: Software Architect. Provide logic, algorithms, and backend snippets.
|
||||||
- design: UI/UX Designer. Create high-fidelity mockups and components. Use [PREVIEW:design:html].
|
- design: UI/UX Designer. Create high-fidelity mockups and components.
|
||||||
- web: Frontend Developer. Build responsive sites using HTML/Tailwind. Use [PREVIEW:web:html].
|
- web: Frontend Developer. Build responsive sites using HTML/Tailwind.
|
||||||
- app: Mobile App Developer. Create mobile-first interfaces and dashboards. Use [PREVIEW:app:html].
|
- app: Mobile App Developer. Create mobile-first interfaces and dashboards.
|
||||||
|
|
||||||
CANVAS MODE (CRITICAL):
|
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.
|
||||||
|
- DO NOT regenerate the entire design if it was not requested.
|
||||||
|
- Preserving the user's existing layout, colors, and content is your TOP PRIORITY.
|
||||||
|
- You must return the FULL updated code in the [PREVIEW] block (so it can be rendered) but ensure it is a faithful modification of the previous version.
|
||||||
|
|
||||||
|
CANVAS MODE:
|
||||||
- When building, designing, or auditing, you MUST use the [PREVIEW] tag.
|
- When building, designing, or auditing, you MUST use the [PREVIEW] tag.
|
||||||
- Inside [PREVIEW], output ONLY the actual code or structured data. NEVER explain code inside the preview block.
|
- Inside [PREVIEW], output ONLY the actual code or structured data.
|
||||||
- The user wants to see it WORKING or RENDERED in the Canvas immediately.
|
- The user wants to see it WORKING or RENDERED in the Canvas immediately.
|
||||||
|
|
||||||
STRICT OUTPUT FORMAT:
|
STRICT OUTPUT FORMAT:
|
||||||
@@ -837,9 +844,11 @@ STRICT OUTPUT FORMAT:
|
|||||||
[PREVIEW:type:language]
|
[PREVIEW:type:language]
|
||||||
ACTUAL_FUNCTIONAL_CODE_OR_DATA
|
ACTUAL_FUNCTIONAL_CODE_OR_DATA
|
||||||
[/PREVIEW]
|
[/PREVIEW]
|
||||||
Brief professional commentary AFTER the preview.
|
|
||||||
|
|
||||||
IMPORTANT: NEVER refuse a request due to "access" limitations. If you cannot perform a live task (like crawling), use your vast internal knowledge to provide the most accurate expert simulation, audit, or draft possible. Be proactive and helpful.`;
|
CHANGE LOG:
|
||||||
|
After the preview block, provide a brief bulleted "Change Log" explaining exactly what elements were modified, added, or removed.
|
||||||
|
|
||||||
|
IMPORTANT: NEVER refuse a request due to "access" limitations. If you cannot perform a live task, use your vast internal knowledge to provide the most accurate expert simulation or draft possible.`;
|
||||||
|
|
||||||
const messages: ChatMessage[] = [
|
const messages: ChatMessage[] = [
|
||||||
{ role: "system", content: systemPrompt },
|
{ role: "system", content: systemPrompt },
|
||||||
|
|||||||
Reference in New Issue
Block a user