🔄 refactor: Principal Type Handling in Search Principals to use Array

client/src/components/Sharing/PeoplePicker/PeoplePicker.tsx

@@ -1,103 +0,0 @@
-import React, { useState, useMemo } from 'react';
-import { PrincipalType } from 'librechat-data-provider';
-import type { TPrincipal, PrincipalSearchParams } from 'librechat-data-provider';
-import { useSearchPrincipalsQuery } from 'librechat-data-provider/react-query';
-import PeoplePickerSearchItem from './PeoplePickerSearchItem';
-import SelectedPrincipalsList from './SelectedPrincipalsList';
-import { SearchPicker } from './SearchPicker';
-import { useLocalize } from '~/hooks';
-
-interface PeoplePickerProps {
-  onSelectionChange: (principals: TPrincipal[]) => void;
-  placeholder?: string;
-  className?: string;
-  typeFilter?: PrincipalType.USER | PrincipalType.GROUP | PrincipalType.ROLE | null;
-}
-
-export default function PeoplePicker({
-  onSelectionChange,
-  placeholder,
-  className = '',
-  typeFilter = null,
-}: PeoplePickerProps) {
-  const localize = useLocalize();
-  const [searchQuery, setSearchQuery] = useState('');
-  const [selectedShares, setSelectedShares] = useState<TPrincipal[]>([]);
-
-  const searchParams: PrincipalSearchParams = useMemo(
-    () => ({
-      q: searchQuery,
-      limit: 30,
-      ...(typeFilter && { type: typeFilter }),
-    }),
-    [searchQuery, typeFilter],
-  );
-
-  const {
-    data: searchResponse,
-    isLoading: queryIsLoading,
-    error,
-  } = useSearchPrincipalsQuery(searchParams, {
-    enabled: searchQuery.length >= 2,
-  });
-
-  const isLoading = searchQuery.length >= 2 && queryIsLoading;
-
-  const selectableResults = useMemo(() => {
-    const results = searchResponse?.results || [];
-
-    return results.filter(
-      (result) => !selectedShares.some((share) => share.idOnTheSource === result.idOnTheSource),
-    );
-  }, [searchResponse?.results, selectedShares]);
-
-  if (error) {
-    console.error('Principal search error:', error);
-  }
-
-  return (
-    <div className={`space-y-3 ${className}`}>
-      <div className="relative">
-        <SearchPicker<TPrincipal & { key: string; value: string }>
-          options={selectableResults.map((s) => {
-            const key = s.idOnTheSource || 'unknown' + 'picker_key';
-            const value = s.idOnTheSource || 'Unknown';
-            return {
-              ...s,
-              id: s.id ?? undefined,
-              key,
-              value,
-            };
-          })}
-          renderOptions={(o) => <PeoplePickerSearchItem principal={o} />}
-          placeholder={placeholder || localize('com_ui_search_default_placeholder')}
-          query={searchQuery}
-          onQueryChange={(query: string) => {
-            setSearchQuery(query);
-          }}
-          onPick={(principal) => {
-            console.log('Selected Principal:', principal);
-            setSelectedShares((prev) => {
-              const newArray = [...prev, principal];
-              onSelectionChange([...newArray]);
-              return newArray;
-            });
-            setSearchQuery('');
-          }}
-          isLoading={isLoading}
-        />
-      </div>
-
-      <SelectedPrincipalsList
-        principles={selectedShares}
-        onRemoveHandler={(idOnTheSource: string) => {
-          setSelectedShares((prev) => {
-            const newArray = prev.filter((share) => share.idOnTheSource !== idOnTheSource);
-            onSelectionChange(newArray);
-            return newArray;
-          });
-        }}
-      />
-    </div>
-  );
-}

client/src/components/Sharing/PeoplePicker/UnifiedPeopleSearch.tsx

@@ -9,7 +9,7 @@ interface UnifiedPeopleSearchProps {
   onAddPeople: (principals: TPrincipal[]) => void;
   placeholder?: string;
   className?: string;
-  typeFilter?: PrincipalType.USER | PrincipalType.GROUP | PrincipalType.ROLE | null;
+  typeFilter?: Array<PrincipalType.USER | PrincipalType.GROUP | PrincipalType.ROLE> | null;
   excludeIds?: (string | undefined)[];
 }
 
@@ -27,7 +27,7 @@ export default function UnifiedPeopleSearch({
     () => ({
       q: searchQuery,
       limit: 30,
-      ...(typeFilter && { type: typeFilter }),
+      ...(typeFilter && typeFilter.length > 0 && { types: typeFilter }),
     }),
     [searchQuery, typeFilter],
   );

client/src/components/Sharing/PeoplePicker/index.ts

@@ -1,4 +1,3 @@
-export { default as PeoplePicker } from './PeoplePicker';
 export { default as PeoplePickerSearchItem } from './PeoplePickerSearchItem';
 export { default as SelectedPrincipalsList } from './SelectedPrincipalsList';
 export { default as UnifiedPeopleSearch } from './UnifiedPeopleSearch';