Refactor: Enhance file handling and code editing functionality

frontend/src/components/CodeEditor.tsx

@@ -1,29 +1,51 @@
+import React, { useMemo, useState, useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useDispatch, useSelector } from "react-redux";
 import Editor, { Monaco } from "@monaco-editor/react";
-import { Tab, Tabs } from "@nextui-org/react";
+import { Tab, Tabs, Button } from "@nextui-org/react";
+import { VscCode, VscSave, VscCheck } from "react-icons/vsc";
 import type { editor } from "monaco-editor";
-import React, { useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import { VscCode } from "react-icons/vsc";
-import { useSelector } from "react-redux";
 import { I18nKey } from "#/i18n/declaration";
 import { RootState } from "#/store";
 import FileExplorer from "./file-explorer/FileExplorer";
+import { setCode } from "#/state/codeSlice";
+import toast from "#/utils/toast";
+import { saveFile } from "#/services/fileService";
+import AgentState from "#/types/AgentState";
 
 function CodeEditor(): JSX.Element {
   const { t } = useTranslation();
+  const dispatch = useDispatch();
   const code = useSelector((state: RootState) => state.code.code);
   const activeFilepath = useSelector((state: RootState) => state.code.path);
+  const agentState = useSelector((state: RootState) => state.agent.curAgentState);
+  const [lastSaved, setLastSaved] = useState<string | null>(null);
+  const [saveStatus, setSaveStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle');
+  const [showSaveNotification, setShowSaveNotification] = useState(false);
 
   const selectedFileName = useMemo(() => {
     const paths = activeFilepath.split("/");
     return paths[paths.length - 1];
   }, [activeFilepath]);
 
-  const handleEditorDidMount = (
+  const isEditingAllowed = useMemo(() => {
+    return agentState === AgentState.PAUSED || 
+           agentState === AgentState.FINISHED || 
+           agentState === AgentState.AWAITING_USER_INPUT;
+  }, [agentState]);
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+    if (saveStatus === 'saved') {
+      timer = setTimeout(() => setSaveStatus('idle'), 3000);
+    }
+    return () => clearTimeout(timer);
+  }, [saveStatus]);
+
+  const handleEditorDidMount = useCallback((
     editor: editor.IStandaloneCodeEditor,
-    monaco: Monaco,
-  ) => {
-    // 定义一个自定义主题 - English: Define a custom theme
+    monaco: Monaco
+  ): void => {
     monaco.editor.defineTheme("my-theme", {
       base: "vs-dark",
       inherit: true,
@@ -33,50 +55,121 @@ function CodeEditor(): JSX.Element {
       },
     });
 
-    // 应用自定义主题 - English: apply custom theme
     monaco.editor.setTheme("my-theme");
+  }, []);
+
+  const handleEditorChange = useCallback((value: string | undefined): void => {
+    if (value !== undefined && isEditingAllowed) {
+      dispatch(setCode(value));
+      setSaveStatus('idle');
+    }
+  }, [dispatch, isEditingAllowed]);
+
+  const handleSave = useCallback(async (): Promise<void> => {
+    if (saveStatus === 'saving' || !isEditingAllowed) return;
+
+    setSaveStatus('saving');
+    setLastSaved(null);
+
+    try {
+      await saveFile(activeFilepath, code);
+      const now = new Date().toLocaleTimeString();
+      setLastSaved(now);
+      setSaveStatus('saved');
+      setShowSaveNotification(true);
+      setTimeout(() => setShowSaveNotification(false), 2000);
+      toast.success("File saved successfully!", "Save Successful");
+      console.log(`File "${selectedFileName}" has been saved.`);
+    } catch (error) {
+      console.error("Error saving file:", error);
+      setSaveStatus('error');
+      if (error instanceof Error) {
+        toast.error(`Failed to save file: ${error.message}`, "Save Error");
+      } else {
+        toast.error("An unknown error occurred while saving the file", "Save Error");
+      }
+    }
+  }, [saveStatus, activeFilepath, code, selectedFileName, isEditingAllowed]);
+
+  const getSaveButtonColor = () => {
+    switch (saveStatus) {
+      case 'saving': return 'bg-yellow-600';
+      case 'saved': return 'bg-green-600';
+      case 'error': return 'bg-red-600';
+      default: return 'bg-blue-600';
+    }
   };
 
   return (
-    <div className="flex h-full w-full bg-neutral-900 transition-all duration-500 ease-in-out">
+    <div className="flex h-full w-full bg-neutral-900 transition-all duration-500 ease-in-out relative">
       <FileExplorer />
       <div className="flex flex-col min-h-0 w-full">
-        <Tabs
-          disableCursorAnimation
-          classNames={{
-            base: "border-b border-divider border-neutral-600 mb-4",
-            tabList:
-              "w-full relative rounded-none bg-neutral-900 p-0 border-divider",
-            cursor: "w-full bg-neutral-600 rounded-none",
-            tab: "max-w-fit px-4 h-[36px]",
-            tabContent: "group-data-[selected=true]:text-white",
-          }}
-          aria-label="Options"
-        >
-          <Tab
-            key={selectedFileName.toLocaleLowerCase()}
-            title={selectedFileName}
-          />
-        </Tabs>
+        <div className="flex justify-between items-center border-b border-neutral-600 mb-4">
+          <Tabs
+            disableCursorAnimation
+            classNames={{
+              base: "w-full",
+              tabList:
+                "w-full relative rounded-none bg-neutral-900 p-0 border-divider",
+              cursor: "w-full bg-neutral-600 rounded-none",
+              tab: "max-w-fit px-4 h-[36px]",
+              tabContent: "group-data-[selected=true]:text-white",
+            }}
+            aria-label="Options"
+          >
+            <Tab
+              key={selectedFileName.toLowerCase()}
+              title={selectedFileName || "No file selected"}
+            />
+          </Tabs>
+          {selectedFileName && (
+            <div className="flex items-center mr-2">
+              <Button
+                onClick={handleSave}
+                className={`${getSaveButtonColor()} text-white transition-colors duration-300 mr-2`}
+                size="sm"
+                startContent={<VscSave />}
+                disabled={saveStatus === 'saving' || !isEditingAllowed}
+              >
+                {saveStatus === 'saving' ? "Saving..." : "Save"}
+              </Button>
+              {lastSaved && (
+                <span className="text-xs text-gray-400">
+                  Last saved: {lastSaved}
+                </span>
+              )}
+            </div>
+          )}
+        </div>
         <div className="flex grow items-center justify-center">
-          {selectedFileName === "" ? (
+          {!selectedFileName ? (
             <div className="flex flex-col items-center text-neutral-400">
               <VscCode size={100} />
               {t(I18nKey.CODE_EDITOR$EMPTY_MESSAGE)}
             </div>
           ) : (
             <Editor
               height="100%"
-              path={selectedFileName.toLocaleLowerCase()}
+              path={selectedFileName.toLowerCase()}
               defaultValue=""
               value={code}
               onMount={handleEditorDidMount}
+              onChange={handleEditorChange}
+              options={{ readOnly: !isEditingAllowed }}
             />
           )}
         </div>
       </div>
+      {showSaveNotification && (
+        <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2">
+          <div className="bg-green-500 text-white px-4 py-2 rounded-lg flex items-center justify-center animate-pulse">
+            <VscCheck className="mr-2 text-xl" />
+            <span>File saved successfully</span>
+          </div>
+        </div>
+      )}
     </div>
   );
 }
 
-export default CodeEditor;
+export default CodeEditor;

frontend/src/services/fileService.ts

@@ -1,23 +1,57 @@
 import { request } from "./api";
 
 export async function selectFile(file: string): Promise<string> {
-  const data = await request(`/api/select-file?file=${file}`);
-  return data.code as string;
+  try {
+    const data = await request(`/api/select-file?file=${encodeURIComponent(file)}`);
+    if (typeof data.code !== 'string') {
+      throw new Error('Invalid response format: code is not a string');
+    }
+    return data.code;
+  } catch (error) {
+    console.error('Error selecting file:', error);
+    throw error;
+  }
 }
 
-export async function uploadFiles(files: FileList) {
-  const formData = new FormData();
-  for (let i = 0; i < files.length; i += 1) {
-    formData.append("files", files[i]);
-  }
+export async function uploadFiles(files: FileList): Promise<void> {
+  try {
+    const formData = new FormData();
+    Array.from(files).forEach(file => formData.append("files", file));
 
-  await request("/api/upload-files", {
-    method: "POST",
-    body: formData,
-  });
+    await request("/api/upload-files", {
+      method: "POST",
+      body: formData,
+    });
+  } catch (error) {
+    console.error('Error uploading files:', error);
+    throw error;
+  }
 }
 
 export async function listFiles(path: string = "/"): Promise<string[]> {
-  const data = await request(`/api/list-files?path=${path}`);
-  return data as string[];
+  try {
+    const data = await request(`/api/list-files?path=${encodeURIComponent(path)}`);
+    if (!Array.isArray(data)) {
+      throw new Error('Invalid response format: data is not an array');
+    }
+    return data;
+  } catch (error) {
+    console.error('Error listing files:', error);
+    throw error;
+  }
+}
+
+export async function saveFile(filePath: string, content: string): Promise<void> {
+  try {
+    await request("/api/save-file", {
+      method: "POST",
+      body: JSON.stringify({ filePath, content }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  } catch (error) {
+    console.error('Error saving file:', error);
+    throw error;
+  }
 }