135 lines
4.5 KiB
TypeScript
135 lines
4.5 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useRef, useEffect } from 'react'
|
|
import { Send } from 'lucide-react'
|
|
import ReactMarkdown from 'react-markdown'
|
|
|
|
export function ChatInterface() {
|
|
const [messages, setMessages] = useState<Array<{ role: string; content: string }>>([])
|
|
const [input, setInput] = useState('')
|
|
const [loading, setLoading] = 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() || loading) return
|
|
|
|
const userMessage = { role: 'user', content: input }
|
|
setMessages(prev => [...prev, userMessage])
|
|
setInput('')
|
|
setLoading(true)
|
|
|
|
try {
|
|
const token = localStorage.getItem('authToken')
|
|
const headers: any = { 'Content-Type': 'application/json' }
|
|
if (token) {
|
|
headers['Authorization'] = `Bearer ${token}`
|
|
}
|
|
|
|
const res = await fetch('/api/chat', {
|
|
method: 'POST',
|
|
headers,
|
|
body: JSON.stringify({
|
|
messages: [...messages, userMessage]
|
|
})
|
|
})
|
|
|
|
const data = await res.json()
|
|
setMessages(prev => [...prev, {
|
|
role: 'assistant',
|
|
content: data.response || 'Ne pare rău, nu am putut genera un răspuns.'
|
|
}])
|
|
} catch (error) {
|
|
console.error('Chat error:', error)
|
|
setMessages(prev => [...prev, {
|
|
role: 'assistant',
|
|
content: 'Ne pare rău, a apărut o eroare. Vă rugăm să încercați din nou.'
|
|
}])
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="bg-white rounded-lg shadow-md h-[600px] flex flex-col">
|
|
<div className="p-4 border-b">
|
|
<h3 className="text-lg font-semibold">Chat Biblic AI</h3>
|
|
<p className="text-sm text-gray-600">Pune întrebări despre Biblie și primește răspunsuri fundamentate</p>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto p-4 space-y-4">
|
|
{messages.length === 0 && (
|
|
<div className="text-center text-gray-500 mt-12">
|
|
<p>Bună ziua! Sunt aici să vă ajut cu întrebările despre Biblie.</p>
|
|
<p className="text-sm mt-2">Puteți începe prin a întreba ceva despre un verset sau o temă biblică.</p>
|
|
</div>
|
|
)}
|
|
|
|
{messages.map((msg, idx) => (
|
|
<div
|
|
key={idx}
|
|
className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}
|
|
>
|
|
<div
|
|
className={`max-w-[80%] p-3 rounded-lg ${
|
|
msg.role === 'user'
|
|
? 'bg-blue-500 text-white'
|
|
: 'bg-gray-100 text-gray-800'
|
|
}`}
|
|
>
|
|
{msg.role === 'assistant' ? (
|
|
<div className="prose prose-sm max-w-none">
|
|
<ReactMarkdown>
|
|
{msg.content}
|
|
</ReactMarkdown>
|
|
</div>
|
|
) : (
|
|
<p>{msg.content}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
{loading && (
|
|
<div className="flex justify-start">
|
|
<div className="bg-gray-100 p-3 rounded-lg">
|
|
<div className="flex space-x-2">
|
|
<div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" />
|
|
<div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce delay-100" />
|
|
<div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce delay-200" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div ref={messagesEndRef} />
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="p-4 border-t">
|
|
<div className="flex space-x-2">
|
|
<input
|
|
type="text"
|
|
value={input}
|
|
onChange={(e) => setInput(e.target.value)}
|
|
placeholder="Întreabă despre Biblie..."
|
|
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
disabled={loading}
|
|
/>
|
|
<button
|
|
type="submit"
|
|
disabled={loading || !input.trim()}
|
|
className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
|
>
|
|
<Send className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|