Collaboration Components

The shared collaboration components at frontend/shared/src/components/Collaboration/ provide multi-user collaboration features including presence indicators, comment panels, and sharing dialogs. These components integrate with the WebSocket infrastructure for real-time updates.

PresenceIndicator

File: frontend/shared/src/components/Collaboration/PresenceIndicator.tsx

Displays avatars of users currently viewing or editing a resource. Integrates with the Presence real-time module for live updates.

CommentsPanel

File: frontend/shared/src/components/Collaboration/CommentsPanel.tsx

A threaded comment panel for adding discussions to dashboards, queries, models, and other artifacts. Supports inline mentions, markdown formatting, and real-time comment delivery.

ShareDialog

File: frontend/shared/src/components/Collaboration/ShareDialog.tsx

A sharing dialog for managing access to resources including user/group selection, permission levels (viewer, editor, owner), and link sharing with configurable expiration.

Types

// frontend/shared/src/components/Collaboration/types.ts
 
interface CollaboratorPresence {
  userId: string;
  userName: string;
  avatar?: string;
  cursor?: { x: number; y: number };
  activeWidget?: string;
  lastActive: string;
}
 
interface Comment {
  id: string;
  content: string;
  author: { id: string; name: string; avatar?: string };
  createdAt: string;
  updatedAt?: string;
  parentId?: string;
  mentions: string[];
  reactions: Record<string, string[]>;
}
 
interface SharePermission {
  userId?: string;
  groupId?: string;
  level: 'viewer' | 'editor' | 'owner';
  expiresAt?: string;
}