4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T3bf6,import React, { useState, useRef, useEffect, useCallback, memo, forwardRef, useImperativeHandle } from 'react'; import { cn } from '@/lib/utils'; import { Button } from '@/components/ui/button'; import { ArrowUp, Square, ImagePlus, Paperclip, File as FileIcon, AlertCircle, X, HelpCircle } from 'lucide-react'; import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from '@/components/ui/command'; import { Popover, PopoverContent, PopoverTrigger, } from '@/components/ui/popover'; import { useAgentChat, useAgentActions } from '@inferencesh/sdk/agent'; import { isChatBusy } from '@inferencesh/sdk'; import { useFileUploadManager, FileUploadList, showFileUploadDialog, type FileUpload, } from '@/components/infsh/agent/file-upload'; export interface ChatInputHandle { setInput: (text: string) => void; } interface ChatInputProps { placeholder?: string; className?: string; allowAttachments?: boolean; allowFiles?: boolean; allowImages?: boolean; onFilesChange?: (files: File[]) => void; /** Example prompts shown in a ? dropdown */ examplePrompts?: string[]; } // ============================================================================= // Drag Overlay Component (CSS transitions) // ============================================================================= interface DragOverlayProps { isDragging: boolean; } const DragOverlay = memo(function DragOverlay({ isDragging }: DragOverlayProps) { if (!isDragging) return null; return (

drop files to upload

); }); // ============================================================================= // ChatInput Component // ============================================================================= /** * ChatInput - Self-contained input with file upload and auto-resize * * @example * ```tsx * * ``` */ export const ChatInput = memo(forwardRef(function ChatInput({ placeholder = 'ask a question...', className, allowAttachments, allowFiles = true, allowImages = true, examplePrompts, }, ref) { // Backwards compatibility: if allowAttachments is explicitly false, disable both const showFileButton = allowAttachments !== false && allowFiles; const showImageButton = allowAttachments !== false && allowImages; const enableAttachments = showFileButton || showImageButton; const { chat, error } = useAgentChat(); const isBusy = isChatBusy(chat); const { sendMessage, stopGeneration, clearError } = useAgentActions(); const [value, setValue] = useState(''); const [isDragging, setIsDragging] = useState(false); const [showCommandMenu, setShowCommandMenu] = useState(false); const textareaRef = useRef(null); const containerRef = useRef(null); const dragCounterRef = useRef(0); useImperativeHandle(ref, () => ({ setInput(text: string) { setValue(text); textareaRef.current?.focus(); }, })); // File upload manager - uploads files on select const { uploads, addFiles, removeUpload, clearAll, getFileRefs, hasPendingUploads, hasCompletedUploads, } = useFileUploadManager(); const completedUploads = uploads.filter(u => u.status === 'completed'); // Auto-resize textarea useEffect(() => { const textarea = textareaRef.current; if (!textarea) return; textarea.style.height = 'auto'; const newHeight = Math.min(textarea.scrollHeight, 200); textarea.style.height = `${newHeight}px`; }, [value]); // Add @filename reference to text const addFileReferenceToText = useCallback((upload: FileUpload) => { const fileName = upload.file.name; const text = `@${fileName} `; setValue(prev => { const needsSpace = prev && !prev.endsWith(' '); return `${prev}${needsSpace ? ' ' : ''}${text}`; }); // Focus textarea and move cursor to end if (textareaRef.current) { textareaRef.current.focus(); setTimeout(() => { if (textareaRef.current) { const length = textareaRef.current.value.length; textareaRef.current.setSelectionRange(length, length); } }, 0); } }, []); // Handle send — when the agent is busy, the message is queued automatically const handleSend = useCallback(async () => { const messageText = value.trim(); // Need either text or completed uploads if (!messageText && !hasCompletedUploads) return; // Don't send while uploads are in progress if (hasPendingUploads) return; // Get already-uploaded files (only when not busy — queued messages don't support files yet) const uploadedFiles = isBusy ? undefined : getFileRefs(); setValue(''); if (!isBusy) clearAll(); // sendMessage queues the message if the agent is busy await sendMessage(messageText, uploadedFiles && uploadedFiles.length > 0 ? uploadedFiles : undefined); }, [value, hasCompletedUploads, hasPendingUploads, isBusy, getFileRefs, clearAll, sendMessage]); // Handle key down const handleKeyDown = useCallback( (e: React.KeyboardEvent) => { // Show command menu when @ is typed (and we have completed uploads) if (e.key === '@' && completedUploads.length > 0) { e.preventDefault(); setShowCommandMenu(true); } // Hide command menu on Escape if (e.key === 'Escape') { setShowCommandMenu(false); } // Submit on Enter (without Shift) if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSend(); } }, [handleSend, completedUploads.length] ); // Handle paste const handlePaste = useCallback((e: React.ClipboardEvent) => { if (!enableAttachments) return; const items = e.clipboardData?.items; if (!items) return; const files: File[] = []; for (const item of items) { const file = item.getAsFile(); if (file) { files.push(file); } } if (files.length > 0) { e.preventDefault(); // Prevent filename from being pasted as text addFiles(files); } }, [enableAttachments, addFiles]); // Drag and drop handlers const handleDragEnter = useCallback((e: React.DragEvent) => { if (!enableAttachments) return; e.preventDefault(); e.stopPropagation(); dragCounterRef.current++; // Check for files being dragged if (e.dataTransfer.types.includes('Files')) { setIsDragging(true); } }, [enableAttachments]); const handleDragLeave = useCallback((e: React.DragEvent) => { if (!enableAttachments) return; e.preventDefault(); e.stopPropagation(); dragCounterRef.current--; if (dragCounterRef.current === 0) { setIsDragging(false); } }, [enableAttachments]); const handleDragOver = useCallback((e: React.DragEvent) => { if (!enableAttachments) return; e.preventDefault(); e.stopPropagation(); // Required to allow drop e.dataTransfer.dropEffect = 'copy'; }, [enableAttachments]); const handleDrop = useCallback((e: React.DragEvent) => { e.preventDefault(); e.stopPropagation(); setIsDragging(false); dragCounterRef.current = 0; if (!enableAttachments) return; const files = Array.from(e.dataTransfer.files); if (files.length > 0) { addFiles(files); } }, [enableAttachments, addFiles]); // Handle attachment button click const handleAttachmentClick = async () => { const files = await showFileUploadDialog(); if (files) { addFiles(files); } }; // Handle image button click const handleImageClick = async () => { const files = await showFileUploadDialog('image/*'); if (files) { addFiles(files); } }; const canSend = (value.trim().length > 0 || (!isBusy && hasCompletedUploads)) && !hasPendingUploads; return (

{/* Error notification - floats above input */} {error && (

failed to send: {error}

)}

{/* File uploads */} {uploads.length > 0 && ( )} {/* Text area with @ file reference popover */}

{/* Positioning anchor only — the popover is opened by typing '@' in the textarea, never by clicking this. nativeButton={false} tells Base UI not to expect a native