# thinkrank/1.0.0/src/admin/components/pages/Settings.js
ThinkRank AI SEO – AI SEO Plugin for WordPress: Schema, XML Sitemaps, Meta Tags, Search Console & Local SEO, version 1.0.0. 785 lines.
- Page: https://pluginprobe.com/plugins/thinkrank/1.0.0/code/src/admin/components/pages/Settings.js
- Raw: https://pluginprobe.com/plugins/thinkrank/1.0.0/raw/src/admin/components/pages/Settings.js
- Modified: 2025-08-10T10:57:26+00:00
Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/thinkrank/1.0.0/code/src/admin/components/pages/Settings.js#L10-L20`.
```javascript
/**
* Settings Page Component
*
* Plugin settings and configuration
*
* @package ThinkRank
* @since 1.0.0
*/
import { __ } from '@wordpress/i18n';
import { TextControl, SelectControl, Notice, Spinner, CheckboxControl } from '@wordpress/components';
import { useState, useEffect } from '@wordpress/element';
import apiFetch from '@wordpress/api-fetch';
import ModelBadge from '../shared/ModelBadge';
// AI Provider Icons (using WordPress Dashicons as fallback)
const OpenAIIcon = () => (
);
const ClaudeIcon = () => (
);
const GeminiIcon = () => (
);
/**
* Settings Component
*/
const Settings = () => {
const [apiKey, setApiKey] = useState('');
const [aiProvider, setAiProvider] = useState('openai');
const [selectedModel, setSelectedModel] = useState('');
// Provider-specific model states to avoid cross-provider bleed
const [openaiModelState, setOpenaiModelState] = useState('gpt-5-nano');
const [claudeModelState, setClaudeModelState] = useState('claude-3-7-sonnet-latest');
const [geminiModelState, setGeminiModelState] = useState('gemini-2.5-flash');
const [isSaving, setIsSaving] = useState(false);
const [isLoading, setIsLoading] = useState(true);
const [isTesting, setIsTesting] = useState(false);
const [notice, setNotice] = useState(null);
const [hasExistingKey, setHasExistingKey] = useState(false);
const [deleteDataOnUninstall, setDeleteDataOnUninstall] = useState(false);
// Model options for each provider (July 2025)
const modelOptions = {
openai: [
{ value: 'gpt-5-nano', label: 'GPT‑5‑nano (Default – fastest, lowest cost)' },
{ value: 'gpt-5-mini', label: 'GPT‑5‑mini (Balanced quality/cost)' },
{ value: 'gpt-5', label: 'GPT‑5 (Highest quality)' },
{ value: 'gpt-4o', label: 'GPT‑4o (Compatibility)' }
],
claude: [
{ value: 'claude-sonnet-4-0', label: 'Claude 4 Sonnet (Latest)' },
{ value: 'claude-opus-4-0', label: 'Claude 4 Opus (Latest)' },
{ value: 'claude-3-7-sonnet-latest', label: 'Claude 3.7 Sonnet (Recommended)' },
{ value: 'claude-3-5-sonnet-latest', label: 'Claude 3.5 Sonnet' },
{ value: 'claude-3-5-haiku-latest', label: 'Claude 3.5 Haiku (Fast)' }
],
gemini: [
{ value: 'gemini-2.5-flash', label: 'Gemini 2.5 Flash (Recommended)' },
{ value: 'gemini-2.5-flash-lite', label: 'Gemini 2.5 Flash-Lite (Fastest)' },
{ value: 'gemini-2.5-pro', label: 'Gemini 2.5 Pro' },
{ value: 'gemini-2.0-flash', label: 'Gemini 2.0 Flash' }
]
};
// Track if initial load is complete to prevent duplicate API calls
const [initialLoadComplete, setInitialLoadComplete] = useState(false);
// Load settings on component mount
useEffect(() => {
loadSettings();
}, []);
// Track the previous provider to detect actual user changes
const [previousProvider, setPreviousProvider] = useState(null);
// Handle provider changes (only for user-initiated changes)
useEffect(() => {
// Skip if this is the initial load, provider not set, or no previous provider to compare
if (!initialLoadComplete || !aiProvider || previousProvider === null) {
setPreviousProvider(aiProvider);
return;
}
// Only proceed if this is an actual provider change (user-initiated)
if (previousProvider !== aiProvider) {
// Clear API key field when switching providers to avoid confusion
setApiKey('');
setHasExistingKey(false);
// Set selectedModel to the appropriate provider-specific model
if (aiProvider === 'openai') {
setSelectedModel(openaiModelState);
} else if (aiProvider === 'claude') {
setSelectedModel(claudeModelState);
} else if (aiProvider === 'gemini') {
setSelectedModel(geminiModelState);
}
// Show "switched" message only for user-initiated changes
const providerName = aiProvider === 'openai' ? 'OpenAI' : aiProvider === 'claude' ? 'Claude' : 'Gemini';
setNotice({
type: 'info',
message: __(`Switched to ${providerName}. Please enter your API key if you haven't already.`, 'thinkrank')
});
// Update previous provider
setPreviousProvider(aiProvider);
}
}, [aiProvider, initialLoadComplete, previousProvider, openaiModelState, claudeModelState, geminiModelState]);
// API key format validation
const validateApiKey = (key, provider) => {
if (!key || !key.trim()) return { valid: true, message: '' };
if (provider === 'openai') {
if (!key.startsWith('sk-')) {
return {
valid: false,
message: __('OpenAI API keys should start with "sk-"', 'thinkrank')
};
}
if (key.length < 20) {
return {
valid: false,
message: __('OpenAI API key appears too short', 'thinkrank')
};
}
} else if (provider === 'claude') {
if (!key.startsWith('sk-ant-')) {
return {
valid: false,
message: __('Claude API keys should start with "sk-ant-"', 'thinkrank')
};
}
if (key.length < 30) {
return {
valid: false,
message: __('Claude API key appears too short', 'thinkrank')
};
}
} else if (provider === 'gemini') {
if (!key.startsWith('AIza')) {
return {
valid: false,
message: __('Gemini API keys should start with "AIza"', 'thinkrank')
};
}
if (key.length < 30) {
return {
valid: false,
message: __('Gemini API key appears too short', 'thinkrank')
};
}
}
return { valid: true, message: '' };
};
const loadSettings = async () => {
setIsLoading(true);
try {
const response = await apiFetch({
path: '/thinkrank/v1/settings',
});
// Check if response has the expected structure
const settings = response.success ? response.data : response;
if (settings) {
// Always use saved provider from backend (this is the source of truth)
const savedProvider = settings.ai_provider || 'openai';
const currentApiKey = settings[`${savedProvider}_api_key`] || '';
// Check if we have a masked API key (indicates existing key)
const hasKey = currentApiKey && currentApiKey.includes('••••');
setHasExistingKey(hasKey);
// Don't show masked key in input
setApiKey(hasKey ? '' : currentApiKey);
// Always sync frontend state with backend settings
setAiProvider(savedProvider);
setPreviousProvider(savedProvider); // Set initial previous provider
// Set all provider-specific model states from backend settings
const openaiModel = settings.openai_model || 'gpt-5-nano';
const claudeModel = settings.claude_model || 'claude-3-7-sonnet-latest';
const geminiModel = settings.gemini_model || 'gemini-2.5-flash';
setOpenaiModelState(openaiModel);
setClaudeModelState(claudeModel);
setGeminiModelState(geminiModel);
// Set selectedModel based on current provider
if (savedProvider === 'claude') {
setSelectedModel(claudeModel);
} else if (savedProvider === 'gemini') {
setSelectedModel(geminiModel);
} else {
setSelectedModel(openaiModel);
}
// Set delete data on uninstall setting (defaults to false - preserve data)
setDeleteDataOnUninstall(settings.keep_data_on_uninstall === false);
// Show appropriate notice based on API key status
if (!hasKey) {
const providerName = savedProvider === 'openai' ? 'OpenAI' : savedProvider === 'claude' ? 'Claude' : 'Gemini';
setNotice({
type: 'warning',
message: __(`No ${providerName} API key found. Please enter your API key to use this provider.`, 'thinkrank')
});
} else {
// Clear any existing notices if key exists
setNotice(null);
}
}
} catch (error) {
console.error('Failed to load settings:', error);
setNotice({
type: 'error',
message: __('Failed to load settings.', 'thinkrank')
});
} finally {
setIsLoading(false);
setInitialLoadComplete(true); // Mark initial load as complete
}
};
const handleSave = async () => {
// Check if we have an API key for the selected provider
if (!apiKey.trim() && !hasExistingKey) {
const providerName = aiProvider === 'openai' ? 'OpenAI' : aiProvider === 'claude' ? 'Claude' : 'Gemini';
setNotice({
type: 'error',
message: __(`Please enter a ${providerName} API key for the selected provider.`, 'thinkrank')
});
return;
}
// Validate API key format if provided
if (apiKey.trim()) {
const validation = validateApiKey(apiKey, aiProvider);
if (!validation.valid) {
setNotice({
type: 'error',
message: validation.message
});
return;
}
}
setIsSaving(true);
setNotice(null);
try {
const saveData = {
ai_provider: aiProvider,
keep_data_on_uninstall: !deleteDataOnUninstall, // Invert because UI asks "delete data"
};
// Include API key if user entered a new one
if (apiKey.trim()) {
saveData[`${aiProvider}_api_key`] = apiKey;
}
// Include model selection (use provider-specific state)
if (aiProvider === 'claude') {
saveData.claude_model = claudeModelState;
} else if (aiProvider === 'gemini') {
saveData.gemini_model = geminiModelState;
} else {
saveData.openai_model = openaiModelState;
}
const response = await apiFetch({
path: '/thinkrank/v1/settings',
method: 'POST',
data: saveData,
});
if (response.success) {
setNotice({
type: 'success',
message: __('Settings saved successfully!', 'thinkrank')
});
// If we saved a new API key, mark that we have one and clear input
if (apiKey.trim()) {
setHasExistingKey(true);
setApiKey('');
}
// Refresh the settings to ensure UI is in sync
await loadSettings();
} else {
setNotice({
type: 'error',
message: response.message || __('Failed to save settings.', 'thinkrank')
});
}
} catch (error) {
console.error('Failed to save settings:', error);
setNotice({
type: 'error',
message: __('Failed to save settings. Please try again.', 'thinkrank')
});
} finally {
setIsSaving(false);
}
};
const handleTestConnection = async () => {
if (!apiKey.trim()) {
setNotice({
type: 'error',
message: __('Please enter an API key first.', 'thinkrank')
});
return;
}
// Validate API key format before testing
const validation = validateApiKey(apiKey, aiProvider);
if (!validation.valid) {
setNotice({
type: 'error',
message: validation.message
});
return;
}
setIsTesting(true);
setNotice(null);
try {
const response = await apiFetch({
path: '/thinkrank/v1/ai/test-connection',
method: 'POST',
data: {
api_key: apiKey,
provider: aiProvider,
},
});
if (response && response.success) {
setNotice({
type: 'success',
message: __('API connection successful!', 'thinkrank')
});
} else {
const errorMessage = response?.message ||
__('API connection failed. Please check your API key and try again.', 'thinkrank');
setNotice({
type: 'error',
message: errorMessage
});
}
} catch (error) {
console.error('Failed to test connection:', error);
// Better error handling for different types of failures
let errorMessage = __('Failed to test API connection.', 'thinkrank');
if (error.message) {
if (error.message.includes('fetch')) {
errorMessage = __('Network error. Please check your internet connection.', 'thinkrank');
} else if (error.message.includes('401') || error.message.includes('403')) {
errorMessage = __('Invalid API key. Please check your credentials.', 'thinkrank');
} else if (error.message.includes('429')) {
errorMessage = __('Rate limit exceeded. Please try again later.', 'thinkrank');
} else {
errorMessage = `${__('Connection failed:', 'thinkrank')} ${error.message}`;
}
}
setNotice({
type: 'error',
message: errorMessage
});
} finally {
setIsTesting(false);
}
};
const handleClearApiKey = async () => {
if (!hasExistingKey) {
setNotice({
type: 'warning',
message: __('No API key is currently saved.', 'thinkrank')
});
return;
}
if (!confirm(__('Are you sure you want to clear the saved API key? This action cannot be undone.', 'thinkrank'))) {
return;
}
setIsSaving(true);
setNotice(null);
try {
const response = await apiFetch({
path: '/thinkrank/v1/settings',
method: 'POST',
data: {
[`${aiProvider}_api_key`]: '', // Clear the API key
},
});
if (response.success) {
setNotice({
type: 'success',
message: __('API key cleared successfully.', 'thinkrank')
});
setHasExistingKey(false);
setApiKey('');
// Refresh the settings to ensure UI is in sync
await loadSettings();
} else {
setNotice({
type: 'error',
message: response.message || __('Failed to clear API key.', 'thinkrank')
});
}
} catch (error) {
console.error('Failed to clear API key:', error);
setNotice({
type: 'error',
message: __('Failed to clear API key. Please try again.', 'thinkrank')
});
} finally {
setIsSaving(false);
}
};
if (isLoading) {
return (
{__('Loading settings...', 'thinkrank')}
);
}
return (
{notice && (
setNotice(null)}
>
{notice.message}
)}
{__('ThinkRank Settings', 'thinkrank')}
{__('Configure your AI provider and API settings to start generating content briefs.', 'thinkrank')}
{__('AI Settings', 'thinkrank')}
{/* AI Provider Visual Selector */}
{__('Choose your preferred AI provider for content generation.', 'thinkrank')}
{/* API Key Input */}
{/* Model Selection - Provider Specific */}
{aiProvider === 'openai' && (
{ setOpenaiModelState(v); setSelectedModel(v); }}
help={__('Choose the OpenAI model to use for content generation.', 'thinkrank')}
__next40pxDefaultSize={true}
__nextHasNoMarginBottom={true}
/>
)}
{aiProvider === 'claude' && (
{ setClaudeModelState(v); setSelectedModel(v); }}
help={__('Choose the Claude model to use for content generation.', 'thinkrank')}
__next40pxDefaultSize={true}
__nextHasNoMarginBottom={true}
/>
)}
{aiProvider === 'gemini' && (
{ setGeminiModelState(v); setSelectedModel(v); }}
help={__('Choose the Gemini model to use for content generation.', 'thinkrank')}
__next40pxDefaultSize={true}
__nextHasNoMarginBottom={true}
/>
)}
{hasExistingKey && (
{__('API key is configured and saved.', 'thinkrank')}
{__('With your own API key, you have unlimited AI generations at no additional cost. You pay the provider directly.', 'thinkrank')}
)}
{/* Action Buttons */}
{hasExistingKey && (
)}
{__('Data Management', 'thinkrank')}
✓
{__('What gets preserved', 'thinkrank')}
{__('API keys and provider settings', 'thinkrank')}