Attach preview (#648)

* fix: auto attach file.

* add attached files to command preview request.

* test: attach file on new chat test

Author: MarcMcIntosh

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

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

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

@@ -173,7 +173,10 @@ export const ChatForm: React.FC<ChatFormProps> = ({
   );
 
   const { previewFiles, commands, requestCompletion } =
-    useCommandCompletionAndPreviewFiles(checkboxes);
+    useCommandCompletionAndPreviewFiles(
+      checkboxes,
+      attachedFiles.addFilesToInput,
+    );
 
   const refs = useTourRefs();
 
@@ -378,7 +381,9 @@ export const ChatForm: React.FC<ChatFormProps> = ({
           >
             <ThinkingButton />
             <Flex gap="2" align="center" className={styles.buttonGroup}>
-              <TokensPreview currentMessageQuery={value} />
+              <TokensPreview
+                currentMessageQuery={attachedFiles.addFilesToInput(value)}
+              />
 
               <IconButton
                 size="1"

refact-agent/gui/src/components/ChatForm/useCheckBoxes.ts

@@ -17,7 +17,9 @@ const messageLengthSelector = createSelector(
 
 export function useAttachedFiles() {
   const [files, setFiles] = useState<FileInfo[]>([]);
+  const [interacted, setInteracted] = useState<boolean>(false);
   const activeFile = useAppSelector(selectActiveFile);
+  const snippet = useAppSelector(selectSelectedSnippet);
 
   const attached = useMemo(() => {
     const maybeAttached = files.find((file) => file.path === activeFile.path);
@@ -29,9 +31,11 @@ export function useAttachedFiles() {
     setFiles((prev) => {
       return [...prev, activeFile];
     });
+    setInteracted(true);
   }, [attached, activeFile]);
 
   const removeFile = useCallback((fileToRemove: FileInfo) => {
+    setInteracted(true);
     setFiles((prev) => {
       return prev.filter((file) => file.path !== fileToRemove.path);
     });
@@ -53,8 +57,20 @@ export function useAttachedFiles() {
 
   const removeAll = useCallback(() => {
     setFiles([]);
+    setInteracted(false);
   }, []);
 
+  useEffect(() => {
+    if (interacted) return;
+    if (!activeFile.name) return;
+    if (attached) return;
+    setFiles(() => {
+      if (!snippet.code) return [];
+      return [activeFile];
+    });
+    setInteracted(true);
+  }, [activeFile, attached, interacted, snippet.code]);
+
   useEffect(() => {
     const handleIdeAttachFile = (filePath: string) => {
       const fileInfo: FileInfo = {
@@ -92,6 +108,7 @@ export function useAttachedFiles() {
     attached,
     addFilesToInput,
     removeAll,
+    setInteracted,
   };
 }
 

refact-agent/gui/src/components/ChatForm/useCommandCompletionAndPreviewFiles.ts

@@ -130,9 +130,16 @@ function useGetPreviewFiles(query: string, checkboxes: Checkboxes) {
   return previewFileResponse;
 }
 
-export function useCommandCompletionAndPreviewFiles(checkboxes: Checkboxes) {
+export function useCommandCompletionAndPreviewFiles(
+  checkboxes: Checkboxes,
+  addFilesToInput: (str: string) => string,
+) {
   const { commands, requestCompletion, query } = useCommandCompletion();
-  const previewFileResponse = useGetPreviewFiles(query, checkboxes);
+
+  const previewFileResponse = useGetPreviewFiles(
+    addFilesToInput(query),
+    checkboxes,
+  );
 
   return {
     commands,