5171f93a93
- Introduced `Groq_AI_Provider_Google` and `Groq_AI_Provider_Groq` classes for handling AI interactions with Google and Groq respectively. - Enhanced `Groq_AI_Provider_Manager` to register and manage multiple AI providers. - Implemented `Groq_AI_Conversation_Manager` for managing conversation IDs and context hashes. - Added `Groq_AI_Generation_Logger` for logging AI generation events and managing log tables. - Developed `Groq_AI_Prompt_Builder` for constructing prompts and processing AI responses. - Established `Groq_AI_Settings_Manager` for managing plugin settings, including context fields and module configurations.
382 lines
11 KiB
JavaScript
382 lines
11 KiB
JavaScript
(function ($) {
|
|
const modal = document.getElementById('groq-ai-modal');
|
|
if (!modal) {
|
|
return;
|
|
}
|
|
|
|
const openButtons = document.querySelectorAll('.groq-ai-open-modal');
|
|
const closeButton = modal.querySelector('.groq-ai-modal__close');
|
|
const form = document.getElementById('groq-ai-form');
|
|
const promptField = document.getElementById('groq-ai-prompt');
|
|
const statusField = modal.querySelector('.groq-ai-modal__status');
|
|
const resultWrapper = modal.querySelector('.groq-ai-modal__result');
|
|
const resultField = document.getElementById('groq-ai-output');
|
|
const jsonCopyButton = modal.querySelector('.groq-ai-copy-json');
|
|
const contextToggles = modal.querySelectorAll('.groq-ai-context-toggle');
|
|
const resultFields = {};
|
|
modal.querySelectorAll('.groq-ai-result-field').forEach((field) => {
|
|
const key = field.getAttribute('data-field');
|
|
if (!key) {
|
|
return;
|
|
}
|
|
resultFields[key] = {
|
|
key,
|
|
container: field,
|
|
textarea: field.querySelector('textarea'),
|
|
target: field.getAttribute('data-target-input') || '',
|
|
label: field.getAttribute('data-label') || key,
|
|
rankMathAction: field.getAttribute('data-rankmath-action') || '',
|
|
status: field.querySelector('.groq-ai-apply-status') || null,
|
|
statusTimer: null,
|
|
};
|
|
});
|
|
|
|
const advancedToggle = modal.querySelector('.groq-ai-advanced-toggle');
|
|
const advancedPanel = document.getElementById('groq-ai-advanced-panel');
|
|
|
|
function setAdvancedState(isOpen) {
|
|
if (!advancedToggle || !advancedPanel) {
|
|
return;
|
|
}
|
|
advancedToggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
|
|
advancedToggle.classList.toggle('is-open', isOpen);
|
|
advancedPanel.hidden = !isOpen;
|
|
}
|
|
|
|
if (advancedToggle && advancedPanel) {
|
|
advancedToggle.addEventListener('click', () => {
|
|
const expanded = advancedToggle.getAttribute('aria-expanded') === 'true';
|
|
setAdvancedState(!expanded);
|
|
});
|
|
setAdvancedState(false);
|
|
}
|
|
|
|
function openModal() {
|
|
modal.classList.add('is-open');
|
|
modal.setAttribute('aria-hidden', 'false');
|
|
if (promptField && !promptField.value && GroqAIGenerator.defaultPrompt) {
|
|
promptField.value = GroqAIGenerator.defaultPrompt;
|
|
}
|
|
resetContextToggles();
|
|
setTimeout(() => promptField.focus(), 50);
|
|
}
|
|
|
|
function closeModal() {
|
|
modal.classList.remove('is-open');
|
|
modal.setAttribute('aria-hidden', 'true');
|
|
statusField.textContent = '';
|
|
}
|
|
|
|
openButtons.forEach((button) => {
|
|
button.addEventListener('click', openModal);
|
|
});
|
|
|
|
if (closeButton) {
|
|
closeButton.addEventListener('click', closeModal);
|
|
}
|
|
|
|
modal.addEventListener('click', (event) => {
|
|
if (event.target === modal) {
|
|
closeModal();
|
|
}
|
|
});
|
|
|
|
document.addEventListener('keyup', (event) => {
|
|
if (event.key === 'Escape' && modal.classList.contains('is-open')) {
|
|
closeModal();
|
|
}
|
|
});
|
|
|
|
function setStatus(message, type = '') {
|
|
statusField.textContent = message;
|
|
statusField.setAttribute('data-status', type);
|
|
}
|
|
|
|
const loadingText = window.wp && wp.i18n ? wp.i18n.__('AI is bezig met schrijven...', 'groq-ai-product-text') : 'AI is bezig met schrijven...';
|
|
const retryText = window.wp && wp.i18n ? wp.i18n.__('Probeer het opnieuw of pas je prompt/context aan.', 'groq-ai-product-text') : 'Probeer het opnieuw of pas je prompt/context aan.';
|
|
|
|
function toggleLoading(isLoading) {
|
|
modal.classList.toggle('is-loading', isLoading);
|
|
if (isLoading) {
|
|
setStatus(loadingText, 'loading');
|
|
}
|
|
}
|
|
|
|
if (form) {
|
|
form.addEventListener('submit', (event) => {
|
|
event.preventDefault();
|
|
const prompt = promptField.value.trim();
|
|
|
|
const payload = new URLSearchParams();
|
|
payload.append('action', 'groq_ai_generate_text');
|
|
payload.append('nonce', GroqAIGenerator.nonce);
|
|
payload.append('prompt', prompt);
|
|
payload.append('post_id', GroqAIGenerator.postId || 0);
|
|
payload.append('context_fields', JSON.stringify(collectContextSelection()));
|
|
|
|
toggleLoading(true);
|
|
resultWrapper.hidden = true;
|
|
if (jsonCopyButton) {
|
|
jsonCopyButton.disabled = true;
|
|
}
|
|
resetFieldStatuses();
|
|
|
|
fetch(GroqAIGenerator.ajaxUrl, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
|
|
},
|
|
body: payload.toString(),
|
|
})
|
|
.then((response) => response.json())
|
|
.then((json) => {
|
|
if (!json.success) {
|
|
const errorMessage = json.data && json.data.message ? json.data.message : 'Onbekende fout';
|
|
throw new Error(errorMessage);
|
|
}
|
|
|
|
const fields = json.data.fields || {};
|
|
Object.keys(resultFields).forEach((key) => {
|
|
const entry = resultFields[key];
|
|
if (entry && entry.textarea) {
|
|
entry.textarea.value = fields[key] || '';
|
|
}
|
|
});
|
|
resultField.textContent = (json.data.raw || '').trim();
|
|
resultWrapper.hidden = false;
|
|
if (jsonCopyButton) {
|
|
jsonCopyButton.disabled = false;
|
|
}
|
|
setStatus('Structuur gegenereerd. Kopieer of vul velden in.', 'success');
|
|
})
|
|
.catch((error) => {
|
|
const message = error && error.message ? error.message : 'Er ging iets mis bij het genereren.';
|
|
setStatus(loadingText, 'error');
|
|
const fullMessage = `${loadingText} ${message}. ${retryText}`;
|
|
statusField.textContent = fullMessage;
|
|
})
|
|
.finally(() => {
|
|
toggleLoading(false);
|
|
});
|
|
});
|
|
}
|
|
|
|
function copyToClipboard(text) {
|
|
if (!text) {
|
|
return Promise.reject();
|
|
}
|
|
if (navigator.clipboard) {
|
|
return navigator.clipboard.writeText(text);
|
|
}
|
|
return new Promise((resolve, reject) => {
|
|
const temp = document.createElement('textarea');
|
|
temp.value = text;
|
|
document.body.appendChild(temp);
|
|
temp.select();
|
|
try {
|
|
document.execCommand('copy');
|
|
resolve();
|
|
} catch (err) {
|
|
reject(err);
|
|
} finally {
|
|
document.body.removeChild(temp);
|
|
}
|
|
});
|
|
}
|
|
|
|
function applyRankMathField(action, value) {
|
|
if (!action || !window.wp || !window.wp.data || typeof window.wp.data.dispatch !== 'function') {
|
|
return false;
|
|
}
|
|
const dispatcher = window.wp.data.dispatch('rank-math');
|
|
if (!dispatcher || typeof dispatcher[action] !== 'function') {
|
|
return false;
|
|
}
|
|
try {
|
|
dispatcher[action](value);
|
|
return true;
|
|
} catch (error) {
|
|
if (window.console && console.warn) {
|
|
console.warn('[GroqAI] Rank Math veld kon niet worden bijgewerkt', error);
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function setFieldStatus(fieldKey, state) {
|
|
const entry = resultFields[fieldKey];
|
|
if (!entry || !entry.status) {
|
|
return;
|
|
}
|
|
if (entry.statusTimer) {
|
|
clearTimeout(entry.statusTimer);
|
|
entry.statusTimer = null;
|
|
}
|
|
entry.status.textContent = '';
|
|
entry.status.classList.remove('is-success', 'is-error');
|
|
if (!state) {
|
|
return;
|
|
}
|
|
if (state === 'success') {
|
|
entry.status.textContent = '✓';
|
|
entry.status.classList.add('is-success');
|
|
} else if (state === 'error') {
|
|
entry.status.textContent = '!';
|
|
entry.status.classList.add('is-error');
|
|
}
|
|
entry.statusTimer = setTimeout(() => {
|
|
setFieldStatus(fieldKey, null);
|
|
}, 4000);
|
|
}
|
|
|
|
function resetFieldStatuses() {
|
|
Object.keys(resultFields).forEach((key) => setFieldStatus(key, null));
|
|
}
|
|
|
|
function shouldUseTinyMCE(selector) {
|
|
return selector === '#content' || selector === '#excerpt';
|
|
}
|
|
|
|
function applyTinyMCEContent(selector, value) {
|
|
if (!shouldUseTinyMCE(selector) || !window.tinymce) {
|
|
return false;
|
|
}
|
|
const editorId = selector.startsWith('#') ? selector.substring(1) : selector;
|
|
const editor = window.tinymce.get(editorId);
|
|
if (!editor) {
|
|
return false;
|
|
}
|
|
try {
|
|
editor.setContent(value);
|
|
editor.save();
|
|
return true;
|
|
} catch (error) {
|
|
if (window.console && console.warn) {
|
|
console.warn('[GroqAI] TinyMCE update mislukt voor', selector, error);
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function applyToTarget(fieldKey) {
|
|
const entry = resultFields[fieldKey];
|
|
if (!entry) {
|
|
return;
|
|
}
|
|
const value = entry.textarea ? entry.textarea.value : '';
|
|
let applied = false;
|
|
const fallbackSelectors = getFallbackSelectors(fieldKey);
|
|
|
|
const allSelectors = [];
|
|
if (entry.target) {
|
|
allSelectors.push(entry.target);
|
|
}
|
|
Array.prototype.push.apply(allSelectors, fallbackSelectors);
|
|
|
|
for (let i = 0; i < allSelectors.length && !applied; i += 1) {
|
|
const selector = allSelectors[i];
|
|
|
|
if (shouldUseTinyMCE(selector)) {
|
|
applied = applyTinyMCEContent(selector, value);
|
|
if (applied) {
|
|
break;
|
|
}
|
|
}
|
|
|
|
const target = document.querySelector(selector);
|
|
if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA')) {
|
|
target.value = value;
|
|
target.dispatchEvent(new Event('input', { bubbles: true }));
|
|
target.dispatchEvent(new Event('change', { bubbles: true }));
|
|
applied = true;
|
|
}
|
|
|
|
if (!applied && shouldUseTinyMCE(selector)) {
|
|
applied = applyTinyMCEContent(selector, value);
|
|
}
|
|
}
|
|
|
|
if (!applied && entry.rankMathAction) {
|
|
applied = applyRankMathField(entry.rankMathAction, value);
|
|
}
|
|
|
|
if (applied) {
|
|
setStatus(entry.label + ' ingevuld.', 'success');
|
|
setFieldStatus(fieldKey, 'success');
|
|
} else {
|
|
setStatus('Kon het veld niet automatisch invullen.', 'error');
|
|
setFieldStatus(fieldKey, 'error');
|
|
}
|
|
}
|
|
|
|
function getFallbackSelectors(fieldKey) {
|
|
switch (fieldKey) {
|
|
case 'meta_title':
|
|
return ['input[name="rank_math_title"]'];
|
|
case 'meta_description':
|
|
return ['textarea[name="rank_math_description"]'];
|
|
case 'focus_keywords':
|
|
return ['input[name="rank_math_focus_keyword"]'];
|
|
default:
|
|
return [];
|
|
}
|
|
}
|
|
|
|
modal.addEventListener('click', (event) => {
|
|
if (event.target.classList.contains('groq-ai-copy-field')) {
|
|
const field = event.target.getAttribute('data-field');
|
|
const entry = resultFields[field];
|
|
if (!entry || !entry.textarea) {
|
|
return;
|
|
}
|
|
copyToClipboard(entry.textarea.value)
|
|
.then(() => {
|
|
setStatus(entry.label + ' gekopieerd naar het klembord.', 'success');
|
|
})
|
|
.catch(() => {
|
|
setStatus('Kopiëren mislukt.', 'error');
|
|
});
|
|
}
|
|
|
|
if (event.target.classList.contains('groq-ai-apply-field')) {
|
|
const field = event.target.getAttribute('data-field');
|
|
applyToTarget(field);
|
|
}
|
|
});
|
|
|
|
if (jsonCopyButton) {
|
|
jsonCopyButton.addEventListener('click', () => {
|
|
const text = resultField ? resultField.textContent.trim() : '';
|
|
copyToClipboard(text)
|
|
.then(() => {
|
|
setStatus('JSON gekopieerd naar het klembord.', 'success');
|
|
})
|
|
.catch(() => {
|
|
setStatus('Kopiëren mislukt.', 'error');
|
|
});
|
|
});
|
|
}
|
|
|
|
function resetContextToggles() {
|
|
const defaults = GroqAIGenerator.contextDefaults || {};
|
|
contextToggles.forEach((toggle) => {
|
|
const key = toggle.getAttribute('data-field');
|
|
if (!key) {
|
|
return;
|
|
}
|
|
const state = Object.prototype.hasOwnProperty.call(defaults, key) ? !!defaults[key] : true;
|
|
toggle.checked = state;
|
|
});
|
|
}
|
|
|
|
function collectContextSelection() {
|
|
const selected = [];
|
|
contextToggles.forEach((toggle) => {
|
|
if (toggle.checked) {
|
|
selected.push(toggle.getAttribute('data-field'));
|
|
}
|
|
});
|
|
return selected;
|
|
}
|
|
})(jQuery);
|