Initial commit
This commit is contained in:
Haitham Khalifa
@@ -0,0 +1,177 @@
|
||||
'use client';
|
||||
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useState, useRef, FormEvent } from 'react';
|
||||
|
||||
interface Message {
|
||||
id: string;
|
||||
role: 'user' | 'assistant';
|
||||
content: string;
|
||||
timestamp: Date;
|
||||
}
|
||||
|
||||
export default function ChatPage() {
|
||||
const { user, isLoading } = useAuth();
|
||||
const router = useRouter();
|
||||
const [messages, setMessages] = useState<Message[]>([]);
|
||||
const [input, setInput] = useState('');
|
||||
const [sending, setSending] = useState(false);
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isLoading && !user) {
|
||||
router.push('/auth');
|
||||
}
|
||||
}, [user, isLoading, router]);
|
||||
|
||||
useEffect(() => {
|
||||
// Scroll to bottom when messages change
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
}, [messages]);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-[#050316] text-white">
|
||||
<div className="animate-pulse text-2xl">Loading...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!user) return null;
|
||||
|
||||
const handleSendMessage = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!input.trim() || sending) return;
|
||||
|
||||
const userMessage: Message = {
|
||||
id: Date.now().toString(),
|
||||
role: 'user',
|
||||
content: input.trim(),
|
||||
timestamp: new Date(),
|
||||
};
|
||||
|
||||
setMessages((prev) => [...prev, userMessage]);
|
||||
setInput('');
|
||||
setSending(true);
|
||||
|
||||
// Simulate AI response (replace with real AI later)
|
||||
setTimeout(() => {
|
||||
const aiMessage: Message = {
|
||||
id: (Date.now() + 1).toString(),
|
||||
role: 'assistant',
|
||||
content: `Hola! I received your message: "${userMessage.content}". I'm your AI companion, ready to help! (AI integration coming soon)`,
|
||||
timestamp: new Date(),
|
||||
};
|
||||
setMessages((prev) => [...prev, aiMessage]);
|
||||
setSending(false);
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-screen flex flex-col bg-[#050316] text-white">
|
||||
{/* Navigation */}
|
||||
<nav className="border-b border-white/10 bg-white/5 backdrop-blur-sm flex-shrink-0">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center h-16">
|
||||
<div className="flex items-center space-x-8">
|
||||
<h1 className="text-2xl font-bold">HolaCompi Chat</h1>
|
||||
<button
|
||||
onClick={() => router.push('/dashboard')}
|
||||
className="text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
← Back to Dashboard
|
||||
</button>
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">
|
||||
Chatting as {user.name || user.email}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Chat Messages */}
|
||||
<div className="flex-1 overflow-y-auto px-4 py-6">
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
{messages.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="text-6xl mb-4">👋</div>
|
||||
<h2 className="text-2xl font-bold mb-2">Welcome to HolaCompi!</h2>
|
||||
<p className="text-gray-400">
|
||||
Start a conversation with your AI companion
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
messages.map((message) => (
|
||||
<div
|
||||
key={message.id}
|
||||
className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
|
||||
>
|
||||
<div
|
||||
className={`max-w-[70%] rounded-2xl px-6 py-4 ${
|
||||
message.role === 'user'
|
||||
? 'bg-purple-500 text-white'
|
||||
: 'bg-white/10 text-white border border-white/10'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="flex-shrink-0 text-2xl">
|
||||
{message.role === 'user' ? '👤' : '🤖'}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm mb-1 opacity-70">
|
||||
{message.role === 'user' ? 'You' : 'HolaCompi'}
|
||||
</p>
|
||||
<p className="whitespace-pre-wrap">{message.content}</p>
|
||||
<p className="text-xs opacity-50 mt-2">
|
||||
{message.timestamp.toLocaleTimeString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
{sending && (
|
||||
<div className="flex justify-start">
|
||||
<div className="max-w-[70%] rounded-2xl px-6 py-4 bg-white/10 border border-white/10">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="text-2xl">🤖</div>
|
||||
<div className="flex space-x-1">
|
||||
<div className="w-2 h-2 bg-purple-400 rounded-full animate-bounce"></div>
|
||||
<div className="w-2 h-2 bg-purple-400 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
|
||||
<div className="w-2 h-2 bg-purple-400 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Input Area */}
|
||||
<div className="border-t border-white/10 bg-white/5 backdrop-blur-sm flex-shrink-0">
|
||||
<div className="max-w-4xl mx-auto p-4">
|
||||
<form onSubmit={handleSendMessage} className="flex space-x-4">
|
||||
<input
|
||||
type="text"
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
placeholder="Type your message..."
|
||||
className="flex-1 rounded-xl px-6 py-4 bg-black/30 border border-white/10 text-white placeholder-gray-500 outline-none focus:border-purple-400 transition-colors"
|
||||
disabled={sending}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!input.trim() || sending}
|
||||
className="px-8 py-4 rounded-xl bg-purple-500 hover:bg-purple-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
import { NextRequest } from 'next/server';
|
||||
import { GoogleGenerativeAI } from '@google/generative-ai';
|
||||
|
||||
export async function POST(req: NextRequest) {
|
||||
try {
|
||||
const { messages } = await req.json();
|
||||
|
||||
if (!process.env.GEMINI_API_KEY) {
|
||||
return new Response(JSON.stringify({ error: 'Gemini API key not configured' }), {
|
||||
status: 500,
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
});
|
||||
}
|
||||
|
||||
const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);
|
||||
const model = genAI.getGenerativeModel({ model: 'gemini-pro' });
|
||||
|
||||
// Convert messages to Gemini format
|
||||
const history = messages.slice(0, -1).map((msg: any) => ({
|
||||
role: msg.role === 'assistant' ? 'model' : 'user',
|
||||
parts: [{ text: msg.content }],
|
||||
}));
|
||||
|
||||
const userMessage = messages[messages.length - 1].content;
|
||||
|
||||
const chat = model.startChat({
|
||||
history: history,
|
||||
generationConfig: {
|
||||
temperature: 0.7,
|
||||
maxOutputTokens: 1000,
|
||||
},
|
||||
});
|
||||
|
||||
const result = await chat.sendMessageStream(userMessage);
|
||||
|
||||
const encoder = new TextEncoder();
|
||||
const stream = new ReadableStream({
|
||||
async start(controller) {
|
||||
try {
|
||||
for await (const chunk of result.stream) {
|
||||
const text = chunk.text();
|
||||
controller.enqueue(encoder.encode(`data: ${JSON.stringify({ text })}\n\n`));
|
||||
}
|
||||
controller.enqueue(encoder.encode('data: [DONE]\n\n'));
|
||||
controller.close();
|
||||
} catch (error) {
|
||||
controller.error(error);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
return new Response(stream, {
|
||||
headers: {
|
||||
'Content-Type': 'text/event-stream',
|
||||
'Cache-Control': 'no-cache',
|
||||
'Connection': 'keep-alive',
|
||||
},
|
||||
});
|
||||
} catch (error: any) {
|
||||
console.error('Error in chat API:', error);
|
||||
return new Response(JSON.stringify({ error: error.message }), {
|
||||
status: 500,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user