Comments System

import CollabKitClient from '@collab-kit/client';

const client = new CollabKitClient({
  serverUrl: 'https://api.collab-kit.com',
  authToken: '<jwt-token>',
});

await client.join({ role: 'editor' });

const comments = await client.comments.getAll();
comments.forEach(renderComment);

async function addComment(text: string, taggedUserIds?: string[]) {
  const comment = await client.comments.add(text, {
    tags: taggedUserIds,
  });

  // Set up per-comment listener
  comment.on('update', (updated) => {
    rerenderComment(updated);
  });

  renderComment(comment);
  return comment;
}

async function replyToComment(comment, text: string) {
  const reply = await comment.reply(text);
  renderReply(comment.id, reply);
  return reply;
}

async function addReaction(comment, emoji: string) {
  await comment.addReaction(emoji);
}

async function removeReaction(comment, emoji: string) {
  await comment.deleteReaction(emoji);
}

async function tagUser(comment, userId: string) {
  await comment.addTag(userId);
}

// Listen for being tagged
client.currentUser?.on('commentTagged', (comment) => {
  showNotification(`You were tagged in: "${comment.text}"`);
});

// New comment from another user
client.comments.on('add', (comment) => {
  renderComment(comment);
  comment.on('update', (updated) => rerenderComment(updated));
});

// Comment deleted by another user
client.comments.on('delete', (commentId) => {
  removeCommentFromUI(commentId);
});

// Comment updated (new reaction, reply, or tag)
client.comments.on('update', (comment) => {
  rerenderComment(comment);
});