use react dropzone on chat input

frontend/app/chat/_components/chat-input.tsx

@@ -1,5 +1,7 @@
 import { ArrowRight, Check, Funnel, Loader2, Plus } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
 import { forwardRef, useImperativeHandle, useRef, useState } from "react";
+import { useDropzone } from "react-dropzone";
 import TextareaAutosize from "react-textarea-autosize";
 import type { FilterColor } from "@/components/filter-icon-popover";
 import { Button } from "@/components/ui/button";
@@ -8,6 +10,8 @@ import {
 	PopoverAnchor,
 	PopoverContent,
 } from "@/components/ui/popover";
+import { useFileDrag } from "@/hooks/use-file-drag";
+import { cn } from "@/lib/utils";
 import type { KnowledgeFilterData } from "../_types/types";
 import { FilePreview } from "./file-preview";
 import { SelectedKnowledgeFilter } from "./selected-knowledge-filter";
@@ -71,6 +75,30 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
 		const inputRef = useRef<HTMLTextAreaElement>(null);
 		const fileInputRef = useRef<HTMLInputElement>(null);
 		const [textareaHeight, setTextareaHeight] = useState(0);
+		const [fileUploadError, setFileUploadError] = useState<Error | null>(null);
+		const isDragging = useFileDrag();
+
+		const { getRootProps, getInputProps } = useDropzone({
+			accept: {
+				"application/pdf": [".pdf"],
+				"application/msword": [".doc"],
+				"application/vnd.openxmlformats-officedocument.wordprocessingml.document":
+					[".docx"],
+				"text/markdown": [".md"],
+			},
+			maxFiles: 1,
+			disabled: !isDragging,
+			onDrop: (acceptedFiles, fileRejections) => {
+				setFileUploadError(null);
+				if (fileRejections.length > 0) {
+					console.log(fileRejections);
+					const message = fileRejections.at(0)?.errors.at(0)?.message;
+					setFileUploadError(new Error(message));
+					return;
+				}
+				onFileSelected(acceptedFiles[0]);
+			},
+		});
 
 		useImperativeHandle(ref, () => ({
 			focusInput: () => {
@@ -82,6 +110,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
 		}));
 
 		const handleFilePickerChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setFileUploadError(null);
 			const files = e.target.files;
 			if (files && files.length > 0) {
 				onFileSelected(files[0]);
@@ -94,17 +123,65 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
 			<div className="w-full">
 				<form onSubmit={onSubmit} className="relative">
 					{/* Outer container - flex-col to stack file preview above input */}
-          <div className="flex flex-col w-full gap-2 rounded-xl border border-input hover:[&:not(:focus-within)]:border-muted-foreground focus-within:border-foreground p-2 transition-colors">
+					<div
+						{...getRootProps()}
+						className={cn(
+							"flex flex-col w-full p-2 rounded-xl border border-input transition-all",
+							!isDragging &&
+								"hover:[&:not(:focus-within)]:border-muted-foreground focus-within:border-foreground",
+							isDragging && "border-dashed",
+						)}
+					>
+						<input {...getInputProps()} />
 						{/* File Preview Section - Always above */}
+						<AnimatePresence>
 							{uploadedFile && (
+								<motion.div
+									initial={{ opacity: 0, height: 0, marginBottom: 0 }}
+									animate={{ opacity: 1, height: "auto", marginBottom: 8 }}
+									exit={{ opacity: 0, height: 0, marginBottom: 0 }}
+									className="overflow-hidden"
+								>
 									<FilePreview
 										uploadedFile={uploadedFile}
 										onClear={() => {
 											onFileSelected(null);
 										}}
 									/>
+								</motion.div>
 							)}
-
+						</AnimatePresence>
+						<AnimatePresence>
+							{fileUploadError && (
+								<motion.p
+									initial={{ opacity: 0, height: 0 }}
+									animate={{ opacity: 1, height: "auto" }}
+									exit={{ opacity: 0, height: 0 }}
+									className="text-sm text-destructive overflow-hidden"
+								>
+									{fileUploadError.message}
+								</motion.p>
+							)}
+						</AnimatePresence>
+						<AnimatePresence>
+							{isDragging && (
+								<motion.div
+									initial={{ opacity: 0, height: 0 }}
+									animate={{ opacity: 1, height: 100 }}
+									exit={{ opacity: 0, height: 0 }}
+									className="overflow-hidden w-full flex flex-col items-center justify-center gap-2"
+								>
+									<p className="text-md font-medium text-primary">
+										Add files to conversation
+									</p>
+									<p className="text-sm text-muted-foreground">
+										Text formats and image files.{" "}
+										<span className="font-semibold">10</span> files per chat,{" "}
+										<span className="font-semibold">150 MB</span> each.
+									</p>
+								</motion.div>
+							)}
+						</AnimatePresence>
 						{/* Main Input Container - flex-row or flex-col based on textarea height */}
 						<div
 							className={`relative flex w-full gap-2 ${

frontend/components/ui/dropzone.tsx

@@ -1,202 +0,0 @@
-'use client';
-
-import { UploadIcon } from 'lucide-react';
-import type { ReactNode } from 'react';
-import { createContext, useContext } from 'react';
-import type { DropEvent, DropzoneOptions, FileRejection } from 'react-dropzone';
-import { useDropzone } from 'react-dropzone';
-import { Button } from '@/components/ui/button';
-import { cn } from '@/lib/utils';
-
-type DropzoneContextType = {
-  src?: File[];
-  accept?: DropzoneOptions['accept'];
-  maxSize?: DropzoneOptions['maxSize'];
-  minSize?: DropzoneOptions['minSize'];
-  maxFiles?: DropzoneOptions['maxFiles'];
-};
-
-const renderBytes = (bytes: number) => {
-  const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
-  let size = bytes;
-  let unitIndex = 0;
-
-  while (size >= 1024 && unitIndex < units.length - 1) {
-    size /= 1024;
-    unitIndex++;
-  }
-
-  return `${size.toFixed(2)}${units[unitIndex]}`;
-};
-
-const DropzoneContext = createContext<DropzoneContextType | undefined>(
-  undefined
-);
-
-export type DropzoneProps = Omit<DropzoneOptions, 'onDrop'> & {
-  src?: File[];
-  className?: string;
-  onDrop?: (
-    acceptedFiles: File[],
-    fileRejections: FileRejection[],
-    event: DropEvent
-  ) => void;
-  children?: ReactNode;
-};
-
-export const Dropzone = ({
-  accept,
-  maxFiles = 1,
-  maxSize,
-  minSize,
-  onDrop,
-  onError,
-  disabled,
-  src,
-  className,
-  children,
-  ...props
-}: DropzoneProps) => {
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    accept,
-    maxFiles,
-    maxSize,
-    minSize,
-    onError,
-    disabled,
-    onDrop: (acceptedFiles, fileRejections, event) => {
-      if (fileRejections.length > 0) {
-        const message = fileRejections.at(0)?.errors.at(0)?.message;
-        onError?.(new Error(message));
-        return;
-      }
-
-      onDrop?.(acceptedFiles, fileRejections, event);
-    },
-    ...props,
-  });
-
-  return (
-    <DropzoneContext.Provider
-      key={JSON.stringify(src)}
-      value={{ src, accept, maxSize, minSize, maxFiles }}
-    >
-      <Button
-        className={cn(
-          'relative h-auto w-full flex-col overflow-hidden p-8',
-          isDragActive && 'outline-none ring-1 ring-ring',
-          className
-        )}
-        disabled={disabled}
-        type="button"
-        variant="outline"
-        {...getRootProps()}
-      >
-        <input {...getInputProps()} disabled={disabled} />
-        {children}
-      </Button>
-    </DropzoneContext.Provider>
-  );
-};
-
-const useDropzoneContext = () => {
-  const context = useContext(DropzoneContext);
-
-  if (!context) {
-    throw new Error('useDropzoneContext must be used within a Dropzone');
-  }
-
-  return context;
-};
-
-export type DropzoneContentProps = {
-  children?: ReactNode;
-  className?: string;
-};
-
-const maxLabelItems = 3;
-
-export const DropzoneContent = ({
-  children,
-  className,
-}: DropzoneContentProps) => {
-  const { src } = useDropzoneContext();
-
-  if (!src) {
-    return null;
-  }
-
-  if (children) {
-    return children;
-  }
-
-  return (
-    <div className={cn('flex flex-col items-center justify-center', className)}>
-      <div className="flex size-8 items-center justify-center rounded-md bg-muted text-muted-foreground">
-        <UploadIcon size={16} />
-      </div>
-      <p className="my-2 w-full truncate font-medium text-sm">
-        {src.length > maxLabelItems
-          ? `${new Intl.ListFormat('en').format(
-              src.slice(0, maxLabelItems).map((file) => file.name)
-            )} and ${src.length - maxLabelItems} more`
-          : new Intl.ListFormat('en').format(src.map((file) => file.name))}
-      </p>
-      <p className="w-full text-wrap text-muted-foreground text-xs">
-        Drag and drop or click to replace
-      </p>
-    </div>
-  );
-};
-
-export type DropzoneEmptyStateProps = {
-  children?: ReactNode;
-  className?: string;
-};
-
-export const DropzoneEmptyState = ({
-  children,
-  className,
-}: DropzoneEmptyStateProps) => {
-  const { src, accept, maxSize, minSize, maxFiles } = useDropzoneContext();
-
-  if (src) {
-    return null;
-  }
-
-  if (children) {
-    return children;
-  }
-
-  let caption = '';
-
-  if (accept) {
-    caption += 'Accepts ';
-    caption += new Intl.ListFormat('en').format(Object.keys(accept));
-  }
-
-  if (minSize && maxSize) {
-    caption += ` between ${renderBytes(minSize)} and ${renderBytes(maxSize)}`;
-  } else if (minSize) {
-    caption += ` at least ${renderBytes(minSize)}`;
-  } else if (maxSize) {
-    caption += ` less than ${renderBytes(maxSize)}`;
-  }
-
-  return (
-    <div className={cn('flex flex-col items-center justify-center', className)}>
-      <div className="flex size-8 items-center justify-center rounded-md bg-muted text-muted-foreground">
-        <UploadIcon size={16} />
-      </div>
-      <p className="my-2 w-full truncate text-wrap font-medium text-sm">
-        Upload {maxFiles === 1 ? 'a file' : 'files'}
-      </p>
-      <p className="w-full truncate text-wrap text-muted-foreground text-xs">
-        Drag and drop or click to upload
-      </p>
-      {caption && (
-        <p className="text-wrap text-muted-foreground text-xs">{caption}.</p>
-      )}
-    </div>
-  );
-};

frontend/hooks/use-file-drag.ts

@@ -0,0 +1,53 @@
+import { useEffect, useState } from "react";
+
+/**
+ * Hook to detect when files are being dragged into the browser window
+ * @returns isDragging - true when files are being dragged over the window
+ */
+export function useFileDrag() {
+  const [isDragging, setIsDragging] = useState(false);
+
+  useEffect(() => {
+    let dragCounter = 0;
+
+    const handleDragEnter = (e: DragEvent) => {
+      // Only detect file drags
+      if (e.dataTransfer?.types.includes("Files")) {
+        dragCounter++;
+        if (dragCounter === 1) {
+          setIsDragging(true);
+        }
+      }
+    };
+
+    const handleDragLeave = () => {
+      dragCounter--;
+      if (dragCounter === 0) {
+        setIsDragging(false);
+      }
+    };
+
+    const handleDragOver = (e: DragEvent) => {
+      e.preventDefault();
+    };
+
+    const handleDrop = () => {
+      dragCounter = 0;
+      setIsDragging(false);
+    };
+
+    window.addEventListener("dragenter", handleDragEnter);
+    window.addEventListener("dragleave", handleDragLeave);
+    window.addEventListener("dragover", handleDragOver);
+    window.addEventListener("drop", handleDrop);
+
+    return () => {
+      window.removeEventListener("dragenter", handleDragEnter);
+      window.removeEventListener("dragleave", handleDragLeave);
+      window.removeEventListener("dragover", handleDragOver);
+      window.removeEventListener("drop", handleDrop);
+    };
+  }, []);
+
+  return isDragging;
+}