6612692d98
### Summary - Added a new "Apply" button to code snippets provided by the AI assistant. - The button is designed to seamlessly merge the AI-generated snippet into the relevant file in the editor. ### Current Issues 1. **Sticky Accept/Decline Buttons:** These activate for every snippet instead of being limited to the relevant snippet. 2. **Discard Button:** Currently non-functional. 3. **Highlight Inconsistencies:** The green-red code highlights for old and new code are inconsistent. ### To Do - Implement a toast notification when the "Apply" button is pressed on an irrelevant tab to prevent code application errors. ### Workflow Implemented 1. The "Apply" button is added alongside "Copy" and "Reply" for AI-generated code snippets. 2. Upon clicking "Apply," the code snippet and relevant file content (active file) are sent to a secondary model (GPT-4O). 3. The system prompt for GPT-4O instructs it to merge the snippet with the file content: - Ensure the original file functionality remains intact. - Integrate the code snippet seamlessly. 4. The output from GPT-4O is injected directly into the code editor. 5. Changes are visually highlighted: - Green for new code. - Red for removed code. 6. Highlights remain until the user explicitly accepts or discards the changes.
78 lines
1.8 KiB
TypeScript
78 lines
1.8 KiB
TypeScript
import { Check, Loader2 } from "lucide-react"
|
|
import { useState } from "react"
|
|
import { toast } from "sonner"
|
|
import { Button } from "../../ui/button"
|
|
|
|
interface ApplyButtonProps {
|
|
code: string
|
|
activeFileName: string
|
|
activeFileContent: string
|
|
editorRef: { current: any }
|
|
onApply: (mergedCode: string) => void
|
|
}
|
|
|
|
export default function ApplyButton({
|
|
code,
|
|
activeFileName,
|
|
activeFileContent,
|
|
editorRef,
|
|
onApply,
|
|
}: ApplyButtonProps) {
|
|
const [isApplying, setIsApplying] = useState(false)
|
|
|
|
const handleApply = async () => {
|
|
setIsApplying(true)
|
|
try {
|
|
const response = await fetch("/api/merge", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
originalCode: activeFileContent,
|
|
newCode: String(code),
|
|
fileName: activeFileName,
|
|
}),
|
|
})
|
|
|
|
if (!response.ok) {
|
|
throw new Error(await response.text())
|
|
}
|
|
|
|
const reader = response.body?.getReader()
|
|
const decoder = new TextDecoder()
|
|
let mergedCode = ""
|
|
|
|
if (reader) {
|
|
while (true) {
|
|
const { done, value } = await reader.read()
|
|
if (done) break
|
|
mergedCode += decoder.decode(value, { stream: true })
|
|
}
|
|
}
|
|
onApply(mergedCode.trim())
|
|
} catch (error) {
|
|
console.error("Error applying code:", error)
|
|
toast.error(
|
|
error instanceof Error ? error.message : "Failed to apply code changes"
|
|
)
|
|
} finally {
|
|
setIsApplying(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Button
|
|
onClick={handleApply}
|
|
size="sm"
|
|
variant="ghost"
|
|
className="p-1 h-6"
|
|
disabled={isApplying}
|
|
>
|
|
{isApplying ? (
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
) : (
|
|
<Check className="w-4 h-4" />
|
|
)}
|
|
</Button>
|
|
)
|
|
}
|