fix: apply code- discard button

frontend/app/api/merge/route.ts

@@ -19,7 +19,9 @@ export async function POST(request: Request) {
    - Explanations or comments
    - Markdown formatting
 
-The output should be the exact code that will replace the existing code, nothing more and nothing less.`
+The output should be the exact code that will replace the existing code, nothing more and nothing less.
+
+Important: When merging, preserve the original code structure as much as possible. Only make necessary changes to integrate the new code while maintaining the original code's organization and style.`
 
     const mergedCode = `Original file (${fileName}):\n${originalCode}\n\nNew code to merge:\n${newCode}`
 

frontend/components/editor/AIChat/ApplyButton.tsx

@@ -8,7 +8,7 @@ interface ApplyButtonProps {
   activeFileName: string
   activeFileContent: string
   editorRef: { current: any }
-  onApply: (mergedCode: string) => void
+  onApply: (mergedCode: string, originalCode: string) => void
 }
 
 export default function ApplyButton({
@@ -48,7 +48,7 @@ export default function ApplyButton({
           mergedCode += decoder.decode(value, { stream: true })
         }
       }
-      onApply(mergedCode.trim())
+      onApply(mergedCode.trim(), activeFileContent)
     } catch (error) {
       console.error("Error applying code:", error)
       toast.error(

frontend/components/editor/AIChat/lib/markdownComponents.tsx

@@ -17,7 +17,7 @@ export const createMarkdownComponents = (
   activeFileName: string,
   activeFileContent: string,
   editorRef: any,
-  handleApplyCode: (mergedCode: string) => void,
+  handleApplyCode: (mergedCode: string, originalCode: string) => void,
   selectFile: (tab: TTab) => void,
   mergeDecorationsCollection?: monaco.editor.IEditorDecorationsCollection,
   setMergeDecorationsCollection?: (collection: undefined) => void
@@ -61,7 +61,7 @@ export const createMarkdownComponents = (
                       mergeDecorationsCollection &&
                       editorRef?.current
                     ) {
-                      mergeDecorationsCollection.clear()
+                      mergeDecorationsCollection?.clear()
                       setMergeDecorationsCollection(undefined)
                     }
                   }}
@@ -75,14 +75,15 @@ export const createMarkdownComponents = (
                 <div className="w-px bg-input"></div>
                 <Button
                   onClick={() => {
-                    if (
+                    if (editorRef?.current && mergeDecorationsCollection) {
-                      setMergeDecorationsCollection &&
+                      const model = editorRef.current.getModel()
-                      mergeDecorationsCollection &&
+                      if (model && (model as any).originalContent) {
-                      editorRef?.current
+                        editorRef.current?.setValue(
-                    ) {
+                          (model as any).originalContent
-                      editorRef.current.getModel()?.setValue(activeFileContent)
+                        )
                         mergeDecorationsCollection.clear()
-                      setMergeDecorationsCollection(undefined)
+                        setMergeDecorationsCollection?.(undefined)
+                      }
                     }
                   }}
                   size="sm"

frontend/components/editor/AIChat/types/index.ts

@@ -57,7 +57,7 @@ export interface AIChatProps {
   templateType: string
   templateConfig?: TemplateConfig
   projectName: string
-  handleApplyCode: (mergedCode: string) => void
+  handleApplyCode: (mergedCode: string, originalCode: string) => void
   mergeDecorationsCollection?: monaco.editor.IEditorDecorationsCollection
   setMergeDecorationsCollection?: (collection: undefined) => void
   selectFile: (tab: TTab) => void
@@ -110,7 +110,7 @@ export interface MessageProps {
   ) => void
   setIsContextExpanded: (isExpanded: boolean) => void
   socket: Socket | null
-  handleApplyCode: (mergedCode: string) => void
+  handleApplyCode: (mergedCode: string, originalCode: string) => void
   activeFileName: string
   activeFileContent: string
   editorRef: any

frontend/components/editor/index.tsx

@@ -384,10 +384,10 @@ export default function CodeEditor({
 
   // handle apply code
   const handleApplyCode = useCallback(
-    (mergedCode: string) => {
+    (mergedCode: string, originalCode: string) => {
       if (!editorRef) return
 
-      const originalLines = activeFileContent.split("\n")
+      const originalLines = originalCode.split("\n")
       const mergedLines = mergedCode.split("\n")
 
       const decorations: monaco.editor.IModelDeltaDecoration[] = []
@@ -397,32 +397,31 @@ export default function CodeEditor({
         i < Math.max(originalLines.length, mergedLines.length);
         i++
       ) {
-        if (originalLines[i] !== mergedLines[i]) {
+        // Only highlight new lines (green highlights)
+        if (i >= originalLines.length || originalLines[i] !== mergedLines[i]) {
           decorations.push({
             range: new monaco.Range(i + 1, 1, i + 1, 1),
             options: {
               isWholeLine: true,
-              className:
+              className: "added-line-decoration",
-                i < originalLines.length
+              glyphMarginClassName: "added-line-glyph",
-                  ? "removed-line-decoration"
-                  : "added-line-decoration",
-              glyphMarginClassName:
-                i < originalLines.length
-                  ? "removed-line-glyph"
-                  : "added-line-glyph",
             },
           })
         }
       }
 
-      // Update editor content
+      // Store original content in the model
+      const model = editorRef.getModel()
+      if (model) {
+        ;(model as any).originalContent = originalCode
+      }
       editorRef.setValue(mergedCode)
 
       // Apply decorations
       const newDecorations = editorRef.createDecorationsCollection(decorations)
       setMergeDecorationsCollection(newDecorations)
     },
-    [editorRef, activeFileContent]
+    [editorRef]
   )
 
   // Generate widget effect