diff --git a/package.json b/package.json
index eb2a9b7..f4ef7ca 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
     "antlr4": "4.7.2",
     "bootstrap": "4.4.1",
     "chroma-js": "2.1.0",
-    "diff": "4.0.2",
+    "diff": "^4.0.2",
+    "diff2html": "^3.4.48",
     "elementtree": "0.1.7",
     "marked": "4.0.12",
     "monaco-editor": "0.21.2",
@@ -16,6 +17,7 @@
     "openai": "^4.30.0",
     "path": "0.12.7",
     "pluralize": "7.0.0",
+    "prismjs": "^1.29.0",
     "rc-slider": "8.7.1",
     "rc-tooltip": "4.0.0-alpha.3",
     "react": "16.12.0",
@@ -41,7 +43,7 @@
   "scripts": {
     "start-Mac": "PORT=9010 react-app-rewired --max_old_space_size=8192 start",
     "start-Linux": "export SET NODE_OPTIONS=--openssl-legacy-provider PORT=9010 && react-app-rewired --max_old_space_size=8192 start",
-    "start-Windows": "set PORT = 9010 && react-app-rewired --max_old_space_size=8192 start",
+    "start-Windows": "set NODE_OPTIONS=--openssl-legacy-provider && set PORT=9010 && react-app-rewired --max_old_space_size=8192 start",
     "build": "react-app-rewired --max_old_space_size=8192 build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
diff --git a/public/index.html b/public/index.html
index c941313..58fb2be 100644
--- a/public/index.html
+++ b/public/index.html
@@ -29,7 +29,7 @@
 
     <script src="https://requirejs.org/docs/release/2.3.5/minified/require.js"></script>
 
-    <title>Active Documentation</title>
+    <title>DesignFix</title>
   </head>
   <body>
     <noscript>
diff --git a/src/activeLLM/suggestFix.js b/src/activeLLM/suggestFix.js
index 039df69..fee2e55 100644
--- a/src/activeLLM/suggestFix.js
+++ b/src/activeLLM/suggestFix.js
@@ -1,43 +1,287 @@
 import OpenAI from "openai";
 
+/**
+ * Validates whether the returned content is likely a full file or just a partial snippet.
+ * Returns an object with validation results.
+ */
+function validateFullFileContent(modifiedContent, originalContent) {
+    const result = {
+        isFullFile: true,
+        warnings: [],
+        confidence: 1.0
+    };
+
+    if (!modifiedContent || modifiedContent.trim().length === 0) {
+        result.isFullFile = false;
+        result.warnings.push("Modified content is empty");
+        result.confidence = 0;
+        return result;
+    }
+
+    const originalLines = originalContent.split('\n');
+    const modifiedLines = modifiedContent.split('\n');
+    const originalLineCount = originalLines.length;
+    const modifiedLineCount = modifiedLines.length;
+
+    // Check 1: Line count ratio - modified should be at least 70% of original
+    const lineRatio = modifiedLineCount / originalLineCount;
+    if (lineRatio < 0.7) {
+        result.isFullFile = false;
+        result.warnings.push(`Line count too low: ${modifiedLineCount} vs original ${originalLineCount} (${(lineRatio * 100).toFixed(1)}%)`);
+        result.confidence -= 0.3;
+    }
+
+    // Check 2: For Java files, check for package declaration
+    const originalHasPackage = /^\s*package\s+[\w.]+\s*;/m.test(originalContent);
+    const modifiedHasPackage = /^\s*package\s+[\w.]+\s*;/m.test(modifiedContent);
+    if (originalHasPackage && !modifiedHasPackage) {
+        result.isFullFile = false;
+        result.warnings.push("Missing package declaration");
+        result.confidence -= 0.25;
+    }
+
+    // Check 3: Check for import statements preservation
+    const originalImports = (originalContent.match(/^\s*import\s+[\w.*]+\s*;/gm) || []).length;
+    const modifiedImports = (modifiedContent.match(/^\s*import\s+[\w.*]+\s*;/gm) || []).length;
+    if (originalImports > 0 && modifiedImports < originalImports * 0.5) {
+        result.isFullFile = false;
+        result.warnings.push(`Missing imports: ${modifiedImports} vs original ${originalImports}`);
+        result.confidence -= 0.25;
+    }
+
+    // Check 4: Check for class/interface declaration
+    const originalHasClass = /^\s*(public\s+)?(abstract\s+)?(class|interface|enum)\s+\w+/m.test(originalContent);
+    const modifiedHasClass = /^\s*(public\s+)?(abstract\s+)?(class|interface|enum)\s+\w+/m.test(modifiedContent);
+    if (originalHasClass && !modifiedHasClass) {
+        result.isFullFile = false;
+        result.warnings.push("Missing class/interface declaration");
+        result.confidence -= 0.25;
+    }
+
+    // Check 5: Character length ratio
+    const charRatio = modifiedContent.length / originalContent.length;
+    if (charRatio < 0.5) {
+        result.isFullFile = false;
+        result.warnings.push(`Character count too low: ${modifiedContent.length} vs original ${originalContent.length} (${(charRatio * 100).toFixed(1)}%)`);
+        result.confidence -= 0.2;
+    }
+
+    result.confidence = Math.max(0, result.confidence);
+    result.isFullFile = result.confidence >= 0.7;
+
+    return result;
+}
+
+/**
+ * Attempts to merge a code snippet into the original file content.
+ * Uses context matching to find the right location for the snippet.
+ */
+function mergeSnippetIntoOriginal(snippet, originalContent, violationSnippet) {
+    console.log("Attempting to merge snippet into original file...");
+
+    const originalLines = originalContent.split('\n');
+    const snippetLines = snippet.split('\n').filter(line => line.trim().length > 0);
+
+    if (snippetLines.length === 0) {
+        console.warn("Snippet is empty, returning original content");
+        return originalContent;
+    }
+
+    // Strategy 1: Try to find the violation snippet in original and replace the matching region
+    if (violationSnippet && violationSnippet.trim().length > 0) {
+        const violationLines = violationSnippet.split('\n').filter(line => line.trim().length > 0);
+
+        if (violationLines.length > 0) {
+            // Find where the violation starts in the original
+            const violationStart = findSnippetLocation(originalLines, violationLines);
+
+            if (violationStart !== -1) {
+                console.log(`Found violation at line ${violationStart + 1}`);
+
+                // Find the extent of the violation in original
+                const violationEnd = violationStart + violationLines.length;
+
+                // Replace the violation region with the snippet
+                const beforeViolation = originalLines.slice(0, violationStart);
+                const afterViolation = originalLines.slice(violationEnd);
+
+                const merged = [...beforeViolation, ...snippetLines, ...afterViolation].join('\n');
+                console.log("Successfully merged snippet using violation location");
+                return merged;
+            }
+        }
+    }
+
+    // Strategy 2: Try to find context lines from the snippet in the original
+    // Look for the first few non-empty lines of the snippet in the original
+    const contextLines = snippetLines.slice(0, Math.min(3, snippetLines.length));
+    const snippetLocation = findSnippetLocation(originalLines, contextLines);
+
+    if (snippetLocation !== -1) {
+        console.log(`Found snippet context at line ${snippetLocation + 1}`);
+
+        // Replace from this location with the snippet
+        const beforeSnippet = originalLines.slice(0, snippetLocation);
+        const afterSnippet = originalLines.slice(snippetLocation + snippetLines.length);
+
+        const merged = [...beforeSnippet, ...snippetLines, ...afterSnippet].join('\n');
+        console.log("Successfully merged snippet using context matching");
+        return merged;
+    }
+
+    // Strategy 3: If snippet contains method signature, find and replace that method
+    const methodMatch = snippet.match(/^\s*(public|private|protected)?\s*(static)?\s*[\w<>\[\]]+\s+(\w+)\s*\([^)]*\)/m);
+    if (methodMatch) {
+        const methodName = methodMatch[3];
+        console.log(`Looking for method: ${methodName}`);
+
+        const methodLocation = findMethodInOriginal(originalLines, methodName);
+        if (methodLocation.start !== -1) {
+            console.log(`Found method ${methodName} at lines ${methodLocation.start + 1}-${methodLocation.end + 1}`);
+
+            const beforeMethod = originalLines.slice(0, methodLocation.start);
+            const afterMethod = originalLines.slice(methodLocation.end + 1);
+
+            const merged = [...beforeMethod, ...snippetLines, ...afterMethod].join('\n');
+            console.log("Successfully merged snippet by replacing method");
+            return merged;
+        }
+    }
+
+    console.warn("Could not find suitable merge location, returning original with snippet appended as comment");
+    // Last resort: return original with a warning comment
+    return originalContent + "\n\n// TODO: The following fix could not be automatically merged:\n/*\n" + snippet + "\n*/";
+}
+
+/**
+ * Finds the starting line index where a snippet appears in the original lines.
+ * Uses fuzzy matching to handle whitespace differences.
+ */
+function findSnippetLocation(originalLines, snippetLines) {
+    if (snippetLines.length === 0) return -1;
+
+    const normalize = (line) => line.trim().replace(/\s+/g, ' ');
+    const firstSnippetLine = normalize(snippetLines[0]);
+
+    for (let i = 0; i < originalLines.length; i++) {
+        if (normalize(originalLines[i]) === firstSnippetLine) {
+            // Check if subsequent lines also match
+            let allMatch = true;
+            for (let j = 1; j < snippetLines.length && (i + j) < originalLines.length; j++) {
+                if (normalize(originalLines[i + j]) !== normalize(snippetLines[j])) {
+                    allMatch = false;
+                    break;
+                }
+            }
+            if (allMatch) {
+                return i;
+            }
+        }
+    }
+    return -1;
+}
+
+/**
+ * Finds a method's start and end lines in the original content.
+ */
+function findMethodInOriginal(originalLines, methodName) {
+    const methodPattern = new RegExp(`^\\s*(public|private|protected)?\\s*(static)?\\s*[\\w<>\\[\\]]+\\s+${methodName}\\s*\\(`);
+
+    for (let i = 0; i < originalLines.length; i++) {
+        if (methodPattern.test(originalLines[i])) {
+            // Found method start, now find the end by counting braces
+            let braceCount = 0;
+            let methodStarted = false;
+
+            for (let j = i; j < originalLines.length; j++) {
+                const line = originalLines[j];
+                for (const char of line) {
+                    if (char === '{') {
+                        braceCount++;
+                        methodStarted = true;
+                    } else if (char === '}') {
+                        braceCount--;
+                    }
+                }
+                if (methodStarted && braceCount === 0) {
+                    return { start: i, end: j };
+                }
+            }
+            // If we couldn't find the end, return just the start
+            return { start: i, end: i };
+        }
+    }
+    return { start: -1, end: -1 };
+}
+
+/**
+ * Ensures the modified content is a full file by validating and merging if needed.
+ */
+function ensureFullFileContent(modifiedContent, originalContent, violationSnippet) {
+    const validation = validateFullFileContent(modifiedContent, originalContent);
+
+    console.log("Content validation result:", {
+        isFullFile: validation.isFullFile,
+        confidence: validation.confidence,
+        warnings: validation.warnings
+    });
+
+    if (validation.isFullFile) {
+        console.log("Content validated as full file");
+        return modifiedContent;
+    }
+
+    console.warn("Content appears to be partial, attempting to merge into original file");
+    return mergeSnippetIntoOriginal(modifiedContent, originalContent, violationSnippet);
+}
+
 export async function suggestFix(
     rule,
     example,
     violation,
+    surroundingCode,
     exampleFilePath,
     violationFilePath,
+    violationFileContent,
     setState,
 ) {
 
-    const prompt = `Here is a design rule and its description: ${rule}
-    Here is a code example that follows this design rule: ${example}
-    The example file path is ${exampleFilePath}
-    Now, here is a code snippet that violates this design rule: ${violation}
-    The violated code's file path is ${violationFilePath}
-    Can you suggest a fix to make this violation follow the given design rule?
-    Generate code with surrounding code included that follows the design rule.
-    Be sure to maintain proper whitespace with \\t and \\n.
-    Give a brief explanation of your fix as well.
-    Ensure to include the fileName of where to insert the fix in the format Example.java.
-    Strictly output in JSON format. The JSON should have the following format:{"code": "...", "explanation": "...", "fileName": "..."}`;
-
-    //the following prompt is an older version. It is commented out because the one used right now is more 
-    //concise and produces better output
-    /*const prompt = `Here is a design rule and its description: ${rule} 
-    Here is a code example that follows this design rule: ${example}
-    The example file path is ${exampleFilePath}
-    Now, here is a code snippet that violates this design rule. ${violation} 
-    The violated code's file path is ${violationFilePath}
-    Suggest a fix to make this violation follow the given design rule? 
-    Generate code with surrounding code included that follows the design rule. 
-    Be sure to maintain proper whitespace with \\t and \\n. 
-    Give a brief explanation of your fix as well. Strictly output in JSON format. 
-    Ensure that you include the fileName where the fix should be inserted at. 
-    This should just be in the format Example.java
-    The JSON should have the following format:{"code": "...", "explanation": "...", "fileName": "..."}`;*/
+    const promptA = `You are assisting with enforcing the following design rule:
+${rule}
+
+Here is a code example that follows the rule:
+${example}
+Example file path: ${exampleFilePath}
+
+<<<ORIGINAL_FILE_PATH>>>
+${violationFilePath}
+<<<END_ORIGINAL_FILE_PATH>>>
+
+<<<ORIGINAL_FILE_CONTENT>>>
+${violationFileContent}
+<<<END_ORIGINAL_FILE_CONTENT>>>
+
+Here is the surrounding class/method structure around the violation, showing the enclosing context:
+<<<SURROUNDING_CONTEXT>>>
+${surroundingCode}
+<<<END_SURROUNDING_CONTEXT>>>
+
+<<<VIOLATION_SNIPPET>>>
+${violation}
+<<<END_VIOLATION_SNIPPET>>>
+
+Rewrite the original file so it satisfies the rule while preserving every unrelated line verbatim. Constraints:
+- Copy every existing package declaration, import statement, comment, Javadoc, and formatting exactly as provided unless a specific line must change to satisfy the rule.
+- Do NOT delete or reorder imports; append new imports after the existing block if required.
+- When you modify a line, change only the minimal portion needed; leave all other lines identical.
+- Preserve indentation and whitespace on all untouched lines.
+
+Take your time and provide an unstructured response. Include: (1) a detailed explanation of your changes, (2) the fully rewritten file content, and (3) the target file name/path. Do not output JSON in this step.`;
 
     let attempt = 1;
     let success = false;
+    console.log("=== PROMPT SENT TO chatGPT ===");
+    //console.log(promptA);
 
     while (attempt <= 3 && !success) {
         try {
@@ -50,29 +294,62 @@ export async function suggestFix(
                 dangerouslyAllowBrowser: true,
             });
 
-            const chatCompletion = await openai.chat.completions.create({
-                model: "gpt-3.5-turbo",
+            const chatCompletionA = await openai.chat.completions.create({
+                model: "gpt-5.2",
                 temperature: 0.75,
-                messages: [{role: "user", content: prompt}],
+                messages: [{role: "user", content: promptA}],
             });
 
-            const suggestedSnippet = chatCompletion.choices[0].message.content;
+            const responseA = chatCompletionA.choices[0].message.content;
+
+            console.log("ReceivedResponseA from chatGPT:");
+            //console.log(responseA);
+
+            const promptB = `Here is the input prompt given to you to fix a design rule:
+${promptA}
+
+This is the response you generated:
+${responseA}
+
+Now, based on these, structure the response to this prompt in a structured JSON format. The JSON should have the following format: {\"explanation\":\"...\", \"code\":\"...\", \"fileName\":\"...\"}. \"code\" must be the fully rewritten file content. Return only JSON.`;
+
+            const chatCompletionB = await openai.chat.completions.create({
+                model: "gpt-5.2",
+                temperature: 0.2,
+                messages: [{role: "user", content: promptB}],
+            });
+
+            const suggestedSnippet = chatCompletionB.choices[0].message.content;
             const stripped = suggestedSnippet.replace(/^`json|`json$/g, "").trim();
             const parsedJSON = JSON.parse(stripped);
+            const rawModifiedContent = parsedJSON["modifiedFileContent"] ?? parsedJSON["code"] ?? "";
+            const explanation = parsedJSON["explanation"] ?? "";
+            const fileName = parsedJSON["fileName"] ?? violationFilePath ?? "";
+
+            // Validate and ensure full file content
+            const modifiedFileContent = ensureFullFileContent(
+                rawModifiedContent,
+                violationFileContent,
+                violation
+            );
+
+            console.log("Final Solution from chatGPT received:");
+            //console.log(parsedJSON);
 
             // sets the relevant state in the React component that made the request
             // see ../ui/rulePanel.js for more details
-            setState({suggestedSnippet: parsedJSON["code"]});
-            setState({snippetExplanation: parsedJSON["explanation"]});
-            setState({suggestionFileName: parsedJSON["fileName"]});
+            setState({suggestedSnippet: modifiedFileContent});
+            setState({snippetExplanation: explanation});
+            setState({suggestionFileName: fileName});
 
             const llmModifiedFileContent = {
                 command: "LLM_MODIFIED_FILE_CONTENT",
                 data: {
                     filePath: `${violationFilePath}`,
-                    fileToChange: `${parsedJSON["fileName"]}`,
-                    modifiedFileContent: `${parsedJSON["code"]}`,
-                    explanation: `${parsedJSON["explanation"]}`,
+                    fileToChange: `${fileName}`,
+                    modifiedFileContent: modifiedFileContent,
+                    explanation: explanation,
+                    originalFileContent: violationFileContent,
                 },
             };
 
@@ -80,6 +357,7 @@ export async function suggestFix(
             setState({llmModifiedFileContent: llmModifiedFileContent});
 
             success = true;
+            return llmModifiedFileContent;
         } catch (error) {
             console.log(error);
             success = false;
@@ -87,3 +365,4 @@ export async function suggestFix(
         }
     }
 }
+
diff --git a/src/core/ActiveLLM.code-workspace b/src/core/ActiveLLM.code-workspace
new file mode 100644
index 0000000..00d0a72
--- /dev/null
+++ b/src/core/ActiveLLM.code-workspace
@@ -0,0 +1,7 @@
+{
+	"folders": [
+		{
+			"path": "../../.."
+		}
+	]
+}
\ No newline at end of file
diff --git a/src/core/coreConstants.js b/src/core/coreConstants.js
index 2817b0d..5dda3cc 100644
--- a/src/core/coreConstants.js
+++ b/src/core/coreConstants.js
@@ -1,11 +1,14 @@
 export const webSocketSendMessage = {
+    send_info_for_edit_fix:"SEND_INFO_FOR_EDIT_FIX",
     modified_rule_msg: "MODIFIED_RULE",
     modified_tag_msg: "MODIFIED_TAG",
     snippet_xml_msg: "XML_RESULT",
+    llm_modified_file_content: "LLM_MODIFIED_FILE_CONTENT",
     converted_java_snippet_msg: "CONVERTED_JAVA_SNIPPET",
     code_to_xml_msg: "EXPR_STMT",
     new_rule_msg: "NEW_RULE",
     new_tag_msg: "NEW_TAG",
+    send_llm_snippet_msg: "LLM_SNIPPET",
 
     open_file_msg: "OPEN_FILE",
 
@@ -18,6 +21,7 @@ export const webSocketSendMessage = {
 };
 
 export const webSocketReceiveMessage = {
+    receive_content_for_edit_fix: "RECEIVE_CONTENT_FOR_EDIT_FIX",
     xml_files_msg: "XML",
     rule_table_msg: "RULE_TABLE",
     tag_table_msg: "TAG_TABLE",
diff --git a/src/core/utilities.js b/src/core/utilities.js
index 15d38d6..7ddb5c4 100644
--- a/src/core/utilities.js
+++ b/src/core/utilities.js
@@ -30,6 +30,40 @@ class Utilities {
                         tagInfo: data
                     };
                     break;
+
+                case webSocketSendMessage.send_llm_snippet_msg:
+                    console.log("In command");
+                    console.log(data);
+                    messageJson.data={
+                        code:data.suggestedSnippet,
+                        explanation:data.snippetExplanation
+                    }
+                    break;
+
+                case webSocketSendMessage.send_info_for_edit_fix:
+                    messageJson.data={
+                        filePathOfSuggestedFix:data.data.fileToChange,
+                        filePathOfViolation:data.data.filePath,
+                        modifiedFileContent:data.data.modifiedFileContent
+                    }
+                    break;
+                
+                
+                case webSocketSendMessage.llm_modified_file_content:
+                    if (!data.llmModifiedFileContent) {
+                        console.warn('No LLM modified file content to send.');
+                        return;
+                    }
+
+                    messageJson.data = {
+                        filePath: data.llmModifiedFileContent.data.filePath,
+                        explanation: data.llmModifiedFileContent.data.explanation,
+                        fileToChange: data.llmModifiedFileContent.data.fileToChange,
+                        modifiedFileContent: data.llmModifiedFileContent.data.modifiedFileContent,
+                        originalFileContent: data.originalFileContent || data.llmModifiedFileContent.data.originalFileContent || '',
+                    }
+
+                    break;
                 case webSocketSendMessage.snippet_xml_msg:
                     messageJson.data = {
                         fileName: data.fileName,
@@ -246,4 +280,4 @@ class Utilities {
 
 }
 
-export default Utilities;
\ No newline at end of file
+export default Utilities;
diff --git a/src/core/webSocketManager.js b/src/core/webSocketManager.js
index 15254cd..cb0ff07 100644
--- a/src/core/webSocketManager.js
+++ b/src/core/webSocketManager.js
@@ -5,6 +5,7 @@
 import {Component} from "react";
 import {connect} from "react-redux";
 
+
 import {
     receiveExpressionStatementXML,
     ignoreFileChange, updateFilePath,
@@ -51,6 +52,7 @@ class WebSocketManager extends Component {
             
             switch (message.command) {
 
+
                 case webSocketReceiveMessage.enter_chat_msg:
                     this.props.onLoadingGif(true);
                     break;
@@ -170,17 +172,25 @@ class WebSocketManager extends Component {
 
                 case webSocketReceiveMessage.file_change_in_ide_msg:
                     // data: "filePath"
+            
                     let focusedFilePath = message.data;
-                    if (!this.props.ignoreFileChange) {
-                        this.props.onFilePathChange(focusedFilePath);
-                        window.location.hash = `#/${hashConst.rulesForFile}/` + focusedFilePath.replace(/\//g, "%2F");
-                    } else {
-                        counter--;
-                        if (counter === 0) {
-                            this.props.onFalsifyIgnoreFile();
-                            counter = 3;
-                        }
+                    console.log("File name: ");
+                    console.log(focusedFilePath);
+                    focusedFilePath = String(focusedFilePath);
+                    
+                    if(!focusedFilePath.includes("edit_fix_window")){
+                        if (!this.props.ignoreFileChange) {
+                            this.props.onFilePathChange(focusedFilePath);
+                            window.location.hash = `#/${hashConst.rulesForFile}/` + focusedFilePath.replace(/\//g, "%2F");
+                        } else {
+                            counter--;
+                            if (counter === 0) {
+                                this.props.onFalsifyIgnoreFile();
+                                counter = 3;
+                            }
+                        }                        
                     }
+
                     break;
 
                 /* Mining Rules */
diff --git a/src/prism-vs.css b/src/prism-vs.css
new file mode 100644
index 0000000..54377df
--- /dev/null
+++ b/src/prism-vs.css
@@ -0,0 +1,168 @@
+/**
+ * VS theme by Andrew Lock (https://andrewlock.net)
+ * Inspired by Visual Studio syntax coloring
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #393A34;
+	font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	font-size: .9em;
+	line-height: 1.2em;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre > code[class*="language-"] {
+	font-size: 1em;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+	background: #C1DEF1;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+	background: #C1DEF1;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+	border: 1px solid #dddddd;
+	background-color: white;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .2em;
+	padding-top: 1px;
+	padding-bottom: 1px;
+	background: #f8f8f8;
+	border: 1px solid #dddddd;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #008000;
+	font-style: italic;
+}
+
+.token.namespace {
+	opacity: .7;
+}
+
+.token.string {
+	color: #A31515;
+}
+
+.token.punctuation,
+.token.operator {
+	color: #393A34; /* no highlight */
+}
+
+.token.url,
+.token.symbol,
+.token.number,
+.token.boolean,
+.token.variable,
+.token.constant,
+.token.inserted {
+	color: #36acaa;
+}
+
+.token.atrule,
+.token.keyword,
+.token.attr-value,
+.language-autohotkey .token.selector,
+.language-json .token.boolean,
+.language-json .token.number,
+code[class*="language-css"] {
+	color: #0000ff;
+}
+
+.token.function {
+	color: #393A34;
+}
+
+.token.deleted,
+.language-autohotkey .token.tag {
+	color: #9a050f;
+}
+
+.token.selector,
+.language-autohotkey .token.keyword {
+	color: #00009f;
+}
+
+.token.important {
+	color: #e90;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.class-name,
+.language-json .token.property {
+	color: #2B91AF;
+}
+
+.token.tag,
+.token.selector {
+	color: #800000;
+}
+
+.token.attr-name,
+.token.property,
+.token.regex,
+.token.entity {
+	color: #ff0000;
+}
+
+.token.directive.tag .tag {
+	background: #ffff00;
+	color: #393A34;
+}
+
+/* overrides color-values for the Line Numbers plugin
+ * http://prismjs.com/plugins/line-numbers/
+ */
+.line-numbers.line-numbers .line-numbers-rows {
+	border-right-color: #a5a5a5;
+}
+
+.line-numbers .line-numbers-rows > span:before {
+	color: #2B91AF;
+}
+
+/* overrides color-values for the Line Highlight plugin
+* http://prismjs.com/plugins/line-highlight/
+*/
+.line-highlight.line-highlight {
+	background: rgba(193, 222, 241, 0.2);
+	background: -webkit-linear-gradient(left, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0));
+	background: linear-gradient(to right, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0));
+}
diff --git a/src/prism-vsc-dark-plus.css b/src/prism-vsc-dark-plus.css
new file mode 100644
index 0000000..d3bd501
--- /dev/null
+++ b/src/prism-vsc-dark-plus.css
@@ -0,0 +1,275 @@
+pre[class*="language-"],
+code[class*="language-"] {
+	color: #d4d4d4;
+	font-size: 13px;
+	text-shadow: none;
+	font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	line-height: 1.5;
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre[class*="language-"]::selection,
+code[class*="language-"]::selection,
+pre[class*="language-"] *::selection,
+code[class*="language-"] *::selection {
+	text-shadow: none;
+	background: #264F78;
+}
+
+@media print {
+	pre[class*="language-"],
+	code[class*="language-"] {
+		text-shadow: none;
+	}
+}
+
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+	background: #1e1e1e;
+}
+
+:not(pre) > code[class*="language-"] {
+	padding: .1em .3em;
+	border-radius: .3em;
+	color: #db4c69;
+	background: #1e1e1e;
+}
+/*********************************************************
+* Tokens
+*/
+.namespace {
+	opacity: .7;
+}
+
+.token.doctype .token.doctype-tag {
+	color: #569CD6;
+}
+
+.token.doctype .token.name {
+	color: #9cdcfe;
+}
+
+.token.comment,
+.token.prolog {
+	color: #6a9955;
+}
+
+.token.punctuation,
+.language-html .language-css .token.punctuation,
+.language-html .language-javascript .token.punctuation {
+	color: #d4d4d4;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.inserted,
+.token.unit {
+	color: #b5cea8;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.deleted {
+	color: #ce9178;
+}
+
+.language-css .token.string.url {
+	text-decoration: underline;
+}
+
+.token.operator,
+.token.entity {
+	color: #d4d4d4;
+}
+
+.token.operator.arrow {
+	color: #569CD6;
+}
+
+.token.atrule {
+	color: #ce9178;
+}
+
+.token.atrule .token.rule {
+	color: #c586c0;
+}
+
+.token.atrule .token.url {
+	color: #9cdcfe;
+}
+
+.token.atrule .token.url .token.function {
+	color: #dcdcaa;
+}
+
+.token.atrule .token.url .token.punctuation {
+	color: #d4d4d4;
+}
+
+.token.keyword {
+	color: #569CD6;
+}
+
+.token.keyword.module,
+.token.keyword.control-flow {
+	color: #c586c0;
+}
+
+.token.function,
+.token.function .token.maybe-class-name {
+	color: #dcdcaa;
+}
+
+.token.regex {
+	color: #d16969;
+}
+
+.token.important {
+	color: #569cd6;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.constant {
+	color: #9cdcfe;
+}
+
+.token.class-name,
+.token.maybe-class-name {
+	color: #4ec9b0;
+}
+
+.token.console {
+	color: #9cdcfe;
+}
+
+.token.parameter {
+	color: #9cdcfe;
+}
+
+.token.interpolation {
+	color: #9cdcfe;
+}
+
+.token.punctuation.interpolation-punctuation {
+	color: #569cd6;
+}
+
+.token.boolean {
+	color: #569cd6;
+}
+
+.token.property,
+.token.variable,
+.token.imports .token.maybe-class-name,
+.token.exports .token.maybe-class-name {
+	color: #9cdcfe;
+}
+
+.token.selector {
+	color: #d7ba7d;
+}
+
+.token.escape {
+	color: #d7ba7d;
+}
+
+.token.tag {
+	color: #569cd6;
+}
+
+.token.tag .token.punctuation {
+	color: #808080;
+}
+
+.token.cdata {
+	color: #808080;
+}
+
+.token.attr-name {
+	color: #9cdcfe;
+}
+
+.token.attr-value,
+.token.attr-value .token.punctuation {
+	color: #ce9178;
+}
+
+.token.attr-value .token.punctuation.attr-equals {
+	color: #d4d4d4;
+}
+
+.token.entity {
+	color: #569cd6;
+}
+
+.token.namespace {
+	color: #4ec9b0;
+}
+/*********************************************************
+* Language Specific
+*/
+
+pre[class*="language-javascript"],
+code[class*="language-javascript"],
+pre[class*="language-jsx"],
+code[class*="language-jsx"],
+pre[class*="language-typescript"],
+code[class*="language-typescript"],
+pre[class*="language-tsx"],
+code[class*="language-tsx"] {
+	color: #9cdcfe;
+}
+
+pre[class*="language-css"],
+code[class*="language-css"] {
+	color: #ce9178;
+}
+
+pre[class*="language-html"],
+code[class*="language-html"] {
+	color: #d4d4d4;
+}
+
+.language-regex .token.anchor {
+	color: #dcdcaa;
+}
+
+.language-html .token.punctuation {
+	color: #808080;
+}
+/*********************************************************
+* Line highlighting
+*/
+pre[class*="language-"] > code[class*="language-"] {
+	position: relative;
+	z-index: 1;
+}
+
+.line-highlight.line-highlight {
+	background: #f7ebc6;
+	box-shadow: inset 5px 0 0 #f7d87c;
+	z-index: 0;
+}
diff --git a/src/ui/rulePanel.js b/src/ui/rulePanel.js
index d10a6d4..4fb6dcb 100644
--- a/src/ui/rulePanel.js
+++ b/src/ui/rulePanel.js
@@ -8,7 +8,7 @@ import { connect } from "react-redux";
 import "../index.css";
 import "../App.css";
 import {
-    Tab, Tabs, Badge, FormGroup, ControlLabel, Label, Collapse
+    Tab, Tabs, Badge, FormGroup, ControlLabel, Label, Collapse, Button
 } from "react-bootstrap";
 import { FaCaretDown, FaCaretUp } from "react-icons/fa";
 import { MdEdit } from "react-icons/md";
@@ -21,7 +21,14 @@ import { webSocketSendMessage } from "../core/coreConstants";
 import { relatives } from "../core/ruleExecutorConstants";
 import { hashConst, none_filePath } from "./uiConstants";
 
-import { suggestFix } from "../activeLLM/suggestFix";
+import { suggestFix} from "../activeLLM/suggestFix";
+import Prism from 'prismjs';
+import '../../src/prism-vs.css'; // Choose any theme you like
+
+// Import the language syntax for Java
+import 'prismjs/components/prism-java';
+
+import WebSocketManager from "../core/webSocketManager";
 
 class RulePanel extends Component {
 
@@ -387,6 +394,7 @@ class RulePanel extends Component {
             return list.map((d, i) => {
                 return (
                     <SnippetView
+                        xmlFiles={this.props.xmlFiles}
                         key={i}
                         d={d}
                         snippetGroup={group}
@@ -469,6 +477,7 @@ class RulePanel extends Component {
 // map state to props
 function mapStateToProps(state) {
     return {
+        xmlFiles: state.xmlFiles,
         rules: state.ruleTable,
         tagTable: state.tagTable,
         codeChanged: state.currentHash[0] === hashConst.codeChanged,
@@ -503,36 +512,219 @@ class SnippetView extends Component {
             snippetExplanation: null,
             suggestionFileName: null,
             llmModifiedFileContent: null,
+            fixButtonClicked: false,
+            originalFileContent: ''
         };
+        //this.onReceiveEditFixContent = this.onReceiveEditFixContent.bind(this);
+    }
+
+    saveConversationToSessionStorage = (key, conversationHistory) => {
+        sessionStorage.setItem(key, JSON.stringify(conversationHistory));
     }
 
+    getConversationFromSessionStorage = (key) => {
+        const history = sessionStorage.getItem(key);
+        return history ? JSON.parse(history) : [];
+    }
+
+    clearConversationFromSessionStorage = (key) => {
+        sessionStorage.removeItem(key);
+    }
+
+
     handleSuggestion = async (
         rule,
         example,
         snippet,
+        surroundingCode,
         exampleFilePath,
         violationFilePath,
+        key
     ) => {
         const parsedSnippet = Utilities.removeSrcmlAnnotations(snippet);
         const parsedExample = Utilities.removeSrcmlAnnotations(example);
+        const parsedSurroundingCode = Utilities.removeSrcmlAnnotations(surroundingCode);
+
+        const normalizePath = (filePath) => filePath.replace(/\\/g, '/');
+        const targetPath = normalizePath(violationFilePath);
+        let violationFileContent = '';
+        if (this.props.xmlFiles && this.props.xmlFiles.length > 0) {
+            const matchingFile = this.props.xmlFiles.find((file) => normalizePath(file.filePath) === targetPath);
+            if (matchingFile) {
+                violationFileContent = Utilities.removeSrcmlAnnotations(matchingFile.xml);
+            } else {
+                const targetFileName = targetPath.split('/').pop();
+                const fallbackMatch = this.props.xmlFiles.find((file) => normalizePath(file.filePath).endsWith(`/${targetFileName}`));
+                if (fallbackMatch) {
+                    violationFileContent = Utilities.removeSrcmlAnnotations(fallbackMatch.xml);
+                }
+            }
+        }
+
+        this.setState({ fixButtonClicked: true, originalFileContent: violationFileContent });
+
         // prevent multiple calls to suggestFix
         if (!this.state.suggestionCreated) {
-            suggestFix(
+            const conversationHistory = await suggestFix(
                 rule,
                 parsedExample,
                 parsedSnippet,
+                parsedSurroundingCode,
                 exampleFilePath,
                 violationFilePath,
+                violationFileContent,
                 this.setState.bind(this),
             );
+
+            this.saveConversationToSessionStorage(key, conversationHistory);
+
             // notify the component that this snippet now has a suggested fix
             this.setState({ suggestionCreated: true });
         }
     };
 
+
+
+    handleEditFix = async (suggestionFileName, uniqueKey) => {
+
+        const convHistory = this.getConversationFromSessionStorage(uniqueKey);
+        //console.log("convHistory");
+        //console.log(convHistory);
+
+
+        const xmlFiles = this.props.xmlFiles;
+
+
+
+        // Function to extract the file name from the filePath
+        const extractFileName = (filePath) => {
+            const parts = filePath.split('/');
+            return parts[parts.length - 1];
+        };
+
+        // Iterate over xmlFiles to find the matching file
+        const matchingFile = xmlFiles.find(file => extractFileName(file.filePath) === suggestionFileName);
+        let codeOfSuggestionFile = '';
+
+        if (matchingFile) {
+            console.log("Found matching file:");
+            //console.log(matchingFile.xml);
+            codeOfSuggestionFile = Utilities.removeSrcmlAnnotations(matchingFile.xml);
+            // Do something with the matchingFile.xml here
+
+            //console.log("before getting into normalizeFunction");
+            //console.log(codeOfSuggestionFile);
+
+            //console.log("after normalizeFunction");
+            //console.log(codeOfSuggestionFile);
+        } else {
+            console.log("No matching file found");
+        }
+        //console.log("Matching file content");
+        //console.log(codeOfSuggestionFile);
+        const originalCode = Utilities.removeSrcmlAnnotations(this.state.d.surroundingNodes);
+        const modifiedCode = convHistory.data.modifiedFileContent;
+        const diff = this.generateDiff(originalCode, modifiedCode);
+        //console.log("THE DIFF");
+        //console.log(diff);
+
+
+
+        // Define the processDiff function inside handleEditFix
+        const processDiff = (diffArray) => {
+            return diffArray.map(diff => {
+                let message = '';
+                if (diff.type === 'added') {
+                    message = 'This line was added by you as part of solution: ';
+                } else if (diff.type === 'removed') {
+                    message = 'This line was removed by you as part of solution: ';
+                }
+                return message + diff.text;
+            });
+        };
+
+        const processedDiff = processDiff(diff);
+
+        // Join all the elements into a single string with each element on a separate line
+        const resultText = processedDiff.join('\n');
+
+        console.log(resultText);
+
+        const response = await editFix(codeOfSuggestionFile, resultText, this.setState.bind(this));
+    }
+
+    generateDiff = (originalCode, modifiedCode) => {
+        const normalizeForComparison = (line) => line.replace(/^\s+/, '').replace(/\s+$/, '');
+        const originalLines = originalCode.split('\n');
+        const modifiedLines = modifiedCode.split('\n');
+
+        const originalCounts = new Map();
+        originalLines.forEach((line) => {
+            const key = normalizeForComparison(line);
+            originalCounts.set(key, (originalCounts.get(key) || 0) + 1);
+        });
+
+        const remainingOriginalCounts = new Map(originalCounts);
+        const diff = [];
+
+        modifiedLines.forEach((line) => {
+            const key = normalizeForComparison(line);
+            const remaining = remainingOriginalCounts.get(key) || 0;
+            if (remaining > 0) {
+                remainingOriginalCounts.set(key, remaining - 1);
+            } else {
+                diff.push({ type: 'added', text: line });
+            }
+        });
+
+        originalLines.forEach((line) => {
+            const key = normalizeForComparison(line);
+            const remaining = remainingOriginalCounts.get(key) || 0;
+            if (remaining > 0) {
+                diff.push({ type: 'removed', text: line });
+                remainingOriginalCounts.set(key, remaining - 1);
+            }
+        });
+
+        console.log('DIFF');
+        console.log(diff);
+
+        return diff;
+    };
+
+    renderDiff = () => {
+        const originalCode = this.state.originalFileContent;
+        const modifiedCode = this.state.suggestedSnippet || '';
+        const diff = this.generateDiff(originalCode, modifiedCode);
+
+        const highlightCode = (code) => {
+            return Prism.highlight(code, Prism.languages.java, 'java');
+        };
+
+        return (
+            <div className="diff-container" style={{ fontFamily: 'monospace', whiteSpace: 'pre', border: '1px solid #d6d6d6', borderRadius: '7px', padding: '1px' }}>
+                {diff.map((line, index) => (
+                    <div
+                        key={index}
+                        style={{
+                            backgroundColor: 'white'
+                        }}
+                    >
+                        <span style={{ color: line.type === 'added' ? 'green' : 'red' }}>
+                            {line.type === 'added' ? '+' : '-'}
+                        </span>
+                        <span dangerouslySetInnerHTML={{ __html: highlightCode(line.text) }}></span>
+                    </div>
+                ))}
+            </div>
+        );
+    };
+
+
     render() {
-        // NOTE: These styles can be moved to index.css in the future.
-        // There was an issue with that, so this is a quick fix
+        const uniqueKey = this.state.d.filePath;
+        const apiKey = localStorage.getItem("OPENAI_API_KEY");
+
         const titleStyle = {
             color: "#333",
             fontSize: "1.10em",
@@ -555,14 +747,42 @@ class SnippetView extends Component {
         };
 
         const buttonParent = {
-            position: "absolute",
-            top: "0",
-            right: "0",
+            position: "relative",
+            //top: "0",
+            //right: "0",
             zIndex: "1",
         };
 
-        // Store the API key in a variable
-        const apiKey = localStorage.getItem("OPENAI_API_KEY");
+        const containerStyle = {
+            display: "flex",
+            flexDirection: "column",
+            width: "100%",
+            padding: "10px",
+            border: "1px solid grey",
+            marginTop: "2px",
+            borderRadius: "5px"
+        };
+
+        const paneStyle = {
+            padding: "10px",
+            borderBottom: "1px solid grey",
+            marginTop: "2px",
+            borderRadius: "0px"
+        };
+
+        const highlightCode = (code) => {
+            return Prism.highlight(code, Prism.languages.java, 'java');
+        };
+
+        const wrapperStyle = {
+            display: 'flex',
+            alignItems: 'center',
+            width: '100%',
+        };
+
+        const contentStyle = {
+            flex: 1,
+        };
 
         return (
             <section>
@@ -573,6 +793,7 @@ class SnippetView extends Component {
                 >
                     <div
                         className="link"
+                        style={paneStyle}
                         onClick={() => {
                             this.props.onIgnoreFile(true);
                             Utilities.sendToServer(
@@ -582,81 +803,169 @@ class SnippetView extends Component {
                             );
                         }}
                     >
-                        <pre
-                            className="content"
-                            dangerouslySetInnerHTML={{ __html: this.state.d.snippet }}
-                        />
-
-                        <span style={buttonParent}>
-                            {/* render the following IF this is a violation of a rule and there is no fix yet */}
-                            {this.state.snippetGroup === "violated" &&
-                                // Use the apiKey variable in the conditional rendering check
-                                apiKey !== null &&
-                                apiKey !== "" &&
-                                !this.state.suggestedSnippet && (
-                                    <button
-                                        onClick={() =>
-                                            this.handleSuggestion(
-                                                this.state.description,
-                                                this.state.exampleSnippet,
-                                                this.state.d.surroundingNodes,
-                                                this.state.exampleFilePath,
-                                                this.state.d.filePath,
-                                            )
-                                        }
-                                        style={buttonStyle}
-                                    >
-                                        Fix ✨
-                                    </button>
-                                )}
-                        </span>
+                        <h2 style={titleStyle}>Violated Code Snippet </h2>
+                        <div style={wrapperStyle}>
+                            <pre
+                                className="content"
+                                style={contentStyle}
+                                dangerouslySetInnerHTML={{ __html: highlightCode(Utilities.removeSrcmlAnnotations(this.state.d.snippet)) }}
+                            />
+
+
+
+                            <span style={buttonParent}>
+                                {/* render the following IF this is a violation of a rule and there is no fix yet */}
+                                {this.state.snippetGroup === "violated" &&
+                                    apiKey !== null &&
+                                    apiKey !== "" &&
+                                    !this.state.suggestedSnippet && (
+                                        <button
+                                            onClick={(e) => {
+                                                e.stopPropagation(); // Prevent the div's onClick from firing
+                                                this.handleSuggestion(
+                                                    this.state.description,
+                                                    this.state.exampleSnippet,
+                                                    this.state.d.snippet,
+                                                    this.state.d.surroundingNodes,
+                                                    this.state.exampleFilePath,
+                                                    this.state.d.filePath,
+                                                    uniqueKey
+                                                );
+                                            }}
+                                            style={{ ...buttonStyle, backgroundColor: '#3B71CA', color: 'white' }}
+                                        >
+                                            Fix ✨
+                                        </button>
+                                    )}
+                            </span>
+                        </div>
                     </div>
 
-                    {this.state.suggestionCreated && !this.state.suggestedSnippet && (
-                        <h2 style={{ color: 'black', fontSize: '1.25em', fontWeight:'bold' ,textAlign: 'center' }}>Loading Fix...</h2>
+                    {!this.state.suggestionCreated && this.state.fixButtonClicked && (
+                        <h2 style={{ color: 'black', fontSize: '1.25em', fontWeight: 'bold', textAlign: 'center' }}>Loading Fix...</h2>
                     )}
 
+                    {this.state.suggestionCreated && this.state.suggestedSnippet && (
+                        <div style={containerStyle}>
+                            {/*<div style={paneStyle}>*/}
+                            {/*                                <h2 style={titleStyle}>Suggested Fix:</h2>
+                                <pre
+                                    className="content"
+                                    dangerouslySetInnerHTML={{ __html: highlightCode(this.state.suggestedSnippet) }}
+                                />*/}
+
+                            <div style={paneStyle}>
+
+                                <h2 style={titleStyle}>Suggestion Location:</h2>
+                                <p
+                                    className="content"
+                                    style={{
+                                        fontFamily: 'monospace',
+                                        whiteSpace: 'pre-wrap',
+                                        overflowWrap: 'anywhere',
+                                        wordBreak: 'break-word',
+                                    }}
+                                    dangerouslySetInnerHTML={{ __html: highlightCode(this.state.suggestionFileName) }}
+                                />
+                            </div>
+
+
+                            <div style={paneStyle}>
+                                <h2 style={titleStyle}>Suggested Fix:</h2>
+                                {this.renderDiff()}
+                            </div>
+
+                            <div style={paneStyle}>
+                                <h2 style={titleStyle}>Explanation:</h2>
+                                <p
+                                    className="content"
+                                    style={{
+                                        fontFamily: 'monospace',
+                                        whiteSpace: 'pre-wrap',
+                                        overflowWrap: 'anywhere',
+                                        wordBreak: 'break-word',
+                                    }}
+                                    dangerouslySetInnerHTML={{
+                                        __html: this.state.snippetExplanation,
+                                    }}
+                                />
+                            </div>
+
+
+
+                            <div style={{
+                                display: 'flex',
+                                justifyContent: 'center',
+                                gap: '5px',
+                                padding: '2px',
+                                //border: '1px solid grey',
+                                //borderRadius: '5px',
+                                marginTop: '2px'
+                            }}>
+                                <button
+                                    onClick={() => {
+                                        this.props.onIgnoreFile(true);
+                                        if (!this.state.llmModifiedFileContent) {
+                                            console.warn('No LLM fix available to accept.');
+                                            return;
+                                        }
+                                        const llmPayload = {
+                                            ...this.state.llmModifiedFileContent,
+                                            data: {
+                                                ...this.state.llmModifiedFileContent.data,
+                                                originalFileContent: this.state.originalFileContent,
+                                            }
+                                        };
+                                        Utilities.sendToServer(
+                                            this.props.ws,
+                                            webSocketSendMessage.llm_modified_file_content,
+                                            {
+                                                llmModifiedFileContent: llmPayload,
+                                                originalFileContent: this.state.originalFileContent
+                                            }
+
+                                        );
+                                        console.log(this.state.llmModifiedFileContent);
+                                    }}
+                                    style={{ ...buttonStyle, backgroundColor: '#3B71CA', color: 'white' }}
+                                >
+                                    Accept Fix
+                                </button>
+                                {/*<button
+                                    onClick={(e) => {
+                                        e.stopPropagation(); // Prevent the div's onClick from firing
+                                        Utilities.sendToServer(
+                                            this.props.ws,
+                                            webSocketSendMessage.send_llm_snippet_msg,
+                                            {
+                                                suggestedSnippet: this.state.suggestedSnippet,
+                                                snippetExplanation:this.state.snippetExplanation,
+                                                //violatedCode: Utilities.removeSrcmlAnnotations(this.state.d.surroundingNodes)
+                                            }
+
+                                        );
+                                    }}
+                                    style={{ ...buttonStyle, marginLeft: '10px', backgroundColor: '#9FA6B2', color: 'white' }} // Inline styling for the new button
+                                >
+                                    Edit Fix
+                                </button>
+
+                                <button
+                                    onClick={(e) => {
+                                        e.stopPropagation(); // Prevent the div's onClick from firing
+                                        this.handleEditFix(
+                                            this.state.suggestionFileName,
+                                            uniqueKey
+                                        );
+                                    }}
+                                    style={{ ...buttonStyle, marginLeft: '10px', backgroundColor: 'green', color: 'white' }} // Inline styling for the new button
+                                >
+                                    Regenerate Fix
+                                </button>*/}
+
+
+                            </div>
 
-                    {/* render the following IF the component state has received snippet */}
-                    {this.state.suggestedSnippet && (
-                        <div>
-                            <h2 style={titleStyle}>Suggested Fix:</h2>
-                            <pre
-                                className="content"
-                                dangerouslySetInnerHTML={{
-                                    __html: this.state.suggestedSnippet,
-                                }}
-                            />
-                            <h2 style={titleStyle}>Suggestion Location:</h2>
-                            <p
-                                className="content"
-                                dangerouslySetInnerHTML={{
-                                    __html: this.state.suggestionFileName,
-                                }}
-                            />
-                            <h2 style={titleStyle}>Explanation:</h2>
-                            <p
-                                className="content"
-                                dangerouslySetInnerHTML={{
-                                    __html: this.state.snippetExplanation,
-                                }}
-                            />
-
-                            <button
-                                // send the suggested fix and the explanation to to plugin
-                                onClick={() => {
-                                    this.props.onIgnoreFile(true);
-                                    Utilities.sendToServer(
-                                        this.props.ws,
-                                        webSocketSendMessage.snippet_xml_msg,
-                                        this.state.llmModifiedFileContent,
-                                    );
-                                    console.log(this.state.llmModifiedFileContent);
-                                }}
-                                style={buttonStyle}
-                            >
-                                Accept Fix
-                            </button>
                         </div>
                     )}
                 </div>
@@ -672,4 +981,4 @@ class SnippetView extends Component {
             exampleFilePath: nextProps.exampleFilePath
         });
     }
-}
\ No newline at end of file
+}
