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.
68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
import OpenAI from "openai"
|
|
|
|
const openai = new OpenAI({
|
|
apiKey: process.env.OPENAI_API_KEY,
|
|
})
|
|
|
|
export async function POST(request: Request) {
|
|
try {
|
|
const { originalCode, newCode, fileName } = await request.json()
|
|
|
|
const systemPrompt = `You are a code merging assistant. Your task is to merge the new code snippet with the original file content while:
|
|
1. Preserving the original file's functionality
|
|
2. Ensuring proper integration of the new code
|
|
3. Maintaining consistent style and formatting
|
|
4. Resolving any potential conflicts
|
|
5. Output ONLY the raw code without any:
|
|
- Code fence markers (\`\`\`)
|
|
- Language identifiers (typescript, javascript, etc.)
|
|
- Explanations or comments
|
|
- Markdown formatting
|
|
|
|
The output should be the exact code that will replace the existing code, nothing more and nothing less.`
|
|
|
|
const mergedCode = `Original file (${fileName}):\n${originalCode}\n\nNew code to merge:\n${newCode}`
|
|
|
|
const response = await openai.chat.completions.create({
|
|
model: "gpt-4o",
|
|
messages: [
|
|
{ role: "system", content: systemPrompt },
|
|
{ role: "user", content: mergedCode },
|
|
],
|
|
prediction: {
|
|
type: "content",
|
|
content: mergedCode,
|
|
},
|
|
stream: true,
|
|
})
|
|
|
|
// Clean and stream response
|
|
const encoder = new TextEncoder()
|
|
return new Response(
|
|
new ReadableStream({
|
|
async start(controller) {
|
|
let buffer = ""
|
|
for await (const chunk of response) {
|
|
if (chunk.choices[0]?.delta?.content) {
|
|
buffer += chunk.choices[0].delta.content
|
|
// Clean any code fence markers that might appear in the stream
|
|
const cleanedContent = buffer
|
|
.replace(/^```[\w-]*\n|```\s*$/gm, "") // Remove code fences
|
|
.replace(/^(javascript|typescript|python|html|css)\n/gm, "") // Remove language identifiers
|
|
controller.enqueue(encoder.encode(cleanedContent))
|
|
buffer = ""
|
|
}
|
|
}
|
|
controller.close()
|
|
},
|
|
})
|
|
)
|
|
} catch (error) {
|
|
console.error("Merge error:", error)
|
|
return new Response(
|
|
error instanceof Error ? error.message : "Failed to merge code",
|
|
{ status: 500 }
|
|
)
|
|
}
|
|
}
|