@armoyu/ui 1.1.39 → 1.1.41

package/dist/components/modules/chat/ChatLayout.d.ts

@@ -1,2 +1,8 @@
-export declare function ChatLayout(): import("react/jsx-runtime").JSX.Element;
+import { Chat } from '../../../models/social/chat/Chat';
+interface ChatLayoutProps {
+    onVoiceCall?: (contact: Chat) => void;
+    onAvatarClick?: (contact: Chat) => void;
+}
+export declare function ChatLayout({ onVoiceCall, onAvatarClick }?: ChatLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=ChatLayout.d.ts.map

package/dist/components/modules/chat/ChatLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatLayout.d.ts","sourceRoot":"","sources":["../../../../src/components/modules/chat/ChatLayout.tsx"],"names":[],"mappings":"AAsBA,wBAAgB,UAAU,4CA2bzB"}
+{"version":3,"file":"ChatLayout.d.ts","sourceRoot":"","sources":["../../../../src/components/modules/chat/ChatLayout.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,MAAM,kCAAkC,CAAC;AAmBxD,UAAU,eAAe;IACvB,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,KAAK,IAAI,CAAC;IACtC,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,KAAK,IAAI,CAAC;CACzC;AAED,wBAAgB,UAAU,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,GAAE,eAAoB,2CA+yB9E"}

package/dist/components/modules/chat/ChatLayout.js

@@ -1,21 +1,25 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { Chat } from '../../../models/social/chat/Chat';
 import { ChatMessage as ChatMessageModel } from '../../../models/social/chat/Message';
-import { Search, X } from 'lucide-react';
+import { Phone, Search, X } from 'lucide-react';
 import { useArmoyu } from '../../../context/ArmoyuContext';
 // Shared Contexts / Utils from main index
-import { useAuth, useChat, useSocket, userList } from '../../../index';
+import { useAuth, useChat, useSocket, userList, VoiceCallWidget } from '../../../index';
 // Module specific widgets
 import { ChatList } from './widgets/ChatList';
 import { ChatMessage } from './widgets/ChatMessage';
 import { ChatInput } from './widgets/ChatInput';
-export function ChatLayout() {
+export function ChatLayout({ onVoiceCall, onAvatarClick } = {}) {
     const { user, session } = useAuth();
     const { setMockEnabled } = useArmoyu();
-    const { closeChat, isLiveMode, setLiveMode, chatList: liveContacts, setChatList, activeMessages, setActiveMessages, fetchMessages, fetchChatList, sendMessage: sendApiMessage } = useChat();
+    const { isChatOpen, closeChat, isLiveMode, setLiveMode, chatList: liveContacts, searchResults, setChatList, activeMessages, setActiveMessages, fetchMessages, fetchChatList, sendMessage: sendApiMessage } = useChat();
     const { emit, on, isConnected } = useSocket();
+    const isChatOpenRef = React.useRef(isChatOpen);
+    useEffect(() => {
+        isChatOpenRef.current = isChatOpen;
+    }, [isChatOpen]);
     const handleFetchFromApi = async () => {
         setMockEnabled(false);
         setLiveMode(true);
@@ -27,10 +31,114 @@ export function ChatLayout() {
     const [localMessages, setLocalMessages] = useState([]);
     const [localContacts, setLocalContacts] = useState([]);
     const [isTyping, setIsTyping] = useState(false);
+    const [typingUsers, setTypingUsers] = useState([]);
     const [isSearchVisible, setIsSearchVisible] = useState(false);
     const [msgSearchQuery, setMsgSearchQuery] = useState('');
     const scrollContainerRef = React.useRef(null);
     const isFirstRender = React.useRef(true);
+    // Call State
+    const [activeCall, setActiveCall] = useState(null);
+    // Handle call response callbacks
+    const handleAcceptCall = useCallback(() => {
+        if (!activeCall)
+            return;
+        const acceptData = {
+            caller: activeCall.caller,
+            recipientUsername: activeCall.caller.username,
+            recipient: activeCall.recipient,
+            status: 'accepted'
+        };
+        emit('chat_call', acceptData);
+        setActiveCall(prev => prev ? { ...prev, status: 'connected' } : null);
+    }, [activeCall, emit]);
+    const handleDeclineCall = useCallback(() => {
+        if (!activeCall)
+            return;
+        const declineData = {
+            caller: activeCall.caller,
+            recipientUsername: activeCall.caller.username,
+            recipient: activeCall.recipient,
+            status: 'rejected'
+        };
+        emit('chat_call', declineData);
+        setActiveCall(prev => prev ? { ...prev, status: 'rejected' } : null);
+        setTimeout(() => setActiveCall(null), 1500);
+    }, [activeCall, emit]);
+    const handleHangUpCall = useCallback(() => {
+        if (!activeCall)
+            return;
+        const targetUsername = activeCall.isIncoming ? activeCall.caller.username : activeCall.recipient.username;
+        const hangupData = {
+            caller: activeCall.caller,
+            recipientUsername: targetUsername,
+            recipient: activeCall.recipient,
+            status: 'hung_up'
+        };
+        emit('chat_call', hangupData);
+        setActiveCall(prev => prev ? { ...prev, status: 'hung_up' } : null);
+        setTimeout(() => setActiveCall(null), 1500);
+    }, [activeCall, emit]);
+    // Listen for socket call events
+    useEffect(() => {
+        if (!on)
+            return;
+        const offCall = on('chat_call', (data) => {
+            console.log('[Socket] Incoming call event:', data);
+            if (data.status === 'ringing') {
+                if (user && data.recipientUsername === user.username) {
+                    if (activeCall && activeCall.status === 'connected') {
+                        emit('chat_call', {
+                            caller: data.caller,
+                            recipientUsername: data.caller.username,
+                            recipient: data.recipient,
+                            status: 'busy'
+                        });
+                        return;
+                    }
+                    setActiveCall({
+                        caller: data.caller,
+                        recipient: data.recipient,
+                        isIncoming: true,
+                        status: 'ringing'
+                    });
+                }
+            }
+            else if (data.status === 'accepted') {
+                if (activeCall && !activeCall.isIncoming && activeCall.status === 'ringing') {
+                    setActiveCall(prev => prev ? { ...prev, status: 'connected' } : null);
+                }
+            }
+            else if (data.status === 'rejected') {
+                if (activeCall && !activeCall.isIncoming && activeCall.status === 'ringing') {
+                    setActiveCall(prev => prev ? { ...prev, status: 'rejected' } : null);
+                    setTimeout(() => setActiveCall(null), 1500);
+                }
+            }
+            else if (data.status === 'busy') {
+                if (activeCall && !activeCall.isIncoming && activeCall.status === 'ringing') {
+                    setActiveCall(prev => prev ? { ...prev, status: 'busy' } : null);
+                    setTimeout(() => setActiveCall(null), 1500);
+                }
+            }
+            else if (data.status === 'hung_up') {
+                setActiveCall(prev => prev ? { ...prev, status: 'hung_up' } : null);
+                setTimeout(() => setActiveCall(null), 1500);
+            }
+        });
+        return () => {
+            offCall();
+        };
+    }, [on, user, activeCall, emit]);
+    // Soket bağlantısı sağlandığında sunucuya kayıt ol
+    useEffect(() => {
+        if (isConnected && user?.id) {
+            emit('register_user', {
+                userId: user.id,
+                username: user.username
+            });
+            console.log(`[Socket] Kayıt isteği gönderildi: ${user.username} (${user.id})`);
+        }
+    }, [isConnected, user, emit]);
     // Tarihleri karşılaştırmak ve "Bugün", "Dün" gibi etiketler üretmek için yardımcı fonksiyon
     const getDateLabel = (dateStr) => {
         try {
@@ -40,12 +148,8 @@ export function ChatLayout() {
             if (isNaN(date.getTime()))
                 return dateStr; // Geçersiz tarihse olduğu gibi bırak
             const today = new Date();
-            const yesterday = new Date();
-            yesterday.setDate(today.getDate() - 1);
             if (date.toDateString() === today.toDateString())
                 return 'Bugün';
-            if (date.toDateString() === yesterday.toDateString())
-                return 'Dün';
             return date.toLocaleDateString('tr-TR', { day: 'numeric', month: 'long', year: 'numeric' });
         }
         catch (e) {
@@ -96,8 +200,8 @@ export function ChatLayout() {
     // Handle Contact Selection in LIVE mode
     useEffect(() => {
         if (isLiveMode && activeContactId) {
-            // Find the contact in the list to get its chatType and raw ID
-            const contact = (isLiveMode ? liveContacts : localContacts).find(c => c.uid === activeContactId);
+            // Find the contact in the list (or search results) to get its chatType and raw ID
+            const contact = (isLiveMode ? [...liveContacts, ...searchResults] : localContacts).find(c => c.uid === activeContactId);
             if (contact) {
                 const idNum = parseInt(contact.id);
                 if (!isNaN(idNum)) {
@@ -109,30 +213,118 @@ export function ChatLayout() {
         }
     }, [activeContactId, isLiveMode, fetchMessages]);
     // Auto-select logic removed to prevent automatic chat opening on load
+    const playNotificationSound = () => {
+        try {
+            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+            const osc = audioContext.createOscillator();
+            const gainNode = audioContext.createGain();
+            osc.connect(gainNode);
+            gainNode.connect(audioContext.destination);
+            osc.type = 'sine';
+            const now = audioContext.currentTime;
+            // Ping 1 (587.33Hz - D5)
+            osc.frequency.setValueAtTime(587.33, now);
+            gainNode.gain.setValueAtTime(0, now);
+            gainNode.gain.linearRampToValueAtTime(0.06, now + 0.04);
+            gainNode.gain.exponentialRampToValueAtTime(0.001, now + 0.15);
+            // Ping 2 (880Hz - A5)
+            osc.frequency.setValueAtTime(880, now + 0.1);
+            gainNode.gain.setValueAtTime(0.06, now + 0.1);
+            gainNode.gain.exponentialRampToValueAtTime(0.001, now + 0.3);
+            osc.start(now);
+            osc.stop(now + 0.35);
+        }
+        catch (err) {
+            console.warn("Ses çalınamadı:", err);
+        }
+    };
     useEffect(() => {
         const offMsg = on('chat_message', (incomingMsg) => {
+            console.log(`[Socket] Yeni mesaj alındı (ID: ${incomingMsg.id})`);
+            // Optimistic Update: Ignore if we just sent this message
+            if (incomingMsg.sender?.username === user?.username) {
+                return;
+            }
+            // Check if we are actively chatting with the sender or group
+            const currentActiveContact = (isLiveMode ? [...liveContacts, ...searchResults] : localContacts).find(c => c.uid === activeContactId);
+            const isGroup = incomingMsg.chatType === 'grup' || String(incomingMsg.chatId) === '0';
+            const isChattingWithSender = currentActiveContact && (isGroup
+                ? (currentActiveContact.chatType === 'grup' && (String(incomingMsg.chatId) === currentActiveContact.id || (incomingMsg.chatName && currentActiveContact.name === incomingMsg.chatName)))
+                : (currentActiveContact.chatType !== 'grup' && (String(incomingMsg.sender?.id) === currentActiveContact.id ||
+                    incomingMsg.sender?.username === currentActiveContact.username ||
+                    incomingMsg.sender?.username === currentActiveContact.id)));
+            // Play sound if not active in this chat or if chat list is closed
+            if (!isChatOpenRef.current || !isChattingWithSender) {
+                playNotificationSound();
+            }
             const msgModel = ChatMessageModel.fromAPI(incomingMsg);
             // 1. UPDATE GLOBAL CHAT LIST CACHE (For both Live and Mock modes)
-            setChatList(prev => prev.map(c => {
-                if (c.id === String(incomingMsg.chatId)) {
-                    const messageExists = c.messages.some(m => m.id === msgModel.id);
-                    return new Chat({
-                        ...c,
+            setChatList(prev => {
+                const contactId = String(incomingMsg.chatId);
+                const senderUsername = incomingMsg.sender?.username;
+                const isGroupMsg = incomingMsg.chatType === 'grup' || contactId === '0';
+                // EŞLEŞTİRME MANTIĞI: c.id (örn: 12138) veya c.username (örn: kkadirgumus) eşleşiyorsa bu sohbet mevcuttur!
+                const matched = prev.filter(c => {
+                    if (isGroupMsg) {
+                        return c.chatType === 'grup' && (c.id === contactId || (incomingMsg.chatName && c.name === incomingMsg.chatName));
+                    }
+                    return c.chatType !== 'grup' && (c.id === String(incomingMsg.sender?.id) || c.username === senderUsername || c.id === senderUsername);
+                });
+                console.log(`[Socket] Etkilenen Sohbet Sayısı: ${matched.length}`);
+                matched.forEach(c => {
+                    console.log(`[Socket] Etkilenen Sohbet Bilgisi -> Ad: ${c.name}, ID: ${c.id}, Tip: ${c.chatType}`);
+                });
+                const exists = matched.length > 0;
+                // Eğer listede yoksa ve kendi mesajımız değilse YENİDEN OLUŞTUR (Sohbeti silenler için)
+                if (!exists && senderUsername && senderUsername !== user?.username) {
+                    const finalId = isGroupMsg ? contactId : (incomingMsg.sender?.id || senderUsername);
+                    const newChat = new Chat({
+                        id: finalId,
+                        uid: isGroupMsg ? `grup-${finalId}` : `ozel-${finalId}`,
+                        username: isGroupMsg ? '' : senderUsername,
+                        name: isGroupMsg ? (incomingMsg.chatName || 'Grup Sohbeti') : (incomingMsg.sender?.displayName || senderUsername),
+                        avatar: isGroupMsg ? '' : (incomingMsg.sender?.avatar || ''),
                         lastMessage: msgModel,
                         time: msgModel.timestamp,
                         updatedAt: Date.now(),
-                        messages: messageExists ? c.messages : [...(c.messages || []), msgModel],
-                        unreadCount: (activeContactId !== c.uid && incomingMsg.sender?.username !== user?.username) ? c.unreadCount + 1 : c.unreadCount
+                        messages: [msgModel],
+                        unreadCount: (activeContactId !== (isGroupMsg ? `grup-${finalId}` : `ozel-${finalId}`)) ? 1 : 0,
+                        isOnline: !isGroupMsg,
+                        chatType: isGroupMsg ? 'grup' : 'ozel'
                     });
+                    return [newChat, ...prev];
                 }
-                return c;
-            }));
+                // Varsa mevcut olanı güncelle
+                return prev.map(c => {
+                    const isMatch = isGroupMsg
+                        ? (c.chatType === 'grup' && (c.id === contactId || (incomingMsg.chatName && c.name === incomingMsg.chatName)))
+                        : (c.chatType !== 'grup' && (c.id === String(incomingMsg.sender?.id) || c.username === senderUsername || c.id === senderUsername));
+                    if (isMatch) {
+                        const messageExists = c.messages.some(m => m.id === msgModel.id);
+                        return new Chat({
+                            ...c,
+                            lastMessage: msgModel,
+                            time: msgModel.timestamp,
+                            updatedAt: Date.now(),
+                            messages: messageExists ? c.messages : [...(c.messages || []), msgModel],
+                            unreadCount: (activeContactId !== c.uid && incomingMsg.sender?.username !== user?.username) ? c.unreadCount + 1 : c.unreadCount
+                        });
+                    }
+                    return c;
+                });
+            });
             // 2. UPDATE ACTIVE MESSAGES IF OPEN
-            const currentActiveContact = (isLiveMode ? liveContacts : localContacts).find(c => c.uid === activeContactId);
-            if (currentActiveContact && (incomingMsg.chatId === currentActiveContact.id || incomingMsg.sender?.username === currentActiveContact.id)) {
-                // Since we are updating the global chatList, activeMessages should ideally sync if using Context well, 
-                // but for immediate UI feedback we update it here too.
-                fetchMessages(parseInt(currentActiveContact.id), currentActiveContact.chatType);
+            if (isChattingWithSender) {
+                setTypingUsers(prev => {
+                    const filtered = prev.filter(u => u.username !== incomingMsg.sender?.username);
+                    setIsTyping(filtered.length > 0);
+                    return filtered;
+                });
+                setActiveMessages(prev => {
+                    if (prev.some(m => m.id === msgModel.id))
+                        return prev;
+                    return [...prev, msgModel];
+                });
             }
             // 3. MOCK MODE UPDATES
             if (!isLiveMode) {
@@ -170,14 +362,43 @@ export function ChatLayout() {
                     });
                 });
             }
-            setIsTyping(false);
+            if (incomingMsg.sender?.username) {
+                setTypingUsers(prev => {
+                    const filtered = prev.filter(u => u.username !== incomingMsg.sender.username);
+                    setIsTyping(filtered.length > 0);
+                    return filtered;
+                });
+            }
         });
-        const offTyping = on('typing', (data) => {
-            const currentActiveContact = (isLiveMode ? liveContacts : localContacts).find(c => c.uid === activeContactId);
-            const isChattingWithSender = currentActiveContact && data.username === currentActiveContact.id && data.chatId === user?.username;
+        const offTyping = on('chat_typing', (data) => {
+            const currentActiveContact = (isLiveMode ? [...liveContacts, ...searchResults] : localContacts).find(c => c.uid === activeContactId);
+            if (!currentActiveContact)
+                return;
+            const isGroupChat = currentActiveContact.chatType === 'grup' || currentActiveContact.id === '0';
+            const isTypingHere = isGroupChat
+                ? ((String(data.chatId) === currentActiveContact.id || data.chatId === currentActiveContact.username) && data.username !== user?.username)
+                : (data.username === currentActiveContact.username && data.chatId === user?.username);
             const isBotTyping = data.username === 'system' && data.chatId === user?.username;
-            if (isChattingWithSender || isBotTyping) {
-                setIsTyping(data.isTyping);
+            if (isTypingHere || isBotTyping) {
+                if (data.isTyping) {
+                    setTypingUsers(prev => {
+                        if (prev.some(u => u.username === data.username))
+                            return prev;
+                        const updated = [...prev, {
+                                username: data.username,
+                                avatar: data.avatar || (isBotTyping ? 'https://api.dicebear.com/7.x/avataaars/svg?seed=System' : currentActiveContact.avatar)
+                            }];
+                        setIsTyping(true);
+                        return updated;
+                    });
+                }
+                else {
+                    setTypingUsers(prev => {
+                        const updated = prev.filter(u => u.username !== data.username);
+                        setIsTyping(updated.length > 0);
+                        return updated;
+                    });
+                }
             }
         });
         return () => {
@@ -186,7 +407,7 @@ export function ChatLayout() {
         };
     }, [on, activeContactId, user?.username, isLiveMode]);
     const handleSelectContact = (uid) => {
-        const contact = (isLiveMode ? liveContacts : localContacts).find(c => c.uid === uid);
+        const contact = (isLiveMode ? [...liveContacts, ...searchResults] : localContacts).find(c => c.uid === uid);
         // Caching: If we already have messages for this contact, show them immediately
         if (contact && contact.messages && contact.messages.length > 0) {
             setActiveMessages(contact.messages);
@@ -216,12 +437,37 @@ export function ChatLayout() {
         }
         setActiveContactId(uid);
         setIsTyping(false);
+        setTypingUsers([]);
     };
     const handleSendMessage = async (text) => {
         if (!text.trim() || !activeContactId)
             return;
         if (isLiveMode) {
-            const contact = (isLiveMode ? liveContacts : localContacts).find(c => c.uid === activeContactId);
+            const contact = (isLiveMode ? [...liveContacts, ...searchResults] : localContacts).find(c => c.uid === activeContactId);
+            // Optimistic Update: Anında UI'a ekle ki bekleme olmasın
+            const newMessage = new ChatMessageModel({
+                id: Date.now().toString(),
+                sender: user,
+                content: text,
+                timestamp: new Date().toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit' }),
+                fullDate: new Date().toISOString(),
+                isSystem: false,
+                isSelf: true
+            });
+            setActiveMessages(prev => [...prev, newMessage]);
+            // Global chat list'in son mesajını da anında güncelle
+            setChatList(prev => prev.map(c => {
+                if (c.uid === activeContactId) {
+                    return new Chat({
+                        ...c,
+                        lastMessage: newMessage,
+                        time: newMessage.timestamp,
+                        updatedAt: Date.now(),
+                        messages: [...(c.messages || []), newMessage]
+                    });
+                }
+                return c;
+            }));
             if (contact) {
                 const idNum = parseInt(contact.id);
                 if (!isNaN(idNum)) {
@@ -252,48 +498,90 @@ export function ChatLayout() {
                 return c;
             }));
         }
-        const currentContact = (isLiveMode ? liveContacts : localContacts).find(c => c.uid === activeContactId);
+        const currentContact = (isLiveMode ? [...liveContacts, ...searchResults] : localContacts).find(c => c.uid === activeContactId);
+        // Eğer contact listede yoksa (örn. arama sonuçlarından seçilmişse), activeContactId "ozel-11107" gibi gelir. 
+        // ID kısmını ayıklayıp göndermeliyiz.
+        const finalChatId = currentContact?.id || activeContactId.replace('ozel-', '').replace('grup-', '');
         emit('chat_message', {
             id: Date.now().toString(),
-            chatId: currentContact?.id || activeContactId,
+            chatId: finalChatId,
+            chatType: currentContact?.chatType || (activeContactId.startsWith('grup-') ? 'grup' : 'ozel'),
+            chatName: currentContact?.name || '',
             sender: {
+                id: user?.id,
                 username: user?.username,
-                displayName: user?.displayName,
+                displayName: user?.getName?.() || user?.displayName || user?.username,
                 avatar: user?.avatar
             },
             content: text,
-            timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+            timestamp: new Date().toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit' }),
             tarih: new Date().toISOString()
         });
     };
     if (!user) {
         return (_jsx("div", { className: "flex items-center justify-center h-full text-armoyu-text-muted bg-armoyu-card-bg rounded-3xl border border-gray-200 dark:border-white/10", children: "Sohbetleri g\u00F6rmek i\u00E7in giri\u015F yapmal\u0131s\u0131n\u0131z." }));
     }
-    const currentContacts = isLiveMode ? liveContacts : localContacts;
+    const currentContacts = isLiveMode ? [...liveContacts, ...searchResults] : localContacts;
     const activeContact = activeContactId ? currentContacts.find((c) => c.uid === activeContactId) : null;
-    return (_jsxs("div", { className: "flex h-full w-full overflow-hidden relative z-10", children: [!activeContactId && (_jsxs("div", { className: "w-full h-full flex flex-col animate-in fade-in slide-in-from-left-4 duration-300", children: [_jsx("div", { className: "p-4 border-b border-gray-200 dark:border-white/5 flex items-center justify-between", children: _jsx("h2", { className: "font-black text-armoyu-text uppercase tracking-widest text-sm", children: "Sohbetler" }) }), _jsx(ChatList, { contacts: currentContacts, activeId: activeContactId || '', onSelect: handleSelectContact })] })), activeContactId && activeContact && (_jsxs("div", { className: "w-full h-full flex flex-col bg-armoyu-bg relative animate-in fade-in slide-in-from-right-4 duration-300", children: [_jsxs("div", { className: "h-[76px] border-b border-gray-200 dark:border-white/5 bg-armoyu-card-bg flex items-center px-4 gap-3 z-10 shrink-0", children: [_jsx("button", { onClick: () => setActiveContactId(null), className: "p-2 -ml-2 text-armoyu-text-muted hover:text-armoyu-text hover:bg-black/5 dark:hover:bg-white/5 transition-colors rounded-full focus:outline-none", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "15 18 9 12 15 6" }) }) }), _jsx("img", { src: activeContact.avatar, className: "w-10 h-10 rounded-full border border-black/5 dark:border-white/10 shadow-sm", alt: "" }), _jsx("div", { className: "flex-1 min-w-0", children: isSearchVisible ? (_jsxs("div", { className: "flex items-center bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-xl px-3 py-1.5 animate-in fade-in slide-in-from-right-2 duration-300", children: [_jsx(Search, { className: "w-4 h-4 text-armoyu-text-muted mr-2" }), _jsx("input", { type: "text", autoFocus: true, placeholder: "Mesajlarda ara...", value: msgSearchQuery, onChange: (e) => setMsgSearchQuery(e.target.value), className: "flex-1 bg-transparent border-none outline-none text-sm text-armoyu-text placeholder:text-armoyu-text-muted font-medium" }), _jsx("button", { onClick: () => { setIsSearchVisible(false); setMsgSearchQuery(''); }, className: "p-1 hover:bg-black/5 rounded-full transition-colors", children: _jsx(X, { className: "w-4 h-4 text-armoyu-text-muted" }) })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h3", { className: "font-bold text-armoyu-text truncate text-base", children: activeContact.name }), activeContact.isGroup && (_jsx("span", { className: "px-2 py-0.5 rounded-md bg-armoyu-primary/10 text-armoyu-primary text-[9px] font-black uppercase tracking-widest border border-armoyu-primary/20 flex-shrink-0", children: "Topluluk" }))] }), _jsx("div", { className: "flex items-center gap-1.5 mt-0.5", children: activeContact.isOnline ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "w-2 h-2 rounded-full bg-emerald-500 shadow-[0_0_5px_rgba(16,185,129,0.6)] animate-pulse" }), _jsx("span", { className: "text-xs font-bold text-emerald-500 shadow-sm", children: "\u00C7evrimi\u00E7i" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "w-2 h-2 rounded-full bg-gray-400 dark:bg-gray-600" }), _jsxs("span", { className: "text-xs font-bold text-armoyu-text-muted", children: ["Son g\u00F6r\u00FClme ", activeContact.lastSeen] })] })) })] })) }), _jsxs("div", { className: "flex gap-1", children: [_jsx("button", { onClick: () => setIsSearchVisible(!isSearchVisible), className: `p-2 rounded-full transition-colors ${isSearchVisible ? 'text-armoyu-primary bg-armoyu-primary/10' : 'text-armoyu-text-muted hover:text-armoyu-primary hover:bg-armoyu-primary/10'}`, title: "Sohbet \u0130\u00E7i Ara", children: _jsx(Search, { className: "w-5 h-5" }) }), _jsx("button", { onClick: closeChat, className: "p-2 text-armoyu-text-muted hover:text-red-500 rounded-full hover:bg-red-500/10 transition-colors", title: "Sohbeti Kapat", children: _jsx(X, { className: "w-5 h-5" }) })] })] }), _jsxs("div", { ref: scrollContainerRef, className: "flex-1 overflow-y-auto p-4 md:p-6 flex flex-col-reverse gap-2 relative hide-scrollbar scroll-smooth", children: [isTyping && (_jsx("div", { className: "flex gap-2 items-center px-4 mb-2", children: _jsx("div", { className: "flex gap-1 items-center bg-black/5 dark:bg-white/5 px-3 py-1.5 rounded-2xl border border-black/5 dark:border-white/5", children: _jsxs("div", { className: "flex gap-0.5 mt-0.5", children: [_jsx("span", { className: "w-1 h-1 rounded-full bg-armoyu-primary animate-bounce [animation-delay:-0.3s]" }), _jsx("span", { className: "w-1 h-1 rounded-full bg-armoyu-primary animate-bounce [animation-delay:-0.15s]" }), _jsx("span", { className: "w-1 h-1 rounded-full bg-armoyu-primary animate-bounce" })] }) }) })), (() => {
+    return (_jsxs("div", { className: "flex h-full w-full overflow-hidden relative z-10", children: [!activeContactId && (_jsxs("div", { className: "w-full h-full flex flex-col animate-in fade-in slide-in-from-left-4 duration-300", children: [_jsx("div", { className: "p-4 border-b border-gray-200 dark:border-white/5 flex items-center justify-between shrink-0", children: _jsx("h2", { className: "font-black text-armoyu-text uppercase tracking-widest text-sm", children: "Sohbetler" }) }), _jsx(ChatList, { contacts: currentContacts, activeId: activeContactId || '', onSelect: handleSelectContact, className: "flex-1 min-h-0" })] })), activeContactId && activeContact && (_jsxs("div", { className: "w-full h-full flex flex-col bg-armoyu-bg relative animate-in fade-in slide-in-from-right-4 duration-300", children: [_jsxs("div", { className: "h-[76px] border-b border-gray-200 dark:border-white/5 bg-armoyu-card-bg flex items-center px-4 gap-3 z-10 shrink-0", children: [_jsx("button", { onClick: () => setActiveContactId(null), className: "p-2 -ml-2 text-armoyu-text-muted hover:text-armoyu-text hover:bg-black/5 dark:hover:bg-white/5 transition-colors rounded-full focus:outline-none", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "15 18 9 12 15 6" }) }) }), _jsx("img", { src: activeContact.avatar, onClick: () => {
+                                    if (onAvatarClick) {
+                                        onAvatarClick(activeContact);
+                                    }
+                                    else {
+                                        alert(`${activeContact.name} profil sayfası açılıyor (ID: ${activeContact.id}, Username: ${activeContact.username}).`);
+                                    }
+                                }, className: "w-10 h-10 rounded-full border border-black/5 dark:border-white/10 shadow-sm cursor-pointer hover:opacity-80 transition-opacity", alt: "" }), _jsx("div", { className: "flex-1 min-w-0", children: isSearchVisible ? (_jsxs("div", { className: "flex items-center bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-xl px-3 py-1.5 animate-in fade-in slide-in-from-right-2 duration-300", children: [_jsx(Search, { className: "w-4 h-4 text-armoyu-text-muted mr-2" }), _jsx("input", { type: "text", autoFocus: true, placeholder: "Mesajlarda ara...", value: msgSearchQuery, onChange: (e) => setMsgSearchQuery(e.target.value), className: "flex-1 bg-transparent border-none outline-none text-sm text-armoyu-text placeholder:text-armoyu-text-muted font-medium" }), _jsx("button", { onClick: () => { setIsSearchVisible(false); setMsgSearchQuery(''); }, className: "p-1 hover:bg-black/5 rounded-full transition-colors", children: _jsx(X, { className: "w-4 h-4 text-armoyu-text-muted" }) })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h3", { className: "font-bold text-armoyu-text truncate text-base", children: activeContact.name }), activeContact.isGroup && (_jsx("span", { className: "px-2 py-0.5 rounded-md bg-armoyu-primary/10 text-armoyu-primary text-[9px] font-black uppercase tracking-widest border border-armoyu-primary/20 flex-shrink-0", children: "Topluluk" }))] }), _jsx("div", { className: "flex items-center gap-1.5 mt-0.5", children: activeContact.isOnline ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "w-2 h-2 rounded-full bg-emerald-500 shadow-[0_0_5px_rgba(16,185,129,0.6)] animate-pulse" }), _jsx("span", { className: "text-xs font-bold text-emerald-500 shadow-sm", children: "\u00C7evrimi\u00E7i" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "w-2 h-2 rounded-full bg-gray-400 dark:bg-gray-600" }), _jsxs("span", { className: "text-xs font-bold text-armoyu-text-muted", children: ["Son g\u00F6r\u00FClme ", activeContact.lastSeen] })] })) })] })) }), _jsxs("div", { className: "flex gap-1", children: [_jsx("button", { onClick: () => {
+                                            if (activeContact) {
+                                                const callData = {
+                                                    caller: {
+                                                        username: user?.username || 'user',
+                                                        displayName: user?.displayName || 'Kullanıcı',
+                                                        avatar: user?.avatar || 'https://api.dicebear.com/7.x/avataaars/svg'
+                                                    },
+                                                    recipientUsername: activeContact.username || activeContact.id,
+                                                    recipient: {
+                                                        username: activeContact.username || activeContact.id,
+                                                        displayName: activeContact.name,
+                                                        avatar: activeContact.avatar
+                                                    },
+                                                    status: 'ringing'
+                                                };
+                                                emit('chat_call', callData);
+                                                setActiveCall({
+                                                    caller: callData.caller,
+                                                    recipient: callData.recipient,
+                                                    isIncoming: false,
+                                                    status: 'ringing'
+                                                });
+                                            }
+                                        }, className: "p-2 text-armoyu-text-muted hover:text-emerald-500 rounded-full hover:bg-emerald-500/10 transition-colors", title: "Sesli Arama Ba\u015Flat", children: _jsx(Phone, { className: "w-5 h-5" }) }), _jsx("button", { onClick: () => setIsSearchVisible(!isSearchVisible), className: `p-2 rounded-full transition-colors ${isSearchVisible ? 'text-armoyu-primary bg-armoyu-primary/10' : 'text-armoyu-text-muted hover:text-armoyu-primary hover:bg-armoyu-primary/10'}`, title: "Sohbet \u0130\u00E7i Ara", children: _jsx(Search, { className: "w-5 h-5" }) }), _jsx("button", { onClick: closeChat, className: "p-2 text-armoyu-text-muted hover:text-red-500 rounded-full hover:bg-red-500/10 transition-colors", title: "Sohbeti Kapat", children: _jsx(X, { className: "w-5 h-5" }) })] })] }), _jsxs("div", { ref: scrollContainerRef, className: "flex-1 overflow-y-auto p-4 md:p-6 flex flex-col-reverse gap-2 relative hide-scrollbar scroll-smooth", children: [typingUsers.length > 0 && (_jsxs("div", { className: "flex gap-2 items-center px-4 mb-2 animate-in fade-in slide-in-from-bottom-2 duration-300", children: [_jsxs("div", { className: "flex -space-x-2 overflow-hidden shrink-0", children: [typingUsers.slice(0, 3).map((tUser, idx) => (_jsx("img", { src: tUser.avatar || 'https://api.dicebear.com/7.x/avataaars/svg?seed=Anonymous', alt: tUser.username, className: "inline-block w-6 h-6 rounded-full ring-2 ring-white dark:ring-[#0a0a0e] object-cover bg-white/5", style: { zIndex: 10 - idx }, onError: (e) => { e.target.src = 'https://api.dicebear.com/7.x/avataaars/svg?seed=Anonymous'; } }, tUser.username))), typingUsers.length > 3 && (_jsxs("div", { className: "flex items-center justify-center w-6 h-6 rounded-full bg-armoyu-primary text-white text-[8px] font-black ring-2 ring-white dark:ring-[#0a0a0e] z-0", children: ["+", typingUsers.length - 3] }))] }), _jsx("div", { className: "flex gap-1 items-center bg-black/5 dark:bg-white/5 px-3 py-1.5 rounded-2xl border border-black/5 dark:border-white/5", children: _jsxs("div", { className: "flex gap-0.5 mt-0.5", children: [_jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-armoyu-primary animate-bounce [animation-delay:-0.3s]" }), _jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-armoyu-primary animate-bounce [animation-delay:-0.15s]" }), _jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-armoyu-primary animate-bounce" })] }) })] })), (() => {
                                 const msgs = (isLiveMode ? activeMessages : localMessages)
                                     .filter(m => m.content.toLowerCase().includes(msgSearchQuery.toLowerCase()));
-                                const renderedItems = [];
-                                for (let i = 0; i < msgs.length; i++) {
-                                    const msg = msgs[i];
-                                    const prevMsg = msgs[i - 1];
-                                    // Mesajı ekle
-                                    renderedItems.push(_jsx(ChatMessage, { id: msg.id, sender: {
-                                            name: msg.sender?.displayName || 'Bilinmiyor',
-                                            avatar: msg.sender?.avatar || '',
-                                            isSelf: msg.isSelf
-                                        }, content: msg.content, timestamp: msg.timestamp }, msg.id));
-                                    // Eğer bir sonraki mesajın tarihi farklıysa veya ilk mesajsa (flex-col-reverse olduğu için mantık ters)
-                                    // Ama biz burada düz listede gidip en son reverse yapacağız.
-                                    const currentDate = new Date(msg.fullDate).toDateString();
-                                    const nextMsg = msgs[i + 1];
-                                    const nextDate = nextMsg ? new Date(nextMsg.fullDate).toDateString() : null;
-                                    if (currentDate !== nextDate) {
-                                        renderedItems.push(_jsx("div", { className: "flex justify-center my-6 sticky top-0 z-10", children: _jsx("span", { className: "px-4 py-1.5 rounded-full bg-black/5 dark:bg-white/5 text-[10px] font-black uppercase tracking-widest text-armoyu-text-muted border border-black/5 dark:border-white/5 backdrop-blur-md", children: getDateLabel(msg.fullDate) }) }, `date-${currentDate}`));
+                                const groups = [];
+                                let currentGroup = null;
+                                msgs.forEach(msg => {
+                                    const dateKey = new Date(msg.fullDate).toDateString();
+                                    const label = getDateLabel(msg.fullDate) || '';
+                                    if (!currentGroup || currentGroup.dateKey !== dateKey) {
+                                        currentGroup = {
+                                            dateKey,
+                                            dateLabel: label,
+                                            messages: []
+                                        };
+                                        groups.push(currentGroup);
                                     }
-                                }
-                                return renderedItems.reverse();
-                            })()] }), _jsx(ChatInput, { onSend: handleSendMessage, chatId: activeContactId })] }))] }));
+                                    currentGroup.messages.push(msg);
+                                });
+                                // flex-col-reverse kullandığımız için:
+                                // Yeni günün grubu DOM'da ilk sırada (dolayısıyla ekranda en altta) olmalı.
+                                // Bu yüzden grupları ters çevirip basıyoruz.
+                                return groups.reverse().map(group => (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "flex justify-center my-4 sticky top-0 z-10", children: _jsx("span", { className: "px-4 py-1.5 rounded-full bg-black/5 dark:bg-white/5 text-[10px] font-black uppercase tracking-widest text-armoyu-text-muted border border-black/5 dark:border-white/5 backdrop-blur-md", children: group.dateLabel }) }), group.messages.map(msg => (_jsx(ChatMessage, { id: msg.id, sender: {
+                                                name: msg.sender?.displayName || 'Bilinmiyor',
+                                                avatar: msg.sender?.avatar || '',
+                                                isSelf: msg.isSelf
+                                            }, content: msg.content, timestamp: msg.timestamp }, msg.id)))] }, `group-${group.dateKey}`)));
+                            })()] }), _jsx(ChatInput, { onSend: handleSendMessage, chatId: (activeContact?.chatType === 'grup' || activeContact?.id === '0')
+                            ? activeContact?.id?.toString()
+                            : (activeContact?.username || activeContact?.id?.toString()) })] })), activeCall && (_jsx(VoiceCallWidget, { caller: activeCall.caller, recipient: activeCall.recipient, isIncoming: activeCall.isIncoming, status: activeCall.status, onAccept: handleAcceptCall, onDecline: handleDeclineCall, onHangUp: handleHangUpCall }))] }));
 }
 //# sourceMappingURL=ChatLayout.js.map