feat(25-02): create ChatFileDropZone and integrate into ChatInput
- Create ChatFileDropZone component with drag-and-drop state and overlay - Add onFilesPicked/pendingFiles/onRemoveFile props to ChatInput - Wrap form in ChatFileDropZone for drag-and-drop support - Add handlePaste for clipboard image paste (clipboardData.files) - Add Paperclip icon button with hidden file input for file picker - Show pending file chips above textarea with progress and remove button - Add tests: renders file attach button, calls onFilesPicked, shows pending chips
This commit is contained in:
Nexus Dev
parent
db4eb801d3
commit
0592af9e4b
3 changed files with 228 additions and 42 deletions
67
ui/src/components/ChatFileDropZone.tsx
Normal file
67
ui/src/components/ChatFileDropZone.tsx
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
import { useState } from "react";
|
||||
import { cn } from "../lib/utils";
|
||||
|
||||
interface ChatFileDropZoneProps {
|
||||
onFilesDropped: (files: File[]) => void;
|
||||
disabled?: boolean;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export function ChatFileDropZone({ onFilesDropped, disabled = false, children }: ChatFileDropZoneProps) {
|
||||
const [isDragOver, setIsDragOver] = useState(false);
|
||||
|
||||
function handleDragEnter(e: React.DragEvent) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (!disabled) setIsDragOver(true);
|
||||
}
|
||||
|
||||
function handleDragLeave(e: React.DragEvent) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
// Only set false if leaving the outer element (not entering a child)
|
||||
if (e.currentTarget === e.target || !e.currentTarget.contains(e.relatedTarget as Node)) {
|
||||
setIsDragOver(false);
|
||||
}
|
||||
}
|
||||
|
||||
function handleDragOver(e: React.DragEvent) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (!disabled) setIsDragOver(true);
|
||||
}
|
||||
|
||||
function handleDrop(e: React.DragEvent) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIsDragOver(false);
|
||||
if (disabled) return;
|
||||
const files = Array.from(e.dataTransfer.files);
|
||||
if (files.length > 0) {
|
||||
onFilesDropped(files);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative"
|
||||
onDragEnter={handleDragEnter}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDragOver={handleDragOver}
|
||||
onDrop={handleDrop}
|
||||
>
|
||||
{children}
|
||||
{isDragOver && (
|
||||
<div
|
||||
className={cn(
|
||||
"absolute inset-0 z-10 flex items-center justify-center rounded-md",
|
||||
"bg-primary/10 border-2 border-dashed border-primary",
|
||||
"pointer-events-none",
|
||||
)}
|
||||
>
|
||||
<span className="text-sm font-medium text-primary">Drop files here</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -163,4 +163,57 @@ describe("ChatInput", () => {
|
|||
expect(btn!.disabled).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe("file upload (FILE-05)", () => {
|
||||
it("renders file attach button", () => {
|
||||
const onSend = vi.fn();
|
||||
renderChatInput({ onSend });
|
||||
const fileInput = container.querySelector("input[type='file']");
|
||||
expect(fileInput).not.toBeNull();
|
||||
});
|
||||
|
||||
it("calls onFilesPicked when file input changes", () => {
|
||||
const onSend = vi.fn();
|
||||
const onFilesPicked = vi.fn();
|
||||
root = createRoot(container);
|
||||
act(() => {
|
||||
root!.render(<ChatInput onSend={onSend} onFilesPicked={onFilesPicked} />);
|
||||
});
|
||||
const fileInput = container.querySelector("input[type='file']") as HTMLInputElement;
|
||||
expect(fileInput).not.toBeNull();
|
||||
|
||||
const mockFile = new File(["content"], "test.txt", { type: "text/plain" });
|
||||
act(() => {
|
||||
Object.defineProperty(fileInput, "files", {
|
||||
value: [mockFile],
|
||||
writable: false,
|
||||
});
|
||||
fileInput.dispatchEvent(new Event("change", { bubbles: true }));
|
||||
});
|
||||
|
||||
expect(onFilesPicked).toHaveBeenCalledWith([mockFile]);
|
||||
});
|
||||
|
||||
it("shows pending file chips", () => {
|
||||
const onSend = vi.fn();
|
||||
const pendingFiles = [
|
||||
{
|
||||
id: "temp-1",
|
||||
file: new File([], "image.png"),
|
||||
name: "image.png",
|
||||
mimeType: "image/png",
|
||||
sizeBytes: 1024,
|
||||
progress: 50,
|
||||
status: "uploading" as const,
|
||||
},
|
||||
];
|
||||
root = createRoot(container);
|
||||
act(() => {
|
||||
root!.render(<ChatInput onSend={onSend} pendingFiles={pendingFiles} />);
|
||||
});
|
||||
const chip = container.querySelector(".bg-muted");
|
||||
expect(chip).not.toBeNull();
|
||||
expect(chip!.textContent).toContain("image.png");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
import { useEffect, useRef, useState } from "react";
|
||||
import { Send, Loader2 } from "lucide-react";
|
||||
import { Send, Loader2, Paperclip, X } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ChatSlashCommandPopover } from "./ChatSlashCommandPopover";
|
||||
import { ChatMentionPopover } from "./ChatMentionPopover";
|
||||
import { ChatFileDropZone } from "./ChatFileDropZone";
|
||||
import { cn } from "../lib/utils";
|
||||
import type { Agent } from "@paperclipai/shared";
|
||||
import type { PendingFile } from "../hooks/useChatFileUpload";
|
||||
|
||||
interface ChatInputProps {
|
||||
onSend: (content: string) => void;
|
||||
|
|
@ -14,6 +16,10 @@ interface ChatInputProps {
|
|||
// Popover support
|
||||
agents?: Agent[];
|
||||
agentsLoading?: boolean;
|
||||
// File upload support
|
||||
onFilesPicked?: (files: File[]) => void;
|
||||
pendingFiles?: PendingFile[];
|
||||
onRemoveFile?: (id: string) => void;
|
||||
}
|
||||
|
||||
export function ChatInput({
|
||||
|
|
@ -23,6 +29,9 @@ export function ChatInput({
|
|||
placeholder = "Message your agent...",
|
||||
agents = [],
|
||||
agentsLoading = false,
|
||||
onFilesPicked,
|
||||
pendingFiles,
|
||||
onRemoveFile,
|
||||
}: ChatInputProps) {
|
||||
const [value, setValue] = useState("");
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
|
@ -115,6 +124,15 @@ export function ChatInput({
|
|||
// Shift+Enter falls through to default behavior (inserts newline)
|
||||
}
|
||||
|
||||
function handlePaste(e: React.ClipboardEvent) {
|
||||
const files = Array.from(e.clipboardData.files);
|
||||
if (files.length > 0) {
|
||||
e.preventDefault();
|
||||
onFilesPicked?.(files);
|
||||
}
|
||||
// If no files, allow default paste behavior (text)
|
||||
}
|
||||
|
||||
const isEmpty = value.trim().length === 0;
|
||||
|
||||
const textarea = (
|
||||
|
|
@ -123,6 +141,7 @@ export function ChatInput({
|
|||
value={value}
|
||||
onChange={handleChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
onPaste={handlePaste}
|
||||
placeholder={placeholder}
|
||||
rows={1}
|
||||
disabled={disabled}
|
||||
|
|
@ -139,48 +158,95 @@ export function ChatInput({
|
|||
);
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
submit();
|
||||
}}
|
||||
className="flex items-end gap-2"
|
||||
<ChatFileDropZone
|
||||
onFilesDropped={(files) => files.forEach((f) => onFilesPicked?.([f]))}
|
||||
disabled={disabled}
|
||||
>
|
||||
{/* Slash command takes priority over mention popover */}
|
||||
<div className="flex-1 relative">
|
||||
<ChatSlashCommandPopover
|
||||
open={slashOpen && !mentionOpen}
|
||||
onOpenChange={setSlashOpen}
|
||||
onSelect={handleSlashSelect}
|
||||
query={slashQuery}
|
||||
>
|
||||
<ChatMentionPopover
|
||||
open={mentionOpen && !slashOpen}
|
||||
onOpenChange={setMentionOpen}
|
||||
onSelect={handleMentionSelect}
|
||||
query={mentionQuery}
|
||||
agents={agents}
|
||||
isLoading={agentsLoading}
|
||||
>
|
||||
{textarea}
|
||||
</ChatMentionPopover>
|
||||
</ChatSlashCommandPopover>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
disabled={isEmpty || isSubmitting || disabled}
|
||||
aria-label="Send message"
|
||||
className="shrink-0"
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
submit();
|
||||
}}
|
||||
className="flex items-end gap-2"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Send className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
{/* Slash command takes priority over mention popover */}
|
||||
<div className="flex-1 relative">
|
||||
{/* Pending file chips above textarea */}
|
||||
{pendingFiles && pendingFiles.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1 px-1 pb-1">
|
||||
{pendingFiles.map((pf) => (
|
||||
<div key={pf.id} className="flex items-center gap-1 rounded bg-muted px-2 py-1 text-xs">
|
||||
{pf.status === "uploading" && (
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
)}
|
||||
<span className="max-w-[120px] truncate">{pf.name}</span>
|
||||
{pf.status === "uploading" && (
|
||||
<span className="text-muted-foreground">{pf.progress}%</span>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="ml-1 text-muted-foreground hover:text-foreground"
|
||||
onClick={() => onRemoveFile?.(pf.id)}
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ChatSlashCommandPopover
|
||||
open={slashOpen && !mentionOpen}
|
||||
onOpenChange={setSlashOpen}
|
||||
onSelect={handleSlashSelect}
|
||||
query={slashQuery}
|
||||
>
|
||||
<ChatMentionPopover
|
||||
open={mentionOpen && !slashOpen}
|
||||
onOpenChange={setMentionOpen}
|
||||
onSelect={handleMentionSelect}
|
||||
query={mentionQuery}
|
||||
agents={agents}
|
||||
isLoading={agentsLoading}
|
||||
>
|
||||
{textarea}
|
||||
</ChatMentionPopover>
|
||||
</ChatSlashCommandPopover>
|
||||
</div>
|
||||
|
||||
{/* File attach button */}
|
||||
<label className="shrink-0 cursor-pointer">
|
||||
<input
|
||||
type="file"
|
||||
multiple
|
||||
className="hidden"
|
||||
onChange={(e) => {
|
||||
const files = Array.from(e.target.files ?? []);
|
||||
if (files.length > 0) onFilesPicked?.(files);
|
||||
e.target.value = ""; // reset for re-selection
|
||||
}}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<Button type="button" variant="ghost" size="icon" asChild disabled={disabled}>
|
||||
<span><Paperclip className="h-4 w-4" /></span>
|
||||
</Button>
|
||||
</label>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
disabled={isEmpty || isSubmitting || disabled}
|
||||
aria-label="Send message"
|
||||
className="shrink-0"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Send className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
</ChatFileDropZone>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue