@armoyu/ui 1.0.0 → 1.0.1

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

@@ -1,197 +1,197 @@
-'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useEffect } from 'react';
-import { useAuth } from '../../../context/AuthContext';
-import { ChatList } from './ChatList';
-import { Chat, User, Session, ChatMessage as ChatMessageModel } from '@armoyu/core';
-import { ChatMessage } from './ChatMessage';
-import { ChatInput } from './ChatInput';
-import { useChat } from '../../../context/ChatContext';
-import { useSocket } from '../../../context/SocketContext';
-// Mock Data
-import { userList } from '../../../lib/constants/seedData';
-export function ChatContainer() {
-    const { user, session, updateSession } = useAuth();
-    const { closeChat } = useChat();
-    const { emit, on, isConnected } = useSocket();
-    // Eğer null ise liste görünümü açık, ID var ise mesajlaşma açık.
-    const [activeContactId, setActiveContactId] = useState(null);
-    const [localMessages, setLocalMessages] = useState([]);
-    const [localContacts, setLocalContacts] = useState([]);
-    const [isTyping, setIsTyping] = useState(false);
-    const messagesEndRef = React.useRef(null);
-    const scrollToBottom = () => {
-        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-    };
-    // Scroll to bottom when messages or typing status changes
-    useEffect(() => {
-        scrollToBottom();
-    }, [localMessages, isTyping]);
-    // Sync with session's chatList (chatList lives on Session, not User)
-    useEffect(() => {
-        if (session?.chatList) {
-            setLocalContacts(session.chatList);
-        }
-    }, [session?.chatList]);
-    // Socket Connection for Real-time Messages & Typing
-    useEffect(() => {
-        const offMsg = on('message', (incomingMsg) => {
-            console.log('[ChatContainer] Incoming socket message:', incomingMsg);
-            const msgModel = new ChatMessageModel({
-                id: incomingMsg.id,
-                sender: incomingMsg.sender ? new User(incomingMsg.sender) : undefined,
-                content: incomingMsg.content,
-                timestamp: incomingMsg.timestamp,
-                isSystem: incomingMsg.isSystem || false
-            });
-            // Update contacts list
-            setLocalContacts(prev => {
-                const contactId = incomingMsg.chatId || incomingMsg.sender?.username;
-                const contactExists = prev.some(c => c.id === contactId);
-                if (!contactExists && incomingMsg.sender?.username !== user?.username) {
-                    // CREATE NEW CHAT: If sender isn't in our list, create the chat box for them!
-                    const newChat = new Chat({
-                        id: contactId,
-                        name: incomingMsg.sender?.displayName || incomingMsg.sender?.username || 'Bilinmeyen',
-                        avatar: incomingMsg.sender?.avatar || '',
-                        lastMessage: msgModel,
-                        time: msgModel.timestamp,
-                        updatedAt: Date.now(),
-                        messages: [msgModel],
-                        unreadCount: (activeContactId !== contactId) ? 1 : 0,
-                        isOnline: true // Assume online since they just sent a message
-                    });
-                    // PERSIST to Session!
-                    if (session) {
-                        const updatedChatList = [newChat, ...(session.chatList || [])];
-                        updateSession(new Session({ ...session, chatList: updatedChatList }));
-                    }
-                    return [newChat, ...prev];
-                }
-                // UPDATE EXISTING CHAT
-                return prev.map(c => {
-                    if (c.id === contactId) {
-                        // Only add if not already in messages to avoid duplicates from echo
-                        const messageExists = c.messages.some(m => m.id === msgModel.id);
-                        const updatedChat = new Chat({
-                            ...c,
-                            lastMessage: msgModel,
-                            time: msgModel.timestamp,
-                            updatedAt: Date.now(),
-                            messages: messageExists ? c.messages : [...(c.messages || []), msgModel],
-                            unreadCount: (activeContactId !== c.id && incomingMsg.sender?.username !== user?.username) ? c.unreadCount + 1 : c.unreadCount
-                        });
-                        // Note: We don't necessarily need to update the whole session on every message to avoid excessive renders,
-                        // as local state handles the UI. But for NEW chats, we must.
-                        return updatedChat;
-                    }
-                    return c;
-                });
-            });
-            // If this is the active chat, update visible messages
-            if (activeContactId === incomingMsg.chatId || activeContactId === incomingMsg.sender?.username) {
-                setLocalMessages(prev => {
-                    if (prev.some(m => m.id === incomingMsg.id))
-                        return prev;
-                    return [...prev, msgModel];
-                });
-                setIsTyping(false); // Stop typing on message receive
-            }
-        });
-        const offTyping = on('typing', (data) => {
-            // console.log('[ChatContainer] Incoming typing event:', data);
-            // If we are recipient (data.chatId is US) and the sender IS the one we are currently viewing
-            const isChattingWithSender = data.username === activeContactId && data.chatId === user?.username;
-            // Special case for system bot
-            const isBotTyping = data.username === 'system' && data.chatId === user?.username;
-            if (isChattingWithSender || isBotTyping) {
-                setIsTyping(data.isTyping);
-            }
-        });
-        return () => {
-            offMsg();
-            offTyping();
-        };
-    }, [on, activeContactId, user?.username]);
-    const handleSelectContact = (id) => {
-        // Check if the contact is already in our list
-        let contact = localContacts.find((c) => c.id === id);
-        // If NOT in our list (clicked from "New Contacts" search), we must create it!
-        if (!contact) {
-            const newUser = userList.find((u) => u.username === id);
-            if (newUser) {
-                contact = new Chat({
-                    id: newUser.username,
-                    name: newUser.displayName,
-                    avatar: newUser.avatar,
-                    updatedAt: Date.now(),
-                    messages: [],
-                    isOnline: true, // Mock online status for now
-                    unreadCount: 0
-                });
-                const updatedContacts = [contact, ...localContacts];
-                setLocalContacts(updatedContacts);
-                // Persist to session so it stays in the list!
-                if (session) {
-                    const updatedChatList = [contact, ...(session.chatList || [])];
-                    updateSession(new Session({ ...session, chatList: updatedChatList }));
-                }
-            }
-        }
-        setActiveContactId(id);
-        setLocalMessages(contact?.messages || []);
-        setIsTyping(false);
-        // Clear unread on select (if it was an existing contact)
-        if (contact && contact.unreadCount > 0) {
-            setLocalContacts(prev => prev.map(c => c.id === id ? { ...c, unreadCount: 0 } : c));
-        }
-    };
-    const handleSendMessage = (text) => {
-        if (!text.trim() || !activeContactId)
-            return;
-        const messageData = {
-            id: Date.now().toString(),
-            chatId: activeContactId,
-            sender: {
-                username: user?.username,
-                displayName: user?.displayName,
-                avatar: user?.avatar
-            },
-            content: text,
-            timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
-        };
-        // Update local state immediately for instant feedback
-        const newMessage = new ChatMessageModel({
-            id: messageData.id,
-            sender: user || undefined,
-            content: text,
-            timestamp: messageData.timestamp,
-            isSystem: false
-        });
-        setLocalMessages(prev => [...prev, newMessage]);
-        setLocalContacts(prev => prev.map(c => {
-            if (c.id === activeContactId) {
-                return new Chat({
-                    ...c,
-                    lastMessage: newMessage,
-                    time: newMessage.timestamp,
-                    updatedAt: Date.now(),
-                    messages: [...(c.messages || []), newMessage]
-                });
-            }
-            return c;
-        }));
-        // Emit via socket for others
-        emit('message', messageData);
-    };
-    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 activeContact = activeContactId ? localContacts.find((c) => c.id === activeContactId) : null;
-    return (_jsxs("div", { className: "flex h-full w-full bg-armoyu-header-bg overflow-hidden relative z-10", children: [!activeContactId && (_jsx("div", { className: "w-full h-full flex flex-col animate-in fade-in slide-in-from-left-4 duration-300", children: _jsx(ChatList, { contacts: localContacts, activeId: '', 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: "" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h3", { className: "font-bold text-armoyu-text truncate text-base", children: activeContact.name }), _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", { className: "p-2 text-armoyu-text-muted hover:text-blue-500 rounded-full hover:bg-blue-500/10 transition-colors", title: "Ara", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" }) }) }), _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: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] })] }), _jsxs("div", { className: "flex-1 overflow-y-auto p-4 md:p-6 space-y-2 relative hide-scrollbar", children: [_jsx("div", { className: "text-center mb-8", children: _jsx("span", { className: "inline-block bg-black/5 dark:bg-white/5 text-armoyu-text-muted text-xs font-bold px-3 py-1 rounded-full border border-black/5 dark:border-white/5", children: "Bug\u00FCn" }) }), localMessages.map(msg => (_jsx(ChatMessage, { id: msg.id, sender: {
-                                    name: msg.sender?.displayName || 'Bilinmiyor',
-                                    avatar: msg.sender?.avatar || '',
-                                    isSelf: msg.sender?.username === user?.username
-                                }, content: msg.content, timestamp: msg.timestamp }, msg.id))), isTyping && (_jsx("div", { className: "flex gap-2 items-center px-4 animate-in fade-in slide-in-from-bottom-2 duration-300", children: _jsxs("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-blue-500 animate-bounce [animation-delay:-0.3s]" }), _jsx("span", { className: "w-1 h-1 rounded-full bg-blue-500 animate-bounce [animation-delay:-0.15s]" }), _jsx("span", { className: "w-1 h-1 rounded-full bg-blue-500 animate-bounce" })] }), _jsx("span", { className: "text-[10px] font-bold text-armoyu-text-muted italic ml-1", children: "Yaz\u0131yor..." })] }) })), _jsx("div", { ref: messagesEndRef, className: "h-2" })] }), _jsx(ChatInput, { onSend: handleSendMessage, chatId: activeContactId })] }))] }));
-}
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect } from 'react';
+import { useAuth } from '../../../context/AuthContext';
+import { ChatList } from './ChatList';
+import { Chat, User, Session, ChatMessage as ChatMessageModel } from '@armoyu/core';
+import { ChatMessage } from './ChatMessage';
+import { ChatInput } from './ChatInput';
+import { useChat } from '../../../context/ChatContext';
+import { useSocket } from '../../../context/SocketContext';
+// Mock Data
+import { userList } from '../../../lib/constants/seedData';
+export function ChatContainer() {
+    const { user, session, updateSession } = useAuth();
+    const { closeChat } = useChat();
+    const { emit, on, isConnected } = useSocket();
+    // Eğer null ise liste görünümü açık, ID var ise mesajlaşma açık.
+    const [activeContactId, setActiveContactId] = useState(null);
+    const [localMessages, setLocalMessages] = useState([]);
+    const [localContacts, setLocalContacts] = useState([]);
+    const [isTyping, setIsTyping] = useState(false);
+    const messagesEndRef = React.useRef(null);
+    const scrollToBottom = () => {
+        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    };
+    // Scroll to bottom when messages or typing status changes
+    useEffect(() => {
+        scrollToBottom();
+    }, [localMessages, isTyping]);
+    // Sync with session's chatList (chatList lives on Session, not User)
+    useEffect(() => {
+        if (session?.chatList) {
+            setLocalContacts(session.chatList);
+        }
+    }, [session?.chatList]);
+    // Socket Connection for Real-time Messages & Typing
+    useEffect(() => {
+        const offMsg = on('message', (incomingMsg) => {
+            console.log('[ChatContainer] Incoming socket message:', incomingMsg);
+            const msgModel = new ChatMessageModel({
+                id: incomingMsg.id,
+                sender: incomingMsg.sender ? new User(incomingMsg.sender) : undefined,
+                content: incomingMsg.content,
+                timestamp: incomingMsg.timestamp,
+                isSystem: incomingMsg.isSystem || false
+            });
+            // Update contacts list
+            setLocalContacts(prev => {
+                const contactId = incomingMsg.chatId || incomingMsg.sender?.username;
+                const contactExists = prev.some(c => c.id === contactId);
+                if (!contactExists && incomingMsg.sender?.username !== user?.username) {
+                    // CREATE NEW CHAT: If sender isn't in our list, create the chat box for them!
+                    const newChat = new Chat({
+                        id: contactId,
+                        name: incomingMsg.sender?.displayName || incomingMsg.sender?.username || 'Bilinmeyen',
+                        avatar: incomingMsg.sender?.avatar || '',
+                        lastMessage: msgModel,
+                        time: msgModel.timestamp,
+                        updatedAt: Date.now(),
+                        messages: [msgModel],
+                        unreadCount: (activeContactId !== contactId) ? 1 : 0,
+                        isOnline: true // Assume online since they just sent a message
+                    });
+                    // PERSIST to Session!
+                    if (session) {
+                        const updatedChatList = [newChat, ...(session.chatList || [])];
+                        updateSession(new Session({ ...session, chatList: updatedChatList }));
+                    }
+                    return [newChat, ...prev];
+                }
+                // UPDATE EXISTING CHAT
+                return prev.map(c => {
+                    if (c.id === contactId) {
+                        // Only add if not already in messages to avoid duplicates from echo
+                        const messageExists = c.messages.some(m => m.id === msgModel.id);
+                        const updatedChat = new Chat({
+                            ...c,
+                            lastMessage: msgModel,
+                            time: msgModel.timestamp,
+                            updatedAt: Date.now(),
+                            messages: messageExists ? c.messages : [...(c.messages || []), msgModel],
+                            unreadCount: (activeContactId !== c.id && incomingMsg.sender?.username !== user?.username) ? c.unreadCount + 1 : c.unreadCount
+                        });
+                        // Note: We don't necessarily need to update the whole session on every message to avoid excessive renders,
+                        // as local state handles the UI. But for NEW chats, we must.
+                        return updatedChat;
+                    }
+                    return c;
+                });
+            });
+            // If this is the active chat, update visible messages
+            if (activeContactId === incomingMsg.chatId || activeContactId === incomingMsg.sender?.username) {
+                setLocalMessages(prev => {
+                    if (prev.some(m => m.id === incomingMsg.id))
+                        return prev;
+                    return [...prev, msgModel];
+                });
+                setIsTyping(false); // Stop typing on message receive
+            }
+        });
+        const offTyping = on('typing', (data) => {
+            // console.log('[ChatContainer] Incoming typing event:', data);
+            // If we are recipient (data.chatId is US) and the sender IS the one we are currently viewing
+            const isChattingWithSender = data.username === activeContactId && data.chatId === user?.username;
+            // Special case for system bot
+            const isBotTyping = data.username === 'system' && data.chatId === user?.username;
+            if (isChattingWithSender || isBotTyping) {
+                setIsTyping(data.isTyping);
+            }
+        });
+        return () => {
+            offMsg();
+            offTyping();
+        };
+    }, [on, activeContactId, user?.username]);
+    const handleSelectContact = (id) => {
+        // Check if the contact is already in our list
+        let contact = localContacts.find((c) => c.id === id);
+        // If NOT in our list (clicked from "New Contacts" search), we must create it!
+        if (!contact) {
+            const newUser = userList.find((u) => u.username === id);
+            if (newUser) {
+                contact = new Chat({
+                    id: newUser.username,
+                    name: newUser.displayName,
+                    avatar: newUser.avatar,
+                    updatedAt: Date.now(),
+                    messages: [],
+                    isOnline: true, // Mock online status for now
+                    unreadCount: 0
+                });
+                const updatedContacts = [contact, ...localContacts];
+                setLocalContacts(updatedContacts);
+                // Persist to session so it stays in the list!
+                if (session) {
+                    const updatedChatList = [contact, ...(session.chatList || [])];
+                    updateSession(new Session({ ...session, chatList: updatedChatList }));
+                }
+            }
+        }
+        setActiveContactId(id);
+        setLocalMessages(contact?.messages || []);
+        setIsTyping(false);
+        // Clear unread on select (if it was an existing contact)
+        if (contact && contact.unreadCount > 0) {
+            setLocalContacts(prev => prev.map(c => c.id === id ? { ...c, unreadCount: 0 } : c));
+        }
+    };
+    const handleSendMessage = (text) => {
+        if (!text.trim() || !activeContactId)
+            return;
+        const messageData = {
+            id: Date.now().toString(),
+            chatId: activeContactId,
+            sender: {
+                username: user?.username,
+                displayName: user?.displayName,
+                avatar: user?.avatar
+            },
+            content: text,
+            timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+        };
+        // Update local state immediately for instant feedback
+        const newMessage = new ChatMessageModel({
+            id: messageData.id,
+            sender: user || undefined,
+            content: text,
+            timestamp: messageData.timestamp,
+            isSystem: false
+        });
+        setLocalMessages(prev => [...prev, newMessage]);
+        setLocalContacts(prev => prev.map(c => {
+            if (c.id === activeContactId) {
+                return new Chat({
+                    ...c,
+                    lastMessage: newMessage,
+                    time: newMessage.timestamp,
+                    updatedAt: Date.now(),
+                    messages: [...(c.messages || []), newMessage]
+                });
+            }
+            return c;
+        }));
+        // Emit via socket for others
+        emit('message', messageData);
+    };
+    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 activeContact = activeContactId ? localContacts.find((c) => c.id === activeContactId) : null;
+    return (_jsxs("div", { className: "flex h-full w-full bg-armoyu-header-bg overflow-hidden relative z-10", children: [!activeContactId && (_jsx("div", { className: "w-full h-full flex flex-col animate-in fade-in slide-in-from-left-4 duration-300", children: _jsx(ChatList, { contacts: localContacts, activeId: '', 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: "" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h3", { className: "font-bold text-armoyu-text truncate text-base", children: activeContact.name }), _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", { className: "p-2 text-armoyu-text-muted hover:text-blue-500 rounded-full hover:bg-blue-500/10 transition-colors", title: "Ara", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" }) }) }), _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: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] })] }), _jsxs("div", { className: "flex-1 overflow-y-auto p-4 md:p-6 space-y-2 relative hide-scrollbar", children: [_jsx("div", { className: "text-center mb-8", children: _jsx("span", { className: "inline-block bg-black/5 dark:bg-white/5 text-armoyu-text-muted text-xs font-bold px-3 py-1 rounded-full border border-black/5 dark:border-white/5", children: "Bug\u00FCn" }) }), localMessages.map(msg => (_jsx(ChatMessage, { id: msg.id, sender: {
+                                    name: msg.sender?.displayName || 'Bilinmiyor',
+                                    avatar: msg.sender?.avatar || '',
+                                    isSelf: msg.sender?.username === user?.username
+                                }, content: msg.content, timestamp: msg.timestamp }, msg.id))), isTyping && (_jsx("div", { className: "flex gap-2 items-center px-4 animate-in fade-in slide-in-from-bottom-2 duration-300", children: _jsxs("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-blue-500 animate-bounce [animation-delay:-0.3s]" }), _jsx("span", { className: "w-1 h-1 rounded-full bg-blue-500 animate-bounce [animation-delay:-0.15s]" }), _jsx("span", { className: "w-1 h-1 rounded-full bg-blue-500 animate-bounce" })] }), _jsx("span", { className: "text-[10px] font-bold text-armoyu-text-muted italic ml-1", children: "Yaz\u0131yor..." })] }) })), _jsx("div", { ref: messagesEndRef, className: "h-2" })] }), _jsx(ChatInput, { onSend: handleSendMessage, chatId: activeContactId })] }))] }));
+}
 //# sourceMappingURL=ChatContainer.js.map

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

@@ -1,5 +1,5 @@
-export declare function ChatInput({ onSend, chatId }: {
-    onSend: (text: string) => void;
-    chatId?: string;
-}): import("react/jsx-runtime").JSX.Element;
+export declare function ChatInput({ onSend, chatId }: {
+    onSend: (text: string) => void;
+    chatId?: string;
+}): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ChatInput.d.ts.map

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

@@ -1,31 +1,31 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Button } from '../../Button';
-import { useSocket } from '../../../context/SocketContext';
-export function ChatInput({ onSend, chatId }) {
-    const [text, setText] = useState('');
-    const { emit } = useSocket();
-    const handleSend = (e) => {
-        e.preventDefault();
-        if (text.trim()) {
-            onSend(text);
-            setText('');
-            if (chatId)
-                emit('typing', { chatId, isTyping: false });
-        }
-    };
-    const handleChange = (val) => {
-        setText(val);
-        if (chatId) {
-            const isTyping = val.length > 0;
-            // Include username to help receiver filter out self
-            emit('typing', {
-                chatId,
-                isTyping,
-                username: typeof window !== 'undefined' ? localStorage.getItem('armoyu_username') : undefined
-            });
-        }
-    };
-    return (_jsxs("form", { onSubmit: handleSend, className: "p-3 border-t border-gray-200 dark:border-white/5 flex items-center gap-3 bg-armoyu-card-bg", children: [_jsx("button", { type: "button", className: "text-gray-400 hover:text-blue-500 p-2 transition-colors shrink-0", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M8 14s1.5 2 4 2 4-2 4-2" }), _jsx("line", { x1: "9", y1: "9", x2: "9.01", y2: "9" }), _jsx("line", { x1: "15", y1: "9", x2: "15.01", y2: "9" })] }) }), _jsx("button", { type: "button", className: "text-gray-400 hover:text-blue-500 p-2 transition-colors hidden sm:block shrink-0", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" }) }) }), _jsx("input", { type: "text", value: text, onChange: (e) => handleChange(e.target.value), placeholder: "Bir mesaj yaz\u0131n...", className: "flex-1 min-w-0 bg-black/5 dark:bg-black/40 border border-black/10 dark:border-white/10 rounded-full px-4 py-2.5 text-sm text-armoyu-text placeholder-armoyu-text-muted focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all shadow-inner" }), _jsx(Button, { variant: "primary", className: "rounded-full w-10 h-10 p-0 flex items-center justify-center shadow-[0_0_15px_rgba(37,99,235,0.3)] shrink-0 group", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", className: "translate-x-0.5 group-hover:translate-x-1 group-hover:-translate-y-0.5 transition-transform", children: [_jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }), _jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })] }) })] }));
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from '../../Button';
+import { useSocket } from '../../../context/SocketContext';
+export function ChatInput({ onSend, chatId }) {
+    const [text, setText] = useState('');
+    const { emit } = useSocket();
+    const handleSend = (e) => {
+        e.preventDefault();
+        if (text.trim()) {
+            onSend(text);
+            setText('');
+            if (chatId)
+                emit('typing', { chatId, isTyping: false });
+        }
+    };
+    const handleChange = (val) => {
+        setText(val);
+        if (chatId) {
+            const isTyping = val.length > 0;
+            // Include username to help receiver filter out self
+            emit('typing', {
+                chatId,
+                isTyping,
+                username: typeof window !== 'undefined' ? localStorage.getItem('armoyu_username') : undefined
+            });
+        }
+    };
+    return (_jsxs("form", { onSubmit: handleSend, className: "p-3 border-t border-gray-200 dark:border-white/5 flex items-center gap-3 bg-armoyu-card-bg", children: [_jsx("button", { type: "button", className: "text-gray-400 hover:text-blue-500 p-2 transition-colors shrink-0", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M8 14s1.5 2 4 2 4-2 4-2" }), _jsx("line", { x1: "9", y1: "9", x2: "9.01", y2: "9" }), _jsx("line", { x1: "15", y1: "9", x2: "15.01", y2: "9" })] }) }), _jsx("button", { type: "button", className: "text-gray-400 hover:text-blue-500 p-2 transition-colors hidden sm:block shrink-0", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" }) }) }), _jsx("input", { type: "text", value: text, onChange: (e) => handleChange(e.target.value), placeholder: "Bir mesaj yaz\u0131n...", className: "flex-1 min-w-0 bg-black/5 dark:bg-black/40 border border-black/10 dark:border-white/10 rounded-full px-4 py-2.5 text-sm text-armoyu-text placeholder-armoyu-text-muted focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all shadow-inner" }), _jsx(Button, { variant: "primary", className: "rounded-full w-10 h-10 p-0 flex items-center justify-center shadow-[0_0_15px_rgba(37,99,235,0.3)] shrink-0 group", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", className: "translate-x-0.5 group-hover:translate-x-1 group-hover:-translate-y-0.5 transition-transform", children: [_jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }), _jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })] }) })] }));
+}
 //# sourceMappingURL=ChatInput.js.map

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

@@ -1,7 +1,7 @@
-import { Chat } from '@armoyu/core';
-export declare function ChatList({ contacts, activeId, onSelect }: {
-    contacts: Chat[];
-    activeId: string;
-    onSelect: (id: string) => void;
-}): import("react/jsx-runtime").JSX.Element;
+import { Chat } from '@armoyu/core';
+export declare function ChatList({ contacts, activeId, onSelect }: {
+    contacts: Chat[];
+    activeId: string;
+    onSelect: (id: string) => void;
+}): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ChatList.d.ts.map