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

WIP: pre-granular-permissions commit

feat: Add category and support contact fields to Agent schema and UI components

Revert "feat: Add category and support contact fields to Agent schema and UI components"

This reverts commit c43a52b4c9.

Fix: Update import for renderHook in useAgentCategories.spec.tsx

fix: Update icon rendering in AgentCategoryDisplay tests to use empty spans

refactor: Improve category synchronization logic and clean up AgentConfig component

refactor: Remove unused UI flow translations from translation.json

feat: agent marketplace features

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

client/src/utils/__tests__/agents.spec.tsx

@@ -0,0 +1,178 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { getAgentAvatarUrl, renderAgentAvatar, getContactDisplayName } from '../agents';
+import type t from 'librechat-data-provider';
+
+// Mock the Bot icon from lucide-react
+jest.mock('lucide-react', () => ({
+  Bot: ({ className, strokeWidth, ...props }: any) => (
+    <svg data-testid="bot-icon" className={className} data-stroke-width={strokeWidth} {...props}>
+      <title>{/* eslint-disable-line i18next/no-literal-string */}Bot Icon</title>
+    </svg>
+  ),
+}));
+
+describe('Agent Utilities', () => {
+  describe('getAgentAvatarUrl', () => {
+    it('should return null for null agent', () => {
+      expect(getAgentAvatarUrl(null)).toBeNull();
+    });
+
+    it('should return null for undefined agent', () => {
+      expect(getAgentAvatarUrl(undefined)).toBeNull();
+    });
+
+    it('should return null for agent without avatar', () => {
+      const agent = { id: '1', name: 'Test Agent' } as t.Agent;
+      expect(getAgentAvatarUrl(agent)).toBeNull();
+    });
+
+    it('should return string avatar directly', () => {
+      const agent = {
+        id: '1',
+        name: 'Test Agent',
+        avatar: '/path/to/avatar.png',
+      } as t.Agent;
+      expect(getAgentAvatarUrl(agent)).toBe('/path/to/avatar.png');
+    });
+
+    it('should extract filepath from object avatar', () => {
+      const agent = {
+        id: '1',
+        name: 'Test Agent',
+        avatar: { filepath: '/path/to/object-avatar.png' },
+      } as t.Agent;
+      expect(getAgentAvatarUrl(agent)).toBe('/path/to/object-avatar.png');
+    });
+
+    it('should return null for object avatar without filepath', () => {
+      const agent = {
+        id: '1',
+        name: 'Test Agent',
+        avatar: { someOtherProperty: 'value' },
+      } as any;
+      expect(getAgentAvatarUrl(agent)).toBeNull();
+    });
+  });
+
+  describe('renderAgentAvatar', () => {
+    it('should render image when avatar URL exists', () => {
+      const agent = {
+        id: '1',
+        name: 'Test Agent',
+        avatar: '/test-avatar.png',
+      } as t.Agent;
+
+      render(<div>{renderAgentAvatar(agent)}</div>);
+
+      const img = screen.getByAltText('Test Agent avatar');
+      expect(img).toBeInTheDocument();
+      expect(img).toHaveAttribute('src', '/test-avatar.png');
+      expect(img).toHaveClass('rounded-full', 'object-cover', 'shadow-lg');
+    });
+
+    it('should render Bot icon fallback when no avatar', () => {
+      const agent = {
+        id: '1',
+        name: 'Test Agent',
+      } as t.Agent;
+
+      render(<div>{renderAgentAvatar(agent)}</div>);
+
+      const botIcon = screen.getByTestId('bot-icon');
+      expect(botIcon).toBeInTheDocument();
+      expect(botIcon).toHaveAttribute('data-stroke-width', '1.5');
+    });
+
+    it('should apply different size classes', () => {
+      const agent = {
+        id: '1',
+        name: 'Test Agent',
+        avatar: '/test-avatar.png',
+      } as t.Agent;
+
+      const { rerender } = render(<div>{renderAgentAvatar(agent, { size: 'sm' })}</div>);
+      expect(screen.getByAltText('Test Agent avatar')).toHaveClass('h-12', 'w-12');
+
+      rerender(<div>{renderAgentAvatar(agent, { size: 'lg' })}</div>);
+      expect(screen.getByAltText('Test Agent avatar')).toHaveClass('h-20', 'w-20');
+
+      rerender(<div>{renderAgentAvatar(agent, { size: 'xl' })}</div>);
+      expect(screen.getByAltText('Test Agent avatar')).toHaveClass('h-24', 'w-24');
+    });
+
+    it('should apply custom className', () => {
+      const agent = {
+        id: '1',
+        name: 'Test Agent',
+        avatar: '/test-avatar.png',
+      } as t.Agent;
+
+      render(<div>{renderAgentAvatar(agent, { className: 'custom-class' })}</div>);
+
+      const container = screen.getByAltText('Test Agent avatar').parentElement;
+      expect(container).toHaveClass('custom-class');
+    });
+
+    it('should handle showBorder option', () => {
+      const agent = {
+        id: '1',
+        name: 'Test Agent',
+        avatar: '/test-avatar.png',
+      } as t.Agent;
+
+      const { rerender } = render(<div>{renderAgentAvatar(agent, { showBorder: true })}</div>);
+      expect(screen.getByAltText('Test Agent avatar')).toHaveClass('border-2');
+
+      rerender(<div>{renderAgentAvatar(agent, { showBorder: false })}</div>);
+      expect(screen.getByAltText('Test Agent avatar')).not.toHaveClass('border-2');
+    });
+  });
+
+  describe('getContactDisplayName', () => {
+    it('should return null for null agent', () => {
+      expect(getContactDisplayName(null)).toBeNull();
+    });
+
+    it('should return null for undefined agent', () => {
+      expect(getContactDisplayName(undefined)).toBeNull();
+    });
+
+    it('should prioritize support_contact name', () => {
+      const agent = {
+        id: '1',
+        support_contact: { name: 'Support Team', email: 'support@example.com' },
+        authorName: 'John Doe',
+      } as any;
+      expect(getContactDisplayName(agent)).toBe('Support Team');
+    });
+
+    it('should use authorName when support_contact name is missing', () => {
+      const agent = {
+        id: '1',
+        support_contact: { email: 'support@example.com' },
+        authorName: 'John Doe',
+      } as any;
+      expect(getContactDisplayName(agent)).toBe('John Doe');
+    });
+
+    it('should use support_contact email when both name and authorName are missing', () => {
+      const agent = {
+        id: '1',
+        support_contact: { email: 'support@example.com' },
+      } as any;
+      expect(getContactDisplayName(agent)).toBe('support@example.com');
+    });
+
+    it('should return null when no contact info is available', () => {
+      const agent = {
+        id: '1',
+        name: 'Test Agent',
+      } as any;
+      expect(getContactDisplayName(agent)).toBeNull();
+    });
+  });
+
+  // Tests for hardcoded category functions removed - now using database-driven categories
+});

client/src/utils/agents.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { Bot } from 'lucide-react';
+import type t from 'librechat-data-provider';
+
+/**
+ * Extracts the avatar URL from an agent's avatar property
+ * Handles both string and object formats
+ */
+export const getAgentAvatarUrl = (agent: t.Agent | null | undefined): string | null => {
+  if (!agent?.avatar) {
+    return null;
+  }
+
+  if (typeof agent.avatar === 'string') {
+    return agent.avatar;
+  }
+
+  if (agent.avatar && typeof agent.avatar === 'object' && 'filepath' in agent.avatar) {
+    return agent.avatar.filepath;
+  }
+
+  return null;
+};
+
+/**
+ * Renders an agent avatar with fallback to Bot icon
+ * Consistent across all agent displays
+ */
+export const renderAgentAvatar = (
+  agent: t.Agent | null | undefined,
+  options: {
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    className?: string;
+    showBorder?: boolean;
+  } = {},
+): React.ReactElement => {
+  const { size = 'md', className = '', showBorder = true } = options;
+
+  const avatarUrl = getAgentAvatarUrl(agent);
+
+  // Size mappings for responsive design
+  const sizeClasses = {
+    sm: 'h-12 w-12 sm:h-14 sm:w-14',
+    md: 'h-16 w-16 sm:h-20 sm:w-20 md:h-24 md:w-24',
+    lg: 'h-20 w-20 sm:h-24 sm:w-24 md:h-28 md:w-28',
+    xl: 'h-24 w-24',
+  };
+
+  const iconSizeClasses = {
+    sm: 'h-6 w-6 sm:h-7 sm:w-7',
+    md: 'h-6 w-6 sm:h-8 sm:w-8 md:h-10 md:w-10',
+    lg: 'h-8 w-8 sm:h-10 sm:w-10 md:h-12 md:w-12',
+    xl: 'h-10 w-10',
+  };
+
+  const placeholderSizeClasses = {
+    sm: 'h-10 w-10 sm:h-12 sm:w-12',
+    md: 'h-12 w-12 sm:h-16 sm:w-16 md:h-20 md:w-20',
+    lg: 'h-16 w-16 sm:h-20 sm:w-20 md:h-24 md:w-24',
+    xl: 'h-20 w-20',
+  };
+
+  const borderClasses = showBorder ? 'border-2 border-white dark:border-gray-800' : '';
+
+  if (avatarUrl) {
+    return (
+      <div className={`flex items-center justify-center ${sizeClasses[size]} ${className}`}>
+        <img
+          src={avatarUrl}
+          alt={`${agent?.name || 'Agent'} avatar`}
+          className={`${sizeClasses[size]} rounded-full object-cover shadow-lg ${borderClasses}`}
+          loading="lazy"
+        />
+      </div>
+    );
+  }
+
+  // Fallback placeholder with Bot icon
+  return (
+    <div className={`relative flex items-center justify-center ${sizeClasses[size]} ${className}`}>
+      {/* Subtle minimalistic placeholder */}
+      <div className="absolute inset-0 rounded-full border border-gray-300 bg-gray-200 dark:border-gray-600 dark:bg-gray-700"></div>
+      <div
+        className={`relative flex items-center justify-center rounded-full bg-gray-300 dark:bg-gray-600 ${placeholderSizeClasses[size]}`}
+      >
+        <Bot
+          className={`text-gray-500 dark:text-gray-400 ${iconSizeClasses[size]}`}
+          strokeWidth={1.5}
+        />
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Gets the display name for a contact (prioritizes name over email)
+ */
+export const getContactDisplayName = (agent: t.Agent | null | undefined): string | null => {
+  if (!agent) return null;
+
+  const supportName = (agent as any).support_contact?.name;
+  const supportEmail = (agent as any).support_contact?.email;
+  const authorName = (agent as any).authorName;
+
+  return supportName || authorName || supportEmail || null;
+};
+
+// All hardcoded category constants removed - now using database-driven categories

client/src/utils/forms.tsx

@@ -63,8 +63,7 @@ export const processAgentOption = ({
   fileMap?: Record<string, TFile | undefined>;
   instanceProjectId?: string;
 }): TAgentOption => {
-  const isGlobal =
-    (instanceProjectId != null && _agent?.projectIds?.includes(instanceProjectId)) ?? false;
+  const isGlobal = _agent?.isPublic ?? false;
   const agent: TAgentOption = {
     ...(_agent ?? ({} as Agent)),
     label: _agent?.name ?? '',

client/src/utils/index.ts

@@ -5,6 +5,7 @@ export * from './json';
 export * from './files';
 export * from './latex';
 export * from './forms';
+export * from './agents';
 export * from './drafts';
 export * from './convos';
 export * from './presets';