From 3f2407b704738351a23eea14b01f741bc93ed955 Mon Sep 17 00:00:00 2001
From: andupetcu <47487320+andupetcu@users.noreply.github.com>
Date: Sat, 20 Sep 2025 18:57:07 +0300
Subject: [PATCH] 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.

---
 app/[locale]/chat/page.tsx | 47 +++++++++++++++++++-------------------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/app/[locale]/chat/page.tsx b/app/[locale]/chat/page.tsx
index 150e42b..cc0e538 100644
--- a/app/[locale]/chat/page.tsx
+++ b/app/[locale]/chat/page.tsx
@@ -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>
@@ -329,4 +330,4 @@ export default function ChatPage() {
       </Container>
     </Box>
   )
-}
\ No newline at end of file
+}