'use client'; import { useState, useRef, useEffect } from 'react'; import { Sparkles, Mic, Send, Brain, Wand2, Clock, Globe, MapPin, Navigation, Settings, ChevronDown } from 'lucide-react'; interface AISearchBoxProps { value: string; onChange: (value: string) => void; onSearch: (queryWithRadius?: string) => void; loading?: boolean; selectedRadius: number; onRadiusChange: (radius: number) => void; includeRadius: boolean; onIncludeRadiusChange: (include: boolean) => void; } const EXAMPLE_PROMPTS = [ { text: 'I need help with Germany student visa application from Lahore. Need someone who responds quickly.', icon: Globe, color: 'from-blue-100/80 to-blue-50/80 border-blue-200/60 hover:border-blue-300', radius: 100 }, { text: 'Looking for Canada PR consultant in Delhi with IELTS preparation support and fast response.', icon: Clock, color: 'from-green-100/80 to-green-50/80 border-green-200/60 hover:border-green-300', radius: 50 }, { text: 'Need urgent help with US work visa from Mumbai. Digital consultation preferred.', icon: Wand2, color: 'from-purple-100/80 to-purple-50/80 border-purple-200/60 hover:border-purple-300', radius: 200 }, { text: 'Family visa assistance for UK from Karachi, budget under $200, English speaking consultant.', icon: Brain, color: 'from-amber-100/80 to-amber-50/80 border-amber-200/60 hover:border-amber-300', radius: 150 } ]; export default function AISearchBox({ value, onChange, onSearch, loading, selectedRadius, onRadiusChange, includeRadius, onIncludeRadiusChange }: AISearchBoxProps) { const [isListening, setIsListening] = useState(false); const [selectedCity, setSelectedCity] = useState(''); const recognition = useRef(null); const textareaRef = useRef(null); useEffect(() => { if (typeof window !== 'undefined' && 'webkitSpeechRecognition' in window) { const SpeechRecognition = (window as any).webkitSpeechRecognition; const recognitionInstance = new SpeechRecognition(); recognitionInstance.continuous = false; recognitionInstance.interimResults = false; recognitionInstance.lang = 'en-US'; recognitionInstance.onstart = () => setIsListening(true); recognitionInstance.onend = () => setIsListening(false); recognitionInstance.onresult = (event: any) => { const transcript = event.results[0][0].transcript; onChange(transcript); setTimeout(() => handleSearch(transcript), 500); }; recognition.current = recognitionInstance; } }, [onChange]); // Extract city from query useEffect(() => { if (value) { const extractedCity = extractCityFromQuery(value); if (extractedCity) { setSelectedCity(extractedCity); // If city is mentioned, default to radius search if not already set if (includeRadius && selectedRadius === 0) { onRadiusChange(100); } } } }, [value, includeRadius, selectedRadius, onRadiusChange]); const extractCityFromQuery = (query: string): string | null => { const queryLower = query.toLowerCase(); const cities = ['Lahore', 'Karachi', 'Islamabad', 'Delhi', 'Dubai', 'London', 'Mumbai', 'Toronto', 'Sydney']; for (const city of cities) { if (queryLower.includes(city.toLowerCase())) { return city; } } // Try to extract city using patterns const cityPatterns = [ /(?:from|in|near|around)\s+([A-Z][a-zA-Z\s]+?)(?:\.|,|$)/i, /([A-Z][a-zA-Z\s]+?)(?:\s+consultant|\s+visa|\s+help)/i ]; for (const pattern of cityPatterns) { const match = query.match(pattern); if (match) { const potentialCity = match[1].trim(); // Check if it's a known city or looks like a city name if (potentialCity.length > 2 && !potentialCity.includes('need') && !potentialCity.includes('help')) { return potentialCity; } } } return null; }; const handleVoiceInput = () => { if (recognition.current) { if (isListening) { recognition.current.stop(); } else { recognition.current.start(); } } else { alert('Voice recognition is not supported in your browser. Please use Chrome or Edge.'); } }; const handleSearch = (customQuery?: string) => { const searchQuery = customQuery || value.trim(); if (!searchQuery) return; // Create enhanced query with radius parameter let enhancedQuery = searchQuery; if (includeRadius && selectedRadius > 0 && selectedCity) { // Format: Original query [RADIUS:100km CITY:Lahore] enhancedQuery = `${searchQuery} [RADIUS:${selectedRadius}km CITY:${selectedCity}]`; } else if (includeRadius && selectedRadius > 0 && !selectedCity) { // User wants radius search but no city mentioned - add just radius enhancedQuery = `${searchQuery} [RADIUS:${selectedRadius}km]`; } else if (!includeRadius && selectedCity) { // Exact city only enhancedQuery = `${searchQuery} [EXACT_CITY:${selectedCity}]`; } console.log('🔍 Enhanced Query for API:', { original: searchQuery, enhanced: enhancedQuery, radius: selectedRadius, includeRadius: includeRadius, city: selectedCity }); onSearch(enhancedQuery); }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); handleSearch(); }; const handleExampleClick = (exampleText: string, exampleRadius: number) => { onRadiusChange(exampleRadius); onChange(exampleText); setTimeout(() => { if (textareaRef.current) { textareaRef.current.focus(); } setTimeout(() => handleSearch(exampleText), 100); }, 50); }; const handleRadiusChange = (newRadius: number) => { onRadiusChange(newRadius); }; const handleIncludeRadiusChange = (include: boolean) => { onIncludeRadiusChange(include); // If enabling radius search and radius is 0, set default if (include && selectedRadius === 0) { onRadiusChange(100); } }; useEffect(() => { if (textareaRef.current) { textareaRef.current.style.height = 'auto'; textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`; } }, [value]); return (
AI Assistant