| 1 |
/** |
| 2 |
* MxChat Chatbot block (plan 95dd1e). No build step — plain wp.element calls, |
| 3 |
* same idiom as assets/editor-assistant/sidebar.js. |
| 4 |
* |
| 5 |
* The editor canvas renders a STATIC placeholder only. Never render the live |
| 6 |
* chatbot here: it would fire the front-end script inside the editor and could |
| 7 |
* start a chat session for the editor. The real widget renders server-side via |
| 8 |
* the block's render_callback (includes/class-mxchat-block.php). |
| 9 |
*/ |
| 10 |
(function (wp) { |
| 11 |
'use strict'; |
| 12 |
|
| 13 |
if (!wp || !wp.blocks || !wp.element) { |
| 14 |
return; |
| 15 |
} |
| 16 |
|
| 17 |
var el = wp.element.createElement; |
| 18 |
var __ = wp.i18n.__; |
| 19 |
var blockEditor = wp.blockEditor || wp.editor; |
| 20 |
var InspectorControls = blockEditor && blockEditor.InspectorControls; |
| 21 |
var useBlockProps = blockEditor && blockEditor.useBlockProps; |
| 22 |
var PanelBody = wp.components.PanelBody; |
| 23 |
var RadioControl = wp.components.RadioControl; |
| 24 |
var SelectControl = wp.components.SelectControl; |
| 25 |
|
| 26 |
// Localized by MxChat_Block::register_block(). Non-empty only when the |
| 27 |
// Multi-Bot add-on is active; '' is the "Default Bot" (follow page settings). |
| 28 |
var bots = (window.MxChatBlockData && window.MxChatBlockData.bots) || []; |
| 29 |
|
| 30 |
function botLabel(botId) { |
| 31 |
for (var i = 0; i < bots.length; i++) { |
| 32 |
if (bots[i].value === botId) { |
| 33 |
return bots[i].label; |
| 34 |
} |
| 35 |
} |
| 36 |
return __('Default Bot', 'mxchat'); |
| 37 |
} |
| 38 |
|
| 39 |
var chatIcon = el( |
| 40 |
'svg', |
| 41 |
{ viewBox: '0 0 1120 1120', xmlns: 'http://www.w3.org/2000/svg', 'aria-hidden': 'true', focusable: 'false' }, |
| 42 |
el('path', { |
| 43 |
fillRule: 'evenodd', |
| 44 |
clipRule: 'evenodd', |
| 45 |
fill: 'currentColor', |
| 46 |
d: 'M252 434C252 372.144 302.144 322 364 322H770C831.856 322 882 372.144 882 434V614.459L804.595 585.816C802.551 585.06 800.94 583.449 800.184 581.405L763.003 480.924C760.597 474.424 751.403 474.424 748.997 480.924L711.816 581.405C711.06 583.449 709.449 585.06 707.405 585.816L606.924 622.997C600.424 625.403 600.424 634.597 606.924 637.003L707.405 674.184C709.449 674.94 711.06 676.551 711.816 678.595L740.459 756H629.927C629.648 756.476 629.337 756.945 628.993 757.404L578.197 825.082C572.597 832.543 561.403 832.543 555.803 825.082L505.007 757.404C504.663 756.945 504.352 756.476 504.073 756H364C302.144 756 252 705.856 252 644V434ZM633.501 471.462C632.299 468.212 627.701 468.212 626.499 471.462L619.252 491.046C618.874 492.068 618.068 492.874 617.046 493.252L597.462 500.499C594.212 501.701 594.212 506.299 597.462 507.501L617.046 514.748C618.068 515.126 618.874 515.932 619.252 516.954L626.499 536.538C627.701 539.788 632.299 539.788 633.501 536.538L640.748 516.954C641.126 515.932 641.932 515.126 642.954 514.748L662.538 507.501C665.788 506.299 665.788 501.701 662.538 500.499L642.954 493.252C641.932 492.874 641.126 492.068 640.748 491.046L633.501 471.462Z' |
| 47 |
}), |
| 48 |
el('path', { |
| 49 |
fill: 'currentColor', |
| 50 |
d: 'M771.545 755.99C832.175 755.17 881.17 706.175 881.99 645.545L804.595 674.184C802.551 674.94 800.94 676.551 800.184 678.595L771.545 755.99Z' |
| 51 |
}) |
| 52 |
); |
| 53 |
|
| 54 |
wp.blocks.registerBlockType('mxchat/chatbot', { |
| 55 |
title: __('MxChat Chatbot', 'mxchat'), |
| 56 |
description: __('Place the chatbot on this page — inline in the content, or as a floating bubble.', 'mxchat'), |
| 57 |
icon: chatIcon, |
| 58 |
category: 'widgets', |
| 59 |
keywords: [__('chat', 'mxchat'), __('chatbot', 'mxchat'), __('ai', 'mxchat')], |
| 60 |
supports: { html: false }, |
| 61 |
attributes: { |
| 62 |
displayMode: { type: 'string', default: 'inline' }, |
| 63 |
botId: { type: 'string', default: '' } |
| 64 |
}, |
| 65 |
example: {}, |
| 66 |
|
| 67 |
edit: function (props) { |
| 68 |
var displayMode = props.attributes.displayMode || 'inline'; |
| 69 |
var botId = props.attributes.botId || ''; |
| 70 |
|
| 71 |
var modeText = displayMode === 'floating' |
| 72 |
? __('Floating bubble', 'mxchat') |
| 73 |
: __('Inline (in the page)', 'mxchat'); |
| 74 |
var metaText = bots.length > 0 |
| 75 |
? modeText + ' · ' + botLabel(botId) |
| 76 |
: modeText; |
| 77 |
|
| 78 |
var controls = [ |
| 79 |
el(RadioControl, { |
| 80 |
key: 'mode', |
| 81 |
label: __('Display mode', 'mxchat'), |
| 82 |
selected: displayMode, |
| 83 |
options: [ |
| 84 |
{ value: 'inline', label: __('Inline (in the page)', 'mxchat') }, |
| 85 |
{ value: 'floating', label: __('Floating bubble', 'mxchat') } |
| 86 |
], |
| 87 |
help: displayMode === 'floating' |
| 88 |
? __('Renders the familiar corner launcher. If the chatbot is also set to display automatically on this page, the usual single-widget rules apply.', 'mxchat') |
| 89 |
: __('The chat box renders right here in the content.', 'mxchat'), |
| 90 |
onChange: function (value) { |
| 91 |
props.setAttributes({ displayMode: value === 'floating' ? 'floating' : 'inline' }); |
| 92 |
} |
| 93 |
}) |
| 94 |
]; |
| 95 |
|
| 96 |
// Bot picker only when Multi-Bot is active — no free-text bot id |
| 97 |
// anywhere (a typo would mean a silently wrong bot). |
| 98 |
if (bots.length > 0) { |
| 99 |
controls.push(el(SelectControl, { |
| 100 |
key: 'bot', |
| 101 |
label: __('Bot', 'mxchat'), |
| 102 |
value: botId, |
| 103 |
options: bots, |
| 104 |
help: __('Default Bot follows this page’s chatbot settings.', 'mxchat'), |
| 105 |
onChange: function (value) { |
| 106 |
props.setAttributes({ botId: value || '' }); |
| 107 |
} |
| 108 |
})); |
| 109 |
} |
| 110 |
|
| 111 |
var placeholderProps = { className: 'mxchat-block-placeholder' }; |
| 112 |
if (useBlockProps) { |
| 113 |
placeholderProps = useBlockProps(placeholderProps); |
| 114 |
} |
| 115 |
|
| 116 |
return el( |
| 117 |
wp.element.Fragment, |
| 118 |
null, |
| 119 |
InspectorControls |
| 120 |
? el(InspectorControls, null, el(PanelBody, { title: __('Placement', 'mxchat'), initialOpen: true }, controls)) |
| 121 |
: null, |
| 122 |
el( |
| 123 |
'div', |
| 124 |
placeholderProps, |
| 125 |
el('span', { className: 'mxchat-block-placeholder-icon' }, chatIcon), |
| 126 |
el( |
| 127 |
'span', |
| 128 |
{ className: 'mxchat-block-placeholder-text' }, |
| 129 |
el('strong', null, __('MxChat Chatbot', 'mxchat')), |
| 130 |
el('span', { className: 'mxchat-block-placeholder-meta' }, metaText) |
| 131 |
) |
| 132 |
) |
| 133 |
); |
| 134 |
}, |
| 135 |
|
| 136 |
// Dynamic block: markup comes from the render_callback on the front end. |
| 137 |
save: function () { |
| 138 |
return null; |
| 139 |
} |
| 140 |
}); |
| 141 |
}(window.wp)); |
| 142 |
|
