1014 lines
28 KiB
JavaScript
1014 lines
28 KiB
JavaScript
/**
|
|
* WP Agentic Writer Settings V2
|
|
* Bootstrap-based settings page JavaScript
|
|
*/
|
|
|
|
(function($) {
|
|
'use strict';
|
|
|
|
// Global state
|
|
const state = {
|
|
models: {},
|
|
currentPage: 1,
|
|
perPage: 25,
|
|
filters: {
|
|
post: '',
|
|
model: '',
|
|
type: '',
|
|
dateFrom: '',
|
|
dateTo: ''
|
|
}
|
|
};
|
|
|
|
// Preset configurations
|
|
const presets = {
|
|
budget: {
|
|
chat: 'google/gemini-2.5-flash',
|
|
clarity: 'google/gemini-2.5-flash',
|
|
planning: 'google/gemini-2.5-flash',
|
|
writing: 'mistralai/mistral-small-creative',
|
|
refinement: 'google/gemini-2.5-flash',
|
|
image: 'openai/gpt-4o'
|
|
},
|
|
balanced: {
|
|
chat: 'google/gemini-2.5-flash',
|
|
clarity: 'google/gemini-2.5-flash',
|
|
planning: 'google/gemini-2.5-flash',
|
|
writing: 'anthropic/claude-3.5-sonnet',
|
|
refinement: 'anthropic/claude-3.5-sonnet',
|
|
image: 'openai/gpt-4o'
|
|
},
|
|
premium: {
|
|
chat: 'google/gemini-3-flash-preview',
|
|
clarity: 'anthropic/claude-sonnet-4',
|
|
planning: 'google/gemini-3-flash-preview',
|
|
writing: 'openai/gpt-4.1',
|
|
refinement: 'openai/gpt-4.1',
|
|
image: 'openai/gpt-4o'
|
|
}
|
|
};
|
|
|
|
// Debug function to check models
|
|
window.wpawDebugModels = function() {
|
|
console.log('=== WPAW Models Debug ===');
|
|
console.log('Total model categories:', Object.keys(state.models).length);
|
|
|
|
Object.keys(state.models).forEach(category => {
|
|
const models = state.models[category]?.all || [];
|
|
console.log(`\n${category.toUpperCase()}: ${models.length} models`);
|
|
|
|
// Check for specific models
|
|
const checkIds = ['deepseek/deepseek-chat-v3-0324', 'anthropic/claude-3.5-sonnet'];
|
|
checkIds.forEach(id => {
|
|
const found = models.find(m => m.id === id);
|
|
if (found) {
|
|
console.log(` ✓ FOUND: ${id} => ${found.name}`);
|
|
} else {
|
|
console.log(` ✗ NOT FOUND: ${id}`);
|
|
}
|
|
});
|
|
|
|
// Show models with raw is_free and pricing data
|
|
if (category === 'image') {
|
|
console.log(` ALL image models (raw data from PHP):`);
|
|
models.forEach(m => {
|
|
console.log(` - ${m.id} | is_free=${m.is_free} | pricing=`, m.pricing);
|
|
});
|
|
} else {
|
|
// Show first 10 models with is_free status
|
|
console.log(` First 10 models (raw data from PHP):`);
|
|
models.slice(0, 10).forEach(m => {
|
|
console.log(` - ${m.id} | is_free=${m.is_free} | pricing=`, m.pricing);
|
|
});
|
|
}
|
|
});
|
|
|
|
// AJAX debug call
|
|
console.log('\n=== Fetching from server ===');
|
|
$.ajax({
|
|
url: wpawSettingsV2.ajaxUrl,
|
|
type: 'POST',
|
|
data: {
|
|
action: 'wpaw_debug_models',
|
|
nonce: wpawSettingsV2.nonce
|
|
},
|
|
success: function(response) {
|
|
if (response.success) {
|
|
console.log('Server response:', response.data);
|
|
console.log('Total models from API:', response.data.total_models);
|
|
console.log('Found models:', response.data.found_models);
|
|
console.log('Missing models:', response.data.missing_models);
|
|
console.log('Sample models:', response.data.sample_models);
|
|
} else {
|
|
console.error('Error:', response.data.message);
|
|
}
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.error('AJAX error:', error);
|
|
}
|
|
});
|
|
};
|
|
|
|
// Initialize when document is ready
|
|
$(document).ready(function() {
|
|
initSelect2();
|
|
initApiKeyToggle();
|
|
initCustomLanguages();
|
|
initCostLog();
|
|
initPresets();
|
|
initRefreshModels();
|
|
initFormSave();
|
|
initCustomModels();
|
|
updateCostEstimate();
|
|
|
|
// Log debug info
|
|
console.log('WPAW Settings V2 loaded. Run wpawDebugModels() to debug model issues.');
|
|
});
|
|
|
|
/**
|
|
* Initialize Select2 for model dropdowns
|
|
*/
|
|
function initSelect2() {
|
|
if (typeof wpawSettingsV2 === 'undefined') return;
|
|
|
|
state.models = wpawSettingsV2.models || {};
|
|
|
|
$('.wpaw-select2-model').each(function() {
|
|
const $select = $(this);
|
|
const modelType = $select.data('model-type') || 'execution';
|
|
const models = getModelsForType(modelType);
|
|
const currentValue = wpawSettingsV2.currentModels[modelType] || $select.val();
|
|
|
|
// Clear any pre-existing options
|
|
$select.empty();
|
|
|
|
$select.select2({
|
|
theme: 'bootstrap-5',
|
|
width: '100%',
|
|
placeholder: wpawSettingsV2.i18n.searchPlaceholder || 'Search models...',
|
|
allowClear: true,
|
|
data: formatModelsForSelect2(models),
|
|
templateResult: formatModelOption,
|
|
templateSelection: formatModelSelection,
|
|
language: {
|
|
noResults: function() {
|
|
return wpawSettingsV2.i18n.noResults || 'No models found';
|
|
}
|
|
}
|
|
});
|
|
|
|
// Set current value after Select2 is initialized
|
|
if (currentValue) {
|
|
const modelData = models.find(m => m.id === currentValue);
|
|
if (modelData) {
|
|
// Create a new option with the proper formatted name
|
|
const newOption = new Option(modelData.name || currentValue, currentValue, true, true);
|
|
$select.append(newOption).trigger('change');
|
|
} else {
|
|
console.warn('Model not found in list:', currentValue);
|
|
}
|
|
}
|
|
|
|
// Update cost estimate on change
|
|
$select.on('change', function() {
|
|
updateCostEstimate();
|
|
});
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Get models for a specific type
|
|
*/
|
|
function getModelsForType(type) {
|
|
if (type === 'clarity' || type === 'refinement' || type === 'chat') {
|
|
return state.models.execution?.all || state.models.planning?.all || [];
|
|
}
|
|
|
|
// Merge 'all' and 'recommended' arrays for complete model list
|
|
const allModels = state.models[type]?.all || [];
|
|
const recommended = state.models[type]?.recommended || [];
|
|
|
|
// Combine and deduplicate by id
|
|
const combined = [...allModels];
|
|
recommended.forEach(model => {
|
|
if (!combined.find(m => m.id === model.id)) {
|
|
combined.push(model);
|
|
}
|
|
});
|
|
|
|
return combined;
|
|
}
|
|
|
|
/**
|
|
* Format models for Select2
|
|
*/
|
|
function formatModelsForSelect2(models) {
|
|
if (!Array.isArray(models)) return [];
|
|
|
|
return models.map(model => ({
|
|
id: model.id,
|
|
text: model.name || model.id,
|
|
is_free: model.is_free || false,
|
|
is_custom: model.is_custom || false,
|
|
pricing: model.pricing || {}
|
|
}));
|
|
}
|
|
|
|
/**
|
|
* Format model option in dropdown - trust OpenRouter's is_free and pricing
|
|
*/
|
|
function formatModelOption(model) {
|
|
if (!model.id) return model.text;
|
|
|
|
const $container = $('<div class="d-flex justify-content-between align-items-center"></div>');
|
|
const $name = $('<span></span>').text(model.text);
|
|
$container.append($name);
|
|
|
|
// Custom models get "Custom" badge
|
|
if (model.is_custom) {
|
|
const $badge = $('<span class="badge bg-secondary-subtle text-secondary ms-2">Custom</span>');
|
|
$container.append($badge);
|
|
} else if (model.is_free) {
|
|
const $badge = $('<span class="badge bg-success-subtle text-success ms-2">FREE</span>');
|
|
$container.append($badge);
|
|
} else {
|
|
// Show price: prompt for text models, image for image models
|
|
const promptPrice = parseFloat(model.pricing?.prompt) || 0;
|
|
const imagePrice = parseFloat(model.pricing?.image) || 0;
|
|
const price = imagePrice > 0 ? imagePrice : promptPrice;
|
|
|
|
if (price > 0) {
|
|
const cost = (price * 1000000).toFixed(2);
|
|
const $cost = $('<span class="text-muted small ms-2"></span>').text(`$${cost}/1M`);
|
|
$container.append($cost);
|
|
}
|
|
}
|
|
|
|
return $container;
|
|
}
|
|
|
|
/**
|
|
* Format selected model - just show name
|
|
*/
|
|
function formatModelSelection(model) {
|
|
if (!model.id) return model.text;
|
|
return model.text;
|
|
}
|
|
|
|
/**
|
|
* Initialize preset cards
|
|
*/
|
|
function initPresets() {
|
|
$('.preset-card').on('click keypress', function(e) {
|
|
if (e.type === 'keypress' && e.which !== 13) return;
|
|
|
|
const preset = $(this).data('preset');
|
|
if (!preset || !presets[preset]) return;
|
|
|
|
applyPreset(preset);
|
|
|
|
// Update UI
|
|
$('.preset-card').removeClass('border-primary');
|
|
$(this).addClass('border-primary');
|
|
|
|
showToast('Preset applied: ' + preset.charAt(0).toUpperCase() + preset.slice(1), 'success');
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Apply a preset configuration
|
|
*/
|
|
function applyPreset(presetName) {
|
|
const config = presets[presetName];
|
|
if (!config) return;
|
|
|
|
const fieldMap = {
|
|
chat: '#chat_model',
|
|
clarity: '#clarity_model',
|
|
planning: '#planning_model',
|
|
writing: '#writing_model',
|
|
refinement: '#refinement_model',
|
|
image: '#image_model'
|
|
};
|
|
|
|
Object.keys(config).forEach(type => {
|
|
const $select = $(fieldMap[type]);
|
|
if (!$select.length) return;
|
|
|
|
const targetId = config[type];
|
|
|
|
// Add option if not exists
|
|
if (!$select.find(`option[value="${targetId}"]`).length) {
|
|
const displayName = targetId.split('/').pop().replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
|
|
$select.append(new Option(displayName, targetId, false, false));
|
|
}
|
|
|
|
$select.val(targetId).trigger('change');
|
|
});
|
|
|
|
updateCostEstimate();
|
|
}
|
|
|
|
/**
|
|
* Initialize API key visibility toggle
|
|
*/
|
|
function initApiKeyToggle() {
|
|
$('#wpaw-toggle-api-key').on('click', function() {
|
|
const $input = $('#openrouter_api_key');
|
|
const type = $input.attr('type');
|
|
$input.attr('type', type === 'password' ? 'text' : 'password');
|
|
$(this).find('.bi')
|
|
.toggleClass('bi-eye', type === 'text')
|
|
.toggleClass('bi-eye-slash', type === 'password');
|
|
});
|
|
|
|
$('#wpaw-test-api-key').on('click', function() {
|
|
const apiKey = $('#openrouter_api_key').val();
|
|
if (!apiKey) {
|
|
showToast('Please enter an API key first', 'warning');
|
|
return;
|
|
}
|
|
|
|
const $btn = $(this);
|
|
const originalText = $btn.html();
|
|
$btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-2"></span>Testing...');
|
|
|
|
$.ajax({
|
|
url: wpawSettingsV2.ajaxUrl,
|
|
type: 'POST',
|
|
data: {
|
|
action: 'wpaw_test_api_connection',
|
|
nonce: wpawSettingsV2.nonce
|
|
},
|
|
success: function(response) {
|
|
if (response.success) {
|
|
showToast(response.data.message + ' (' + response.data.models_count + ' models available)', 'success');
|
|
} else {
|
|
showToast(response.data.message || 'API test failed', 'danger');
|
|
}
|
|
},
|
|
error: function() {
|
|
showToast('Failed to test API connection', 'danger');
|
|
},
|
|
complete: function() {
|
|
$btn.prop('disabled', false).html(originalText);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Initialize custom languages management
|
|
*/
|
|
function initCustomLanguages() {
|
|
$('#wpaw-add-custom-language').on('click', function() {
|
|
const html = `
|
|
<div class="input-group mb-2 wpaw-custom-language-item">
|
|
<input type="text" class="form-control" name="wp_agentic_writer_settings[custom_languages][]" value="" placeholder="e.g., Betawi, Minangkabau" />
|
|
<button type="button" class="btn btn-outline-danger wpaw-remove-language">
|
|
<span class="dashicons dashicons-no-alt"></span>
|
|
</button>
|
|
</div>
|
|
`;
|
|
$('#wpaw-custom-languages-list').append(html);
|
|
});
|
|
|
|
$(document).on('click', '.wpaw-remove-language', function() {
|
|
$(this).closest('.wpaw-custom-language-item').remove();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Initialize cost log functionality
|
|
*/
|
|
function initCostLog() {
|
|
console.log('Initializing cost log...');
|
|
|
|
// Load on tab show
|
|
$('#cost-log-tab').on('shown.bs.tab', function() {
|
|
console.log('Cost log tab shown, loading data...');
|
|
loadCostLogData();
|
|
});
|
|
|
|
// Auto-load if cost-log tab is active on page load
|
|
if ($('#cost-log-tab').hasClass('active')) {
|
|
console.log('Cost log tab is active on load, loading data...');
|
|
loadCostLogData();
|
|
}
|
|
|
|
// Filter controls
|
|
$('#wpaw-apply-filters').on('click', function() {
|
|
state.filters = {
|
|
post: $('#wpaw-filter-post').val(),
|
|
model: $('#wpaw-filter-model').val(),
|
|
type: $('#wpaw-filter-type').val(),
|
|
dateFrom: $('#wpaw-filter-date-from').val(),
|
|
dateTo: $('#wpaw-filter-date-to').val()
|
|
};
|
|
state.currentPage = 1;
|
|
loadCostLogData();
|
|
});
|
|
|
|
$('#wpaw-clear-filters').on('click', function() {
|
|
$('#wpaw-filter-post').val('');
|
|
$('#wpaw-filter-model').val('');
|
|
$('#wpaw-filter-type').val('');
|
|
$('#wpaw-filter-date-from').val('');
|
|
$('#wpaw-filter-date-to').val('');
|
|
state.filters = { post: '', model: '', type: '', dateFrom: '', dateTo: '' };
|
|
state.currentPage = 1;
|
|
loadCostLogData();
|
|
});
|
|
|
|
$('#wpaw-per-page').on('change', function() {
|
|
state.perPage = parseInt($(this).val()) || 25;
|
|
state.currentPage = 1;
|
|
loadCostLogData();
|
|
});
|
|
|
|
// Export CSV
|
|
$('#wpaw-export-csv').on('click', exportCostLogCSV);
|
|
|
|
// Pagination clicks
|
|
$(document).on('click', '#wpaw-pagination .page-link', function(e) {
|
|
e.preventDefault();
|
|
const page = $(this).data('page');
|
|
if (page && page !== state.currentPage) {
|
|
state.currentPage = page;
|
|
loadCostLogData();
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Load cost log data via AJAX
|
|
*/
|
|
function loadCostLogData() {
|
|
console.log('loadCostLogData called');
|
|
console.log('wpawSettingsV2:', wpawSettingsV2);
|
|
console.log('State:', state);
|
|
|
|
const $tbody = $('#wpaw-cost-log-tbody');
|
|
console.log('Table tbody found:', $tbody.length);
|
|
|
|
$tbody.html(`
|
|
<tr>
|
|
<td colspan="7" class="text-center py-5">
|
|
<div class="spinner-border text-primary" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`);
|
|
|
|
const ajaxData = {
|
|
action: 'wpaw_get_cost_log_data',
|
|
nonce: wpawSettingsV2.nonce,
|
|
page: state.currentPage,
|
|
per_page: state.perPage,
|
|
filter_post: state.filters.post,
|
|
filter_model: state.filters.model,
|
|
filter_type: state.filters.type,
|
|
filter_date_from: state.filters.dateFrom,
|
|
filter_date_to: state.filters.dateTo
|
|
};
|
|
|
|
console.log('AJAX request data:', ajaxData);
|
|
|
|
$.ajax({
|
|
url: wpawSettingsV2.ajaxUrl,
|
|
type: 'POST',
|
|
data: ajaxData,
|
|
success: function(response) {
|
|
console.log('Cost log response:', response);
|
|
if (response.success) {
|
|
renderCostLogTable(response.data);
|
|
updateCostLogStats(response.data.stats);
|
|
updateFilterOptions(response.data.filters);
|
|
renderPagination(response.data);
|
|
} else {
|
|
const errorMsg = response.data?.message || 'Error loading data';
|
|
console.error('Cost log error:', errorMsg);
|
|
$tbody.html('<tr><td colspan="7" class="text-center py-4 text-danger">' + escapeHtml(errorMsg) + '</td></tr>');
|
|
}
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.error('Cost log AJAX error:', status, error);
|
|
console.error('XHR:', xhr);
|
|
console.error('Response text:', xhr.responseText);
|
|
$tbody.html('<tr><td colspan="7" class="text-center py-4 text-danger">Failed to load cost log. Check browser console for details.</td></tr>');
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Render cost log table (grouped by post)
|
|
*/
|
|
function renderCostLogTable(data) {
|
|
const $tbody = $('#wpaw-cost-log-tbody');
|
|
const records = data.records || [];
|
|
|
|
if (records.length === 0) {
|
|
$tbody.html('<tr><td colspan="3" class="text-center py-4 text-muted">No cost records found.</td></tr>');
|
|
return;
|
|
}
|
|
|
|
let html = '';
|
|
records.forEach((group, index) => {
|
|
const collapseId = `collapse-post-${group.post_id}-${index}`;
|
|
const postCell = group.post_link
|
|
? `<a href="${group.post_link}" class="text-decoration-none" target="_blank">${escapeHtml(group.post_title)}</a>`
|
|
: `<span class="text-muted">${escapeHtml(group.post_title)}</span>`;
|
|
|
|
// Main row (clickable to expand)
|
|
html += `
|
|
<tr class="wpaw-group-row" data-bs-toggle="collapse" data-bs-target="#${collapseId}" style="cursor: pointer;">
|
|
<td class="px-3">
|
|
<span class="dashicons dashicons-arrow-right-alt2 me-2 wpaw-collapse-icon"></span>
|
|
${postCell}
|
|
</td>
|
|
<td class="text-center">
|
|
<span class="badge bg-secondary">${group.call_count} ${group.call_count === 1 ? 'call' : 'calls'}</span>
|
|
</td>
|
|
<td class="text-end px-3 fw-semibold">$${group.total_cost}</td>
|
|
</tr>
|
|
`;
|
|
|
|
// Collapsible details row
|
|
html += `
|
|
<tr class="collapse wpaw-collapse-row" id="${collapseId}">
|
|
<td colspan="3" class="p-0">
|
|
<div class="table-responsive">
|
|
<table class="table table-sm mb-0 wpaw-details-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="px-3 small text-muted"><?php esc_html_e( 'Date/Time', 'wp-agentic-writer' ); ?></th>
|
|
<th class="small text-muted"><?php esc_html_e( 'Model', 'wp-agentic-writer' ); ?></th>
|
|
<th class="small text-muted"><?php esc_html_e( 'Type', 'wp-agentic-writer' ); ?></th>
|
|
<th class="text-end small text-muted"><?php esc_html_e( 'Input', 'wp-agentic-writer' ); ?></th>
|
|
<th class="text-end small text-muted"><?php esc_html_e( 'Output', 'wp-agentic-writer' ); ?></th>
|
|
<th class="text-end px-3 small text-muted"><?php esc_html_e( 'Cost', 'wp-agentic-writer' ); ?></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
`;
|
|
|
|
// Detail rows
|
|
group.details.forEach(detail => {
|
|
html += `
|
|
<tr>
|
|
<td class="px-3 small">${escapeHtml(detail.created_at)}</td>
|
|
<td><code class="small">${escapeHtml(detail.model)}</code></td>
|
|
<td class="small">${escapeHtml(detail.action)}</td>
|
|
<td class="text-end small">${detail.input_tokens}</td>
|
|
<td class="text-end small">${detail.output_tokens}</td>
|
|
<td class="text-end px-3 small">$${detail.cost}</td>
|
|
</tr>
|
|
`;
|
|
});
|
|
|
|
html += `
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
});
|
|
|
|
$tbody.html(html);
|
|
|
|
// Add collapse event listeners to rotate icon
|
|
$('.wpaw-group-row').on('click', function() {
|
|
const $icon = $(this).find('.wpaw-collapse-icon');
|
|
setTimeout(() => {
|
|
const target = $(this).data('bs-target');
|
|
const isExpanded = $(target).hasClass('show');
|
|
$icon.toggleClass('dashicons-arrow-right-alt2', !isExpanded);
|
|
$icon.toggleClass('dashicons-arrow-down-alt2', isExpanded);
|
|
}, 10);
|
|
});
|
|
|
|
// Update records info
|
|
const start = (data.current_page - 1) * data.per_page + 1;
|
|
const end = Math.min(data.current_page * data.per_page, data.total_items);
|
|
$('#wpaw-records-info').text(`Showing ${start}-${end} of ${data.total_items} posts`);
|
|
}
|
|
|
|
/**
|
|
* Update cost log stats
|
|
*/
|
|
function updateCostLogStats(stats) {
|
|
if (!stats) return;
|
|
$('#wpaw-stat-all-time').text('$' + stats.all_time);
|
|
$('#wpaw-stat-monthly').text('$' + stats.monthly);
|
|
$('#wpaw-stat-today').text('$' + stats.today);
|
|
$('#wpaw-stat-avg').text('$' + stats.avg_per_post);
|
|
}
|
|
|
|
/**
|
|
* Update filter dropdown options
|
|
*/
|
|
function updateFilterOptions(filters) {
|
|
if (!filters) return;
|
|
|
|
// Models
|
|
const $modelSelect = $('#wpaw-filter-model');
|
|
const currentModel = $modelSelect.val();
|
|
$modelSelect.find('option:not(:first)').remove();
|
|
(filters.models || []).forEach(model => {
|
|
$modelSelect.append(new Option(model, model, false, model === currentModel));
|
|
});
|
|
|
|
// Types
|
|
const $typeSelect = $('#wpaw-filter-type');
|
|
const currentType = $typeSelect.val();
|
|
$typeSelect.find('option:not(:first)').remove();
|
|
(filters.types || []).forEach(type => {
|
|
const label = type.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
|
|
$typeSelect.append(new Option(label, type, false, type === currentType));
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Render pagination
|
|
*/
|
|
function renderPagination(data) {
|
|
const $pagination = $('#wpaw-pagination');
|
|
const totalPages = data.total_pages || 1;
|
|
const currentPage = data.current_page || 1;
|
|
|
|
if (totalPages <= 1) {
|
|
$pagination.html('');
|
|
return;
|
|
}
|
|
|
|
let html = '';
|
|
|
|
// Previous
|
|
html += `<li class="page-item ${currentPage <= 1 ? 'disabled' : ''}">
|
|
<a class="page-link" href="#" data-page="${currentPage - 1}">«</a>
|
|
</li>`;
|
|
|
|
// Page numbers
|
|
const maxVisible = 5;
|
|
let startPage = Math.max(1, currentPage - Math.floor(maxVisible / 2));
|
|
let endPage = Math.min(totalPages, startPage + maxVisible - 1);
|
|
|
|
if (endPage - startPage < maxVisible - 1) {
|
|
startPage = Math.max(1, endPage - maxVisible + 1);
|
|
}
|
|
|
|
if (startPage > 1) {
|
|
html += `<li class="page-item"><a class="page-link" href="#" data-page="1">1</a></li>`;
|
|
if (startPage > 2) {
|
|
html += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
|
|
}
|
|
}
|
|
|
|
for (let i = startPage; i <= endPage; i++) {
|
|
html += `<li class="page-item ${i === currentPage ? 'active' : ''}">
|
|
<a class="page-link" href="#" data-page="${i}">${i}</a>
|
|
</li>`;
|
|
}
|
|
|
|
if (endPage < totalPages) {
|
|
if (endPage < totalPages - 1) {
|
|
html += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
|
|
}
|
|
html += `<li class="page-item"><a class="page-link" href="#" data-page="${totalPages}">${totalPages}</a></li>`;
|
|
}
|
|
|
|
// Next
|
|
html += `<li class="page-item ${currentPage >= totalPages ? 'disabled' : ''}">
|
|
<a class="page-link" href="#" data-page="${currentPage + 1}">»</a>
|
|
</li>`;
|
|
|
|
$pagination.html(html);
|
|
}
|
|
|
|
/**
|
|
* Export cost log to CSV
|
|
*/
|
|
function exportCostLogCSV() {
|
|
const table = $('#wpaw-cost-log-table');
|
|
const rows = [];
|
|
|
|
// Headers
|
|
const headers = [];
|
|
table.find('thead th').each(function() {
|
|
headers.push($(this).text().trim());
|
|
});
|
|
rows.push(headers.join(','));
|
|
|
|
// Data rows
|
|
table.find('tbody tr').each(function() {
|
|
const row = [];
|
|
$(this).find('td').each(function() {
|
|
let text = $(this).text().trim().replace(/"/g, '""');
|
|
row.push('"' + text + '"');
|
|
});
|
|
if (row.length > 0) {
|
|
rows.push(row.join(','));
|
|
}
|
|
});
|
|
|
|
// Download
|
|
const csvContent = rows.join('\n');
|
|
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = 'wp-agentic-writer-costs-' + new Date().toISOString().split('T')[0] + '.csv';
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
URL.revokeObjectURL(url);
|
|
|
|
showToast('CSV exported successfully', 'success');
|
|
}
|
|
|
|
/**
|
|
* Initialize refresh models button
|
|
*/
|
|
function initRefreshModels() {
|
|
$('#wpaw-refresh-models').on('click', function() {
|
|
const $btn = $(this);
|
|
const $spinner = $('#wpaw-models-spinner');
|
|
const $message = $('#wpaw-models-message');
|
|
|
|
$btn.prop('disabled', true);
|
|
$spinner.removeClass('d-none');
|
|
|
|
$.ajax({
|
|
url: wpawSettingsV2.ajaxUrl,
|
|
type: 'POST',
|
|
data: {
|
|
action: 'wpaw_refresh_models',
|
|
nonce: wpawSettingsV2.nonce
|
|
},
|
|
success: function(response) {
|
|
if (response.success) {
|
|
// Update both state and wpawSettingsV2 with new models
|
|
state.models = response.data.models;
|
|
wpawSettingsV2.models = response.data.models;
|
|
|
|
// Destroy all Select2 instances
|
|
$('.wpaw-select2-model').each(function() {
|
|
$(this).select2('destroy');
|
|
});
|
|
|
|
// Reinitialize Select2 with new models
|
|
initSelect2();
|
|
|
|
showToast(response.data.message || 'Models refreshed!', 'success');
|
|
} else {
|
|
showToast(response.data?.message || 'Failed to refresh models', 'danger');
|
|
}
|
|
},
|
|
error: function() {
|
|
showToast('Failed to refresh models', 'danger');
|
|
},
|
|
complete: function() {
|
|
$btn.prop('disabled', false);
|
|
$spinner.addClass('d-none');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Initialize form save handling
|
|
*/
|
|
function initFormSave() {
|
|
$('#wpaw-reset-settings').on('click', function() {
|
|
if (confirm(wpawSettingsV2.i18n.confirmReset || 'Are you sure you want to reset all settings to defaults?')) {
|
|
// Apply balanced preset as default
|
|
applyPreset('balanced');
|
|
showToast('Settings reset to defaults. Click Save to apply.', 'info');
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Update cost estimate based on selected models
|
|
*/
|
|
function updateCostEstimate() {
|
|
// Simple estimate calculation
|
|
// Planning: ~2K tokens, Writing: ~4K tokens, 1 image
|
|
const planningModel = $('#planning_model').val();
|
|
const writingModel = $('#writing_model').val();
|
|
|
|
let estimate = 0.10; // Default balanced estimate
|
|
|
|
if (writingModel) {
|
|
if (writingModel.includes('mistral') || writingModel.includes('gemini')) {
|
|
estimate = 0.06;
|
|
} else if (writingModel.includes('gpt-4.1') || writingModel.includes('opus')) {
|
|
estimate = 0.31;
|
|
} else if (writingModel.includes('claude') || writingModel.includes('sonnet')) {
|
|
estimate = 0.14;
|
|
}
|
|
}
|
|
|
|
$('#wpaw-cost-estimate').text('~$' + estimate.toFixed(2));
|
|
}
|
|
|
|
/**
|
|
* Show toast notification
|
|
*/
|
|
function showToast(message, type) {
|
|
const $toast = $('#wpaw-toast');
|
|
const $body = $('#wpaw-toast-message');
|
|
|
|
$body.text(message);
|
|
$toast.removeClass('bg-success bg-danger bg-warning bg-info text-white');
|
|
|
|
if (type === 'success') {
|
|
$toast.addClass('bg-success text-white');
|
|
} else if (type === 'danger' || type === 'error') {
|
|
$toast.addClass('bg-danger text-white');
|
|
} else if (type === 'warning') {
|
|
$toast.addClass('bg-warning');
|
|
} else {
|
|
$toast.addClass('bg-info text-white');
|
|
}
|
|
|
|
const toast = new bootstrap.Toast($toast[0], { delay: 3000 });
|
|
toast.show();
|
|
}
|
|
|
|
/**
|
|
* Escape HTML entities
|
|
*/
|
|
function escapeHtml(text) {
|
|
if (!text) return '';
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
/**
|
|
* Initialize custom models repeater with auto-save
|
|
*/
|
|
function initCustomModels() {
|
|
let customModelIndex = $('#wpaw-custom-models-list .custom-model-row').length;
|
|
|
|
// Add new custom model row
|
|
$('#wpaw-add-custom-model').on('click', function() {
|
|
const template = $('#wpaw-custom-model-template').html();
|
|
const newRow = template.replace(/__INDEX__/g, customModelIndex);
|
|
$('#wpaw-custom-models-list').append(newRow);
|
|
customModelIndex++;
|
|
|
|
// Focus the new model ID input
|
|
$('#wpaw-custom-models-list .custom-model-row:last input:first').focus();
|
|
});
|
|
|
|
// Auto-save on blur from model ID input
|
|
$('#wpaw-custom-models-list').on('blur', '.wpaw-custom-model-id', function() {
|
|
const $row = $(this).closest('.custom-model-row');
|
|
const modelId = $row.find('.wpaw-custom-model-id').val().trim();
|
|
|
|
if (modelId) {
|
|
saveCustomModel($row);
|
|
}
|
|
});
|
|
|
|
// Auto-save on blur from model name input
|
|
$('#wpaw-custom-models-list').on('blur', '.wpaw-custom-model-name', function() {
|
|
const $row = $(this).closest('.custom-model-row');
|
|
const modelId = $row.find('.wpaw-custom-model-id').val().trim();
|
|
|
|
if (modelId) {
|
|
saveCustomModel($row);
|
|
}
|
|
});
|
|
|
|
// Auto-save on type change
|
|
$('#wpaw-custom-models-list').on('change', '.wpaw-custom-model-type', function() {
|
|
const $row = $(this).closest('.custom-model-row');
|
|
const modelId = $row.find('.wpaw-custom-model-id').val().trim();
|
|
|
|
if (modelId) {
|
|
saveCustomModel($row);
|
|
}
|
|
});
|
|
|
|
// Delete custom model
|
|
$('#wpaw-custom-models-list').on('click', '.wpaw-remove-custom-model', function() {
|
|
const $row = $(this).closest('.custom-model-row');
|
|
const modelId = $row.find('.wpaw-custom-model-id').val().trim();
|
|
|
|
if (modelId) {
|
|
deleteCustomModel(modelId, $row);
|
|
} else {
|
|
$row.remove();
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Save custom model via AJAX
|
|
*/
|
|
function saveCustomModel($row) {
|
|
const modelId = $row.find('.wpaw-custom-model-id').val().trim();
|
|
const modelName = $row.find('.wpaw-custom-model-name').val().trim();
|
|
const modelType = $row.find('.wpaw-custom-model-type').val();
|
|
|
|
if (!modelId) return;
|
|
|
|
// Show saving indicator
|
|
$row.css('opacity', '0.6');
|
|
|
|
$.ajax({
|
|
url: wpawSettingsV2.ajaxUrl,
|
|
type: 'POST',
|
|
data: {
|
|
action: 'wpaw_save_custom_model',
|
|
nonce: wpawSettingsV2.nonce,
|
|
model_id: modelId,
|
|
model_name: modelName,
|
|
model_type: modelType
|
|
},
|
|
success: function(response) {
|
|
if (response.success) {
|
|
// Mark row as saved
|
|
$row.attr('data-saved', 'true');
|
|
|
|
// Update models and refresh Select2
|
|
state.models = response.data.models;
|
|
wpawSettingsV2.models = response.data.models;
|
|
refreshAllSelect2();
|
|
|
|
// Show toast only on first save
|
|
if (!$row.data('first-save-done')) {
|
|
showToast('Model saved!', 'success');
|
|
$row.data('first-save-done', true);
|
|
}
|
|
} else {
|
|
showToast(response.data?.message || 'Failed to save', 'danger');
|
|
}
|
|
},
|
|
error: function() {
|
|
showToast('Failed to save model', 'danger');
|
|
},
|
|
complete: function() {
|
|
$row.css('opacity', '1');
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Delete custom model via AJAX
|
|
*/
|
|
function deleteCustomModel(modelId, $row) {
|
|
$row.css('opacity', '0.6');
|
|
|
|
$.ajax({
|
|
url: wpawSettingsV2.ajaxUrl,
|
|
type: 'POST',
|
|
data: {
|
|
action: 'wpaw_delete_custom_model',
|
|
nonce: wpawSettingsV2.nonce,
|
|
model_id: modelId
|
|
},
|
|
success: function(response) {
|
|
if (response.success) {
|
|
$row.remove();
|
|
state.models = response.data.models;
|
|
wpawSettingsV2.models = response.data.models;
|
|
refreshAllSelect2();
|
|
showToast('Model deleted!', 'success');
|
|
} else {
|
|
showToast(response.data?.message || 'Failed to delete', 'danger');
|
|
$row.css('opacity', '1');
|
|
}
|
|
},
|
|
error: function() {
|
|
showToast('Failed to delete model', 'danger');
|
|
$row.css('opacity', '1');
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Refresh all Select2 dropdowns with current model data
|
|
*/
|
|
function refreshAllSelect2() {
|
|
$('.wpaw-select2-model').each(function() {
|
|
const $select = $(this);
|
|
const currentValue = $select.val();
|
|
|
|
// Destroy and reinitialize
|
|
if ($select.hasClass('select2-hidden-accessible')) {
|
|
$select.select2('destroy');
|
|
}
|
|
});
|
|
|
|
// Reinitialize all
|
|
initSelect2();
|
|
}
|
|
|
|
})(jQuery);
|