Haitham Khalifa
478 lines
16 KiB
TypeScript
478 lines
16 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useRef, useEffect, useMemo } from 'react';
|
|
import { useAuth } from '@/contexts/AuthContext';
|
|
import { usePathname, useRouter } from 'next/navigation';
|
|
import Link from 'next/link';
|
|
import {
|
|
Loader2,
|
|
MessageSquare,
|
|
Mic,
|
|
MicOff,
|
|
PhoneCall,
|
|
Send,
|
|
Sparkles,
|
|
} from 'lucide-react';
|
|
import { useVapi } from '@/hooks/useVapi';
|
|
import toast from 'react-hot-toast';
|
|
|
|
interface Message {
|
|
role: 'user' | 'assistant';
|
|
content: string;
|
|
}
|
|
|
|
export default function Chat() {
|
|
const { user, isLoading: authLoading } = useAuth();
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
|
|
const [messages, setMessages] = useState<Message[]>([]);
|
|
const [input, setInput] = useState('');
|
|
const [isSending, setIsSending] = useState(false);
|
|
const [permissionError, setPermissionError] = useState<string | null>(null);
|
|
|
|
// Voice state
|
|
const [isListening, setIsListening] = useState(false);
|
|
const recognitionRef = useRef<any>(null);
|
|
|
|
const messagesEndRef = useRef<HTMLDivElement>(null);
|
|
|
|
const { status, error: callError, durationSeconds, callStats, startCall, endCall } =
|
|
useVapi();
|
|
|
|
// Redirect if not logged in
|
|
useEffect(() => {
|
|
if (!authLoading && !user) {
|
|
router.push('/login');
|
|
}
|
|
}, [user, authLoading, router]);
|
|
|
|
// Auto-scroll
|
|
useEffect(() => {
|
|
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
|
}, [messages]);
|
|
|
|
// Init speech recognition (client only)
|
|
useEffect(() => {
|
|
if (typeof window === 'undefined') return;
|
|
|
|
const SpeechRecognition =
|
|
(window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
|
|
|
|
if (!SpeechRecognition) {
|
|
console.warn('Speech recognition not supported in this browser');
|
|
return;
|
|
}
|
|
|
|
const recognition = new SpeechRecognition();
|
|
recognition.lang = 'en-US'; // change to 'es-ES' etc if you want
|
|
recognition.continuous = false;
|
|
recognition.interimResults = true;
|
|
|
|
recognition.onresult = (event: SpeechRecognitionEvent) => {
|
|
let finalText = '';
|
|
let interimText = '';
|
|
|
|
for (let i = event.resultIndex; i < event.results.length; i++) {
|
|
const result = event.results[i];
|
|
if (result.isFinal) {
|
|
finalText += result[0].transcript;
|
|
} else {
|
|
interimText += result[0].transcript;
|
|
}
|
|
}
|
|
|
|
// show interim in input while speaking
|
|
if (interimText) {
|
|
setInput(interimText);
|
|
}
|
|
|
|
if (finalText) {
|
|
const cleaned = finalText.trim();
|
|
setInput(cleaned);
|
|
// If you want auto-send after speech, uncomment:
|
|
// if (cleaned) {
|
|
// handleVoiceSend(cleaned);
|
|
// }
|
|
}
|
|
};
|
|
|
|
recognition.onerror = (event: any) => {
|
|
console.error('Speech recognition error', event.error);
|
|
setIsListening(false);
|
|
};
|
|
|
|
recognition.onend = () => {
|
|
setIsListening(false);
|
|
};
|
|
|
|
recognitionRef.current = recognition;
|
|
|
|
return () => {
|
|
try {
|
|
recognition.stop();
|
|
} catch {
|
|
// ignore
|
|
}
|
|
recognitionRef.current = null;
|
|
};
|
|
}, []);
|
|
|
|
const sendMessage = async (
|
|
e?: React.FormEvent,
|
|
overrideText?: string,
|
|
) => {
|
|
if (e) e.preventDefault();
|
|
|
|
const textToSend = overrideText ?? input;
|
|
if (!textToSend.trim() || isSending) return;
|
|
|
|
const userMessage: Message = { role: 'user', content: textToSend };
|
|
const updatedMessages = [...messages, userMessage];
|
|
setMessages(updatedMessages);
|
|
setInput('');
|
|
setIsSending(true);
|
|
|
|
try {
|
|
const response = await fetch('/api/chat', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
messages: updatedMessages,
|
|
}),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Failed to get response');
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.error) {
|
|
throw new Error(data.error);
|
|
}
|
|
|
|
setMessages([
|
|
...updatedMessages,
|
|
{ role: 'assistant', content: data.text },
|
|
]);
|
|
} catch (error) {
|
|
console.error('Error sending message:', error);
|
|
setMessages([
|
|
...updatedMessages,
|
|
{
|
|
role: 'assistant',
|
|
content:
|
|
'Sorry, I encountered an error. Please try again.',
|
|
},
|
|
]);
|
|
toast.error('Unable to send your message.');
|
|
} finally {
|
|
setIsSending(false);
|
|
}
|
|
};
|
|
|
|
// Manual send from voice text (if you want to click after dictation)
|
|
const handleVoiceSend = (text: string) => {
|
|
sendMessage(undefined, text);
|
|
};
|
|
|
|
const toggleListening = () => {
|
|
const recognition = recognitionRef.current;
|
|
if (!recognition) {
|
|
console.warn('No recognition instance; browser may not support it');
|
|
return;
|
|
}
|
|
|
|
if (!isListening) {
|
|
setInput('');
|
|
setIsListening(true);
|
|
try {
|
|
recognition.start();
|
|
} catch (err) {
|
|
console.error('Error starting recognition', err);
|
|
setIsListening(false);
|
|
}
|
|
} else {
|
|
try {
|
|
recognition.stop();
|
|
} catch (err) {
|
|
console.error('Error stopping recognition', err);
|
|
}
|
|
setIsListening(false);
|
|
}
|
|
};
|
|
|
|
const formatDuration = (seconds: number) => {
|
|
const mins = Math.floor(seconds / 60);
|
|
const secs = seconds % 60;
|
|
return `${mins}m ${secs.toString().padStart(2, '0')}s`;
|
|
};
|
|
|
|
const callStatusLabel = useMemo(() => {
|
|
if (status === 'connecting') return 'Connecting...';
|
|
if (status === 'active') return 'On Call';
|
|
if (status === 'ended') return 'Call Ended';
|
|
if (status === 'error') return 'Error';
|
|
return 'Ready to Call';
|
|
}, [status]);
|
|
|
|
const handleVoiceCall = async () => {
|
|
setPermissionError(null);
|
|
|
|
if (status === 'active' || status === 'connecting') {
|
|
await endCall();
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await navigator.mediaDevices.getUserMedia({ audio: true });
|
|
} catch (error) {
|
|
console.error('Microphone permission denied', error);
|
|
setPermissionError(
|
|
'Microphone access is required. Please allow permission and use a modern browser.'
|
|
);
|
|
toast.error('Microphone access is required to start a call.');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await startCall();
|
|
toast.success('Call started.');
|
|
} catch (error) {
|
|
console.error('Unable to start call', error);
|
|
toast.error('Unable to start the call.');
|
|
}
|
|
};
|
|
|
|
if (authLoading) {
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-[#0f0b1a] via-[#1b1330] to-[#0f1b3d] flex items-center justify-center">
|
|
<div className="text-white text-xl animate-pulse">Loading...</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!user) {
|
|
return null;
|
|
}
|
|
|
|
const navLinks = [
|
|
{ label: 'Dashboard', href: '/dashboard' },
|
|
{ label: 'Scheduled Calls', href: '/dashboard/scheduled-calls' },
|
|
{ label: 'Voice Agent', href: '/dashboard/agent-settings' },
|
|
{ label: 'Credits', href: '/dashboard/credits' },
|
|
{ label: 'Notifications', href: '/dashboard/notifications' },
|
|
];
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-[#0f0b1a] via-[#1b1330] to-[#0f1b3d] text-white">
|
|
<nav className="border-b border-white/10 bg-white/5 backdrop-blur-sm">
|
|
<div className="max-w-5xl mx-auto px-6 py-4 flex flex-wrap items-center justify-between gap-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="h-10 w-10 rounded-2xl bg-[#8b5cf6]/20 border border-[#8b5cf6]/40 flex items-center justify-center">
|
|
<MessageSquare className="h-5 w-5 text-[#8b5cf6]" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-2xl font-semibold">Chat</h1>
|
|
<p className="text-xs text-[#9ca3af]">Talk to HolaCompi in real time</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
{navLinks.map((link) => {
|
|
const isActive = pathname === link.href;
|
|
return (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
className={`px-3 py-1.5 rounded-full border text-xs transition ${
|
|
isActive
|
|
? 'bg-[#8b5cf6]/20 border-[#8b5cf6]/40 text-white'
|
|
: 'bg-white/5 border-white/10 text-[#9ca3af] hover:text-white'
|
|
}`}
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div className="max-w-5xl mx-auto px-6 py-8">
|
|
<div className="bg-[#1a1625] rounded-3xl border border-[#8b5cf6]/20 p-6 shadow-2xl h-[70vh] flex flex-col">
|
|
<div className="mb-4 rounded-2xl border border-white/10 bg-white/5 backdrop-blur-xl p-4 flex flex-col gap-3">
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<div className="flex items-center gap-3">
|
|
<div
|
|
className={`h-10 w-10 rounded-2xl flex items-center justify-center border ${
|
|
status === 'active'
|
|
? 'bg-red-500/20 border-red-400/40'
|
|
: 'bg-[#8b5cf6]/20 border-[#8b5cf6]/40'
|
|
}`}
|
|
>
|
|
<PhoneCall
|
|
className={`h-5 w-5 ${
|
|
status === 'active' ? 'text-red-300' : 'text-[#8b5cf6]'
|
|
}`}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-semibold">{callStatusLabel}</p>
|
|
<div className="text-xs text-[#9ca3af] flex items-center gap-2">
|
|
{status === 'connecting' && (
|
|
<>
|
|
<Loader2 className="h-3 w-3 animate-spin" />
|
|
Connecting to Vapi...
|
|
</>
|
|
)}
|
|
{status === 'active' && (
|
|
<>
|
|
<span className="h-2 w-2 rounded-full bg-red-400 animate-pulse" />
|
|
Duration: {formatDuration(durationSeconds)}
|
|
</>
|
|
)}
|
|
{status === 'idle' && 'Tap start to begin a voice call'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleVoiceCall}
|
|
disabled={status === 'connecting'}
|
|
className={`px-5 py-3 rounded-2xl font-semibold shadow-2xl transition flex items-center gap-2 ${
|
|
status === 'active'
|
|
? 'bg-red-500 text-white hover:bg-red-600'
|
|
: 'bg-gradient-to-r from-[#8b5cf6] to-[#4f46e5] text-white hover:from-[#7c3aed] hover:to-[#4338ca]'
|
|
} ${status === 'connecting' ? 'opacity-60 cursor-not-allowed' : ''}`}
|
|
>
|
|
<Mic className="h-4 w-4" />
|
|
{status === 'active'
|
|
? 'End Call'
|
|
: status === 'connecting'
|
|
? 'Connecting...'
|
|
: 'Start Call'}
|
|
</button>
|
|
</div>
|
|
|
|
{(permissionError || callError) && (
|
|
<div className="text-xs text-red-300">
|
|
{permissionError || callError}
|
|
</div>
|
|
)}
|
|
|
|
{status === 'ended' && callStats && (
|
|
<div className="rounded-2xl border border-white/10 bg-[#0f0b1a]/60 p-4">
|
|
<p className="text-sm font-semibold">Call Summary</p>
|
|
<div className="mt-2 grid grid-cols-1 sm:grid-cols-3 gap-3 text-xs text-[#9ca3af]">
|
|
<div>
|
|
<p className="uppercase">Duration</p>
|
|
<p className="text-white">{formatDuration(callStats.durationSeconds)}</p>
|
|
</div>
|
|
<div>
|
|
<p className="uppercase">Credits Used</p>
|
|
<p className="text-white">{callStats.creditsUsed}</p>
|
|
</div>
|
|
<div>
|
|
<p className="uppercase">Transcript</p>
|
|
<button className="text-[#8b5cf6] hover:text-white transition">
|
|
View Transcript
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex-1 overflow-y-auto mb-4 space-y-4">
|
|
{messages.length === 0 && (
|
|
<div className="text-[#9ca3af] text-center mt-20">
|
|
Start a conversation with your AI companion
|
|
</div>
|
|
)}
|
|
|
|
{messages.map((message, index) => (
|
|
<div
|
|
key={index}
|
|
className={`flex ${
|
|
message.role === 'user'
|
|
? 'justify-end'
|
|
: 'justify-start'
|
|
}`}
|
|
>
|
|
<div
|
|
className={`max-w-[70%] rounded-2xl p-4 shadow ${
|
|
message.role === 'user'
|
|
? 'bg-[#8b5cf6] text-white'
|
|
: 'bg-[#0f0b1a] border border-white/10 text-white'
|
|
}`}
|
|
>
|
|
<p className="whitespace-pre-wrap">
|
|
{message.content}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
{isSending && (
|
|
<div className="flex justify-start">
|
|
<div className="bg-[#0f0b1a] border border-white/10 rounded-2xl p-4">
|
|
<div className="flex space-x-2">
|
|
<div className="w-2 h-2 bg-[#9ca3af] rounded-full animate-bounce"></div>
|
|
<div
|
|
className="w-2 h-2 bg-[#9ca3af] rounded-full animate-bounce"
|
|
style={{ animationDelay: '0.1s' }}
|
|
></div>
|
|
<div
|
|
className="w-2 h-2 bg-[#9ca3af] rounded-full animate-bounce"
|
|
style={{ animationDelay: '0.2s' }}
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div ref={messagesEndRef} />
|
|
</div>
|
|
|
|
<form onSubmit={(e) => sendMessage(e)} className="flex gap-2 items-center">
|
|
<div className="flex-1 flex items-center gap-2 bg-[#0f0b1a] border border-white/10 rounded-2xl px-4 py-3 focus-within:ring-2 focus-within:ring-[#8b5cf6] transition">
|
|
<Sparkles className="h-4 w-4 text-[#8b5cf6]" />
|
|
<input
|
|
type="text"
|
|
value={input}
|
|
onChange={(e) => setInput(e.target.value)}
|
|
placeholder={isListening ? 'Listening...' : 'Type your message...'}
|
|
className="flex-1 bg-transparent text-white placeholder:text-[#9ca3af] focus:outline-none"
|
|
disabled={isSending}
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={toggleListening}
|
|
className={`px-4 py-3 rounded-2xl font-semibold transition flex items-center gap-2 ${
|
|
isListening
|
|
? 'bg-red-500/80 hover:bg-red-500 text-white'
|
|
: 'bg-white/5 border border-white/10 text-[#9ca3af] hover:text-white'
|
|
}`}
|
|
>
|
|
{isListening ? <MicOff className="h-4 w-4" /> : <Mic className="h-4 w-4" />}
|
|
</button>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={isSending || !input.trim()}
|
|
className="bg-[#8b5cf6] hover:bg-[#7c3aed] disabled:bg-white/10 disabled:text-[#9ca3af] disabled:cursor-not-allowed px-6 py-3 rounded-2xl font-semibold transition flex items-center gap-2"
|
|
>
|
|
<Send className="h-4 w-4" />
|
|
Send
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|