Add AI writing assistant plugin with local backend, brave search, and image generation support
- Implement local backend AI provider with Ollama integration - Add Brave Search API integration for real-time search suggestions - Add image generation manager with multiple AI providers - Create hybrid provider system with local/cloud fallback - Add comprehensive settings UI with provider management - Implement Gutenberg sidebar with writing assistance controls - Add SEO schema generation for AI-generated content - Multiple provider support: OpenRouter, local backend, Codex
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
* Bootstrap-based settings page JavaScript
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
(function ($) {
|
||||
'use strict';
|
||||
|
||||
// Global state
|
||||
@@ -49,14 +49,14 @@
|
||||
};
|
||||
|
||||
// Debug function to check models
|
||||
window.wpawDebugModels = function() {
|
||||
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 => {
|
||||
@@ -67,7 +67,7 @@
|
||||
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):`);
|
||||
@@ -82,7 +82,7 @@
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// AJAX debug call
|
||||
console.log('\n=== Fetching from server ===');
|
||||
$.ajax({
|
||||
@@ -92,7 +92,7 @@
|
||||
action: 'wpaw_debug_models',
|
||||
nonce: wpawSettingsV2.nonce
|
||||
},
|
||||
success: function(response) {
|
||||
success: function (response) {
|
||||
if (response.success) {
|
||||
console.log('Server response:', response.data);
|
||||
console.log('Total models from API:', response.data.total_models);
|
||||
@@ -103,14 +103,14 @@
|
||||
console.error('Error:', response.data.message);
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
error: function (xhr, status, error) {
|
||||
console.error('AJAX error:', error);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Initialize when document is ready
|
||||
$(document).ready(function() {
|
||||
$(document).ready(function () {
|
||||
initSelect2();
|
||||
initApiKeyToggle();
|
||||
initCustomLanguages();
|
||||
@@ -120,7 +120,12 @@
|
||||
initFormSave();
|
||||
initCustomModels();
|
||||
updateCostEstimate();
|
||||
|
||||
|
||||
// Update cost when provider routing changes
|
||||
$('select[name^="wp_agentic_writer_settings[task_providers]"]').on('change', function () {
|
||||
updateCostEstimate();
|
||||
});
|
||||
|
||||
// Log debug info
|
||||
console.log('WPAW Settings V2 loaded. Run wpawDebugModels() to debug model issues.');
|
||||
});
|
||||
@@ -133,7 +138,7 @@
|
||||
|
||||
state.models = wpawSettingsV2.models || {};
|
||||
|
||||
$('.wpaw-select2-model').each(function() {
|
||||
$('.wpaw-select2-model').each(function () {
|
||||
const $select = $(this);
|
||||
const modelType = $select.data('model-type') || 'execution';
|
||||
const models = getModelsForType(modelType);
|
||||
@@ -151,7 +156,7 @@
|
||||
templateResult: formatModelOption,
|
||||
templateSelection: formatModelSelection,
|
||||
language: {
|
||||
noResults: function() {
|
||||
noResults: function () {
|
||||
return wpawSettingsV2.i18n.noResults || 'No models found';
|
||||
}
|
||||
}
|
||||
@@ -170,7 +175,7 @@
|
||||
}
|
||||
|
||||
// Update cost estimate on change
|
||||
$select.on('change', function() {
|
||||
$select.on('change', function () {
|
||||
updateCostEstimate();
|
||||
});
|
||||
});
|
||||
@@ -183,11 +188,11 @@
|
||||
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 => {
|
||||
@@ -195,7 +200,7 @@
|
||||
combined.push(model);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
return combined;
|
||||
}
|
||||
|
||||
@@ -236,7 +241,7 @@
|
||||
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`);
|
||||
@@ -259,7 +264,7 @@
|
||||
* Initialize preset cards
|
||||
*/
|
||||
function initPresets() {
|
||||
$('.preset-card').on('click keypress', function(e) {
|
||||
$('.preset-card').on('click keypress', function (e) {
|
||||
if (e.type === 'keypress' && e.which !== 13) return;
|
||||
|
||||
const preset = $(this).data('preset');
|
||||
@@ -313,7 +318,7 @@
|
||||
* Initialize API key visibility toggle
|
||||
*/
|
||||
function initApiKeyToggle() {
|
||||
$('#wpaw-toggle-api-key').on('click', function() {
|
||||
$('#wpaw-toggle-api-key').on('click', function () {
|
||||
const $input = $('#openrouter_api_key');
|
||||
const type = $input.attr('type');
|
||||
$input.attr('type', type === 'password' ? 'text' : 'password');
|
||||
@@ -322,17 +327,17 @@
|
||||
.toggleClass('bi-eye-slash', type === 'password');
|
||||
});
|
||||
|
||||
$('#wpaw-test-api-key').on('click', function() {
|
||||
$('#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',
|
||||
@@ -340,17 +345,17 @@
|
||||
action: 'wpaw_test_api_connection',
|
||||
nonce: wpawSettingsV2.nonce
|
||||
},
|
||||
success: function(response) {
|
||||
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() {
|
||||
error: function () {
|
||||
showToast('Failed to test API connection', 'danger');
|
||||
},
|
||||
complete: function() {
|
||||
complete: function () {
|
||||
$btn.prop('disabled', false).html(originalText);
|
||||
}
|
||||
});
|
||||
@@ -361,7 +366,7 @@
|
||||
* Initialize custom languages management
|
||||
*/
|
||||
function initCustomLanguages() {
|
||||
$('#wpaw-add-custom-language').on('click', function() {
|
||||
$('#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" />
|
||||
@@ -373,7 +378,7 @@
|
||||
$('#wpaw-custom-languages-list').append(html);
|
||||
});
|
||||
|
||||
$(document).on('click', '.wpaw-remove-language', function() {
|
||||
$(document).on('click', '.wpaw-remove-language', function () {
|
||||
$(this).closest('.wpaw-custom-language-item').remove();
|
||||
});
|
||||
}
|
||||
@@ -383,9 +388,9 @@
|
||||
*/
|
||||
function initCostLog() {
|
||||
console.log('Initializing cost log...');
|
||||
|
||||
|
||||
// Load on tab show
|
||||
$('#cost-log-tab').on('shown.bs.tab', function() {
|
||||
$('#cost-log-tab').on('shown.bs.tab', function () {
|
||||
console.log('Cost log tab shown, loading data...');
|
||||
loadCostLogData();
|
||||
});
|
||||
@@ -397,7 +402,7 @@
|
||||
}
|
||||
|
||||
// Filter controls
|
||||
$('#wpaw-apply-filters').on('click', function() {
|
||||
$('#wpaw-apply-filters').on('click', function () {
|
||||
state.filters = {
|
||||
post: $('#wpaw-filter-post').val(),
|
||||
model: $('#wpaw-filter-model').val(),
|
||||
@@ -409,7 +414,7 @@
|
||||
loadCostLogData();
|
||||
});
|
||||
|
||||
$('#wpaw-clear-filters').on('click', function() {
|
||||
$('#wpaw-clear-filters').on('click', function () {
|
||||
$('#wpaw-filter-post').val('');
|
||||
$('#wpaw-filter-model').val('');
|
||||
$('#wpaw-filter-type').val('');
|
||||
@@ -420,7 +425,7 @@
|
||||
loadCostLogData();
|
||||
});
|
||||
|
||||
$('#wpaw-per-page').on('change', function() {
|
||||
$('#wpaw-per-page').on('change', function () {
|
||||
state.perPage = parseInt($(this).val()) || 25;
|
||||
state.currentPage = 1;
|
||||
loadCostLogData();
|
||||
@@ -430,7 +435,7 @@
|
||||
$('#wpaw-export-csv').on('click', exportCostLogCSV);
|
||||
|
||||
// Pagination clicks
|
||||
$(document).on('click', '#wpaw-pagination .page-link', function(e) {
|
||||
$(document).on('click', '#wpaw-pagination .page-link', function (e) {
|
||||
e.preventDefault();
|
||||
const page = $(this).data('page');
|
||||
if (page && page !== state.currentPage) {
|
||||
@@ -447,10 +452,10 @@
|
||||
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">
|
||||
@@ -472,14 +477,14 @@
|
||||
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) {
|
||||
success: function (response) {
|
||||
console.log('Cost log response:', response);
|
||||
if (response.success) {
|
||||
renderCostLogTable(response.data);
|
||||
@@ -492,7 +497,7 @@
|
||||
$tbody.html('<tr><td colspan="7" class="text-center py-4 text-danger">' + escapeHtml(errorMsg) + '</td></tr>');
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
error: function (xhr, status, error) {
|
||||
console.error('Cost log AJAX error:', status, error);
|
||||
console.error('XHR:', xhr);
|
||||
console.error('Response text:', xhr.responseText);
|
||||
@@ -579,7 +584,7 @@
|
||||
$tbody.html(html);
|
||||
|
||||
// Add collapse event listeners to rotate icon
|
||||
$('.wpaw-group-row').on('click', function() {
|
||||
$('.wpaw-group-row').on('click', function () {
|
||||
const $icon = $(this).find('.wpaw-collapse-icon');
|
||||
setTimeout(() => {
|
||||
const target = $(this).data('bs-target');
|
||||
@@ -696,15 +701,15 @@
|
||||
|
||||
// Headers
|
||||
const headers = [];
|
||||
table.find('thead th').each(function() {
|
||||
table.find('thead th').each(function () {
|
||||
headers.push($(this).text().trim());
|
||||
});
|
||||
rows.push(headers.join(','));
|
||||
|
||||
// Data rows
|
||||
table.find('tbody tr').each(function() {
|
||||
table.find('tbody tr').each(function () {
|
||||
const row = [];
|
||||
$(this).find('td').each(function() {
|
||||
$(this).find('td').each(function () {
|
||||
let text = $(this).text().trim().replace(/"/g, '""');
|
||||
row.push('"' + text + '"');
|
||||
});
|
||||
@@ -732,7 +737,7 @@
|
||||
* Initialize refresh models button
|
||||
*/
|
||||
function initRefreshModels() {
|
||||
$('#wpaw-refresh-models').on('click', function() {
|
||||
$('#wpaw-refresh-models').on('click', function () {
|
||||
const $btn = $(this);
|
||||
const $spinner = $('#wpaw-models-spinner');
|
||||
const $message = $('#wpaw-models-message');
|
||||
@@ -747,29 +752,29 @@
|
||||
action: 'wpaw_refresh_models',
|
||||
nonce: wpawSettingsV2.nonce
|
||||
},
|
||||
success: function(response) {
|
||||
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() {
|
||||
$('.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() {
|
||||
error: function () {
|
||||
showToast('Failed to refresh models', 'danger');
|
||||
},
|
||||
complete: function() {
|
||||
complete: function () {
|
||||
$btn.prop('disabled', false);
|
||||
$spinner.addClass('d-none');
|
||||
}
|
||||
@@ -781,7 +786,7 @@
|
||||
* Initialize form save handling
|
||||
*/
|
||||
function initFormSave() {
|
||||
$('#wpaw-reset-settings').on('click', function() {
|
||||
$('#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');
|
||||
@@ -799,10 +804,17 @@
|
||||
const planningModel = $('#planning_model').val();
|
||||
const writingModel = $('#writing_model').val();
|
||||
|
||||
// Get advanced provider routing
|
||||
const writingProvider = $('select[name="wp_agentic_writer_settings[task_providers][writing]"]').val();
|
||||
|
||||
let estimate = 0.10; // Default balanced estimate
|
||||
|
||||
if (writingModel) {
|
||||
if (writingModel.includes('mistral') || writingModel.includes('gemini')) {
|
||||
if (writingProvider && writingProvider !== 'openrouter') {
|
||||
estimate = 0.00; // Local and Codex are free
|
||||
} else if (writingModel) {
|
||||
if (writingModel.includes('local') || writingModel === 'claude-local' || writingModel === 'llama-local') {
|
||||
estimate = 0.00;
|
||||
} else if (writingModel.includes('mistral') || writingModel.includes('gemini')) {
|
||||
estimate = 0.06;
|
||||
} else if (writingModel.includes('gpt-4.1') || writingModel.includes('opus')) {
|
||||
estimate = 0.31;
|
||||
@@ -811,7 +823,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
$('#wpaw-cost-estimate').text('~$' + estimate.toFixed(2));
|
||||
$('#wpaw-cost-estimate').text(estimate === 0 ? '$0.00 (Free)' : '~$' + estimate.toFixed(2));
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -855,51 +867,51 @@
|
||||
let customModelIndex = $('#wpaw-custom-models-list .custom-model-row').length;
|
||||
|
||||
// Add new custom model row
|
||||
$('#wpaw-add-custom-model').on('click', function() {
|
||||
$('#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() {
|
||||
$('#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() {
|
||||
$('#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() {
|
||||
$('#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() {
|
||||
$('#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 {
|
||||
@@ -931,16 +943,16 @@
|
||||
model_name: modelName,
|
||||
model_type: modelType
|
||||
},
|
||||
success: function(response) {
|
||||
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');
|
||||
@@ -950,10 +962,10 @@
|
||||
showToast(response.data?.message || 'Failed to save', 'danger');
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
error: function () {
|
||||
showToast('Failed to save model', 'danger');
|
||||
},
|
||||
complete: function() {
|
||||
complete: function () {
|
||||
$row.css('opacity', '1');
|
||||
}
|
||||
});
|
||||
@@ -973,7 +985,7 @@
|
||||
nonce: wpawSettingsV2.nonce,
|
||||
model_id: modelId
|
||||
},
|
||||
success: function(response) {
|
||||
success: function (response) {
|
||||
if (response.success) {
|
||||
$row.remove();
|
||||
state.models = response.data.models;
|
||||
@@ -985,7 +997,7 @@
|
||||
$row.css('opacity', '1');
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
error: function () {
|
||||
showToast('Failed to delete model', 'danger');
|
||||
$row.css('opacity', '1');
|
||||
}
|
||||
@@ -996,16 +1008,16 @@
|
||||
* Refresh all Select2 dropdowns with current model data
|
||||
*/
|
||||
function refreshAllSelect2() {
|
||||
$('.wpaw-select2-model').each(function() {
|
||||
$('.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();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user