tacel-chat 1.2.0

package/chat.js

@@ -0,0 +1,834 @@
+/**
+ * TacelChat — Main frontend module
+ * Supports conversation mode (sidebar + direct/team) and room mode (tabs + rooms)
+ */
+
+const { Sidebar } = require('./components/sidebar');
+const { TabBar } = require('./components/tabs');
+const { MessageArea } = require('./components/message-area');
+const { NewChatModal } = require('./components/new-chat');
+const { ContextMenu, resolveMenuItems } = require('./components/context-menu');
+const { THEMES } = require('./themes');
+
+class TacelChat {
+  constructor() {
+    this.config = {};
+    this.containerEl = null;
+
+    // State
+    this.currentUsername = '';
+    this.conversations = [];
+    this.users = [];
+    this.activeConversationId = null;
+    this.messages = [];
+    this.messageReads = {};
+    this.unreadCounts = {};
+    this.isInitialized = false;
+
+    // Sub-components
+    this.sidebar = null;
+    this.tabBar = null;
+    this.messageArea = null;
+    this.newChatModal = null;
+    this.contextMenu = null;
+
+    // Mention counts
+    this.mentionCounts = {};
+
+    // Timers
+    this._refreshInterval = null;
+    this._heartbeatInterval = null;
+    this._messagePollingInterval = null;
+
+    // Bound handlers
+    this._boundBeforeUnload = null;
+  }
+
+  /**
+   * Initialize the chat module
+   * @param {HTMLElement} container - DOM element to mount into
+   * @param {object} config - Full configuration object
+   * @returns {TacelChat} instance
+   */
+  async initialize(container, config) {
+    this.config = this._mergeDefaults(config);
+    this.containerEl = container;
+    this.containerEl.innerHTML = '';
+    this.containerEl.className = (this.containerEl.className + ' tacel-chat').trim();
+
+    // Resolve and apply theme
+    let themeVars = this.config.theme || {};
+    if (typeof themeVars === 'string') {
+      themeVars = THEMES[themeVars] || {};
+    }
+    // Clear any previous inline CSS vars
+    this.containerEl.removeAttribute('style');
+    for (const [key, val] of Object.entries(themeVars)) {
+      this.containerEl.style.setProperty(key, val);
+    }
+    this._themeVars = themeVars;
+
+    // Get current user
+    this.currentUsername = this.config.currentUsername || '';
+
+    const features = this.config.features || {};
+    const mode = this.config.mode || 'conversation';
+
+    // Show loading
+    this.containerEl.innerHTML = `
+      <div class="tc-loading-full">
+        <div class="tc-spinner"></div>
+        <p>Loading chat...</p>
+      </div>
+    `;
+
+    try {
+      // Fetch initial data
+      this.users = await this._call(this.config.onFetchUsers) || [];
+      this.conversations = await this._call(this.config.onFetchConversations, this.currentUsername) || [];
+
+      if (features.unreadCounts) {
+        const counts = await this._call(this.config.onFetchUnreadCounts, this.currentUsername) || [];
+        this._applyUnreadCounts(counts);
+      }
+
+      if (features.mentions && this.config.onFetchMentionCounts) {
+        const mCounts = await this._call(this.config.onFetchMentionCounts, this.currentUsername) || [];
+        this._applyMentionCounts(mCounts);
+      }
+
+      // Clear loading
+      this.containerEl.innerHTML = '';
+
+      if (mode === 'room') {
+        this._initRoomMode();
+      } else {
+        this._initConversationMode();
+      }
+
+      this.isInitialized = true;
+
+      // Start timers
+      this._startRefreshInterval();
+      this._startHeartbeat();
+      this._startMessagePolling();
+
+      // Beforeunload
+      if (features.presence && this.config.onPresenceOffline) {
+        this._boundBeforeUnload = () => {
+          this._call(this.config.onPresenceOffline, this.currentUsername);
+        };
+        window.addEventListener('beforeunload', this._boundBeforeUnload);
+      }
+
+    } catch (err) {
+      console.error('[TacelChat] Initialization failed:', err);
+      this.containerEl.innerHTML = `
+        <div class="tc-error-full">
+          <i class="fas fa-exclamation-circle"></i>
+          <p>Failed to load chat</p>
+          <p style="font-size:12px;opacity:0.6;">${err.message || ''}</p>
+        </div>
+      `;
+    }
+
+    return this;
+  }
+
+  // ─── Conversation Mode ───────────────────────────────────────────
+
+  _initConversationMode() {
+    const features = this.config.features || {};
+
+    // Context menu
+    this.contextMenu = new ContextMenu(this.containerEl);
+
+    // Create layout
+    const wrapper = document.createElement('div');
+    wrapper.className = 'tc-container';
+
+    // Sidebar
+    this.sidebar = new Sidebar({
+      showPresence: features.presence !== false,
+      showSearch: features.search !== false,
+      showNewChat: features.newChat !== false,
+      resizable: features.resizableSidebar !== false,
+      presenceStaleMs: this.config.presenceStaleMs || 10000,
+      labels: this.config.labels,
+      onSelectConversation: (id) => this._selectConversation(id),
+      onNewChat: () => this._showNewChatModal(),
+      onSearch: () => this._updateSidebar(),
+      onContextMenu: (conv, event) => {
+        const items = resolveMenuItems('conversation', conv, this);
+        this.contextMenu.show(event, items);
+      }
+    });
+    this.sidebar.render(wrapper);
+
+    // Message area
+    this.messageArea = new MessageArea({
+      mode: 'conversation',
+      currentUsername: this.currentUsername,
+      features,
+      labels: this.config.labels,
+      presenceStaleMs: this.config.presenceStaleMs || 10000,
+      onSendMessage: (content, attachment, replyTo) => this._sendMessage(content, attachment, replyTo),
+      onUploadAttachment: this.config.onUploadAttachment,
+      onOpenFile: this.config.onOpenFile,
+      onOpenFolder: this.config.onOpenFolder || null,
+      onGetFileContent: this.config.onGetFileContent,
+      onFetchMentionUsers: this.config.onFetchMentionUsers,
+      onLinkClick: this.config.onLinkClick || ((url) => { window.open(url, '_blank'); }),
+      onPinMessage: this.config.onPinMessage || null,
+      onUnpinMessage: (msg) => this._unpinMessage(msg),
+      onFetchPinnedMessages: this.config.onFetchPinnedMessages || null,
+      onMessageContextMenu: (msg, event) => {
+        const items = resolveMenuItems('message', msg, this);
+        this.contextMenu.show(event, items);
+      },
+      onFileContextMenu: (file, event) => {
+        this._showFileContextMenu(file, event);
+      }
+    });
+    this.messageArea.render(wrapper);
+
+    // Mount confirm dialog inside the .tacel-chat container so CSS variables are inherited
+    if (this.messageArea.confirmDialog) {
+      this.messageArea.confirmDialog.mountEl = this.containerEl;
+    }
+
+    this.containerEl.appendChild(wrapper);
+
+    // New chat modal
+    if (features.newChat !== false) {
+      this.newChatModal = new NewChatModal({
+        mountEl: this.containerEl,
+        onStartDirect: async (currentUsername, otherUserId) => {
+          const result = await this._call(this.config.onStartDirect, currentUsername, otherUserId);
+          if (result && result.success && result.conversationId) {
+            await this.refresh();
+            this._selectConversation(result.conversationId);
+          }
+          return result;
+        }
+      });
+    }
+
+    // Select first conversation
+    this._updateSidebar();
+    if (this.conversations.length > 0) {
+      this._selectConversation(this.conversations[0].id);
+    }
+  }
+
+  _updateSidebar() {
+    if (!this.sidebar) return;
+    this.sidebar.update(this.conversations, this.activeConversationId, this.users);
+  }
+
+  async _selectConversation(id) {
+    this.activeConversationId = id;
+    this._updateSidebar();
+
+    const conv = this.conversations.find(c => String(c.id) === String(id));
+    this.messageArea.updateHeader(conv, this.users);
+    this.messageArea.setActiveConversation(id);
+    this.messageArea.showLoading();
+
+    try {
+      const messages = await this._call(this.config.onFetchMessages, id, {}) || [];
+      this.messages = messages;
+
+      // Fetch read receipts
+      let reads = {};
+      if (this.config.features.readReceipts && this.config.onFetchMessageReads) {
+        const rawReads = await this._call(this.config.onFetchMessageReads, id) || [];
+        reads = this._groupReads(rawReads);
+      }
+      this.messageReads = reads;
+
+      this.messageArea.renderMessages(messages, reads);
+
+      // Mark as read
+      if (this.config.features.unreadCounts && this.config.onMarkRead) {
+        await this._call(this.config.onMarkRead, id, this.currentUsername);
+        // Update local unread count
+        const conv = this.conversations.find(c => String(c.id) === String(id));
+        if (conv) conv.unreadCount = 0;
+        this._updateSidebar();
+      }
+
+      this.messageArea.focusInput();
+
+      // Load pinned messages for this conversation
+      await this._loadPinnedMessages();
+    } catch (err) {
+      console.error('[TacelChat] Failed to load messages:', err);
+      this.messageArea.showError('Failed to load messages', () => this._selectConversation(id));
+    }
+  }
+
+  async _showNewChatModal() {
+    if (!this.newChatModal) return;
+    let peerIds = [];
+    if (this.config.onFetchDirectPeers) {
+      peerIds = await this._call(this.config.onFetchDirectPeers, this.currentUsername) || [];
+    }
+    this.newChatModal.show(this.users, peerIds, this.currentUsername);
+  }
+
+  // ─── Room Mode ───────────────────────────────────────────────────
+
+  _initRoomMode() {
+    const features = this.config.features || {};
+    const rooms = this.config.rooms || [];
+
+    // Context menu
+    this.contextMenu = new ContextMenu(this.containerEl);
+
+    const wrapper = document.createElement('div');
+    wrapper.className = 'tc-container tc-room-mode';
+
+    // Tab bar
+    this.tabBar = new TabBar({
+      rooms,
+      labels: this.config.labels,
+      onSelectRoom: (type) => this._selectRoom(type),
+      onContextMenu: (room, event) => {
+        const items = resolveMenuItems('tab', room, this);
+        this.contextMenu.show(event, items);
+      }
+    });
+    this.tabBar.render(wrapper);
+
+    // Message area
+    this.messageArea = new MessageArea({
+      mode: 'room',
+      currentUsername: this.currentUsername,
+      features,
+      labels: this.config.labels,
+      presenceStaleMs: this.config.presenceStaleMs || 10000,
+      onSendMessage: (content, attachment, replyTo) => this._sendMessage(content, attachment, replyTo),
+      onUploadAttachment: this.config.onUploadAttachment,
+      onOpenFile: this.config.onOpenFile,
+      onOpenFolder: this.config.onOpenFolder || null,
+      onGetFileContent: this.config.onGetFileContent,
+      onFetchMentionUsers: this.config.onFetchMentionUsers,
+      onLinkClick: this.config.onLinkClick || ((url) => { window.open(url, '_blank'); }),
+      onPinMessage: this.config.onPinMessage || null,
+      onUnpinMessage: (msg) => this._unpinMessage(msg),
+      onFetchPinnedMessages: this.config.onFetchPinnedMessages || null,
+      onMessageContextMenu: (msg, event) => {
+        const items = resolveMenuItems('message', msg, this);
+        this.contextMenu.show(event, items);
+      },
+      onFileContextMenu: (file, event) => {
+        this._showFileContextMenu(file, event);
+      }
+    });
+    this.messageArea.render(wrapper);
+
+    // Mount confirm dialog inside the .tacel-chat container so CSS variables are inherited
+    if (this.messageArea.confirmDialog) {
+      this.messageArea.confirmDialog.mountEl = this.containerEl;
+    }
+
+    // In room mode, create action buttons directly in the tab bar
+    // and hide the message area header entirely (it just repeats the room name)
+    if (this.tabBar && this.tabBar.actionsEl) {
+      if (this.messageArea.searchPanel) {
+        this.tabBar.actionsEl.appendChild(this.messageArea.searchPanel.createToggleButton());
+      }
+      if (this.messageArea.pinnedPanel) {
+        this.tabBar.actionsEl.appendChild(this.messageArea.pinnedPanel.createToggleButton());
+      }
+      if (this.messageArea.filesPanel) {
+        this.tabBar.actionsEl.appendChild(this.messageArea.filesPanel.createToggleButton());
+      }
+      // Hide the message area header row
+      const header = this.messageArea.containerEl.querySelector('.tc-chat-header');
+      if (header) header.style.display = 'none';
+    }
+
+    this.containerEl.appendChild(wrapper);
+
+    // Select default room
+    const defaultType = this.config.defaultRoom || (rooms[0] && rooms[0].type) || 'general';
+    this._selectRoom(defaultType);
+  }
+
+  async _selectRoom(roomType) {
+    const rooms = this.config.rooms || [];
+    const room = rooms.find(r => r.type === roomType);
+    if (!room) return;
+
+    // Find the conversation/room data
+    let conv = this.conversations.find(c => c.type === 'room' && c.meta && c.meta.roomType === roomType);
+    if (!conv) {
+      // For room mode, conversations are the rooms themselves
+      conv = { id: room.id, name: room.name, type: 'room', meta: { roomType } };
+    }
+
+    this.activeConversationId = conv.id;
+    if (this.tabBar) this.tabBar.setActive(roomType);
+
+    this.messageArea.updateHeader(conv, this.users);
+    this.messageArea.setActiveConversation(conv.id);
+    this.messageArea.showLoading();
+
+    try {
+      const messages = await this._call(this.config.onFetchMessages, conv.id, { limit: 50, offset: 0 }) || [];
+      this.messages = messages;
+      this.messageArea.renderMessages(messages, {});
+
+      // Mark room notifications as read
+      if (this.config.features.mentionNotifications && this.config.onMarkRoomNotificationsRead) {
+        await this._call(this.config.onMarkRoomNotificationsRead, conv.id, this.currentUsername);
+      }
+
+      this.messageArea.focusInput();
+
+      // Load pinned messages for this room
+      await this._loadPinnedMessages();
+    } catch (err) {
+      console.error('[TacelChat] Failed to load room messages:', err);
+      this.messageArea.showError('Failed to load messages', () => this._selectRoom(roomType));
+    }
+  }
+
+  // ─── File Context Menu ───────────────────────────────────────────
+
+  _showFileContextMenu(file, event) {
+    const L = this.config.labels || {};
+    const items = [];
+
+    if (file.path) {
+      items.push({
+        label: L.openFile || 'Open File',
+        icon: 'fas fa-external-link-alt',
+        onClick: () => {
+          if (this.config.onOpenFile) this.config.onOpenFile(file.path);
+        }
+      });
+
+      if (this.config.onOpenFolder) {
+        items.push({
+          label: L.openFolder || 'Open Folder',
+          icon: 'fas fa-folder-open',
+          onClick: () => this.config.onOpenFolder(file.path)
+        });
+      }
+    }
+
+    if (file.msgId) {
+      items.push({
+        label: L.scrollToMessage || 'Scroll to Message',
+        icon: 'fas fa-search',
+        onClick: () => {
+          if (this.messageArea && this.messageArea.filesPanel) {
+            this.messageArea.filesPanel.close();
+          }
+          if (this.messageArea) this.messageArea.scrollToMessage(file.msgId);
+        }
+      });
+    }
+
+    if (items.length > 0) {
+      this.contextMenu.show(event, items);
+    }
+  }
+
+  // ─── Sending ─────────────────────────────────────────────────────
+
+  async _sendMessage(content, attachment, replyTo) {
+    if (!this.activeConversationId) return;
+
+    let uploadedAttachment = null;
+    if (attachment && this.config.onUploadAttachment) {
+      try {
+        // If no file path (e.g. clipboard paste), read the blob as base64
+        if (!attachment.path && attachment.file) {
+          const base64 = await this._readFileAsBase64(attachment.file);
+          attachment.data = base64;
+        }
+        const result = await this._call(this.config.onUploadAttachment, attachment);
+        if (result && result.success) {
+          uploadedAttachment = {
+            name: result.name || attachment.name,
+            type: result.type || attachment.type,
+            size: result.size || attachment.size,
+            path: result.path
+          };
+        }
+      } catch (err) {
+        console.error('[TacelChat] Attachment upload failed:', err);
+      }
+    }
+
+    await this._call(this.config.onSendMessage, this.activeConversationId, content, uploadedAttachment, replyTo);
+
+    // Reload messages for this conversation
+    await this._reloadActiveMessages();
+  }
+
+  /**
+   * Read a File/Blob as base64 data URL string
+   */
+  _readFileAsBase64(file) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = () => reject(reader.error);
+      reader.readAsDataURL(file);
+    });
+  }
+
+  async _loadPinnedMessages() {
+    if (!this.activeConversationId || !this.config.onFetchPinnedMessages) return;
+    try {
+      const pinned = await this._call(this.config.onFetchPinnedMessages, this.activeConversationId) || [];
+      this.messageArea.updatePinnedMessages(pinned);
+      // Re-render messages so pin icons update
+      if (this.messages && this.messages.length > 0) {
+        this.messageArea.renderMessages(this.messages, this.messageReads || {}, true);
+      }
+    } catch (err) {
+      console.error('[TacelChat] Failed to load pinned messages:', err);
+    }
+  }
+
+  async _unpinMessage(msg) {
+    if (this.config.onUnpinMessage) {
+      await this._call(this.config.onUnpinMessage, msg, this.activeConversationId);
+      await this._loadPinnedMessages();
+    }
+  }
+
+  /**
+   * Pin a message (called from context menu action)
+   */
+  async pinMessage(msg) {
+    if (this.config.onPinMessage) {
+      await this._call(this.config.onPinMessage, msg, this.activeConversationId);
+      await this._loadPinnedMessages();
+    }
+  }
+
+  async _reloadActiveMessages() {
+    if (!this.activeConversationId) return;
+    try {
+      const messages = await this._call(this.config.onFetchMessages, this.activeConversationId, {}) || [];
+      this.messages = messages;
+
+      let reads = {};
+      if (this.config.features.readReceipts && this.config.onFetchMessageReads) {
+        const rawReads = await this._call(this.config.onFetchMessageReads, this.activeConversationId) || [];
+        reads = this._groupReads(rawReads);
+      }
+      this.messageReads = reads;
+
+      this.messageArea.renderMessages(messages, reads, true);
+    } catch (err) {
+      console.error('[TacelChat] Failed to reload messages:', err);
+    }
+  }
+
+  // ─── Real-Time Event Hooks ───────────────────────────────────────
+
+  /**
+   * Call when a new message arrives via socket/polling
+   */
+  async onNewMessage(payload) {
+    if (!this.isInitialized) return;
+    const convId = payload && (payload.conversationId || payload.conversation_id);
+
+    if (String(convId) === String(this.activeConversationId)) {
+      await this._reloadActiveMessages();
+      // Auto mark read
+      if (this.config.features.unreadCounts && this.config.onMarkRead) {
+        await this._call(this.config.onMarkRead, convId, this.currentUsername);
+      }
+    }
+
+    // Refresh conversations and unread counts
+    await this._refreshConversationsAndUnread();
+  }
+
+  /**
+   * Call when a read event arrives
+   */
+  async onReadEvent(payload) {
+    if (!this.isInitialized) return;
+    const convId = payload && (payload.conversationId || payload.conversation_id);
+    await this._refreshConversationsAndUnread();
+    if (String(convId) === String(this.activeConversationId)) {
+      await this._reloadActiveMessages();
+    }
+  }
+
+  /**
+   * Call when a new conversation is created
+   */
+  async onNewConversation(payload) {
+    if (!this.isInitialized) return;
+    await this._refreshConversationsAndUnread();
+  }
+
+  /**
+   * Call when a presence update arrives
+   */
+  onPresenceUpdate(payload) {
+    if (!this.isInitialized) return;
+    if (!payload) return;
+    const user = this.users.find(u => String(u.id) === String(payload.userId) ||
+      u.username.toLowerCase() === (payload.username || '').toLowerCase());
+    if (user) {
+      user.isOnline = payload.isOnline;
+      user.lastSeen = payload.lastSeen;
+    }
+    this._updateSidebar();
+    // Update header if this user is the active conversation
+    if (this.messageArea && this.activeConversationId) {
+      const conv = this.conversations.find(c => String(c.id) === String(this.activeConversationId));
+      if (conv) this.messageArea.updateHeader(conv, this.users);
+    }
+  }
+
+  // ─── Refresh / Polling ───────────────────────────────────────────
+
+  _startRefreshInterval() {
+    const ms = this.config.refreshIntervalMs;
+    if (!ms || ms <= 0) return;
+    this._refreshInterval = setInterval(() => this._refreshConversationsAndUnread(), ms);
+  }
+
+  _startHeartbeat() {
+    const ms = this.config.heartbeatMs;
+    if (!ms || ms <= 0 || !this.config.features.presence) return;
+    // Immediate heartbeat
+    this._call(this.config.onPresenceHeartbeat, this.currentUsername);
+    this._heartbeatInterval = setInterval(() => {
+      this._call(this.config.onPresenceHeartbeat, this.currentUsername);
+    }, ms);
+  }
+
+  _startMessagePolling() {
+    const ms = this.config.messagePollingMs;
+    if (!ms || ms <= 0) return;
+    this._messagePollingInterval = setInterval(() => this._reloadActiveMessages(), ms);
+  }
+
+  async _refreshConversationsAndUnread() {
+    try {
+      this.users = await this._call(this.config.onFetchUsers) || this.users;
+      this.conversations = await this._call(this.config.onFetchConversations, this.currentUsername) || this.conversations;
+      if (this.config.features.unreadCounts) {
+        const counts = await this._call(this.config.onFetchUnreadCounts, this.currentUsername) || [];
+        this._applyUnreadCounts(counts);
+      }
+      if (this.config.features.mentions && this.config.onFetchMentionCounts) {
+        const mCounts = await this._call(this.config.onFetchMentionCounts, this.currentUsername) || [];
+        this._applyMentionCounts(mCounts);
+      }
+      this._updateSidebar();
+      // Also reload active messages so new messages from other users appear
+      if (this.activeConversationId) {
+        await this._reloadActiveMessages();
+      }
+    } catch (err) {
+      console.error('[TacelChat] Refresh failed:', err);
+    }
+  }
+
+  // ─── Public API ──────────────────────────────────────────────────
+
+  /**
+   * Programmatically open a conversation
+   */
+  async openConversation(conversationId) {
+    if (this.config.mode === 'room') return;
+    await this._selectConversation(conversationId);
+  }
+
+  /**
+   * Switch to a room tab (room mode)
+   */
+  async switchRoom(roomType) {
+    if (this.config.mode !== 'room') return;
+    await this._selectRoom(roomType);
+  }
+
+  /**
+   * Refresh all data
+   */
+  async refresh() {
+    await this._refreshConversationsAndUnread();
+    if (this.activeConversationId) {
+      await this._reloadActiveMessages();
+    }
+  }
+
+  /**
+   * Check if initialized
+   */
+  isReady() {
+    return this.isInitialized;
+  }
+
+  /**
+   * Clean up everything
+   */
+  destroy() {
+    if (this._refreshInterval) clearInterval(this._refreshInterval);
+    if (this._heartbeatInterval) clearInterval(this._heartbeatInterval);
+    if (this._messagePollingInterval) clearInterval(this._messagePollingInterval);
+    if (this._boundBeforeUnload) {
+      window.removeEventListener('beforeunload', this._boundBeforeUnload);
+    }
+    if (this.sidebar) this.sidebar.destroy();
+    if (this.tabBar) this.tabBar.destroy();
+    if (this.messageArea) this.messageArea.destroy();
+    if (this.newChatModal) this.newChatModal.destroy();
+    if (this.contextMenu) this.contextMenu.destroy();
+    if (this.containerEl) this.containerEl.innerHTML = '';
+    this.isInitialized = false;
+  }
+
+  // ─── Helpers ─────────────────────────────────────────────────────
+
+  _mergeDefaults(config) {
+    const defaults = {
+      mode: 'conversation',
+      features: {
+        directMessages: true,
+        teamConversations: true,
+        teamManagement: false,
+        presence: true,
+        readReceipts: true,
+        unreadCounts: true,
+        search: true,
+        newChat: true,
+        attachments: false,
+        attachmentPreview: false,
+        mentions: false,
+        mentionNotifications: false,
+        urlLinkify: true,
+        tabs: false,
+        darkMode: false
+      },
+      labels: {
+        sidebarTitle: 'Messages',
+        searchPlaceholder: 'Search conversations...',
+        newChatTitle: 'New Direct Message',
+        newChatSearch: 'Search users...',
+        teamsHeader: 'Teams',
+        directsHeader: 'Direct Messages',
+        noConversations: 'No conversations yet',
+        noResults: 'No conversations found',
+        noMessages: 'No messages yet',
+        noMessagesHint: 'Send a message to start the conversation',
+        inputPlaceholder: 'Type a message...',
+        roomTitle: 'Chat Center',
+        loadingText: 'Loading...',
+        errorText: 'Failed to load chat',
+        retryText: 'Retry',
+        seenBy: 'Seen by',
+        online: 'Online',
+        offline: 'Offline',
+        lastSeen: 'Last seen',
+        typing: 'typing...',
+        noUsers: 'No users available',
+        copyText: 'Copy Text',
+        reply: 'Reply',
+        quote: 'Quote',
+        forward: 'Forward',
+        editMessage: 'Edit Message',
+        deleteMessage: 'Delete Message',
+        pinMessage: 'Pin Message',
+        unpinMessage: 'Unpin Message',
+        markAsRead: 'Mark as Read',
+        muteNotifications: 'Mute Notifications',
+        unmuteNotifications: 'Unmute',
+        pinToTop: 'Pin to Top',
+        unpin: 'Unpin',
+        leaveConversation: 'Leave Conversation',
+        deleteConversation: 'Delete Conversation',
+        refreshMessages: 'Refresh Messages',
+        searchMessages: 'Search Messages',
+        clearChat: 'Clear Chat History',
+        openRoom: 'Open Room',
+        sendDirectMessage: 'Send Direct Message',
+        viewProfile: 'View Profile'
+      },
+      rooms: [],
+      defaultRoom: 'general',
+      refreshIntervalMs: 5000,
+      heartbeatMs: 5000,
+      presenceStaleMs: 10000,
+      messagePollingMs: 0,
+      currentUsername: '',
+      theme: {}
+    };
+
+    const merged = { ...defaults, ...config };
+    merged.features = { ...defaults.features, ...(config.features || {}) };
+    merged.labels = { ...defaults.labels, ...(config.labels || {}) };
+    return merged;
+  }
+
+  _applyUnreadCounts(counts) {
+    this.unreadCounts = {};
+    for (const item of counts) {
+      this.unreadCounts[item.conversationId || item.conversation_id] = item.unreadCount || item.unread_count || 0;
+    }
+    // Apply to conversations
+    for (const conv of this.conversations) {
+      const count = this.unreadCounts[conv.id];
+      if (count !== undefined) conv.unreadCount = count;
+    }
+  }
+
+  _applyMentionCounts(counts) {
+    this.mentionCounts = {};
+    for (const item of counts) {
+      this.mentionCounts[item.conversationId || item.conversation_id] = item.mentionCount || item.mention_count || 0;
+    }
+    for (const conv of this.conversations) {
+      const count = this.mentionCounts[conv.id];
+      if (count !== undefined) conv.mentionCount = count;
+    }
+  }
+
+  _groupReads(rawReads) {
+    const grouped = {};
+    for (const r of rawReads) {
+      const mid = r.messageId || r.message_id;
+      if (!grouped[mid]) grouped[mid] = [];
+      grouped[mid].push({
+        userId: r.userId || r.user_id,
+        username: r.username,
+        readAt: r.readAt || r.read_at
+      });
+    }
+    return grouped;
+  }
+
+  async _call(fn, ...args) {
+    if (typeof fn !== 'function') return null;
+    return fn(...args);
+  }
+
+  /**
+   * Static: load CSS dynamically
+   */
+  static loadCSS(path) {
+    const href = path || './node_modules/tacel-chat/chat.css';
+    if (document.querySelector(`link[href="${href}"]`)) return;
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = href;
+    document.head.appendChild(link);
+  }
+}
+
+module.exports = { TacelChat };