← All changes | js/mxchat-admin.js +136 -20 2.0.3 → 2.1.1 View file →

		@@ -240,9 +240,9 @@
240	240	});
241	241	});
242	242
243	243	// Reinitialize color pickers when switching tabs
244		- $('.mxchat-nav-tab').on('click.mxchat', function() {
	244	+ $('.mxchat-tab-button').on('click.mxchat', function() {
245	245	setTimeout(function() {
246	246	$('.my-color-field:visible').wpColorPicker('close');
247	247	}, 100);
248	248	});
		@@ -250,24 +250,19 @@
250	250
251	251	// Initialize tabs system
252	252	function initTabs() {
253	253	// Remove any existing handlers first
254		- $('.mxchat-nav-tab').off('click.mxchat');
	254	+ $('.mxchat-tab-button').off('click.mxchat');
255	255
256	256	// Add new click handlers
257		- $('.mxchat-nav-tab').on('click.mxchat', function(e) {
	257	+ $('.mxchat-tab-button').on('click.mxchat', function(e) {
258	258	e.preventDefault();
259	259	e.stopPropagation();
260	260
261	261	var $this = $(this);
262	262
263		- // Get tab ID - try href first, fallback to data-tab, then to default
264		- var tabId = $this.attr('href');
265		- if (tabId) {
266		- tabId = tabId.replace('#', '');
267		- } else {
268		- tabId = $this.data('tab') || 'chatbot';
269		- }
	263	+ // Get tab ID from data-tab attribute
	264	+ var tabId = $this.data('tab') || 'chatbot';
270	265
271	266	// Safety check for empty tabId
272	267	if (!tabId) {
273	268	console.warn('No tab identifier found');
		@@ -273,17 +268,17 @@
273	268	console.warn('No tab identifier found');
274	269	return;
275	270	}
276	271
277		- // Update tabs
278		- $('.mxchat-nav-tab').removeClass('mxchat-nav-tab-active');
279		- $this.addClass('mxchat-nav-tab-active');
	272	+ // Update tab buttons
	273	+ $('.mxchat-tab-button').removeClass('active');
	274	+ $this.addClass('active');
280	275
281	276	// Update content areas - with safety check
282		- $('.mxchat-tab-content').removeClass('active').hide();
	277	+ $('.mxchat-tab-content').removeClass('active');
283	278	var $targetTab = $('#' + tabId);
284	279	if ($targetTab.length) {
285		- $targetTab.addClass('active').show();
	280	+ $targetTab.addClass('active');
286	281
287	282	// Store active tab
288	283	try {
289	284	localStorage.setItem('mxchat_active_tab', tabId);
		@@ -303,14 +298,14 @@
303	298	// Activate initial tab
304	299	try {
305	300	var savedTab = localStorage.getItem('mxchat_active_tab');
306	301	if (savedTab && $('#' + savedTab).length > 0) {
307		- $('.mxchat-nav-tab[href="#' + savedTab + '"]').trigger('click.mxchat');
	302	+ $('.mxchat-tab-button[data-tab="' + savedTab + '"]').trigger('click.mxchat');
308	303	} else {
309		- $('.mxchat-nav-tab').first().trigger('click.mxchat');
	304	+ $('.mxchat-tab-button').first().trigger('click.mxchat');
310	305	}
311	306	} catch (e) {
312		- $('.mxchat-nav-tab').first().trigger('click.mxchat');
	307	+ $('.mxchat-tab-button').first().trigger('click.mxchat');
313	308	}
314	309
315	310	// Attach edit modal event handler
316	311	$(document).on('click', '.mxchat-edit-button', function() {
		@@ -336,8 +331,9 @@
336	331	// Initialize all toggle visibility buttons
337	332	[
338	333	'#toggleApiKeyVisibility',
339	334	'#toggleWooCommerceSecretVisibility',
	335	+ '#toggleVoyageAPIKeyVisibility',
340	336	'#toggleLoopsApiKeyVisibility',
341	337	'#toggleXaiApiKeyVisibility',
342	338	'#toggleClaudeApiKeyVisibility',
343	339	'#toggleBraveApiKeyVisibility',
		@@ -346,8 +342,115 @@
346	342	'#toggleBotTokenVisibility',
347	343	'#toggleDeepSeekApiKeyVisibility'
348	344	].forEach(toggleVisibility);
349	345
	346	+ // Handle API key visibility based on model selection
	347	+ // Handle API key visibility based on model selection
	348	+function setupAPIKeyVisibility() {
	349	+ // Cache the selectors
	350	+ const $chatModelSelect = $('#model');
	351	+ const $embeddingModelSelect = $('#embedding_model');
	352	+
	353	+ // First, locate and mark the API key rows
	354	+ setupAPIKeyRows();
	355	+
	356	+ // Initial setup based on current selections
	357	+ updateApiKeyVisibility();
	358	+
	359	+ // Listen for changes to the model selectors
	360	+ $chatModelSelect.on('change', updateApiKeyVisibility);
	361	+ $embeddingModelSelect.on('change', updateApiKeyVisibility);
	362	+
	363	+ /**
	364	+ * Locate and mark rows that contain API key fields
	365	+ */
	366	+ function setupAPIKeyRows() {
	367	+ // Find key rows by their field IDs
	368	+ const providerMap = {
	369	+ 'api_key': 'openai',
	370	+ 'xai_api_key': 'xai',
	371	+ 'claude_api_key': 'claude',
	372	+ 'deepseek_api_key': 'deepseek',
	373	+ 'voyage_api_key': 'voyage'
	374	+ };
	375	+
	376	+ $.each(providerMap, function(fieldId, provider) {
	377	+ const $field = $('#' + fieldId);
	378	+ if ($field.length) {
	379	+ const $row = $field.closest('tr');
	380	+ $row.addClass('mxchat-setting-row');
	381	+ $row.attr('data-provider', provider);
	382	+ }
	383	+ });
	384	+ }
	385	+
	386	+ /**
	387	+ * Updates the visibility of API key fields based on current model selections
	388	+ */
	389	+ function updateApiKeyVisibility() {
	390	+ const chatModel = $chatModelSelect.val();
	391	+ const embeddingModel = $embeddingModelSelect.val();
	392	+
	393	+ // Determine which providers are needed
	394	+ const isOpenAIChat = chatModel && chatModel.startsWith('gpt-');
	395	+ const isXAI = chatModel && chatModel.startsWith('grok-');
	396	+ const isClaude = chatModel && chatModel.startsWith('claude-');
	397	+ const isDeepSeek = chatModel && chatModel.startsWith('deepseek-');
	398	+
	399	+ const isOpenAIEmbedding = embeddingModel && embeddingModel.startsWith('text-embedding-');
	400	+ const isVoyage = embeddingModel && embeddingModel.startsWith('voyage-');
	401	+
	402	+ // Update API key visibility for each provider
	403	+ updateWrapperVisibility('openai', isOpenAIChat || isOpenAIEmbedding);
	404	+ updateWrapperVisibility('xai', isXAI);
	405	+ updateWrapperVisibility('claude', isClaude);
	406	+ updateWrapperVisibility('deepseek', isDeepSeek);
	407	+ updateWrapperVisibility('voyage', isVoyage);
	408	+
	409	+ // Update provider-specific notices for OpenAI
	410	+ if (isOpenAIChat && isOpenAIEmbedding) {
	411	+ $('div[data-provider="openai"] .api-key-notice').text(
	412	+ 'Required for your selected chat model and embedding model. Important: You must add credits before use.'
	413	+ );
	414	+ } else if (isOpenAIChat) {
	415	+ $('div[data-provider="openai"] .api-key-notice').text(
	416	+ 'Required for your selected chat model. Important: You must add credits before use.'
	417	+ );
	418	+ } else if (isOpenAIEmbedding) {
	419	+ $('div[data-provider="openai"] .api-key-notice').text(
	420	+ 'Required for your selected embedding model. Important: You must add credits before use.'
	421	+ );
	422	+ }
	423	+ }
	424	+
	425	+ /**
	426	+ * Updates visibility of a specific provider's API key wrapper
	427	+ */
	428	+ function updateWrapperVisibility(provider, isVisible) {
	429	+ const $row = $('tr.mxchat-setting-row[data-provider="' + provider + '"]');
	430	+
	431	+ if (!$row.length) {
	432	+ console.warn('API key row not found for provider: ' + provider);
	433	+ return;
	434	+ }
	435	+
	436	+ if (isVisible) {
	437	+ $row.show();
	438	+ if (!$row.hasClass('highlighted')) {
	439	+ $row.addClass('highlighted');
	440	+ setTimeout(() => {
	441	+ $row.removeClass('highlighted');
	442	+ }, 1500);
	443	+ }
	444	+ } else {
	445	+ $row.hide();
	446	+ }
	447	+ }
	448	+}
	449	+
	450	+ // Initialize API key visibility
	451	+ setupAPIKeyVisibility();
	452	+
350	453	// Add Intent Form Submission
351	454	$('#mxchat-add-intent-form').on('submit', function(event) {
352	455	$('#mxchat-intent-loading').show();
353	456	$('#mxchat-intent-loading-text').show();
		@@ -544,9 +647,22 @@
544	647	}
545	648	});
546	649	}
547	650
548		-
549		-});
	651	+ // Function to adjust the textarea height to content
	652	+ function adjustTextareaHeight() {
	653	+ this.style.height = 'auto'; // Reset to auto to calculate scrollHeight
	654	+ this.style.height = this.scrollHeight + 'px'; // Expand to content height
	655	+ }
550	656
	657	+ // Function to reset the textarea height to initial
	658	+ function resetTextareaHeight() {
	659	+ this.style.height = ''; // Remove inline height, reverting to CSS default
	660	+ }
551	661
	662	+ // Target the specific textarea by ID
	663	+ var $textarea = $('#system_prompt_instructions');
552	664
	665	+ // Bind events
	666	+ $textarea.on('focus input', adjustTextareaHeight) // Expand on focus and input
	667	+ .on('blur', resetTextareaHeight); // Reset on blur
	668	+});