[WPB-27360] Fetch team collaborators and show them in the add-participants list

apps/webapp/src/script/page/rightSidebar/addParticipants/addParticipants.tsx

@@ -17,7 +17,7 @@
  *
  */
 
-import {FC, useCallback, useMemo, useState} from 'react';
+import {FC, useCallback, useEffect, useMemo, useState} from 'react';
 
 import is from '@sindresorhus/is';
 import {CONVERSATION_PROTOCOL} from '@wireapp/api-client/lib/team';
@@ -124,14 +124,44 @@ const AddParticipants: FC<AddParticipantsProps> = ({
   const [selectedContacts, setSelectedContacts] = useState<User[]>([]);
 
   const [isInitialServiceSearch, setIsInitialServiceSearch] = useState<boolean>(true);
-  const contacts = useMemo(() => {
+  const [collaborators, setCollaborators] = useState<User[]>([]);
+
+  useEffect(() => {
+    if (!isTeam) {
+      return undefined;
+    }
+
+    let isCurrent = true;
+
+    void teamRepository.getTeamCollaborators().then(fetchedCollaborators => {
+      if (isCurrent) {
+        setCollaborators(fetchedCollaborators);
+      }
+    });
+
+    return () => {
+      isCurrent = false;
+    };
+  }, [isTeam, teamRepository]);
+
+  const baseContacts = useMemo(() => {
     if (isTeam) {
       const isTeamOrServices = isTeamOnly || isServicesRoom;
       return isTeamOrServices ? teamMembers.toSorted(sortUsersByPriority) : teamUsers;
     }
     return connectedUsers;
   }, [connectedUsers, isServicesRoom, isTeam, isTeamOnly, teamMembers, teamUsers]);
 
+  const contacts = useMemo(() => {
+    if (!collaborators.length) {
+      return baseContacts;
+    }
+    // Collaborators (team-level, without full team membership) are shown alongside team members/apps
+    const knownIds = new Set(baseContacts.map(contact => contact.id));
+    const newCollaborators = collaborators.filter(collaborator => !knownIds.has(collaborator.id));
+    return [...baseContacts, ...newCollaborators];
+  }, [baseContacts, collaborators]);
+
   const apps = useMemo(() => {
     const normalizedQuery = searchInput.trim().toLowerCase();
     return contacts

apps/webapp/src/script/repositories/team/TeamRepository.ts

@@ -388,6 +388,22 @@ export class TeamRepository extends TypedEventEmitter<Events> {
     return IntegrationMapper.mapServicesFromArray(servicesData, domain);
   }
 
+  async getTeamCollaborators(): Promise<User[]> {
+    const teamId = this.teamState.team()?.id;
+    if (!teamId) {
+      return [];
+    }
+
+    const domain = this.teamState.teamDomain();
+    const selfId = this.userState.self().id;
+    const collaborators = await this.teamService.getCollaborators(teamId);
+    const collaboratorIds: QualifiedId[] = collaborators
+      .map(({user}) => ({domain, id: user}))
+      .filter(({id}) => id !== selfId);
+
+    return this.userRepository.getUsersById(collaboratorIds);
+  }
+
   readonly onTeamEvent = async (eventJson: any, source: EventSource): Promise<void> => {
     if (this.teamState.isTeamDeleted()) {
       // We don't want to handle any events after the team has been deleted

apps/webapp/src/script/repositories/team/TeamService.ts

@@ -24,7 +24,7 @@ import {TeamMigrationPayload} from '@wireapp/api-client/lib/team/invitation/team
 import type {LegalHoldMemberData} from '@wireapp/api-client/lib/team/legalhold/';
 import type {MemberData, Members} from '@wireapp/api-client/lib/team/member/';
 import type {Services} from '@wireapp/api-client/lib/team/service/';
-import type {TeamData} from '@wireapp/api-client/lib/team/team/';
+import type {TeamCollaborator, TeamData} from '@wireapp/api-client/lib/team/team/';
 import {container} from 'tsyringe';
 
 import {APIClient} from '../../service/apiClientSingleton';
@@ -64,6 +64,10 @@ export class TeamService {
     return this.apiClient.api.teams.service.getTeamServices(teamId);
   }
 
+  getCollaborators(teamId: string): Promise<TeamCollaborator[]> {
+    return this.apiClient.api.teams.team.getCollaborators(teamId);
+  }
+
   async conversationHasGuestLink(conversationId: string): Promise<boolean> {
     const {status} = await this.apiClient.api.conversation.getConversationGuestLinkFeature(conversationId);
     return status === 'enabled';

libraries/api-client/src/team/index.ts

@@ -20,7 +20,16 @@
 export {NewTeamInvitation, TeamInvitation, TeamInvitationAPI, TeamInvitationChunk} from './invitation/';
 export {LegalHoldAPI} from './legalhold/';
 export {MemberAPI, MemberData, Members, Permissions, PermissionsData, Role} from './member/';
-export {NewTeamData, TeamAPI, TeamChunkData, TeamData, TeamInfo, UpdateTeamData} from './team/';
+export {
+  CollaboratorPermission,
+  NewTeamData,
+  TeamAPI,
+  TeamChunkData,
+  TeamCollaborator,
+  TeamData,
+  TeamInfo,
+  UpdateTeamData,
+} from './team/';
 export {PaymentAPI, PaymentData} from './payment/';
 export {ServiceAPI, Service, ServiceWhitelistData} from './service/';
 export {TeamError, InviteEmailInUseError, InvalidInvitationCodeError, ServiceNotFoundError} from './teamError';

libraries/api-client/src/team/team/collaborator/teamCollaborator.ts

@@ -0,0 +1,29 @@
+/*
+ * Wire
+ * Copyright (C) 2026 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+export enum CollaboratorPermission {
+  CREATE_TEAM_CONVERSATION = 'create_team_conversation',
+  IMPLICIT_CONNECTION = 'implicit_connection',
+}
+
+export interface TeamCollaborator {
+  permissions: CollaboratorPermission[];
+  team: string;
+  user: string;
+}

libraries/api-client/src/team/team/index.ts

@@ -17,6 +17,7 @@
  *
  */
 
+export * from './collaborator/teamCollaborator';
 export * from './newTeamData';
 export * from './teamApi';
 export * from './teamChunkData';

libraries/api-client/src/team/team/teamApi.ts

@@ -21,6 +21,7 @@ import Axios, {AxiosRequestConfig} from 'axios';
 
 import {NewAppRequest} from './app/newAppRequest';
 import {NewAppResponse} from './app/newAppResponse';
+import {TeamCollaborator} from './collaborator/teamCollaborator';
 import {LeadData} from './leadData';
 import {TeamSizeData} from './teamSizeData';
 import {UpdateTeamData} from './updateTeamData';
@@ -34,6 +35,7 @@ export class TeamAPI {
 
   public static readonly URL = {
     APPS: 'apps',
+    COLLABORATORS: 'collaborators',
     SIZE: 'size',
     TEAMS: '/teams',
     CONSENT: '/consent',
@@ -143,6 +145,16 @@ export class TeamAPI {
     return response.data;
   }
 
+  public async getCollaborators(teamId: string): Promise<TeamCollaborator[]> {
+    const config: AxiosRequestConfig = {
+      method: 'get',
+      url: `${TeamAPI.URL.TEAMS}/${teamId}/${TeamAPI.URL.COLLABORATORS}`,
+    };
+
+    const response = await this.client.sendJSON<TeamCollaborator[]>(config);
+    return response.data;
+  }
+
   public async postApp(teamId: string, app: NewAppRequest): Promise<NewAppResponse> {
     const config: AxiosRequestConfig = {
       data: app,