Collaboration

1"use client"; // Remove this line if you are not using Next.js
2 
3import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
4import { Button } from "@/components/ui/button";
5import { Card } from "@/components/ui/card";
6import {
7  Popover,
8  PopoverContent,
9  PopoverTrigger,
10} from "@/components/ui/popover";
11import {
12  SearchInput,
13  SearchInputClearButton,
14  SearchInputField,
15  SearchInputLeftElement,
16  SearchInputRightElement,
17} from "@/components/ui/search-input";
18import { Icon } from "@/lib/icon";
19import { mdiAccountPlusOutline, mdiClose, mdiMagnify, mdiPlus } from "@mdi/js";
20import type * as React from "react";
21import { useMemo, useState } from "react";
22 
23// Types
24 
25/** Base user interface - extend this for custom user types */
26export interface User {
27  id: string;
28  name: string;
29  avatarUrl?: string;
30  email?: string;
31  [key: string]: unknown; // Allow additional properties
32}
33 
34export interface CollaborationProps<T extends User = User> {
35  /** Currently added users */
36  users: T[];
37  /** Current user (shown with "You" label) */
38  currentUser?: T;
39  /** Available users to add (shown in dialog) - can be managed externally for API support */
40  availableUsers: T[];
41  /** Maximum number of avatars to display in the stack */
42  maxDisplayAvatars?: number;
43  /** Callback when a user is added */
44  onAddUser?: (user: T) => void;
45  /** Callback when a user is removed */
46  onRemoveUser?: (userId: string) => void;
47  /** Allow removing the current user (default: false) */
48  allowRemoveCurrentUser?: boolean;
49  /** Custom empty state message */
50  emptyStateMessage?: string;
51  /** Title for the users section */
52  title?: string;
53  /** Custom class name */
54  className?: string;
55 
56  // API & Customization Props
57 
58  /** Callback when search query changes - use for API-based search */
59  onSearch?: (query: string) => void;
60  /** Shows loading spinner in search results */
61  isSearching?: boolean;
62  /** Custom search placeholder text */
63  searchPlaceholder?: string;
64  /** Custom function to get user's display name */
65  getDisplayName?: (user: T) => string;
66  /** Custom function to get user's avatar URL */
67  getAvatarUrl?: (user: T) => string | undefined;
68  /** Custom function to get user's unique ID */
69  getUserId?: (user: T) => string;
70  /** Disable built-in client-side filtering (use when doing API search) */
71  disableClientFilter?: boolean;
72  /** Custom empty search results message */
73  emptySearchMessage?: string;
74  /** Custom "all users added" message */
75// … truncated