Repository: danny-avila/LibreChat
File: client/src/components/MCP/MCPConfigDialog.tsx (TypeScript)

Code before:
  isSubmitting?: boolean;
  onRevoke?: () => void;
  serverName: string;
  serverStatus?: MCPServerStatus;
  conversationId?: string | null;
}

export default function MCPConfigDialog({
  isOpen,
  onOpenChange,
  fieldsSchema,
  onSave,
  isSubmitting = false,
  onRevoke,
  serverName,
  serverStatus,
  conversationId,
}: MCPConfigDialogProps) {
  const localize = useLocalize();

  const hasFields = Object.keys(fieldsSchema).length > 0;
  const dialogTitle = hasFields
    ? localize('com_ui_configure_mcp_variables_for', { 0: serverName })
    : `${serverName} MCP Server`;

  const getStatusText = () => {
    if (!serverStatus) return '';
    const { connectionState, requiresOAuth } = serverStatus;

    if (connectionState === 'connecting') return localize('com_ui_connecting');
    if (connectionState === 'error') return localize('com_ui_error');
    if (connectionState === 'connected') return localize('com_ui_active');
    if (connectionState === 'disconnected') {
      return requiresOAuth ? localize('com_ui_oauth') : localize('com_ui_offline');
    }
    return '';
  };

  const statusText = getStatusText();
  const fullTitle = localize('com_ui_mcp_dialog_title', {
    serverName,
    status: statusText,
  });

  // Helper function to render status badge based on connection state
  const renderStatusBadge = () => {
    if (!serverStatus) {
      return null;
    }

    const { connectionState, requiresOAuth } = serverStatus;

Review comment (suggestion):
this function recreates every time there is a re-render. since it's dependent on state, and only used to populate `fullTitle`, it would be be best to memoize `fullTitle` and perform the operations under one memoization closure.

Code after:
  isSubmitting?: boolean;
  onRevoke?: () => void;
  serverName: string;
  serverStatus?: MCPServerStatus;
  conversationId?: string | null;
}

export default function MCPConfigDialog({
  isOpen,
  onOpenChange,
  fieldsSchema,
  onSave,
  isSubmitting = false,
  onRevoke,
  serverName,
  serverStatus,
  conversationId,
}: MCPConfigDialogProps) {
  const localize = useLocalize();

  const hasFields = Object.keys(fieldsSchema).length > 0;
  const dialogTitle = hasFields
    ? localize('com_ui_configure_mcp_variables_for', { 0: serverName })
    : `${serverName} MCP Server`;

  const fullTitle = useMemo(() => {
    if (!serverStatus) {
      return localize('com_ui_mcp_dialog_title', {
        serverName,
        status: '',
      });
    }

    const { connectionState, requiresOAuth } = serverStatus;
    let statusText = '';

    if (connectionState === 'connecting') {
      statusText = localize('com_ui_connecting');
    } else if (connectionState === 'error') {
      statusText = localize('com_ui_error');
    } else if (connectionState === 'connected') {
      statusText = localize('com_ui_active');
    } else if (connectionState === 'disconnected') {
      statusText = requiresOAuth ? localize('com_ui_oauth') : localize('com_ui_offline');
    }

    return localize('com_ui_mcp_dialog_title', {
      serverName,
      status: statusText,
    });
  }, [serverStatus, serverName, localize]);