Your IP : 3.141.7.240
/* global WPFormsAIChatHTMLElement, WPFormsBuilder */
/**
* The WPForms AI chat element.
*
* Choices helpers module.
*
* @since 1.9.1
*
* @param {WPFormsAIChatHTMLElement} chat The chat element.
*
* @return {Function} The app cloning function.
*/
export default function( chat ) { // eslint-disable-line max-lines-per-function
/**
* The `choices` mode helpers object.
*
* @since 1.9.1
*/
return {
/**
* Get the `choices` answer based on AI response data.
*
* @since 1.9.1
*
* @param {Object} response The response data.
*
* @return {string} Answer HTML markup.
*/
getAnswer( response ) {
if ( response.choices?.length < 1 ) {
return '';
}
const li = [];
for ( const i in response.choices ) {
li.push( `
<li class="wpforms-ai-chat-choices-item">
${ chat.htmlSpecialChars( response.choices[ i ] ) }
</li>
` );
}
let answerHtml = `
<h4>${ chat.htmlSpecialChars( response.heading ?? '' ) }</h4>
<ol>
${ li.join( '' ) }
</ol>
`;
// Add footer to the first answer only.
if ( ! chat.sessionId ) {
answerHtml += `<span>${ chat.modeStrings.footer }</span>`;
}
return answerHtml;
},
/**
* Get the answer pre-buttons HTML markup.
*
* @since 1.9.1
*
* @return {string} The answer pre-buttons HTML markup.
*/
getAnswerButtonsPre() {
return `
<button type="button" class="wpforms-ai-chat-choices-insert wpforms-btn-sm wpforms-btn-orange" >
<span>${ chat.modeStrings.insert }</span>
</button>
`;
},
/**
* Get the warning message HTML markup.
*
* @since 1.9.1
*
* @return {string} The warning message HTML markup.
*/
getWarningMessage() {
// Trigger event before warning message insert.
chat.triggerEvent( 'wpformsAIModalBeforeWarningMessageInsert', { fieldId: chat.fieldId } );
return `<div class="wpforms-ai-chat-divider"></div>
<div class="wpforms-chat-item-warning">
<div class="wpforms-chat-item-warning-content">
<span>${ chat.modeStrings.warning }</span>
</div>
</div>`;
},
/**
* If the field has default choices, the welcome screen is active.
*
* @since 1.9.1
*
* @return {boolean} True if the field has default choices, false otherwise.
*/
isWelcomeScreen() {
const items = document.getElementById( `wpforms-field-option-row-${ chat.fieldId }-choices` )
.querySelectorAll( 'li input.label' );
if ( items.length === 1 && ! items[ 0 ].value.trim() ) {
return true;
}
if ( items.length > 3 ) {
return false;
}
const defaults = Object.values( chat.modeStrings.defaults );
for ( let i = 0; i < items.length; i++ ) {
if ( ! defaults.includes( items[ i ].value ) ) {
return false;
}
}
return true;
},
/**
* Add the `choices` answer.
*
* @since 1.9.1
*
* @param {HTMLElement} element The answer element.
*/
addedAnswer( element ) {
const button = element.querySelector( '.wpforms-ai-chat-choices-insert' );
// Listen to the button click event.
button?.addEventListener( 'click', this.insertButtonClick.bind( this ) );
},
/**
* Click on the Use Choices button.
*
* @since 1.9.1
*
* @param {Event} e The event object.
*/
insertButtonClick( e ) {
const button = e.target;
const answer = button.closest( '.wpforms-chat-item.wpforms-chat-item-choices' );
const responseId = answer?.getAttribute( 'data-response-id' );
const choicesList = answer?.querySelector( 'ol' );
const items = choicesList.querySelectorAll( '.wpforms-ai-chat-choices-item' );
const choiceItems = [];
// Get choices data.
for ( const i in items ) {
if ( ! items.hasOwnProperty( i ) || ! items[ i ].textContent ) {
continue;
}
choiceItems.push( items[ i ].textContent.trim() );
}
// Rate the response.
chat.wpformsAiApi.rate( true, responseId );
// Replace field choices.
this.replaceChoices( choiceItems );
},
/**
* Replace field choices.
*
* @since 1.9.1
*
* @param {Array} choices Choices array.
*/
replaceChoices( choices ) {
const choicesOptionRow = document.getElementById( `wpforms-field-option-row-${ chat.fieldId }-choices` );
const choicesList = choicesOptionRow.querySelector( 'ul.choices-list' );
const choiceRow = choicesList.querySelector( 'li:first-child' ).cloneNode( true );
choiceRow.innerHTML = choiceRow.innerHTML.replace( /\[choices\]\[\d+\]/g, `[choices][{{key}}]` );
// Clear existing choices.
choicesList.innerHTML = '';
// Add new choices.
for ( const i in choices ) {
const key = ( Number( i ) + 1 ).toString();
const choice = choices[ i ];
// Clone choice item element.
let li = choiceRow.cloneNode( true );
// Get updated single choice item.
li = this.getUpdatedSingleChoiceItem( li, key, choice );
// Add new choice item.
choicesList.appendChild( li );
}
// Update data-next-id attribute for choices list.
choicesList.setAttribute( 'data-next-id', choices.length + 1 );
// Update field preview.
const fieldOptions = document.getElementById( `wpforms-field-option-${ chat.fieldId }` );
const fieldType = fieldOptions.querySelector( 'input.wpforms-field-option-hidden-type' )?.value;
WPFormsBuilder.fieldChoiceUpdate( fieldType, chat.fieldId, choices.length );
WPFormsBuilder.triggerBuilderEvent( 'wpformsFieldChoiceAdd' );
// Trigger event after choices insert.
chat.triggerEvent( 'wpformsAIModalAfterChoicesInsert', { fieldId: chat.fieldId } );
},
/**
* Get updated single choice item.
*
* @since 1.9.1
*
* @param {HTMLElement} li Choice item element.
* @param {string} key Choice key.
* @param {string} choice Choice value.
*
* @return {HTMLElement} The updated choice item.
*/
getUpdatedSingleChoiceItem( li, key, choice ) {
li.setAttribute( 'data-key', key.toString() );
// Update choice item inputs name attributes.
li.innerHTML = li.innerHTML.replaceAll( '{{key}}', key );
// Escape HTML special characters.
choice = chat.htmlSpecialChars( choice );
const inputDefault = li.querySelector( 'input.default' );
inputDefault.removeAttribute( 'checked' );
// Set label
const inputLabel = li.querySelector( 'input.label' );
inputLabel.value = choice;
inputLabel.setAttribute( 'value', choice );
// Set value.
const inputValue = li.querySelector( 'input.value' );
inputValue.value = choice;
inputValue.setAttribute( 'value', choice );
// Reset image upload.
const imageUpload = li.querySelector( '.wpforms-image-upload' );
const inputImage = imageUpload.querySelector( 'input.source' );
inputImage.value = '';
inputImage.setAttribute( 'value', '' );
imageUpload.querySelector( '.preview' ).innerHTML = '';
imageUpload.querySelector( '.wpforms-image-upload-add' ).style.display = 'block';
// Reset icon choice.
const iconSelect = li.querySelector( '.wpforms-icon-select' );
iconSelect.querySelector( '.ic-fa-preview' ).setAttribute( 'class', 'ic-fa-preview ic-fa-regular ic-fa-face-smile' );
iconSelect.querySelector( 'input.source-icon' ).value = 'face-smile';
iconSelect.querySelector( 'input.source-icon-style' ).value = 'regular';
return li;
},
};
}