🔐 feat: Granular Role-based Permissions + Entra ID Group Discovery (#7804)

client/src/components/SidePanel/Agents/Sharing/PeoplePicker/PeoplePickerSearchItem.tsx

@@ -0,0 +1,57 @@
+import React, { forwardRef } from 'react';
+import type { TPrincipal } from 'librechat-data-provider';
+import { cn } from '~/utils';
+import { useLocalize } from '~/hooks';
+import PrincipalAvatar from '../PrincipalAvatar';
+
+interface PeoplePickerSearchItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  principal: TPrincipal;
+}
+
+const PeoplePickerSearchItem = forwardRef<HTMLDivElement, PeoplePickerSearchItemProps>(
+  function PeoplePickerSearchItem(
+    { principal, className, style, onClick, ...props },
+    forwardedRef,
+  ) {
+    const localize = useLocalize();
+    const { name, email, type } = principal;
+
+    // Display name with fallback
+    const displayName = name || localize('com_ui_unknown');
+    const subtitle = email || `${type} (${principal.source || 'local'})`;
+
+    return (
+      <div
+        {...props}
+        ref={forwardedRef}
+        className={cn('flex items-center gap-3 p-2', className)}
+        style={style}
+        onClick={(event) => {
+          onClick?.(event);
+        }}
+      >
+        <PrincipalAvatar principal={principal} size="md" />
+
+        <div className="min-w-0 flex-1">
+          <div className="truncate text-sm font-medium text-text-primary">{displayName}</div>
+          <div className="truncate text-xs text-text-secondary">{subtitle}</div>
+        </div>
+
+        <div className="flex-shrink-0">
+          <span
+            className={cn(
+              'inline-flex items-center rounded-full px-2 py-1 text-xs font-medium',
+              type === 'user'
+                ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300'
+                : 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300',
+            )}
+          >
+            {type === 'user' ? localize('com_ui_user') : localize('com_ui_group')}
+          </span>
+        </div>
+      </div>
+    );
+  },
+);
+
+export default PeoplePickerSearchItem;