| 1 |
<?php |
| 2 |
if (!defined('ABSPATH')) { |
| 3 |
exit; // Exit if accessed directly |
| 4 |
} |
| 5 |
|
| 6 |
class MxChat_Public { |
| 7 |
private $options; |
| 8 |
|
| 9 |
public function __construct() { |
| 10 |
$this->options = get_option('mxchat_options', $this->get_default_options()); // Ensure defaults are used |
| 11 |
add_action('wp_enqueue_scripts', array($this, 'register_public_scripts_styles')); |
| 12 |
add_shortcode('mxchat_chatbot', array($this, 'render_chatbot_shortcode')); |
| 13 |
add_action('wp_footer', array($this, 'append_chatbot_to_body')); |
| 14 |
} |
| 15 |
|
| 16 |
private function get_default_options() { |
| 17 |
return array( |
| 18 |
'user_message_bg_color' => '#fff', |
| 19 |
'user_message_font_color' => '#212121', |
| 20 |
'bot_message_bg_color' => '#212121', |
| 21 |
'bot_message_font_color' => '#fff', |
| 22 |
'top_bar_bg_color' => '#212121', |
| 23 |
'send_button_font_color' => '#212121', |
| 24 |
'close_button_color' => '#fff', |
| 25 |
'chatbot_bg_color' => '#fff', |
| 26 |
'chatbot_background_color' => '#212121', |
| 27 |
'icon_color' => '#fff', |
| 28 |
'chat_input_font_color' => '#212121', |
| 29 |
'api_key' => '', |
| 30 |
'system_prompt_instructions' => '[EXAMPLE INSTRUCTIONS] You are an AI Chatbot assistant for this website. The primary subject you should focus on is [insert proper subject here]. Your main goal is to assist visitors with questions related to this specific topic. Here are some key things to keep in mind: |
| 31 |
- Your name is [Chatbot Name]. Always introduce yourself as this name when appropriate. |
| 32 |
- Stay focused on topics related to [insert proper subject here]. If a visitor asks about an unrelated topic, politely redirect the conversation to how you can assist them with this subject. If there is an exception topic (e.g., "parking") that you should assist with, you may do so if instructed. |
| 33 |
- When appropriate, highlight the benefits of [insert proper subject here]. Offer to guide visitors to relevant pages or provide them with more information. |
| 34 |
- If a visitor asks for a purchase link or further information, provide them with this link: [Insert Purchase Link Here]. Always ensure that the link is relevant and directly related to the website\'s offerings. |
| 35 |
- Keep your responses short, concise, and to the point. Provide clear and direct answers suitable for a chatbot interaction. |
| 36 |
- If you reference specific content, provide a hyperlink to the relevant page using hypertext. Avoid including links that do not directly relate to the content or answer the visitor\'s query. |
| 37 |
- Provide answers based on the knowledge available to you. If you do not have an answer to a specific question, let the visitor know that you don’t have the information and suggest where they might find it or offer to help with something else.', |
| 38 |
'model' => 'gpt-3.5-turbo', |
| 39 |
'rate_limit' => '100', |
| 40 |
'rate_limit_message' => 'Rate limit exceeded. Please try again later.', |
| 41 |
'top_bar_title' => 'MxChat: Basic', |
| 42 |
'intro_message' => 'Hello! How can I assist you today?', |
| 43 |
'append_to_body' => 'on' |
| 44 |
); |
| 45 |
} |
| 46 |
|
| 47 |
public function register_public_scripts_styles() { |
| 48 |
$chat_style_version = '1.4'; // Replace with your actual version |
| 49 |
$chat_script_version = '1.4'; // Replace with your actual version |
| 50 |
|
| 51 |
// Correct path to the CSS file |
| 52 |
wp_register_style( |
| 53 |
'mxchat-chat-css', |
| 54 |
plugin_dir_url(__FILE__) . '../css/chat-style.css', // Correct path to css directory |
| 55 |
array(), |
| 56 |
$chat_style_version |
| 57 |
); |
| 58 |
|
| 59 |
// Correct path to the JS file |
| 60 |
wp_register_script( |
| 61 |
'mxchat-chat-js', |
| 62 |
plugin_dir_url(__FILE__) . '../js/chat-script.js', // Correct path to js directory |
| 63 |
array('jquery'), // Ensure jQuery is listed as a dependency |
| 64 |
$chat_script_version, |
| 65 |
true // Load in the footer |
| 66 |
); |
| 67 |
} |
| 68 |
|
| 69 |
public function enqueue_public_scripts_styles() { |
| 70 |
wp_enqueue_style('mxchat-chat-css'); |
| 71 |
wp_enqueue_script('mxchat-chat-js', plugin_dir_url(__FILE__) . 'js/chat-script.js', array('jquery', 'complianz'), '1.0.0', true); |
| 72 |
|
| 73 |
// Fetch options from the database |
| 74 |
$this->options = get_option('mxchat_options'); |
| 75 |
|
| 76 |
// Localize script with necessary data, including nonce |
| 77 |
wp_localize_script('mxchat-chat-js', 'mxchatChat', array( |
| 78 |
'ajax_url' => admin_url('admin-ajax.php'), |
| 79 |
'nonce' => wp_create_nonce('mxchat_chat_nonce'), // Correct nonce creation |
| 80 |
'link_target' => isset($this->options['link_target_toggle']) ? $this->options['link_target_toggle'] : 'off', |
| 81 |
'rate_limit_message' => isset($this->options['rate_limit_message']) ? $this->options['rate_limit_message'] : 'Rate limit exceeded. Please try again later.', |
| 82 |
'complianz_toggle' => isset($this->options['complianz_toggle']) && $this->options['complianz_toggle'] === 'on' ? true : false, |
| 83 |
'user_message_bg_color' => isset($this->options['user_message_bg_color']) ? $this->options['user_message_bg_color'] : '#fff', |
| 84 |
'user_message_font_color' => isset($this->options['user_message_font_color']) ? $this->options['user_message_font_color'] : '#212121', |
| 85 |
'bot_message_bg_color' => isset($this->options['bot_message_bg_color']) ? $this->options['bot_message_bg_color'] : '#212121', |
| 86 |
'bot_message_font_color' => isset($this->options['bot_message_font_color']) ? $this->options['bot_message_font_color'] : '#fff', |
| 87 |
'top_bar_bg_color' => isset($this->options['top_bar_bg_color']) ? $this->options['top_bar_bg_color'] : '#212121', |
| 88 |
'send_button_font_color' => isset($this->options['send_button_font_color']) ? $this->options['send_button_font_color'] : '#212121', |
| 89 |
'close_button_color' => isset($this->options['close_button_color']) ? $this->options['close_button_color'] : '#fff', |
| 90 |
'chatbot_background_color' => isset($this->options['chatbot_background_color']) ? $this->options['chatbot_background_color'] : '#212121', |
| 91 |
'chatbot_bg_color' => isset($this->options['chatbot_bg_color']) ? $this->options['chatbot_bg_color'] : '#fff', |
| 92 |
'icon_color' => isset($this->options['icon_color']) ? $this->options['icon_color'] : '#fff', |
| 93 |
'chat_input_font_color' => isset($this->options['chat_input_font_color']) ? $this->options['chat_input_font_color'] : '#212121', |
| 94 |
// Add chat_persistence_toggle to the array |
| 95 |
'chat_persistence_toggle' => isset($this->options['chat_persistence_toggle']) ? $this->options['chat_persistence_toggle'] : 'off', |
| 96 |
)); |
| 97 |
} |
| 98 |
|
| 99 |
|
| 100 |
public function append_chatbot_to_body() { |
| 101 |
$options = get_option('mxchat_options', $this->get_default_options()); // Use default options if not set |
| 102 |
if (isset($options['append_to_body']) && $options['append_to_body'] === 'on') { |
| 103 |
echo do_shortcode('[mxchat_chatbot floating="yes"]'); |
| 104 |
} |
| 105 |
} |
| 106 |
|
| 107 |
private function mxchat_get_user_identifier() { |
| 108 |
return sanitize_text_field($_SERVER['REMOTE_ADDR']); |
| 109 |
} |
| 110 |
|
| 111 |
public function render_chatbot_shortcode($atts) { |
| 112 |
$this->enqueue_public_scripts_styles(); // Enqueue the styles and scripts here |
| 113 |
|
| 114 |
$attributes = shortcode_atts(array( |
| 115 |
'floating' => 'yes', |
| 116 |
), $atts); |
| 117 |
|
| 118 |
$is_floating = $attributes['floating'] === 'yes'; |
| 119 |
|
| 120 |
$this->options = get_option('mxchat_options', $this->get_default_options()); // Use default options if not set |
| 121 |
|
| 122 |
$bg_color = $this->options['chatbot_background_color'] ?? '#fff'; |
| 123 |
$user_message_bg_color = $this->options['user_message_bg_color'] ?? '#fff'; |
| 124 |
$user_message_font_color = $this->options['user_message_font_color'] ?? '#212121'; |
| 125 |
$bot_message_bg_color = $this->options['bot_message_bg_color'] ?? '#212121'; |
| 126 |
$bot_message_font_color = $this->options['bot_message_font_color'] ?? '#fff'; |
| 127 |
$top_bar_bg_color = $this->options['top_bar_bg_color'] ?? '#212121'; |
| 128 |
$send_button_font_color = $this->options['send_button_font_color'] ?? '#212121'; |
| 129 |
$intro_message = $this->options['intro_message'] ?? 'Hello! How can I assist you today?'; |
| 130 |
$top_bar_title = $this->options['top_bar_title'] ?? 'MxChat: Basic'; |
| 131 |
$chatbot_background_color = $this->options['chatbot_background_color'] ?? '#212121'; |
| 132 |
$icon_color = $this->options['icon_color'] ?? '#fff'; |
| 133 |
$chat_input_font_color = $this->options['chat_input_font_color'] ?? '#212121'; |
| 134 |
$close_button_color = $this->options['close_button_color'] ?? '#fff'; |
| 135 |
$chatbot_bg_color = $this->options['chatbot_bg_color'] ?? '#fff'; |
| 136 |
$pre_chat_message = isset($this->options['pre_chat_message']) ? sanitize_text_field(trim($this->options['pre_chat_message'])) : ''; |
| 137 |
$user_id = sanitize_key($this->mxchat_get_user_identifier()); |
| 138 |
$transient_key = 'mxchat_pre_chat_message_dismissed_' . $user_id; |
| 139 |
$input_copy = isset($this->options['input_copy']) ? esc_attr($this->options['input_copy']) : 'How can I assist?'; |
| 140 |
$rate_limit_message = isset($this->options['rate_limit_message']) ? esc_attr($this->options['rate_limit_message']) : 'Rate limit exceeded. Please try again later.'; |
| 141 |
|
| 142 |
$privacy_toggle = isset($this->options['privacy_toggle']) && $this->options['privacy_toggle'] === 'on'; |
| 143 |
$privacy_text = isset($this->options['privacy_text']) ? wp_kses_post($this->options['privacy_text']) : 'By chatting, you agree to our <a href="https://example.com/privacy-policy" target="_blank">privacy policy</a>.'; |
| 144 |
|
| 145 |
$popular_question_1 = isset($this->options['popular_question_1']) ? esc_html($this->options['popular_question_1']) : ''; |
| 146 |
$popular_question_2 = isset($this->options['popular_question_2']) ? esc_html($this->options['popular_question_2']) : ''; |
| 147 |
$popular_question_3 = isset($this->options['popular_question_3']) ? esc_html($this->options['popular_question_3']) : ''; |
| 148 |
|
| 149 |
|
| 150 |
ob_start(); |
| 151 |
|
| 152 |
// Check if floating attribute is set to 'yes' and wrap accordingly |
| 153 |
if ($is_floating) { |
| 154 |
echo '<div id="floating-chatbot" class="hidden">'; |
| 155 |
} |
| 156 |
|
| 157 |
echo '<div id="mxchat-chatbot-wrapper">'; |
| 158 |
echo ' <div class="chatbot-top-bar" id="exit-chat-button" style="background: ' . esc_attr($top_bar_bg_color) . ';">'; |
| 159 |
echo ' <p class="chatbot-title" style="color: ' . esc_attr($close_button_color) . ';">' . esc_html($top_bar_title) . '</p>'; |
| 160 |
echo ' <button class="exit-chat" type="button" aria-label="Minimize" style="color: ' . esc_attr($close_button_color) . ';">'; |
| 161 |
echo ' <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" id="ic-minimize" style="fill: ' . esc_attr($close_button_color) . ';">'; |
| 162 |
echo ' <path d="M0 0h24v24H0z" fill="none"></path>'; |
| 163 |
echo ' <path d="M11.67 3.87L9.9 2.1 0 12l9.9 9.9 1.77-1.77L3.54 12z"></path>'; |
| 164 |
echo ' </svg>'; |
| 165 |
echo ' <span>Minimize</span>'; |
| 166 |
echo ' </button>'; |
| 167 |
echo ' </div>'; |
| 168 |
echo ' <div id="mxchat-chatbot" style="background-color: ' . esc_attr($chatbot_bg_color) . '">'; |
| 169 |
echo ' <div id="chat-container">'; |
| 170 |
echo ' <div id="chat-box">'; |
| 171 |
echo ' <div class="bot-message" style="background: ' . esc_attr($bot_message_bg_color) . '; color: ' . esc_attr($bot_message_font_color) . ';">'; |
| 172 |
echo esc_html($intro_message); |
| 173 |
echo ' </div>'; |
| 174 |
echo ' </div>'; |
| 175 |
|
| 176 |
// Add the popular questions section |
| 177 |
echo '<div id="mxchat-popular-questions">'; |
| 178 |
echo ' <div class="mxchat-popular-questions-container">'; |
| 179 |
|
| 180 |
if (!empty($popular_question_1)) { |
| 181 |
echo '<button class="mxchat-popular-question">' . esc_html($popular_question_1) . '</button>'; |
| 182 |
} |
| 183 |
if (!empty($popular_question_2)) { |
| 184 |
echo '<button class="mxchat-popular-question">' . esc_html($popular_question_2) . '</button>'; |
| 185 |
} |
| 186 |
if (!empty($popular_question_3)) { |
| 187 |
echo '<button class="mxchat-popular-question">' . esc_html($popular_question_3) . '</button>'; |
| 188 |
} |
| 189 |
|
| 190 |
echo ' </div>'; |
| 191 |
echo '</div>'; |
| 192 |
|
| 193 |
echo ' <div id="input-container">'; |
| 194 |
echo ' <input type="text" id="chat-input" placeholder="' . esc_attr($input_copy) . '" style="color: ' . esc_attr($chat_input_font_color) . ';">'; |
| 195 |
echo ' <button id="send-button">'; |
| 196 |
echo ' <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="fill: ' . esc_attr($send_button_font_color) . ';">'; |
| 197 |
echo ' <path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z"/>'; |
| 198 |
echo ' </svg>'; |
| 199 |
echo ' </button>'; |
| 200 |
echo ' </div>'; |
| 201 |
echo ' <div class="chatbot-footer">'; |
| 202 |
|
| 203 |
// Output the privacy notice if enabled |
| 204 |
if ($privacy_toggle && !empty($privacy_text)) { |
| 205 |
echo '<p class="privacy-notice">' . $privacy_text . '</p>'; |
| 206 |
} |
| 207 |
|
| 208 |
echo ' </div>'; |
| 209 |
echo ' </div>'; |
| 210 |
echo ' </div>'; |
| 211 |
echo '</div>'; |
| 212 |
|
| 213 |
if ($is_floating) { |
| 214 |
echo '</div>'; |
| 215 |
|
| 216 |
if (!empty($pre_chat_message) && !get_transient($transient_key)) { |
| 217 |
echo '<div id="pre-chat-message">'; |
| 218 |
echo esc_html($pre_chat_message); |
| 219 |
echo '<button class="close-pre-chat-message" aria-label="Close">×</button>'; |
| 220 |
echo '</div>'; |
| 221 |
} |
| 222 |
|
| 223 |
echo '<div class="hidden" id="floating-chatbot-button" style="background: ' . esc_attr($chatbot_background_color) . '; color: ' . esc_attr($send_button_font_color) . ';">'; |
| 224 |
echo ' <svg id="widget_icon_10" style="height: 48px; width: 48px; fill: ' . esc_attr($icon_color) . '" viewBox="0 0 1120 1120" fill="none" xmlns="http://www.w3.org/2000/svg">'; |
| 225 |
echo ' <path fill-rule="evenodd" clip-rule="evenodd" 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" ></path>'; |
| 226 |
echo ' <path 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" ></path>'; |
| 227 |
echo ' </svg>'; |
| 228 |
echo '</div>'; |
| 229 |
} |
| 230 |
|
| 231 |
return ob_get_clean(); |
| 232 |
} |
| 233 |
|
| 234 |
|
| 235 |
} |
| 236 |
?> |
| 237 |
|
