import React, { useState, useEffect, useRef } from 'react'; import { Send, Mic, MicOff, Volume2, VolumeX, Minimize2, Maximize2, X, MessageCircle } from 'lucide-react'; import './AIAssistant.css'; interface Message { role: 'user' | 'assistant'; content: string; data?: any; timestamp: string; } interface ConversationMessage { role: string; content: string; } const AIAssistant: React.FC = () => { const [isOpen, setIsOpen] = useState(false); const [isMinimized, setIsMinimized] = useState(false); const [messages, setMessages] = useState([]); const [inputMessage, setInputMessage] = useState(''); const [isLoading, setIsLoading] = useState(false); const [isListening, setIsListening] = useState(false); const [isSpeaking, setIsSpeaking] = useState(false); const [voiceEnabled, setVoiceEnabled] = useState(true); const [conversationHistory, setConversationHistory] = useState([]); const messagesEndRef = useRef(null); const recognitionRef = useRef(null); const synthRef = useRef(window.speechSynthesis); // Initialize Speech Recognition useEffect(() => { const SpeechRecognition = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition; if (SpeechRecognition) { recognitionRef.current = new SpeechRecognition(); recognitionRef.current.continuous = false; recognitionRef.current.interimResults = false; recognitionRef.current.lang = 'en-US'; recognitionRef.current.onresult = (event: any) => { const transcript = event.results[0][0].transcript; setInputMessage(transcript); setIsListening(false); }; recognitionRef.current.onerror = (event: any) => { console.error('Speech recognition error:', event.error); setIsListening(false); }; recognitionRef.current.onend = () => { setIsListening(false); }; } // Add welcome message setMessages([ { role: 'assistant', content: 'Hi! I\'m your AI assistant. I can help you with bookings, customers, revenue, statistics, and more. What would you like to know?', timestamp: new Date().toISOString() } ]); return () => { if (recognitionRef.current) { recognitionRef.current.stop(); } if (synthRef.current) { synthRef.current.cancel(); } }; }, []); // Auto-scroll to bottom useEffect(() => { scrollToBottom(); }, [messages]); const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); }; const toggleVoiceRecognition = () => { if (isListening) { recognitionRef.current?.stop(); setIsListening(false); } else { try { recognitionRef.current?.start(); setIsListening(true); } catch (error) { console.error('Error starting recognition:', error); } } }; const speak = (text: string) => { if (!voiceEnabled || !text) return; // Cancel any ongoing speech synthRef.current.cancel(); const utterance = new SpeechSynthesisUtterance(text); utterance.rate = 1.0; utterance.pitch = 1.0; utterance.volume = 1.0; utterance.lang = 'en-US'; utterance.onstart = () => setIsSpeaking(true); utterance.onend = () => setIsSpeaking(false); utterance.onerror = () => setIsSpeaking(false); synthRef.current.speak(utterance); }; const stopSpeaking = () => { synthRef.current.cancel(); setIsSpeaking(false); }; const sendMessage = async () => { if (!inputMessage.trim() || isLoading) return; const userMessage: Message = { role: 'user', content: inputMessage, timestamp: new Date().toISOString() }; setMessages(prev => [...prev, userMessage]); setConversationHistory(prev => [...prev, { role: 'user', content: inputMessage }]); setInputMessage(''); setIsLoading(true); try { const response = await fetch('/api/ai-assistant/query', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', }, body: JSON.stringify({ message: inputMessage, conversation_history: conversationHistory }) }); const data = await response.json(); if (data.success) { const assistantMessage: Message = { role: 'assistant', content: data.response, data: data.data, timestamp: new Date().toISOString() }; setMessages(prev => [...prev, assistantMessage]); setConversationHistory(prev => [...prev, { role: 'assistant', content: data.response }]); // Speak the response speak(data.response); } else { throw new Error(data.error || 'Failed to get response'); } } catch (error) { console.error('Error sending message:', error); const errorMessage: Message = { role: 'assistant', content: 'I apologize, but I encountered an error. Please try again.', timestamp: new Date().toISOString() }; setMessages(prev => [...prev, errorMessage]); } finally { setIsLoading(false); } }; const handleKeyPress = (e: React.KeyboardEvent) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); } }; const formatMessage = (message: string) => { // Format message with basic markdown-like styling let formatted = message.replace(/\*\*(.*?)\*\*/g, '$1'); formatted = formatted.replace(/\n/g, '
'); return formatted; }; const clearConversation = () => { setMessages([ { role: 'assistant', content: 'Conversation cleared. How can I help you?', timestamp: new Date().toISOString() } ]); setConversationHistory([]); stopSpeaking(); }; if (!isOpen) { return ( ); } return (
{/* Header */}

AI Assistant

{isLoading ? 'Thinking...' : isListening ? 'Listening...' : 'Online'}
{/* Messages */} {!isMinimized && ( <>
{messages.map((message, index) => (
{message.role === 'assistant' && (
)}
{new Date(message.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
))} {isLoading && (
)}
{/* Quick Actions */}
{/* Input */}