Skip to content

wip: remove attach file checkbox. #644

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Mar 28, 2025
Merged

wip: remove attach file checkbox. #644

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cf71175
wip: remove attach file checkbox.
MarcMcIntosh Mar 27, 2025
2d7fc07
feat: attach files button.
MarcMcIntosh Mar 27, 2025
491db2b
test: active file is no longer attached by default.
MarcMcIntosh Mar 27, 2025
f908c4d
add an event for the ide to attach a file to chat.
MarcMcIntosh Mar 28, 2025
9e4152f
fix: remove attached files after submit.
MarcMcIntosh Mar 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions refact-agent/gui/src/components/ChatForm/ChatControls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
Box,
Switch,
Badge,
Button,
} from "@radix-ui/themes";
import { Select } from "../Select";
import { type Config } from "../../features/Config/configSlice";
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -223,6 +225,7 @@ export type ChatControlsProps = {
) => void;

host: Config["host"];
attachedFiles: ReturnType<typeof useAttachedFiles>;
};

const ChatControlCheckBox: React.FC<{
Expand Down Expand Up @@ -294,6 +297,7 @@ export const ChatControls: React.FC<ChatControlsProps> = ({
checkboxes,
onCheckedChange,
host,
attachedFiles,
}) => {
const refs = useTourRefs();
const dispatch = useAppDispatch();
Expand Down Expand Up @@ -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>
)}

Comment on lines +350 to +361
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if !attachedFiles.activeFile.name, showing skeleton?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just disable the button because there's no active file to attach

{showControls && (
<Flex gap="2" direction="column">
<ToolUseSwitch
Expand Down
6 changes: 1 addition & 5 deletions refact-agent/gui/src/components/ChatForm/ChatForm.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});

Expand Down
29 changes: 15 additions & 14 deletions refact-agent/gui/src/components/ChatForm/ChatForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import {
useSendChatRequest,
useCompressChat,
useAutoFocusOnce,
// useTotalTokenUsage,
} from "../../hooks";
import { ErrorCallout, Callout } from "../Callout";
import { ComboBox } from "../ComboBox";
Expand All @@ -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,
Expand All @@ -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";

Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -161,7 +158,6 @@ export const ChatForm: React.FC<ChatFormProps> = ({
checkboxes,
onToggleCheckbox,
unCheckAll,
setFileInteracted,
setLineSelectionInteracted,
} = useCheckboxes();

Expand All @@ -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,
Expand Down Expand Up @@ -241,7 +239,6 @@ export const ChatForm: React.FC<ChatFormProps> = ({
setValue(command);
const trimmedCommand = command.trim();
if (!trimmedCommand) {
setFileInteracted(false);
setLineSelectionInteracted(false);
}

Expand All @@ -251,7 +248,7 @@ export const ChatForm: React.FC<ChatFormProps> = ({
handleHelpInfo(null);
}
},
[handleHelpInfo, setValue, setFileInteracted, setLineSelectionInteracted],
[handleHelpInfo, setValue, setLineSelectionInteracted],
);

const handleAgentIntegrationsClick = useCallback(() => {
Expand Down Expand Up @@ -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}
Expand All @@ -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>
);
Expand Down
Loading