feat: update UI to append file path to message box

Author: 35C4n0r

chat/bun.lock

@@ -1,11 +1,10 @@
 {
   "dependencies": {
+    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.14",
     "@radix-ui/react-slot": "^1.2.2",
     "@radix-ui/react-tabs": "^1.1.11",
-    "@uppy/core": "^5.0.2",
-    "@uppy/react": "^5.0.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "jszip": "^3.10.1",
@@ -14,6 +13,7 @@
     "next-themes": "^0.4.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-dropzone": "^14.3.8",
     "react-textarea-autosize": "^8.5.9",
     "sonner": "^2.0.3",
     "tailwind-merge": "^3.3.0"

chat/package.json

@@ -47,7 +47,7 @@ interface ChatContextValue {
   loading: boolean;
   serverStatus: ServerStatus;
   sendMessage: (message: string, type?: MessageType) => void;
-  uploadFiles: (formData: FormData) => void;
+  uploadFiles: (formData: FormData) => Promise<boolean>;
 }
 
 const ChatContext = createContext<ChatContextValue | undefined>(undefined);
@@ -270,14 +270,16 @@ export function ChatProvider({ children }: PropsWithChildren) {
   };
 
   // Upload files to workspace
-  const uploadFiles = async (formData: FormData) => {
+  const uploadFiles = async (formData: FormData): Promise<boolean> => {
+    let success = true;
     try{
       const response = await fetch(`${agentAPIUrl}/upload`, {
         method: 'POST',
         body: formData,
       });
 
       if (!response.ok) {
+        success = false;
         const errorData = await response.json();
         console.error("Failed to send message:", errorData);
         const detail = errorData.detail;
@@ -294,6 +296,7 @@ export function ChatProvider({ children }: PropsWithChildren) {
       }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (error: any) {
+      success = false;
       console.error("Error uploading files:", error);
       const detail = error.detail;
       const messages =
@@ -308,6 +311,7 @@ export function ChatProvider({ children }: PropsWithChildren) {
         description: fullDetail,
       });
     }
+    return success;
   }
 
 

chat/src/components/chat-provider.tsx

@@ -1,24 +1,20 @@
 "use client";
 
-import { useChat } from "./chat-provider";
+import {useChat} from "./chat-provider";
 import MessageInput from "./message-input";
 import MessageList from "./message-list";
-import {UppyContextProvider} from "@uppy/react";
-import {useState} from "react";
-import {Uppy} from "@uppy/core";
 
 export function Chat() {
-  const { messages, loading, sendMessage, serverStatus } = useChat();
-  const [uppy] = useState(() => new Uppy());
+  const {messages, loading, sendMessage, serverStatus} = useChat();
 
   return (
-    <UppyContextProvider uppy={uppy}>
-      <MessageList messages={messages} />
+    <>
+      <MessageList messages={messages}/>
       <MessageInput
         onSendMessage={sendMessage}
         disabled={loading}
         serverStatus={serverStatus}
       />
-    </UppyContextProvider>
+    </>
   );
 }

chat/src/components/chat.tsx

@@ -284,6 +284,7 @@ export default function MessageInput({
       <UploadDialog
         open={uploadDialogOpen}
         onOpenChange={setUploadDialogOpen}
+        setMessage={setMessage}
       />
     </Tabs>
   );

chat/src/components/message-input.tsx

@@ -1,43 +1,61 @@
 "use client"
 
-import { useState, MouseEvent } from "react"
+import {useState, MouseEvent, Dispatch, SetStateAction, useRef} from "react"
 import { useDropzone } from "react-dropzone"
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog"
 import { Button } from "./ui/button"
 import { Upload, X } from "lucide-react"
 import JSZip from "jszip";
 import { useChat } from "@/components/chat-provider";
 import {toast} from "sonner";
+import {Checkbox} from "@/components/ui/checkbox";
+import path from "node:path";
 
 interface UploadDialogProps {
   open: boolean
   onOpenChange: (open: boolean) => void
+  setMessage: Dispatch<SetStateAction<string>>
 }
 
-export function UploadDialog({ open, onOpenChange }: UploadDialogProps) {
+export function UploadDialog({ open, onOpenChange, setMessage }: UploadDialogProps) {
   const [uploadPath, setUploadPath] = useState("")
-
   const {uploadFiles} = useChat();
-
   const [filesToUpload, setFilesToUpload] = useState<File[]>([]);
+  const filePathsToAppend = useRef<Set<string>>(new Set([]));
+  const [disableUploadPath, setDisableUploadPath] = useState(false);
 
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     onDropAccepted: (files: File[]) => {
-      setFilesToUpload((oldFiles) => [...oldFiles, ...files]);
+      setFilesToUpload((oldFiles) => {
+        const updatedFiles = oldFiles;
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        const oldSet = new Set<string>(oldFiles.map((f) => f.relativePath));
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        files.forEach(file => oldSet.has(file.relativePath) ? {} : updatedFiles.push(file))
+        return updatedFiles;
+      });
     }
   })
 
   const cleanup = (open? : boolean) => {
     if (open !== undefined && open) {
       return
     }
+
+    filePathsToAppend.current = new Set<string>([]);
+    setUploadPath("")
     setFilesToUpload([]);
+    setDisableUploadPath(false);
     onOpenChange(false)
   }
 
   const handleFilesUpload = async (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault()
+    let success = true;
+    setDisableUploadPath(true);
 
     try {
       // Create a new JSZip instance
@@ -66,14 +84,23 @@ export function UploadDialog({ open, onOpenChange }: UploadDialogProps) {
       formData.append('uploadPath', uploadPath);
 
       // Upload to agent API
-      uploadFiles(formData)
+      success = await uploadFiles(formData)
 
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (error: any) {
+      success = false;
       toast.error("Failed to zip and upload files:", {
         description: error.message,
       });
     }
+    if (success) {
+      for (const filePath of filePathsToAppend.current) {
+        setMessage(oldMessage =>  oldMessage + ' @"' + path.join(uploadPath, filePath) + '"');
+      }
+      cleanup()
+    } else {
+      setDisableUploadPath(false);
+    }
   }
 
 
@@ -106,6 +133,7 @@ export function UploadDialog({ open, onOpenChange }: UploadDialogProps) {
               onChange={(e) => setUploadPath(e.target.value)}
               className="w-full px-3 py-2 text-sm border rounded-md focus:outline-none focus:ring-1 focus:ring-ring"
               placeholder="Enter upload path..."
+              disabled={disableUploadPath}
             />
           </div>
 
@@ -131,7 +159,7 @@ export function UploadDialog({ open, onOpenChange }: UploadDialogProps) {
 
           {filesToUpload.length > 0 && (
             <div className="space-y-2">
-              <h4 className="text-sm font-medium">Selected Files:</h4>
+              <h4 className="text-sm font-medium">Selected Files (select the checkbox to append @filepath to message)</h4>
               <div className="space-y-1 max-h-32 overflow-y-auto">
                 {filesToUpload.map((file, index) => (
                   <div
@@ -141,14 +169,28 @@ export function UploadDialog({ open, onOpenChange }: UploadDialogProps) {
                     {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
                     {/*// @ts-expect-error*/}
                     <span className="truncate">{file.relativePath}</span>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-6 w-6"
-                      onClick={() => removeFile(file)}
-                    >
-                      <X className="h-3 w-3" />
-                    </Button>
+                    <div className="flex items-center justify-between gap-2">
+                      <Checkbox onCheckedChange={(checked: boolean) => {
+                        if (checked) {
+                          {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+                          {/*// @ts-expect-error*/}
+                          filePathsToAppend.current.add(file.relativePath)
+                        } else {
+                          {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+                          {/*// @ts-expect-error*/}
+                          filePathsToAppend.current.delete(file.relativePath)
+                        }
+                      }}/>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-6 w-6"
+                        onClick={() => removeFile(file)}
+                      >
+                        <X className="h-3 w-3" />
+                      </Button>
+                    </div>
+
                   </div>
                 ))}
               </div>