tacel-chat 1.2.0

package/components/search-panel.js

@@ -0,0 +1,201 @@
+/**
+ * Search Panel component for tacel-chat
+ * Allows searching within the current conversation/room messages by keyword.
+ * Shows matching results with click-to-scroll.
+ */
+
+const { createElement } = require('../utils/dom');
+const { formatTime } = require('../utils/format');
+
+class SearchPanel {
+  constructor(options = {}) {
+    this.onScrollToMessage = options.onScrollToMessage || (() => {});
+    this.labels = options.labels || {};
+
+    this.containerEl = null;
+    this.inputEl = null;
+    this.resultsEl = null;
+    this.isOpen = false;
+    this.messages = []; // all messages in current context
+    this.query = '';
+  }
+
+  /**
+   * Create the toggle button for the header
+   * @returns {HTMLElement}
+   */
+  createToggleButton() {
+    const btn = createElement('button', {
+      className: 'tc-search-toggle-btn',
+      innerHTML: '<i class="fas fa-search"></i>',
+      attrs: { type: 'button', title: this.labels.searchMessages || 'Search Messages' },
+      events: { click: () => this.toggle() }
+    });
+    this.toggleBtnEl = btn;
+    return btn;
+  }
+
+  /**
+   * Render the panel into a parent (the tc-main container)
+   * @param {HTMLElement} parent
+   */
+  render(parent) {
+    this.containerEl = createElement('div', { className: 'tc-search-panel' });
+    this.containerEl.style.display = 'none';
+
+    // Header
+    const header = createElement('div', { className: 'tc-search-panel-header' });
+    header.innerHTML = `
+      <div class="tc-search-panel-title">
+        <i class="fas fa-search"></i>
+        <span>${this.labels.searchMessages || 'Search Messages'}</span>
+      </div>
+    `;
+    const closeBtn = createElement('button', {
+      className: 'tc-search-panel-close',
+      innerHTML: '<i class="fas fa-times"></i>',
+      attrs: { type: 'button' },
+      events: { click: () => this.close() }
+    });
+    header.appendChild(closeBtn);
+    this.containerEl.appendChild(header);
+
+    // Search input
+    this.inputEl = createElement('input', {
+      className: 'tc-search-panel-input',
+      attrs: { type: 'text', placeholder: this.labels.searchPlaceholder || 'Search messages...' }
+    });
+    this.inputEl.addEventListener('input', () => {
+      this.query = this.inputEl.value;
+      this._renderResults();
+    });
+    this.containerEl.appendChild(this.inputEl);
+
+    // Results
+    this.resultsEl = createElement('div', { className: 'tc-search-panel-results' });
+    this.containerEl.appendChild(this.resultsEl);
+
+    parent.appendChild(this.containerEl);
+  }
+
+  /**
+   * Update the messages list (called when messages change)
+   * @param {Array} messages
+   */
+  updateMessages(messages) {
+    this.messages = messages || [];
+    if (this.isOpen && this.query) this._renderResults();
+  }
+
+  toggle() {
+    if (this.isOpen) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
+  open() {
+    this.isOpen = true;
+    if (this.containerEl) this.containerEl.style.display = '';
+    if (this.toggleBtnEl) this.toggleBtnEl.classList.add('tc-search-toggle-active');
+    if (this.inputEl) {
+      this.inputEl.value = '';
+      this.query = '';
+      setTimeout(() => this.inputEl.focus(), 100);
+    }
+    this._renderResults();
+  }
+
+  close() {
+    this.isOpen = false;
+    if (this.containerEl) this.containerEl.style.display = 'none';
+    if (this.toggleBtnEl) this.toggleBtnEl.classList.remove('tc-search-toggle-active');
+  }
+
+  _renderResults() {
+    if (!this.resultsEl) return;
+    this.resultsEl.innerHTML = '';
+
+    if (!this.query || this.query.trim().length === 0) {
+      const hint = createElement('div', { className: 'tc-search-panel-empty' });
+      hint.innerHTML = `
+        <i class="fas fa-search" style="font-size:28px;opacity:0.2;margin-bottom:8px;"></i>
+        <div>${this.labels.searchHint || 'Type to search messages'}</div>
+      `;
+      this.resultsEl.appendChild(hint);
+      return;
+    }
+
+    const q = this.query.trim().toLowerCase();
+    const matches = this.messages.filter(m =>
+      m.content && m.content.toLowerCase().includes(q)
+    );
+
+    if (matches.length === 0) {
+      const empty = createElement('div', { className: 'tc-search-panel-empty' });
+      empty.innerHTML = `
+        <i class="fas fa-search" style="font-size:28px;opacity:0.2;margin-bottom:8px;"></i>
+        <div>${this.labels.noSearchResults || 'No messages found'}</div>
+      `;
+      this.resultsEl.appendChild(empty);
+      return;
+    }
+
+    // Count label
+    const countEl = createElement('div', { className: 'tc-search-panel-count' });
+    countEl.textContent = `${matches.length} result${matches.length !== 1 ? 's' : ''}`;
+    this.resultsEl.appendChild(countEl);
+
+    for (const msg of matches) {
+      const item = createElement('div', { className: 'tc-search-panel-item' });
+      item.dataset.msgId = msg.id;
+
+      const info = createElement('div', { className: 'tc-search-panel-item-info' });
+
+      const senderRow = createElement('div', { className: 'tc-search-panel-item-sender' });
+      senderRow.textContent = msg.senderName || 'Unknown';
+
+      const timeEl = createElement('span', { className: 'tc-search-panel-item-time' });
+      timeEl.textContent = formatTime(msg.timestamp);
+      senderRow.appendChild(timeEl);
+      info.appendChild(senderRow);
+
+      const textEl = createElement('div', { className: 'tc-search-panel-item-text' });
+      // Highlight the matching text
+      textEl.innerHTML = this._highlightMatch(msg.content, q);
+      info.appendChild(textEl);
+
+      item.appendChild(info);
+
+      // Click to scroll to message
+      item.addEventListener('click', () => {
+        this.onScrollToMessage(msg.id);
+      });
+
+      this.resultsEl.appendChild(item);
+    }
+  }
+
+  _highlightMatch(text, query) {
+    if (!text) return '';
+    const preview = text.substring(0, 150);
+    const escaped = preview.replace(/[&<>"']/g, c => ({
+      '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
+    })[c]);
+    const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
+    return escaped.replace(regex, '<mark class="tc-search-highlight">$1</mark>');
+  }
+
+  destroy() {
+    if (this.containerEl) {
+      this.containerEl.remove();
+      this.containerEl = null;
+    }
+    this.inputEl = null;
+    this.resultsEl = null;
+    this.toggleBtnEl = null;
+  }
+}
+
+module.exports = { SearchPanel };

package/components/sidebar.js

@@ -0,0 +1,278 @@
+/**
+ * Sidebar component for conversation mode in tacel-chat
+ */
+
+const { getInitials } = require('../utils/dom');
+const { formatChatListTime, truncate } = require('../utils/format');
+const { checkOnline } = require('./presence');
+
+class Sidebar {
+  constructor(options = {}) {
+    this.onSelectConversation = options.onSelectConversation || (() => {});
+    this.onNewChat = options.onNewChat || (() => {});
+    this.onSearch = options.onSearch || (() => {});
+    this.onContextMenu = options.onContextMenu || null;
+    this.labels = options.labels || {};
+    this.showPresence = options.showPresence !== false;
+    this.showSearch = options.showSearch !== false;
+    this.showNewChat = options.showNewChat !== false;
+    this.resizable = options.resizable !== false;
+    this.presenceStaleMs = options.presenceStaleMs || 10000;
+    this.containerEl = null;
+    this.listEl = null;
+    this.searchInput = null;
+    this.searchText = '';
+    this._resizeCleanup = null;
+  }
+
+  /**
+   * Render the sidebar into a container
+   * @param {HTMLElement} parent
+   */
+  render(parent) {
+    this.containerEl = document.createElement('div');
+    this.containerEl.className = 'tc-sidebar';
+
+    // Header
+    const header = document.createElement('div');
+    header.className = 'tc-sidebar-header';
+
+    const titleRow = document.createElement('div');
+    titleRow.className = 'tc-sidebar-title-row';
+    titleRow.innerHTML = `
+      <div class="tc-sidebar-title">
+        <i class="fas fa-comments"></i>
+        <h2>${this.labels.sidebarTitle || 'Messages'}</h2>
+      </div>
+    `;
+
+    if (this.showNewChat) {
+      const newBtn = document.createElement('button');
+      newBtn.className = 'tc-new-chat-btn';
+      newBtn.innerHTML = '<i class="fas fa-plus"></i>';
+      newBtn.title = 'New conversation';
+      newBtn.addEventListener('click', () => this.onNewChat());
+      titleRow.appendChild(newBtn);
+    }
+
+    header.appendChild(titleRow);
+
+    if (this.showSearch) {
+      const searchContainer = document.createElement('div');
+      searchContainer.className = 'tc-search-container';
+      this.searchInput = document.createElement('input');
+      this.searchInput.className = 'tc-search-input';
+      this.searchInput.type = 'text';
+      this.searchInput.placeholder = this.labels.searchPlaceholder || 'Search conversations...';
+      this.searchInput.addEventListener('input', (e) => {
+        this.searchText = e.target.value;
+        this.onSearch(this.searchText);
+      });
+      searchContainer.appendChild(this.searchInput);
+      header.appendChild(searchContainer);
+    }
+
+    this.containerEl.appendChild(header);
+
+    // Chat list
+    this.listEl = document.createElement('div');
+    this.listEl.className = 'tc-chat-list';
+    this.containerEl.appendChild(this.listEl);
+
+    parent.appendChild(this.containerEl);
+
+    // Resize handle
+    if (this.resizable) {
+      this._initResize();
+    }
+  }
+
+  _initResize() {
+    const handle = document.createElement('div');
+    handle.className = 'tc-sidebar-resize-handle';
+    this.containerEl.appendChild(handle);
+
+    let startX = 0;
+    let startWidth = 0;
+    let dragging = false;
+
+    const onMouseDown = (e) => {
+      e.preventDefault();
+      dragging = true;
+      startX = e.clientX;
+      startWidth = this.containerEl.getBoundingClientRect().width;
+      handle.classList.add('tc-sidebar-resize-active');
+      document.body.style.cursor = 'col-resize';
+      document.body.style.userSelect = 'none';
+    };
+
+    const onMouseMove = (e) => {
+      if (!dragging) return;
+      const delta = e.clientX - startX;
+      const newWidth = Math.min(Math.max(startWidth + delta, 200), 500);
+      const container = this.containerEl.closest('.tc-container');
+      if (container) {
+        container.style.gridTemplateColumns = newWidth + 'px 1fr';
+      }
+    };
+
+    const onMouseUp = () => {
+      if (!dragging) return;
+      dragging = false;
+      handle.classList.remove('tc-sidebar-resize-active');
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    };
+
+    handle.addEventListener('mousedown', onMouseDown);
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+
+    this._resizeCleanup = () => {
+      handle.removeEventListener('mousedown', onMouseDown);
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+    };
+  }
+
+  /**
+   * Update the conversation list
+   * @param {Array} conversations - Universal conversation format
+   * @param {string} activeId - Currently active conversation ID
+   * @param {Array} users - All chat users (for presence)
+   */
+  update(conversations, activeId, users = []) {
+    if (!this.listEl) return;
+    this.listEl.innerHTML = '';
+
+    const search = this.searchText.toLowerCase();
+    const teams = [];
+    const directs = [];
+
+    for (const conv of conversations) {
+      if (search) {
+        const nameMatch = (conv.name || '').toLowerCase().includes(search);
+        const msgMatch = (conv.lastMessage || '').toLowerCase().includes(search);
+        if (!nameMatch && !msgMatch) continue;
+      }
+      if (conv.type === 'team') teams.push(conv);
+      else directs.push(conv);
+    }
+
+    if (teams.length > 0) {
+      const teamHeader = document.createElement('div');
+      teamHeader.className = 'tc-list-section-header';
+      teamHeader.textContent = this.labels.teamsHeader || 'Teams';
+      this.listEl.appendChild(teamHeader);
+      teams.forEach(c => this._renderItem(c, activeId, users));
+    }
+
+    if (directs.length > 0) {
+      const directHeader = document.createElement('div');
+      directHeader.className = 'tc-list-section-header';
+      directHeader.textContent = this.labels.directsHeader || 'Direct Messages';
+      this.listEl.appendChild(directHeader);
+      directs.forEach(c => this._renderItem(c, activeId, users));
+    }
+
+    if (teams.length === 0 && directs.length === 0) {
+      const empty = document.createElement('div');
+      empty.className = 'tc-list-empty';
+      empty.textContent = search ? (this.labels.noResults || 'No conversations found') : (this.labels.noConversations || 'No conversations yet');
+      this.listEl.appendChild(empty);
+    }
+  }
+
+  _renderItem(conv, activeId, users) {
+    const item = document.createElement('div');
+    item.className = `tc-chat-item ${String(conv.id) === String(activeId) ? 'tc-chat-item-active' : ''}`;
+    item.dataset.conversationId = conv.id;
+
+    const isTeam = conv.type === 'team';
+
+    // Avatar
+    const avatar = document.createElement('div');
+    avatar.className = `tc-chat-item-avatar ${isTeam ? 'tc-chat-item-avatar-team' : ''}`;
+    avatar.textContent = getInitials(conv.name);
+
+    // Info
+    const info = document.createElement('div');
+    info.className = 'tc-chat-item-info';
+
+    const nameRow = document.createElement('div');
+    nameRow.className = 'tc-chat-item-name-row';
+
+    const nameEl = document.createElement('span');
+    nameEl.className = 'tc-chat-item-name';
+
+    // Presence dot for direct messages
+    if (!isTeam && this.showPresence) {
+      const user = users.find(u => u.username.toLowerCase() === (conv.name || '').toLowerCase());
+      const online = user ? checkOnline(user, this.presenceStaleMs) : false;
+      const dot = document.createElement('span');
+      dot.className = `tc-presence-dot ${online ? 'tc-online' : 'tc-offline'}`;
+      nameEl.appendChild(dot);
+    }
+
+    const nameText = document.createTextNode(conv.name || 'Unknown');
+    nameEl.appendChild(nameText);
+
+    const timeEl = document.createElement('span');
+    timeEl.className = 'tc-chat-item-time';
+    timeEl.textContent = formatChatListTime(conv.lastMessageTime);
+
+    nameRow.appendChild(nameEl);
+    nameRow.appendChild(timeEl);
+
+    const previewRow = document.createElement('div');
+    previewRow.className = 'tc-chat-item-preview-row';
+
+    const preview = document.createElement('span');
+    preview.className = 'tc-chat-item-preview';
+    preview.textContent = truncate(conv.lastMessage || '', 30);
+
+    previewRow.appendChild(preview);
+
+    if (conv.mentionCount > 0) {
+      const mentionBadge = document.createElement('span');
+      mentionBadge.className = 'tc-mention-badge';
+      mentionBadge.innerHTML = `<i class="fas fa-at"></i>${conv.mentionCount > 99 ? '99+' : conv.mentionCount}`;
+      mentionBadge.title = `${conv.mentionCount} mention${conv.mentionCount > 1 ? 's' : ''}`;
+      previewRow.appendChild(mentionBadge);
+    }
+
+    if (conv.unreadCount > 0) {
+      const badge = document.createElement('span');
+      badge.className = 'tc-unread-badge';
+      badge.textContent = conv.unreadCount > 99 ? '99+' : conv.unreadCount;
+      previewRow.appendChild(badge);
+    }
+
+    info.appendChild(nameRow);
+    info.appendChild(previewRow);
+
+    item.appendChild(avatar);
+    item.appendChild(info);
+
+    item.addEventListener('click', () => this.onSelectConversation(conv.id));
+    if (this.onContextMenu) {
+      item.addEventListener('contextmenu', (e) => this.onContextMenu(conv, e));
+    }
+    this.listEl.appendChild(item);
+  }
+
+  destroy() {
+    if (this._resizeCleanup) {
+      this._resizeCleanup();
+      this._resizeCleanup = null;
+    }
+    if (this.containerEl) {
+      this.containerEl.remove();
+      this.containerEl = null;
+    }
+    this.listEl = null;
+    this.searchInput = null;
+  }
+}
+
+module.exports = { Sidebar };

package/components/tabs.js

@@ -0,0 +1,130 @@
+/**
+ * Tab bar component for room mode in tacel-chat
+ */
+
+class TabBar {
+  constructor(options = {}) {
+    this.rooms = options.rooms || [];
+    this.onSelectRoom = options.onSelectRoom || (() => {});
+    this.onContextMenu = options.onContextMenu || null;
+    this.labels = options.labels || {};
+    this.containerEl = null;
+    this.activeRoomType = null;
+    this.badges = {}; // roomType -> count
+    this.mentionBadges = {}; // roomType -> mention count
+  }
+
+  /**
+   * Render the tab bar into a container
+   * @param {HTMLElement} parent
+   */
+  render(parent) {
+    this.containerEl = document.createElement('div');
+    this.containerEl.className = 'tc-topbar';
+
+    const topContent = document.createElement('div');
+    topContent.className = 'tc-topbar-content';
+    topContent.innerHTML = `<h1 class="tc-topbar-title">${this.labels.roomTitle || 'Chat Center'}</h1>`;
+
+    const tabsRow = document.createElement('div');
+    tabsRow.className = 'tc-tabs';
+
+    this.rooms.forEach(room => {
+      const tab = document.createElement('div');
+      tab.className = 'tc-tab';
+      tab.dataset.roomType = room.type;
+      tab.innerHTML = `
+        <i class="${room.icon || 'fas fa-comments'}"></i>
+        <span>${room.name}</span>
+        <div class="tc-tab-mention-badge" style="display:none;"><i class="fas fa-at"></i><span>0</span></div>
+        <div class="tc-tab-badge" style="display:none;">0</div>
+      `;
+      tab.addEventListener('click', () => this.onSelectRoom(room.type));
+      if (this.onContextMenu) {
+        tab.addEventListener('contextmenu', (e) => this.onContextMenu(room, e));
+      }
+      tabsRow.appendChild(tab);
+    });
+
+    // Actions area (search, pinned, files buttons will be placed here)
+    this.actionsEl = document.createElement('div');
+    this.actionsEl.className = 'tc-tabs-actions';
+    tabsRow.appendChild(this.actionsEl);
+
+    this.containerEl.appendChild(topContent);
+    this.containerEl.appendChild(tabsRow);
+    parent.appendChild(this.containerEl);
+  }
+
+  /**
+   * Set the active tab
+   * @param {string} roomType
+   */
+  setActive(roomType) {
+    this.activeRoomType = roomType;
+    if (!this.containerEl) return;
+    const tabs = this.containerEl.querySelectorAll('.tc-tab');
+    tabs.forEach(tab => {
+      const isActive = tab.dataset.roomType === roomType;
+      tab.classList.toggle('tc-tab-active', isActive);
+      // Hide badges on active tab
+      if (isActive) {
+        const badge = tab.querySelector('.tc-tab-badge');
+        if (badge) badge.style.display = 'none';
+        const mBadge = tab.querySelector('.tc-tab-mention-badge');
+        if (mBadge) mBadge.style.display = 'none';
+      }
+    });
+  }
+
+  /**
+   * Set badge count for a room
+   * @param {string} roomType
+   * @param {number} count
+   */
+  setBadge(roomType, count) {
+    this.badges[roomType] = count;
+    if (!this.containerEl) return;
+    if (roomType === this.activeRoomType) return; // Don't show badge on active tab
+    const tab = this.containerEl.querySelector(`.tc-tab[data-room-type="${roomType}"]`);
+    if (!tab) return;
+    const badge = tab.querySelector('.tc-tab-badge');
+    if (!badge) return;
+    if (count > 0) {
+      badge.textContent = count > 99 ? '99+' : count;
+      badge.style.display = '';
+    } else {
+      badge.style.display = 'none';
+    }
+  }
+
+  /**
+   * Set mention badge count for a room
+   * @param {string} roomType
+   * @param {number} count
+   */
+  setMentionBadge(roomType, count) {
+    this.mentionBadges[roomType] = count;
+    if (!this.containerEl) return;
+    if (roomType === this.activeRoomType) return;
+    const tab = this.containerEl.querySelector(`.tc-tab[data-room-type="${roomType}"]`);
+    if (!tab) return;
+    const badge = tab.querySelector('.tc-tab-mention-badge');
+    if (!badge) return;
+    if (count > 0) {
+      badge.querySelector('span').textContent = count > 99 ? '99+' : count;
+      badge.style.display = '';
+    } else {
+      badge.style.display = 'none';
+    }
+  }
+
+  destroy() {
+    if (this.containerEl) {
+      this.containerEl.remove();
+      this.containerEl = null;
+    }
+  }
+}
+
+module.exports = { TabBar };

package/index.js

@@ -0,0 +1,12 @@
+/**
+ * tacel-chat — Entry point
+ * Universal chat module for Tacel Electron applications.
+ */
+
+const { TacelChat } = require('./chat');
+const { initChatAPI } = require('./chat-api');
+const { syncUser, normalizeUsername } = require('./chat-sync');
+const { THEMES } = require('./themes');
+const { ConfirmDialog } = require('./components/confirm');
+
+module.exports = { TacelChat, initChatAPI, syncUser, normalizeUsername, themes: THEMES, ConfirmDialog };

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "tacel-chat",
+  "version": "1.2.0",
+  "description": "Universal chat module for Tacel Electron apps -- conversation and room modes with presence, read receipts, file attachments, reply system, pinned messages, in-chat search, confirm dialogs, resizable sidebar, responsive design, context menus, @mentions, 30 built-in themes, and full CSS variable theming.",
+  "main": "index.js",
+  "files": [
+    "index.js",
+    "chat.js",
+    "chat.css",
+    "chat-api.js",
+    "chat-sync.js",
+    "themes.js",
+    "components/",
+    "utils/",
+    "README.md"
+  ],
+  "keywords": [
+    "tacel",
+    "chat",
+    "electron",
+    "messaging",
+    "real-time",
+    "attachments",
+    "themes",
+    "pinned-messages",
+    "search",
+    "responsive",
+    "css-variables"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Tacel-ltd/Modules.git",
+    "directory": "chat-module"
+  },
+  "homepage": "https://github.com/Tacel-ltd/Modules/tree/main/chat-module#readme",
+  "bugs": {
+    "url": "https://github.com/Tacel-ltd/Modules/issues"
+  },
+  "author": "Tacel",
+  "license": "ISC"
+}