feat: frontend changes

Author: 35C4n0r

chat/bun.lock

@@ -15,7 +15,6 @@
         "lucide-react": "^0.511.0",
         "next": "15.4.7",
         "next-themes": "^0.4.6",
-        "path-browserify": "^1.0.1",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-dropzone": "^14.3.8",

chat/package.json

@@ -11,7 +11,6 @@
     "lucide-react": "^0.511.0",
     "next": "15.4.7",
     "next-themes": "^0.4.6",
-    "path-browserify": "^1.0.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-dropzone": "^14.3.8",

chat/src/components/chat-provider.tsx

@@ -42,12 +42,17 @@ type MessageType = "user" | "raw";
 
 export type ServerStatus = "stable" | "running" | "offline" | "unknown";
 
+export interface FileUploadResponse {
+  ok: boolean;
+  filePath?: string;
+}
+
 interface ChatContextValue {
   messages: (Message | DraftMessage)[];
   loading: boolean;
   serverStatus: ServerStatus;
   sendMessage: (message: string, type?: MessageType) => void;
-  uploadFiles: (formData: FormData) => Promise<boolean>;
+  uploadFiles: (formData: FormData) => Promise<FileUploadResponse>;
 }
 
 const ChatContext = createContext<ChatContextValue | undefined>(undefined);
@@ -270,16 +275,16 @@ export function ChatProvider({ children }: PropsWithChildren) {
   };
 
   // Upload files to workspace
-  const uploadFiles = async (formData: FormData): Promise<boolean> => {
-    let success = true;
+  const uploadFiles = async (formData: FormData): Promise<FileUploadResponse> => {
+    let result: FileUploadResponse = {ok: true};
     try{
       const response = await fetch(`${agentAPIUrl}/upload`, {
         method: 'POST',
         body: formData,
       });
 
       if (!response.ok) {
-        success = false;
+        result.ok = false;
         const errorData = await response.json();
         console.error("Failed to send message:", errorData);
         const detail = errorData.detail;
@@ -293,10 +298,12 @@ export function ChatProvider({ children }: PropsWithChildren) {
         toast.error(`Failed to upload files`, {
           description: fullDetail,
         });
+      } else {
+        result = (await response.json()) as FileUploadResponse;
       }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (error: any) {
-      success = false;
+      result.ok = false;
       console.error("Error uploading files:", error);
       const detail = error.detail;
       const messages =
@@ -311,10 +318,9 @@ export function ChatProvider({ children }: PropsWithChildren) {
         description: fullDetail,
       });
     }
-    return success;
+    return result;
   }
 
-
   return (
     <ChatContext.Provider
       value={{

chat/src/components/drag-drop.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { useDropzone } from "react-dropzone";
+
+export interface DragDropProps {
+  onFilesAdded: (files: File[]) => void;
+  disabled?: boolean;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function DragDrop({ onFilesAdded, disabled = false, children, className = "" }: DragDropProps) {
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    noClick: true,
+    disabled,
+    onDropAccepted: (files: File[]) => {
+      onFilesAdded(files);
+    },
+    multiple: true,
+  });
+
+  return (
+    <div
+      {...getRootProps()}
+      className={`relative ${className} ${
+        isDragActive && !disabled ? 'border-primary border-2 border-dashed rounded-lg text-center transition-colors' : ''
+      }`}
+    >
+      <input {...getInputProps()} />
+      {isDragActive && !disabled && (
+        <div className="absolute inset-0 flex items-center justify-center bg-primary/20z-10">
+          <p className="text-sm text-primary font-medium">Drop the files here</p>
+        </div>
+      )}
+      {children}
+    </div>
+  );
+}