{searchGroups.map((group) => { const Icon = group.icon; const isSelected = selectedGroup === group.id; const groupColors = themeColors[group.id]; return ( onGroupSelect(group)} className={cn( "flex flex-col gap-2 p-4 rounded-lg cursor-pointer font-sans group/item", "transition-all duration-200 relative overflow-hidden", !isSelected && "border dark:border-neutral-800 border-neutral-200", groupColors.bg, groupColors.bgHover, isSelected && cn( "ring-1 dark:ring-white/20 ring-black/10", "shadow-lg", groupColors.bgSelected ) )} >

{group.name}

{group.description}

); })}

); const TriggerContent = ({ selectedGroup, isOpen }: { selectedGroup: SearchGroupId, isOpen: boolean }) => { const selectedGroupDetails = searchGroups.find(g => g.id === selectedGroup); const Icon = selectedGroupDetails?.icon; const colors = themeColors[selectedGroup]; return (

{Icon && ( )} {selectedGroupDetails?.name}

); }; const GroupSelector = ({ selectedGroup, onGroupSelect }: GroupSelectorProps) => { const [isOpen, setIsOpen] = useState(false); const isDesktop = useMediaQuery("(min-width: 768px)"); const handleGroupSelection = (group: SearchGroup) => { onGroupSelect(group); setIsOpen(false); }; if (!isDesktop) { return ( Select Search Type

); } return ( ); }; const FormComponent: React.FC = ({ input, setInput, attachments, setAttachments, hasSubmitted, setHasSubmitted, isLoading, handleSubmit, fileInputRef, inputRef, stop, messages, append, selectedModel, setSelectedModel, resetSuggestedQuestions, lastSubmittedQueryRef, selectedGroup, setSelectedGroup, }) => { const [uploadQueue, setUploadQueue] = useState>([]); const { width } = useWindowSize(); const postSubmitFileInputRef = useRef(null); const [isFocused, setIsFocused] = useState(false); const MIN_HEIGHT = 56; const MAX_HEIGHT = 400; const autoResizeInput = (target: HTMLTextAreaElement) => { if (!target) return; requestAnimationFrame(() => { target.style.height = 'auto'; // reset let newHeight = target.scrollHeight; newHeight = Math.min(Math.max(newHeight, MIN_HEIGHT), MAX_HEIGHT); target.style.height = `${newHeight}px`; target.style.overflowY = newHeight >= MAX_HEIGHT ? 'auto' : 'hidden'; }); }; const handleInput = (event: React.ChangeEvent) => { setInput(event.target.value); autoResizeInput(event.target); }; const handleFocus = () => { setIsFocused(true); }; const handleBlur = () => { setIsFocused(false); }; const handleGroupSelect = useCallback((group: SearchGroup) => { setSelectedGroup(group.id); setInput(''); resetSuggestedQuestions(); inputRef.current?.focus(); }, [setSelectedGroup, setInput, resetSuggestedQuestions, inputRef]); // Keep existing file upload and form submission logic... const uploadFile = async (file: File): Promise => { const formData = new FormData(); formData.append('file', file); try { const response = await fetch('/api/upload', { method: 'POST', body: formData, }); if (response.ok) { const data = await response.json(); return data; } else { throw new Error('Failed to upload file'); } } catch (error) { console.error("Error uploading file:", error); toast.error("Failed to upload file, please try again!"); throw error; } }; const handleFileChange = useCallback(async (event: React.ChangeEvent) => { const files = Array.from(event.target.files || []); const totalAttachments = attachments.length + files.length; if (totalAttachments > MAX_IMAGES) { toast.error(`You can only attach up to ${MAX_IMAGES} images.`); return; } setUploadQueue(files.map((file) => file.name)); try { const uploadPromises = files.map((file) => uploadFile(file)); const uploadedAttachments = await Promise.all(uploadPromises); setAttachments((currentAttachments) => [ ...currentAttachments, ...uploadedAttachments, ]); } catch (error) { console.error("Error uploading files!", error); toast.error("Failed to upload one or more files. Please try again."); } finally { setUploadQueue([]); event.target.value = ''; } }, [attachments, setAttachments]); const removeAttachment = (index: number) => { setAttachments(prev => prev.filter((_, i) => i !== index)); }; const onSubmit = useCallback((event: React.FormEvent) => { event.preventDefault(); event.stopPropagation(); if (input.trim() || attachments.length > 0) { setHasSubmitted(true); lastSubmittedQueryRef.current = input.trim(); // track("search input", { query: input.trim() }); handleSubmit(event, { experimental_attachments: attachments, }); setAttachments([]); if (fileInputRef.current) { fileInputRef.current.value = ''; } } else { toast.error("Please enter a search query or attach an image."); } }, [input, attachments, setHasSubmitted, handleSubmit, setAttachments, fileInputRef, lastSubmittedQueryRef]); const submitForm = useCallback(() => { onSubmit({ preventDefault: () => { }, stopPropagation: () => { } } as React.FormEvent); resetSuggestedQuestions(); if (width && width > 768) { inputRef.current?.focus(); } }, [onSubmit, resetSuggestedQuestions, width, inputRef]); const triggerFileInput = useCallback(() => { if (attachments.length >= MAX_IMAGES) { toast.error(`You can only attach up to ${MAX_IMAGES} images.`); return; } if (hasSubmitted) { postSubmitFileInputRef.current?.click(); } else { fileInputRef.current?.click(); } }, [attachments.length, hasSubmitted, fileInputRef]); return (

0 || uploadQueue.length > 0 ? "bg-gray-100/70 dark:bg-neutral-800 p-1" : "bg-transparent" )}> {(attachments.length > 0 || uploadQueue.length > 0) && (

{/* Existing attachment previews */} {attachments.map((attachment, index) => ( removeAttachment(index)} isUploading={false} /> ))} {uploadQueue.map((filename) => ( { }} isUploading={true} /> ))}

)}

{
                        if (event.key === "Enter" && !event.shiftKey) {
                            event.preventDefault();
                            if (isLoading) {
                                toast.error("Please wait for the response to complete!");
                            } else {
                                submitForm();
                            }
                        }
                    }}
                />

<div className={cn(
                    "absolute bottom-0 inset-x-0 flex justify-between items-center rounded-b-lg p-2",
                    "bg-neutral-100 dark:bg-neutral-900",
                    "!border !border-t-0 !border-neutral-200 dark:!border-neutral-700",
                    isFocused ? "!border-neutral-300 dark:!border-neutral-600" : "",
                    isLoading ? "!opacity-20 !cursor-not-allowed" : ""
                )}>
                    <div className="flex items-center gap-2">
                        {!hasSubmitted ?
                            <GroupSelector
                                selectedGroup={selectedGroup}
                                onGroupSelect={handleGroupSelect}
                            />
                            : null
                        }
                        <ModelSwitcher
                            selectedModel={selectedModel}
                            setSelectedModel={setSelectedModel}
                        />
                    </div>

<div className="flex items-center gap-2">
                        {hasVisionSupport(selectedModel) && (
                            <Button
                                className="rounded-full p-1.5 h-8 w-8 bg-white dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-300 dark:hover:bg-neutral-600"
                                onClick={(event) => {
                                    event.preventDefault();
                                    triggerFileInput();
                                }}
                                variant="outline"
                                disabled={isLoading}
                            >
                                <PaperclipIcon size={14} />
                            </Button>
                        )}

{isLoading ? (
                            <Button
                                className="rounded-full p-1.5 h-8 w-8"
                                onClick={(event) => {
                                    event.preventDefault();
                                    stop();
                                }}
                                variant="destructive"
                            >
                                <StopIcon size={14} />
                            </Button>
                        ) : (
                            <Button
                                className="rounded-full p-1.5 h-8 w-8"
                                onClick={(event) => {
                                    event.preventDefault();
                                    submitForm();
                                }}
                                disabled={input.length === 0 && attachments.length === 0 || uploadQueue.length > 0}
                            >
                                <ArrowUpIcon size={14} />
                            </Button>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default FormComponent;