const { registerPlugin } = wp.plugins;
const { PluginToolbarButton } = wp.editPost;
const { addFilter } = wp.hooks;
const { Fragment, useEffect } = wp.element;
const { BlockControls } = wp.blockEditor;
const { Button, ToolbarGroup, ToolbarButton } = wp.components;
const { __ } = wp.i18n;
let soft_ai_icon = (<svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 151.668 151.616"><defs><linearGradient id="b"><stop offset="0" style={{ stopColor: "#0e44ac", stopOpacity: 1 }} /><stop offset="1" style={{stopColor: "#664ef1", stopOpacity: 1}}/></linearGradient><linearGradient id="a"><stop offset="0" style={{stopColor:"#0e44ac", stopOpacity:1}}/><stop offset="1" style={{stopColor: "#664ef1", stopOpacity:1}}/></linearGradient><linearGradient xlinkHref="#a" id="c" x1="10.148" x2="116.734" y1="62.229" y2="62.229" gradientUnits="userSpaceOnUse"/><linearGradient xlinkHref="#b" id="d" x1="11.811" x2="115.07" y1="62.229" y2="62.229" gradientUnits="userSpaceOnUse" /></defs><path d="M64.039 88.243c-8.629.199-42.93 30.806-49.172 24.845-6.242-5.96 22.757-41.633 22.559-50.261-.198-8.63-30.806-42.93-24.845-49.172s41.633 22.757 50.262 22.559 42.93-30.806 49.172-24.845-22.758 41.633-22.56 50.262 30.807 42.93 24.846 49.171c-5.962 6.242-41.633-22.757-50.262-22.559z" style={{fill: "none", stroke: "url(#c)", strokeWidth: 10.9, strokeDasharray: "none", strokeDashoffset: 0.8655, strokeOpacity: 1,}} transform="rotate(-44.365 86.218 53.877)"/><path d="M64.039 88.243c-8.629.199-42.93 30.806-49.172 24.845-6.242-5.96 22.757-41.633 22.559-50.261-.198-8.63-30.806-42.93-24.845-49.172s41.633 22.757 50.262 22.559 42.93-30.806 49.172-24.845-22.758 41.633-22.56 50.262 30.807 42.93 24.846 49.171c-5.962 6.242-41.633-22.757-50.262-22.559" style={{fill: "url(#d)", stroke: "none", strokeWidth: 1.431, strokeDasharray: "1.431,2.862", strokeDashoffset: 0.7155,}} transform="matrix(.2651 -.25928 .25928 .2651 92.639 125.492)"/></svg>);
// Function to add custom toolbar button
const soft_ai_button = (BlockEdit) => (props) => {
return (
<Fragment>
<BlockControls>
<ToolbarGroup>
<ToolbarButton
icon={soft_ai_icon}
label={__('Ask AI', 'softaculous')}
onClick={() => {
if(jQuery('.spro-chat').css('right') != '0px'){
jQuery('.spro-chat').css({'right': 0, 'visibility': 'visible'});
let response_div = jQuery('.spro-chat-response-section .spro-chat-response');
// Remove the chat response if the previous response was same as well
if(response_div.length > 0 && response_div.eq(response_div.length - 1).data('type') == 'content'){
response_div.eq(response_div.length - 1).remove();
}
jQuery('.spro-prompt-shortcuts').css('display', 'flex');
jQuery('.spro-ai-chat-overlay').show();
jQuery('.spro-chat-startup-placeholder').hide();
soft_handle_ai_content(props);
return;
}
jQuery('.spro-chat').css({'right': '-25vw'});
}}
/>
</ToolbarGroup>
</BlockControls>
<BlockEdit {...props} />
</Fragment>
);
};
// Hook to add the custom toolbar button
addFilter(
'editor.BlockEdit',
'softaculous/ai',
soft_ai_button
);
const SoftAIToolBarBtn = () => {
useEffect(() => {
var button = jQuery('#soft-ai-toolbar-btn').closest('div');
var g = jQuery('.editor-header__settings');
if (g.length < 1) {
return;
}
button.detach();
g.prepend(button);
button.show();
jQuery('#soft-ai-toolbar-btn').off('click').click(function(){
console.log('Hello');
if(jQuery('.spro-chat').css('right') != '0px'){
jQuery('.spro-chat').css({'right': 0, 'visibility': 'visible'});
jQuery('.spro-prompt-shortcuts').hide();
jQuery('.spro-ai-chat-overlay').show();
let response_div = jQuery('.spro-chat-response-section .spro-chat-response');
// Remove the chat response if the previous response was same as well
if(response_div.length > 0 && response_div.eq(response_div.length - 1).data('type') == 'content'){
response_div.eq(response_div.length - 1).remove();
}
// Show the suggestions only when the chat is empty.
if(jQuery('.spro-chat-response-section .spro-chat-response').length < 1){
jQuery('.spro-chat-startup-placeholder').show();
} else {
jQuery('.spro-prompt-shortcuts').show();
}
soft_handle_ai_content();
return;
}
jQuery('.spro-chat').css({'right': '-25vw'});
});
});
return(<Button id="soft-ai-toolbar-btn" aria-label="Ask AI" style={{'height': 'auto', 'padding': '4px 8px', 'font-size': '13px', 'display': 'flex', 'align-items': 'center', 'width': 'max-content'}}>{soft_ai_icon}</Button>);
}
registerPlugin('soft-ai-sidebar', {
render : SoftAIToolBarBtn,
icon : {soft_ai_icon}
})