feat(ai): add apply-to-editor actions for assistant code suggestions#864
feat(ai): add apply-to-editor actions for assistant code suggestions#864Divyansh2992 wants to merge 1 commit intoaccordproject:mainfrom
Conversation
Signed-off-by: Divyansh2992 <149261675+Divyansh2992@users.noreply.github.com>
✅ Deploy Preview for ap-template-playground ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
This PR is stale because it has been open 15 days with no activity. Remove stale label or comment or this will be closed in 10 days. |
|
@sanketshevkar @DianaLease @dselman can you please review my this pr, as this has been reported to be stale by github bot. So can you please it asap. |
There was a problem hiding this comment.
Pull request overview
Implements one-click “Apply to Editor” actions for AI assistant responses by detecting templatemarkApply, concertoApply, and jsonApply fenced code blocks in the chat UI, and tightens the system prompt so the assistant returns apply-ready blocks more consistently.
Changes:
- Added apply-target detection and an “Apply to Editor” button for supported fenced code blocks in the AI chat panel.
- Wired apply actions to the existing Zustand editor update + rebuild flow (TemplateMark / Concerto / JSON).
- Strengthened system prompt instructions to require exact
*Applyfence tags for full editor replacements.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| src/components/AIChatPanel.tsx | Detects apply-ready code fences, renders Apply UI, and triggers editor updates + rebuilds. |
| src/ai-assistant/prompts.ts | Adds shared prompt instructions enforcing exact templatemarkApply / concertoApply / jsonApply tags. |
| const handleApplyToEditor = async (language: string, code: string, blockKey: string) => { | ||
| const applyTarget = getApplyTarget(language); | ||
|
|
||
| if (!applyTarget) { | ||
| return; | ||
| } | ||
|
|
There was a problem hiding this comment.
This PR adds a new user-facing workflow (detect *Apply code fences, render an Apply button, update the correct editor, and rebuild). There are component tests in src/tests/components/, but no coverage for AIChatPanel. Please add unit tests for at least: (1) rendering the Apply button only for templatemarkApply/concertoApply/jsonApply blocks, and (2) clicking Apply calling the correct store setters and showing success/error feedback.
| setApplyingBlockKey(blockKey); | ||
| setApplyFeedback(null); | ||
|
|
||
| try { | ||
| await applyTarget.apply(code); |
There was a problem hiding this comment.
applyingBlockKey and applyFeedback are stored as single global values, but multiple Apply buttons can be clicked before an earlier apply finishes. This can cause a race where a later click overwrites applyingBlockKey, and then the earlier apply's finally clears it, leaving the UI in an incorrect state while the later apply is still running. Consider tracking applying/feedback state per block key (e.g., a map keyed by blockKey, or disable all Apply buttons while any apply is in progress).
| code = segments[i].substring(firstLineBreak + 1); | ||
| } | ||
| const language = firstLineBreak > -1 ? segments[i].substring(0, firstLineBreak).trim() : ""; | ||
| const code = (firstLineBreak > -1 ? segments[i].substring(firstLineBreak + 1) : segments[i]).trim(); |
There was a problem hiding this comment.
The extracted code is .trim()'d before rendering and applying. Trimming can change the actual TemplateMark/Concerto content (e.g., removing leading indentation or trailing newlines) and may alter template output. Prefer preserving the exact code block contents (typically only strip the initial newline after the language tag, if present) when applying to the editors.
| const code = (firstLineBreak > -1 ? segments[i].substring(firstLineBreak + 1) : segments[i]).trim(); | |
| const code = firstLineBreak > -1 ? segments[i].substring(firstLineBreak + 1) : segments[i]; |
| const language = firstLineBreak > -1 ? segments[i].substring(0, firstLineBreak).trim() : ""; | ||
| const code = (firstLineBreak > -1 ? segments[i].substring(firstLineBreak + 1) : segments[i]).trim(); | ||
| const applyTarget = getApplyTarget(language); | ||
| const blockKey = `${messageId ?? "message"}:${i}:${language}:${code}`; |
There was a problem hiding this comment.
blockKey includes the entire code string, which can be very large. This increases memory usage and makes state comparisons (applyingBlockKey === blockKey) potentially expensive; it also risks unstable keys if whitespace changes. Use a stable, short identifier (e.g., ${messageId}:${i}:${language}) and, if needed, keep the code separately.
| const blockKey = `${messageId ?? "message"}:${i}:${language}:${code}`; | |
| const blockKey = `${messageId ?? "message"}:${i}:${language}`; |
|
Thanks for this contribution! Before we can review, please resolve the merge conflicts with the base branch. git fetch origin main
git rebase origin/main
# Resolve conflicts
git push --force-with-leaseOnce the conflicts are resolved, we'll proceed with the review. This comment was generated by AI on behalf of @mttrbrts. |
Closes #853
Adds one-click apply actions for AI-generated editor replacements in the chat panel. When the assistant returns complete
templatemarkApply,concertoApply, orjsonApplycode blocks, users can apply them directly to the matching editor without copy-paste. The system prompt was also tightened so the assistant is more consistent about returning apply-ready code fences.Changes
templatemarkApply,concertoApply, andjsonApplyfenced code blocks and render anApply to Editorbutton beneath each supported block*Applycode fence tags, including coordinated multi-editor responses when neededFlags
Screenshots
Related Issues
Author Checklist
--signoffoption of git commit.mainfromfork:branchname