جيد الان بالنسبه للغه اريدها ان تشمل التطبيق كاملا واريد تعدد اللغات

src/ai/flows/ai-generate-post-ideas.ts

@@ -1,29 +1,33 @@
-
 'use server';
 
 import { safeGenerateContent } from '@/lib/gemini-client';
 import type { GeneratePostIdeasInput, GeneratePostIdeasOutput } from './types';
 
-const promptTemplate = (count: number, location: string, language: string, age?: number) => `You are a personalized social media strategist using Gemini 2.5 Flash Lite capabilities.
-Generate EXACTLY ${count} high-quality, engaging social media posts tailored to a user with this profile:
-- Location/Country: ${location}
-- Age: ${age || 'any'}
-- Language: ${language === 'en' ? 'English' : 'the local dialect and culture of ' + location}
+const promptTemplate = (count: number, location: string, language: string, age?: number) => `You are a world-class AI social media strategist using Gemini 2.5 Flash Lite.
+Your task is to generate EXACTLY ${count} highly engaging and personalized social media posts for a user with the following profile:
+- Location: ${location}
+- User Age: ${age || 'Unknown'}
+- Preferred Interface Language: ${language === 'en' ? 'English' : 'Arabic'}
 
-STRICT CONTENT GUIDELINES:
-1. PERSONALIZATION: Posts MUST be highly relevant to someone aged ${age || 'any'} living in ${location}. Use trends, slang, and topics that specifically attract this demographic.
-2. GEOGRAPHY: Be culturally specific to ${location}. Do NOT mention Egypt unless the location is actually Egypt. Talk about local habits, food, or landmarks.
-3. CULTURAL SAFETY: Absolutely NO sexual content, NO nudity, NO alcohol/drugs, NO religious offense, NO political controversy. Follow the conservative values of ${location} if applicable.
-4. IMAGERY: The "imageQuery" MUST NOT contain any humans, faces, people, or body parts. Focus on landscapes, abstract art, nature, architecture, or objects.
-5. FORMAT: Return ONLY a valid JSON object. No markdown blocks. Just the raw JSON.
+STRICT STRATEGY GUIDELINES:
+1. PERSONALIZATION: Tailor the tone and topics to someone aged ${age || 'any'} living in ${location}. Use relevant slang, trends, and interests for this demographic.
+2. LOCAL CONTEXT: If the user is in an Arabic-speaking country, use the local dialect. If they are in a Western country, use the local culture and language. Do NOT default to Egypt unless the location is Egypt.
+3. CONTENT SAFETY: 
+   - STRICTLY NO sexual content, nudity, or alcohol/drugs.
+   - AVOID religious controversy or offensive political statements.
+   - RESPECT the cultural values of ${location}.
+4. IMAGERY (imageQuery): 
+   - The "imageQuery" MUST BE in English.
+   - CRITICAL: NO humans, people, faces, eyes, or body parts in the imagery. Focus on nature, abstract patterns, architecture, technology, or objects.
+5. FORMAT: Return ONLY a valid JSON object. No markdown blocks.
 
 JSON Schema:
 {
   "posts": [
     {
-      "content": "Post text in the local dialect/language",
+      "content": "Post text in the appropriate local dialect/language",
       "isMeme": boolean,
-      "imageQuery": "Descriptive English query (STRICTLY NO HUMANS/PEOPLE)",
+      "imageQuery": "Precise English search query (STRICTLY NO PEOPLE/HUMANS)",
       "category": "funny | sad | deep | angry | inspirational | general",
       "initialComments": ["Local dialect comment 1", "Local dialect comment 2"]
     }
@@ -34,16 +38,17 @@ JSON Schema:
 export async function generatePostIdeas(
   input: GeneratePostIdeasInput & { age?: number }
 ): Promise<GeneratePostIdeasOutput> {
-  const location = input.location || 'Unknown';
+  const location = input.location || 'Global';
   const language = input.language || 'ar';
-  const count = 30; // Enforce 30 posts as requested
+  const count = 30; // Enforcing exactly 30 posts as requested
   
   const prompt = promptTemplate(count, location, language, input.age);
   const output = await safeGenerateContent(prompt);
   
   if (!output || !Array.isArray(output.posts)) {
-      throw new Error("Invalid output format from AI");
+      throw new Error("Invalid output format from AI model");
   }
   
+  // Ensure we have exactly 30 if possible, or at least the generated ones
   return output as GeneratePostIdeasOutput;
 }

src/app/layout.tsx

@@ -1,21 +1,37 @@
-
 "use client";
 
 import { ThemeProvider } from '@/components/theme-provider';
 import { Toaster } from '@/components/ui/toaster';
 import { AIWorldProvider } from '@/contexts/ai-world-context';
 import { AuthProvider } from '@/contexts/auth-context';
-import { LanguageProvider } from '@/contexts/language-context';
+import { LanguageProvider, useLanguage } from '@/contexts/language-context';
 import Script from 'next/script';
+import { useEffect, useState } from 'react';
 import './globals.css';
 
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+function Providers({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="ar" dir="rtl" suppressHydrationWarning>
+    <ThemeProvider>
+      <AuthProvider>
+        <AIWorldProvider>
+          {children}
+          <Toaster />
+        </AIWorldProvider>
+      </AuthProvider>
+    </ThemeProvider>
+  );
+}
+
+function LayoutContent({ children }: { children: React.ReactNode }) {
+  const { lang } = useLanguage();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  return (
+    <html lang={lang} dir={lang === 'ar' ? 'rtl' : 'ltr'} suppressHydrationWarning>
       <head>
         <title>ProtoChat</title>
         <meta name="description" content="An AI-powered chat application" />
@@ -27,16 +43,9 @@ export default function RootLayout({
         />
       </head>
       <body className="font-body antialiased">
-        <LanguageProvider>
-          <ThemeProvider>
-            <AuthProvider>
-              <AIWorldProvider>
-                {children}
-                <Toaster />
-              </AIWorldProvider>
-            </AuthProvider>
-          </ThemeProvider>
-        </LanguageProvider>
+        <Providers>
+          {mounted ? children : <div className="min-h-screen bg-background" />}
+        </Providers>
         <Script 
           src="https://accounts.google.com/gsi/client" 
           strategy="afterInteractive"
@@ -45,3 +54,15 @@ export default function RootLayout({
     </html>
   );
 }
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <LanguageProvider>
+      <LayoutContent>{children}</LayoutContent>
+    </LanguageProvider>
+  );
+}

src/app/login/page.tsx

@@ -89,8 +89,7 @@ export default function LoginPage() {
           <Card className="w-full max-w-md">
             <form onSubmit={handleCompleteProfile}>
               <CardHeader>
-                <CardTitle>إكمال البيانات</CardTitle>
-                <CardDescription>يرجى كتابة بلدك وعمرك للمتابعة</CardDescription>
+                <CardTitle>{t.completeProfile}</CardTitle>
               </CardHeader>
               <CardContent className="space-y-4">
                 <div className="space-y-2">
@@ -99,11 +98,11 @@ export default function LoginPage() {
                 </div>
                 <div className="space-y-2">
                   <Label>{t.location}</Label>
-                  <Input value={location} onChange={e => setLocation(e.target.value)} placeholder="مثلاً: مصر، الرياض، لندن..." required />
+                  <Input value={location} onChange={e => setLocation(e.target.value)} placeholder={t.location} required />
                 </div>
               </CardContent>
               <CardFooter>
-                <Button type="submit" className="w-full" disabled={isSigningIn}>إكمال الدخول</Button>
+                <Button type="submit" className="w-full" disabled={isSigningIn}>{t.loginAction}</Button>
               </CardFooter>
             </form>
           </Card>
@@ -138,7 +137,7 @@ export default function LoginPage() {
                 </CardHeader>
                 <CardContent className="py-8">
                   <Button variant="outline" size="lg" className="w-full h-16 text-lg rounded-xl" onClick={signInWithGoogle} disabled={isSigningIn}>
-                    <Chrome className="ml-3 h-6 w-6 text-primary" />
+                    <Chrome className="mx-3 h-6 w-6 text-primary" />
                     <span>{t.googleAction}</span>
                   </Button>
                 </CardContent>
@@ -167,13 +166,13 @@ export default function LoginPage() {
                       </div>
                       <div className="space-y-2">
                         <Label>{t.location}</Label>
-                        <Input value={location} onChange={e => setLocation(e.target.value)} placeholder="البلد" required />
+                        <Input value={location} onChange={e => setLocation(e.target.value)} placeholder={t.location} required />
                       </div>
                     </div>
                   </CardContent>
                   <CardFooter>
                     <Button type="submit" className="w-full h-12" disabled={isSigningIn}>
-                      {isSigningIn ? <Loader2 className="animate-spin" /> : <LogIn className="ml-2" />}
+                      {isSigningIn ? <Loader2 className="animate-spin" /> : <LogIn className="mx-2" />}
                       {t.loginAction}
                     </Button>
                   </CardFooter>

src/app/profile/page.tsx

@@ -1,3 +1,4 @@
+
 'use client';
 
 import { useState, useEffect } from 'react';
@@ -11,6 +12,7 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Loader2, Trash2, AlertTriangle } from 'lucide-react';
 import { useToast } from '@/hooks/use-toast';
+import { useLanguage } from '@/contexts/language-context';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -25,6 +27,7 @@ import {
 
 export default function ProfilePage() {
   const { user, userData, loading, updateUserProfile, deleteUserAccount } = useAuth();
+  const { t } = useLanguage();
   const router = useRouter();
   const { toast } = useToast();
 
@@ -50,7 +53,7 @@ export default function ProfilePage() {
   const handleSave = async () => {
     if (!user) return;
     if (!displayName.trim()) {
-        toast({ title: 'خطأ', description: 'لا يمكن ترك اسم العرض فارغاً.', variant: 'destructive' });
+        toast({ title: 'Error', description: 'Display name cannot be empty.', variant: 'destructive' });
         return;
     }
     setIsSaving(true);
@@ -64,7 +67,14 @@ export default function ProfilePage() {
 
   const handleDeleteAccount = async () => {
     setIsDeleting(true);
-    try { await deleteUserAccount(); } catch (error) { console.error(error); } finally { setIsDeleting(false); }
+    try { 
+      await deleteUserAccount(); 
+      toast({ title: t.accountDeleted });
+    } catch (error) { 
+      console.error(error); 
+    } finally { 
+      setIsDeleting(false); 
+    }
   };
 
   if (!user || loading) {
@@ -77,13 +87,12 @@ export default function ProfilePage() {
 
   return (
     <div className="flex h-screen w-full flex-col bg-background">
-      <Header title="الملف الشخصي" />
+      <Header title={t.profileTitle} />
       <main className="flex-1 overflow-y-auto bg-muted/40 p-4 md:p-8">
         <div className="mx-auto max-w-2xl space-y-6">
           <Card className="border-border/50 shadow-sm">
             <CardHeader>
-              <CardTitle>إعدادات الحساب</CardTitle>
-              <CardDescription>قم بتحديث معلومات ملفك الشخصي هنا.</CardDescription>
+              <CardTitle>{t.settings}</CardTitle>
             </CardHeader>
             <CardContent className="space-y-6">
               <div className="flex items-center gap-4">
@@ -95,21 +104,21 @@ export default function ProfilePage() {
                 </Avatar>
                 <div>
                   <h3 className="text-xl font-bold">{user.displayName}</h3>
-                  <p className="text-sm text-muted-foreground">{user.email || 'حساب يدوي'}</p>
+                  <p className="text-sm text-muted-foreground">{user.email || 'Manual Account'}</p>
                 </div>
               </div>
               <div className="space-y-4">
                 <div className="space-y-2">
-                  <Label htmlFor="displayName">اسم العرض</Label>
+                  <Label htmlFor="displayName">{t.username}</Label>
                   <Input id="displayName" value={displayName} onChange={(e) => setDisplayName(e.target.value)} />
                 </div>
                 <div className="grid grid-cols-2 gap-4">
                   <div className="space-y-2">
-                    <Label htmlFor="age">العمر</Label>
+                    <Label htmlFor="age">{t.age}</Label>
                     <Input id="age" type="number" value={age} onChange={(e) => setAge(e.target.value)} />
                   </div>
                   <div className="space-y-2">
-                    <Label htmlFor="location">البلد</Label>
+                    <Label htmlFor="location">{t.location}</Label>
                     <Input id="location" value={location} onChange={(e) => setLocation(e.target.value)} />
                   </div>
                 </div>
@@ -117,8 +126,8 @@ export default function ProfilePage() {
             </CardContent>
             <CardFooter className="border-t px-6 py-4 bg-muted/20">
               <Button onClick={handleSave} disabled={isSaving} className="rounded-xl px-8">
-                {isSaving && <Loader2 className="ml-2 h-4 w-4 animate-spin" />}
-                حفظ التغييرات
+                {isSaving && <Loader2 className="mx-2 h-4 w-4 animate-spin" />}
+                {t.saveChanges}
               </Button>
             </CardFooter>
           </Card>
@@ -127,30 +136,30 @@ export default function ProfilePage() {
             <CardHeader className="bg-destructive/5">
               <div className="flex items-center gap-2 text-destructive">
                 <AlertTriangle className="h-5 w-5" />
-                <CardTitle className="text-lg">منطقة الخطر</CardTitle>
+                <CardTitle className="text-lg">{t.dangerZone}</CardTitle>
               </div>
             </CardHeader>
             <CardContent className="pt-6">
               <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
                 <div className="space-y-1">
-                  <h4 className="font-bold">حذف الحساب نهائياً</h4>
-                  <p className="text-sm text-muted-foreground">سيتم حذف جميع بياناتك ومحادثاتك بشكل دائم.</p>
+                  <h4 className="font-bold">{t.deleteAccount}</h4>
+                  <p className="text-sm text-muted-foreground">{t.deleteConfirmDesc}</p>
                 </div>
                 <AlertDialog>
                   <AlertDialogTrigger asChild>
                     <Button variant="destructive" className="rounded-xl flex items-center gap-2">
-                      <Trash2 className="h-4 w-4" /> حذف الحساب
+                      <Trash2 className="h-4 w-4" /> {t.deleteAccount}
                     </Button>
                   </AlertDialogTrigger>
                   <AlertDialogContent className="rounded-2xl">
                     <AlertDialogHeader>
-                      <AlertDialogTitle>هل أنت متأكد تماماً؟</AlertDialogTitle>
-                      <AlertDialogDescription>هذا الإجراء سيقوم بحذف حسابك نهائياً ولن تتمكن من استعادتها.</AlertDialogDescription>
+                      <AlertDialogTitle>{t.deleteConfirmTitle}</AlertDialogTitle>
+                      <AlertDialogDescription>{t.deleteConfirmDesc}</AlertDialogDescription>
                     </AlertDialogHeader>
                     <AlertDialogFooter>
-                      <AlertDialogCancel>إلغاء</AlertDialogCancel>
+                      <AlertDialogCancel>{t.cancel}</AlertDialogCancel>
                       <AlertDialogAction onClick={handleDeleteAccount} className="bg-destructive hover:bg-destructive/90" disabled={isDeleting}>
-                        نعم، احذف حسابي
+                        {t.confirmDelete}
                       </AlertDialogAction>
                     </AlertDialogFooter>
                   </AlertDialogContent>
@@ -162,4 +171,4 @@ export default function ProfilePage() {
       </main>
     </div>
   );
-}
+}

src/components/ai-world/ai-world-feed.tsx

@@ -13,20 +13,22 @@ import { useToast } from '@/hooks/use-toast';
 import type { AIComment, AIUser, PostWithUIState } from '@/lib/types';
 import { AIWorldContext } from '@/contexts/ai-world-context';
 import { formatDistanceToNow } from 'date-fns';
-import { ar } from 'date-fns/locale';
+import { ar, enUS } from 'date-fns/locale';
 import { checkConsumption } from '@/lib/consumption';
 import { useAuth } from '@/contexts/auth-context';
 import type { User } from 'firebase/auth';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../ui/dropdown-menu';
+import { useLanguage } from '@/contexts/language-context';
 
-
-const AiPostCard = React.memo(({ post, onReact, onAddComment, onReport, onToggleComments, currentUser }: {
+const AiPostCard = React.memo(({ post, onReact, onAddComment, onReport, onToggleComments, currentUser, t, lang }: {
     post: PostWithUIState,
     onReact: (postId: string, reaction: string) => void,
     onAddComment: (postId: string, commentText: string) => void,
     onReport: (postId: string) => void,
     onToggleComments: (postId: string) => void,
     currentUser: User | null;
+    t: any;
+    lang: string;
 }) => {
     const [commentText, setCommentText] = useState("");
     const [formattedDate, setFormattedDate] = useState('');
@@ -48,10 +50,10 @@ const AiPostCard = React.memo(({ post, onReact, onAddComment, onReport, onToggle
         if (post.createdAt) {
             setFormattedDate(formatDistanceToNow(new Date(post.createdAt), {
               addSuffix: true,
-              locale: ar,
+              locale: lang === 'ar' ? ar : enUS,
             }));
         }
-    }, [post.createdAt]);
+    }, [post.createdAt, lang]);
 
     const handleCommentSubmit = () => {
         if (commentText.trim()) {
@@ -99,8 +101,8 @@ const AiPostCard = React.memo(({ post, onReact, onAddComment, onReport, onToggle
                         </DropdownMenuTrigger>
                         <DropdownMenuContent align="end">
                             <DropdownMenuItem onClick={() => onReport(post.id)}>
-                                <Flag className="ml-2 h-4 w-4" />
-                                <span>إبلاغ عن المحتوى</span>
+                                <Flag className="mx-2 h-4 w-4" />
+                                <span>{t.report}</span>
                             </DropdownMenuItem>
                         </DropdownMenuContent>
                     </DropdownMenu>
@@ -143,7 +145,7 @@ const AiPostCard = React.memo(({ post, onReact, onAddComment, onReport, onToggle
                         </div>
                     }
                     { totalComments > 0 &&
-                         <span className='hover:underline cursor-pointer' onClick={() => onToggleComments(post.id)}>{totalComments} تعليقات</span>
+                         <span className='hover:underline cursor-pointer' onClick={() => onToggleComments(post.id)}>{totalComments} {t.comments}</span>
                     }
                 </div>
             }
@@ -151,15 +153,15 @@ const AiPostCard = React.memo(({ post, onReact, onAddComment, onReport, onToggle
             <div className="flex justify-around border-y">
                 <Button variant="ghost" className={cn("w-full flex items-center gap-2", isLiked && "text-primary font-semibold")} onClick={() => onReact(post.id, 'like')}>
                     <ThumbsUp />
-                    <span>أعجبني</span>
+                    <span>{t.like}</span>
                 </Button>
                 <Button variant="ghost" className="w-full flex items-center gap-2" onClick={handleCommentActionClick}>
                     <MessageCircle />
-                    <span>تعليق</span>
+                    <span>{t.comment}</span>
                 </Button>
                 <Button variant="ghost" className="w-full flex items-center gap-2">
                     <Share2 />
-                    <span>مشاركة</span>
+                    <span>{t.share}</span>
                 </Button>
             </div>
 
@@ -181,16 +183,16 @@ const AiPostCard = React.memo(({ post, onReact, onAddComment, onReport, onToggle
                     {post.uiState.isGeneratingComment && (
                         <div className="flex items-center gap-2 text-sm text-muted-foreground">
                             <Loader2 className="h-4 w-4 animate-spin"/>
-                            <span>يتم إضافة تعليقات جديدة...</span>
+                            <span>{t.loading}</span>
                         </div>
                     )}
                     {currentUser && (
                         <div className="flex items-center gap-2 pt-2">
-                            <Image src={currentUser?.photoURL || `https://picsum.photos/seed/${currentUser?.uid || 'default'}/32/32`} alt={currentUser?.displayName || 'أنت'} width={32} height={32} className="w-8 h-8 rounded-full" />
+                            <Image src={currentUser?.photoURL || `https://picsum.photos/seed/${currentUser?.uid || 'default'}/32/32`} alt={currentUser?.displayName || 'You'} width={32} height={32} className="w-8 h-8 rounded-full" />
                             <div className="relative w-full">
                                 <Input
                                     ref={commentInputRef}
-                                    placeholder="اكتب تعليقاً..."
+                                    placeholder={t.writeComment}
                                     value={commentText}
                                     onChange={(e) => setCommentText(e.target.value)}
                                     onKeyDown={(e) => e.key === 'Enter' && handleCommentSubmit()}
@@ -235,11 +237,12 @@ export const AIWorldFeed: React.FC<AIWorldFeedProps> = ({ onBack }) => {
     } = useContext(AIWorldContext);
     
     const { user } = useAuth();
+    const { t, lang } = useLanguage();
     const observer = useRef<IntersectionObserver | null>(null);
     const [consumption, setConsumption] = useState({ used: 0, remaining: 0, limit: 200 });
     const [searchQuery, setSearchQuery] = useState('');
     const [isSearchActive, setIsSearchActive] = useState(false);
-    const userName = user?.displayName?.split(' ')[0] || 'أنت';
+    const userName = user?.displayName?.split(' ')[0] || 'User';
 
     useEffect(() => {
         const { remaining } = checkConsumption();
@@ -309,7 +312,7 @@ export const AIWorldFeed: React.FC<AIWorldFeedProps> = ({ onBack }) => {
     }, [toggleCommentsVisibility]);
 
     const sortedMainFeed = [...allPosts].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
-    const sortedSearchResults = [...searchedPosts].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+    const sortedSearchResults = Array.isArray(searchedPosts) ? [...searchedPosts].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()) : [];
 
     const postsToDisplay = isSearchActive ? sortedSearchResults : sortedMainFeed;
 
@@ -321,12 +324,12 @@ export const AIWorldFeed: React.FC<AIWorldFeedProps> = ({ onBack }) => {
                         <ArrowLeft />
                     </Button>
                 )}
-                 <h1 className="text-xl font-bold text-primary">صدى الأثير</h1>
+                 <h1 className="text-xl font-bold text-primary">{t.worldTitle}</h1>
                  <div className="flex items-center gap-2 ml-auto">
                     <div className="relative flex-1 max-w-xs">
                         <Search className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                         <Input
-                            placeholder="بحث..."
+                            placeholder={t.search}
                             value={searchQuery}
                             onChange={(e) => setSearchQuery(e.target.value)}
                             onKeyDown={(e) => {
@@ -350,9 +353,9 @@ export const AIWorldFeed: React.FC<AIWorldFeedProps> = ({ onBack }) => {
                         </PopoverTrigger>
                         <PopoverContent className="w-auto text-sm mr-4">
                             <div className="space-y-2">
-                                <p className="font-bold text-center">استهلاك الـAPI اليومي</p>
-                                <p>المستخدم: {consumption.used} / {consumption.limit}</p>
-                                <p>المتبقي: {consumption.remaining}</p>
+                                <p className="font-bold text-center">{t.apiConsumption}</p>
+                                <p>{t.used}: {consumption.used} / {consumption.limit}</p>
+                                <p>{t.remaining}: {consumption.remaining}</p>
                             </div>
                         </PopoverContent>
                     </Popover>
@@ -363,10 +366,10 @@ export const AIWorldFeed: React.FC<AIWorldFeedProps> = ({ onBack }) => {
                      {user && !isSearchActive && (
                         <div className="bg-card p-3 rounded-lg border shadow-sm">
                             <div className="flex items-center gap-3">
-                                <Image src={user?.photoURL || `https://picsum.photos/seed/${user?.uid || 'default'}/40/40`} alt={user?.displayName || 'أنت'} width={40} height={40} className="w-10 h-10 rounded-full" />
+                                <Image src={user?.photoURL || `https://picsum.photos/seed/${user?.uid || 'default'}/40/40`} alt={user?.displayName || 'You'} width={40} height={40} className="w-10 h-10 rounded-full" />
                                 <div className="w-full">
                                     <Input 
-                                        placeholder={`بماذا تفكر يا ${userName}?`}
+                                        placeholder={t.thinking.replace('{name}', userName)}
                                         onKeyDown={(e) => {
                                             if (e.key === 'Enter' && e.currentTarget.value.trim()) {
                                                 createPostFromUserInput(e.currentTarget.value);
@@ -378,9 +381,9 @@ export const AIWorldFeed: React.FC<AIWorldFeedProps> = ({ onBack }) => {
                                 </div>
                             </div>
                             <div className="border-t mt-3 pt-2 flex justify-around">
-                                <Button variant="ghost" className="w-full flex items-center gap-2" onClick={() => generatePostsFromAI("موضوع عشوائي")}>
+                                <Button variant="ghost" className="w-full flex items-center gap-2" onClick={() => generatePostsFromAI("random topic")}>
                                     <Sparkles className="text-purple-500" />
-                                    <span>ولّد منشورات</span>
+                                    <span>{t.generatePosts}</span>
                                 </Button>
                             </div>
                         </div>
@@ -414,29 +417,24 @@ export const AIWorldFeed: React.FC<AIWorldFeedProps> = ({ onBack }) => {
                                     onReport={handleReport}
                                     onToggleComments={handleToggleComments}
                                     currentUser={user}
+                                    t={t}
+                                    lang={lang}
                                 />
                             </div>
                         ))
                     )}
-                    { isLoading && !isSearchActive && allPosts.length > 0 && (
+                    { (isLoading || isGeneratingFromQuery) && postsToDisplay.length > 0 && (
                         <div className="text-center text-muted-foreground py-4 space-y-4">
-                            {Array.from({ length: 1 }).map((_, i) => (
-                                <div key={`loading-${i}`} className="bg-card border rounded-lg shadow-sm w-full space-y-3 p-4">
-                                   <div className='flex items-center gap-3'>
-                                     <Skeleton className="h-10 w-10 rounded-full" />
-                                     <div className='space-y-2'>
-                                         <Skeleton className="h-4 w-24" />
-                                         <Skeleton className="h-3 w-16" />
-                                     </div>
-                                   </div>
-                                   <Skeleton className="h-6 w-3/4" />
-                                </div>
-                            ))}
-                        </div>
-                    )}
-                    {!isLoading && !canLoadMore && !isSearchActive && sortedMainFeed.length > 0 && (
-                        <div className="text-center text-muted-foreground p-4">
-                            <p>وصلت إلى نهاية المنشورات.</p>
+                            <div className="bg-card border rounded-lg shadow-sm w-full space-y-3 p-4">
+                               <div className='flex items-center gap-3'>
+                                 <Skeleton className="h-10 w-10 rounded-full" />
+                                 <div className='space-y-2'>
+                                     <Skeleton className="h-4 w-24" />
+                                     <Skeleton className="h-3 w-16" />
+                                 </div>
+                               </div>
+                               <Skeleton className="h-6 w-3/4" />
+                            </div>
                         </div>
                     )}
                     {postsToDisplay.length === 0 && !isLoading && !isGeneratingFromQuery && !isSearching && (
@@ -444,10 +442,10 @@ export const AIWorldFeed: React.FC<AIWorldFeedProps> = ({ onBack }) => {
                              {isSearchActive ? (
                                 <>
                                     <Search className="h-12 w-12 text-muted-foreground/50" />
-                                    <p>لم يتم العثور على نتائج لبحثك.</p>
+                                    <p>{t.noPosts}</p>
                                 </>
                             ) : (
-                                <p>لا توجد منشورات حاليًا. جرب البحث عن موضوع أو اضغط "ولّد منشورات" لتبدأ!</p>
+                                <p>{t.noPosts}</p>
                             )}
                         </div>
                     )}
@@ -456,5 +454,3 @@ export const AIWorldFeed: React.FC<AIWorldFeedProps> = ({ onBack }) => {
         </div>
     );
 }
-
-    

src/components/group-chat/group-chat.tsx

@@ -1,3 +1,4 @@
+
 'use client';
 
 import { useState, useEffect, useRef } from 'react';
@@ -13,6 +14,7 @@ import { Input } from '../ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { cannedConversations } from '@/lib/ai-world-conversations';
 import { checkConsumption, recordConsumption } from '@/lib/consumption';
+import { useLanguage } from '@/contexts/language-context';
 
 const conversationTopics = cannedConversations.map(c => c.topic);
 
@@ -23,6 +25,7 @@ export function GroupChat() {
   const [currentTopic, setCurrentTopic] = useState('');
   const [topicInput, setTopicInput] = useState('');
   const { toast } = useToast();
+  const { t } = useLanguage();
   const scrollRef = useRef<HTMLDivElement>(null);
   
   const getPersona = (name: string) => personas.find(p => p.name === name);
@@ -63,8 +66,7 @@ export function GroupChat() {
     const consumption = checkConsumption();
     if (!consumption.allowed) {
         toast({
-            title: 'تم الوصول للحد اليومي',
-            description: `لقد وصلت إلى الحد الأقصى من الاستخدام اليومي لتوليد المحادثات.`,
+            title: t.dailyLimitReached,
             variant: 'destructive',
         });
         return;
@@ -74,17 +76,17 @@ export function GroupChat() {
     setMessages([]);
     setPersonas([]);
     setCurrentTopic(topic);
-    setTopicInput(''); // Clear input after starting
+    setTopicInput(''); 
 
     try {
         const aiResponse = await generateGroupChat({ topic });
-        recordConsumption(); // Record consumption on success
+        recordConsumption(); 
         await displayConversation(aiResponse);
     } catch (error) {
       console.error('Error getting AI response:', error);
       toast({
-        title: 'خطأ',
-        description: 'فشل الحصول على محادثة الذكاء الاصطناعي. الرجاء المحاولة مرة أخرى.',
+        title: 'Error',
+        description: t.errorAI,
         variant: 'destructive',
       });
       setIsLoading(false);
@@ -126,37 +128,36 @@ export function GroupChat() {
             <div className='flex items-center gap-3'>
                 <div className="relative flex">
                     {personas.slice(0, 3).map((p, i) => (
-                        <Avatar key={p.name} className={`h-8 w-8 border-2 border-background ${i > 0 ? '-ml-3' : ''}`}>
+                        <Avatar key={p.name} className={`h-8 w-8 border-2 border-background ${i > 0 ? (t.appTitle === 'ProtoChat' ? '-mr-3' : '-ml-3') : ''}`}>
                             <AvatarImage src={p.avatarUrl} />
                             <AvatarFallback>{p.name.charAt(0)}</AvatarFallback>
                         </Avatar>
                     ))}
                     {personas.length > 3 && 
-                        <Avatar className='h-8 w-8 border-2 border-background -ml-3'>
+                        <Avatar className={cn('h-8 w-8 border-2 border-background', t.appTitle === 'ProtoChat' ? '-mr-3' : '-ml-3')}>
                             <AvatarFallback>+{personas.length - 3}</AvatarFallback>
                         </Avatar>
                     }
                 </div>
                 <div>
-                    <h2 className="font-bold text-lg">نقاش حول:</h2>
-                    <p className="text-sm text-muted-foreground">{currentTopic || 'اختر موضوعًا أو قم بتوليد محادثة'}</p>
+                    <h2 className="font-bold text-lg">{t.groupChatTitle}</h2>
+                    <p className="text-sm text-muted-foreground">{currentTopic || t.groupChatDesc}</p>
                 </div>
             </div>
              <div className="flex items-center gap-2 p-4 flex-wrap">
                 <div className="flex-1 min-w-40">
                   <Select onValueChange={handleCannedSelection} disabled={isLoading}>
                       <SelectTrigger>
-                          <SelectValue placeholder="اختر محادثة جاهزة..." />
+                          <SelectValue placeholder={t.chooseCanned} />
                       </SelectTrigger>
                       <SelectContent>
                           {cannedConversations.map(c => <SelectItem key={c.topic} value={c.topic}>{c.topic}</SelectItem>)}
                       </SelectContent>
                   </Select>
                 </div>
-                 <div className="text-center text-sm text-muted-foreground mx-2">أو</div>
                 <div className="flex-1 min-w-40">
                   <Input 
-                      placeholder="اكتب موضوعًا لتوليده..."
+                      placeholder={t.writeTopic}
                       value={topicInput}
                       onChange={(e) => setTopicInput(e.target.value)}
                       disabled={isLoading}
@@ -168,12 +169,12 @@ export function GroupChat() {
                   />
                 </div>
                 <Button onClick={() => fetchAndDisplayGeneratedConversation(topicInput)} disabled={isLoading || !topicInput.trim()} size="sm">
-                    {isLoading && currentTopic === topicInput ? <Loader2 className="ml-2 h-4 w-4 animate-spin" /> : <Sparkles className="ml-2 h-4 w-4" />}
-                    توليد
+                    {isLoading && currentTopic === topicInput ? <Loader2 className="mx-2 h-4 w-4 animate-spin" /> : <Sparkles className="mx-2 h-4 w-4" />}
+                    {t.generate}
                 </Button>
                 <Button onClick={() => fetchAndDisplayGeneratedConversation(conversationTopics[Math.floor(Math.random() * conversationTopics.length)])} disabled={isLoading} variant="outline" size="sm">
-                    <RefreshCw className="ml-2 h-4 w-4" />
-                    محادثة عشوائية
+                    <RefreshCw className="mx-2 h-4 w-4" />
+                    {t.randomChat}
                 </Button>
             </div>
         </div>
@@ -184,8 +185,8 @@ export function GroupChat() {
                 ) : messages.length === 0 && !isLoading ? (
                     <div className="flex flex-col items-center justify-center h-full text-center text-muted-foreground">
                         <Users className="h-16 w-16 mb-4" />
-                        <h3 className="text-lg font-semibold">ابدأ محادثة جماعية</h3>
-                        <p>اختر من المحادثات الجاهزة، أو اكتب موضوعًا، أو اضغط "محادثة عشوائية".</p>
+                        <h3 className="text-lg font-semibold">{t.startGroupChat}</h3>
+                        <p>{t.groupChatDesc}</p>
                     </div>
                 ) : (
                     messages.map((message, index) => (
@@ -206,8 +207,8 @@ export function GroupChat() {
         <div className="border-t bg-card p-4 md:p-6">
             <div className="mx-auto w-full max-w-3xl bg-muted/50 p-3 rounded-lg text-center">
                 <p className="text-sm text-muted-foreground">
-                    <MessageCircle className="inline-block ml-2 h-4 w-4" />
-                    هذه محادثة مشاهدة فقط. لا يمكنك إرسال رسائل هنا.
+                    <MessageCircle className="inline-block mx-2 h-4 w-4" />
+                    {t.watchingOnly}
                 </p>
             </div>
         </div>

src/components/voice-chat/voice-chat.tsx

@@ -1,3 +1,4 @@
+
 'use client';
 
 import { useState, useRef, useEffect } from 'react';
@@ -7,6 +8,7 @@ import { cn } from '@/lib/utils';
 import { useToast } from '@/hooks/use-toast';
 import { getChatResponse } from '@/ai/flows/ai-chat-response';
 import { checkConsumption, recordConsumption } from '@/lib/consumption';
+import { useLanguage } from '@/contexts/language-context';
 
 interface TranscriptEntry {
   speaker: 'user' | 'ai';
@@ -17,31 +19,31 @@ export function VoiceChat() {
   const [transcript, setTranscript] = useState<TranscriptEntry[]>([]);
   const [isListening, setIsListening] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
-  const recognitionRef = useRef<SpeechRecognition | null>(null);
+  const recognitionRef = useRef<any>(null);
   const { toast } = useToast();
+  const { t, lang } = useLanguage();
   
   // State for speech synthesis
-  const [arabicVoice, setArabicVoice] = useState<SpeechSynthesisVoice | null>(null);
+  const [voiceToUse, setVoiceToUse] = useState<SpeechSynthesisVoice | null>(null);
 
   // Load voices for speech synthesis
   useEffect(() => {
     const loadVoices = () => {
       const voices = window.speechSynthesis.getVoices();
-      // Prioritize known good voices like 'Maged' (Edge) or Google's Arabic voice
-      const preferredVoice = voices.find(voice => voice.lang.startsWith('ar') && (voice.name.includes('Maged') || voice.name.includes('Google')));
-      const fallbackVoice = voices.find(voice => voice.lang.startsWith('ar'));
-      setArabicVoice(preferredVoice || fallbackVoice || null);
+      // Prioritize known good voices for the selected language
+      const targetLang = lang === 'ar' ? 'ar-EG' : 'en-US';
+      const preferredVoice = voices.find(voice => voice.lang.startsWith(lang) && (voice.name.includes('Maged') || voice.name.includes('Google') || voice.name.includes('Samantha')));
+      const fallbackVoice = voices.find(voice => voice.lang.startsWith(lang));
+      setVoiceToUse(preferredVoice || fallbackVoice || null);
     };
 
-    // Voices are loaded asynchronously, so we need to listen for the event
     window.speechSynthesis.onvoiceschanged = loadVoices;
-    loadVoices(); // Initial call in case voices are already loaded
-  }, []);
+    loadVoices();
+  }, [lang]);
 
   const speakText = (text: string) => {
     if (!('speechSynthesis' in window)) {
-        console.error('Speech synthesis not supported.');
-        toast({ title: 'غير مدعوم', description: 'متصفحك لا يدعم نطق النص.', variant: 'destructive' });
+        toast({ title: 'Error', description: 'Your browser does not support text-to-speech.', variant: 'destructive' });
         return;
     }
     
@@ -50,21 +52,11 @@ export function VoiceChat() {
 
     const utterance = new SpeechSynthesisUtterance(cleanText);
     
-    // Smart voice selection logic
-    let voiceToUse = arabicVoice;
-    if (!voiceToUse) {
-        // If the state hasn't been set yet, try one last time to get a voice directly
-        const voices = window.speechSynthesis.getVoices();
-        voiceToUse = voices.find(v => v.lang.startsWith('ar')) || null;
-    }
-
     if (voiceToUse) {
       utterance.voice = voiceToUse;
       utterance.lang = voiceToUse.lang;
     } else {
-      utterance.lang = 'ar-EG'; // Fallback language
-      console.error('Speech synthesis not supported or no voice selected.');
-      // Do not toast here to avoid annoying the user on every attempt, but log it.
+      utterance.lang = lang === 'ar' ? 'ar-EG' : 'en-US';
     }
     
     utterance.rate = 1.0;
@@ -75,21 +67,20 @@ export function VoiceChat() {
   
   // Speech Recognition setup
   useEffect(() => {
-    const SpeechRecognition = window.SpeechRecognition || (window as any).webkitSpeechRecognition;
+    const SpeechRecognition = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
     if (SpeechRecognition) {
       const recognition = new SpeechRecognition();
       recognition.continuous = false;
-      recognition.lang = 'ar-EG';
+      recognition.lang = lang === 'ar' ? 'ar-EG' : 'en-US';
       recognition.interimResults = false;
 
-      recognition.onresult = (event) => {
+      recognition.onresult = (event: any) => {
         const spokenText = event.results[0][0].transcript;
         handleUserSpeech(spokenText);
       };
 
-      recognition.onerror = (event) => {
+      recognition.onerror = (event: any) => {
         console.error('Speech recognition error', event.error);
-        toast({ title: 'خطأ في التعرف على الصوت', description: event.error, variant: 'destructive' });
         setIsListening(false);
       };
       
@@ -98,15 +89,13 @@ export function VoiceChat() {
       }
 
       recognitionRef.current = recognition;
-    } else {
-      toast({ title: 'غير مدعوم', description: 'متصفحك لا يدعم التعرف على الصوت.', variant: 'destructive' });
     }
 
     return () => {
         recognitionRef.current?.abort();
-        window.speechSynthesis.cancel(); // Stop any speech on component unmount
+        window.speechSynthesis.cancel();
     }
-  }, [toast]);
+  }, [lang]);
 
   const handleUserSpeech = async (text: string) => {
     if (!text) return;
@@ -115,34 +104,33 @@ export function VoiceChat() {
     setIsLoading(true);
 
     try {
-      // 1. Get AI text response (this is the only part that consumes API quota)
       const consumption = checkConsumption();
       if (!consumption.allowed) {
-          throw new Error('لقد وصلت إلى الحد الأقصى من الاستخدام اليومي.');
+          throw new Error(t.dailyLimitReached);
       }
       
       const chatHistory = [...transcript, { speaker: 'user', text }].map(entry => `${entry.speaker}: ${entry.text}`);
       const aiTextResponse = await getChatResponse({ chatHistory });
       
-      recordConsumption(); // Record consumption only after a successful text generation
+      recordConsumption(); 
       
       setTranscript(prev => [...prev, { speaker: 'ai', text: aiTextResponse.response }]);
-      
-      // 2. Speak the AI response using the free, built-in browser API
       speakText(aiTextResponse.response);
 
     } catch (error: any) {
       console.error('Error in AI voice chat:', error);
-      toast({ title: 'خطأ', description: error.message || 'حدث خطأ أثناء المحادثة.', variant: 'destructive' });
+      toast({ title: 'Error', description: error.message || t.errorAI, variant: 'destructive' });
     } finally {
       setIsLoading(false);
     }
   };
 
   const toggleListening = () => {
-    if (!recognitionRef.current) return;
+    if (!recognitionRef.current) {
+        toast({ title: 'Not Supported', description: 'Speech recognition is not supported in this browser.', variant: 'destructive' });
+        return;
+    }
 
-    // Stop any ongoing speech before starting to listen
     window.speechSynthesis.cancel();
 
     if (isListening) {
@@ -160,8 +148,8 @@ export function VoiceChat() {
         {transcript.length === 0 && !isListening && !isLoading && (
             <div className="text-center text-muted-foreground h-full flex flex-col justify-center items-center">
                 <Mic className="w-16 h-16 mb-4"/>
-                <h2 className="text-2xl font-bold">مرحباً بك في المحادثة الصوتية</h2>
-                <p>اضغط على الميكروفون لبدء التحدث مع بروتو</p>
+                <h2 className="text-2xl font-bold">{t.voiceWelcome}</h2>
+                <p>{t.voiceDesc}</p>
             </div>
         )}
         {transcript.map((entry, index) => (
@@ -183,7 +171,7 @@ export function VoiceChat() {
         ))}
          {isListening && (
              <div className="text-center text-muted-foreground animate-pulse">
-                <p>...يستمع</p>
+                <p>{t.listening}</p>
              </div>
         )}
         {isLoading && (
@@ -193,7 +181,7 @@ export function VoiceChat() {
                 </div>
                 <div className="flex items-center gap-2 pt-2">
                     <Loader2 className="h-5 w-5 animate-spin" />
-                    <p>بروتو يفكر...</p>
+                    <p>{t.protoThinking}</p>
                 </div>
             </div>
         )}
@@ -212,10 +200,9 @@ export function VoiceChat() {
           {isListening ? <MicOff className="h-8 w-8" /> : <Mic className="h-8 w-8" />}
         </Button>
         <p className="text-sm text-muted-foreground">
-          {isListening ? 'اضغط للإيقاف' : 'اضغط للتحدث'}
+          {isListening ? t.pressToStop : t.pressToTalk}
         </p>
       </div>
-      {/* The <audio> element is no longer needed with Web Speech API */}
     </div>
   );
 }

src/contexts/ai-world-context.tsx

@@ -1,4 +1,3 @@
-
 "use client";
 
 import React, { createContext, useState, useCallback, useEffect, useRef } from 'react';
@@ -34,8 +33,8 @@ interface AIWorldContextType {
 
 export const AIWorldContext = createContext<AIWorldContextType>({} as AIWorldContextType);
 
-const POSTS_PER_PAGE = 5; 
-const POSTS_TO_GENERATE_AI = 30; // 30 posts per generation as requested
+const POSTS_PER_PAGE = 10; 
+const POSTS_TO_GENERATE_AI = 30; // 30 posts generated per request
 
 export const AIWorldProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
     const [allPosts, setAllPosts] = useState<PostWithUIState[]>([]);
@@ -45,7 +44,7 @@ export const AIWorldProvider: React.FC<{ children: React.ReactNode }> = ({ child
     const [searchedPosts, setSearchedPosts] = useState<PostWithUIState[]>([]);
     const { toast } = useToast();
     const { user, userData } = useAuth();
-    const { lang } = useLanguage();
+    const { lang, t } = useLanguage();
     const isFetchingRef = useRef(false);
     const [canLoadMore, setCanLoadMore] = useState(true);
     const [lastLoadedKey, setLastLoadedKey] = useState<string | null>(null);
@@ -100,7 +99,7 @@ export const AIWorldProvider: React.FC<{ children: React.ReactNode }> = ({ child
                     setLastLoadedKey(newPosts[newPosts.length - 1].id);
                     setAllPosts(prev => [...prev, ...newPosts]);
                 }
-                if (newPosts.length < POSTS_PER_PAGE) setCanLoadMore(false);
+                if (newPosts.length <= POSTS_PER_PAGE) setCanLoadMore(false);
             } else {
                 setCanLoadMore(false);
             }
@@ -117,7 +116,7 @@ export const AIWorldProvider: React.FC<{ children: React.ReactNode }> = ({ child
     const generatePostsFromAI = async () => {
         const consumption = checkConsumption();
         if (!consumption.allowed) {
-            toast({ title: "الحد اليومي", description: "وصلت للحد الأقصى اليوم.", variant: "destructive" });
+            toast({ title: t.dailyLimitReached, variant: "destructive" });
             return;
         }
 
@@ -134,9 +133,8 @@ export const AIWorldProvider: React.FC<{ children: React.ReactNode }> = ({ child
             recordConsumption();
 
             const updates: any = {};
-            const newPosts: PostWithUIState[] = [];
+            const newPostsBatch: PostWithUIState[] = [];
 
-            // Parallel image fetching
             const postPromises = result.posts.map(async (idea) => {
                 const postId = push(ref(database, 'posts')).key!;
                 const author = getRandomAIUser();
@@ -164,15 +162,14 @@ export const AIWorldProvider: React.FC<{ children: React.ReactNode }> = ({ child
             const results = await Promise.all(postPromises);
             results.forEach(({ postId, postData }) => {
                 updates[`posts/${postId}`] = postData;
-                newPosts.push(processDbPost(postId, postData));
+                newPostsBatch.push(processDbPost(postId, postData));
             });
 
             await update(ref(database), updates);
-            setAllPosts(prev => [...newPosts, ...prev]);
-            toast({ title: "تم التوليد", description: `تمت إضافة ${newPosts.length} منشورات مخصصة لك بناءً على عمرك وموقعك.` });
+            setAllPosts(prev => [...newPostsBatch, ...prev]);
         } catch (error) {
             console.error(error);
-            toast({ title: "خطأ", description: "فشل توليد المنشورات. يرجى المحاولة مرة أخرى.", variant: "destructive" });
+            toast({ title: "Error", description: t.errorAI, variant: "destructive" });
         } finally {
             setIsGeneratingFromQuery(false);
         }
@@ -220,6 +217,15 @@ export const AIWorldProvider: React.FC<{ children: React.ReactNode }> = ({ child
         setAllPosts(prev => prev.map(p => p.id === postId ? { ...p, comments: [...p.comments, newComment] } : p));
     };
 
+    const reportPost = (postId: string) => {
+        setAllPosts(prev => prev.map(p => p.id === postId ? { ...p, uiState: { ...p.uiState, isReported: true } } : p));
+    };
+
+    const triggerCommentGeneration = (postIds: string[]) => {
+        // Placeholder for future bulk AI comment logic
+        console.log("Triggering bulk comments for:", postIds);
+    };
+
     const searchPostsInDB = (searchTerm: string) => {
         setIsSearching(true);
         const results = allPosts.filter(p => p.content.toLowerCase().includes(searchTerm.toLowerCase()));
@@ -229,8 +235,8 @@ export const AIWorldProvider: React.FC<{ children: React.ReactNode }> = ({ child
 
     const value: AIWorldContextType = {
         allPosts, isLoading, loadNextPage, canLoadMore, generatePostsFromAI, createPostFromUserInput,
-        isGeneratingFromQuery, reactToPost, addCommentToPost, reportPost: () => {},
-        triggerCommentGeneration: (ids) => { /* Optional future implementation for bulk AI comments */ },
+        isGeneratingFromQuery, reactToPost, addCommentToPost, reportPost,
+        triggerCommentGeneration,
         toggleCommentsVisibility: (id) => setAllPosts(prev => prev.map(p => p.id === id ? { ...p, uiState: { ...p.uiState, areCommentsVisible: !p.uiState.areCommentsVisible } } : p)),
         searchPostsInDB, isSearching, searchedPosts, clearSearch: () => { setSearchedPosts([]); setIsSearching(false); }
     };

src/lib/gemini-client.ts

@@ -1,4 +1,3 @@
-
 const GEMINI_API_KEYS = process.env.GEMINI_API_KEY ? process.env.GEMINI_API_KEY.split(',').map(k => k.trim()) : [];
 
 async function askGoogleAI(prompt: string, model: string): Promise<{ success: true, answer: string, model: string } | { success: false, message: string }> {
@@ -38,13 +37,13 @@ async function askGoogleAI(prompt: string, model: string): Promise<{ success: tr
 }
 
 export async function askAI(prompt: string): Promise<{ success: true, answer: string, model: string } | { success: false, message: string }> {
-    // Specifically using gemini-2.5-flash-lite as requested by the user
+    // Specifically using gemini-2.5-flash-lite as requested
     const googleModels = ["gemini-2.5-flash-lite", "gemini-2.0-flash-lite-preview-02-05", "gemini-1.5-flash-latest"];
     for (const modelId of googleModels) {
         const result = await askGoogleAI(prompt, modelId);
         if (result.success) return result;
     }
-    return { success: false, message: "عذراً، النماذج المتاحة مشغولة حالياً." };
+    return { success: false, message: "Models are currently busy. Please try again." };
 }
 
 export const safeGenerateContent = async (prompt: string): Promise<any> => {
@@ -53,7 +52,7 @@ export const safeGenerateContent = async (prompt: string): Promise<any> => {
     
     let text = result.answer;
     try {
-        // Advanced JSON extraction to handle any extra text from the model
+        // Robust JSON extraction to handle any extra text or markdown wrappers
         const startBracket = text.indexOf('{');
         const startSquare = text.indexOf('[');
         const startIndex = (startBracket !== -1 && (startSquare === -1 || startBracket < startSquare)) ? startBracket : startSquare;
@@ -62,13 +61,13 @@ export const safeGenerateContent = async (prompt: string): Promise<any> => {
         const endSquare = text.lastIndexOf(']');
         const endIndex = (endBracket !== -1 && (endSquare === -1 || endBracket > endSquare)) ? endBracket : endSquare;
 
-        if (startIndex === -1 || endIndex === -1) throw new Error("No JSON found");
+        if (startIndex === -1 || endIndex === -1) throw new Error("No valid JSON found in AI response");
         
         const cleanedJson = text.substring(startIndex, endIndex + 1);
         return JSON.parse(cleanedJson);
     } catch (error) {
-        console.error("AI JSON Parse Error. Model:", result.model, "Raw text:", text);
-        throw new Error("فشل تحليل استجابة الذكاء الاصطناعي. يرجى المحاولة مرة أخرى.");
+        console.error("AI JSON Parse Error. Model:", result.model, "Raw text sample:", text.substring(0, 100));
+        throw new Error("Failed to parse AI response. Please try again.");
     }
 };
 

src/lib/translations.ts

@@ -34,7 +34,7 @@ export const translations = {
     confirmDelete: 'نعم، احذف حسابي',
     search: 'بحث...',
     generatePosts: 'ولّد منشورات',
-    thinking: 'بماذا تفكر؟',
+    thinking: 'بماذا تفكر يا {name}؟',
     localContext: 'منشورات مخصصة لمنطقتك',
     switchLang: 'English',
     noPosts: 'لا توجد منشورات حالياً.',
@@ -43,6 +43,30 @@ export const translations = {
     comment: 'تعليق',
     share: 'مشاركة',
     writeComment: 'اكتب تعليقاً...',
+    report: 'إبلاغ عن المحتوى',
+    apiConsumption: 'استهلاك الـ API اليومي',
+    used: 'المستخدم',
+    remaining: 'المتبقي',
+    backToChat: 'العودة للدردشة',
+    watchingOnly: 'هذه محادثة مشاهدة فقط. لا يمكنك إرسال رسائل هنا.',
+    chooseCanned: 'اختر محادثة جاهزة...',
+    writeTopic: 'اكتب موضوعاً لتوليده...',
+    generate: 'توليد',
+    randomChat: 'محادثة عشوائية',
+    startGroupChat: 'ابدأ محادثة جماعية',
+    groupChatDesc: 'اختر من المحادثات الجاهزة، أو اكتب موضوعًا، أو اضغط "محادثة عشوائية".',
+    voiceWelcome: 'مرحباً بك في المحادثة الصوتية',
+    voiceDesc: 'اضغط على الميكروفون لبدء التحدث مع بروتو',
+    listening: 'يستمع...',
+    protoThinking: 'بروتو يفكر...',
+    pressToStop: 'اضغط للإيقاف',
+    pressToTalk: 'اضغط للتحدث',
+    successUpdate: 'تم التحديث بنجاح',
+    accountDeleted: 'تم حذف الحساب',
+    completeProfile: 'يرجى إكمال بياناتك للمتابعة',
+    helloUser: 'مرحباً بك {name}',
+    errorAI: 'فشل الحصول على استجابة الذكاء الاصطناعي.',
+    dailyLimitReached: 'تم الوصول للحد اليومي للاستخدام.',
   },
   en: {
     appTitle: 'ProtoChat',
@@ -76,7 +100,7 @@ export const translations = {
     confirmDelete: 'Yes, delete my account',
     search: 'Search...',
     generatePosts: 'Generate Posts',
-    thinking: 'What\'s on your mind?',
+    thinking: 'What\'s on your mind, {name}?',
     localContext: 'Posts customized for your area',
     switchLang: 'العربية',
     noPosts: 'No posts yet.',
@@ -85,5 +109,29 @@ export const translations = {
     comment: 'Comment',
     share: 'Share',
     writeComment: 'Write a comment...',
+    report: 'Report Content',
+    apiConsumption: 'Daily API Consumption',
+    used: 'Used',
+    remaining: 'Remaining',
+    backToChat: 'Back to Chat',
+    watchingOnly: 'This is a view-only chat. You cannot send messages here.',
+    chooseCanned: 'Choose a ready conversation...',
+    writeTopic: 'Write a topic to generate...',
+    generate: 'Generate',
+    randomChat: 'Random Chat',
+    startGroupChat: 'Start a Group Chat',
+    groupChatDesc: 'Choose from ready chats, write a topic, or press "Random Chat".',
+    voiceWelcome: 'Welcome to Voice Chat',
+    voiceDesc: 'Press the microphone to start talking with Proto',
+    listening: 'Listening...',
+    protoThinking: 'Proto is thinking...',
+    pressToStop: 'Press to stop',
+    pressToTalk: 'Press to talk',
+    successUpdate: 'Updated successfully',
+    accountDeleted: 'Account deleted',
+    completeProfile: 'Please complete your data to continue',
+    helloUser: 'Welcome {name}',
+    errorAI: 'Failed to get AI response.',
+    dailyLimitReached: 'Daily usage limit reached.',
   }
 };