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

		@@ -1,7 +1,7 @@
1	1	<?php
2	2	/**
3		- * AI Settings page - V3 Apple-inspired Design.
	3	+ * AI Settings page - V3 Premium style inspired Design.
4	4	*
5	5	* @package King_Addons
6	6	*/
7	7
		@@ -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,16 +219,12 @@
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		- <a href="https://platform.openai.com/usage" target="_blank" class="ka-btn ka-btn-secondary">
212		- <span class="dashicons dashicons-external"></span>
213		- <?php esc_html_e('OpenAI Dashboard', 'king-addons'); ?>
214		- </a>
215	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); ?>">
216	228	<span class="ka-v3-segmented-indicator" aria-hidden="true"></span>
217	229	<button type="button" class="ka-v3-segmented-btn" data-theme="light" aria-pressed="<?php echo $theme_mode === 'light' ? 'true' : 'false'; ?>">
218	230	<span class="ka-v3-segmented-icon" aria-hidden="true">☀︎</span>
		@@ -222,14 +234,49 @@
222	234	<span class="ka-v3-segmented-icon" aria-hidden="true">☾</span>
223	235	<?php esc_html_e('Dark', 'king-addons'); ?>
224	236	</button>
225	237	<button type="button" class="ka-v3-segmented-btn" data-theme="auto" aria-pressed="<?php echo $theme_mode === 'auto' ? 'true' : 'false'; ?>">
	238	+ <span class="ka-v3-segmented-icon" aria-hidden="true">◐</span>
226	239	<?php esc_html_e('Auto', 'king-addons'); ?>
227	240	</button>
228	241	</div>
	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">
	243	+ <span class="dashicons dashicons-external"></span>
	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	+ ?>
	251	+ </a>
229	252	</div>
230	253	</div>
231	254
	255	+ <!-- Info Card -->
	256	+ <div class="ka-card">
	257	+ <div class="ka-card-header">
	258	+ <span class="dashicons dashicons-info" style="color: #0071e3;"></span>
	259	+ <h3><?php esc_html_e('How to use AI features', 'king-addons'); ?></h3>
	260	+ </div>
	261	+ <div class="ka-card-body">
	262	+ <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px;">
	263	+ <div>
	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>
	266	+ </div>
	267	+ <div>
	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>
	270	+ </div>
	271	+ <div>
	272	+ <h4 style="margin: 0 0 8px; font-size: 15px; font-weight: 600; color: inherit;">3. <?php esc_html_e('Use', 'king-addons'); ?></h4>
	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>
	274	+ </div>
	275	+ </div>
	276	+ </div>
	277	+ </div>
	278	+
232	279	<!-- Settings Form -->
233	280	<div class="ka-card">
234	281	<div class="ka-card-header">
235	282	<span class="dashicons dashicons-admin-settings" style="color: #8b5cf6;"></span>
		@@ -250,31 +297,8 @@
250	297	</form>
251	298	</div>
252	299	</div>
253	300
254		- <!-- Info Card -->
255		- <div class="ka-card">
256		- <div class="ka-card-header">
257		- <span class="dashicons dashicons-info" style="color: #0071e3;"></span>
258		- <h3><?php esc_html_e('How to use AI features', 'king-addons'); ?></h3>
259		- </div>
260		- <div class="ka-card-body">
261		- <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px;">
262		- <div>
263		- <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>
264		- <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>
265		- </div>
266		- <div>
267		- <h4 style="margin: 0 0 8px; font-size: 15px; font-weight: 600; color: inherit;">2. <?php esc_html_e('Enter Key Above', 'king-addons'); ?></h4>
268		- <p class="ka-row-desc" style="margin: 0;"><?php esc_html_e('Paste your API key in the field above and select your preferred model.', 'king-addons'); ?></p>
269		- </div>
270		- <div>
271		- <h4 style="margin: 0 0 8px; font-size: 15px; font-weight: 600; color: inherit;">3. <?php esc_html_e('Use in Editor', 'king-addons'); ?></h4>
272		- <p class="ka-row-desc" style="margin: 0;"><?php esc_html_e('AI features will be available in the Elementor editor widgets.', 'king-addons'); ?></p>
273		- </div>
274		- </div>
275		- </div>
276		- </div>
277	301	</div>
278	302
279	303	<script>
280	304	// Dashboard-style segmented theme control