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;
|
||||
}
|
||||
Reference in New Issue
Block a user