feat: migrate prototype of ai-optimized-editor feature

src/components/ai-optimized-editor.tsx

@@ -1,101 +1,219 @@
 "use client";
 
-import { useCallback, useState } from "react";
+import { useState } from "react";
 import { DiffEditor } from "@monaco-editor/react";
 import { optimizeCode } from "@/app/actions/ai-improve";
-import type { OptimizeCodeInput } from "@/types/ai-improve";
+import { OptimizeCodeInput } from "@/types/ai-improve";
-import { CoreEditor } from "./core-editor"; // 引入你刚刚的组件
+import dynamic from "next/dynamic";
-// import { Loading } from "@/components/loading";
+import { highlighter } from "@/lib/shiki";
-import type { LanguageServerConfig } from "@/generated/client";
+import type { editor } from "monaco-editor";
+import { Loading } from "@/components/loading";
+import { shikiToMonaco } from "@shikijs/monaco";
+import { useProblem } from "@/hooks/use-problem";
+import type { Monaco } from "@monaco-editor/react";
+import { useCallback, useEffect, useRef } from "react";
+import { connectToLanguageServer } from "@/lib/language-server";
+import type { MonacoLanguageClient } from "monaco-languageclient";
+import { DefaultEditorOptionConfig } from "@/config/editor-option";
 
-interface AIEditorWrapperProps {
+// 动态导入Monaco Editor
-  language?: string;
+const Editor = dynamic(
-  value?: string;
+    async () => {
-  path?: string;
+        await import("vscode");
+        const monaco = await import("monaco-editor");
+
+        self.MonacoEnvironment = {
+            getWorker(_, label) {
+                if (label === "json") {
+                    return new Worker(
+                        new URL("monaco-editor/esm/vs/language/json/json.worker.js", import.meta.url)
+                    );
+                }
+                if (label === "css" || label === "scss" || label === "less") {
+                    return new Worker(
+                        new URL("monaco-editor/esm/vs/language/css/css.worker.js", import.meta.url)
+                    );
+                }
+                if (label === "html" || label === "handlebars" || label === "razor") {
+                    return new Worker(
+                        new URL("monaco-editor/esm/vs/language/html/html.worker.js", import.meta.url)
+                    );
+                }
+                if (label === "typescript" || label === "javascript") {
+                    return new Worker(
+                        new URL("monaco-editor/esm/vs/language/typescript/ts.worker.js", import.meta.url)
+                    );
+                }
+                return new Worker(
+                    new URL("monaco-editor/esm/vs/editor/editor.worker.js", import.meta.url)
+                );
+            },
+        };
+        const { loader } = await import("@monaco-editor/react");
+        loader.config({ monaco });
+        return (await import("@monaco-editor/react")).Editor;
+    },
+    {
+        ssr: false,
+        loading: () => <Loading />,
+    }
+);
+
+export function AIProblemEditor({
+                                    initialCode = "",
+                                    problemId = "",
+                                    onCodeChange
+                                }: {
+    initialCode?: string;
     problemId?: string;
-  languageServerConfigs?: LanguageServerConfig[];
+    onCodeChange?: (code: string) => void;
-  onChange?: (value: string) => void;
+}) {
-  className?: string;
+    const {
-}
+        editor,
+        setEditor,
+        setMarkers,
+        setWebSocket,
+        currentLang,
+        currentPath,
+        currentTheme,
+        currentValue,
+        changeValue,
+        currentEditorLanguageConfig,
+        currentLanguageServerConfig,
+    } = useProblem();
 
-export const AIEditorWrapper = ({
+    const monacoLanguageClientRef = useRef<MonacoLanguageClient | null>(null);
-                                  language,
+
-                                  value,
+    // 保持原有AI优化的状态
-                                  path,
+    const [showDiff, setShowDiff] = useState(false);
-                                  problemId,
-                                  languageServerConfigs,
-                                  onChange,
-                                  // className,
-                                }: AIEditorWrapperProps) => {
-  const [currentCode, setCurrentCode] = useState(value ?? "");
     const [optimizedCode, setOptimizedCode] = useState("");
     const [isOptimizing, setIsOptimizing] = useState(false);
     const [error, setError] = useState<string | null>(null);
-  const [showDiff, setShowDiff] = useState(false);
 
-  const handleCodeChange = useCallback((val: string) => {
+    // 重用useProblem的状态管理
-    setCurrentCode(val);
+    const currentCode = currentValue || initialCode;
-    onChange?.(val);
+
-  }, [onChange]);
+    const handleCodeChange = useCallback((value: string | undefined) => {
+        if (value !== undefined) {
+            changeValue(value);
+            if (onCodeChange) {
+                onCodeChange(value);
+            }
+        }
+    }, [onCodeChange, changeValue]);
+
+    // 保持原有LSP连接逻辑
+    const connectLSP = useCallback(async () => {
+        if (!(currentLang && editor)) return;
+
+        if (monacoLanguageClientRef.current) {
+            monacoLanguageClientRef.current.stop();
+            monacoLanguageClientRef.current = null;
+            setWebSocket(null);
+        }
+
+        if (!currentEditorLanguageConfig || !currentLanguageServerConfig) return;
+
+        try {
+            const { client: monacoLanguageClient, webSocket } = await connectToLanguageServer(
+                currentEditorLanguageConfig,
+                currentLanguageServerConfig
+            );
+            monacoLanguageClientRef.current = monacoLanguageClient;
+            setWebSocket(webSocket);
+        } catch (error) {
+            console.error("Failed to connect to LSP:", error);
+        }
+    }, [
+        currentEditorLanguageConfig,
+        currentLang,
+        currentLanguageServerConfig,
+        editor,
+        setWebSocket,
+    ]);
+
+    useEffect(() => {
+        connectLSP();
+    }, [connectLSP]);
+
+    useEffect(() => {
+        return () => {
+            if (monacoLanguageClientRef.current) {
+                monacoLanguageClientRef.current.stop();
+                monacoLanguageClientRef.current = null;
+                setWebSocket(null);
+            }
+        };
+    }, [setWebSocket]);
+
+    const handleEditorWillMount = useCallback((monaco: Monaco) => {
+        shikiToMonaco(highlighter, monaco);
+    }, []);
+
+    const handleOnMount = useCallback(
+        async (editor: editor.IStandaloneCodeEditor) => {
+            setEditor(editor);
+            await connectLSP();
+        },
+        [setEditor, connectLSP]
+    );
+
+    const handleEditorValidation = useCallback(
+        (markers: editor.IMarker[]) => {
+            setMarkers(markers);
+        },
+        [setMarkers]
+    );
+
+    const handleOptimizeCode = useCallback(async () => {
+        if (!currentCode || !problemId) return;
 
-  const handleOptimize = useCallback(async () => {
-    if (!problemId || !currentCode) return;
         setIsOptimizing(true);
         setError(null);
 
         try {
             const input: OptimizeCodeInput = {
                 code: currentCode,
-        problemId,
+                problemId
             };
+
             const result = await optimizeCode(input);
             setOptimizedCode(result.optimizedCode);
             setShowDiff(true);
         } catch (err) {
-      setError("AI 优化失败，请稍后重试");
+            setError("代码优化失败，请重试");
             console.error(err);
         } finally {
             setIsOptimizing(false);
         }
     }, [currentCode, problemId]);
 
-  const handleApplyOptimized = useCallback(() => {
-    setCurrentCode(optimizedCode);
-    onChange?.(optimizedCode);
-    setShowDiff(false);
-  }, [optimizedCode, onChange]);
-
     return (
         <div className="flex flex-col h-full w-full">
-        <div className="flex items-center justify-between p-4">
+            {/* 保持原有AI优化按钮 */}
+            <div className="flex justify-between items-center p-4">
                 <button
-              onClick={handleOptimize}
+                    onClick={handleOptimizeCode}
-              disabled={isOptimizing}
+                    disabled={isOptimizing || !currentCode}
-              className="px-4 py-2 bg-primary text-white rounded hover:bg-primary/90"
+                    className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
                 >
                     {isOptimizing ? "优化中..." : "AI优化代码"}
                 </button>
 
                 {showDiff && (
-              <div className="space-x-2">
                     <button
-                    onClick={() => setShowDiff(false)}
+                        onClick={() => setShowDiff(!showDiff)}
-                    className="px-4 py-2 bg-secondary text-white rounded"
+                        className="px-4 py-2 bg-secondary text-secondary-foreground rounded-md"
                     >
-                  隐藏对比
+                        {"隐藏对比"}
                     </button>
-                <button
-                    onClick={handleApplyOptimized}
-                    className="px-4 py-2 bg-green-500 text-white rounded"
-                >
-                  应用优化结果
-                </button>
-              </div>
                 )}
             </div>
 
             {error && (
-            <div className="p-3 bg-red-100 text-red-600 rounded-md">{error}</div>
+                <div className="p-3 bg-destructive/10 text-destructive rounded-md">
+                    {error}
+                </div>
             )}
 
             <div className="flex-grow overflow-hidden">
@@ -103,22 +221,30 @@ export const AIEditorWrapper = ({
                     <DiffEditor
                         original={currentCode}
                         modified={optimizedCode}
-                  language={language}
+                        language={currentLang}
-                  theme="vs-dark"
+                        theme={currentTheme}
                         className="h-full w-full"
-                  options={{ readOnly: true, minimap: { enabled: false } }}
+                        options={{
+                            readOnly: true,
+                            minimap: { enabled: false }
+                        }}
                     />
                 ) : (
-              <CoreEditor
+                    <Editor
-                  language={language}
+                        language={currentLang}
+                        theme={currentTheme}
+                        path={currentPath}
                         value={currentCode}
-                  path={path}
+                        beforeMount={handleEditorWillMount}
-                  languageServerConfigs={languageServerConfigs}
+                        onMount={handleOnMount}
                         onChange={handleCodeChange}
+                        onValidate={handleEditorValidation}
+                        options={DefaultEditorOptionConfig}
+                        loading={<Loading />}
                         className="h-full w-full"
                     />
                 )}
             </div>
         </div>
     );
-};
+}