indas-ui 0.0.1 → 0.1.0

package/dist/cjs/components/messaging/conversation-list.js

@@ -0,0 +1,109 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAvatarColor = getAvatarColor;
+exports.getInitials = getInitials;
+exports.formatRelativeTime = formatRelativeTime;
+exports.ConversationList = ConversationList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../lib/utils.js");
+const LanguageContext_1 = require("../../contexts/LanguageContext.js");
+const MessagingContext_1 = require("../../contexts/MessagingContext.js");
+const messaging_1 = require("../../lib/api/activity/messaging/messaging.js");
+// ── Avatar helpers (exported for reuse in other messaging components) ──────
+const AVATAR_COLORS = [
+    'bg-blue-600', 'bg-emerald-600', 'bg-violet-600', 'bg-amber-600',
+    'bg-rose-600', 'bg-cyan-600', 'bg-indigo-600', 'bg-teal-600',
+];
+function getAvatarColor(id) {
+    const str = String(id);
+    let hash = 0;
+    for (let i = 0; i < str.length; i++)
+        hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
+}
+function getInitials(name) {
+    return name.split(' ').map(w => w[0]).join('').toUpperCase().slice(0, 2);
+}
+function formatRelativeTime(dateStr) {
+    if (!dateStr)
+        return '';
+    // Backend stores UTC (GETUTCDATE) — append Z if no timezone indicator so JS parses as UTC
+    const normalized = dateStr.endsWith('Z') || dateStr.includes('+') || dateStr.includes('T') && dateStr.match(/[+-]\d{2}:\d{2}$/)
+        ? dateStr
+        : dateStr.replace(' ', 'T') + 'Z';
+    const date = new Date(normalized);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMin = Math.floor(diffMs / 60000);
+    const diffHr = Math.floor(diffMin / 60);
+    const diffDay = Math.floor(diffHr / 24);
+    if (diffMin < 1)
+        return 'now';
+    if (diffMin < 60)
+        return `${diffMin}m`;
+    if (diffHr < 24)
+        return `${diffHr}h`;
+    if (diffDay < 7)
+        return `${diffDay}d`;
+    return date.toLocaleDateString([], { day: 'numeric', month: 'short' });
+}
+const ConversationListItem = (0, react_1.memo)(function ConversationListItem({ room, isActive, unreadCount, isOnline, currentUserId, onClick }) {
+    const { t } = (0, LanguageContext_1.useLanguage)();
+    const displayName = (() => {
+        if (room.Type === 'DM') {
+            const participants = (0, messaging_1.parseParticipants)(room.Participants);
+            const other = participants.find(p => String(p.userId) !== currentUserId);
+            return other?.userName || room.Name || t('Direct Message');
+        }
+        return room.Name || t('Unnamed');
+    })();
+    const avatarId = room.Type === 'DM'
+        ? (() => {
+            const participants = (0, messaging_1.parseParticipants)(room.Participants);
+            const other = participants.find(p => String(p.userId) !== currentUserId);
+            return String(other?.userId || room.RoomID);
+        })()
+        : String(room.RoomID);
+    const typeIcon = room.Type === 'Channel' ? '#' : room.Type === 'Group' ? '' : null;
+    const participantCount = room.Type !== 'DM'
+        ? (0, messaging_1.parseParticipants)(room.Participants).length
+        : 0;
+    return ((0, jsx_runtime_1.jsxs)("button", { onClick: onClick, className: (0, utils_1.cn)('w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors text-left', 'hover:bg-[rgb(var(--bg-hover))]', isActive && 'bg-[rgb(var(--bg-surface-active))]'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative flex-shrink-0", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-medium', getAvatarColor(avatarId)), children: typeIcon ? ((0, jsx_runtime_1.jsx)("span", { className: "text-lg font-bold", children: typeIcon })) : (getInitials(displayName)) }), room.Type === 'DM' && isOnline && ((0, jsx_runtime_1.jsx)("span", { className: "absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-[rgb(var(--bg-surface))]" }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('text-sm truncate', unreadCount > 0 ? 'font-semibold text-[rgb(var(--fg-default))]' : 'font-medium text-[rgb(var(--fg-default))]'), children: displayName }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-[rgb(var(--fg-muted))] flex-shrink-0", children: formatRelativeTime(room.LastMessageAt) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between gap-2 mt-0.5", children: [(0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('text-xs truncate', unreadCount > 0 ? 'text-[rgb(var(--fg-default))]' : 'text-[rgb(var(--fg-muted))]'), children: room.LastMessagePreview || (participantCount > 0 ? `${participantCount} ${t('members')}` : t('No messages yet')) }), unreadCount > 0 && ((0, jsx_runtime_1.jsx)("span", { className: "flex-shrink-0 min-w-[1.25rem] h-5 px-1.5 rounded-full bg-[rgb(var(--color-primary))] text-white text-xs font-medium flex items-center justify-center", children: unreadCount > 99 ? '99+' : unreadCount }))] })] })] }));
+});
+function ConversationList({ currentUserId, onSelectRoom, onNewConversation, activeRoomId, className }) {
+    const { t } = (0, LanguageContext_1.useLanguage)();
+    const { state, actions } = (0, MessagingContext_1.useMessaging)();
+    const [filter, setFilter] = (0, react_1.useState)('All');
+    const [searchText, setSearchText] = (0, react_1.useState)('');
+    const filteredConversations = (0, react_1.useMemo)(() => {
+        let list = state.conversations;
+        if (filter !== 'All') {
+            list = list.filter(c => c.Type === filter);
+        }
+        if (searchText.trim()) {
+            const q = searchText.toLowerCase();
+            list = list.filter(c => c.Name?.toLowerCase().includes(q) ||
+                c.LastMessagePreview?.toLowerCase().includes(q));
+        }
+        return [...list].sort((a, b) => {
+            const aTime = a.LastMessageAt ? new Date(a.LastMessageAt).getTime() : 0;
+            const bTime = b.LastMessageAt ? new Date(b.LastMessageAt).getTime() : 0;
+            return bTime - aTime;
+        });
+    }, [state.conversations, filter, searchText]);
+    const tabs = [
+        { key: 'All', icon: lucide_react_1.MessageSquare, label: t('All') },
+        { key: 'DM', icon: lucide_react_1.MessageSquare, label: t('DMs') },
+        { key: 'Group', icon: lucide_react_1.Users, label: t('Groups') },
+        { key: 'Channel', icon: lucide_react_1.Hash, label: t('Channels') },
+    ];
+    const handleSelectRoom = (0, react_1.useCallback)((room) => {
+        onSelectRoom(room);
+    }, [onSelectRoom]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('flex flex-col h-full', className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-shrink-0 px-3 pt-3 pb-2 space-y-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-lg font-semibold text-[rgb(var(--fg-default))]", children: t('Messages') }), (0, jsx_runtime_1.jsx)("button", { onClick: onNewConversation, className: "w-8 h-8 rounded-lg flex items-center justify-center hover:bg-[rgb(var(--bg-hover))] text-[rgb(var(--fg-muted))] transition-colors", title: t('New conversation'), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { className: "w-5 h-5" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-[rgb(var(--fg-muted))]" }), (0, jsx_runtime_1.jsx)("input", { type: "text", value: searchText, onChange: e => setSearchText(e.target.value), placeholder: t('Search conversations...'), className: "w-full h-8 pl-8 pr-8 rounded-lg bg-[rgb(var(--bg-subtle))] text-sm text-[rgb(var(--fg-default))] placeholder:text-[rgb(var(--fg-muted))] border border-[rgb(var(--bd-default))] focus:outline-none focus:ring-1 focus:ring-[rgb(var(--color-primary))]" }), searchText && ((0, jsx_runtime_1.jsx)("button", { onClick: () => setSearchText(''), className: "absolute right-2 top-1/2 -translate-y-1/2 text-[rgb(var(--fg-muted))]", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "w-3.5 h-3.5" }) }))] }), (0, jsx_runtime_1.jsx)("div", { className: "flex gap-1", children: tabs.map(tab => ((0, jsx_runtime_1.jsx)("button", { onClick: () => setFilter(tab.key), className: (0, utils_1.cn)('flex-1 py-1 px-2 rounded-md text-xs font-medium transition-colors', filter === tab.key
+                                ? 'bg-[rgb(var(--color-primary))] text-white'
+                                : 'text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-hover))]'), children: tab.label }, tab.key))) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-y-auto px-1.5 py-1", children: state.loadingConversations ? ((0, jsx_runtime_1.jsx)("div", { className: "space-y-2 px-2", children: [1, 2, 3, 4, 5].map(i => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 py-2.5 animate-pulse", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-10 h-10 rounded-full bg-[rgb(var(--bg-subtle))]" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 space-y-1.5", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-3.5 w-24 rounded bg-[rgb(var(--bg-subtle))]" }), (0, jsx_runtime_1.jsx)("div", { className: "h-3 w-40 rounded bg-[rgb(var(--bg-subtle))]" })] })] }, i))) })) : filteredConversations.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center justify-center py-12 text-[rgb(var(--fg-muted))]", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.MessageSquare, { className: "w-10 h-10 mb-2 opacity-40" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm", children: searchText ? t('No conversations found') : t('No conversations yet') }), !searchText && ((0, jsx_runtime_1.jsx)("button", { onClick: onNewConversation, className: "mt-2 text-xs text-[rgb(var(--color-primary))] hover:underline", children: t('Start a conversation') }))] })) : (filteredConversations.map(room => ((0, jsx_runtime_1.jsx)(ConversationListItem, { room: room, isActive: activeRoomId === room.RoomID, unreadCount: state.unreadCounts[room.RoomID] || 0, isOnline: room.Type === 'DM' ? actions.isUserOnline(room.RoomID) : undefined, currentUserId: currentUserId, onClick: () => handleSelectRoom(room) }, room.RoomID)))) })] }));
+}

package/dist/cjs/components/messaging/create-conversation-modal.js

@@ -0,0 +1,112 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CreateConversationModal = CreateConversationModal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../lib/utils.js");
+const LanguageContext_1 = require("../../contexts/LanguageContext.js");
+const MessagingContext_1 = require("../../contexts/MessagingContext.js");
+const ui_1 = require("../ui/index.js");
+const conversation_list_1 = require("./conversation-list.js");
+function CreateConversationModal({ open, onClose, onCreated, currentUserId }) {
+    const { t } = (0, LanguageContext_1.useLanguage)();
+    const { state, actions } = (0, MessagingContext_1.useMessaging)();
+    const [type, setType] = (0, react_1.useState)('DM');
+    const [name, setName] = (0, react_1.useState)('');
+    const [description, setDescription] = (0, react_1.useState)('');
+    const [isPublic, setIsPublic] = (0, react_1.useState)(true);
+    const [searchText, setSearchText] = (0, react_1.useState)('');
+    const [selectedUsers, setSelectedUsers] = (0, react_1.useState)([]);
+    const [creating, setCreating] = (0, react_1.useState)(false);
+    // Fetch contacts on open
+    (0, react_1.useEffect)(() => {
+        if (open) {
+            actions.fetchContacts();
+            // Reset form
+            setType('DM');
+            setName('');
+            setDescription('');
+            setIsPublic(true);
+            setSearchText('');
+            setSelectedUsers([]);
+        }
+    }, [open, actions]);
+    const filteredContacts = (0, react_1.useMemo)(() => {
+        const q = searchText.toLowerCase();
+        return state.contacts
+            .filter(c => String(c.UserID) !== currentUserId)
+            .filter(c => !q ||
+            c.UserName.toLowerCase().includes(q) ||
+            c.Email?.toLowerCase().includes(q) ||
+            c.Designation?.toLowerCase().includes(q));
+    }, [state.contacts, searchText, currentUserId]);
+    const toggleUser = (0, react_1.useCallback)((contact) => {
+        setSelectedUsers(prev => {
+            const exists = prev.find(u => u.UserID === contact.UserID);
+            if (exists)
+                return prev.filter(u => u.UserID !== contact.UserID);
+            // For DM, only allow 1 user
+            if (type === 'DM')
+                return [contact];
+            return [...prev, contact];
+        });
+    }, [type]);
+    const handleCreate = (0, react_1.useCallback)(async () => {
+        if (selectedUsers.length === 0)
+            return;
+        setCreating(true);
+        try {
+            let room = null;
+            if (type === 'DM') {
+                const target = selectedUsers[0];
+                room = await actions.getOrCreateDM({
+                    TargetUserID: target.UserID,
+                    TargetUserName: target.UserName
+                });
+            }
+            else {
+                if (!name.trim())
+                    return;
+                const participantsJson = JSON.stringify(selectedUsers.map(u => ({
+                    userId: u.UserID,
+                    userName: u.UserName,
+                    role: 'Member',
+                    lastReadMessageId: null,
+                    lastReadAt: null,
+                    isMuted: false,
+                    joinedAt: new Date().toISOString()
+                })));
+                room = await actions.createRoom({
+                    Type: type,
+                    Name: name.trim(),
+                    Description: description.trim() || undefined,
+                    IsPublic: isPublic,
+                    ParticipantsJson: participantsJson
+                });
+            }
+            if (room) {
+                onCreated(room);
+                onClose();
+            }
+        }
+        finally {
+            setCreating(false);
+        }
+    }, [type, name, description, isPublic, selectedUsers, actions, onCreated, onClose]);
+    const typeOptions = [
+        { key: 'DM', icon: lucide_react_1.MessageSquare, label: t('Direct Message'), desc: t('1-on-1 conversation') },
+        { key: 'Group', icon: lucide_react_1.Users, label: t('Group'), desc: t('Private group chat') },
+        { key: 'Channel', icon: lucide_react_1.Hash, label: t('Channel'), desc: t('Public or private channel') },
+    ];
+    const canCreate = type === 'DM'
+        ? selectedUsers.length === 1
+        : selectedUsers.length > 0 && name.trim();
+    return ((0, jsx_runtime_1.jsx)(ui_1.Modal, { open: open, onOpenChange: onClose, children: (0, jsx_runtime_1.jsxs)(ui_1.ModalContent, { size: "md", hideCloseButton: true, disableOutsideClick: true, className: "p-0 flex flex-col overflow-hidden max-h-[85vh]", children: [(0, jsx_runtime_1.jsx)(ui_1.ModalHeader, { className: "px-5 py-4 border-b border-[rgb(var(--bd-default))]", children: (0, jsx_runtime_1.jsx)(ui_1.ModalTitle, { children: t('New Conversation') }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 overflow-y-auto p-5 space-y-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-3 gap-2", children: typeOptions.map(opt => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => { setType(opt.key); setSelectedUsers([]); }, className: (0, utils_1.cn)('flex flex-col items-center gap-1 p-3 rounded-lg border transition-colors', type === opt.key
+                                    ? 'border-[rgb(var(--color-primary))] bg-[rgb(var(--color-primary)/0.05)]'
+                                    : 'border-[rgb(var(--bd-default))] hover:bg-[rgb(var(--bg-hover))]'), children: [(0, jsx_runtime_1.jsx)(opt.icon, { className: (0, utils_1.cn)('w-5 h-5', type === opt.key ? 'text-[rgb(var(--color-primary))]' : 'text-[rgb(var(--fg-muted))]') }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium", children: opt.label })] }, opt.key))) }), type !== 'DM' && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "text-xs font-medium text-[rgb(var(--fg-muted))]", children: t('Name') }), (0, jsx_runtime_1.jsx)("input", { value: name, onChange: e => setName(e.target.value), placeholder: type === 'Group' ? t('Group name') : t('Channel name'), className: "w-full h-9 px-3 rounded-lg bg-[rgb(var(--bg-subtle))] text-sm text-[rgb(var(--fg-default))] border border-[rgb(var(--bd-default))] focus:outline-none focus:ring-1 focus:ring-[rgb(var(--color-primary))]" }), (0, jsx_runtime_1.jsx)("input", { value: description, onChange: e => setDescription(e.target.value), placeholder: t('Description (optional)'), className: "w-full h-9 px-3 rounded-lg bg-[rgb(var(--bg-subtle))] text-sm text-[rgb(var(--fg-default))] border border-[rgb(var(--bd-default))] focus:outline-none focus:ring-1 focus:ring-[rgb(var(--color-primary))]" }), type === 'Channel' && ((0, jsx_runtime_1.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: isPublic, onChange: e => setIsPublic(e.target.checked), className: "rounded" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-[rgb(var(--fg-default))]", children: t('Public channel') })] }))] })), selectedUsers.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap gap-1.5", children: selectedUsers.map(user => ((0, jsx_runtime_1.jsxs)("span", { className: "inline-flex items-center gap-1 px-2 py-1 rounded-full bg-[rgb(var(--color-primary)/0.1)] text-xs text-[rgb(var(--color-primary))]", children: [user.UserName, (0, jsx_runtime_1.jsx)("button", { onClick: () => toggleUser(user), className: "hover:opacity-70", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "w-3 h-3" }) })] }, user.UserID))) })), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "text-xs font-medium text-[rgb(var(--fg-muted))]", children: type === 'DM' ? t('Select person') : t('Add members') }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-[rgb(var(--fg-muted))]" }), (0, jsx_runtime_1.jsx)("input", { value: searchText, onChange: e => setSearchText(e.target.value), placeholder: t('Search by name or email...'), autoComplete: "off", "data-1p-ignore": true, "data-lpignore": "true", className: "w-full h-9 pl-8 pr-3 rounded-lg bg-[rgb(var(--bg-subtle))] text-sm text-[rgb(var(--fg-default))] border border-[rgb(var(--bd-default))] focus:outline-none focus:ring-1 focus:ring-[rgb(var(--color-primary))]" })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "max-h-48 overflow-y-auto rounded-lg border border-[rgb(var(--bd-default))]", children: filteredContacts.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "p-4 text-center text-sm text-[rgb(var(--fg-muted))]", children: t('No contacts found') })) : (filteredContacts.map(contact => {
+                                const isSelected = selectedUsers.some(u => u.UserID === contact.UserID);
+                                return ((0, jsx_runtime_1.jsxs)("button", { onClick: () => toggleUser(contact), className: (0, utils_1.cn)('w-full flex items-center gap-3 px-3 py-2 hover:bg-[rgb(var(--bg-hover))] transition-colors', isSelected && 'bg-[rgb(var(--color-primary)/0.05)]'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-medium flex-shrink-0', (0, conversation_list_1.getAvatarColor)(contact.UserID)), children: (0, conversation_list_1.getInitials)(contact.UserName) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0 text-left", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-[rgb(var(--fg-default))] truncate", children: contact.UserName }), contact.Designation && ((0, jsx_runtime_1.jsx)("p", { className: "text-xs text-[rgb(var(--fg-muted))] truncate", children: contact.Designation }))] }), isSelected && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "w-4 h-4 text-[rgb(var(--color-primary))] flex-shrink-0" }))] }, contact.UserID));
+                            })) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-end gap-2 px-5 py-3 border-t border-[rgb(var(--bd-default))]", children: [(0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: "px-4 h-9 rounded-lg text-sm font-medium text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-hover))] transition-colors", children: t('Cancel') }), (0, jsx_runtime_1.jsx)("button", { onClick: handleCreate, disabled: !canCreate || creating, className: "px-4 h-9 rounded-lg text-sm font-medium bg-[rgb(var(--color-primary))] text-white hover:opacity-90 disabled:opacity-50 transition-colors", children: creating ? t('Creating...') : type === 'DM' ? t('Start Chat') : t('Create') })] })] }) }));
+}

package/dist/cjs/components/messaging/message-bubble.js

@@ -0,0 +1,69 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageBubble = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../lib/utils.js");
+const LanguageContext_1 = require("../../contexts/LanguageContext.js");
+const messaging_1 = require("../../lib/api/activity/messaging/messaging.js");
+const conversation_list_1 = require("./conversation-list.js");
+// ── Curated reaction emojis ───────────────────────────────────────────────
+const QUICK_REACTIONS = ['👍', '❤️', '😂', '😮', '😢', '🔥', '👏', '💯'];
+exports.MessageBubble = (0, react_1.memo)(function MessageBubble({ message, isOwn, senderName, showSender, onReply, onReact, onEdit, onDelete, onThreadClick, currentUserId }) {
+    const { t } = (0, LanguageContext_1.useLanguage)();
+    const [showActions, setShowActions] = (0, react_1.useState)(false);
+    const [showReactionPicker, setShowReactionPicker] = (0, react_1.useState)(false);
+    const [isEditing, setIsEditing] = (0, react_1.useState)(false);
+    const [editContent, setEditContent] = (0, react_1.useState)(message.Content || '');
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const reactions = (0, messaging_1.parseReactions)(message.Reactions);
+    const attachments = (0, messaging_1.parseAttachments)(message.Attachments);
+    const handleCopy = (0, react_1.useCallback)(() => {
+        if (message.Content) {
+            navigator.clipboard.writeText(message.Content);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+    }, [message.Content]);
+    const handleEditSubmit = (0, react_1.useCallback)(() => {
+        if (editContent.trim() && editContent !== message.Content) {
+            onEdit(message.MessageID, editContent.trim());
+        }
+        setIsEditing(false);
+    }, [editContent, message.Content, message.MessageID, onEdit]);
+    if (message.IsDeleted) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('flex gap-2 px-4 py-1', isOwn ? 'justify-end' : 'justify-start'), children: (0, jsx_runtime_1.jsx)("div", { className: "px-3 py-1.5 rounded-lg bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-muted))] text-sm italic", children: t('This message was deleted') }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('group flex gap-2 px-4', showSender ? 'pt-2' : 'pt-0.5', isOwn ? 'justify-end' : 'justify-start'), onMouseEnter: () => setShowActions(true), onMouseLeave: () => { setShowActions(false); setShowReactionPicker(false); }, children: [!isOwn && ((0, jsx_runtime_1.jsx)("div", { className: "w-8 flex-shrink-0", children: showSender && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-medium', (0, conversation_list_1.getAvatarColor)(message.UserID)), children: (0, conversation_list_1.getInitials)(senderName) })) })), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('max-w-[70%] min-w-[4rem]', isOwn ? 'items-end' : 'items-start'), children: [showSender && !isOwn && ((0, jsx_runtime_1.jsx)("p", { className: "text-xs font-medium text-[rgb(var(--fg-muted))] mb-0.5 ml-1", children: senderName })), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [showActions && !isEditing && ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('absolute -top-7 flex items-center gap-0.5 bg-[rgb(var(--bg-surface))] border border-[rgb(var(--bd-default))] rounded-lg shadow-sm px-1 py-0.5 z-10', isOwn ? 'right-0' : 'left-0'), children: [(0, jsx_runtime_1.jsx)(ActionBtn, { icon: lucide_react_1.Smile, title: t('React'), onClick: () => setShowReactionPicker(!showReactionPicker) }), (0, jsx_runtime_1.jsx)(ActionBtn, { icon: lucide_react_1.Reply, title: t('Reply'), onClick: () => onReply(message) }), (0, jsx_runtime_1.jsx)(ActionBtn, { icon: lucide_react_1.Copy, title: copied ? t('Copied') : t('Copy'), onClick: handleCopy }), isOwn && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ActionBtn, { icon: lucide_react_1.Pencil, title: t('Edit'), onClick: () => { setIsEditing(true); setEditContent(message.Content || ''); } }), (0, jsx_runtime_1.jsx)(ActionBtn, { icon: lucide_react_1.Trash2, title: t('Delete'), onClick: () => onDelete(message.MessageID) })] }))] })), showReactionPicker && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('absolute -top-14 flex items-center gap-0.5 bg-[rgb(var(--bg-surface))] border border-[rgb(var(--bd-default))] rounded-xl shadow-lg px-2 py-1.5 z-20', isOwn ? 'right-0' : 'left-0'), children: QUICK_REACTIONS.map(emoji => ((0, jsx_runtime_1.jsx)("button", { onClick: () => { onReact(message.MessageID, emoji); setShowReactionPicker(false); }, className: "w-7 h-7 flex items-center justify-center rounded-md hover:bg-[rgb(var(--bg-hover))] text-base transition-transform hover:scale-125", children: emoji }, emoji))) })), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('rounded-2xl px-3 py-2 text-sm', isOwn
+                                    ? 'bg-[rgb(var(--color-primary))] text-white rounded-br-md'
+                                    : 'bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-default))] rounded-bl-md'), children: isEditing ? ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-1.5", children: [(0, jsx_runtime_1.jsx)("textarea", { value: editContent, onChange: e => setEditContent(e.target.value), className: "w-full min-h-[2rem] bg-transparent text-sm resize-none focus:outline-none", autoFocus: true, onKeyDown: e => {
+                                                if (e.key === 'Enter' && !e.shiftKey) {
+                                                    e.preventDefault();
+                                                    handleEditSubmit();
+                                                }
+                                                if (e.key === 'Escape')
+                                                    setIsEditing(false);
+                                            } }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-1 justify-end", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => setIsEditing(false), className: "text-xs opacity-70 hover:opacity-100 px-2 py-0.5", children: t('Cancel') }), (0, jsx_runtime_1.jsx)("button", { onClick: handleEditSubmit, className: "text-xs font-medium opacity-70 hover:opacity-100 px-2 py-0.5", children: t('Save') })] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [attachments.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "space-y-1 mb-1", children: attachments.map((att, i) => ((0, jsx_runtime_1.jsx)(AttachmentPreview, { attachment: att, isOwn: isOwn }, i))) })), message.Content && ((0, jsx_runtime_1.jsxs)("p", { className: "whitespace-pre-wrap break-words", children: [message.Content, (0, jsx_runtime_1.jsxs)("span", { className: "inline-flex items-center gap-1 ml-2 align-bottom translate-y-[1px]", children: [message.IsEdited && ((0, jsx_runtime_1.jsx)("span", { className: "text-[0.625rem] opacity-60 italic", children: t('edited') })), (0, jsx_runtime_1.jsx)("span", { className: "text-[0.625rem] opacity-50 whitespace-nowrap", children: (0, conversation_list_1.formatRelativeTime)(message.CreatedAt) })] })] })), !message.Content && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('flex items-center gap-1 mt-0.5', isOwn ? 'justify-end' : 'justify-start'), children: (0, jsx_runtime_1.jsx)("span", { className: "text-[0.625rem] opacity-50", children: (0, conversation_list_1.formatRelativeTime)(message.CreatedAt) }) }))] })) })] }), reactions.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap gap-1 mt-1 ml-1", children: reactions.map(reaction => ((0, jsx_runtime_1.jsx)(ReactionBadge, { reaction: reaction, currentUserId: currentUserId, onToggle: () => onReact(message.MessageID, reaction.emoji) }, reaction.emoji))) })), message.ReplyCount > 0 && onThreadClick && ((0, jsx_runtime_1.jsxs)("button", { onClick: () => onThreadClick(message.MessageID), className: "flex items-center gap-1 mt-1 ml-1 text-xs text-[rgb(var(--color-primary))] hover:underline", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Reply, { className: "w-3 h-3" }), message.ReplyCount, " ", message.ReplyCount === 1 ? t('reply') : t('replies')] }))] })] }));
+});
+// ── Sub-components ────────────────────────────────────────────────────────
+function ActionBtn({ icon: Icon, title, onClick }) {
+    return ((0, jsx_runtime_1.jsx)("button", { onClick: onClick, title: title, className: "w-6 h-6 flex items-center justify-center rounded hover:bg-[rgb(var(--bg-hover))] text-[rgb(var(--fg-muted))]", children: (0, jsx_runtime_1.jsx)(Icon, { className: "w-3.5 h-3.5" }) }));
+}
+function ReactionBadge({ reaction, currentUserId, onToggle }) {
+    const isReacted = reaction.userIds.includes(currentUserId);
+    return ((0, jsx_runtime_1.jsxs)("button", { onClick: onToggle, className: (0, utils_1.cn)('inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-xs border transition-colors', isReacted
+            ? 'bg-[rgb(var(--color-primary)/0.1)] border-[rgb(var(--color-primary)/0.3)] text-[rgb(var(--color-primary))]'
+            : 'bg-[rgb(var(--bg-subtle))] border-[rgb(var(--bd-default))] text-[rgb(var(--fg-muted))]'), children: [(0, jsx_runtime_1.jsx)("span", { children: reaction.emoji }), (0, jsx_runtime_1.jsx)("span", { children: reaction.userIds.length })] }));
+}
+function AttachmentPreview({ attachment, isOwn }) {
+    const isImage = attachment.mimeType.startsWith('image/');
+    if (isImage) {
+        return ((0, jsx_runtime_1.jsx)("a", { href: attachment.fileUrl, target: "_blank", rel: "noopener noreferrer", className: "block", children: (0, jsx_runtime_1.jsx)("img", { src: attachment.fileUrl, alt: attachment.fileName, className: "max-w-[15rem] max-h-[12rem] rounded-lg object-cover" }) }));
+    }
+    const sizeStr = attachment.fileSize < 1024 * 1024
+        ? `${(attachment.fileSize / 1024).toFixed(0)} KB`
+        : `${(attachment.fileSize / (1024 * 1024)).toFixed(1)} MB`;
+    return ((0, jsx_runtime_1.jsxs)("a", { href: attachment.fileUrl, target: "_blank", rel: "noopener noreferrer", className: (0, utils_1.cn)('flex items-center gap-2 px-2.5 py-1.5 rounded-lg border', isOwn ? 'border-white/20 hover:bg-white/10' : 'border-[rgb(var(--bd-default))] hover:bg-[rgb(var(--bg-hover))]'), children: [(0, jsx_runtime_1.jsx)("div", { className: "w-8 h-8 rounded bg-[rgb(var(--bg-subtle))] flex items-center justify-center text-xs font-bold text-[rgb(var(--fg-muted))]", children: attachment.fileName.split('.').pop()?.toUpperCase().slice(0, 3) }), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-xs font-medium truncate", children: attachment.fileName }), (0, jsx_runtime_1.jsx)("p", { className: (0, utils_1.cn)('text-[0.625rem]', isOwn ? 'opacity-60' : 'text-[rgb(var(--fg-muted))]'), children: sizeStr })] })] }));
+}

package/dist/cjs/components/messaging/message-input.js

@@ -0,0 +1,154 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageInput = MessageInput;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../lib/utils.js");
+const LanguageContext_1 = require("../../contexts/LanguageContext.js");
+function MessageInput({ onSend, onUploadFile, onTyping, replyTo, onCancelReply, disabled, placeholder }) {
+    const { t } = (0, LanguageContext_1.useLanguage)();
+    const [text, setText] = (0, react_1.useState)('');
+    const [pendingFiles, setPendingFiles] = (0, react_1.useState)([]);
+    const [uploading, setUploading] = (0, react_1.useState)(false);
+    const [isListening, setIsListening] = (0, react_1.useState)(false);
+    const [speechSupported, setSpeechSupported] = (0, react_1.useState)(false);
+    const textareaRef = (0, react_1.useRef)(null);
+    const fileInputRef = (0, react_1.useRef)(null);
+    const typingTimeoutRef = (0, react_1.useRef)(null);
+    const recognitionRef = (0, react_1.useRef)(null);
+    // Voice input support check
+    (0, react_1.useEffect)(() => {
+        setSpeechSupported(typeof window !== 'undefined' &&
+            !!(window.SpeechRecognition || window.webkitSpeechRecognition));
+    }, []);
+    const handleVoiceInput = (0, react_1.useCallback)(() => {
+        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+        if (!SpeechRecognition)
+            return;
+        if (isListening) {
+            recognitionRef.current?.stop();
+            setIsListening(false);
+            return;
+        }
+        const recognition = new SpeechRecognition();
+        recognition.continuous = false;
+        recognition.interimResults = false;
+        recognition.lang = 'en-IN';
+        recognition.onresult = (event) => {
+            const transcript = event.results[0]?.[0]?.transcript;
+            if (transcript) {
+                setText(prev => prev + (prev ? ' ' : '') + transcript.trim());
+            }
+            setIsListening(false);
+            recognitionRef.current = null;
+        };
+        recognition.onerror = () => {
+            setIsListening(false);
+            recognitionRef.current = null;
+        };
+        recognition.onend = () => {
+            setIsListening(false);
+            recognitionRef.current = null;
+        };
+        recognitionRef.current = recognition;
+        try {
+            recognition.start();
+            setIsListening(true);
+        }
+        catch {
+            setIsListening(false);
+            recognitionRef.current = null;
+        }
+    }, [isListening]);
+    // Cleanup on unmount
+    (0, react_1.useEffect)(() => {
+        return () => { recognitionRef.current?.abort(); };
+    }, []);
+    // Auto-resize textarea
+    (0, react_1.useEffect)(() => {
+        const el = textareaRef.current;
+        if (!el)
+            return;
+        el.style.height = 'auto';
+        el.style.height = Math.min(el.scrollHeight, 120) + 'px';
+    }, [text]);
+    // Focus on reply
+    (0, react_1.useEffect)(() => {
+        if (replyTo)
+            textareaRef.current?.focus();
+    }, [replyTo]);
+    const handleTyping = (0, react_1.useCallback)(() => {
+        if (!onTyping)
+            return;
+        onTyping(true);
+        if (typingTimeoutRef.current)
+            clearTimeout(typingTimeoutRef.current);
+        typingTimeoutRef.current = setTimeout(() => onTyping(false), 3000);
+    }, [onTyping]);
+    const handleSubmit = (0, react_1.useCallback)(async () => {
+        const content = text.trim();
+        if (!content && pendingFiles.length === 0)
+            return;
+        // Upload pending files
+        let attachments = [];
+        if (pendingFiles.length > 0) {
+            setUploading(true);
+            try {
+                const results = await Promise.all(pendingFiles.map(f => onUploadFile(f.file)));
+                attachments = results
+                    .filter((r) => r !== null)
+                    .map(r => ({
+                    fileName: r.FileName,
+                    fileUrl: r.FileUrl,
+                    fileSize: r.FileSize,
+                    mimeType: r.MimeType
+                }));
+            }
+            finally {
+                setUploading(false);
+            }
+        }
+        onSend(content, attachments.length > 0 ? attachments : undefined);
+        setText('');
+        setPendingFiles([]);
+        onTyping?.(false);
+        if (typingTimeoutRef.current)
+            clearTimeout(typingTimeoutRef.current);
+        // Reset textarea height
+        if (textareaRef.current) {
+            textareaRef.current.style.height = 'auto';
+        }
+    }, [text, pendingFiles, onSend, onUploadFile, onTyping]);
+    const handleKeyDown = (0, react_1.useCallback)((e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmit();
+        }
+    }, [handleSubmit]);
+    const handleFileSelect = (0, react_1.useCallback)((e) => {
+        const files = e.target.files;
+        if (!files)
+            return;
+        const newFiles = Array.from(files).map(file => {
+            const preview = file.type.startsWith('image/') ? URL.createObjectURL(file) : undefined;
+            return { file, preview };
+        });
+        setPendingFiles(prev => [...prev, ...newFiles]);
+        e.target.value = ''; // reset so same file can be selected again
+    }, []);
+    const removeFile = (0, react_1.useCallback)((idx) => {
+        setPendingFiles(prev => {
+            const item = prev[idx];
+            if (item?.preview)
+                URL.revokeObjectURL(item.preview);
+            return prev.filter((_, i) => i !== idx);
+        });
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex-shrink-0 border-t border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))]", children: [replyTo && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 px-4 py-2 bg-[rgb(var(--bg-subtle))] border-b border-[rgb(var(--bd-default))]", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Reply, { className: "w-4 h-4 text-[rgb(var(--color-primary))] flex-shrink-0" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-xs font-medium text-[rgb(var(--color-primary))]", children: t('Replying to message') }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-[rgb(var(--fg-muted))] truncate", children: replyTo.Content })] }), (0, jsx_runtime_1.jsx)("button", { onClick: onCancelReply, className: "flex-shrink-0 text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))]", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "w-4 h-4" }) })] })), pendingFiles.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "flex gap-2 px-4 py-2 overflow-x-auto", children: pendingFiles.map((f, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "relative flex-shrink-0", children: [f.preview ? ((0, jsx_runtime_1.jsx)("img", { src: f.preview, alt: f.file.name, className: "w-16 h-16 rounded-lg object-cover border border-[rgb(var(--bd-default))]" })) : ((0, jsx_runtime_1.jsxs)("div", { className: "w-16 h-16 rounded-lg border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-subtle))] flex flex-col items-center justify-center", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileIcon, { className: "w-5 h-5 text-[rgb(var(--fg-muted))]" }), (0, jsx_runtime_1.jsx)("span", { className: "text-[0.5rem] text-[rgb(var(--fg-muted))] mt-0.5 truncate max-w-[3.5rem]", children: f.file.name.split('.').pop()?.toUpperCase() })] })), (0, jsx_runtime_1.jsx)("button", { onClick: () => removeFile(i), className: "absolute -top-1.5 -right-1.5 w-5 h-5 rounded-full bg-red-500 text-white flex items-center justify-center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "w-3 h-3" }) })] }, i))) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-end gap-2 px-3 py-2", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => fileInputRef.current?.click(), disabled: disabled || uploading, className: "flex-shrink-0 w-9 h-9 rounded-lg flex items-center justify-center text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-hover))] transition-colors disabled:opacity-50", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Paperclip, { className: "w-5 h-5" }) }), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", multiple: true, className: "hidden", onChange: handleFileSelect, accept: "image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt,.csv,.zip,.rar" }), (0, jsx_runtime_1.jsx)("textarea", { ref: textareaRef, value: text, onChange: e => { setText(e.target.value); handleTyping(); }, onKeyDown: handleKeyDown, disabled: disabled || uploading || isListening, placeholder: isListening ? t('Listening...') : (placeholder || t('Type a message...')), rows: 1, className: "flex-1 min-h-[2.25rem] max-h-[7.5rem] px-3 py-2 rounded-xl bg-[rgb(var(--bg-subtle))] text-sm text-[rgb(var(--fg-default))] placeholder:text-[rgb(var(--fg-muted))] border border-[rgb(var(--bd-default))] resize-none focus:outline-none focus:ring-1 focus:ring-[rgb(var(--color-primary))] disabled:opacity-50" }), speechSupported && ((0, jsx_runtime_1.jsx)("button", { onClick: handleVoiceInput, disabled: disabled || uploading, className: (0, utils_1.cn)('flex-shrink-0 w-9 h-9 rounded-lg flex items-center justify-center transition-colors', isListening
+                            ? 'text-red-500 bg-red-500/10 animate-pulse'
+                            : 'text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-hover))]', 'disabled:opacity-50'), children: isListening ? (0, jsx_runtime_1.jsx)(lucide_react_1.MicOff, { className: "w-5 h-5" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Mic, { className: "w-5 h-5" }) })), (0, jsx_runtime_1.jsx)("button", { onClick: handleSubmit, disabled: disabled || uploading || isListening || (!text.trim() && pendingFiles.length === 0), className: (0, utils_1.cn)('flex-shrink-0 w-9 h-9 rounded-lg flex items-center justify-center transition-colors', text.trim() || pendingFiles.length > 0
+                            ? 'bg-[rgb(var(--color-primary))] text-white hover:opacity-90'
+                            : 'text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-hover))]', 'disabled:opacity-50'), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Send, { className: "w-5 h-5" }) })] })] }));
+}

package/dist/cjs/components/messaging/message-thread.js

@@ -0,0 +1,124 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageThread = MessageThread;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../lib/utils.js");
+const LanguageContext_1 = require("../../contexts/LanguageContext.js");
+const MessagingContext_1 = require("../../contexts/MessagingContext.js");
+const message_bubble_1 = require("./message-bubble.js");
+const message_input_1 = require("./message-input.js");
+const messaging_1 = require("../../lib/api/activity/messaging/messaging.js");
+const conversation_list_1 = require("./conversation-list.js");
+function MessageThread({ room, currentUserId, onBack, onOpenThread, className }) {
+    const { t } = (0, LanguageContext_1.useLanguage)();
+    const { state, actions } = (0, MessagingContext_1.useMessaging)();
+    const [replyTo, setReplyTo] = (0, react_1.useState)(null);
+    const messagesEndRef = (0, react_1.useRef)(null);
+    const scrollContainerRef = (0, react_1.useRef)(null);
+    const prevMessageCountRef = (0, react_1.useRef)(0);
+    const messages = state.messages[room.RoomID] || [];
+    const pagination = state.messagePagination[room.RoomID];
+    const typingUsers = actions.getTypingUsers(room.RoomID);
+    // Display name for header
+    const displayName = (0, react_1.useMemo)(() => {
+        if (room.Type === 'DM') {
+            const participants = (0, messaging_1.parseParticipants)(room.Participants);
+            const other = participants.find(p => String(p.userId) !== currentUserId);
+            return other?.userName || room.Name || t('Direct Message');
+        }
+        return room.Name || t('Unnamed');
+    }, [room, currentUserId, t]);
+    const participants = (0, react_1.useMemo)(() => (0, messaging_1.parseParticipants)(room.Participants), [room.Participants]);
+    const memberCount = participants.length;
+    // Build sender name map
+    const senderNames = (0, react_1.useMemo)(() => {
+        const map = {};
+        for (const p of participants) {
+            map[p.userId] = p.userName;
+        }
+        return map;
+    }, [participants]);
+    // DM partner online status
+    const isDMPartnerOnline = (0, react_1.useMemo)(() => {
+        if (room.Type !== 'DM')
+            return false;
+        const other = participants.find(p => String(p.userId) !== currentUserId);
+        return other ? actions.isUserOnline(other.userId) : false;
+    }, [room.Type, participants, currentUserId, actions]);
+    // Fetch messages + join SignalR group on mount
+    (0, react_1.useEffect)(() => {
+        actions.fetchMessages(room.RoomID);
+        actions.joinConversation(room.RoomID);
+        return () => {
+            actions.leaveConversation(room.RoomID);
+        };
+    }, [room.RoomID, actions]);
+    // Auto-scroll to bottom on new messages (only if already near bottom)
+    (0, react_1.useEffect)(() => {
+        const container = scrollContainerRef.current;
+        if (!container)
+            return;
+        const isNearBottom = container.scrollHeight - container.scrollTop - container.clientHeight < 100;
+        const isNewMessage = messages.length > prevMessageCountRef.current;
+        if (isNearBottom || isNewMessage) {
+            messagesEndRef.current?.scrollIntoView({ behavior: isNewMessage ? 'smooth' : 'auto' });
+        }
+        prevMessageCountRef.current = messages.length;
+    }, [messages.length]);
+    // Mark as read when viewing
+    (0, react_1.useEffect)(() => {
+        if (messages.length > 0) {
+            const lastMsg = messages[messages.length - 1];
+            actions.markAsRead(room.RoomID, lastMsg.MessageID);
+        }
+    }, [room.RoomID, messages, actions]);
+    // Load more on scroll to top
+    const handleScroll = (0, react_1.useCallback)(() => {
+        const container = scrollContainerRef.current;
+        if (!container)
+            return;
+        if (container.scrollTop < 50 && pagination?.hasMore && !state.loadingMessages) {
+            actions.fetchMoreMessages(room.RoomID);
+        }
+    }, [pagination, state.loadingMessages, room.RoomID, actions]);
+    const handleSend = (0, react_1.useCallback)((content, attachments) => {
+        const request = { Content: content };
+        if (attachments) {
+            request.AttachmentsJson = JSON.stringify(attachments);
+        }
+        if (replyTo) {
+            actions.replyToMessage(replyTo.MessageID, request);
+            setReplyTo(null);
+        }
+        else {
+            actions.sendMessage(room.RoomID, request);
+        }
+    }, [replyTo, room.RoomID, actions]);
+    const handleTyping = (0, react_1.useCallback)((isTyping) => {
+        actions.sendTyping(room.RoomID, isTyping);
+    }, [room.RoomID, actions]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('flex flex-col h-full bg-[rgb(var(--bg-app))]', className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-shrink-0 flex items-center gap-3 px-3 py-2.5 border-b border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))]", children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: "lg:hidden flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center hover:bg-[rgb(var(--bg-hover))] text-[rgb(var(--fg-muted))]", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { className: "w-5 h-5" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex-shrink-0", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('w-9 h-9 rounded-full flex items-center justify-center text-white text-sm font-medium', (0, conversation_list_1.getAvatarColor)(room.RoomID)), children: room.Type === 'Channel' ? '#' : (0, conversation_list_1.getInitials)(displayName) }), room.Type === 'DM' && isDMPartnerOnline && ((0, jsx_runtime_1.jsx)("span", { className: "absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 rounded-full border-2 border-[rgb(var(--bg-surface))]" }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-sm font-semibold text-[rgb(var(--fg-default))] truncate", children: displayName }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-[rgb(var(--fg-muted))]", children: room.Type === 'DM'
+                                    ? (isDMPartnerOnline ? t('Online') : t('Offline'))
+                                    : `${memberCount} ${t('members')}` })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: room.Type !== 'DM' && ((0, jsx_runtime_1.jsx)("button", { className: "w-8 h-8 rounded-lg flex items-center justify-center text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-hover))]", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Users, { className: "w-4.5 h-4.5" }) })) })] }), (0, jsx_runtime_1.jsxs)("div", { ref: scrollContainerRef, className: "flex-1 overflow-y-auto py-2", onScroll: handleScroll, children: [state.loadingMessages && messages.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-center py-2", children: (0, jsx_runtime_1.jsx)("div", { className: "w-5 h-5 border-2 border-[rgb(var(--color-primary))] border-t-transparent rounded-full animate-spin" }) })), state.loadingMessages && messages.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-center justify-center h-full", children: (0, jsx_runtime_1.jsx)("div", { className: "w-8 h-8 border-2 border-[rgb(var(--color-primary))] border-t-transparent rounded-full animate-spin" }) })), messages.map((msg, idx) => {
+                        const prev = idx > 0 ? messages[idx - 1] : null;
+                        const showSender = !prev || prev.UserID !== msg.UserID;
+                        const isOwn = String(msg.UserID) === currentUserId;
+                        return ((0, jsx_runtime_1.jsx)(message_bubble_1.MessageBubble, { message: msg, isOwn: isOwn, senderName: senderNames[msg.UserID] || `User ${msg.UserID}`, showSender: showSender, onReply: setReplyTo, onReact: (id, emoji) => actions.toggleReaction(id, emoji), onEdit: (id, content) => actions.editMessage(id, content), onDelete: (id) => actions.deleteMessage(id), onThreadClick: onOpenThread, currentUserId: Number(currentUserId) }, msg.MessageID));
+                    }), typingUsers.length > 0 && ((0, jsx_runtime_1.jsx)(TypingIndicator, { userIds: typingUsers, senderNames: senderNames })), (0, jsx_runtime_1.jsx)("div", { ref: messagesEndRef })] }), (0, jsx_runtime_1.jsx)(message_input_1.MessageInput, { onSend: handleSend, onUploadFile: actions.uploadFile, onTyping: handleTyping, replyTo: replyTo, onCancelReply: () => setReplyTo(null), disabled: state.sendingMessage })] }));
+}
+// ── Typing Indicator ──────────────────────────────────────────────────────
+function TypingIndicator({ userIds, senderNames }) {
+    const { t } = (0, LanguageContext_1.useLanguage)();
+    const names = userIds
+        .map(id => senderNames[Number(id)] || `User ${id}`)
+        .slice(0, 3);
+    const text = names.length === 1
+        ? `${names[0]} ${t('is typing')}`
+        : names.length === 2
+            ? `${names[0]} ${t('and')} ${names[1]} ${t('are typing')}`
+            : `${names[0]} ${t('and')} ${names.length - 1} ${t('others are typing')}`;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 px-4 py-1.5 ml-10", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-0.5", children: [(0, jsx_runtime_1.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-[rgb(var(--fg-muted))] animate-bounce [animation-delay:0ms]" }), (0, jsx_runtime_1.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-[rgb(var(--fg-muted))] animate-bounce [animation-delay:150ms]" }), (0, jsx_runtime_1.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-[rgb(var(--fg-muted))] animate-bounce [animation-delay:300ms]" })] }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-[rgb(var(--fg-muted))] italic", children: text })] }));
+}