first commit all files
This commit is contained in:
dwindown
293
assets/js/settings.js
Normal file
293
assets/js/settings.js
Normal file
@@ -0,0 +1,293 @@
|
||||
/**
|
||||
* WP Agentic Writer - Settings Page Scripts
|
||||
*
|
||||
* @package WP_Agentic_Writer
|
||||
*/
|
||||
|
||||
jQuery( document ).ready( function( $ ) {
|
||||
'use strict';
|
||||
|
||||
// ===========================
|
||||
// TAB NAVIGATION
|
||||
// ===========================
|
||||
$( '.wpaw-settings-nav-btn' ).on( 'click', function() {
|
||||
const tab = $( this ).data( 'tab' );
|
||||
|
||||
// Update nav buttons
|
||||
$( '.wpaw-settings-nav-btn' ).removeClass( 'active' );
|
||||
$( this ).addClass( 'active' );
|
||||
|
||||
// Update tab content
|
||||
$( '.wpaw-tab-content' ).removeClass( 'active' );
|
||||
$( `.wpaw-tab-content[data-tab="${tab}"]` ).addClass( 'active' );
|
||||
} );
|
||||
|
||||
// ===========================
|
||||
// SELECT2 INITIALIZATION
|
||||
// ===========================
|
||||
function initSelect2() {
|
||||
if ( ! $.fn.select2 ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize Select2 for model dropdowns
|
||||
$( '.wpaw-select2-model' ).each( function() {
|
||||
const $select = $( this );
|
||||
|
||||
// Destroy existing Select2 if present
|
||||
if ( $select.hasClass( 'select2-hidden-accessible' ) ) {
|
||||
$select.select2( 'destroy' );
|
||||
}
|
||||
|
||||
$select.select2( {
|
||||
placeholder: 'Search for a model...',
|
||||
allowClear: false,
|
||||
width: '100%',
|
||||
templateResult: formatModelOption,
|
||||
templateSelection: formatModelSelection,
|
||||
} );
|
||||
} );
|
||||
|
||||
// Initialize Select2 for Context Categories (multiple with tags)
|
||||
const $contextCategories = $( '#required_context_categories' );
|
||||
if ( $contextCategories.length && ! $contextCategories.hasClass( 'select2-hidden-accessible' ) ) {
|
||||
$contextCategories.select2( {
|
||||
placeholder: 'Select categories...',
|
||||
allowClear: true,
|
||||
width: '100%',
|
||||
tags: false,
|
||||
closeOnSelect: false,
|
||||
} );
|
||||
}
|
||||
}
|
||||
|
||||
function formatModelOption( model ) {
|
||||
if ( ! model.id ) {
|
||||
return model.text;
|
||||
}
|
||||
const isFree = model.text && model.text.includes( '(Free)' );
|
||||
const $option = $( '<span>' + model.text + '</span>' );
|
||||
if ( isFree ) {
|
||||
$option.css( 'color', '#28a745' );
|
||||
}
|
||||
return $option;
|
||||
}
|
||||
|
||||
function formatModelSelection( model ) {
|
||||
return model.text || model.id;
|
||||
}
|
||||
|
||||
// Store model pricing data from API (populated by updateModelDropdowns)
|
||||
let modelPricing = {};
|
||||
|
||||
// Estimate cost per article using dynamic pricing from API (6 models)
|
||||
// Estimates: chat 200 tokens, clarity 300, planning 500, writing 3K, refinement 1K, 1 image
|
||||
function estimateArticleCost() {
|
||||
const chatModel = $( '#chat_model' ).val();
|
||||
const clarityModel = $( '#clarity_model' ).val();
|
||||
const planningModel = $( '#planning_model' ).val();
|
||||
const writingModel = $( '#writing_model' ).val();
|
||||
const refinementModel = $( '#refinement_model' ).val();
|
||||
const imageModel = $( '#image_model' ).val();
|
||||
|
||||
let totalCost = 0;
|
||||
|
||||
// Helper to calculate cost for a model
|
||||
const calcCost = ( modelId, inputTokens, outputTokens ) => {
|
||||
const pricing = modelPricing[modelId];
|
||||
if ( pricing ) {
|
||||
return ( pricing.prompt * inputTokens ) + ( pricing.completion * outputTokens );
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
|
||||
// Chat cost (minimal - 100 in, 100 out)
|
||||
totalCost += calcCost( chatModel, 100, 100 );
|
||||
|
||||
// Clarity cost (300 in, 300 out)
|
||||
totalCost += calcCost( clarityModel, 300, 300 );
|
||||
|
||||
// Planning cost (500 in, 500 out)
|
||||
totalCost += calcCost( planningModel, 500, 500 );
|
||||
|
||||
// Writing cost (1.5K in, 1.5K out - main article generation)
|
||||
totalCost += calcCost( writingModel, 1500, 1500 );
|
||||
|
||||
// Refinement cost (500 in, 500 out)
|
||||
totalCost += calcCost( refinementModel, 500, 500 );
|
||||
|
||||
// Image cost (1 image)
|
||||
const imagePricing = modelPricing[imageModel];
|
||||
if ( imagePricing && imagePricing.image > 0 ) {
|
||||
totalCost += imagePricing.image;
|
||||
}
|
||||
|
||||
return totalCost;
|
||||
}
|
||||
|
||||
// Update cost estimation display
|
||||
function updateCostEstimate() {
|
||||
const cost = estimateArticleCost();
|
||||
const $display = $( '#wpaw-cost-estimate' );
|
||||
|
||||
if ( $display.length ) {
|
||||
if ( cost > 0 ) {
|
||||
$display.text( '~$' + cost.toFixed(4) + ' per article' );
|
||||
} else {
|
||||
$display.text( 'Free or pricing unavailable' );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Listen for model changes (6 models)
|
||||
$( '#chat_model, #clarity_model, #planning_model, #writing_model, #refinement_model, #image_model' ).on( 'change', function() {
|
||||
updateCostEstimate();
|
||||
} );
|
||||
|
||||
// Initialize on page load
|
||||
updateCostEstimate();
|
||||
initSelect2();
|
||||
|
||||
// Refresh models button.
|
||||
$( '#wpaw-refresh-models' ).on( 'click', function() {
|
||||
const $button = $( this );
|
||||
const $spinner = $( '#wpaw-models-spinner' );
|
||||
|
||||
$button.prop( 'disabled', true );
|
||||
$spinner.show();
|
||||
|
||||
$.ajax( {
|
||||
url: wpawSettings.ajaxUrl,
|
||||
type: 'POST',
|
||||
data: {
|
||||
action: 'wpaw_refresh_models',
|
||||
nonce: wpawSettings.nonce,
|
||||
},
|
||||
success: function( response ) {
|
||||
if ( response.success ) {
|
||||
// Update model dropdowns.
|
||||
updateModelDropdowns( response.data.models );
|
||||
|
||||
// Show success message.
|
||||
$( '#wpaw-models-message' )
|
||||
.removeClass( 'notice-error' )
|
||||
.addClass( 'notice-success' )
|
||||
.text( response.data.message )
|
||||
.show();
|
||||
} else {
|
||||
showError( response.data.message || 'Unknown error' );
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
showError( 'Failed to refresh models. Please try again.' );
|
||||
},
|
||||
complete: function() {
|
||||
$button.prop( 'disabled', false );
|
||||
$spinner.hide();
|
||||
|
||||
// Auto-hide message after 3 seconds.
|
||||
setTimeout( function() {
|
||||
$( '#wpaw-models-message' ).fadeOut();
|
||||
}, 3000 );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
// Initialize model dropdowns on page load.
|
||||
if ( wpawSettings.models ) {
|
||||
updateModelDropdowns( wpawSettings.models );
|
||||
}
|
||||
|
||||
/**
|
||||
* Update model dropdowns with fetched models.
|
||||
* Shows all models in a flat list (no optgroups).
|
||||
*/
|
||||
function updateModelDropdowns( models ) {
|
||||
/**
|
||||
* Populate a select dropdown with models and store pricing.
|
||||
* @param {jQuery} $select - The select element
|
||||
* @param {Array} allModels - Array of all models
|
||||
* @param {string} currentValue - Currently saved value
|
||||
*/
|
||||
const populateSelect = ( $select, allModels, currentValue ) => {
|
||||
$select.empty();
|
||||
|
||||
// Add all models to dropdown and store pricing
|
||||
if ( allModels && allModels.length ) {
|
||||
allModels.forEach( function( model ) {
|
||||
// Clean model name - remove existing (free) suffix to avoid duplication
|
||||
let cleanName = model.name.replace( /\s*\(free\)\s*/gi, '' ).trim();
|
||||
$select.append( $( '<option>', {
|
||||
value: model.id,
|
||||
text: cleanName + ( model.is_free ? ' (Free)' : '' )
|
||||
} ) );
|
||||
|
||||
// Store pricing data for cost calculation
|
||||
if ( model.pricing ) {
|
||||
modelPricing[ model.id ] = model.pricing;
|
||||
}
|
||||
} );
|
||||
}
|
||||
|
||||
// Ensure saved value exists in dropdown (legacy/custom models)
|
||||
if ( currentValue && $select.find( `option[value="${currentValue}"]` ).length === 0 ) {
|
||||
$select.prepend( $( '<option>', {
|
||||
value: currentValue,
|
||||
text: currentValue + ' (Saved)'
|
||||
} ) );
|
||||
}
|
||||
|
||||
// Set the current value
|
||||
if ( currentValue ) {
|
||||
$select.val( currentValue );
|
||||
}
|
||||
};
|
||||
|
||||
// Update chat model dropdown
|
||||
const $chatSelect = $( '#chat_model' );
|
||||
const currentChat = wpawSettings.currentModels?.chat || $chatSelect.val();
|
||||
populateSelect( $chatSelect, models.chat?.all || [], currentChat );
|
||||
|
||||
// Update clarity model dropdown
|
||||
const $claritySelect = $( '#clarity_model' );
|
||||
const currentClarity = wpawSettings.currentModels?.clarity || $claritySelect.val();
|
||||
populateSelect( $claritySelect, models.planning?.all || [], currentClarity );
|
||||
|
||||
// Update planning model dropdown
|
||||
const $planningSelect = $( '#planning_model' );
|
||||
const currentPlanning = wpawSettings.currentModels?.planning || $planningSelect.val();
|
||||
populateSelect( $planningSelect, models.planning?.all || [], currentPlanning );
|
||||
|
||||
// Update writing model dropdown
|
||||
const $writingSelect = $( '#writing_model' );
|
||||
const currentWriting = wpawSettings.currentModels?.writing || wpawSettings.currentModels?.execution || $writingSelect.val();
|
||||
populateSelect( $writingSelect, models.execution?.all || [], currentWriting );
|
||||
|
||||
// Update refinement model dropdown
|
||||
const $refinementSelect = $( '#refinement_model' );
|
||||
const currentRefinement = wpawSettings.currentModels?.refinement || $refinementSelect.val();
|
||||
populateSelect( $refinementSelect, models.execution?.all || [], currentRefinement );
|
||||
|
||||
// Update image model dropdown
|
||||
const $imageSelect = $( '#image_model' );
|
||||
const currentImage = wpawSettings.currentModels?.image || $imageSelect.val();
|
||||
populateSelect( $imageSelect, models.image?.all || [], currentImage );
|
||||
|
||||
// Reinitialize Select2 after updating dropdowns
|
||||
initSelect2();
|
||||
|
||||
// Update cost estimate
|
||||
updateCostEstimate();
|
||||
}
|
||||
|
||||
/**
|
||||
* Show error message.
|
||||
*/
|
||||
function showError( message ) {
|
||||
$( '#wpaw-models-message' )
|
||||
.removeClass( 'notice-success' )
|
||||
.addClass( 'notice-error' )
|
||||
.text( message )
|
||||
.show();
|
||||
}
|
||||
} );
|
||||
Reference in New Issue
Block a user