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
@@ -7,6 +7,7 @@
|
||||
.wpaw-settings-v2-wrap {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap * {
|
||||
@@ -19,12 +20,23 @@
|
||||
|
||||
/* Card enhancements */
|
||||
.wpaw-settings-v2-wrap .card {
|
||||
transition: box-shadow 0.2s ease;
|
||||
padding: unset;
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
margin-bottom: 2rem !important;
|
||||
padding-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .card:hover {
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
|
||||
.wpaw-settings-v2-wrap .card-header,
|
||||
.wpaw-settings-v2-wrap .card-body {
|
||||
background: transparent !important;
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .card-header {
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
/* Preset cards */
|
||||
@@ -47,45 +59,83 @@
|
||||
background-color: rgba(13, 110, 253, 0.05);
|
||||
}
|
||||
|
||||
/* Select2 Bootstrap 5 theme adjustments - Dark Theme */
|
||||
/* Select2 Bootstrap 5 theme adjustments - Dark Theme (VSCode match) */
|
||||
.wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-selection {
|
||||
min-height: 38px;
|
||||
border-color: #3a4a5e !important;
|
||||
background-color: #2d3e52 !important;
|
||||
color: #e8eaed !important;
|
||||
border-color: #3c3c3c !important;
|
||||
background-color: #3c3c3c !important;
|
||||
color: #cccccc !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
|
||||
line-height: 1.5;
|
||||
color: #e8eaed !important;
|
||||
color: #cccccc !important;
|
||||
}
|
||||
|
||||
ul.select2-results__options{
|
||||
padding: unset!important;
|
||||
ul.select2-results__options {
|
||||
padding: unset !important;
|
||||
background-color: #252526 !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
|
||||
color: #b8bcc4 !important;
|
||||
color: #858585 !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-dropdown {
|
||||
border-color: #3a4a5e !important;
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
|
||||
background-color: #243447 !important;
|
||||
border-color: #3c3c3c !important;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
|
||||
background-color: #252526 !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-results__option {
|
||||
color: #e8eaed !important;
|
||||
background-color: #243447 !important;
|
||||
color: #cccccc !important;
|
||||
background-color: #252526 !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-results__option--highlighted {
|
||||
background-color: #17a2b8 !important;
|
||||
color: white !important;
|
||||
.wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-results__option--highlighted,
|
||||
.wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-results__option:hover {
|
||||
background-color: #04395e !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-results__option--selected {
|
||||
background-color: #2d3e52 !important;
|
||||
background-color: #37373d !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.select2-results ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.select2-results li {
|
||||
font-family: 'Consolas', 'Courier New', monospace !important;
|
||||
font-size: 13px !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.select2-results ul::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.select2-results ul::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.select2-results ul::-webkit-scrollbar-thumb {
|
||||
background-color: darkgrey;
|
||||
outline: 1px solid slategrey;
|
||||
}
|
||||
|
||||
span.select2-search.select2-search--dropdown {
|
||||
background: #252526 !important;
|
||||
}
|
||||
|
||||
span.select2-search.select2-search--dropdown input {
|
||||
background: #252526 !important;
|
||||
border-radius: unset !important;
|
||||
color: white !important;
|
||||
font-family: 'Consolas', 'Courier New', monospace !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-search__field {
|
||||
@@ -94,11 +144,12 @@ ul.select2-results__options{
|
||||
border-color: #3a4a5e !important;
|
||||
}
|
||||
|
||||
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear, .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear {
|
||||
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear,
|
||||
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear {
|
||||
right: 1.25rem;
|
||||
}
|
||||
|
||||
/* Form controls - Dark Theme */
|
||||
/* Form controls - Dark Theme (VSCode match) */
|
||||
.wpaw-settings-v2-wrap .form-control,
|
||||
.wpaw-settings-v2-wrap .form-select,
|
||||
.wpaw-settings-v2-wrap input[type="text"],
|
||||
@@ -107,25 +158,25 @@ ul.select2-results__options{
|
||||
.wpaw-settings-v2-wrap input[type="password"],
|
||||
.wpaw-settings-v2-wrap input[type="date"],
|
||||
.wpaw-settings-v2-wrap textarea {
|
||||
background-color: #2d3e52 !important;
|
||||
color: #e8eaed !important;
|
||||
border-color: #3a4a5e !important;
|
||||
background-color: #3c3c3c !important;
|
||||
color: #cccccc !important;
|
||||
border-color: #3c3c3c !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .form-control:focus,
|
||||
.wpaw-settings-v2-wrap .form-select:focus,
|
||||
.wpaw-settings-v2-wrap input:focus,
|
||||
.wpaw-settings-v2-wrap textarea:focus {
|
||||
border-color: #17a2b8 !important;
|
||||
box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25) !important;
|
||||
background-color: #2d3e52 !important;
|
||||
color: #e8eaed !important;
|
||||
border-color: #007fd4 !important;
|
||||
box-shadow: 0 0 0 1px #007fd4 !important;
|
||||
background-color: #3c3c3c !important;
|
||||
color: #cccccc !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .form-control::placeholder,
|
||||
.wpaw-settings-v2-wrap input::placeholder,
|
||||
.wpaw-settings-v2-wrap textarea::placeholder {
|
||||
color: #8a8f98 !important;
|
||||
color: #858585 !important;
|
||||
opacity: 0.7 !important;
|
||||
}
|
||||
|
||||
@@ -213,7 +264,7 @@ ul.select2-results__options{
|
||||
}
|
||||
|
||||
/* Badge enhancements - Dark Theme */
|
||||
.wpaw-settings-v2-wrap *:not(td,label) > .badge {
|
||||
.wpaw-settings-v2-wrap *:not(td, label)>.badge {
|
||||
font-weight: 500;
|
||||
color: white !important;
|
||||
}
|
||||
@@ -350,25 +401,32 @@ ul.select2-results__options{
|
||||
|
||||
/* Animation for cost estimate */
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap #wpaw-cost-estimate.updating {
|
||||
animation: pulse 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
/* Customization - Dark Theme */
|
||||
/* Customization - Dark Theme (VSCode Match) */
|
||||
#wpcontent {
|
||||
background-color: #1d2227 !important;
|
||||
background-color: #1e1e1e !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .container-fluid {
|
||||
background: #1d2227 !important;
|
||||
background: #1e1e1e !important;
|
||||
}
|
||||
|
||||
.card {
|
||||
max-width: unset;
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
/* Checkboxes and Form Switches */
|
||||
@@ -569,4 +627,187 @@ ul.select2-results__options{
|
||||
|
||||
.wpaw-settings-v2-wrap .popover-body {
|
||||
color: #b8bcc4 !important;
|
||||
}
|
||||
|
||||
/* ------------------------------------- */
|
||||
/* AGENTIC IDE UI - VSCODE STYLE OVERRIDE */
|
||||
/* ------------------------------------- */
|
||||
|
||||
/* Monospace fonts for technical inputs */
|
||||
.wpaw-settings-v2-wrap input[type="text"],
|
||||
.wpaw-settings-v2-wrap input[type="url"],
|
||||
.wpaw-settings-v2-wrap input[type="url"],
|
||||
.wpaw-settings-v2-wrap input[type="password"],
|
||||
.wpaw-settings-v2-wrap select,
|
||||
.wpaw-settings-v2-wrap .select2-selection__rendered,
|
||||
.wpaw-settings-v2-wrap code,
|
||||
.wpaw-settings-v2-wrap pre {
|
||||
font-family: 'Consolas', 'Courier New', monospace !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
/* Layout Dimensions */
|
||||
.wpaw-ide-container {
|
||||
height: calc(100vh - 32px);
|
||||
background-color: #1e1e1e;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.admin-bar .wpaw-ide-container {
|
||||
height: calc(100vh - 46px);
|
||||
}
|
||||
}
|
||||
|
||||
/* VSCode Sidebar Navigation Tree */
|
||||
.wpaw-sidebar-nav {
|
||||
width: 260px;
|
||||
background-color: #252526;
|
||||
border-right: 1px solid #3c3c3c;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.wpaw-nav-tree .nav-link {
|
||||
color: #cccccc !important;
|
||||
border-radius: 0 !important;
|
||||
padding: 0.35rem 0.75rem !important;
|
||||
font-size: 13px;
|
||||
border: 1px solid transparent;
|
||||
margin-bottom: 2px;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.wpaw-nav-tree .nav-link:hover {
|
||||
background-color: #2a2d2e !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.wpaw-nav-tree .nav-link.active {
|
||||
background-color: #37373d !important;
|
||||
color: #ffffff !important;
|
||||
border: 1px solid #007fd4;
|
||||
}
|
||||
|
||||
.wpaw-nav-tree .nav-link i {
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
color: #858585;
|
||||
}
|
||||
|
||||
.wpaw-nav-tree .nav-link.active i {
|
||||
color: #007fd4;
|
||||
}
|
||||
|
||||
/* Save Bar (VSCode Status Bar style) */
|
||||
.wpaw-save-bar {
|
||||
background-color: #007fd4 !important;
|
||||
padding: 4px 12px !important;
|
||||
}
|
||||
|
||||
.wpaw-save-bar * {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.wpaw-save-bar .btn-primary {
|
||||
background-color: transparent !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.wpaw-save-bar .btn-primary:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2) !important;
|
||||
}
|
||||
|
||||
.wpaw-save-bar .btn-outline-secondary {
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.wpaw-save-bar .btn-outline-secondary:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2) !important;
|
||||
}
|
||||
|
||||
/* Force Override Bootstrap Background Utilities */
|
||||
.wpaw-settings-v2-wrap .bg-white {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .bg-light {
|
||||
background-color: #252526 !important;
|
||||
}
|
||||
|
||||
/* Force Override ALL Border Radius (User Request: "bot" style) */
|
||||
.wpaw-settings-v2-wrap * {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Fix WP Admin Container Spacing */
|
||||
#wpbody-content {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
#wpcontent {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.wpaw-ide-container {
|
||||
height: calc(100vh - 32px);
|
||||
/* WP Admin height */
|
||||
}
|
||||
|
||||
/* Ensure inputs dont look like boxes inside boxes */
|
||||
.wpaw-settings-v2-wrap .form-control {
|
||||
border: 1px solid #3c3c3c !important;
|
||||
}
|
||||
|
||||
/* Fix WordPress Admin Notices overlaying our IDE layout */
|
||||
.wpaw-settings-v2-wrap .notice {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 9999;
|
||||
margin: 0;
|
||||
padding: 12px 20px;
|
||||
background-color: var(--wpaw-bg);
|
||||
border: 1px solid var(--wpaw-border);
|
||||
border-left: 4px solid var(--wpaw-primary);
|
||||
color: var(--wpaw-text);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
||||
min-width: 250px;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .notice.notice-success {
|
||||
border-left-color: var(--bs-success);
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .notice.notice-error {
|
||||
border-left-color: var(--bs-danger);
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .notice.notice-warning {
|
||||
border-left-color: var(--bs-warning);
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .notice.is-dismissible {
|
||||
padding-right: 38px;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .notice .notice-dismiss {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .notice p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#setting-error-settings_updated {
|
||||
position: fixed;
|
||||
top: 40px;
|
||||
}
|
||||
|
||||
#connection-status {
|
||||
font-family: 'Consolas', 'Courier New', monospace !important;
|
||||
}
|
||||
@@ -230,6 +230,7 @@
|
||||
text-transform: capitalize;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
#agentMode:active,
|
||||
#agentMode:focus {
|
||||
text-decoration: unset;
|
||||
@@ -620,7 +621,7 @@ input.wpaw-plan-section-check:checked::before {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.wpaw-response-content > * {
|
||||
.wpaw-response-content>* {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
@@ -660,7 +661,7 @@ input.wpaw-plan-section-check:checked::before {
|
||||
margin: 4px 0 6px;
|
||||
}
|
||||
|
||||
.dark-theme .wpaw-response-content *:is(h1,h2,h3,h4,h5,h6){
|
||||
.dark-theme .wpaw-response-content *:is(h1, h2, h3, h4, h5, h6) {
|
||||
color: #cecece;
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -670,6 +671,7 @@ input.wpaw-plan-section-check:checked::before {
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.wpaw-response-content table th,
|
||||
.wpaw-response-content table td {
|
||||
border: 1px solid;
|
||||
@@ -713,11 +715,11 @@ input.wpaw-plan-section-check:checked::before {
|
||||
}
|
||||
|
||||
/* .wpaw-timeline-entry.active { */
|
||||
/* background: #fff; */
|
||||
/* border: 1px solid #bfdbfe; */
|
||||
/* box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.1), 0 2px 4px -1px rgba(59, 130, 246, 0.06); */
|
||||
/* margin-bottom: 15px; */
|
||||
/* border-radius: 6px; */
|
||||
/* background: #fff; */
|
||||
/* border: 1px solid #bfdbfe; */
|
||||
/* box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.1), 0 2px 4px -1px rgba(59, 130, 246, 0.06); */
|
||||
/* margin-bottom: 15px; */
|
||||
/* border-radius: 6px; */
|
||||
/* } */
|
||||
|
||||
.wpaw-timeline-entry.inactive {
|
||||
@@ -864,45 +866,7 @@ input.wpaw-plan-section-check:checked::before {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wpaw-header-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 0 4px;
|
||||
}
|
||||
|
||||
.wpaw-header-action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
border: 1px solid #dcdcde;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wpaw-header-action svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: #1d2227;
|
||||
}
|
||||
|
||||
.wpaw-header-action:hover {
|
||||
border-color: #2271b1;
|
||||
}
|
||||
|
||||
.wpaw-header-action.active {
|
||||
border-color: #2271b1;
|
||||
background: #e8f1fb;
|
||||
}
|
||||
|
||||
.wpaw-header-action.active svg {
|
||||
fill: #2271b1;
|
||||
}
|
||||
/* (Dead wpaw-header-actions CSS removed — P1 cleanup) */
|
||||
|
||||
/* ===========================
|
||||
CONFIG TAB
|
||||
@@ -917,7 +881,7 @@ input.wpaw-plan-section-check:checked::before {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.wpaw-config-tab > *:nth-child(2){
|
||||
.wpaw-config-tab>*:nth-child(2) {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
@@ -960,8 +924,8 @@ input.wpaw-plan-section-check:checked::before {
|
||||
}
|
||||
|
||||
.wpaw-config-section .wpaw-select {
|
||||
width: 100%!important;
|
||||
max-width: unset!important;
|
||||
width: 100% !important;
|
||||
max-width: unset !important;
|
||||
}
|
||||
|
||||
.wpaw-select:focus {
|
||||
@@ -1029,7 +993,7 @@ input.wpaw-plan-section-check:checked::before {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.wpaw-budget-bar ~ .description {
|
||||
.wpaw-budget-bar~.description {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
@@ -1457,11 +1421,11 @@ input.wpaw-plan-section-check:checked::before {
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.wpaw-config-toggle input:checked + .wpaw-toggle-slider {
|
||||
.wpaw-config-toggle input:checked+.wpaw-toggle-slider {
|
||||
background-color: #2271b1;
|
||||
}
|
||||
|
||||
.wpaw-config-toggle input:checked + .wpaw-toggle-slider:before {
|
||||
.wpaw-config-toggle input:checked+.wpaw-toggle-slider:before {
|
||||
transform: translateX(24px);
|
||||
}
|
||||
|
||||
@@ -1512,15 +1476,17 @@ input.wpaw-plan-section-check:checked::before {
|
||||
.wpaw-question-card .wpaw-config-form {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.wpaw-question-card .wpaw-config-form .wpaw-config-field {
|
||||
border-radius: unset!important;
|
||||
border-radius: unset !important;
|
||||
border-width: 1px 0;
|
||||
background-color: unset;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.wpaw-question-card .wpaw-config-form .wpaw-config-field input[type=text] {
|
||||
background-color: #1a1a1a!important;
|
||||
background-color: #1a1a1a !important;
|
||||
}
|
||||
|
||||
.dark-theme .wpaw-question-card {
|
||||
@@ -1533,6 +1499,7 @@ input.wpaw-plan-section-check:checked::before {
|
||||
color: white;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.dark-theme .wpaw-question-card textarea {
|
||||
background: #252830;
|
||||
color: white;
|
||||
@@ -1542,12 +1509,15 @@ input.wpaw-plan-section-check:checked::before {
|
||||
letter-spacing: 1px;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.dark-theme .wpaw-question-card textarea::placeholder {
|
||||
color: #6c6c6c
|
||||
}
|
||||
|
||||
.dark-theme .wpaw-question-card textarea::focus,
|
||||
.dark-theme .wpaw-question-card textarea::active {
|
||||
border-color: #252830!important;;
|
||||
border-color: #252830 !important;
|
||||
;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
@@ -1649,8 +1619,9 @@ input.wpaw-plan-section-check:checked::before {
|
||||
}
|
||||
|
||||
@media (max-width: 482px) {
|
||||
|
||||
.interface-complementary-area__fill:has(#wp-agentic-writer\:wp-agentic-writer),
|
||||
#wp-agentic-writer\:wp-agentic-writer {
|
||||
#wp-agentic-writer\:wp-agentic-writer {
|
||||
width: 100vw !important;
|
||||
}
|
||||
}
|
||||
@@ -1995,6 +1966,7 @@ input.wpaw-plan-section-check:checked::before {
|
||||
color: #fff;
|
||||
border-bottom-color: #2271b1;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
UI REVAMP - PHASE 2
|
||||
=========================== */
|
||||
@@ -2090,8 +2062,8 @@ input.wpaw-plan-section-check:checked::before {
|
||||
|
||||
/* Web Search Toggle */
|
||||
.wpaw-web-search-toggle {
|
||||
display: flex!important;
|
||||
margin-bottom: 0!important;
|
||||
display: flex !important;
|
||||
margin-bottom: 0 !important;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
cursor: pointer;
|
||||
@@ -2114,11 +2086,11 @@ input.wpaw-plan-section-check:checked::before {
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.wpaw-web-search-toggle input:checked + .wpaw-web-search-icon {
|
||||
.wpaw-web-search-toggle input:checked+.wpaw-web-search-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.wpaw-web-search-toggle input:checked + .wpaw-web-search-icon * {
|
||||
.wpaw-web-search-toggle input:checked+.wpaw-web-search-icon * {
|
||||
stroke: #4caf50;
|
||||
}
|
||||
|
||||
@@ -2131,10 +2103,25 @@ input.wpaw-plan-section-check:checked::before {
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.wpaw-web-search-toggle input:checked ~ .wpaw-web-search-label {
|
||||
.wpaw-web-search-toggle input:checked~.wpaw-web-search-label {
|
||||
color: #4caf50;
|
||||
}
|
||||
|
||||
/* Blocked state (no Brave API key for local models) */
|
||||
.wpaw-web-search-toggle.wpaw-search-blocked {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.wpaw-web-search-toggle.wpaw-search-blocked:hover {
|
||||
background: rgba(255, 80, 80, 0.08);
|
||||
}
|
||||
|
||||
.wpaw-web-search-toggle.wpaw-search-blocked .wpaw-web-search-label {
|
||||
color: #ff6b6b;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.wpaw-command-text-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
@@ -2149,7 +2136,8 @@ input.wpaw-plan-section-check:checked::before {
|
||||
}
|
||||
|
||||
.wpaw-command-text-btn:hover {
|
||||
color: #d63638; /* Red on hover for clear */
|
||||
color: #d63638;
|
||||
/* Red on hover for clear */
|
||||
}
|
||||
|
||||
.wpaw-command-stop-btn {
|
||||
@@ -2181,8 +2169,8 @@ input.wpaw-plan-section-check:checked::before {
|
||||
|
||||
/* Circle Icon Buttons */
|
||||
.wpaw-command-circle-btn {
|
||||
width: 40px!important;
|
||||
height: 40px!important;
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
@@ -2221,14 +2209,15 @@ input.wpaw-plan-section-check:checked::before {
|
||||
}
|
||||
|
||||
.wpaw-command-circle-btn svg {
|
||||
width: 20px!important;
|
||||
height: 20px!important;
|
||||
margin-bottom: unset!important;
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
margin-bottom: unset !important;
|
||||
}
|
||||
|
||||
/* Dark Theme Tabs (Config & Cost) */
|
||||
.wpaw-tab-content.dark-theme {
|
||||
background: #1d2227; /* Match status bar / command area */
|
||||
background: #1d2227;
|
||||
/* Match status bar / command area */
|
||||
color: #fff;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
@@ -2290,7 +2279,7 @@ input.wpaw-plan-section-check:checked::before {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.wpaw-select,
|
||||
.wpaw-select,
|
||||
.wpaw-tab-content.dark-theme input[type="text"],
|
||||
.wpaw-tab-content.dark-theme select {
|
||||
background: #252830 !important;
|
||||
@@ -2535,18 +2524,18 @@ input.wpaw-plan-section-check:checked::before {
|
||||
color: #a7aaad;
|
||||
}
|
||||
|
||||
.wpaw-meta-info > button.components-button.is-secondary.is-small {
|
||||
outline: unset!important;
|
||||
.wpaw-meta-info>button.components-button.is-secondary.is-small {
|
||||
outline: unset !important;
|
||||
color: #fbbf24;
|
||||
border: 1px solid #fbbf24;
|
||||
box-shadow: unset!important;
|
||||
box-shadow: unset !important;
|
||||
}
|
||||
|
||||
.wpaw-seo-audit-header .components-button.is-secondary.is-small {
|
||||
outline: unset!important;
|
||||
outline: unset !important;
|
||||
color: #4ade80;
|
||||
border: 1px solid #4ade80;
|
||||
box-shadow: unset!important;
|
||||
box-shadow: unset !important;
|
||||
}
|
||||
|
||||
.wpaw-spinning-icon svg {
|
||||
@@ -2554,8 +2543,13 @@ input.wpaw-plan-section-check:checked::before {
|
||||
}
|
||||
|
||||
@keyframes wpaw-spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
@@ -2642,24 +2636,30 @@ input.wpaw-plan-section-check:checked::before {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.wpaw-context-count {
|
||||
/* .wpaw-context-count {
|
||||
color: #0066cc;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.wpaw-context-tokens {
|
||||
color: #666;
|
||||
color: #a7aaad;
|
||||
}
|
||||
|
||||
.wpaw-context-cost {
|
||||
color: #28a745;
|
||||
color: #a7aaad;
|
||||
font-weight: 600;
|
||||
} */
|
||||
|
||||
.wpaw-context-count,
|
||||
.wpaw-context-tokens,
|
||||
.wpaw-context-cost {
|
||||
color: #a7aaad;
|
||||
}
|
||||
|
||||
.wpaw-context-toggle {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #0066cc;
|
||||
color: #a7aaad;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
@@ -2679,6 +2679,353 @@ input.wpaw-plan-section-check:checked::before {
|
||||
transition: min-height 0.3s ease;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
FOCUS KEYWORD BAR
|
||||
=========================== */
|
||||
.wpaw-focus-keyword-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px 10px;
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.wpaw-focus-keyword-bar.wpaw-compact {
|
||||
gap: 8px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.wpaw-focus-keyword-bar.wpaw-expanded {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.wpaw-fk-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.wpaw-fk-icon {
|
||||
font-size: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wpaw-fk-select,
|
||||
.wpaw-fk-select-full {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s, background 0.2s;
|
||||
}
|
||||
|
||||
.wpaw-fk-select {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
max-width: 180px;
|
||||
}
|
||||
|
||||
.wpaw-fk-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
padding: 6px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
transition: border-color 0.2s, background 0.2s;
|
||||
}
|
||||
|
||||
.wpaw-fk-input:focus {
|
||||
border-color: #007cba;
|
||||
outline: none;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.wpaw-fk-input::placeholder {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.wpaw-fk-select-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wpaw-fk-custom-input {
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
padding: 10px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.2s, background 0.2s;
|
||||
}
|
||||
|
||||
.wpaw-fk-custom-input:focus {
|
||||
border-color: #007cba;
|
||||
outline: none;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.wpaw-fk-custom-input::placeholder {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.wpaw-fk-select:focus,
|
||||
.wpaw-fk-select-full:focus {
|
||||
border-color: #007cba;
|
||||
outline: none;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.wpaw-fk-select:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.wpaw-fk-select option,
|
||||
.wpaw-fk-select-full option {
|
||||
background: #1e1e1e;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wpaw-fk-cost {
|
||||
color: #a7aaad;
|
||||
font-size: 11px;
|
||||
font-family: ui-monospace, monospace;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wpaw-fk-expand,
|
||||
.wpaw-fk-collapse {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #a7aaad;
|
||||
cursor: pointer;
|
||||
padding: 4px 6px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.wpaw-fk-expand:hover,
|
||||
.wpaw-fk-collapse:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wpaw-fk-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: #a7aaad;
|
||||
}
|
||||
|
||||
.wpaw-fk-main-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wpaw-fk-custom-input {
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
color: #fff;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.wpaw-fk-custom-input:focus {
|
||||
border-color: #007cba;
|
||||
outline: none;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.wpaw-fk-custom-input::placeholder {
|
||||
color: #a7aaad;
|
||||
}
|
||||
|
||||
.wpaw-fk-suggestions {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 6px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.wpaw-fk-suggestions-label {
|
||||
font-size: 11px;
|
||||
color: #a7aaad;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.wpaw-fk-suggestion-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 8px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.wpaw-fk-suggestion-item:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.wpaw-fk-suggestion-item.selected {
|
||||
background: rgba(0, 124, 186, 0.2);
|
||||
}
|
||||
|
||||
.wpaw-fk-radio {
|
||||
color: #007cba;
|
||||
font-size: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wpaw-fk-suggestion-text {
|
||||
flex: 1;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.wpaw-fk-suggestion-source {
|
||||
color: #666;
|
||||
font-size: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wpaw-fk-stats {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
font-size: 11px;
|
||||
color: #a7aaad;
|
||||
font-family: ui-monospace, monospace;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.wpaw-fk-divider {
|
||||
color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
WELCOME SCREEN
|
||||
=========================== */
|
||||
.wpaw-welcome-screen {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem 1.5rem;
|
||||
text-align: center;
|
||||
min-height: 400px;
|
||||
animation: fadeInUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
.wpaw-welcome-content {
|
||||
max-width: 320px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wpaw-welcome-icon {
|
||||
display: block;
|
||||
margin-bottom: 1rem;
|
||||
color: #2271b1;
|
||||
}
|
||||
|
||||
.wpaw-welcome-icon svg {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.wpaw-welcome-title {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wpaw-welcome-subtitle {
|
||||
margin: 0 0 1.5rem 0;
|
||||
font-size: 0.95rem;
|
||||
color: #a7aaad;
|
||||
}
|
||||
|
||||
.wpaw-welcome-input {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
margin-bottom: 1rem;
|
||||
box-sizing: border-box;
|
||||
transition: border-color 0.2s, background 0.2s;
|
||||
}
|
||||
|
||||
.wpaw-welcome-input:focus {
|
||||
outline: none;
|
||||
border-color: #2271b1;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.wpaw-welcome-input::placeholder {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.wpaw-welcome-pills {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.wpaw-welcome-pill {
|
||||
flex: 1;
|
||||
padding: 10px 12px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 8px;
|
||||
color: #a7aaad;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.wpaw-welcome-pill:hover {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border-color: rgba(255, 255, 255, 0.25);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wpaw-welcome-pill.active {
|
||||
background: rgba(34, 113, 177, 0.2);
|
||||
border-color: #2271b1;
|
||||
color: #2271b1;
|
||||
}
|
||||
|
||||
.wpaw-welcome-start-btn {
|
||||
width: 100%;
|
||||
padding: 12px 24px !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
CONTEXTUAL ACTION CARDS
|
||||
=========================== */
|
||||
@@ -2730,15 +3077,15 @@ input.wpaw-plan-section-check:checked::before {
|
||||
|
||||
/* Variant for different intent types */
|
||||
.wpaw-contextual-action.intent-create-outline {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background: linear-gradient(135deg, #2271b1 0%, #135e96 100%);
|
||||
}
|
||||
|
||||
.wpaw-contextual-action.intent-start-writing {
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
background: linear-gradient(135deg, #d63638 0%, #8a1e1e 100%);
|
||||
}
|
||||
|
||||
.wpaw-contextual-action.intent-refine-content {
|
||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||
background: linear-gradient(135deg, #2271b1 0%, #00a32a 100%);
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
@@ -2772,8 +3119,97 @@ input.wpaw-plan-section-check:checked::before {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
P2: TYPING ANIMATION
|
||||
=========================== */
|
||||
@keyframes wpaw-typewriter-cursor {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
50% {
|
||||
border-color: #a7aaad;
|
||||
}
|
||||
}
|
||||
|
||||
.wpaw-typing-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 6px 12px;
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 12px;
|
||||
color: #a7aaad;
|
||||
}
|
||||
|
||||
.wpaw-typing-dots {
|
||||
display: inline-flex;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.wpaw-typing-dots span {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background: #a7aaad;
|
||||
border-radius: 50%;
|
||||
animation: wpaw-typing-bounce 1.2s infinite;
|
||||
}
|
||||
|
||||
.wpaw-typing-dots span:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.wpaw-typing-dots span:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes wpaw-typing-bounce {
|
||||
|
||||
0%,
|
||||
60%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: translateY(-4px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* P3: KEYBOARD HINTS */
|
||||
.wpaw-keyboard-hints {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding: 6px 0 0;
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 10px;
|
||||
color: #50575e;
|
||||
}
|
||||
|
||||
.wpaw-kbd {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.wpaw-kbd kbd {
|
||||
background: #2c2c2c;
|
||||
border: 1px solid #3c3c3c;
|
||||
border-radius: 2px;
|
||||
padding: 1px 4px;
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 10px;
|
||||
color: #a7aaad;
|
||||
}
|
||||
107
assets/js/block-image-generate.js
Normal file
107
assets/js/block-image-generate.js
Normal file
@@ -0,0 +1,107 @@
|
||||
/**
|
||||
* WP Agentic Writer - Image Block Toolbar Button
|
||||
*
|
||||
* Adds "Generate AI Image" button to image blocks with data-agent-image-id attribute.
|
||||
*
|
||||
* @package WP_Agentic_Writer
|
||||
*/
|
||||
|
||||
(function (wp) {
|
||||
const { BlockControls } = wp.blockEditor;
|
||||
const { ToolbarButton, ToolbarGroup } = wp.components;
|
||||
const { createHigherOrderComponent } = wp.compose;
|
||||
const { useSelect } = wp.data;
|
||||
const { addFilter } = wp.hooks;
|
||||
const { __ } = wp.i18n;
|
||||
|
||||
/**
|
||||
* Add "Generate AI Image" toolbar button to image blocks with data-agent-image-id.
|
||||
*/
|
||||
const withImageGenerateToolbar = createHigherOrderComponent((BlockEdit) => {
|
||||
return (props) => {
|
||||
const { clientId } = props;
|
||||
const block = useSelect(
|
||||
(select) => select('core/block-editor').getBlock(clientId),
|
||||
[clientId]
|
||||
);
|
||||
|
||||
// Only add button to core/image blocks
|
||||
if (!block || block.name !== 'core/image') {
|
||||
return wp.element.createElement(BlockEdit, props);
|
||||
}
|
||||
|
||||
// Check for agent image ID in multiple locations
|
||||
const getAgentImageId = () => {
|
||||
// Method 1: Direct attribute
|
||||
if (block.attributes['data-agent-image-id']) {
|
||||
return block.attributes['data-agent-image-id'];
|
||||
}
|
||||
|
||||
// Method 2: Check className for pattern wpaw-agent-img-*
|
||||
const className = block.attributes.className || '';
|
||||
const classMatch = className.match(/wpaw-agent-img-([^\s]+)/);
|
||||
if (classMatch) {
|
||||
return classMatch[1];
|
||||
}
|
||||
|
||||
// Method 3: Check innerHTML for data-agent-image-id
|
||||
const innerHTML = block.attributes.innerHTML || '';
|
||||
const htmlMatch = innerHTML.match(/data-agent-image-id=["']([^"']+)["']/);
|
||||
if (htmlMatch) {
|
||||
return htmlMatch[1];
|
||||
}
|
||||
|
||||
// Method 4: Check if placeholder (no url but has alt)
|
||||
if (!block.attributes.url && block.attributes.alt && block.attributes.alt.includes('[Image:')) {
|
||||
return 'placeholder_' + clientId;
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
const agentImageId = getAgentImageId();
|
||||
if (!agentImageId) {
|
||||
return wp.element.createElement(BlockEdit, props);
|
||||
}
|
||||
|
||||
const openImageModal = () => {
|
||||
// Dispatch custom event to open image generation modal
|
||||
window.dispatchEvent(
|
||||
new CustomEvent('wpaw:open-image-modal', {
|
||||
detail: {
|
||||
agentImageId: agentImageId,
|
||||
blockId: clientId,
|
||||
},
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
return wp.element.createElement(
|
||||
wp.element.Fragment,
|
||||
null,
|
||||
wp.element.createElement(BlockEdit, props),
|
||||
wp.element.createElement(
|
||||
BlockControls,
|
||||
null,
|
||||
wp.element.createElement(
|
||||
ToolbarGroup,
|
||||
null,
|
||||
wp.element.createElement(ToolbarButton, {
|
||||
icon: 'format-image',
|
||||
label: __('Generate AI Image', 'wp-agentic-writer'),
|
||||
onClick: openImageModal,
|
||||
className: 'wpaw-generate-image-btn',
|
||||
})
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
}, 'withImageGenerateToolbar');
|
||||
|
||||
// Apply the filter to add toolbar button
|
||||
addFilter(
|
||||
'editor.BlockEdit',
|
||||
'wp-agentic-writer/image-generate-toolbar',
|
||||
withImageGenerateToolbar
|
||||
);
|
||||
})(window.wp);
|
||||
519
assets/js/image-modal.js
Normal file
519
assets/js/image-modal.js
Normal file
@@ -0,0 +1,519 @@
|
||||
/**
|
||||
* Image Generation Modal Component
|
||||
*
|
||||
* Handles image review, generation, variant selection, and commitment.
|
||||
*
|
||||
* @package WP_Agentic_Writer
|
||||
*/
|
||||
|
||||
(function() {
|
||||
const { Modal, Button, Spinner, TextControl, TextareaControl } = wp.components;
|
||||
const { useState, useEffect, render } = wp.element;
|
||||
|
||||
window.wpAgenticWriter = window.wpAgenticWriter || {};
|
||||
|
||||
/**
|
||||
* Image Review Modal
|
||||
* Shows after article generation with image recommendations
|
||||
*/
|
||||
window.wpAgenticWriter.ImageReviewModal = function({ postId, initialImageId, onClose, onComplete }) {
|
||||
const [step, setStep] = useState('loading');
|
||||
const [images, setImages] = useState([]);
|
||||
const [selectedImages, setSelectedImages] = useState([]);
|
||||
const [variantCounts, setVariantCounts] = useState({});
|
||||
const [isGenerating, setIsGenerating] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
loadImageRecommendations();
|
||||
}, []);
|
||||
|
||||
const loadImageRecommendations = async () => {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${wpAgenticWriter.apiUrl}/image-recommendations/${postId}`,
|
||||
{
|
||||
headers: {
|
||||
'X-WP-Nonce': wpAgenticWriter.nonce,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to load image recommendations');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
const imgs = data.images || [];
|
||||
setImages(imgs);
|
||||
|
||||
const initialCounts = {};
|
||||
imgs.forEach(img => {
|
||||
initialCounts[img.agent_image_id] = 2;
|
||||
});
|
||||
setVariantCounts(initialCounts);
|
||||
|
||||
setStep('review');
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
setStep('review');
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditPrompt = (imageId, newPrompt) => {
|
||||
setImages(prev => prev.map(img =>
|
||||
img.agent_image_id === imageId
|
||||
? { ...img, prompt_edited: newPrompt }
|
||||
: img
|
||||
));
|
||||
};
|
||||
|
||||
const handleEditAlt = (imageId, newAlt) => {
|
||||
setImages(prev => prev.map(img =>
|
||||
img.agent_image_id === imageId
|
||||
? { ...img, alt_text_edited: newAlt }
|
||||
: img
|
||||
));
|
||||
};
|
||||
|
||||
const handleVariantCountChange = (imageId, count) => {
|
||||
setVariantCounts(prev => ({
|
||||
...prev,
|
||||
[imageId]: parseInt(count, 10)
|
||||
}));
|
||||
};
|
||||
|
||||
const calculateTotalCost = () => {
|
||||
const settings = wpAgenticWriter.settings || {};
|
||||
const imageModel = settings.image_model || 'sourceful/riverflow-v2-max';
|
||||
|
||||
const costPerImage = {
|
||||
'black-forest-labs/flux.2-klein': 0.02,
|
||||
'sourceful/riverflow-v2-max': 0.03,
|
||||
'black-forest-labs/flux.2-max': 0.15,
|
||||
};
|
||||
|
||||
const baseCost = costPerImage[imageModel] || 0.03;
|
||||
|
||||
let total = 0;
|
||||
selectedImages.forEach(imageId => {
|
||||
const count = variantCounts[imageId] || 1;
|
||||
total += baseCost * count;
|
||||
});
|
||||
|
||||
return total.toFixed(3);
|
||||
};
|
||||
|
||||
const handleGenerateSelected = async () => {
|
||||
if (selectedImages.length === 0) {
|
||||
alert('Please select at least one image to generate');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsGenerating(true);
|
||||
setStep('generating');
|
||||
|
||||
try {
|
||||
for (const imageId of selectedImages) {
|
||||
const image = images.find(img => img.agent_image_id === imageId);
|
||||
|
||||
const response = await fetch(
|
||||
`${wpAgenticWriter.apiUrl}/generate-image`,
|
||||
{
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-WP-Nonce': wpAgenticWriter.nonce,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
post_id: postId,
|
||||
agent_image_id: imageId,
|
||||
prompt: image.prompt_edited || image.prompt_initial,
|
||||
alt: image.alt_text_edited || image.alt_text_initial,
|
||||
variant_count: variantCounts[imageId] || 1,
|
||||
}),
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to generate image: ${imageId}`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
setImages(prev => prev.map(img =>
|
||||
img.agent_image_id === imageId
|
||||
? { ...img, variants: result.variants }
|
||||
: img
|
||||
));
|
||||
}
|
||||
|
||||
setStep('selecting');
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
setStep('review');
|
||||
} finally {
|
||||
setIsGenerating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectVariant = async (imageId, variantId) => {
|
||||
const image = images.find(img => img.agent_image_id === imageId);
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${wpAgenticWriter.apiUrl}/commit-image`,
|
||||
{
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-WP-Nonce': wpAgenticWriter.nonce,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
post_id: postId,
|
||||
agent_image_id: imageId,
|
||||
variant_id: variantId,
|
||||
alt: image.alt_text_edited || image.alt_text_initial,
|
||||
}),
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to commit image');
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
updateGutenbergBlock(imageId, result);
|
||||
|
||||
setImages(prev => prev.map(img =>
|
||||
img.agent_image_id === imageId
|
||||
? { ...img, status: 'committed', attachment_id: result.attachment_id }
|
||||
: img
|
||||
));
|
||||
} catch (err) {
|
||||
alert('Failed to commit image: ' + err.message);
|
||||
}
|
||||
};
|
||||
|
||||
const updateGutenbergBlock = (agentImageId, attachmentData) => {
|
||||
const blocks = wp.data.select('core/block-editor').getBlocks();
|
||||
|
||||
const findAndUpdateBlock = (blocks) => {
|
||||
for (const block of blocks) {
|
||||
if (block.name === 'core/image' &&
|
||||
block.attributes['data-agent-image-id'] === agentImageId) {
|
||||
|
||||
wp.data.dispatch('core/block-editor').updateBlockAttributes(
|
||||
block.clientId,
|
||||
{
|
||||
id: attachmentData.attachment_id,
|
||||
url: attachmentData.attachment_url,
|
||||
alt: attachmentData.alt,
|
||||
'data-agent-image-id': undefined,
|
||||
}
|
||||
);
|
||||
return true;
|
||||
}
|
||||
|
||||
if (block.innerBlocks && block.innerBlocks.length > 0) {
|
||||
if (findAndUpdateBlock(block.innerBlocks)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
findAndUpdateBlock(blocks);
|
||||
};
|
||||
|
||||
if (step === 'loading') {
|
||||
return wp.element.createElement(Modal, {
|
||||
title: 'Loading Image Recommendations',
|
||||
onRequestClose: onClose,
|
||||
},
|
||||
wp.element.createElement('div', { style: { padding: '20px', textAlign: 'center' } },
|
||||
wp.element.createElement(Spinner)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if (step === 'review') {
|
||||
return wp.element.createElement(Modal, {
|
||||
title: `Image Recommendations (${images.length})`,
|
||||
onRequestClose: onClose,
|
||||
style: { maxWidth: '800px' },
|
||||
},
|
||||
wp.element.createElement('div', { className: 'wpaw-image-review' },
|
||||
error && wp.element.createElement('div', {
|
||||
className: 'notice notice-error',
|
||||
style: { marginBottom: '20px' }
|
||||
}, error),
|
||||
|
||||
images.length === 0 && wp.element.createElement('div', {
|
||||
style: {
|
||||
padding: '40px 20px',
|
||||
textAlign: 'center',
|
||||
color: '#666',
|
||||
}
|
||||
},
|
||||
wp.element.createElement('p', { style: { fontSize: '16px', marginBottom: '10px' } },
|
||||
'📷 No image recommendations available'
|
||||
),
|
||||
wp.element.createElement('p', { style: { fontSize: '14px', marginBottom: '20px' } },
|
||||
'Images are generated during article writing. You can add images manually or generate them later.'
|
||||
),
|
||||
wp.element.createElement(Button, {
|
||||
variant: 'primary',
|
||||
onClick: onClose,
|
||||
}, 'Continue Without Images')
|
||||
),
|
||||
|
||||
images.map(image =>
|
||||
wp.element.createElement('div', {
|
||||
key: image.agent_image_id,
|
||||
className: 'wpaw-image-card',
|
||||
style: {
|
||||
border: '1px solid #ddd',
|
||||
padding: '15px',
|
||||
marginBottom: '15px',
|
||||
borderRadius: '4px',
|
||||
},
|
||||
},
|
||||
wp.element.createElement('h3', null,
|
||||
`Image: ${image.section_title || image.placement}`
|
||||
),
|
||||
|
||||
wp.element.createElement(TextareaControl, {
|
||||
label: 'Prompt',
|
||||
value: image.prompt_edited || image.prompt_initial,
|
||||
onChange: (value) => handleEditPrompt(image.agent_image_id, value),
|
||||
rows: 3,
|
||||
}),
|
||||
|
||||
wp.element.createElement(TextControl, {
|
||||
label: 'Alt Text',
|
||||
value: image.alt_text_edited || image.alt_text_initial,
|
||||
onChange: (value) => handleEditAlt(image.agent_image_id, value),
|
||||
}),
|
||||
|
||||
wp.element.createElement('div', {
|
||||
style: { marginTop: '10px', marginBottom: '10px' }
|
||||
},
|
||||
wp.element.createElement('label', {
|
||||
style: { display: 'block', marginBottom: '5px', fontWeight: '600' }
|
||||
}, 'Variant Count'),
|
||||
wp.element.createElement('select', {
|
||||
value: variantCounts[image.agent_image_id] || 2,
|
||||
onChange: (e) => handleVariantCountChange(image.agent_image_id, e.target.value),
|
||||
style: {
|
||||
padding: '5px',
|
||||
borderRadius: '3px',
|
||||
border: '1px solid #ddd',
|
||||
}
|
||||
},
|
||||
wp.element.createElement('option', { value: '1' }, '1 variant'),
|
||||
wp.element.createElement('option', { value: '2' }, '2 variants'),
|
||||
wp.element.createElement('option', { value: '3' }, '3 variants')
|
||||
),
|
||||
wp.element.createElement('p', {
|
||||
style: { fontSize: '12px', color: '#666', margin: '5px 0 0' }
|
||||
}, `Cost: ~$${((variantCounts[image.agent_image_id] || 2) * 0.03).toFixed(3)}`)
|
||||
),
|
||||
|
||||
wp.element.createElement('label', null,
|
||||
wp.element.createElement('input', {
|
||||
type: 'checkbox',
|
||||
checked: selectedImages.includes(image.agent_image_id),
|
||||
onChange: (e) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedImages(prev => [...prev, image.agent_image_id]);
|
||||
} else {
|
||||
setSelectedImages(prev => prev.filter(id => id !== image.agent_image_id));
|
||||
}
|
||||
},
|
||||
}),
|
||||
' Generate this image'
|
||||
)
|
||||
)
|
||||
),
|
||||
|
||||
wp.element.createElement('div', {
|
||||
style: {
|
||||
marginTop: '20px',
|
||||
display: 'flex',
|
||||
gap: '10px',
|
||||
justifyContent: 'flex-end',
|
||||
}
|
||||
},
|
||||
wp.element.createElement(Button, {
|
||||
variant: 'secondary',
|
||||
onClick: onClose,
|
||||
}, 'Skip Images'),
|
||||
|
||||
wp.element.createElement(Button, {
|
||||
variant: 'primary',
|
||||
onClick: handleGenerateSelected,
|
||||
disabled: selectedImages.length === 0 || isGenerating,
|
||||
}, `Generate ${selectedImages.length} Image(s) (~$${calculateTotalCost()})`)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if (step === 'generating') {
|
||||
return wp.element.createElement(Modal, {
|
||||
title: 'Generating Images',
|
||||
onRequestClose: () => {},
|
||||
},
|
||||
wp.element.createElement('div', { style: { padding: '20px', textAlign: 'center' } },
|
||||
wp.element.createElement(Spinner),
|
||||
wp.element.createElement('p', null,
|
||||
`Generating images... This may take a minute.`
|
||||
),
|
||||
wp.element.createElement('p', { style: { fontSize: '12px', color: '#666' } },
|
||||
`Estimated cost: $${calculateTotalCost()}`
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if (step === 'selecting') {
|
||||
return wp.element.createElement(Modal, {
|
||||
title: 'Select Image Variants',
|
||||
onRequestClose: onClose,
|
||||
style: { maxWidth: '900px' },
|
||||
},
|
||||
wp.element.createElement('div', { className: 'wpaw-variant-selection' },
|
||||
images
|
||||
.filter(img => img.variants && img.variants.length > 0)
|
||||
.map(image =>
|
||||
wp.element.createElement('div', {
|
||||
key: image.agent_image_id,
|
||||
style: { marginBottom: '30px' },
|
||||
},
|
||||
wp.element.createElement('h3', null, image.section_title),
|
||||
|
||||
wp.element.createElement('div', {
|
||||
style: {
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))',
|
||||
gap: '15px',
|
||||
},
|
||||
},
|
||||
image.variants.map(variant =>
|
||||
wp.element.createElement('div', {
|
||||
key: variant.id,
|
||||
style: {
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '4px',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
},
|
||||
wp.element.createElement('img', {
|
||||
src: variant.temp_file_url,
|
||||
alt: 'Variant',
|
||||
style: { width: '100%', display: 'block' },
|
||||
}),
|
||||
|
||||
wp.element.createElement('div', { style: { padding: '10px' } },
|
||||
wp.element.createElement('p', { style: { fontSize: '12px', margin: '0 0 10px' } },
|
||||
`Cost: $${variant.cost.toFixed(3)} • ${variant.generation_time}s`
|
||||
),
|
||||
|
||||
wp.element.createElement(Button, {
|
||||
variant: 'primary',
|
||||
onClick: () => handleSelectVariant(image.agent_image_id, variant.id),
|
||||
style: { width: '100%' },
|
||||
}, 'Select')
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
),
|
||||
|
||||
wp.element.createElement('div', {
|
||||
style: { marginTop: '20px', textAlign: 'right' },
|
||||
},
|
||||
wp.element.createElement(Button, {
|
||||
variant: 'secondary',
|
||||
onClick: onComplete,
|
||||
}, 'Done')
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize modal container and event listeners
|
||||
let modalContainer = null;
|
||||
let currentModalInstance = null;
|
||||
|
||||
/**
|
||||
* Open image modal for review after article generation
|
||||
*/
|
||||
window.addEventListener('wpaw:open-image-review-modal', (event) => {
|
||||
const { postId, imageCount } = event.detail;
|
||||
|
||||
if (!modalContainer) {
|
||||
modalContainer = document.createElement('div');
|
||||
modalContainer.id = 'wpaw-image-modal-root';
|
||||
document.body.appendChild(modalContainer);
|
||||
}
|
||||
|
||||
currentModalInstance = render(
|
||||
wp.element.createElement(window.wpAgenticWriter.ImageReviewModal, {
|
||||
postId: postId,
|
||||
onClose: () => {
|
||||
if (modalContainer) {
|
||||
render(null, modalContainer);
|
||||
currentModalInstance = null;
|
||||
}
|
||||
},
|
||||
onComplete: () => {
|
||||
if (modalContainer) {
|
||||
render(null, modalContainer);
|
||||
currentModalInstance = null;
|
||||
}
|
||||
},
|
||||
}),
|
||||
modalContainer
|
||||
);
|
||||
});
|
||||
|
||||
/**
|
||||
* Open image modal for single image from toolbar
|
||||
*/
|
||||
window.addEventListener('wpaw:open-image-modal', (event) => {
|
||||
const { agentImageId, blockId } = event.detail;
|
||||
const postId = wp.data.select('core/editor').getCurrentPostId();
|
||||
|
||||
if (!modalContainer) {
|
||||
modalContainer = document.createElement('div');
|
||||
modalContainer.id = 'wpaw-image-modal-root';
|
||||
document.body.appendChild(modalContainer);
|
||||
}
|
||||
|
||||
currentModalInstance = render(
|
||||
wp.element.createElement(window.wpAgenticWriter.ImageReviewModal, {
|
||||
postId: postId,
|
||||
initialImageId: agentImageId,
|
||||
onClose: () => {
|
||||
if (modalContainer) {
|
||||
render(null, modalContainer);
|
||||
currentModalInstance = null;
|
||||
}
|
||||
},
|
||||
onComplete: () => {
|
||||
if (modalContainer) {
|
||||
render(null, modalContainer);
|
||||
currentModalInstance = null;
|
||||
}
|
||||
},
|
||||
}),
|
||||
modalContainer
|
||||
);
|
||||
});
|
||||
})();
|
||||
@@ -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();
|
||||
}
|
||||
|
||||
1232
assets/js/sidebar.js
1232
assets/js/sidebar.js
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user