Fix API key placeholder - add valid MiniMax key in .env.local
This commit is contained in:
root
@@ -0,0 +1,277 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useRef, useEffect, useCallback } from "react";
|
||||
|
||||
interface MiniMaxVoiceWidgetProps {
|
||||
businessName?: string;
|
||||
businessType?: "restaurant" | "real-estate" | "clinic" | "car-rental" | "default";
|
||||
theme?: "dark" | "light";
|
||||
apiUrl?: string; // Your VPS API endpoint for MiniMax
|
||||
}
|
||||
|
||||
// Language state
|
||||
type Lang = "es" | "en";
|
||||
|
||||
const SPANISH_GREETING = "¡Hola! Soy el asistente de inteligencia artificial. ¿En qué puedo ayudarte hoy?";
|
||||
const ENGLISH_GREETING = "Hello! I'm the AI assistant. How can I help you today?";
|
||||
|
||||
// MiniMax system prompt
|
||||
const SYSTEM_PROMPT = `You are a friendly AI assistant for a business website.
|
||||
You help customers with questions about services, hours, bookings, and general inquiries.
|
||||
Keep responses brief and helpful (2-3 sentences max).
|
||||
Default language is Spanish. After the first greeting, respond in the language the user uses.
|
||||
Business type: {businessType}. Business name: {businessName}.`;
|
||||
|
||||
export default function MiniMaxVoiceWidget({
|
||||
businessName = "SiteMente",
|
||||
businessType = "restaurant",
|
||||
theme = "dark",
|
||||
apiUrl = "/api/ai/voice-chat"
|
||||
}: MiniMaxVoiceWidgetProps) {
|
||||
const [isListening, setIsListening] = useState(false);
|
||||
const [isSpeaking, setIsSpeaking] = useState(false);
|
||||
const [messages, setMessages] = useState<{role: "user" | "assistant", content: string}[]>([]);
|
||||
const [language, setLanguage] = useState<Lang>("es");
|
||||
const [isInitialized, setIsInitialized] = useState(false);
|
||||
const [showChat, setShowChat] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const recognitionRef = useRef<SpeechRecognition | null>(null);
|
||||
const synthRef = useRef<SpeechSynthesis | null>(null);
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Initialize speech recognition and synthesis
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
|
||||
// Speech Recognition (Web Speech API)
|
||||
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
|
||||
if (SpeechRecognition) {
|
||||
recognitionRef.current = new SpeechRecognition();
|
||||
recognitionRef.current.continuous = false;
|
||||
recognitionRef.current.interimResults = true;
|
||||
recognitionRef.current.lang = language === "es" ? "es-ES" : "en-US";
|
||||
|
||||
recognitionRef.current.onresult = (event) => {
|
||||
const transcript = Array.from(event.results)
|
||||
.map(result => result[0].transcript)
|
||||
.join("");
|
||||
|
||||
if (event.results[0].isFinal) {
|
||||
handleUserInput(transcript);
|
||||
}
|
||||
};
|
||||
|
||||
recognitionRef.current.onerror = (event) => {
|
||||
console.error("Speech recognition error:", event.error);
|
||||
setIsListening(false);
|
||||
if (event.error !== "no-speech") {
|
||||
setError(`Speech error: ${event.error}`);
|
||||
}
|
||||
};
|
||||
|
||||
recognitionRef.current.onend = () => {
|
||||
setIsListening(false);
|
||||
};
|
||||
}
|
||||
|
||||
// Speech Synthesis
|
||||
synthRef.current = window.speechSynthesis;
|
||||
|
||||
return () => {
|
||||
recognitionRef.current?.stop();
|
||||
synthRef.current?.cancel();
|
||||
};
|
||||
}, [language]);
|
||||
|
||||
// Scroll to bottom
|
||||
useEffect(() => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
||||
}, [messages]);
|
||||
|
||||
// Initialize with greeting
|
||||
useEffect(() => {
|
||||
if (!isInitialized) {
|
||||
setIsInitialized(true);
|
||||
const greeting = language === "es" ? SPANISH_GREETING : ENGLISH_GREETING;
|
||||
setMessages([{ role: "assistant", content: greeting }]);
|
||||
speak(greeting);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Speak text using browser TTS
|
||||
const speak = useCallback((text: string) => {
|
||||
if (!synthRef.current) return;
|
||||
|
||||
synthRef.current.cancel();
|
||||
const utterance = new SpeechSynthesisUtterance(text);
|
||||
utterance.lang = language === "es" ? "es-ES" : "en-US";
|
||||
utterance.rate = 0.9;
|
||||
utterance.pitch = 1;
|
||||
|
||||
utterance.onstart = () => setIsSpeaking(true);
|
||||
utterance.onend = () => setIsSpeaking(false);
|
||||
utterance.onerror = () => setIsSpeaking(false);
|
||||
|
||||
synthRef.current.speak(utterance);
|
||||
}, [language]);
|
||||
|
||||
// Handle user input
|
||||
const handleUserInput = async (text: string) => {
|
||||
if (!text.trim()) return;
|
||||
|
||||
// Add user message
|
||||
setMessages(prev => [...prev, { role: "user", content: text }]);
|
||||
|
||||
// Detect language from first message
|
||||
const spanishWords = ["hola", "gracias", "por favor", "quiero", "necesito", "reserva", "precio", "dónde", "cuándo"];
|
||||
const isSpanish = spanishWords.some(word => text.toLowerCase().includes(word));
|
||||
if (isSpanish && language === "en") {
|
||||
setLanguage("es");
|
||||
} else if (!isSpanish && language === "es" && text.length > 5) {
|
||||
setLanguage("en");
|
||||
}
|
||||
|
||||
setIsSpeaking(true);
|
||||
|
||||
try {
|
||||
// Call MiniMax API
|
||||
const response = await fetch(apiUrl, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
message: text,
|
||||
language,
|
||||
businessType,
|
||||
businessName,
|
||||
history: messages.slice(-5) // Last 5 messages for context
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error("API request failed");
|
||||
|
||||
const data = await response.json();
|
||||
const aiResponse = data.response || data.message || "Lo siento, no entendí. ¿Puedes repetir?";
|
||||
|
||||
setMessages(prev => [...prev, { role: "assistant", content: aiResponse }]);
|
||||
speak(aiResponse);
|
||||
|
||||
} catch (err) {
|
||||
console.error("API error:", err);
|
||||
// Fallback response
|
||||
const fallbackResponse = language === "es"
|
||||
? "Lo siento, tuve un problema. ¿Puedes repetir?"
|
||||
: "Sorry, I had an issue. Can you repeat that?";
|
||||
setMessages(prev => [...prev, { role: "assistant", content: fallbackResponse }]);
|
||||
speak(fallbackResponse);
|
||||
}
|
||||
};
|
||||
|
||||
// Toggle listening
|
||||
const toggleListening = () => {
|
||||
if (!recognitionRef.current) {
|
||||
setError("Speech recognition not supported in this browser");
|
||||
return;
|
||||
}
|
||||
|
||||
if (isListening) {
|
||||
recognitionRef.current.stop();
|
||||
} else {
|
||||
setError(null);
|
||||
recognitionRef.current.lang = language === "es" ? "es-ES" : "en-US";
|
||||
recognitionRef.current.start();
|
||||
setIsListening(true);
|
||||
}
|
||||
};
|
||||
|
||||
// Theme colors
|
||||
const buttonColor = theme === "dark" ? "bg-brand-pink" : "bg-blue-600";
|
||||
const bgColor = theme === "dark" ? "bg-[#1a1625]" : "bg-white";
|
||||
const textColor = theme === "dark" ? "text-white" : "text-gray-900";
|
||||
const inputBg = theme === "dark" ? "bg-white/10" : "bg-gray-100";
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-6 right-6 z-50">
|
||||
{/* Chat Toggle */}
|
||||
<button
|
||||
onClick={() => setShowChat(!showChat)}
|
||||
className={`${buttonColor} w-14 h-14 rounded-full shadow-lg flex items-center justify-center transition-all hover:scale-110 ${isListening ? "animate-pulse" : ""}`}
|
||||
title={isListening ? "Listening..." : "AI Assistant"}
|
||||
>
|
||||
{isSpeaking ? "🔊" : isListening ? "👂" : "🎙️"}
|
||||
</button>
|
||||
|
||||
{/* Chat Panel */}
|
||||
{showChat && (
|
||||
<div className={`absolute bottom-20 right-0 w-80 ${bgColor} rounded-2xl shadow-2xl border border-white/10 overflow-hidden`}>
|
||||
{/* Header */}
|
||||
<div className={`${theme === "dark" ? "bg-brand-purple" : "bg-blue-600"} p-3 flex items-center justify-between`}>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xl">🤖</span>
|
||||
<span className={`font-semibold ${theme === "dark" ? "text-white" : "text-white"}`}>
|
||||
{businessName} AI
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setLanguage(lang => lang === "es" ? "en" : "es")}
|
||||
className="text-xs bg-white/20 px-2 py-1 rounded text-white"
|
||||
>
|
||||
{language === "es" ? "🇪🇸 ES" : "🇬🇧 EN"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Messages */}
|
||||
<div className={`h-64 overflow-y-auto p-3 space-y-2 ${textColor}`}>
|
||||
{messages.map((msg, i) => (
|
||||
<div key={i} className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}>
|
||||
<div className={`max-w-[80%] px-3 py-2 rounded-lg text-sm ${
|
||||
msg.role === "user"
|
||||
? buttonColor + " text-white"
|
||||
: theme === "dark" ? "bg-white/10 text-white" : "bg-gray-100 text-gray-900"
|
||||
}`}>
|
||||
{msg.content}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{isListening && (
|
||||
<div className="flex justify-start">
|
||||
<div className="bg-white/10 px-3 py-2 rounded-lg text-sm text-white animate-pulse">
|
||||
🎤 Listening...
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
<div className={`p-3 border-t ${theme === "dark" ? "border-white/10" : "border-gray-200"} flex gap-2`}>
|
||||
<button
|
||||
onClick={toggleListening}
|
||||
disabled={isSpeaking}
|
||||
className={`flex-1 py-2 rounded-lg font-semibold text-white transition ${
|
||||
isListening ? "bg-red-500 animate-pulse" : buttonColor + " hover:opacity-90"
|
||||
} disabled:opacity-50`}
|
||||
>
|
||||
{isListening ? "🛑 Stop" : "🎤 Hablar"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div className="px-3 pb-2 text-xs text-red-400">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Type declarations for Web Speech API
|
||||
declare global {
|
||||
interface Window {
|
||||
SpeechRecognition: typeof SpeechRecognition;
|
||||
webkitSpeechRecognition: typeof SpeechRecognition;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user