pokemon-api-server

'use client'; import { useState, useRef, useEffect } from 'react'; interface Message { role: 'user' | 'assistant'; content: string; sources?: string[]; } export default function Chat() { const [messages, setMessages] = useState<Message[]>([]); const [input, setInput] = useState(''); const [isLoading, setIsLoading] = useState(false); const messagesEndRef = useRef<HTMLDivElement>(null); const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; useEffect(() => { scrollToBottom(); }, [messages]); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); if (!input.trim()) return; const userMessage = input; setInput(''); setMessages(prev => [...prev, { role: 'user', content: userMessage }]); setIsLoading(true); try { const response = await fetch('http://127.0.0.1:8000/chat', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', }, body: JSON.stringify({ message: userMessage }), }); if (!response.ok) { const errorData = await response.json(); throw new Error(errorData.detail || 'Failed to get response from server'); } const data = await response.json(); setMessages(prev => [...prev, { role: 'assistant', content: data.response, sources: data.sources }]); } catch (error) { console.error('Error:', error); setMessages(prev => [...prev, { role: 'assistant', content: `Error: ${error instanceof Error ? error.message : 'Failed to get response from server'}` }]); } finally { setIsLoading(false); } }; return ( <div className="flex flex-col h-screen max-w-4xl mx-auto p-4"> <div className="flex-1 overflow-y-auto mb-4 space-y-4"> {messages.length === 0 && ( <div className="text-center text-gray-500 mt-8"> Ask me anything about Pokemon! </div> )} {messages.map((message, index) => ( <div key={index} className={`p-4 rounded-lg ${ message.role === 'user' ? 'bg-blue-100 ml-auto max-w-[80%]' : 'bg-gray-100 mr-auto max-w-[80%]' }`} > <p className="text-gray-800 whitespace-pre-wrap">{message.content}</p> {message.sources && ( <div className="mt-2 text-sm text-gray-500"> Sources: {message.sources.join(', ')} </div> )} </div> ))} {isLoading && ( <div className="bg-gray-100 p-4 rounded-lg mr-auto max-w-[80%]"> <div className="flex items-center space-x-2"> <div className="w-2 h-2 bg-gray-500 rounded-full animate-bounce" /> <div className="w-2 h-2 bg-gray-500 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }} /> <div className="w-2 h-2 bg-gray-500 rounded-full animate-bounce" style={{ animationDelay: '0.4s' }} /> </div> </div> )} <div ref={messagesEndRef} /> </div> <form onSubmit={handleSubmit} className="flex gap-2"> <input type="text" value={input} onChange={(e) => setInput(e.target.value)} placeholder="Ask about Pokemon..." className="flex-1 p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" disabled={isLoading} /> <button type="submit" disabled={isLoading} className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-400" > Send </button> </form> </div> ); }