collabdocchat 1.2.13 → 2.0.0

package/src/utils/chat-enhancements.js

@@ -0,0 +1,509 @@
+/**
+ * 聊天增强功能模块
+ * 包含消息撤回、@提及、已读状态等功能
+ */
+
+export class ChatEnhancements {
+  constructor(apiService, wsService, currentUserId) {
+    this.apiService = apiService;
+    this.wsService = wsService;
+    this.currentUserId = currentUserId;
+    this.messageTimestamps = new Map(); // 存储消息发送时间
+    this.mentionSuggestions = [];
+  }
+
+  /**
+   * 渲染消息（带撤回按钮和已读状态）
+   */
+  renderMessage(msg, messagesDiv, groupMembers) {
+    const messageEl = document.createElement('div');
+    messageEl.className = `message ${msg.sender === this.currentUserId ? 'own' : ''}`;
+    messageEl.dataset.messageId = msg._id;
+    
+    const isOwn = msg.sender === this.currentUserId;
+    const canRecall = isOwn && !msg.isRecalled && this.canRecallMessage(msg.timestamp);
+    
+    // 处理@提及高亮
+    let content = this.highlightMentions(msg.content, groupMembers);
+    
+    // 检查是否@了当前用户
+    const mentionsMe = this.checkMentionsMe(msg.content, groupMembers);
+    if (mentionsMe && !isOwn) {
+      messageEl.classList.add('mentions-me');
+    }
+    
+    messageEl.innerHTML = `
+      <div class="message-header">
+        <span class="message-user">${msg.username}</span>
+        <span class="message-time">${new Date(msg.timestamp).toLocaleTimeString()}</span>
+        ${canRecall ? `<button class="btn-recall" data-message-id="${msg._id}" title="撤回消息">撤回</button>` : ''}
+      </div>
+      <div class="message-content ${msg.isRecalled ? 'recalled' : ''}">${content}</div>
+      ${isOwn && !msg.isRecalled ? `<div class="message-status">${this.getReadStatus(msg)}</div>` : ''}
+    `;
+    
+    messagesDiv.appendChild(messageEl);
+    
+    // 添加撤回按钮事件
+    if (canRecall) {
+      const recallBtn = messageEl.querySelector('.btn-recall');
+      recallBtn.addEventListener('click', () => this.recallMessage(msg._id, messageEl));
+    }
+    
+    // 添加图片点击查看功能
+    const images = messageEl.querySelectorAll('.chat-image');
+    images.forEach(img => {
+      img.style.cursor = 'pointer';
+      img.addEventListener('click', () => {
+        this.showImagePreview(img.src, img.alt);
+      });
+    });
+    
+    // 存储消息时间戳
+    this.messageTimestamps.set(msg._id, new Date(msg.timestamp));
+    
+    return messageEl;
+  }
+
+  /**
+   * 显示图片预览
+   */
+  showImagePreview(src, alt) {
+    // 创建预览模态框
+    const modal = document.createElement('div');
+    modal.className = 'image-preview-modal';
+    modal.innerHTML = `
+      <div class="image-preview-backdrop"></div>
+      <div class="image-preview-content">
+        <button class="image-preview-close">&times;</button>
+        <img src="${src}" alt="${alt}" class="image-preview-img">
+        <div class="image-preview-caption">${alt || '图片预览'}</div>
+      </div>
+    `;
+    
+    document.body.appendChild(modal);
+    
+    // 关闭按钮
+    const closeBtn = modal.querySelector('.image-preview-close');
+    const backdrop = modal.querySelector('.image-preview-backdrop');
+    
+    const closeModal = () => {
+      modal.classList.add('closing');
+      setTimeout(() => modal.remove(), 300);
+    };
+    
+    closeBtn.addEventListener('click', closeModal);
+    backdrop.addEventListener('click', closeModal);
+    
+    // ESC键关闭
+    const handleEsc = (e) => {
+      if (e.key === 'Escape') {
+        closeModal();
+        document.removeEventListener('keydown', handleEsc);
+      }
+    };
+    document.addEventListener('keydown', handleEsc);
+    
+    // 添加显示动画
+    setTimeout(() => modal.classList.add('show'), 10);
+  }
+
+  /**
+   * 检查消息是否可以撤回（2分钟内）
+   */
+  canRecallMessage(timestamp) {
+    const now = Date.now();
+    const messageTime = new Date(timestamp).getTime();
+    const twoMinutes = 2 * 60 * 1000;
+    return (now - messageTime) < twoMinutes;
+  }
+
+  /**
+   * 撤回消息
+   */
+  async recallMessage(messageId, messageEl) {
+    try {
+      await this.apiService.recallMessage(this.currentGroupId, messageId);
+      
+      // 更新UI
+      const contentEl = messageEl.querySelector('.message-content');
+      contentEl.textContent = '[消息已撤回]';
+      contentEl.classList.add('recalled');
+      
+      // 移除撤回按钮
+      const recallBtn = messageEl.querySelector('.btn-recall');
+      if (recallBtn) recallBtn.remove();
+      
+      // 通过WebSocket通知其他用户
+      this.wsService.recallMessage(messageId);
+    } catch (error) {
+      alert('撤回失败: ' + error.message);
+    }
+  }
+
+  /**
+   * 处理@提及功能
+   */
+  setupMentionInput(inputEl, groupMembers) {
+    this.mentionSuggestions = groupMembers;
+    let suggestionBox = null;
+    
+    inputEl.addEventListener('input', (e) => {
+      const value = e.target.value;
+      const cursorPos = e.target.selectionStart;
+      
+      // 检查是否输入了@
+      const textBeforeCursor = value.substring(0, cursorPos);
+      const atMatch = textBeforeCursor.match(/@(\w*)$/);
+      
+      if (atMatch) {
+        const query = atMatch[1].toLowerCase();
+        const matches = this.mentionSuggestions.filter(member => 
+          member.username.toLowerCase().includes(query) && 
+          member._id !== this.currentUserId
+        );
+        
+        if (matches.length > 0) {
+          this.showMentionSuggestions(inputEl, matches, (selected) => {
+            // 替换@文本为完整的用户名
+            const beforeAt = textBeforeCursor.substring(0, atMatch.index);
+            const afterCursor = value.substring(cursorPos);
+            inputEl.value = `${beforeAt}@${selected.username} ${afterCursor}`;
+            inputEl.focus();
+            
+            // 移动光标到用户名后
+            const newPos = beforeAt.length + selected.username.length + 2;
+            inputEl.setSelectionRange(newPos, newPos);
+            
+            this.hideMentionSuggestions();
+          });
+        } else {
+          this.hideMentionSuggestions();
+        }
+      } else {
+        this.hideMentionSuggestions();
+      }
+    });
+    
+    // 点击外部关闭建议框
+    document.addEventListener('click', (e) => {
+      if (!inputEl.contains(e.target) && suggestionBox && !suggestionBox.contains(e.target)) {
+        this.hideMentionSuggestions();
+      }
+    });
+  }
+
+  /**
+   * 显示@提及建议框
+   */
+  showMentionSuggestions(inputEl, matches, onSelect) {
+    this.hideMentionSuggestions();
+    
+    const suggestionBox = document.createElement('div');
+    suggestionBox.className = 'mention-suggestions';
+    suggestionBox.id = 'mentionSuggestions';
+    
+    matches.forEach(member => {
+      const item = document.createElement('div');
+      item.className = 'mention-item';
+      item.innerHTML = `
+        <div class="avatar" style="width: 30px; height: 30px; font-size: 14px;">
+          ${member.username[0].toUpperCase()}
+        </div>
+        <span>${member.username}</span>
+      `;
+      item.addEventListener('click', () => onSelect(member));
+      suggestionBox.appendChild(item);
+    });
+    
+    // 定位建议框
+    const rect = inputEl.getBoundingClientRect();
+    suggestionBox.style.position = 'absolute';
+    suggestionBox.style.bottom = (window.innerHeight - rect.top + 5) + 'px';
+    suggestionBox.style.left = rect.left + 'px';
+    suggestionBox.style.width = rect.width + 'px';
+    
+    document.body.appendChild(suggestionBox);
+  }
+
+  /**
+   * 隐藏@提及建议框
+   */
+  hideMentionSuggestions() {
+    const suggestionBox = document.getElementById('mentionSuggestions');
+    if (suggestionBox) {
+      suggestionBox.remove();
+    }
+  }
+
+  /**
+   * 高亮@提及
+   */
+  highlightMentions(content, groupMembers) {
+    let highlighted = content;
+    
+    groupMembers.forEach(member => {
+      const regex = new RegExp(`@${member.username}\\b`, 'g');
+      highlighted = highlighted.replace(regex, `<span class="mention">@${member.username}</span>`);
+    });
+    
+    return highlighted;
+  }
+
+  /**
+   * 检查消息是否@了当前用户
+   */
+  checkMentionsMe(content, groupMembers) {
+    const currentUser = groupMembers.find(m => m._id === this.currentUserId);
+    if (!currentUser) return false;
+    
+    const regex = new RegExp(`@${currentUser.username}\\b`);
+    return regex.test(content);
+  }
+
+  /**
+   * 获取消息已读状态
+   */
+  getReadStatus(msg) {
+    if (!msg.readBy || msg.readBy.length === 0) {
+      return '<span class="read-status unread">未读</span>';
+    }
+    
+    const readCount = msg.readBy.length;
+    return `<span class="read-status read">已读 ${readCount}</span>`;
+  }
+
+  /**
+   * 标记消息为已读
+   */
+  async markAsRead(messageId) {
+    try {
+      await this.apiService.markMessageAsRead(this.currentGroupId, messageId);
+      this.wsService.markMessageAsRead(messageId);
+    } catch (error) {
+      console.error('标记已读失败:', error);
+    }
+  }
+
+  /**
+   * 批量标记消息为已读
+   */
+  async markAllAsRead(messageIds) {
+    try {
+      await this.apiService.markMessagesAsRead(this.currentGroupId, messageIds);
+    } catch (error) {
+      console.error('批量标记失败:', error);
+    }
+  }
+
+  /**
+   * 获取未读消息数量
+   */
+  async getUnreadCount() {
+    try {
+      const result = await this.apiService.getUnreadCount(this.currentGroupId);
+      return result.unreadCount;
+    } catch (error) {
+      console.error('获取未读数量失败:', error);
+      return 0;
+    }
+  }
+
+  /**
+   * 监听消息撤回事件
+   */
+  onMessageRecalled(callback) {
+    this.wsService.on('message_recalled', (data) => {
+      callback(data);
+    });
+  }
+
+  /**
+   * 监听已读回执
+   */
+  onMessageRead(callback) {
+    this.wsService.on('message_read_receipt', (data) => {
+      callback(data);
+    });
+  }
+
+  /**
+   * 设置当前群组ID
+   */
+  setCurrentGroup(groupId) {
+    this.currentGroupId = groupId;
+  }
+
+  /**
+   * 显示未读消息徽章
+   */
+  async showUnreadBadge(badgeEl) {
+    const count = await this.getUnreadCount();
+    if (count > 0) {
+      badgeEl.textContent = count > 99 ? '99+' : count;
+      badgeEl.style.display = 'inline-block';
+    } else {
+      badgeEl.style.display = 'none';
+    }
+  }
+
+  /**
+   * 解析消息中的@提及用户ID
+   */
+  parseMentions(content, groupMembers) {
+    const mentions = [];
+    
+    groupMembers.forEach(member => {
+      const regex = new RegExp(`@${member.username}\\b`, 'g');
+      if (regex.test(content)) {
+        mentions.push(member._id);
+      }
+    });
+    
+    return mentions;
+  }
+
+  /**
+   * 清理资源
+   */
+  cleanup() {
+    this.messageTimestamps.clear();
+    this.hideMentionSuggestions();
+  }
+}
+
+/**
+ * 在线状态管理
+ */
+export class OnlineStatusManager {
+  constructor(wsService) {
+    this.wsService = wsService;
+    this.onlineUsers = new Set();
+  }
+
+  /**
+   * 更新用户在线状态
+   */
+  updateUserStatus(userId, isOnline) {
+    if (isOnline) {
+      this.onlineUsers.add(userId);
+    } else {
+      this.onlineUsers.delete(userId);
+    }
+    
+    // 更新UI中的在线状态指示器
+    this.updateStatusIndicator(userId, isOnline);
+  }
+
+  /**
+   * 更新状态指示器
+   */
+  updateStatusIndicator(userId, isOnline) {
+    const indicators = document.querySelectorAll(`[data-user-id="${userId}"] .online-indicator`);
+    indicators.forEach(indicator => {
+      indicator.className = `online-indicator ${isOnline ? 'online' : 'offline'}`;
+      indicator.title = isOnline ? '在线' : '离线';
+    });
+  }
+
+  /**
+   * 检查用户是否在线
+   */
+  isUserOnline(userId) {
+    return this.onlineUsers.has(userId);
+  }
+
+  /**
+   * 监听在线状态变化
+   */
+  setupListeners() {
+    this.wsService.on('user_online', (data) => {
+      this.updateUserStatus(data.userId, true);
+    });
+
+    this.wsService.on('user_offline', (data) => {
+      this.updateUserStatus(data.userId, false);
+    });
+  }
+
+  /**
+   * 渲染在线状态指示器
+   */
+  renderStatusIndicator(userId) {
+    const isOnline = this.isUserOnline(userId);
+    return `<span class="online-indicator ${isOnline ? 'online' : 'offline'}" title="${isOnline ? '在线' : '离线'}"></span>`;
+  }
+}
+
+/**
+ * 消息通知管理
+ */
+export class MessageNotificationManager {
+  constructor() {
+    this.requestPermission();
+  }
+
+  /**
+   * 请求通知权限
+   */
+  async requestPermission() {
+    if ('Notification' in window && Notification.permission === 'default') {
+      await Notification.requestPermission();
+    }
+  }
+
+  /**
+   * 显示桌面通知
+   */
+  showNotification(title, body, options = {}) {
+    if ('Notification' in window && Notification.permission === 'granted') {
+      const notification = new Notification(title, {
+        body: body,
+        icon: options.icon || '/icon.png',
+        badge: '/icon.png',
+        tag: options.tag || 'chat-message',
+        requireInteraction: options.requireInteraction || false
+      });
+
+      notification.onclick = () => {
+        window.focus();
+        if (options.onClick) {
+          options.onClick();
+        }
+        notification.close();
+      };
+
+      // 自动关闭
+      setTimeout(() => notification.close(), options.duration || 5000);
+    }
+  }
+
+  /**
+   * 显示@提及通知
+   */
+  showMentionNotification(username, message) {
+    this.showNotification(
+      `${username} 提到了你`,
+      message,
+      {
+        tag: 'mention',
+        requireInteraction: true
+      }
+    );
+  }
+
+  /**
+   * 显示新消息通知
+   */
+  showNewMessageNotification(username, message) {
+    this.showNotification(
+      `${username} 发来新消息`,
+      message,
+      {
+        tag: 'new-message'
+      }
+    );
+  }
+}
+
+