From cfe3ca89d2ab0a8f458ae8d111f93970eb9f23b4 Mon Sep 17 00:00:00 2001
From: ngc2207 <cfngc3109@gmail.com>
Date: Tue, 12 Nov 2024 20:27:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BD=BF=E7=94=A8DiffEditor=E6=9B=BF?=
 =?UTF-8?q?=E6=8D=A2=E4=BB=A3=E7=A0=81=E7=BC=96=E8=BE=91=E5=99=A8=EF=BC=8C?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0AI=E7=94=9F=E6=88=90=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/snippet-edit-form.tsx | 37 +++++++++++++++++++++++-----
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/components/snippet-edit-form.tsx b/src/components/snippet-edit-form.tsx
index ac02c7f..bafb2f7 100644
--- a/src/components/snippet-edit-form.tsx
+++ b/src/components/snippet-edit-form.tsx
@@ -3,7 +3,7 @@
 import { useState } from "react";
 import * as actions from "@/actions";
 import { Snippet } from "@prisma/client";
-import { Editor } from "@monaco-editor/react";
+import { DiffEditor, Editor } from "@monaco-editor/react";
 
 interface SnippetEditFormProps {
   snippet: Snippet;
@@ -11,6 +11,8 @@ interface SnippetEditFormProps {
 
 export default function SnippetEditForm({ snippet }: SnippetEditFormProps) {
   const [code, setCode] = useState(snippet.code);
+  const [originalCode, setOriginalCode] = useState(snippet.code);
+  const [modifiedCode, setModifiedCode] = useState(snippet.code);
 
   const handleEditorChange = (value: string = "") => {
     setCode(value);
@@ -18,21 +20,44 @@ export default function SnippetEditForm({ snippet }: SnippetEditFormProps) {
 
   const editSnippetAction = actions.editSnippet.bind(null, snippet.id, code);
 
+  const handleAskAI = () => {
+    setModifiedCode("AI generated code");
+  };
+
   return (
-    <div>
-      <Editor
+    <div className="flex flex-col">
+      {/* <Editor
         height="40vh"
         theme="vs-light"
         language="c"
         defaultValue={snippet.code}
         options={{ minimap: { enabled: false } }}
         onChange={handleEditorChange}
+      /> */}
+      <DiffEditor
+        height="40vh"
+        theme="vs-light"
+        language="c"
+        original={originalCode}
+        modified={modifiedCode}
+        options={{ minimap: { enabled: false } }}
       />
-      <form action={editSnippetAction} className="flex justify-end pr-4">
-        <button type="submit" className="p-2 border rounded">
+      <div className="flex items-center justify-end gap-4">
+        <button
+          type="submit"
+          className="p-2 border rounded"
+          onClick={handleAskAI}
+        >
+          Ask AI
+        </button>
+        <button
+          type="submit"
+          className="p-2 border rounded"
+          onClick={editSnippetAction}
+        >
           Save
         </button>
-      </form>
+      </div>
     </div>
   );
 }