wip: remove attach file checkbox. (#644)

* wip: remove attach file checkbox.

* feat: attach files button.

* test: active file is no longer attached by default.

* add an event for the ide to attach a file to chat.

* fix: remove attached files after submit.

Author: MarcMcIntosh

refact-agent/gui/src/components/ChatForm/ChatControls.tsx

@@ -8,6 +8,7 @@ import {
   Box,
   Switch,
   Badge,
+  Button,
 } from "@radix-ui/themes";
 import { Select } from "../Select";
 import { type Config } from "../../features/Config/configSlice";
@@ -36,6 +37,7 @@ import {
   setToolUse,
 } from "../../features/Chat/Thread";
 import { useAppSelector, useAppDispatch, useCapsForToolUse } from "../../hooks";
+import { useAttachedFiles } from "./useCheckBoxes";
 
 export const ApplyPatchSwitch: React.FC = () => {
   const dispatch = useAppDispatch();
@@ -223,6 +225,7 @@ export type ChatControlsProps = {
   ) => void;
 
   host: Config["host"];
+  attachedFiles: ReturnType<typeof useAttachedFiles>;
 };
 
 const ChatControlCheckBox: React.FC<{
@@ -294,6 +297,7 @@ export const ChatControls: React.FC<ChatControlsProps> = ({
   checkboxes,
   onCheckedChange,
   host,
+  attachedFiles,
 }) => {
   const refs = useTourRefs();
   const dispatch = useAppDispatch();
@@ -343,6 +347,18 @@ export const ChatControls: React.FC<ChatControlsProps> = ({
         );
       })}
 
+      {host !== "web" && (
+        <Button
+          title="Attach current file"
+          onClick={attachedFiles.addFile}
+          disabled={!attachedFiles.activeFile.name || attachedFiles.attached}
+          size="1"
+          radius="medium"
+        >
+          Attach: {attachedFiles.activeFile.name}
+        </Button>
+      )}
+
       {showControls && (
         <Flex gap="2" direction="column">
           <ToolUseSwitch

refact-agent/gui/src/components/ChatForm/ChatForm.test.tsx

@@ -115,11 +115,7 @@ describe("ChatForm", () => {
     await user.type(textarea, "foo");
     await user.keyboard("{Enter}");
     const markdown = "```python\nprint(1)\n```\n";
-    const cursor = app.store.getState().active_file.cursor;
-
-    const expected = `@file foo.txt:${
-      cursor ? cursor + 1 : 1
-    }\n${markdown}\nfoo\n`;
+    const expected = `${markdown}\nfoo\n`;
     expect(fakeOnSubmit).toHaveBeenCalledWith(expected);
   });
 

refact-agent/gui/src/components/ChatForm/ChatForm.tsx

@@ -19,7 +19,6 @@ import {
   useSendChatRequest,
   useCompressChat,
   useAutoFocusOnce,
-  // useTotalTokenUsage,
 } from "../../hooks";
 import { ErrorCallout, Callout } from "../Callout";
 import { ComboBox } from "../ComboBox";
@@ -30,17 +29,16 @@ import { useCommandCompletionAndPreviewFiles } from "./useCommandCompletionAndPr
 import { useAppSelector, useAppDispatch } from "../../hooks";
 import { clearError, getErrorMessage } from "../../features/Errors/errorsSlice";
 import { useTourRefs } from "../../features/Tour";
-import { useCheckboxes } from "./useCheckBoxes";
+import { useAttachedFiles, useCheckboxes } from "./useCheckBoxes";
 import { useInputValue } from "./useInputValue";
 import {
   clearInformation,
   getInformationMessage,
-  // setInformation,
 } from "../../features/Errors/informationSlice";
 import { InformationCallout } from "../Callout/Callout";
 import { ToolConfirmation } from "./ToolConfirmation";
 import { getPauseReasonsWithPauseStatus } from "../../features/ToolConfirmation/confirmationSlice";
-import { AttachFileButton, FileList } from "../Dropzone";
+import { AttachImagesButton, FileList } from "../Dropzone";
 import { useAttachedImages } from "../../hooks/useAttachedImages";
 import {
   enableSend,
@@ -51,15 +49,13 @@ import {
   selectLastSentCompression,
   selectMessages,
   selectPreventSend,
-  // selectThreadMaximumTokens,
   selectThreadToolUse,
   selectToolUse,
 } from "../../features/Chat";
 import { telemetryApi } from "../../services/refact";
 import { push } from "../../features/Pages/pagesSlice";
 import { AgentCapabilities } from "./AgentCapabilities";
 import { TokensPreview } from "./TokensPreview";
-// import { useUsageCounter } from "../UsageCounter/useUsageCounter";
 import classNames from "classnames";
 import { ArchiveIcon } from "@radix-ui/react-icons";
 
@@ -97,6 +93,7 @@ export const ChatForm: React.FC<ChatFormProps> = ({
   const lastSentCompression = useAppSelector(selectLastSentCompression);
   const { compressChat, compressChatRequest } = useCompressChat();
   const autoFocus = useAutoFocusOnce();
+  const attachedFiles = useAttachedFiles();
 
   const shouldAgentCapabilitiesBeShown = useMemo(() => {
     return threadToolUse === "agent";
@@ -161,7 +158,6 @@ export const ChatForm: React.FC<ChatFormProps> = ({
     checkboxes,
     onToggleCheckbox,
     unCheckAll,
-    setFileInteracted,
     setLineSelectionInteracted,
   } = useCheckboxes();
 
@@ -184,21 +180,23 @@ export const ChatForm: React.FC<ChatFormProps> = ({
   const handleSubmit = useCallback(() => {
     const trimmedValue = value.trim();
     if (!disableSend && trimmedValue.length > 0) {
+      const valueWithFiles = attachedFiles.addFilesToInput(trimmedValue);
       const valueIncludingChecks = addCheckboxValuesToInput(
-        trimmedValue,
+        valueWithFiles,
         checkboxes,
       );
-      setFileInteracted(false);
+      // TODO: add @files
       setLineSelectionInteracted(false);
       onSubmit(valueIncludingChecks);
       setValue(() => "");
       unCheckAll();
+      attachedFiles.removeAll();
     }
   }, [
     value,
     disableSend,
+    attachedFiles,
     checkboxes,
-    setFileInteracted,
     setLineSelectionInteracted,
     onSubmit,
     setValue,
@@ -241,7 +239,6 @@ export const ChatForm: React.FC<ChatFormProps> = ({
       setValue(command);
       const trimmedCommand = command.trim();
       if (!trimmedCommand) {
-        setFileInteracted(false);
         setLineSelectionInteracted(false);
       }
 
@@ -251,7 +248,7 @@ export const ChatForm: React.FC<ChatFormProps> = ({
         handleHelpInfo(null);
       }
     },
-    [handleHelpInfo, setValue, setFileInteracted, setLineSelectionInteracted],
+    [handleHelpInfo, setValue, setLineSelectionInteracted],
   );
 
   const handleAgentIntegrationsClick = useCallback(() => {
@@ -423,7 +420,9 @@ export const ChatForm: React.FC<ChatFormProps> = ({
                 />
               )}
               {config.features?.images !== false &&
-                isMultimodalitySupportedForCurrentModel && <AttachFileButton />}
+                isMultimodalitySupportedForCurrentModel && (
+                  <AttachImagesButton />
+                )}
               {/* TODO: Reserved space for microphone button coming later on */}
               <PaperPlaneButton
                 disabled={disableSend}
@@ -435,12 +434,14 @@ export const ChatForm: React.FC<ChatFormProps> = ({
           </Flex>
         </Form>
       </Flex>
-      <FileList />
+      <FileList attachedFiles={attachedFiles} />
 
       <ChatControls
+        // handle adding files
         host={config.host}
         checkboxes={checkboxes}
         onCheckedChange={onToggleCheckbox}
+        attachedFiles={attachedFiles}
       />
     </Card>
   );