refactor: Cleanup git state - commit all staged changes
Major refactoring cleanup: - Add new controller architecture (class-controller-*.php) - Add new settings-v2 UI (views/settings-v2/) - Add new CSS architecture (agentic-sidebar.css, tokens) - Add esbuild build pipeline (scripts/build.js, package.json) - Add composer dependencies (vendor/) - Add frontend src directory (assets/js/src/index.jsx) - Add documentation files - Remove old/obsolete files (class-settings.php, old CSS) This commits all pending changes from previous refactoring efforts.
This commit is contained in:
Dwindi Ramadhana
298
views/settings-v2/tab-local-backend.php
Normal file
298
views/settings-v2/tab-local-backend.php
Normal file
@@ -0,0 +1,298 @@
|
||||
<?php
|
||||
/**
|
||||
* Settings V2: Custom Endpoint.
|
||||
*
|
||||
* @package WP_Agentic_Writer
|
||||
*/
|
||||
|
||||
if (!defined("ABSPATH")) {
|
||||
exit();
|
||||
} ?>
|
||||
<div class="section-head">
|
||||
<div>
|
||||
<p class="eyebrow"><?php esc_html_e(
|
||||
"Custom API Router",
|
||||
"wp-agentic-writer",
|
||||
); ?></p>
|
||||
<h2><?php esc_html_e("Custom Router", "wp-agentic-writer"); ?></h2>
|
||||
<p><?php esc_html_e(
|
||||
"Connect any OpenAI-compatible API — Ollama, LM Studio, llama.cpp, vLLM, or your own proxy.",
|
||||
"wp-agentic-writer",
|
||||
); ?></p>
|
||||
</div>
|
||||
<span class="status <?php echo !empty($local_backend_url)
|
||||
? "connected"
|
||||
: "warn"; ?>">
|
||||
<?php echo !empty($local_backend_url)
|
||||
? esc_html__("Configured", "wp-agentic-writer")
|
||||
: esc_html__("Optional", "wp-agentic-writer"); ?>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="subtab-nav" role="tablist">
|
||||
<button type="button" class="subtab-btn" role="tab" aria-selected="true" data-aw2-subtab-target="cr-connection">Connection</button>
|
||||
<button type="button" class="subtab-btn" role="tab" aria-selected="false" data-aw2-subtab-target="cr-models">Models</button>
|
||||
</div>
|
||||
|
||||
<!-- =======================
|
||||
TAB: CONNECTION
|
||||
======================= -->
|
||||
<div class="subtab-panel active" id="cr-connection">
|
||||
|
||||
<!-- Connection panel -->
|
||||
<div class="panel">
|
||||
<div class="panel-head">
|
||||
<div class="panel-title">
|
||||
<h3><?php esc_html_e("Connection", "wp-agentic-writer"); ?></h3>
|
||||
<p><?php esc_html_e(
|
||||
"Enter the base URL and API key for your OpenAI-compatible endpoint.",
|
||||
"wp-agentic-writer",
|
||||
); ?></p>
|
||||
</div>
|
||||
<button type="button" class="btn btn-small" id="wpaw-test-local-backend">
|
||||
<?php esc_html_e("Test connection", "wp-agentic-writer"); ?>
|
||||
</button>
|
||||
</div>
|
||||
<div class="panel-body grid-2">
|
||||
<div class="field">
|
||||
<label><?php esc_html_e("Base URL", "wp-agentic-writer"); ?></label>
|
||||
<input class="field-control" type="url" id="local_backend_url"
|
||||
name="wp_agentic_writer_settings[local_backend_url]"
|
||||
value="<?php echo esc_attr($local_backend_url); ?>"
|
||||
placeholder="https://api.example.com">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label><?php esc_html_e("API Key", "wp-agentic-writer"); ?></label>
|
||||
<input class="field-control" type="text" id="local_backend_key"
|
||||
name="wp_agentic_writer_settings[local_backend_key]"
|
||||
value="<?php echo esc_attr($local_backend_key); ?>"
|
||||
placeholder="sk-...">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Image Connection panel -->
|
||||
<div class="panel">
|
||||
<div class="panel-head">
|
||||
<div class="panel-title">
|
||||
<h3><?php esc_html_e(
|
||||
"Image Generation Connection",
|
||||
"wp-agentic-writer",
|
||||
); ?></h3>
|
||||
<p><?php esc_html_e(
|
||||
"When enabled, image generation tasks will be sent to this endpoint. If disabled, images will be safely generated via OpenRouter.",
|
||||
"wp-agentic-writer",
|
||||
); ?></p>
|
||||
</div>
|
||||
<div style="display: flex; gap: 10px; align-items: center;">
|
||||
<button type="button" class="btn btn-small" id="wpaw-test-local-image" style="white-space: nowrap; <?php echo empty(
|
||||
$local_backend_image_enabled
|
||||
)
|
||||
? "display:none;"
|
||||
: ""; ?>">
|
||||
<?php esc_html_e("Test connection", "wp-agentic-writer"); ?>
|
||||
</button>
|
||||
<label class="switch-row" style="margin:0">
|
||||
<input type="checkbox" id="wpaw-ce-image-enabled"
|
||||
name="wp_agentic_writer_settings[local_backend_image_enabled]"
|
||||
value="1" <?php checked(!empty($local_backend_image_enabled)); ?>>
|
||||
<span class="switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body grid-2" id="wpaw-ce-image-panel" <?php echo empty(
|
||||
$local_backend_image_enabled
|
||||
)
|
||||
? "hidden"
|
||||
: ""; ?>>
|
||||
<div class="field">
|
||||
<label><?php esc_html_e(
|
||||
"Image Base URL (Optional)",
|
||||
"wp-agentic-writer",
|
||||
); ?></label>
|
||||
<input class="field-control" type="url" id="local_backend_image_url"
|
||||
name="wp_agentic_writer_settings[local_backend_image_url]"
|
||||
value="<?php echo esc_attr($local_backend_image_url); ?>"
|
||||
placeholder="https://api.images.example.com">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label><?php esc_html_e(
|
||||
"Image API Key (Optional)",
|
||||
"wp-agentic-writer",
|
||||
); ?></label>
|
||||
<input class="field-control" type="text" id="local_backend_image_key"
|
||||
name="wp_agentic_writer_settings[local_backend_image_key]"
|
||||
value="<?php echo esc_attr($local_backend_image_key); ?>"
|
||||
placeholder="sk-...">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hidden legacy field — keeps backward compat; value auto-synced by JS from per-task models -->
|
||||
<input type="hidden" id="local_backend_model"
|
||||
name="wp_agentic_writer_settings[local_backend_model]"
|
||||
value="<?php echo esc_attr($local_backend_model); ?>">
|
||||
|
||||
</div>
|
||||
|
||||
<!-- =======================
|
||||
TAB: TOOLS
|
||||
======================= -->
|
||||
<div class="subtab-panel" id="cr-tools">
|
||||
|
||||
<!-- Brave Search Panel for Local Backend -->
|
||||
<div class="panel">
|
||||
<div class="panel-head">
|
||||
<div class="panel-title">
|
||||
<h3><?php esc_html_e(
|
||||
"Brave Search (Web Research)",
|
||||
"wp-agentic-writer",
|
||||
); ?></h3>
|
||||
<p><?php esc_html_e(
|
||||
"Local endpoints cannot search the web natively. Provide a Brave Search API key (free tier allows 2,000 req/mo) so WordPress can fetch web context before prompting your model.",
|
||||
"wp-agentic-writer",
|
||||
); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body grid-2">
|
||||
<div class="field">
|
||||
<label for="brave_search_api_key"><?php esc_html_e(
|
||||
"Brave Search API key",
|
||||
"wp-agentic-writer",
|
||||
); ?></label>
|
||||
<div class="password-row">
|
||||
<input class="field-control" type="password" id="brave_search_api_key" name="wp_agentic_writer_settings[brave_search_api_key]" value="<?php echo esc_attr(
|
||||
$brave_search_api_key,
|
||||
); ?>">
|
||||
<button type="button" class="btn" data-aw2-toggle-password="#brave_search_api_key"><?php esc_html_e(
|
||||
"Show",
|
||||
"wp-agentic-writer",
|
||||
); ?></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="search_depth"><?php esc_html_e(
|
||||
"Search depth",
|
||||
"wp-agentic-writer",
|
||||
); ?></label>
|
||||
<select class="field-control" id="search_depth" name="wp_agentic_writer_settings[search_depth]">
|
||||
<option value="light" <?php selected($search_depth, "light"); ?>>Light</option>
|
||||
<option value="medium" <?php selected(
|
||||
$search_depth,
|
||||
"medium",
|
||||
); ?>>Medium</option>
|
||||
<option value="deep" <?php selected($search_depth, "deep"); ?>>Deep</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- =======================
|
||||
TAB: MODELS
|
||||
======================= -->
|
||||
<div class="subtab-panel" id="cr-models">
|
||||
|
||||
<!-- Enable toggle + Task routing panel -->
|
||||
<div class="panel">
|
||||
<div class="panel-head">
|
||||
<div class="panel-title">
|
||||
<h3><?php esc_html_e("Task routing", "wp-agentic-writer"); ?></h3>
|
||||
<p><?php esc_html_e(
|
||||
"Activate Custom Router, then assign a model code per task.",
|
||||
"wp-agentic-writer",
|
||||
); ?></p>
|
||||
</div>
|
||||
<label class="switch-row" style="margin:0">
|
||||
<input type="checkbox" id="wpaw-ce-enabled"
|
||||
name="wp_agentic_writer_settings[local_backend_enabled]"
|
||||
value="1" <?php checked($local_backend_enabled); ?>>
|
||||
<span class="switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="panel-body" id="wpaw-ce-routing" <?php echo $local_backend_enabled
|
||||
? ""
|
||||
: "hidden"; ?>>
|
||||
<table class="ds-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><?php esc_html_e("Task", "wp-agentic-writer"); ?></th>
|
||||
<th><?php esc_html_e("Model Code", "wp-agentic-writer"); ?></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach (
|
||||
["chat", "clarity", "planning", "writing", "refinement", "image"]
|
||||
as $task_key
|
||||
):
|
||||
|
||||
$task_model = $local_backend_models[$task_key] ?? "";
|
||||
$row_style = "";
|
||||
if ($task_key === "image" && empty($local_backend_image_enabled)) {
|
||||
$row_style = "display: none;";
|
||||
}
|
||||
?>
|
||||
<tr id="wpaw-ce-row-<?php echo esc_attr(
|
||||
$task_key,
|
||||
); ?>" style="<?php echo esc_attr($row_style); ?>">
|
||||
<td style="vertical-align:middle"><?php echo esc_html(
|
||||
ucfirst($task_key),
|
||||
); ?></td>
|
||||
<td>
|
||||
<input class="field-control wpaw-ce-model" type="text"
|
||||
name="wp_agentic_writer_settings[local_backend_models][<?php echo esc_attr(
|
||||
$task_key,
|
||||
); ?>]"
|
||||
value="<?php echo esc_attr($task_model); ?>"
|
||||
placeholder="gpt-4o-mini"
|
||||
data-task="<?php echo esc_attr($task_key); ?>">
|
||||
</td>
|
||||
</tr>
|
||||
<?php
|
||||
endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<label class="switch-row" style="margin-top:14px">
|
||||
<input type="checkbox"
|
||||
name="wp_agentic_writer_settings[allow_openrouter_fallback]"
|
||||
value="1" <?php checked($allow_openrouter_fallback); ?>>
|
||||
<span class="switch"></span>
|
||||
<span><?php esc_html_e(
|
||||
"Allow OpenRouter fallback when custom endpoint is unreachable",
|
||||
"wp-agentic-writer",
|
||||
); ?></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
var toggle = document.getElementById('wpaw-ce-enabled');
|
||||
var panel = document.getElementById('wpaw-ce-routing');
|
||||
if (toggle && panel) {
|
||||
toggle.addEventListener('change', function(){
|
||||
panel.hidden = !this.checked;
|
||||
});
|
||||
}
|
||||
|
||||
var imgToggle = document.getElementById('wpaw-ce-image-enabled');
|
||||
var imgPanel = document.getElementById('wpaw-ce-image-panel');
|
||||
var imgTestBtn = document.getElementById('wpaw-test-local-image');
|
||||
var imgRow = document.getElementById('wpaw-ce-row-image');
|
||||
if (imgToggle && imgPanel) {
|
||||
imgToggle.addEventListener('change', function(){
|
||||
imgPanel.hidden = !this.checked;
|
||||
if (imgTestBtn) {
|
||||
imgTestBtn.style.display = this.checked ? 'inline-block' : 'none';
|
||||
}
|
||||
if (imgRow) {
|
||||
imgRow.style.display = this.checked ? '' : 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
Reference in New Issue
Block a user