← All changes | includes/admin/layouts/ai-settings-page.php +33 -11 51.1.77 → 51.1.87 View file →

		@@ -8,13 +8,16 @@
8	8	if (!defined('ABSPATH')) {
9	9	exit;
10	10	}
11	11
	12	+$ka_ai_provider = \King_Addons\AI_Provider::getProvider();
	13	+$ka_ai_provider_label = \King_Addons\AI_Provider::getLabel($ka_ai_provider);
	14	+
12	15	// Theme mode is per-user
13	16	$theme_mode = get_user_meta(get_current_user_id(), 'king_addons_theme_mode', true);
14	17	$allowed_theme_modes = ['dark', 'light', 'auto'];
15	18	if (!in_array($theme_mode, $allowed_theme_modes, true)) {
16		- $theme_mode = 'dark';
	19	+ $theme_mode = 'auto';
17	20	}
18	21
19	22	// Enqueue shared V3 styles
20	23	wp_enqueue_style(
		@@ -37,8 +40,17 @@
37	40	})();
38	41	</script>
39	42
40	43	<style>
	44	+/*
	45	+ * Rows of the provider that is not selected. The class is applied server side so
	46	+ * there is no flash of both providers' fields, and the settings script toggles
	47	+ * the same class when the provider changes.
	48	+ */
	49	+.ka-ai-settings .ka-ai-row-hidden {
	50	+ display: none;
	51	+}
	52	+
41	53	/* AI Settings V3 */
42	54	.ka-ai-settings .form-table {
43	55	margin: 0;
44	56	width: 100%;
		@@ -92,9 +104,9 @@
92	104	border: 1px solid rgba(0, 0, 0, 0.1);
93	105	border-radius: 12px;
94	106	font-size: 15px;
95	107	font-family: inherit;
96		- background: #fff;
	108	+ background-color: #fff;
97	109	transition: border-color 0.2s, box-shadow 0.2s;
98	110	}
99	111
100	112	body.ka-v3-dark .ka-ai-settings input[type="text"],
		@@ -101,9 +113,9 @@
101	113	body.ka-v3-dark .ka-ai-settings input[type="password"],
102	114	body.ka-v3-dark .ka-ai-settings input[type="number"],
103	115	body.ka-v3-dark .ka-ai-settings textarea,
104	116	body.ka-v3-dark .ka-ai-settings select {
105		- background: #2c2c2e;
	117	+ background-color: #2c2c2e;
106	118	border-color: rgba(255, 255, 255, 0.1);
107	119	color: #f5f5f7;
108	120	}
109	121
		@@ -128,9 +140,9 @@
128	140	margin-top: 8px;
129	141	line-height: 1.5;
130	142	}
131	143
132		-.ka-ai-settings select {
	144	+.ka-admin-wrap.ka-ai-settings select {
133	145	-webkit-appearance: none;
134	146	-moz-appearance: none;
135	147	appearance: none;
136	148	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='%2386868b' d='M6 8L0 0h12z'/%3e%3c/svg%3e");
		@@ -139,8 +151,12 @@
139	151	background-size: 10px 6px;
140	152	padding-right: 44px;
141	153	}
142	154
	155	+body.ka-v3-dark .ka-admin-wrap.ka-ai-settings select {
	156	+ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='%23a1a1a6' d='M6 8L0 0h12z'/%3e%3c/svg%3e");
	157	+}
	158	+
143	159	/* Section titles */
144	160	.ka-ai-settings .ka-card-body h2 {
145	161	font-size: 17px;
146	162	font-weight: 600;
		@@ -203,9 +219,9 @@
203	219	<span class="dashicons dashicons-admin-generic"></span>
204	220	</div>
205	221	<div>
206	222	<h1 class="ka-admin-title"><?php esc_html_e('AI Settings', 'king-addons'); ?></h1>
207		- <p class="ka-admin-subtitle"><?php esc_html_e('Configure OpenAI integration and AI features for Elementor editor', 'king-addons'); ?></p>
	223	+ <p class="ka-admin-subtitle"><?php esc_html_e('Configure your AI provider and AI features for the Elementor editor', 'king-addons'); ?></p>
208	224	</div>
209	225	</div>
210	226	<div class="ka-admin-header-actions">
211	227	<div class="ka-v3-segmented" id="ka-v3-theme-segment" role="radiogroup" aria-label="<?php echo esc_attr(esc_html__('Theme', 'king-addons')); ?>" data-active="<?php echo esc_attr($theme_mode); ?>">
		@@ -222,11 +238,17 @@
222	238	<span class="ka-v3-segmented-icon" aria-hidden="true">◐</span>
223	239	<?php esc_html_e('Auto', 'king-addons'); ?>
224	240	</button>
225	241	</div>
226		- <a href="https://platform.openai.com/usage" target="_blank" class="ka-btn ka-btn-secondary">
	242	+ <a href="<?php echo esc_url(\King_Addons\AI_Provider::getDashboardUrl($ka_ai_provider)); ?>" target="_blank" rel="noopener noreferrer" class="ka-btn ka-btn-secondary">
227	243	<span class="dashicons dashicons-external"></span>
228		- <?php esc_html_e('OpenAI Dashboard', 'king-addons'); ?>
	244	+ <?php
	245	+ printf(
	246	+ /* translators: %s: provider name */
	247	+ esc_html__('%s Dashboard', 'king-addons'),
	248	+ esc_html($ka_ai_provider_label)
	249	+ );
	250	+ ?>
229	251	</a>
230	252	</div>
231	253	</div>
232	254
		@@ -238,14 +260,14 @@
238	260	</div>
239	261	<div class="ka-card-body">
240	262	<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px;">
241	263	<div>
242		- <h4 style="margin: 0 0 8px; font-size: 15px; font-weight: 600; color: inherit;">1. <?php esc_html_e('Get API Key', 'king-addons'); ?></h4>
243		- <p class="ka-row-desc" style="margin: 0;"><?php esc_html_e('Create an account at OpenAI and generate an API key from the dashboard.', 'king-addons'); ?></p>
	264	+ <h4 style="margin: 0 0 8px; font-size: 15px; font-weight: 600; color: inherit;">1. <?php esc_html_e('Pick a Provider', 'king-addons'); ?></h4>
	265	+ <p class="ka-row-desc" style="margin: 0;"><?php esc_html_e('Choose OpenAI to use the OpenAI API directly, or OpenRouter to reach models from many vendors — including free ones — with one key.', 'king-addons'); ?></p>
244	266	</div>
245	267	<div>
246		- <h4 style="margin: 0 0 8px; font-size: 15px; font-weight: 600; color: inherit;">2. <?php esc_html_e('Enter Key Below', 'king-addons'); ?></h4>
247		- <p class="ka-row-desc" style="margin: 0;"><?php esc_html_e('Paste your API key in the field below and select your preferred model.', 'king-addons'); ?></p>
	268	+ <h4 style="margin: 0 0 8px; font-size: 15px; font-weight: 600; color: inherit;">2. <?php esc_html_e('Enter Key & Test', 'king-addons'); ?></h4>
	269	+ <p class="ka-row-desc" style="margin: 0;"><?php esc_html_e('Paste the API key in the field below, press Test Connection to verify it, then select your preferred models.', 'king-addons'); ?></p>
248	270	</div>
249	271	<div>
250	272	<h4 style="margin: 0 0 8px; font-size: 15px; font-weight: 600; color: inherit;">3. <?php esc_html_e('Use', 'king-addons'); ?></h4>
251	273	<p class="ka-row-desc" style="margin: 0;"><?php esc_html_e('AI features will be available in the Elementor editor, widgets, and other supported areas.', 'king-addons'); ?></p>