tacel-chat 1.2.0

package/components/message.js

@@ -0,0 +1,200 @@
+/**
+ * Single message rendering component for tacel-chat
+ */
+
+const { getInitials } = require('../utils/dom');
+const { formatTime } = require('../utils/format');
+const { processMessageText } = require('../utils/linkify');
+
+/**
+ * Render a single message element
+ * @param {object} msg - Universal message format
+ * @param {object} options
+ * @param {string} options.mode - 'conversation' or 'room'
+ * @param {string} options.currentUsername
+ * @param {boolean} options.enableMentions
+ * @param {boolean} options.enableLinks
+ * @param {boolean} options.showSeen - Whether to show seen indicator on this message
+ * @param {Array} options.seenBy - Read receipt data for this message
+ * @param {object} options.attachmentManager - AttachmentManager instance
+ * @returns {HTMLElement}
+ */
+function renderMessage(msg, options = {}) {
+  const {
+    mode = 'conversation',
+    currentUsername = '',
+    enableMentions = false,
+    enableLinks = true,
+    showSeen = false,
+    seenBy = [],
+    attachmentManager = null
+  } = options;
+
+  const isOwn = msg.isOwn;
+  const container = document.createElement('div');
+
+  if (mode === 'room') {
+    // Room mode: card-style messages
+    container.className = `tc-msg-container ${isOwn ? 'tc-msg-own' : ''}`;
+
+    const avatar = document.createElement('div');
+    avatar.className = `tc-msg-avatar ${isOwn ? 'tc-msg-avatar-own' : ''}`;
+    avatar.textContent = getInitials(msg.senderName);
+
+    const content = document.createElement('div');
+    content.className = 'tc-msg-content tc-msg-card';
+
+    // Reply reference
+    if (msg.replyTo) {
+      content.appendChild(_buildReplyRef(msg.replyTo));
+    }
+
+    const header = document.createElement('div');
+    header.className = 'tc-msg-header';
+    const nameSpan = document.createElement('span');
+    nameSpan.className = 'tc-msg-sender';
+    nameSpan.textContent = isOwn ? 'You' : msg.senderName;
+    const timeSpan = document.createElement('span');
+    timeSpan.className = 'tc-msg-time';
+    timeSpan.textContent = formatTime(msg.timestamp);
+    header.appendChild(nameSpan);
+    if (msg.isPinned) {
+      const pinIcon = document.createElement('span');
+      pinIcon.className = 'tc-msg-pin-icon';
+      pinIcon.innerHTML = '<i class="fas fa-thumbtack"></i>';
+      pinIcon.title = 'Pinned message';
+      header.appendChild(pinIcon);
+    }
+    header.appendChild(timeSpan);
+
+    content.appendChild(header);
+
+    // Only render text if there is content (skip for file-only messages)
+    if (msg.content && msg.content.trim()) {
+      const textEl = document.createElement('div');
+      textEl.className = 'tc-msg-text';
+      textEl.innerHTML = processMessageText(msg.content, currentUsername, enableMentions, enableLinks);
+      content.appendChild(textEl);
+    }
+
+    // Attachment preview
+    if (msg.hasAttachment && attachmentManager) {
+      const attachContainer = document.createElement('div');
+      attachContainer.className = 'tc-msg-attachment';
+      content.appendChild(attachContainer);
+      // Render async
+      attachmentManager.renderAttachmentPreview(msg, attachContainer);
+    }
+
+    container.appendChild(avatar);
+    container.appendChild(content);
+  } else {
+    // Conversation mode: bubble-style messages
+    container.className = `tc-msg-container tc-msg-bubble-mode ${isOwn ? 'tc-msg-own' : ''}`;
+
+    const avatar = document.createElement('div');
+    avatar.className = 'tc-msg-avatar tc-msg-avatar-square';
+    avatar.textContent = getInitials(msg.senderName);
+
+    const content = document.createElement('div');
+    content.className = 'tc-msg-content';
+
+    // Reply reference
+    if (msg.replyTo) {
+      content.appendChild(_buildReplyRef(msg.replyTo));
+    }
+
+    const header = document.createElement('div');
+    header.className = 'tc-msg-header';
+    const nameSpan = document.createElement('span');
+    nameSpan.className = 'tc-msg-sender';
+    nameSpan.textContent = msg.senderName;
+    const timeSpan = document.createElement('span');
+    timeSpan.className = 'tc-msg-time';
+    timeSpan.textContent = formatTime(msg.timestamp);
+    header.appendChild(nameSpan);
+    if (msg.isPinned) {
+      const pinIcon = document.createElement('span');
+      pinIcon.className = 'tc-msg-pin-icon';
+      pinIcon.innerHTML = '<i class="fas fa-thumbtack"></i>';
+      pinIcon.title = 'Pinned message';
+      header.appendChild(pinIcon);
+    }
+    header.appendChild(timeSpan);
+
+    content.appendChild(header);
+
+    // Only render bubble if there is content (skip for file-only messages)
+    if (msg.content && msg.content.trim()) {
+      const bubble = document.createElement('div');
+      bubble.className = `tc-msg-bubble ${isOwn ? 'tc-msg-bubble-own' : 'tc-msg-bubble-other'}`;
+      bubble.innerHTML = processMessageText(msg.content, currentUsername, enableMentions, enableLinks);
+      content.appendChild(bubble);
+    }
+
+    // Attachment preview
+    if (msg.hasAttachment && attachmentManager) {
+      const attachContainer = document.createElement('div');
+      attachContainer.className = 'tc-msg-attachment';
+      content.appendChild(attachContainer);
+      attachmentManager.renderAttachmentPreview(msg, attachContainer);
+    }
+
+    // Seen indicator
+    if (showSeen && isOwn && seenBy && seenBy.length > 0) {
+      const seenEl = document.createElement('div');
+      seenEl.className = 'tc-msg-seen';
+      const names = seenBy.map(r => r.username).join(', ');
+      seenEl.innerHTML = `<span class="tc-msg-seen-icon">✓✓</span> Seen`;
+      seenEl.title = `Seen by: ${names}`;
+      content.appendChild(seenEl);
+    }
+
+    container.appendChild(avatar);
+    container.appendChild(content);
+  }
+
+  return container;
+}
+
+/**
+ * Build a reply reference element shown above a message.
+ * Mobile-style: compact quote with accent bar, original sender name, and preview text.
+ * Clickable — dispatches a custom event so the message area can scroll to the original.
+ * @param {object} replyTo - { id, senderName, content }
+ * @returns {HTMLElement}
+ */
+function _buildReplyRef(replyTo) {
+  const ref = document.createElement('div');
+  ref.className = 'tc-reply-ref';
+  if (replyTo.id) ref.dataset.replyToId = replyTo.id;
+
+  const senderEl = document.createElement('div');
+  senderEl.className = 'tc-reply-ref-sender';
+  senderEl.textContent = replyTo.senderName || 'Unknown';
+
+  const textEl = document.createElement('div');
+  textEl.className = 'tc-reply-ref-text';
+  const preview = (replyTo.content || '').substring(0, 120);
+  textEl.textContent = preview.length < (replyTo.content || '').length ? preview + '…' : preview;
+
+  ref.appendChild(senderEl);
+  ref.appendChild(textEl);
+
+  // Click to scroll to original message
+  if (replyTo.id) {
+    ref.style.cursor = 'pointer';
+    ref.title = 'Click to see original message';
+    ref.addEventListener('click', (e) => {
+      e.stopPropagation();
+      ref.dispatchEvent(new CustomEvent('tc-scroll-to-message', {
+        bubbles: true,
+        detail: { messageId: replyTo.id }
+      }));
+    });
+  }
+
+  return ref;
+}
+
+module.exports = { renderMessage };

package/components/new-chat.js

@@ -0,0 +1,130 @@
+/**
+ * New chat modal component for tacel-chat
+ */
+
+const { getInitials } = require('../utils/dom');
+
+class NewChatModal {
+  constructor(options = {}) {
+    this.onStartDirect = options.onStartDirect || (async () => ({ success: false }));
+    this.onClose = options.onClose || (() => {});
+    this.mountEl = options.mountEl || document.body;
+    this.labels = options.labels || {};
+    this.overlayEl = null;
+    this.users = [];
+    this.existingPeerIds = [];
+    this.currentUsername = '';
+    this.searchText = '';
+  }
+
+  /**
+   * Show the modal
+   * @param {Array} users - All chat users
+   * @param {Array} existingPeerIds - User IDs that already have direct conversations
+   * @param {string} currentUsername
+   */
+  show(users, existingPeerIds, currentUsername) {
+    this.users = users || [];
+    this.existingPeerIds = existingPeerIds || [];
+    this.currentUsername = currentUsername;
+    this.searchText = '';
+    this._render();
+  }
+
+  hide() {
+    if (this.overlayEl) {
+      this.overlayEl.remove();
+      this.overlayEl = null;
+    }
+    this.onClose();
+  }
+
+  _render() {
+    if (this.overlayEl) this.overlayEl.remove();
+
+    this.overlayEl = document.createElement('div');
+    this.overlayEl.className = 'tc-modal-overlay';
+    this.overlayEl.addEventListener('click', (e) => {
+      if (e.target === this.overlayEl) this.hide();
+    });
+
+    const modal = document.createElement('div');
+    modal.className = 'tc-modal';
+
+    const header = document.createElement('div');
+    header.className = 'tc-modal-header';
+    header.innerHTML = `
+      <h3 class="tc-modal-title">${this.labels.newChatTitle || 'New Direct Message'}</h3>
+      <button class="tc-modal-close" type="button">&times;</button>
+    `;
+    header.querySelector('.tc-modal-close').addEventListener('click', () => this.hide());
+
+    const searchInput = document.createElement('input');
+    searchInput.className = 'tc-modal-search';
+    searchInput.type = 'text';
+    searchInput.placeholder = this.labels.newChatSearch || 'Search users...';
+    searchInput.addEventListener('input', (e) => {
+      this.searchText = e.target.value;
+      this._renderList(listContainer);
+    });
+
+    const listContainer = document.createElement('div');
+    listContainer.className = 'tc-modal-user-list';
+
+    modal.appendChild(header);
+    modal.appendChild(searchInput);
+    modal.appendChild(listContainer);
+    this.overlayEl.appendChild(modal);
+    this.mountEl.appendChild(this.overlayEl);
+
+    this._renderList(listContainer);
+    searchInput.focus();
+  }
+
+  _renderList(container) {
+    container.innerHTML = '';
+    const normalizedCurrent = this.currentUsername.toLowerCase().trim();
+    const search = this.searchText.toLowerCase();
+
+    const filtered = this.users.filter(u => {
+      if (u.username.toLowerCase().trim() === normalizedCurrent) return false;
+      if (this.existingPeerIds.includes(u.id)) return false;
+      if (search && !u.username.toLowerCase().includes(search)) return false;
+      return true;
+    });
+
+    if (filtered.length === 0) {
+      const empty = document.createElement('div');
+      empty.className = 'tc-modal-empty';
+      empty.textContent = search ? 'No users found' : 'No new users to message';
+      container.appendChild(empty);
+      return;
+    }
+
+    filtered.forEach(user => {
+      const item = document.createElement('div');
+      item.className = 'tc-modal-user-item';
+      item.innerHTML = `
+        <div class="tc-modal-user-avatar">${getInitials(user.username)}</div>
+        <div class="tc-modal-user-info">
+          <span class="tc-modal-user-name">${user.username}</span>
+          ${user.app ? `<span class="tc-modal-user-app">${user.app}</span>` : ''}
+        </div>
+      `;
+      item.addEventListener('click', () => this._selectUser(user));
+      container.appendChild(item);
+    });
+  }
+
+  async _selectUser(user) {
+    const result = await this.onStartDirect(this.currentUsername, user.id);
+    this.hide();
+    return result;
+  }
+
+  destroy() {
+    this.hide();
+  }
+}
+
+module.exports = { NewChatModal };

package/components/pinned-panel.js

@@ -0,0 +1,184 @@
+/**
+ * Pinned Messages Panel component for tacel-chat
+ * Shows a list of all pinned messages in the current conversation/room.
+ * Supports: click to scroll to message, unpin via callback.
+ */
+
+const { createElement } = require('../utils/dom');
+const { formatTime } = require('../utils/format');
+
+class PinnedPanel {
+  constructor(options = {}) {
+    this.onScrollToMessage = options.onScrollToMessage || (() => {});
+    this.onUnpinMessage = options.onUnpinMessage || null;
+    this.labels = options.labels || {};
+
+    this.containerEl = null;
+    this.listEl = null;
+    this.isOpen = false;
+    this.pinnedMessages = []; // { id, content, senderName, timestamp }
+  }
+
+  /**
+   * Create the toggle button for the header
+   * @returns {HTMLElement}
+   */
+  createToggleButton() {
+    const btn = createElement('button', {
+      className: 'tc-pinned-toggle-btn',
+      innerHTML: '<i class="fas fa-thumbtack"></i>',
+      attrs: { type: 'button', title: this.labels.pinnedPanel || 'Pinned 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-pinned-panel' });
+    this.containerEl.style.display = 'none';
+
+    // Header
+    const header = createElement('div', { className: 'tc-pinned-panel-header' });
+    header.innerHTML = `
+      <div class="tc-pinned-panel-title">
+        <i class="fas fa-thumbtack"></i>
+        <span>${this.labels.pinnedPanel || 'Pinned Messages'}</span>
+      </div>
+    `;
+    const closeBtn = createElement('button', {
+      className: 'tc-pinned-panel-close',
+      innerHTML: '<i class="fas fa-times"></i>',
+      attrs: { type: 'button' },
+      events: { click: () => this.close() }
+    });
+    header.appendChild(closeBtn);
+    this.containerEl.appendChild(header);
+
+    // List
+    this.listEl = createElement('div', { className: 'tc-pinned-panel-list' });
+    this.containerEl.appendChild(this.listEl);
+
+    parent.appendChild(this.containerEl);
+  }
+
+  /**
+   * Update the pinned messages list
+   * @param {Array} pinnedMessages - Array of { id, content, senderName, timestamp }
+   */
+  updatePinned(pinnedMessages) {
+    this.pinnedMessages = pinnedMessages || [];
+
+    // Update badge on toggle button
+    if (this.toggleBtnEl) {
+      const existing = this.toggleBtnEl.querySelector('.tc-pinned-badge');
+      if (existing) existing.remove();
+      if (this.pinnedMessages.length > 0) {
+        const badge = createElement('span', {
+          className: 'tc-pinned-badge',
+          textContent: String(this.pinnedMessages.length)
+        });
+        this.toggleBtnEl.appendChild(badge);
+      }
+    }
+
+    if (this.isOpen) this._renderList();
+  }
+
+  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-pinned-toggle-active');
+    this._renderList();
+  }
+
+  close() {
+    this.isOpen = false;
+    if (this.containerEl) this.containerEl.style.display = 'none';
+    if (this.toggleBtnEl) this.toggleBtnEl.classList.remove('tc-pinned-toggle-active');
+  }
+
+  _renderList() {
+    if (!this.listEl) return;
+    this.listEl.innerHTML = '';
+
+    if (this.pinnedMessages.length === 0) {
+      const empty = createElement('div', { className: 'tc-pinned-panel-empty' });
+      empty.innerHTML = `
+        <i class="fas fa-thumbtack" style="font-size:28px;opacity:0.2;margin-bottom:8px;"></i>
+        <div>${this.labels.noPinned || 'No pinned messages'}</div>
+      `;
+      this.listEl.appendChild(empty);
+      return;
+    }
+
+    for (const msg of this.pinnedMessages) {
+      const item = createElement('div', { className: 'tc-pinned-panel-item' });
+      item.dataset.msgId = msg.id;
+
+      const info = createElement('div', { className: 'tc-pinned-panel-item-info' });
+
+      const senderRow = createElement('div', { className: 'tc-pinned-panel-item-sender' });
+      senderRow.textContent = msg.senderName || 'Unknown';
+      info.appendChild(senderRow);
+
+      const textEl = createElement('div', { className: 'tc-pinned-panel-item-text' });
+      const preview = (msg.content || '').substring(0, 100);
+      textEl.textContent = preview.length < (msg.content || '').length ? preview + '…' : preview;
+      info.appendChild(textEl);
+
+      const timeEl = createElement('div', { className: 'tc-pinned-panel-item-time' });
+      timeEl.textContent = formatTime(msg.timestamp);
+      info.appendChild(timeEl);
+
+      const actions = createElement('div', { className: 'tc-pinned-panel-item-actions' });
+      if (this.onUnpinMessage) {
+        const unpinBtn = createElement('button', {
+          className: 'tc-pinned-panel-item-btn',
+          innerHTML: '<i class="fas fa-times"></i>',
+          attrs: { title: 'Unpin', type: 'button' },
+          events: {
+            click: (e) => {
+              e.stopPropagation();
+              this.onUnpinMessage(msg);
+            }
+          }
+        });
+        actions.appendChild(unpinBtn);
+      }
+
+      item.appendChild(info);
+      item.appendChild(actions);
+
+      // Click to scroll to message
+      item.addEventListener('click', () => {
+        this.onScrollToMessage(msg.id);
+      });
+
+      this.listEl.appendChild(item);
+    }
+  }
+
+  destroy() {
+    if (this.containerEl) {
+      this.containerEl.remove();
+      this.containerEl = null;
+    }
+    this.listEl = null;
+    this.toggleBtnEl = null;
+  }
+}
+
+module.exports = { PinnedPanel };

package/components/presence.js

@@ -0,0 +1,45 @@
+/**
+ * Presence indicator helpers for tacel-chat
+ */
+
+const { formatRelativeTime } = require('../utils/format');
+
+/**
+ * Create a presence dot element
+ * @param {boolean} isOnline
+ * @returns {HTMLElement}
+ */
+function createPresenceDot(isOnline) {
+  const dot = document.createElement('span');
+  dot.className = `tc-presence-dot ${isOnline ? 'tc-online' : 'tc-offline'}`;
+  return dot;
+}
+
+/**
+ * Get presence status text for the chat header
+ * @param {object} user - { isOnline, lastSeen }
+ * @param {number} staleMs - Staleness threshold in ms
+ * @returns {string}
+ */
+function getPresenceText(user, staleMs = 10000) {
+  if (!user) return '';
+  const isOnline = checkOnline(user, staleMs);
+  if (isOnline) return 'Online';
+  return `Last seen ${formatRelativeTime(user.lastSeen)}`;
+}
+
+/**
+ * Check if a user is truly online (considering staleness)
+ * @param {object} user - { isOnline, lastSeen }
+ * @param {number} staleMs - Staleness threshold
+ * @returns {boolean}
+ */
+function checkOnline(user, staleMs = 10000) {
+  if (!user || !user.isOnline) return false;
+  if (!user.lastSeen || staleMs <= 0) return user.isOnline;
+  const lastSeen = new Date(user.lastSeen).getTime();
+  if (isNaN(lastSeen)) return user.isOnline;
+  return (Date.now() - lastSeen) < staleMs;
+}
+
+module.exports = { createPresenceDot, getPresenceText, checkOnline };