بالنسبه الدردشه يمكنك ازاله قسم الدردشه العاديه والدردشه الجماعيه واضافه

src/app/page.tsx

@@ -1,11 +1,12 @@
 
 'use client';
-import { Chat } from '@/components/chat/chat';
+import { CommunityHub } from '@/components/community/community-hub';
 import { useEffect } from 'react';
 import { Loader2 } from 'lucide-react';
 import { useAuth } from '@/contexts/auth-context';
 import { useRouter } from 'next/navigation';
 import { useLanguage } from '@/contexts/language-context';
+import { Header } from '@/components/header';
 
 export default function Home() {
   const { user, loading: authLoading } = useAuth();
@@ -29,8 +30,9 @@ export default function Home() {
 
   return (
     <div className="relative h-screen w-full flex flex-col pt-16">
+      <Header title={t.communityTitle} />
       <main className="flex-1 overflow-hidden">
-        <Chat />
+        <CommunityHub />
       </main>
     </div>
   );

src/components/community/community-hub.tsx

@@ -0,0 +1,315 @@
+
+'use client';
+
+import React, { useState, useEffect, useRef } from 'react';
+import { useAuth } from '@/contexts/auth-context';
+import { useLanguage } from '@/contexts/language-context';
+import { database } from '@/firebase/client';
+import { ref, onValue, push, serverTimestamp, set, query, orderByChild } from 'firebase/database';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Search, Send, Bot, User as UserIcon, Loader2, Sparkles, ArrowLeft } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { getChatResponse } from '@/ai/flows/ai-chat-response';
+import { checkConsumption, recordConsumption } from '@/lib/consumption';
+import { useToast } from '@/hooks/use-toast';
+import { maleNames, femaleNames } from '@/lib/ai-world-names';
+
+interface CommunityUser {
+  id: string;
+  name: string;
+  avatarUrl: string;
+  isAi: boolean;
+  lastMessage?: string;
+  lastMessageTime?: number;
+}
+
+interface Message {
+  id: string;
+  senderId: string;
+  text: string;
+  timestamp: number;
+}
+
+export const CommunityHub = () => {
+  const { user, userData } = useAuth();
+  const { t, lang, aiEngine } = useLanguage();
+  const { toast } = useToast();
+  const [activeChat, setActiveChat] = useState<CommunityUser | null>(null);
+  const [users, setUsers] = useState<CommunityUser[]>([]);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [inputText, setInputText] = useState('');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  // توليد قائمة مستخدمي AI ثابتة لهذا المستخدم
+  const aiPersonas: CommunityUser[] = [
+    { id: 'ai-zeina', name: lang === 'ar' ? 'زينة' : 'Zeina', avatarUrl: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Zeina', isAi: true },
+    { id: 'ai-omar', name: maleNames[0], avatarUrl: `https://api.dicebear.com/7.x/avataaars/svg?seed=${maleNames[0]}`, isAi: true },
+    { id: 'ai-sara', name: femaleNames[0], avatarUrl: `https://api.dicebear.com/7.x/avataaars/svg?seed=${femaleNames[0]}`, isAi: true },
+  ];
+
+  useEffect(() => {
+    // جلب المستخدمين الحقيقيين من RTDB
+    const usersRef = ref(database, 'users');
+    const unsubscribe = onValue(usersRef, (snapshot) => {
+      const data = snapshot.val();
+      if (data) {
+        const realUsers = Object.entries(data)
+          .filter(([uid]) => uid !== user?.uid)
+          .map(([uid, val]: [string, any]) => ({
+            id: uid,
+            name: val.displayName || 'Anonymous',
+            avatarUrl: val.photoURL || `https://api.dicebear.com/7.x/avataaars/svg?seed=${uid}`,
+            isAi: false
+          }));
+        setUsers([...aiPersonas, ...realUsers]);
+      } else {
+        setUsers(aiPersonas);
+      }
+    });
+
+    return () => unsubscribe();
+  }, [user, lang]);
+
+  useEffect(() => {
+    if (!activeChat || !user) return;
+
+    // جلب الرسائل للمحادثة النشطة
+    const chatId = [user.uid, activeChat.id].sort().join('_');
+    const messagesRef = ref(database, `chats/${chatId}/messages`);
+    const q = query(messagesRef);
+
+    const unsubscribe = onValue(q, (snapshot) => {
+      const data = snapshot.val();
+      if (data) {
+        const msgs = Object.entries(data).map(([id, val]: [string, any]) => ({
+          id,
+          ...val
+        }));
+        setMessages(msgs.sort((a, b) => a.timestamp - b.timestamp));
+      } else {
+        setMessages([]);
+      }
+    });
+
+    return () => unsubscribe();
+  }, [activeChat, user]);
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [messages]);
+
+  const handleSendMessage = async () => {
+    if (!inputText.trim() || !activeChat || !user) return;
+
+    const messageText = inputText.trim();
+    setInputText('');
+
+    const chatId = [user.uid, activeChat.id].sort().join('_');
+    const messagesRef = ref(database, `chats/${chatId}/messages`);
+    const newMessageRef = push(messagesRef);
+
+    const msgData = {
+      senderId: user.uid,
+      text: messageText,
+      timestamp: Date.now()
+    };
+
+    set(newMessageRef, msgData);
+
+    // إذا كان الطرف الآخر AI، قم بتوليد رد
+    if (activeChat.isAi) {
+      setIsLoading(true);
+      const consumption = checkConsumption();
+      if (!consumption.allowed) {
+        toast({ title: t.dailyLimitReached, variant: "destructive" });
+        setIsLoading(false);
+        return;
+      }
+
+      try {
+        const chatHistory = messages.slice(-5).map(m => `${m.senderId === user.uid ? 'User' : 'Assistant'}: ${m.text}`);
+        chatHistory.push(`User: ${messageText}`);
+
+        const aiResponse = await getChatResponse({ chatHistory, aiEngine });
+        recordConsumption();
+
+        const aiMsgRef = push(messagesRef);
+        set(aiMsgRef, {
+          senderId: activeChat.id,
+          text: aiResponse.response,
+          timestamp: Date.now()
+        });
+      } catch (error) {
+        console.error("AI Error:", error);
+        toast({ title: t.errorAI, variant: "destructive" });
+      } finally {
+        setIsLoading(false);
+      }
+    }
+  };
+
+  const filteredUsers = users.filter(u => 
+    u.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  return (
+    <div className="flex h-full w-full bg-background overflow-hidden">
+      {/* Sidebar - User List */}
+      <div className={cn(
+        "w-full md:w-80 border-l bg-muted/10 flex flex-col shrink-0",
+        activeChat && "hidden md:flex"
+      )}>
+        <div className="p-4 border-b">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input 
+              placeholder={t.search} 
+              className="pl-10 rounded-xl bg-muted/50 border-none"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+          </div>
+        </div>
+        <div className="flex-1 overflow-y-auto p-2 space-y-1 scrollbar-hide">
+          {filteredUsers.length > 0 ? filteredUsers.map((u) => (
+            <button
+              key={u.id}
+              onClick={() => setActiveChat(u)}
+              className={cn(
+                "w-full p-3 rounded-2xl flex items-center gap-3 transition-all hover:bg-primary/5 group",
+                activeChat?.id === u.id && "bg-primary/10"
+              )}
+            >
+              <div className="relative">
+                <Avatar className="h-12 w-12 border-2 border-primary/10">
+                  <AvatarImage src={u.avatarUrl} />
+                  <AvatarFallback>{u.name.charAt(0)}</AvatarFallback>
+                </Avatar>
+                {u.isAi && <div className="absolute -bottom-1 -right-1 bg-purple-500 rounded-full p-0.5 border-2 border-background"><Bot className="h-3 w-3 text-white" /></div>}
+              </div>
+              <div className="flex-1 text-right">
+                <div className="flex justify-between items-center">
+                  <p className="font-bold text-sm">{u.name}</p>
+                  <span className="text-[10px] text-muted-foreground">{u.isAi ? t.aiLabel : t.humanLabel}</span>
+                </div>
+                <p className="text-xs text-muted-foreground truncate max-w-[140px] mt-0.5">
+                  {u.isAi ? t.online : t.startChat}
+                </p>
+              </div>
+            </button>
+          )) : (
+            <div className="text-center py-10">
+              <p className="text-sm text-muted-foreground font-bold">{t.noUsers}</p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Main Chat Area */}
+      <div className={cn(
+        "flex-1 flex flex-col min-w-0 bg-background/50",
+        !activeChat && "hidden md:flex"
+      )}>
+        {activeChat ? (
+          <>
+            <div className="p-4 border-b flex items-center justify-between radiant-glass">
+              <div className="flex items-center gap-3">
+                <Button variant="ghost" size="icon" className="md:hidden rounded-full" onClick={() => setActiveChat(null)}>
+                  <ArrowLeft className="h-5 w-5" />
+                </Button>
+                <Avatar className="h-10 w-10">
+                  <AvatarImage src={activeChat.avatarUrl} />
+                  <AvatarFallback>{activeChat.name.charAt(0)}</AvatarFallback>
+                </Avatar>
+                <div>
+                  <h2 className="font-bold text-base leading-tight">{activeChat.name}</h2>
+                  <p className="text-[10px] text-primary font-black uppercase tracking-widest">{activeChat.isAi ? t.aiLabel : t.online}</p>
+                </div>
+              </div>
+            </div>
+
+            <div ref={scrollRef} className="flex-1 overflow-y-auto p-4 md:p-8 space-y-6 scrollbar-hide">
+              {messages.map((m) => (
+                <div key={m.id} className={cn(
+                  "flex items-start gap-3 animate-fade-in-slide-up",
+                  m.senderId === user?.uid ? "flex-row-reverse" : "flex-row"
+                )}>
+                  <Avatar className="h-8 w-8 shrink-0">
+                    <AvatarImage src={m.senderId === user?.uid ? user?.photoURL! : activeChat.avatarUrl} />
+                    <AvatarFallback>{m.senderId === user?.uid ? 'U' : 'A'}</AvatarFallback>
+                  </Avatar>
+                  <div className={cn(
+                    "max-w-[75%] px-4 py-3 rounded-[2rem]",
+                    m.senderId === user?.uid 
+                      ? "bg-primary text-primary-foreground rounded-tr-none" 
+                      : "bg-muted rounded-tl-none"
+                  )}>
+                    <p className="text-sm font-medium leading-relaxed">{m.text}</p>
+                  </div>
+                </div>
+              ))}
+              {isLoading && (
+                <div className="flex items-start gap-3 animate-pulse">
+                  <Avatar className="h-8 w-8"><AvatarFallback><Loader2 className="animate-spin h-4 w-4" /></AvatarFallback></Avatar>
+                  <div className="bg-muted px-4 py-2 rounded-2xl rounded-tl-none">
+                    <p className="text-xs font-bold text-muted-foreground">{t.protoThinking}</p>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            <div className="p-4 md:p-8 bg-gradient-to-t from-background via-background/80 to-transparent">
+              <div className="max-w-4xl mx-auto relative group">
+                <div className="absolute -inset-1 bg-primary/20 rounded-[2.5rem] blur opacity-0 group-focus-within:opacity-100 transition duration-500"></div>
+                <div className="relative flex items-center gap-2 bg-card border-2 border-border/50 rounded-[2.5rem] p-2 pr-4 shadow-xl focus-within:border-primary/50 transition-all">
+                  <Input 
+                    value={inputText}
+                    onChange={(e) => setInputText(e.target.value)}
+                    placeholder={t.typeMessage}
+                    onKeyDown={(e) => e.key === 'Enter' && handleSendMessage()}
+                    className="flex-1 h-12 border-none bg-transparent focus-visible:ring-0 text-base font-medium"
+                    disabled={isLoading}
+                  />
+                  <Button 
+                    onClick={handleSendMessage}
+                    disabled={!inputText.trim() || isLoading}
+                    size="icon"
+                    className="h-10 w-10 rounded-full shrink-0"
+                  >
+                    <Send className="h-5 w-5" />
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </>
+        ) : (
+          <div className="flex-1 flex flex-col items-center justify-center text-center p-8 space-y-6">
+            <div className="w-24 h-24 bg-primary/10 rounded-[2.5rem] flex items-center justify-center animate-float">
+              <Sparkles className="h-12 w-12 text-primary" />
+            </div>
+            <div className="space-y-2">
+              <h2 className="text-2xl font-black tracking-tight">{t.communityTitle}</h2>
+              <p className="text-muted-foreground max-w-sm font-medium">{t.groupChatDesc}</p>
+            </div>
+            <div className="grid grid-cols-2 gap-4 w-full max-w-md">
+              <div className="p-6 rounded-3xl bg-primary/5 border border-primary/10 text-center">
+                <Bot className="h-8 w-8 mx-auto mb-2 text-primary" />
+                <p className="text-xs font-bold">{t.aiLabel}</p>
+              </div>
+              <div className="p-6 rounded-3xl bg-purple-500/5 border border-purple-500/10 text-center">
+                <UserIcon className="h-8 w-8 mx-auto mb-2 text-purple-500" />
+                <p className="text-xs font-bold">{t.humanLabel}</p>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

src/components/header.tsx

@@ -1,7 +1,7 @@
 
 'use client';
 import { ThemeToggle } from '@/components/theme-toggle';
-import { MessageSquare, Users, Mic, LogOut, User as UserIcon, Languages, Compass, Play, Menu, Cpu, Sparkles, Zap } from 'lucide-react';
+import { Users, Mic, LogOut, User as UserIcon, Languages, Compass, Play, Menu, Cpu, Sparkles, Zap, MessageCircle } from 'lucide-react';
 import Link from 'next/link';
 import { Button } from './ui/button';
 import { useAuth } from '@/contexts/auth-context';
@@ -36,10 +36,9 @@ export function Header({ title }: HeaderProps) {
 
   const NavLinks = ({ mobile = false }: { mobile?: boolean }) => {
     const links = [
-      { href: '/', icon: MessageSquare, label: t.chatTab, color: 'text-primary', bg: 'hover:bg-primary/10' },
+      { href: '/', icon: Users, label: t.communityTitle, color: 'text-primary', bg: 'hover:bg-primary/10' },
       { href: '/world', icon: Compass, label: t.worldTitle, color: 'text-purple-500', bg: 'hover:bg-purple-500/10' },
       { href: '/reels', icon: Play, label: t.reelsTitle, color: 'text-orange-500', bg: 'hover:bg-orange-500/10' },
-      { href: '/group-chat', icon: Users, label: t.groupChatTitle, color: 'text-blue-500', bg: 'hover:bg-blue-500/10' },
       { href: '/voice-chat', icon: Mic, label: t.voiceChatTitle, color: 'text-red-500', bg: 'hover:bg-red-500/10' },
     ];
 
@@ -98,7 +97,7 @@ export function Header({ title }: HeaderProps) {
 
           <Link href="/" className="flex items-center gap-2 group">
             <div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-primary text-primary-foreground shadow-lg radiant-glow group-hover:scale-110 transition-all">
-              <MessageSquare className="h-6 w-6" />
+              <MessageCircle className="h-6 w-6" />
             </div>
             <h1 className="text-xl font-black tracking-tighter hidden sm:block bg-clip-text text-transparent bg-gradient-to-r from-primary to-purple-500">
               {t.appTitle}

src/lib/translations.ts

@@ -6,11 +6,11 @@ export const translations = {
     appTitle: 'أفادورا وورلد',
     worldTitle: 'صدى الأثير',
     reelsTitle: 'أثير فيو',
-    groupChatTitle: 'دردشة جماعية',
+    communityTitle: 'المجتمع',
     voiceChatTitle: 'محادثة صوتية',
     profileTitle: 'الملف الشخصي',
     loginTitle: 'تسجيل الدخول',
-    chatTab: 'الدردشة',
+    chatTab: 'المحادثات',
     logout: 'تسجيل الخروج',
     welcome: 'أهلاً بك في أفادورا',
     chooseLogin: 'اختر الطريقة المناسبة لك للبدء',
@@ -33,7 +33,7 @@ export const translations = {
     deleteConfirmDesc: 'هذا الإجراء سيقوم بحذف حسابك نهائياً. ستفقد الوصول إلى جميع بياناتك.',
     cancel: 'إلغاء',
     confirmDelete: 'نعم، احذف حسابي',
-    search: 'بحث...',
+    search: 'بحث عن أشخاص...',
     generatePosts: 'ولّد منشورات',
     thinking: 'بماذا تفكر يا {name}؟',
     localContext: 'منشورات مخصصة لمنطقتك',
@@ -48,14 +48,8 @@ export const translations = {
     apiConsumption: 'استهلاك الـ API اليومي',
     used: 'المستخدم',
     remaining: 'المتبقي',
-    backToChat: 'العودة للدردشة',
-    watchingOnly: 'هذه محادثة مشاهدة فقط. لا يمكنك إرسال رسائل هنا.',
-    chooseCanned: 'اختر محادثة جاهزة...',
-    writeTopic: 'اكتب موضوعاً لتوليده...',
-    generate: 'توليد',
-    randomChat: 'محادثة عشوائية',
-    startGroupChat: 'ابدأ محادثة جماعية',
-    groupChatDesc: 'اختر من المحادثات الجاهزة، أو اكتب موضوعًا، أو اضغط "محادثة عشوائية".',
+    backToChat: 'العودة للمجتمع',
+    watchingOnly: 'هذه محادثة مشاهدة فقط.',
     voiceWelcome: 'مرحباً بك في المحادثة الصوتية',
     voiceDesc: 'اضغط على الميكروفون لبدء التحدث مع زينة',
     listening: 'تستمع...',
@@ -75,25 +69,30 @@ export const translations = {
     bio: 'نبذة شخصية',
     gender: 'الجنس',
     occupation: 'المهنة',
-    interests: 'الاهتمامات (افصل بينها بفاصلة)',
+    interests: 'الاهتمامات',
     interestsPlaceholder: 'فلسفة، تقنية، فن، رياضة...',
     male: 'ذكر',
     female: 'أنثى',
     other: 'آخر',
     bioPlaceholder: 'أخبرنا عن فلسفتك في الحياة...',
-    nextVideo: 'الفيديو التالي',
-    prevVideo: 'الفيديو السابق',
     noVideos: 'لا توجد فيديوهات متاحة حالياً.',
+    aiLabel: 'ذكاء اصطناعي',
+    humanLabel: 'مستخدم حقيقي',
+    startChat: 'ابدأ المحادثة الآن',
+    online: 'متصل الآن',
+    typeMessage: 'اكتب رسالتك هنا...',
+    noUsers: 'لا يوجد أشخاص متاحون حالياً.',
+    chatWith: 'تحدث مع {name}'
   },
   en: {
     appTitle: 'AvadoraWorld',
     worldTitle: 'Aether Echo',
     reelsTitle: 'Aether View',
-    groupChatTitle: 'Group Chat',
+    communityTitle: 'Community',
     voiceChatTitle: 'Voice Chat',
     profileTitle: 'Profile',
     loginTitle: 'Login',
-    chatTab: 'Chat',
+    chatTab: 'Chats',
     logout: 'Logout',
     welcome: 'Welcome to Avadora',
     chooseLogin: 'Choose your preferred method to start',
@@ -116,7 +115,7 @@ export const translations = {
     deleteConfirmDesc: 'This action will permanently delete your account. You will lose access to all your data.',
     cancel: 'Cancel',
     confirmDelete: 'Yes, delete my account',
-    search: 'Search...',
+    search: 'Search for people...',
     generatePosts: 'Generate Posts',
     thinking: 'What\'s on your mind, {name}?',
     localContext: 'Posts customized for your area',
@@ -131,14 +130,8 @@ export const translations = {
     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".',
+    backToChat: 'Back to Community',
+    watchingOnly: 'This is a view-only chat.',
     voiceWelcome: 'Welcome to Voice Chat',
     voiceDesc: 'Press the microphone to start talking with Zeina',
     listening: 'Listening...',
@@ -158,14 +151,19 @@ export const translations = {
     bio: 'Bio',
     gender: 'Gender',
     occupation: 'Occupation',
-    interests: 'Interests (comma separated)',
+    interests: 'Interests',
     interestsPlaceholder: 'Philosophy, Tech, Art, Sports...',
     male: 'Male',
     female: 'Female',
     other: 'Other',
     bioPlaceholder: 'Tell us about your philosophy...',
-    nextVideo: 'Next Video',
-    prevVideo: 'Previous Video',
     noVideos: 'No videos available right now.',
+    aiLabel: 'AI Assistant',
+    humanLabel: 'Real User',
+    startChat: 'Start Chatting Now',
+    online: 'Online Now',
+    typeMessage: 'Type your message...',
+    noUsers: 'No people found.',
+    chatWith: 'Chat with {name}'
   }
 };