edit tool first take

Author: RomneyDa

core/tools/builtIn.ts

@@ -1,5 +1,6 @@
 export enum BuiltInToolNames {
   ReadFile = "builtin_read_file",
+  EditExistingFile = "builtin_edit_existing_file",
   ReadCurrentlyOpenFile = "builtin_read_currently_open_file",
   CreateNewFile = "builtin_create_new_file",
   RunTerminalCommand = "builtin_run_terminal_command",

core/tools/callTool.ts

@@ -4,6 +4,7 @@ import { canParseUrl } from "../util/url";
 import { BuiltInToolNames } from "./builtIn";
 
 import { createNewFileImpl } from "./implementations/createNewFile";
+import { editFileImpl } from "./implementations/editFile";
 import { exactSearchImpl } from "./implementations/exactSearch";
 import { lsToolImpl } from "./implementations/lsTool";
 import { readCurrentlyOpenFileImpl } from "./implementations/readCurrentlyOpenFile";
@@ -138,6 +139,8 @@ export async function callTool(
   switch (uri) {
     case BuiltInToolNames.ReadFile:
       return await readFileImpl(args, extras);
+    case BuiltInToolNames.EditExistingFile:
+      return await editFileImpl(args, extras);
     case BuiltInToolNames.CreateNewFile:
       return await createNewFileImpl(args, extras);
     case BuiltInToolNames.ExactSearch:

core/tools/definitions/editFile.ts

@@ -0,0 +1,28 @@
+import { Tool } from "../..";
+import { BUILT_IN_GROUP_NAME, BuiltInToolNames } from "../builtIn";
+
+export const editFileTool: Tool = {
+  type: "function",
+  displayTitle: "Edit File",
+  wouldLikeTo: "edit {{{ filepath }}}",
+  isCurrently: "editing {{{ filepath }}}",
+  hasAlready: "edited {{{ filepath }}}",
+  group: BUILT_IN_GROUP_NAME,
+  readonly: false,
+  function: {
+    name: BuiltInToolNames.EditExistingFile,
+    description:
+      "To edit an existing file, call this tool and follow the returned instructions. If you don't have the contents of the file, read it first.",
+    parameters: {
+      type: "object",
+      required: ["filepath"],
+      properties: {
+        filepath: {
+          type: "string",
+          description:
+            "The path of the file to edit, relative to the root of the workspace.",
+        },
+      },
+    },
+  },
+};

core/tools/implementations/editFile.ts

@@ -0,0 +1,22 @@
+import { ToolImpl } from ".";
+import { resolveRelativePathInDir } from "../../util/ideUtils";
+
+export const EDIT_TOOL_CONTEXT_ITEM_NAME = "Edit Tool Instructions";
+
+export const editFileImpl: ToolImpl = async (args, extras) => {
+  const firstUriMatch = await resolveRelativePathInDir(
+    args.filepath,
+    extras.ide,
+  );
+  if (!firstUriMatch) {
+    throw new Error(`File ${args.filepath} does not exist.`);
+  }
+  return [
+    {
+      name: EDIT_TOOL_CONTEXT_ITEM_NAME,
+      description: "Instructions for editing the file",
+      content:
+        "Edit Instructions: return the full new file contents in a codeblock. The codeblock header should be of the format '```language filepath'",
+    },
+  ];
+};

core/tools/index.ts

@@ -1,4 +1,5 @@
 import { createNewFileTool } from "./definitions/createNewFile";
+import { editFileTool } from "./definitions/editFile";
 import { exactSearchTool } from "./definitions/exactSearch";
 import { lsTool } from "./definitions/lsTool";
 import { readCurrentlyOpenFileTool } from "./definitions/readCurrentlyOpenFile";
@@ -9,6 +10,7 @@ import { viewDiffTool } from "./definitions/viewDiff";
 
 export const allTools = [
   readFileTool,
+  editFileTool,
   createNewFileTool,
   runTerminalCommandTool,
 

gui/src/components/markdown/StepContainerPreToolbar/StepContainerPreToolbar.tsx

@@ -3,7 +3,6 @@ import { inferResolvedUriFromRelativePath } from "core/util/ideUtils";
 import { debounce } from "lodash";
 import { useContext, useEffect, useRef, useState } from "react";
 import styled from "styled-components";
-import { v4 as uuidv4 } from "uuid";
 import {
   defaultBorderRadius,
   vscCommandCenterInactiveBorder,
@@ -52,17 +51,18 @@ export interface StepContainerPreToolbarProps {
   relativeFilepath: string;
   isGeneratingCodeBlock: boolean;
   codeBlockIndex: number; // To track which codeblock we are applying
+  codeBlockStreamId: string;
   range?: string;
   children: any;
   expanded?: boolean;
   hideApply?: boolean;
+  autoApply?: boolean;
 }
 
 export default function StepContainerPreToolbar(
   props: StepContainerPreToolbarProps,
 ) {
   const ideMessenger = useContext(IdeMessengerContext);
-  const streamIdRef = useRef<string>(uuidv4());
   const wasGeneratingRef = useRef(props.isGeneratingCodeBlock);
   const isInEditMode = useAppSelector(selectIsInEditMode);
   const [isExpanded, setIsExpanded] = useState(
@@ -76,7 +76,7 @@ export default function StepContainerPreToolbar(
   );
 
   const applyState = useAppSelector((state) =>
-    selectApplyStateByStreamId(state, streamIdRef.current),
+    selectApplyStateByStreamId(state, props.codeBlockStreamId),
   );
 
   // This handles an edge case when the last node in the markdown syntax tree is a codeblock.
@@ -104,7 +104,7 @@ export default function StepContainerPreToolbar(
     );
 
     ideMessenger.post("applyToFile", {
-      streamId: streamIdRef.current,
+      streamId: props.codeBlockStreamId,
       filepath: fileUri,
       text: codeBlockContent,
       curSelectedModelTitle: defaultModel.title,
@@ -135,19 +135,25 @@ export default function StepContainerPreToolbar(
     }
   }, [props.children, codeBlockContent]);
 
-  // Temporarily disabling auto apply for Edit mode
   // useEffect(() => {
   //   const hasCompletedGenerating =
   //     wasGeneratingRef.current && !isGeneratingCodeBlock;
-
-  //   const shouldAutoApply = hasCompletedGenerating && isInEditMode;
-
-  //   if (shouldAutoApply) {
-  //     onClickApply();
-  //   }
-
+  //   console.log(
+  //     wasGeneratingRef.current,
+  //     isGeneratingCodeBlock,
+  //     props.autoApply,
+  //   );
   //   wasGeneratingRef.current = isGeneratingCodeBlock;
-  // }, [isGeneratingCodeBlock]);
+  //   if (hasCompletedGenerating) {
+  //     console.log("Completed generating", props.autoApply);
+  //     if (props.autoApply) {
+  //       onClickApply();
+  //     }
+  //     // else if(isInEditMode) {
+  //     //   onClickApply();
+  //     // }
+  //   }
+  // }, [wasGeneratingRef, isGeneratingCodeBlock, props.autoApply]);
 
   async function onClickAcceptApply() {
     const fileUri = await inferResolvedUriFromRelativePath(
@@ -156,7 +162,7 @@ export default function StepContainerPreToolbar(
     );
     ideMessenger.post("acceptDiff", {
       filepath: fileUri,
-      streamId: streamIdRef.current,
+      streamId: props.codeBlockStreamId,
     });
   }
 
@@ -167,7 +173,7 @@ export default function StepContainerPreToolbar(
     );
     ideMessenger.post("rejectDiff", {
       filepath: fileUri,
-      streamId: streamIdRef.current,
+      streamId: props.codeBlockStreamId,
     });
   }
 

gui/src/components/markdown/StyledMarkdownPreview.tsx

@@ -1,5 +1,5 @@
 import { ctxItemToRifWithContents } from "core/commands/util";
-import { memo, useEffect, useMemo } from "react";
+import { memo, useEffect, useMemo, useRef } from "react";
 import { useRemark } from "react-remark";
 import rehypeHighlight, { Options } from "rehype-highlight";
 import rehypeKatex from "rehype-katex";
@@ -196,6 +196,10 @@ const StyledMarkdownPreview = memo(function StyledMarkdownPreview(
   }, [props.itemIndex, history, allSymbols]);
   const pastFileInfoRef = useUpdatingRef(pastFileInfo);
 
+  const codeblockState = useRef<{ streamId: string; isGenerating: boolean }[]>(
+    [],
+  );
+
   const [reactContent, setMarkdownSource] = useRemark({
     remarkPlugins: [
       remarkTables,
@@ -282,8 +286,6 @@ const StyledMarkdownPreview = memo(function StyledMarkdownPreview(
           const { className, range } = preChildProps;
           const relativeFilePath = preChildProps["data-relativefilepath"];
           const codeBlockContent = preChildProps["data-codeblockcontent"];
-          const isGeneratingCodeBlock =
-            preChildProps["data-isgeneratingcodeblock"];
 
           if (!props.isRenderingInStepContainer) {
             return <SyntaxHighlightedPre {...preProps} />;
@@ -307,6 +309,18 @@ const StyledMarkdownPreview = memo(function StyledMarkdownPreview(
             );
           }
 
+          const isGeneratingCodeBlock =
+            preChildProps["data-isgeneratingcodeblock"];
+
+          if (codeblockState.current[codeBlockIndex] === undefined) {
+            codeblockState.current[codeBlockIndex] = {
+              streamId: uuidv4(),
+              isGenerating: isGeneratingCodeBlock,
+            };
+          }
+          const codeblockStreamId =
+            codeblockState.current[codeBlockIndex].streamId;
+
           // We use a custom toolbar for codeblocks in the step container
           return (
             <StepContainerPreToolbar
@@ -316,6 +330,8 @@ const StyledMarkdownPreview = memo(function StyledMarkdownPreview(
               relativeFilepath={relativeFilePath}
               isGeneratingCodeBlock={isGeneratingCodeBlock}
               range={range}
+              autoApply={false}
+              codeBlockStreamId={codeblockStreamId}
             >
               <SyntaxHighlightedPre {...preProps} />
             </StepContainerPreToolbar>

gui/src/redux/slices/uiSlice.ts

@@ -45,6 +45,7 @@ export const uiSlice = createSlice({
     ttsActive: false,
     toolSettings: {
       [BuiltInToolNames.ReadFile]: "allowedWithoutPermission",
+      [BuiltInToolNames.EditExistingFile]: "allowedWithPermission",
       [BuiltInToolNames.CreateNewFile]: "allowedWithPermission",
       [BuiltInToolNames.RunTerminalCommand]: "allowedWithPermission",
       [BuiltInToolNames.ViewSubdirectory]: "allowedWithoutPermission",