'use client'; import { useCallback, useEffect, useRef, useState } from 'react'; import Image from 'next/image'; import { AnimatePresence, motion } from 'framer-motion'; import { Globe, Paperclip, Send, Loader2, X, FileText, Mic, MicOff, Sparkles } from 'lucide-react'; import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition'; import { cn } from '@/lib/utils'; import { Textarea } from '@/components/ui/textarea'; interface UseAutoResizeTextareaProps { minHeight: number; maxHeight?: number; } function useAutoResizeTextarea({ minHeight, maxHeight }: UseAutoResizeTextareaProps) { const textareaRef = useRef(null); const adjustHeight = useCallback( (reset?: boolean) => { const textarea = textareaRef.current; if (!textarea) return; if (reset) { textarea.style.height = `${minHeight}px`; return; } textarea.style.height = `${minHeight}px`; const newHeight = Math.max( minHeight, Math.min(textarea.scrollHeight, maxHeight ?? Number.POSITIVE_INFINITY), ); textarea.style.height = `${newHeight}px`; }, [minHeight, maxHeight], ); useEffect(() => { const textarea = textareaRef.current; if (textarea) { textarea.style.height = `${minHeight}px`; } }, [minHeight]); useEffect(() => { const handleResize = () => adjustHeight(); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, [adjustHeight]); return { textareaRef, adjustHeight }; } const MIN_HEIGHT = 58; const MAX_HEIGHT = 197; const AnimatedPlaceholder = ({ showSearch }: { showSearch: boolean }) => ( {showSearch ? 'Search the web...' : 'Ask Anything...'} ); export function AiInput({ onSubmit, loading = false, }: { onSubmit: (text: string, imageDataUrl?: string, webSearch?: boolean) => void; loading?: boolean; }) { const [value, setValue] = useState(''); const { textareaRef, adjustHeight } = useAutoResizeTextarea({ minHeight: MIN_HEIGHT, maxHeight: MAX_HEIGHT, }); // Speech recognition setup const { transcript, listening, resetTranscript, browserSupportsSpeechRecognition, isMicrophoneAvailable } = useSpeechRecognition(); // Update value when transcript changes useEffect(() => { if (transcript) { setValue(transcript); adjustHeight(); } }, [transcript, adjustHeight]); const startListening = () => { if (!browserSupportsSpeechRecognition) { alert('Your browser does not support speech recognition.'); return; } if (!isMicrophoneAvailable) { alert('Microphone access is required for speech recognition.'); return; } resetTranscript(); SpeechRecognition.startListening({ continuous: true, language: 'en-US' }); }; const stopListening = () => { SpeechRecognition.stopListening(); }; // Prompt enhancement state const [isEnhancing, setIsEnhancing] = useState(false); const enhancePrompt = async () => { if (!value.trim() || isEnhancing) return; // Stop listening if mic is active if (listening) { // Small delay to ensure transcript is captured setTimeout(() => stopListening(), 100); } setIsEnhancing(true); try { const response = await fetch('/api/enhance-prompt', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt: value.trim() }) }); if (!response.ok) { const errorData = await response.json().catch(() => ({})); throw new Error(errorData.error || `HTTP ${response.status}: Failed to enhance prompt`); } const data = await response.json(); if (data.enhancedPrompt) { setValue(data.enhancedPrompt); adjustHeight(); } else { throw new Error('No enhanced prompt received from server'); } } catch (error) { console.error('Error enhancing prompt:', error); // Show a user-friendly error message alert(`Failed to enhance prompt: ${error instanceof Error ? error.message : 'Unknown error'}`); } finally { setIsEnhancing(false); } }; const [showSearch, setShowSearch] = useState(true); const [imagePreview, setImagePreview] = useState(null); const [attachedFile, setAttachedFile] = useState(null); const fileInputRef = useRef(null); const [barVisible, setBarVisible] = useState(true); const lastScrollY = useRef(0); const [errorMsg, setErrorMsg] = useState(null); const handelClose = (e: React.MouseEvent) => { e.preventDefault(); e.stopPropagation(); if (fileInputRef.current) { fileInputRef.current.value = ''; } setImagePreview(null); setAttachedFile(null); }; const handelChange = (e: React.ChangeEvent) => { const file = e.target.files ? e.target.files[0] : null; if (!file) return; // Allowed types: images + text/plain + pdf + msword + docx const allowed = [ /^image\//, /^text\/plain$/, /^application\/pdf$/, /^application\/msword$/, /^application\/vnd\.openxmlformats-officedocument\.wordprocessingml\.document$/, ]; const isAllowed = allowed.some((re) => re.test(file.type)); if (!isAllowed) { setErrorMsg('Unsupported file. Allowed: Images, TXT, PDF, DOC, DOCX.'); setTimeout(() => setErrorMsg(null), 4000); if (fileInputRef.current) fileInputRef.current.value = ''; // reset so same file can be selected later return; } setAttachedFile(file); if (file.type.startsWith('image/')) { setImagePreview(URL.createObjectURL(file)); } else { setImagePreview(null); } }; const handleSubmit = async () => { // Stop listening if mic is active if (listening) { // Small delay to ensure transcript is captured setTimeout(() => stopListening(), 100); } let dataUrl: string | undefined; if (attachedFile) { dataUrl = await new Promise((resolve) => { const fr = new FileReader(); fr.onload = () => resolve(String(fr.result)); fr.readAsDataURL(attachedFile); }); } onSubmit(value.trim(), dataUrl, showSearch); setValue(''); setAttachedFile(null); setImagePreview(null); adjustHeight(true); }; useEffect(() => { return () => { if (imagePreview) { URL.revokeObjectURL(imagePreview); } }; }, [imagePreview]); // Hide bar on scroll down, show on scroll up useEffect(() => { const onScroll = () => { const y = window.scrollY || 0; const delta = y - lastScrollY.current; const threshold = 6; if (y < 8) { setBarVisible(true); } else if (delta > threshold) { setBarVisible(false); } else if (delta < -threshold) { setBarVisible(true); } lastScrollY.current = y; }; window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); return (
{/* Content area (textarea + attachments + messages) gets bottom padding to make room for fixed toolbar */}
{/* 40px toolbar + gap */} {imagePreview ? (
attached image