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:
Dwindi Ramadhana
@@ -14,49 +14,56 @@ if ( ! defined( 'ABSPATH' ) ) {
|
||||
extract( $view_data );
|
||||
?>
|
||||
<div class="wrap wpaw-settings-v2-wrap">
|
||||
<div class="container py-4">
|
||||
<!-- Header -->
|
||||
<div class="wpaw-agentic-header mb-4">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<!-- Agentic IDE Split View Layout -->
|
||||
<div class="wpaw-ide-container d-flex">
|
||||
|
||||
<!-- Left Sidebar: Settings Navigation -->
|
||||
<div class="wpaw-sidebar-nav flex-shrink-0">
|
||||
<!-- Header inside Sidebar -->
|
||||
<div class="wpaw-sidebar-header p-3 mb-2 border-bottom border-dark">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<img src="<?php echo esc_url( WP_AGENTIC_WRITER_URL . 'assets/img/icon.svg' ); ?>"
|
||||
alt="WP Agentic Writer"
|
||||
style="width: 48px; height: 48px; filter: invert(1)">
|
||||
<div>
|
||||
<h1 class="h3 mb-1"><?php esc_html_e( 'WP Agentic Writer', 'wp-agentic-writer' ); ?></h1>
|
||||
<p class="text-muted mb-0">
|
||||
v<?php echo esc_html( WP_AGENTIC_WRITER_VERSION ); ?> ·
|
||||
<?php esc_html_e( 'Settings & Configuration', 'wp-agentic-writer' ); ?>
|
||||
</p>
|
||||
</div>
|
||||
style="width: 24px; height: 24px; filter: invert(1)">
|
||||
<h1 class="h6 mb-0 text-white fw-bold">Agentic Writer</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab Navigation -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<ul class="nav nav-pills nav-fill gap-2 p-2" id="wpaw-settings-tabs" role="tablist">
|
||||
<li class="nav-item mb-0" role="presentation">
|
||||
<button class="nav-link active d-flex align-items-center justify-content-center gap-2" id="general-tab" data-bs-toggle="pill" data-bs-target="#general" type="button" role="tab" aria-controls="general" aria-selected="true">
|
||||
<!-- Search Placeholder (Phase 2) -->
|
||||
<!-- <div class="px-3 mb-3"><input type="text" class="form-control form-control-sm wpaw-search-input" placeholder="Search settings..."></div> -->
|
||||
|
||||
<!-- Navigation Tree -->
|
||||
<div class="wpaw-nav-tree px-2">
|
||||
<div class="text-uppercase small text-secondary fw-semibold mb-2 px-2" style="font-size: 0.7rem; tracking: 1px;">Configuration</div>
|
||||
<ul class="nav flex-column gap-1" id="wpaw-settings-tabs" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active w-100 text-start d-flex align-items-center gap-2" id="general-tab" data-bs-toggle="pill" data-bs-target="#general" type="button" role="tab" aria-controls="general" aria-selected="true">
|
||||
<i class="bi bi-sliders"></i>
|
||||
<?php esc_html_e( 'General', 'wp-agentic-writer' ); ?>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item mb-0" role="presentation">
|
||||
<button class="nav-link d-flex align-items-center justify-content-center gap-2" id="models-tab" data-bs-toggle="pill" data-bs-target="#models" type="button" role="tab" aria-controls="models" aria-selected="false">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link w-100 text-start d-flex align-items-center gap-2" id="models-tab" data-bs-toggle="pill" data-bs-target="#models" type="button" role="tab" aria-controls="models" aria-selected="false">
|
||||
<i class="bi bi-stars"></i>
|
||||
<?php esc_html_e( 'AI Models', 'wp-agentic-writer' ); ?>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item mb-0" role="presentation">
|
||||
<button class="nav-link d-flex align-items-center justify-content-center gap-2" id="cost-log-tab" data-bs-toggle="pill" data-bs-target="#cost-log" type="button" role="tab" aria-controls="cost-log" aria-selected="false">
|
||||
<i class="bi bi-graph-up"></i>
|
||||
<?php esc_html_e( 'Cost Log', 'wp-agentic-writer' ); ?>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link w-100 text-start d-flex align-items-center gap-2" id="local-backend-tab" data-bs-toggle="pill" data-bs-target="#local-backend" type="button" role="tab" aria-controls="local-backend" aria-selected="false">
|
||||
<i class="bi bi-house-fill"></i>
|
||||
<?php esc_html_e( 'Local Backend', 'wp-agentic-writer' ); ?>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item mb-0" role="presentation">
|
||||
<button class="nav-link d-flex align-items-center justify-content-center gap-2" id="guide-tab" data-bs-toggle="pill" data-bs-target="#guide" type="button" role="tab" aria-controls="guide" aria-selected="false">
|
||||
|
||||
<div class="text-uppercase small text-secondary fw-semibold mb-2 mt-4 px-2" style="font-size: 0.7rem; tracking: 1px;">Analytics & Docs</div>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link w-100 text-start d-flex align-items-center gap-2" id="cost-log-tab" data-bs-toggle="pill" data-bs-target="#cost-log" type="button" role="tab" aria-controls="cost-log" aria-selected="false">
|
||||
<i class="bi bi-graph-up"></i>
|
||||
<?php esc_html_e( 'OpenRouter Cost Log', 'wp-agentic-writer' ); ?>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link w-100 text-start d-flex align-items-center gap-2" id="guide-tab" data-bs-toggle="pill" data-bs-target="#guide" type="button" role="tab" aria-controls="guide" aria-selected="false">
|
||||
<i class="bi bi-book"></i>
|
||||
<?php esc_html_e( 'Model Guide', 'wp-agentic-writer' ); ?>
|
||||
</button>
|
||||
@@ -65,57 +72,82 @@ extract( $view_data );
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Start -->
|
||||
<form method="post" action="options.php" id="wpaw-settings-form">
|
||||
<?php settings_fields( 'wp_agentic_writer_settings' ); ?>
|
||||
<!-- Right Content Pane: Settings Forms -->
|
||||
<div class="wpaw-content-pane flex-grow-1 d-flex flex-column h-100">
|
||||
<form method="post" action="options.php" id="wpaw-settings-form" class="h-100 d-flex flex-column">
|
||||
<?php settings_fields( 'wp_agentic_writer_settings' ); ?>
|
||||
|
||||
<!-- Tab Content -->
|
||||
<div class="tab-content" id="wpaw-settings-tab-content">
|
||||
<!-- General Tab -->
|
||||
<div class="tab-pane fade show active" id="general" role="tabpanel" aria-labelledby="general-tab">
|
||||
<?php include WP_AGENTIC_WRITER_DIR . 'views/settings/tab-general.php'; ?>
|
||||
</div>
|
||||
|
||||
<!-- Models Tab -->
|
||||
<div class="tab-pane fade" id="models" role="tabpanel" aria-labelledby="models-tab">
|
||||
<?php include WP_AGENTIC_WRITER_DIR . 'views/settings/tab-models.php'; ?>
|
||||
</div>
|
||||
|
||||
<!-- Cost Log Tab -->
|
||||
<div class="tab-pane fade" id="cost-log" role="tabpanel" aria-labelledby="cost-log-tab">
|
||||
<?php include WP_AGENTIC_WRITER_DIR . 'views/settings/tab-cost-log.php'; ?>
|
||||
</div>
|
||||
|
||||
<!-- Guide Tab -->
|
||||
<div class="tab-pane fade" id="guide" role="tabpanel" aria-labelledby="guide-tab">
|
||||
<?php include WP_AGENTIC_WRITER_DIR . 'views/settings/tab-guide.php'; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sticky Save Button -->
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body d-flex justify-content-between align-items-center py-3">
|
||||
<div class="text-muted small">
|
||||
<span class="dashicons dashicons-info-outline me-1"></span>
|
||||
<?php esc_html_e( 'Changes are saved immediately after clicking Save.', 'wp-agentic-writer' ); ?>
|
||||
<!-- Scrollable Tab Content Area -->
|
||||
<div class="wpaw-tab-scroll-area flex-grow-1 p-4 p-md-5 overflow-auto">
|
||||
<div class="tab-content" id="wpaw-settings-tab-content">
|
||||
<!-- General Tab -->
|
||||
<div class="tab-pane fade show active" id="general" role="tabpanel" aria-labelledby="general-tab">
|
||||
<div class="mb-4 pb-3 border-bottom border-dark">
|
||||
<h2 class="h4 text-white m-0">General Settings</h2>
|
||||
<p class="text-secondary small mt-1">Configure global API keys, budget, and content parameters.</p>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<button type="button" class="btn btn-outline-secondary" id="wpaw-reset-settings">
|
||||
<span class="dashicons dashicons-image-rotate me-1"></span>
|
||||
<?php esc_html_e( 'Reset to Defaults', 'wp-agentic-writer' ); ?>
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary btn-lg px-4" id="wpaw-save-settings">
|
||||
<span class="dashicons dashicons-saved me-1"></span>
|
||||
<?php esc_html_e( 'Save Settings', 'wp-agentic-writer' ); ?>
|
||||
</button>
|
||||
<?php include WP_AGENTIC_WRITER_DIR . 'views/settings/tab-general.php'; ?>
|
||||
</div>
|
||||
|
||||
<!-- Models Tab -->
|
||||
<div class="tab-pane fade" id="models" role="tabpanel" aria-labelledby="models-tab">
|
||||
<div class="mb-4 pb-3 border-bottom border-dark">
|
||||
<h2 class="h4 text-white m-0">AI Models</h2>
|
||||
<p class="text-secondary small mt-1">Select logic engines for different stages of the writing pipeline.</p>
|
||||
</div>
|
||||
<?php include WP_AGENTIC_WRITER_DIR . 'views/settings/tab-models.php'; ?>
|
||||
</div>
|
||||
|
||||
<!-- Local Backend Tab -->
|
||||
<div class="tab-pane fade" id="local-backend" role="tabpanel" aria-labelledby="local-backend-tab">
|
||||
<div class="mb-4 pb-3 border-bottom border-dark">
|
||||
<h2 class="h4 text-white m-0">Local Backend</h2>
|
||||
<p class="text-secondary small mt-1">Configure connections to local LM Studio or Ollama instances.</p>
|
||||
</div>
|
||||
<?php include WP_AGENTIC_WRITER_DIR . 'views/settings/tab-local-backend.php'; ?>
|
||||
</div>
|
||||
|
||||
<!-- Cost Log Tab -->
|
||||
<div class="tab-pane fade" id="cost-log" role="tabpanel" aria-labelledby="cost-log-tab">
|
||||
<div class="mb-4 pb-3 border-bottom border-dark">
|
||||
<h2 class="h4 text-white m-0">OpenRouter Cost Analytics</h2>
|
||||
<p class="text-secondary small mt-1">Track API token usage and expenses across all generations.</p>
|
||||
</div>
|
||||
<?php include WP_AGENTIC_WRITER_DIR . 'views/settings/tab-cost-log.php'; ?>
|
||||
</div>
|
||||
|
||||
<!-- Guide Tab -->
|
||||
<div class="tab-pane fade" id="guide" role="tabpanel" aria-labelledby="guide-tab">
|
||||
<div class="mb-4 pb-3 border-bottom border-dark">
|
||||
<h2 class="h4 text-white m-0">Provider Documentation</h2>
|
||||
<p class="text-secondary small mt-1">Reference materials for selecting the right model constraints.</p>
|
||||
</div>
|
||||
<?php include WP_AGENTIC_WRITER_DIR . 'views/settings/tab-guide.php'; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Fixed Bottom Save Bar (Compact) -->
|
||||
<div class="wpaw-save-bar p-3 border-top border-dark d-flex justify-content-between align-items-center bg-transparent mt-auto sticky-bottom">
|
||||
<div class="text-secondary small d-flex align-items-center gap-2">
|
||||
<span class="dashicons dashicons-plugin text-primary"></span>
|
||||
<?php printf( esc_html__( 'v%s', 'wp-agentic-writer' ), esc_html( WP_AGENTIC_WRITER_VERSION ) ); ?>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary" id="wpaw-reset-settings">
|
||||
<?php esc_html_e( 'Reset Defaults', 'wp-agentic-writer' ); ?>
|
||||
</button>
|
||||
<button type="submit" class="btn btn-sm btn-primary px-4 fw-semibold" id="wpaw-save-settings">
|
||||
<?php
|
||||
$is_mac = isset( $_SERVER['HTTP_USER_AGENT'] ) && strpos( wp_unslash( $_SERVER['HTTP_USER_AGENT'] ), 'Mac OS' ) !== false;
|
||||
$cmd_key = $is_mac ? '⌘' : 'Ctrl';
|
||||
?>
|
||||
<?php esc_html_e( 'Save Settings', 'wp-agentic-writer' ); ?> <kbd class="ms-1 bg-dark text-white border-0 py-0"><?php echo esc_html( $cmd_key ); ?>+S</kbd>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user