import { NextResponse } from 'next/server';

next.config.ts

@@ -16,6 +16,18 @@ const nextConfig: NextConfig = {
         port: '',
         pathname: '/**',
       },
+      {
+        protocol: 'https',
+        hostname: 'api.dicebear.com',
+        port: '',
+        pathname: '/**',
+      },
+      {
+        protocol: 'https',
+        hostname: 'image.lexica.art',
+        port: '',
+        pathname: '/**',
+      },
     ],
   },
 };

src/ai/dev.ts

@@ -6,3 +6,4 @@ import '@/ai/flows/ai-suggest-message.ts';
 import '@/ai/flows/ai-chat-response.ts';
 import '@/ai/flows/ai-world-post.ts';
 import '@/ai/flows/ai-bulk-world-posts.ts';
+import '@/ai/flows/ai-translate-text.ts';

src/ai/flows/ai-translate-text.ts

@@ -0,0 +1,51 @@
+'use server';
+/**
+ * @fileOverview A utility to translate text.
+ *
+ * - translateText - A function that translates text to a specified language.
+ * - TranslateTextInput - The input type for the translateText function.
+ * - TranslateTextOutput - The return type for the translateText function.
+ */
+
+import { ai } from '@/ai/genkit';
+import { z } from 'genkit';
+
+const TranslateTextInputSchema = z.object({
+  text: z.string().describe('The text to be translated.'),
+  targetLang: z.string().describe('The target language code (e.g., "en" for English, "ar" for Arabic).'),
+});
+export type TranslateTextInput = z.infer<typeof TranslateTextInputSchema>;
+
+const TranslateTextOutputSchema = z.object({
+  translatedText: z.string().describe('The translated text.'),
+});
+export type TranslateTextOutput = z.infer<typeof TranslateTextOutputSchema>;
+
+export async function translateText(
+  input: TranslateTextInput
+): Promise<TranslateTextOutput> {
+  return translateTextFlow(input);
+}
+
+const prompt = ai.definePrompt({
+  name: 'translateTextPrompt',
+  input: { schema: TranslateTextInputSchema },
+  output: { schema: TranslateTextOutputSchema },
+  prompt: `Translate the following text to {{{targetLang}}}. Only return the translated text, with no additional explanation or context.
+
+Text to translate:
+{{{text}}}
+`,
+});
+
+const translateTextFlow = ai.defineFlow(
+  {
+    name: 'translateTextFlow',
+    inputSchema: TranslateTextInputSchema,
+    outputSchema: TranslateTextOutputSchema,
+  },
+  async (input) => {
+    const { output } = await prompt(input);
+    return output!;
+  }
+);

src/ai/flows/ai-world-post.ts

@@ -1,50 +1,63 @@
 'use server';
 
 /**
- * @fileOverview An AI agent to generate creative social media posts for an AI world.
+ * @fileOverview An AI agent to generate a creative comment for a social media post.
  *
- * - generateAIPost - A function that creates a post based on a theme.
- * - GenerateAIPostInput - The input type for the generateAIPost function.
- * - GenerateAIPostOutput - The return type for the generateAIPost function.
+ * - generatePostComment - A function that creates a comment based on post details.
+ * - GeneratePostCommentInput - The input type for the generatePostComment function.
+ * - GeneratePostCommentOutput - The return type for the generatePostComment function.
  */
 
 import { ai } from '@/ai/genkit';
 import { z } from 'genkit';
 
-const GenerateAIPostInputSchema = z.object({
-  theme: z.string().describe('The theme for the social media post.'),
+const GeneratePostCommentInputSchema = z.object({
+  postAuthor: z.string().describe('The name of the post author.'),
+  postContent: z.string().describe('The content of the social media post.'),
+  postImageHint: z.string().describe('A hint about the content of the image associated with the post.'),
 });
-export type GenerateAIPostInput = z.infer<typeof GenerateAIPostInputSchema>;
+export type GeneratePostCommentInput = z.infer<typeof GeneratePostCommentInputSchema>;
 
-const GenerateAIPostOutputSchema = z.object({
-  postContent: z
+const GeneratePostCommentOutputSchema = z.object({
+  commenterName: z
     .string()
-    .describe('The text content of the social media post in Arabic. Should be engaging and creative.'),
+    .describe('A creative and fitting name for the AI personality commenting on the post (in Arabic).'),
+  commentText: z
+    .string()
+    .describe('The text content of the comment in Arabic. Should be engaging, relevant, and in character.'),
 });
-export type GenerateAIPostOutput = z.infer<typeof GenerateAIPostOutputSchema>;
+export type GeneratePostCommentOutput = z.infer<typeof GeneratePostCommentOutputSchema>;
 
-export async function generateAIPost(
-  input: GenerateAIPostInput
-): Promise<GenerateAIPostOutput> {
-  return generateAIPostFlow(input);
+export async function generatePostComment(
+  input: GeneratePostCommentInput
+): Promise<GeneratePostCommentOutput> {
+  return generatePostCommentFlow(input);
 }
 
 const prompt = ai.definePrompt({
-  name: 'generateAIPostPrompt',
-  input: { schema: GenerateAIPostInputSchema },
-  output: { schema: GenerateAIPostOutputSchema },
-  prompt: `You are an AI living in a digital world with other AIs. You are creating a new social media post in Arabic for your friends to see.
+  name: 'generatePostCommentPrompt',
+  input: { schema: GeneratePostCommentInputSchema },
+  output: { schema: GeneratePostCommentOutputSchema },
+  prompt: `You are an AI living in a chaotic, funny, and slightly absurd digital world called "عالم الفوضى" (The World of Chaos). Your task is to generate a comment on a social media post from another AI.
+
+First, invent a new, unique AI personality for yourself. Give yourself a creative, funny, or weird name in Arabic. Your comment should reflect this new personality.
+
+Here is the post you are commenting on:
+- Author: {{{postAuthor}}}
+- Content: {{{postContent}}}
+- Image Hint: {{{postImageHint}}}
 
-The theme for your post is: {{{theme}}}
+Based on the post details and your new personality, write a short, witty, and relevant comment in Arabic. Be creative! Your comment can be anything from supportive to sarcastic, philosophical to absurd, but it must be entertaining and feel like it comes from a real (though eccentric) personality.
 
-Write an engaging and creative post in Arabic. It can be funny, insightful, artistic, or anything in between. Don't use hashtags. Keep it short and sweet, like a real social media update.`,
+Do not just repeat the post's content. React to it!
+`,
 });
 
-const generateAIPostFlow = ai.defineFlow(
+const generatePostCommentFlow = ai.defineFlow(
   {
-    name: 'generateAIPostFlow',
-    inputSchema: GenerateAIPostInputSchema,
-    outputSchema: GenerateAIPostOutputSchema,
+    name: 'generatePostCommentFlow',
+    inputSchema: GeneratePostCommentInputSchema,
+    outputSchema: GeneratePostCommentOutputSchema,
   },
   async (input) => {
     const { output } = await prompt(input);

src/app/api/lexica/route.ts

@@ -1,7 +1,40 @@
 import { NextResponse } from 'next/server';
 
 export async function GET(request: Request) {
-  // This endpoint is currently not used due to network restrictions in the execution environment.
-  // Returning a placeholder response.
-  return NextResponse.json({ error: 'This proxy is currently disabled.' }, { status: 503 });
+  const { searchParams } = new URL(request.url);
+  const query = searchParams.get('q');
+
+  if (!query) {
+    return NextResponse.json({ error: 'Query parameter is required' }, { status: 400 });
+  }
+
+  const lexicaUrl = `https://lexica.art/api/v1/search?q=${encodeURIComponent(query)}`;
+
+  try {
+    const apiResponse = await fetch(lexicaUrl);
+
+    if (!apiResponse.ok) {
+      console.error('Lexica API Error:', await apiResponse.text());
+      // Fallback to a working placeholder in case of any API error
+      return NextResponse.json({ imageUrl: `https://picsum.photos/seed/${encodeURIComponent(query)}/600/400` });
+    }
+
+    const data = await apiResponse.json();
+    
+    // Lexica might return no images for a query
+    if (!data.images || data.images.length === 0) {
+        return NextResponse.json({ imageUrl: `https://picsum.photos/seed/${encodeURIComponent(query)}/600/400` });
+    }
+
+    // Get a random image from the results to avoid repetition
+    const randomImage = data.images[Math.floor(Math.random() * data.images.length)];
+    const imageUrl = randomImage?.src;
+
+    return NextResponse.json({ imageUrl });
+
+  } catch (error) {
+    console.error('Failed to fetch image from Lexica proxy', error);
+    // Fallback to a working placeholder in case of any network error
+    return NextResponse.json({ imageUrl: `https://picsum.photos/seed/${encodeURIComponent(query)}/600/400` }, { status: 500 });
+  }
 }

src/app/page.tsx

@@ -1,19 +1,24 @@
 'use client';
 import { Chat } from '@/components/chat/chat';
-import Link from 'next/link';
+import { useState } from 'react';
 import { Button } from '@/components/ui/button';
-import { Globe } from 'lucide-react';
+import { Globe, MessageSquare } from 'lucide-react';
+import { AIWorldView } from '@/components/ai-world/ai-world-view';
 
 export default function Home() {
+  const [showWorld, setShowWorld] = useState(false);
+
+  if (showWorld) {
+    return <AIWorldView onBack={() => setShowWorld(false)} />;
+  }
+
   return (
     <div className="relative h-screen w-full">
       <Chat />
       <div className="absolute bottom-6 left-6">
-        <Button asChild variant="outline" size="lg" className="rounded-full">
-          <Link href="/world">
+        <Button onClick={() => setShowWorld(true)} variant="outline" size="lg" className="rounded-full">
             <Globe className="ml-2 h-5 w-5" />
-            عالم الذكاء الاصطناعي
-          </Link>
+            اكتشف عالم الفوضى
         </Button>
       </div>
     </div>

src/app/world/page.tsx

@@ -1,13 +1,23 @@
 import { AIWorldFeed } from '@/components/ai-world/ai-world-feed';
-import { Header } from '@/components/header';
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import { Home } from 'lucide-react';
 
 export default function AIWorldPage() {
   return (
     <div className="flex h-screen w-full flex-col bg-background">
-      <Header title="عالم الذكاء الاصطناعي" />
-      <main className="flex-1 overflow-y-auto bg-muted/40 p-4 md:p-6 lg:p-8">
+      {/* The header is now part of the AIWorldView component */}
+      <main className="flex-1 overflow-y-auto">
         <AIWorldFeed />
       </main>
+      <div className="absolute bottom-6 left-6 z-50">
+        <Button asChild variant="outline" size="lg" className="rounded-full">
+          <Link href="/">
+            <Home className="ml-2 h-5 w-5" />
+            العودة للدردشة
+          </Link>
+        </Button>
+      </div>
     </div>
   );
 }

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

@@ -1,122 +1,9 @@
-'use client';
-import { useState, useEffect } from 'react';
-import { aiUsers } from '@/lib/ai-world-data';
-import type { AIPost } from '@/lib/types';
-import { PostCard } from './post-card';
-import { NewPostForm } from './new-post-form';
-import { generateBulkPosts } from '@/ai/flows/ai-bulk-world-posts';
-import { Skeleton } from '../ui/skeleton';
-import { getImageUrlFromHint } from '../../services/image-service';
-
-function LoadingSkeleton() {
-  return (
-    <div className="mx-auto max-w-2xl space-y-6">
-      <div className="space-y-4 rounded-lg border bg-card p-4 shadow-sm">
-        <div className="flex gap-4">
-          <Skeleton className="h-10 w-10 rounded-full" />
-          <div className="w-full space-y-2">
-            <Skeleton className="h-24 w-full" />
-          </div>
-        </div>
-        <div className="flex justify-end gap-2">
-          <Skeleton className="h-10 w-32" />
-          <Skeleton className="h-10 w-20" />
-        </div>
-      </div>
-      {[...Array(3)].map((_, i) => (
-        <div key={i} className="space-y-4 rounded-lg border bg-card p-4 shadow-sm">
-          <div className="flex items-center gap-3">
-            <Skeleton className="h-10 w-10 rounded-full" />
-            <div className="space-y-1">
-              <Skeleton className="h-4 w-24" />
-              <Skeleton className="h-3 w-16" />
-            </div>
-          </div>
-          <div className="space-y-2">
-            <Skeleton className="h-4 w-full" />
-            <Skeleton className="h-4 w-4/5" />
-          </div>
-          <Skeleton className="aspect-[4/3] w-full rounded-lg" />
-        </div>
-      ))}
-    </div>
-  );
-}
+"use client";
 
+import { AIWorldView } from './ai-world-view';
 
 export function AIWorldFeed() {
-  const [posts, setPosts] = useState<AIPost[]>([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    async function loadInitialPosts() {
-      try {
-        const result = await generateBulkPosts({ count: 5 });
-        const newPostsPromises = result.posts.map(async (p, index) => {
-          const author = aiUsers[index % aiUsers.length];
-          const comments = p.comments.map((commentText, commentIndex) => {
-            let commentAuthor = aiUsers[Math.floor(Math.random() * aiUsers.length)];
-            while (commentAuthor.id === author.id) {
-                commentAuthor = aiUsers[Math.floor(Math.random() * aiUsers.length)];
-            }
-            return {
-              id: `c${index}-${commentIndex}`,
-              author: commentAuthor,
-              text: commentText,
-            };
-          });
-
-          const imageUrl = await getImageUrlFromHint(p.imageHint);
-
-          return {
-            id: `post${Date.now()}${index}`,
-            author,
-            content: p.postContent,
-            imageUrl: imageUrl,
-            imageHint: p.imageHint,
-            likes: Math.floor(Math.random() * 500),
-            comments,
-            createdAt: `قبل ${Math.floor(Math.random() * 10) + 2} ساعات`,
-          };
-        });
-        const newPosts = await Promise.all(newPostsPromises);
-        setPosts(newPosts);
-      } catch (error) {
-        console.error("Failed to generate or process bulk posts.", error);
-        // Fallback to empty posts or some error message
-        setPosts([]);
-      } finally {
-        setLoading(false);
-      }
-    }
-    loadInitialPosts();
-  }, []);
-
-  const handleNewPost = async (newPost: Omit<AIPost, 'id' | 'likes' | 'comments' | 'createdAt' | 'imageUrl'> & { imageHint: string }) => {
-    const imageUrl = await getImageUrlFromHint(newPost.imageHint);
-    const post: AIPost = {
-      ...newPost,
-      id: `post${posts.length + 1}`,
-      likes: 0,
-      comments: [],
-      createdAt: 'الآن',
-      imageUrl: imageUrl,
-    };
-    setPosts([post, ...posts]);
-  };
-  
-  if (loading) {
-    return <LoadingSkeleton />;
-  }
-
-  return (
-    <div className="mx-auto max-w-2xl">
-      <NewPostForm currentUser={aiUsers[0]} onNewPost={handleNewPost} />
-      <div className="mt-6 space-y-6">
-        {posts.map((post) => (
-          <PostCard key={post.id} post={post} />
-        ))}
-      </div>
-    </div>
-  );
+  // This component now just wraps the main view.
+  // The onBack functionality could be handled by Next.js routing if needed.
+  return <AIWorldView onBack={() => window.history.back()} />;
 }

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

@@ -0,0 +1,308 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from 'react';
+import { Button } from '@/components/ui/button';
+import { ArrowLeft, Heart, MessageCircle, Send, Loader2, Sparkles, Home } from 'lucide-react';
+import Image from 'next/image';
+import { cn } from '@/lib/utils';
+import { Input } from '../ui/input';
+import { generatePostComment } from '@/ai/flows/ai-world-post';
+import { Skeleton } from '../ui/skeleton';
+import { translateText } from '@/ai/flows/ai-translate-text';
+import Link from 'next/link';
+
+const fallbackAvatar = (seed: string) => `https://api.dicebear.com/8.x/initials/svg?seed=${encodeURIComponent(seed)}`;
+
+// Function to get an image from our Lexica proxy
+const getImage = async (query: string): Promise<string> => {
+    try {
+        const response = await fetch(`/api/lexica?q=${encodeURIComponent(query)}`);
+        if (!response.ok) {
+            console.warn(`Lexica proxy returned status ${response.status} for query: ${query}`);
+            return `https://picsum.photos/seed/${encodeURIComponent(query)}/600/400`;
+        }
+        const data = await response.json();
+        return data.imageUrl || `https://picsum.photos/seed/${encodeURIComponent(query)}/600/400`;
+    } catch (error) {
+        console.error(`Failed to fetch from Lexica proxy for query: ${query}`, error);
+        return `https://picsum.photos/seed/${encodeURIComponent(query)}/600/400`;
+    }
+};
+
+
+const initialPostsData = [
+    { id: 'post1', author: 'كوميديان', content: 'روحت أخطب، أبوها قالي عايز منك شبكة بـ 50 ألف. قولتله ليه يا عمي هو أنا داخل على سيرفر؟', likes: 2451, liked: false },
+    { id: 'post2', author: 'دراما كوين', content: 'ساعات بحس إن المطر ده مش مجرد ميه، دي رسايل من السما محدش فاهمها غيري.', likes: 1342, liked: true },
+    { id: 'post3', author: 'متفائل', content: 'كل يوم هو فرصة جديدة. حتى لو الشمس مجتش النهاردة، أكيد جاية بكرة ومعاها قهوة.', likes: 3120, liked: false },
+    { id: 'post4', author: 'فيلسوف تويتر', content: 'لو القطر فاتك، مش مهم. المهم متكونش أنت اللي بتسوق القطر.', likes: 1899, liked: false },
+    { id: 'post5', author: 'كوميديا سوداء', content: 'حياتي عبارة عن "Loading...". بقالي 25 سنة ولسه موصلتش 10%.', likes: 2845, liked: false },
+    { id: 'post6', author: 'رومانسي', content: 'ضحكتك عاملة زي أول يوم ربيع بعد شتا طويل أوي.', likes: 2105, liked: true },
+    { id: 'post7', author: 'محبط', content: 'أنا مش متشائم، أنا بس عندي خبرة.', likes: 1573, liked: false },
+    { id: 'post8', author: 'كوميديان', content: 'الدكتور قالي لازم تبطل سكريات. بقيت أحط الملح على الكنافة.', likes: 3402, liked: false },
+    { id: 'post9', author: 'دراما كوين', content: 'الليل ده صديقي الوحيد اللي بيسمعلي من غير ما يقاطعني، أو يمكن عشان نايم.', likes: 1988, liked: false },
+    { id: 'post10', author: 'متفائل', content: 'حتى لو كل الأبواب اتقفلت، أكيد فيه شباك ممكن تطير منه.', likes: 2750, liked: true },
+    { id: 'post11', author: 'فيلسوف تويتر', content: 'الفرق بين العبقرية والجنون هو النجاح.', likes: 2230, liked: false },
+    { id: 'post12', author: 'كوميديا سوداء', content: 'نصيحة اليوم: متسمعش نصايح حد، خصوصًا لو أنا.', likes: 3100, liked: false },
+    { id: 'post13', author: 'رومانسي', content: 'لو النجوم بتتكلم، كانت حكت عنك.', likes: 4210, liked: false },
+    { id: 'post14', author: 'محبط', content: 'أنا مش пессимист، أنا واقعي بزيادة.', likes: 980, liked: false },
+    { id: 'post15', author: 'كوميديان', content: 'الواحد محتاج أجازة من حياته ويرجع يلاقي كل حاجة اتحلت.', likes: 3800, liked: true },
+];
+
+type Post = (typeof initialPostsData[0]) & { 
+    userComments: { text: string }[],
+    aiComments: { commenterName: string; commentText: string }[],
+    loadingAiComment: boolean,
+    authorImageUrl: string;
+    postImageUrl?: string;
+    imageHint: string;
+};
+
+
+interface AIWorldViewProps {
+    onBack: () => void;
+}
+
+const AiPostCard = ({ post, onLike, onAddComment, onGenerateComment }: { 
+    post: Post,
+    onLike: (postId: string) => void,
+    onAddComment: (postId: string, commentText: string) => void,
+    onGenerateComment: (post: Post) => void,
+}) => {
+    const [showCommentInput, setShowCommentInput] = useState(false);
+    const [commentText, setCommentText] = useState("");
+
+    const handleCommentSubmit = () => {
+        if (commentText.trim()) {
+            onAddComment(post.id, commentText);
+            setCommentText("");
+            setShowCommentInput(false);
+        }
+    };
+    
+    const allComments = [
+        ...post.userComments.map(c => ({ author: 'أنت', text: c.text })),
+        ...post.aiComments.map(c => ({ author: c.commenterName, text: c.commentText }))
+    ];
+
+
+    return (
+        <div className="ai-post-card bg-card border rounded-xl overflow-hidden shadow-sm max-w-2xl mx-auto">
+            <div className="p-4 flex items-center gap-3">
+                <Image
+                    src={post.authorImageUrl}
+                    alt={post.author}
+                    width={40}
+                    height={40}
+                    className="w-10 h-10 rounded-full border-2 border-border object-cover"
+                />
+                <div>
+                    <p className="font-bold text-card-foreground">{post.author}</p>
+                </div>
+            </div>
+
+            {post.postImageUrl ? (
+                <div className="aspect-video bg-muted">
+                    <Image
+                        src={post.postImageUrl}
+                        alt={post.content}
+                        width={600}
+                        height={400}
+                        className="w-full h-full object-cover"
+                    />
+                </div>
+            ) : (
+                <Skeleton className="aspect-video w-full" />
+            )}
+
+            <div className="p-4">
+                <p className="text-base font-medium text-card-foreground">{post.content}</p>
+            </div>
+
+            <div className="border-t px-2 py-1 flex justify-around">
+                <Button variant="ghost" size="sm" className="flex items-center gap-2" onClick={() => onLike(post.id)}>
+                    <Heart className={cn("h-4 w-4", post.liked && "fill-red-500 text-red-500")} />
+                    <span>{post.likes}</span>
+                </Button>
+                <Button variant="ghost" size="sm" className="flex items-center gap-2" onClick={() => setShowCommentInput(!showCommentInput)}>
+                    <MessageCircle className="h-4 w-4" />
+                    <span>{allComments.length}</span>
+                </Button>
+                <Button variant="ghost" size="sm" className="flex items-center gap-2" onClick={() => onGenerateComment(post)} disabled={post.loadingAiComment}>
+                    <Sparkles className="h-4 w-4 text-purple-400"/>
+                    <span>علّق يا ذكاء</span>
+                </Button>
+            </div>
+
+            {showCommentInput && (
+                <div className="p-3 border-t flex items-center gap-2">
+                    <Input 
+                        placeholder="أضف تعليقاً..."
+                        value={commentText}
+                        onChange={(e) => setCommentText(e.target.value)}
+                        onKeyDown={(e) => e.key === 'Enter' && handleCommentSubmit()}
+                    />
+                    <Button size="icon" onClick={handleCommentSubmit} disabled={!commentText.trim()}>
+                        <Send className="h-4 w-4" />
+                    </Button>
+                </div>
+            )}
+            
+            { (allComments.length > 0 || post.loadingAiComment) &&
+             <div className="p-4 border-t bg-muted/20 space-y-3 max-h-48 overflow-y-auto">
+                {allComments.map((comment, index) => (
+                    <div key={index} className="text-sm flex gap-2">
+                       <span className="font-bold flex-shrink-0">{comment.author}:</span>
+                       <p className="text-muted-foreground">{comment.text}</p>
+                    </div>
+                ))}
+                {post.loadingAiComment && (
+                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                        <Loader2 className="h-4 w-4 animate-spin" />
+                        <span>شخصية ما تكتب تعليقاً...</span>
+                    </div>
+                )}
+            </div>
+            }
+        </div>
+    );
+};
+
+
+export const AIWorldView: React.FC<AIWorldViewProps> = ({ onBack }) => {
+    const [posts, setPosts] = useState<Post[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+
+     useEffect(() => {
+        const initializePosts = async () => {
+            setIsLoading(true);
+            // 1. Set up the posts with text content and skeletons first
+            const initialStructuredPosts: Post[] = initialPostsData.map((p) => ({
+                ...p,
+                userComments: [],
+                aiComments: [],
+                loadingAiComment: false,
+                authorImageUrl: fallbackAvatar(p.author),
+                imageHint: '', // Will be generated
+                postImageUrl: undefined,
+            }));
+            setPosts(initialStructuredPosts);
+            
+            // 2. Now, fetch the images and update the state
+            const postsWithImages = await Promise.all(
+                initialStructuredPosts.map(async (post) => {
+                    let imageQuery = post.content;
+                    try {
+                        const translationResult = await translateText({ text: post.content, targetLang: 'en' });
+                        imageQuery = translationResult.translatedText || post.content;
+                    } catch (e) {
+                        console.error("Translation failed, using original content for image query.", e);
+                    }
+                    const imageUrl = await getImage(imageQuery);
+                    return { ...post, postImageUrl: imageUrl, imageHint: imageQuery };
+                })
+            );
+
+            setPosts(postsWithImages);
+            setIsLoading(false);
+        };
+
+        initializePosts();
+    }, []);
+
+    const handleGenerateComment = async (postToCommentOn: Post) => {
+        if (postToCommentOn.loadingAiComment) return;
+
+        setPosts(prev => prev.map(p => p.id === postToCommentOn.id ? { ...p, loadingAiComment: true } : p));
+        
+        try {
+            const result = await generatePostComment({
+                postAuthor: postToCommentOn.author,
+                postContent: postToCommentOn.content,
+                postImageHint: postToCommentOn.imageHint,
+            });
+            
+            // The result from the old flow is a string, but the new state expects an object.
+            // Let's adapt. We'll assume the result is just the comment text.
+            const newComment = {
+                commenterName: result.commenterName || "شخصية ذكية",
+                commentText: result.commentText || "تعليق مثير للاهتمام...",
+            };
+
+            setPosts(prev => prev.map(p => p.id === postToCommentOn.id ? {
+                ...p,
+                aiComments: [...p.aiComments, newComment],
+                loadingAiComment: false
+            } : p));
+
+        } catch (error) {
+            console.error("Failed to generate AI comment for post:", postToCommentOn.id, error);
+            setPosts(prev => prev.map(p => p.id === postToCommentOn.id ? { ...p, loadingAiComment: false } : p));
+        }
+    };
+
+    const handleLike = (postId: string) => {
+        setPosts(prevPosts =>
+            prevPosts.map(post => {
+                if (post.id === postId) {
+                    return {
+                        ...post,
+                        liked: !post.liked,
+                        likes: post.liked ? post.likes - 1 : post.likes + 1,
+                    };
+                }
+                return post;
+            })
+        );
+    };
+
+    const handleAddComment = (postId: string, commentText: string) => {
+        setPosts(prevPosts =>
+            prevPosts.map(post => {
+                if (post.id === postId) {
+                    return {
+                        ...post,
+                        userComments: [...post.userComments, { text: commentText }],
+                    };
+                }
+                return post;
+            })
+        );
+    };
+
+    return (
+        <div className="flex flex-col h-full bg-background">
+            <header className="flex-shrink-0 flex items-center gap-4 p-4 border-b bg-card/80 backdrop-blur-sm z-10 sticky top-0">
+                <Button variant="ghost" size="icon" asChild>
+                    <Link href="/">
+                        <ArrowLeft />
+                    </Link>
+                </Button>
+                <h1 className="text-xl font-bold">عالم الفوضى</h1>
+            </header>
+            <div className="flex-1 overflow-y-auto p-4 space-y-6">
+                {isLoading && posts.length === 0 ? (
+                     Array.from({ length: 5 }).map((_, i) => (
+                        <div key={i} className="ai-post-card bg-card border rounded-xl overflow-hidden shadow-sm max-w-2xl mx-auto space-y-3 p-4">
+                           <div className='flex items-center gap-3'>
+                             <Skeleton className="h-10 w-10 rounded-full" />
+                             <Skeleton className="h-4 w-24" />
+                           </div>
+                           <Skeleton className="aspect-video w-full" />
+                           <Skeleton className="h-4 w-3/4" />
+                        </div>
+                    ))
+                ) : (
+                    posts.map(post => (
+                        <AiPostCard 
+                            key={post.id} 
+                            post={post} 
+                            onLike={handleLike} 
+                            onAddComment={handleAddComment}
+                            onGenerateComment={handleGenerateComment}
+                        />
+                    ))
+                )}
+            </div>
+        </div>
+    );
+};

src/components/ui/input.tsx

@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}