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:
andupetcu
2025-09-20 18:57:07 +03:00
parent 75476a85c9
commit 3f2407b704

View File

@@ -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>