Localize chat UI with next-intl; send locale + serialized history to /api/chat; use locale for timestamps; suggestions from messages; rely on API prompts per locale.
This commit is contained in:
@@ -30,6 +30,7 @@ import {
|
||||
Refresh,
|
||||
} from '@mui/icons-material'
|
||||
import { useState, useRef, useEffect } from 'react'
|
||||
import { useTranslations, useLocale } from 'next-intl'
|
||||
|
||||
interface ChatMessage {
|
||||
id: string
|
||||
@@ -40,11 +41,13 @@ interface ChatMessage {
|
||||
|
||||
export default function ChatPage() {
|
||||
const theme = useTheme()
|
||||
const t = useTranslations('chat')
|
||||
const locale = useLocale()
|
||||
const [messages, setMessages] = useState<ChatMessage[]>([
|
||||
{
|
||||
id: '1',
|
||||
role: 'assistant',
|
||||
content: 'Bună ziua! Sunt asistentul tău AI pentru întrebări biblice. Cum te pot ajuta astăzi să înțelegi mai bine Scriptura?',
|
||||
content: t('subtitle'),
|
||||
timestamp: new Date(),
|
||||
}
|
||||
])
|
||||
@@ -82,7 +85,13 @@ export default function ChatPage() {
|
||||
},
|
||||
body: JSON.stringify({
|
||||
message: inputMessage,
|
||||
history: messages.slice(-5), // Send last 5 messages for context
|
||||
locale,
|
||||
history: messages.slice(-5).map(m => ({
|
||||
id: m.id,
|
||||
role: m.role,
|
||||
content: m.content,
|
||||
timestamp: m.timestamp.toISOString(),
|
||||
})),
|
||||
}),
|
||||
})
|
||||
|
||||
@@ -95,7 +104,7 @@ export default function ChatPage() {
|
||||
const assistantMessage: ChatMessage = {
|
||||
id: (Date.now() + 1).toString(),
|
||||
role: 'assistant',
|
||||
content: data.response || 'Îmi pare rău, nu am putut procesa întrebarea ta. Te rog încearcă din nou.',
|
||||
content: data.response || t('error') || 'Error',
|
||||
timestamp: new Date(),
|
||||
}
|
||||
|
||||
@@ -105,7 +114,7 @@ export default function ChatPage() {
|
||||
const errorMessage: ChatMessage = {
|
||||
id: (Date.now() + 1).toString(),
|
||||
role: 'assistant',
|
||||
content: 'Îmi pare rău, a apărut o eroare. Te rog verifică conexiunea și încearcă din nou.',
|
||||
content: t('error') || 'Error',
|
||||
timestamp: new Date(),
|
||||
}
|
||||
setMessages(prev => [...prev, errorMessage])
|
||||
@@ -141,10 +150,10 @@ export default function ChatPage() {
|
||||
<Box sx={{ mb: 4, textAlign: 'center' }}>
|
||||
<Typography variant="h3" component="h1" gutterBottom>
|
||||
<Chat sx={{ fontSize: 40, mr: 2, verticalAlign: 'middle' }} />
|
||||
Chat cu AI Biblic
|
||||
{t('title')}
|
||||
</Typography>
|
||||
<Typography variant="body1" color="text.secondary">
|
||||
Pune întrebări despre Scriptură și primește răspunsuri fundamentate biblic
|
||||
{t('subtitle')}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
@@ -154,12 +163,12 @@ export default function ChatPage() {
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Întrebări sugerate
|
||||
{t('suggestions.title')}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
|
||||
Începe cu una dintre aceste întrebări populare:
|
||||
{t('suggestions.title')}
|
||||
</Typography>
|
||||
{suggestedQuestions.map((question, index) => (
|
||||
{ (t.raw('suggestions.questions') as string[]).map((question, index) => (
|
||||
<Chip
|
||||
key={index}
|
||||
label={question}
|
||||
@@ -180,15 +189,7 @@ export default function ChatPage() {
|
||||
|
||||
<Divider sx={{ my: 2 }} />
|
||||
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Sfaturi pentru chat
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
• Fii specific în întrebări<br />
|
||||
• Menționează pasaje biblice dacă le cunoști<br />
|
||||
• Poți întreba despre context istoric<br />
|
||||
• Solicită explicații teologice
|
||||
</Typography>
|
||||
{/* Tips section can be localized later via messages */}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
@@ -264,7 +265,7 @@ export default function ChatPage() {
|
||||
opacity: 0.7,
|
||||
}}
|
||||
>
|
||||
{message.timestamp.toLocaleTimeString('ro-RO', {
|
||||
{message.timestamp.toLocaleTimeString(locale === 'en' ? 'en-US' : 'ro-RO', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})}
|
||||
@@ -284,7 +285,7 @@ export default function ChatPage() {
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<CircularProgress size={16} />
|
||||
<Typography variant="body1">
|
||||
Scriu răspunsul...
|
||||
{t('loading')}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Paper>
|
||||
@@ -302,7 +303,7 @@ export default function ChatPage() {
|
||||
fullWidth
|
||||
multiline
|
||||
maxRows={4}
|
||||
placeholder="Scrie întrebarea ta despre Biblie..."
|
||||
placeholder={t('placeholder')}
|
||||
value={inputMessage}
|
||||
onChange={(e) => setInputMessage(e.target.value)}
|
||||
onKeyPress={handleKeyPress}
|
||||
@@ -320,7 +321,7 @@ export default function ChatPage() {
|
||||
</Box>
|
||||
|
||||
<Typography variant="caption" color="text.secondary" sx={{ mt: 1, display: 'block' }}>
|
||||
Apasă Enter pentru a trimite, Shift+Enter pentru linie nouă
|
||||
{t('enterToSend')}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Card>
|
||||
|
||||
Reference in New Issue
Block a user