<?php 

    // Draw public section of TTW plugin
    function vappv_ttw_draw_public_section() {

        // Load plugin settings
        $settings_controller = new VAPPV_TTW_Settings();
        $settings_controller->load_all_saved_settings();

        // Load daily stats
        $ttw_stats_controller = new VAPPV_TTW_Statistics();
         
        // Check is plugin active at the moment
        $chatbot_activity_information = $settings_controller->is_plugin_active_right_now();
        $display_chatbot_on_the_website_public_pages = $chatbot_activity_information['IsActive'];
 
        // Display or hide the plugin
        if ( true === $display_chatbot_on_the_website_public_pages ) {

            // Get additional properties
            $settings_chat_bubble_image_url = $settings_controller->try_get_setting( VAPPV_TTW_Settings::$settings_chat_bubble_image_url );
            if (
				is_null( $settings_chat_bubble_image_url ) ||
				'' === $settings_chat_bubble_image_url
			) {
                $settings_chat_bubble_image_url = VAPPV_TTW_Settings::$ttw_available_chat_bubbles_types[0];
                $settings_chat_bubble_image_url = VAPPV_TTW_PLUGIN_URL . 'admin/img/' . $settings_chat_bubble_image_url;
            }

            // Get max characters per one user input
            $settings_max_characters_per_user_question = $settings_controller->try_get_setting( VAPPV_TTW_Settings::$settings_max_characters_per_user_question );
            $is_plugin_active_by_daily_limits = $ttw_stats_controller->can_process_message_from_user( $settings_controller, 'Any small text' );

			// Handle chat positioning and margin
			$settings_chat_bubble_ui_position = $settings_controller->try_get_setting( VAPPV_TTW_Settings::$settings_chat_bubble_ui_position );
			$settings_chat_bubble_ui_margin   = $settings_controller->try_get_setting( VAPPV_TTW_Settings::$settings_chat_bubble_ui_margin );

			// Chat positions CSS classes:
			/*
			  	public static $ttw_chat_bubble_ui_positions = array(
					'ttw_chat_bbuble_position_top_left'      => 'Top left corner',
					'ttw_chat_bbuble_position_top_center'    => 'Top center',
					'ttw_chat_bbuble_position_top_right'     => 'Top right corner',
					'ttw_chat_bbuble_position_bottom_left'   => 'Bottom left corner',
					'ttw_chat_bbuble_position_bottom_center' => 'Bottom center',
					'ttw_chat_bbuble_position_bottom_right'  => 'Bottom right corner'
				);
			 **/

			$settings_chat_bubble_ui_position = esc_attr( $settings_chat_bubble_ui_position );
			$settings_chat_bubble_ui_margin = esc_attr( intval( $settings_chat_bubble_ui_margin ) );

			$is_short_copy_promo_text = false;
			$chat_elements_styling_according_to_position_css_inline = array(
				'bubble' => '',
				'chat'   => '',
				'arrow'  => '',
				'copy'   => '',
				'promo'  => '',
			);

			switch( $settings_chat_bubble_ui_position ) {

				case 'ttw_chat_bubble_position_bottom_left':
					$chat_elements_styling_according_to_position_css_inline['bubble'] = sprintf( "right: auto; left: %spx; bottom: %spx;", $settings_chat_bubble_ui_margin, $settings_chat_bubble_ui_margin );
					$chat_elements_styling_according_to_position_css_inline['chat']   = sprintf( "right: auto; left: %spx; bottom: calc(%spx + 135px);", $settings_chat_bubble_ui_margin, $settings_chat_bubble_ui_margin );
					$chat_elements_styling_according_to_position_css_inline['promo']  = sprintf( "right: auto; left: %spx; bottom: calc(%spx + 135px);", $settings_chat_bubble_ui_margin, $settings_chat_bubble_ui_margin );
					$chat_elements_styling_according_to_position_css_inline['arrow']  = 'right: auto; left: 15px;';
					$chat_elements_styling_according_to_position_css_inline['copy']   = 'left: 75px;';
					break;

				case 'ttw_chat_bubble_position_bottom_center':
					$chat_elements_styling_according_to_position_css_inline['bubble'] = sprintf( "right: calc(50%% - 50px); bottom: %spx;", $settings_chat_bubble_ui_margin );
					$chat_elements_styling_according_to_position_css_inline['chat']   = sprintf( "right: calc(50%% - 200px); bottom: calc(%spx + 135px);", $settings_chat_bubble_ui_margin );
					$chat_elements_styling_according_to_position_css_inline['promo']  = sprintf( "right: calc(50%% - 150px); bottom: calc(%spx + 135px);", $settings_chat_bubble_ui_margin );
					$chat_elements_styling_according_to_position_css_inline['arrow']  = 'right: auto; left: calc(50% - 30px);';
					$chat_elements_styling_according_to_position_css_inline['copy']   = 'left: 15px;';
					$is_short_copy_promo_text = true;
					break;

				case 'ttw_chat_bubble_position_bottom_right':
					$chat_elements_styling_according_to_position_css_inline['bubble'] = sprintf( "right: %spx; bottom: %spx;", $settings_chat_bubble_ui_margin, $settings_chat_bubble_ui_margin );
					$chat_elements_styling_according_to_position_css_inline['chat']   = sprintf( "right: %spx; bottom: calc(%spx + 135px);", $settings_chat_bubble_ui_margin, $settings_chat_bubble_ui_margin );
					$chat_elements_styling_according_to_position_css_inline['promo']  = sprintf( "right: %spx; bottom: calc(%spx + 135px);", $settings_chat_bubble_ui_margin, $settings_chat_bubble_ui_margin );
					$chat_elements_styling_according_to_position_css_inline['arrow']  = 'right: 78px;';
					$chat_elements_styling_according_to_position_css_inline['copy']   = 'left: 20px;';
					break;

			}

?>
            <div class="vappv-ttw-plugin" id="vappv-ttw-plugin">
                <div class="vappv-ttw-chat-dialogue" id="vappv-ttw-chat-dialogue" style="display: none; <?php echo esc_attr( $chat_elements_styling_according_to_position_css_inline['chat'] ); ?>">
                    <div class="ttw-introduce-yourself-area ttw-chat-first-inner-block-any" id="ttw-introduce-yourself-area" style="display: none;">
                        <div class="ttw-introduce-yourself-head-image">
                            <svg width="100px" height="100px" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M97.8357 54.6682C177.199 59.5311 213.038 52.9891 238.043 52.9891C261.298 52.9891 272.24 129.465 262.683 152.048C253.672 173.341 100.331 174.196 93.1919 165.763C84.9363 156.008 89.7095 115.275 89.7095 101.301" stroke="#000000" stroke-opacity="0.9" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M98.3318 190.694C-10.6597 291.485 121.25 273.498 148.233 295.083" stroke="#000000" stroke-opacity="0.9" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M98.3301 190.694C99.7917 213.702 101.164 265.697 100.263 272.898" stroke="#000000" stroke-opacity="0.9" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M208.308 136.239C208.308 131.959 208.308 127.678 208.308 123.396" stroke="#000000" stroke-opacity="0.9" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M177.299 137.271C177.035 133.883 177.3 126.121 177.3 123.396" stroke="#000000" stroke-opacity="0.9" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M203.398 241.72C352.097 239.921 374.881 226.73 312.524 341.851" stroke="#000000" stroke-opacity="0.9" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M285.55 345.448C196.81 341.85 136.851 374.229 178.223 264.504" stroke="#000000" stroke-opacity="0.9" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M180.018 345.448C160.77 331.385 139.302 320.213 120.658 304.675" stroke="#000000" stroke-opacity="0.9" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M218.395 190.156C219.024 205.562 219.594 220.898 219.594 236.324" stroke="#000000" stroke-opacity="0.9" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M218.395 190.156C225.896 202.037 232.97 209.77 241.777 230.327" stroke="#000000" stroke-opacity="0.9" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M80.1174 119.041C75.5996 120.222 71.0489 119.99 66.4414 120.41" stroke="#000000" stroke-opacity="0.9" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M59.5935 109.469C59.6539 117.756 59.5918 125.915 58.9102 134.086" stroke="#000000" stroke-opacity="0.9" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M277.741 115.622C281.155 115.268 284.589 114.823 287.997 114.255" stroke="#000000" stroke-opacity="0.9" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M291.412 104.682C292.382 110.109 292.095 115.612 292.095 121.093" stroke="#000000" stroke-opacity="0.9" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M225.768 116.466C203.362 113.993 181.657 115.175 160.124 118.568" stroke="#000000" stroke-opacity="0.9" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div class="ttw-introduce-yourself-head-label">
							<?php echo esc_html( __( 'Please introduce yourself to start a dialog with the AI robot', 'talk-to-website' ) ); ?>
                        </div>
                        <div class="ttw-introduce-yourself-form">
                            <div class="ttw-introduce-yourself-field">
                                <div class="ttw-introduce-yourself-label">
                                    <label class="ttw-label" for="ttw-introduce-yourself-name"><?php echo esc_html( __( 'Your name (required):', 'talk-to-website' ) ); ?></label>
                                </div>
                                <div class="ttw-introduce-yourself-input">
                                    <input type="text" id="ttw-introduce-yourself-name" name="ttw-introduce-yourself-name" maxlength="50" />
                                </div>
                            </div>
                            <div class="ttw-introduce-yourself-field">
                                <div class="ttw-introduce-yourself-label">
                                    <label class="ttw-label" for="ttw-introduce-yourself-email"><?php echo esc_html( __( 'Your Email:', 'talk-to-website' ) ); ?></label>
                                </div>
                                <div class="ttw-introduce-yourself-input">
                                    <input type="text" id="ttw-introduce-yourself-email" name="ttw-introduce-yourself-email" maxlength="50" />
                                </div>
                            </div>
                            <div class="ttw-introduce-yourself-errors-area" id="ttw-introduce-yourself-errors-area" style="display: none;"></div>
                            <div class="ttw-introduce-yourself-submit-button">
                                <div class="ttw-button ttw-green-button" id="ttw-start-chat-with-ai-button"><?php echo esc_html( __( 'Start chat with AI', 'talk-to-website' ) ); ?></div>
                            </div>
                            <div class="ttw-introduce-yourself-close-modal-button">
                                <div class="ttw-button" id="ttw-cancel-chat-with-ai-button-from-introduction-window"><?php echo esc_html( __( 'Back to website', 'talk-to-website' ) ); ?></div>
                            </div>
                        </div>
                    </div>
                    <div class="ttw-dialogue-area ttw-chat-first-inner-block-any" id="ttw-dialogue-area">
                        <div class="ttw-dialogue-mobile-heading-area">
                            <div class="ttw-dialogue-mobile-image"><img src="<?php echo esc_url( $settings_chat_bubble_image_url ); ?>" alt="<?php esc_attr( __( 'TTW AI live chat', 'talk-to-website' ) ); ?>" /></div>
                            <div class="ttw-ai-mobile-headlabel"><?php echo esc_html( __( 'AI Chat', 'talk-to-website' ) ); ?></div>
                            <div class="ttw-button ttw-button-mini ttw-green-button" id="ttw-button-close-chat-from-mobile"><span class="dashicons dashicons-no"></span> <?php echo esc_html( __( 'Close chat', 'talk-to-website' ) ); ?></div>
                        </div>
                        <div class="ttw-dialogue-heading-area">
                            <div class="ttw-dialogue-heading-label">
                                <div><b><?php echo esc_html( __( 'Chat with an AI trained on the website.', 'talk-to-website' ) ); ?></b></div>
                                <div class="ttw-ask-robot-anything-you-want"><?php echo esc_html( __( 'You can ask the robot anything you want.', 'talk-to-website' ) ); ?></div>
								<div><?php echo esc_html( __( 'How does it work?', 'talk-to-website' ) ); ?> <span id="ttw-click-here-to-know-more-about-plugin" class="ttw-click-here-to-know-more-about-plugin"><?php echo esc_html( __( 'Click here to know more.', 'talk-to-website' ) ); ?></span></div>
                            </div>
                        </div>
                        <div class="ttw-dialogue-content-area" id="ttw-dialogue-content-area"></div> 
                        <div class="ttw-dialogue-interaction-area" id="ttw-dialogue-interaction-area">
                            <textarea id="ttw-dialogue-message-text" class="ttw-dialogue-message-text" placeholder="<?php echo esc_attr( __( 'Please write your question to AI here...', 'talk-to-website' ) ); ?>" maxlength="<?php echo esc_attr( $settings_max_characters_per_user_question ); ?>"></textarea>
                            <div id="ttw-dialogue-send-message-button-outer" class="ttw-dialogue-send-message-button-outer">
                                <div class="ttw-dialogue-send-message-button" id="ttw-dialogue-send-message-button">
									<svg width="50px" height="50px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
										<path d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
										<path d="M9 9.51001L12 6.51001L15 9.51001" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
										<path d="M12 6.51001V14.51" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
										<path d="M6 16.51C9.89 17.81 14.11 17.81 18 16.51" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
									</svg>
                                </div>
                            </div>
                        </div>
                    </div> 
                    <div class="ttw-dialogue-area ttw-chat-first-inner-block-any ttw-ai-is-sleeping-now" id="ttw-ai-is-sleeping-now-area" style="display: none;">
                        <input type="hidden" id="ttw_daily_limit_exhausted" value="<?php if ( false === $is_plugin_active_by_daily_limits ) { echo esc_attr( 'yes' ); } else { echo esc_attr( 'no' ); } ?>" />
                        <div class="ttw-ai-is-sleeping-head-image">
                            <svg fill="#000000" height="100px" width="100px" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve">
                                <path d="M210.16,276.71c-0.211,0.105-21.58,10.51-41.574,10.51c-20.07,0-41.4-10.425-41.613-10.53l-16.715,33.527 c1.181,0.592,29.265,14.466,58.328,14.466s57.147-13.874,58.328-14.466L210.16,276.71z" />
                                <path d="M384.989,276.71c-0.21,0.105-21.58,10.51-41.574,10.51c-20.07,0-41.4-10.425-41.613-10.53l-16.715,33.527 c1.181,0.592,29.265,14.466,58.328,14.466c29.063,0,57.147-13.874,58.328-14.466L384.989,276.71z" />
                                <path d="M256,374.634c-13.772,0-24.976,11.204-24.976,24.976c0,13.772,11.204,24.976,24.976,24.976 c13.767,0,24.971-11.202,24.976-24.976C280.976,385.838,269.774,374.634,256,374.634z"/>
                                <polygon points="287.976,144.369 274.732,112.393 193.561,112.393 193.561,149.856 229.51,149.856 186.56,192.805 199.805,224.783 280.976,224.783 280.976,187.32 245.027,187.32" />
                                <polygon points="394.123,119.391 380.878,87.415 299.707,87.415 299.707,124.878 335.656,124.878 292.707,167.829 305.951,199.805 387.122,199.805 387.122,162.341 351.173,162.341" />
                                <polygon points="500.269,94.415 487.024,62.439 405.854,62.439 405.854,99.902 441.802,99.902 398.853,142.853 412.098,174.829 493.268,174.829 493.268,137.366 457.32,137.366" />
                                <path d="M508.251,212.293h-38.109c2.878,14.128,4.394,28.744,4.394,43.707c0,120.501-98.036,218.537-218.537,218.537 S37.463,376.501,37.463,256S135.499,37.463,256,37.463c25.519,0,50.025,4.412,72.811,12.488h39.579v-23.92 C334.442,9.372,296.297,0,256,0C114.84,0,0,114.842,0,256s114.84,256,256,256s256-114.842,256-256 C512,241.101,510.706,226.5,508.251,212.293z" />
                            </svg>
                        </div>
                        <div class="ttw-ai-is-sleeping-head-label">
                            <?php echo esc_html( __( 'The robot is resting...', 'talk-to-website' ) ); ?>
                        </div>
                        <div class="ttw-ai-is-sleeping-explanation">
                            <?php echo esc_html( __( 'Based on current usage limits, the robot has done all the work for the day, and has laid down to sleep. Please try to talk to him tomorrow, when he will be back to work with fresh energy!', 'talk-to-website' ) ); ?>
                        </div>
                        <div class="ttw-view-my-conversation-history-with-sleeping-robot" id="ttw-view-my-conversation-history-with-sleeping-robot" style="display: none;"><?php echo esc_html( __( 'View my dialogue (readonly)', 'talk-to-website' ) ); ?></div>
                    </div>
                    <div class="ttw-ai-about-area ttw-chat-first-inner-block-any" id="ttw-about-area" style="display: none;">
                        <div class="ttw-ai-about-section-head-image">
                            <svg width="100px" height="100px" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
                                <g id="Layer_2" data-name="Layer 2"><g id="invisible_box" data-name="invisible box"><rect width="48" height="48" fill="none"></rect></g><g id="Q3_icons" data-name="Q3 icons"><g><path d="M45.6,18.7,41,14.9V7.5a1,1,0,0,0-.6-.9L30.5,2.1h-.4l-.6.2L24,5.9,18.5,2.2,17.9,2h-.4L7.6,6.6a1,1,0,0,0-.6.9v7.4L2.4,18.7a.8.8,0,0,0-.4.8v9H2a.8.8,0,0,0,.4.8L7,33.1v7.4a1,1,0,0,0,.6.9l9.9,4.5h.4l.6-.2L24,42.1l5.5,3.7.6.2h.4l9.9-4.5a1,1,0,0,0,.6-.9V33.1l4.6-3.8a.8.8,0,0,0,.4-.7V19.4h0A.8.8,0,0,0,45.6,18.7Zm-5.1,6.8H42v1.6l-3.5,2.8-.4.3-.4-.2a1.4,1.4,0,0,0-2,.7,1.5,1.5,0,0,0,.6,2l.7.3h0v5.4l-6.6,3.1-4.2-2.8-.7-.5V25.5H27a1.5,1.5,0,0,0,0-3H25.5V9.7l.7-.5,4.2-2.8L37,9.5v5.4h0l-.7.3a1.5,1.5,0,0,0-.6,2,1.4,1.4,0,0,0,1.3.9l.7-.2.4-.2.4.3L42,20.9v1.6H40.5a1.5,1.5,0,0,0,0,3ZM21,25.5h1.5V38.3l-.7.5-4.2,2.8L11,38.5V33.1h0l.7-.3a1.5,1.5,0,0,0,.6-2,1.4,1.4,0,0,0-2-.7l-.4.2-.4-.3L6,27.1V25.5H7.5a1.5,1.5,0,0,0,0-3H6V20.9l3.5-2.8.4-.3.4.2.7.2a1.4,1.4,0,0,0,1.3-.9,1.5,1.5,0,0,0-.6-2L11,15h0V9.5l6.6-3.1,4.2,2.8.7.5V22.5H21a1.5,1.5,0,0,0,0,3Z"></path><path d="M13.9,9.9a1.8,1.8,0,0,0,0,2.2l2.6,2.5v2.8l-4,4v5.2l4,4v2.8l-2.6,2.5a1.8,1.8,0,0,0,0,2.2,1.5,1.5,0,0,0,1.1.4,1.5,1.5,0,0,0,1.1-.4l3.4-3.5V29.4l-4-4V22.6l4-4V13.4L16.1,9.9A1.8,1.8,0,0,0,13.9,9.9Z"></path><path d="M31.5,14.6l2.6-2.5a1.8,1.8,0,0,0,0-2.2,1.8,1.8,0,0,0-2.2,0l-3.4,3.5v5.2l4,4v2.8l-4,4v5.2l3.4,3.5a1.7,1.7,0,0,0,2.2,0,1.8,1.8,0,0,0,0-2.2l-2.6-2.5V30.6l4-4V21.4l-4-4Z"></path></g></g></g>
                            </svg>
                        </div>
                        <div class="ttw-ai-about-head-label"><?php echo esc_html( __( 'Website AI assistant', 'talk-to-website' ) ); ?></div>
                        <div class="ttw-ai-about-explanation">
                            <?php echo esc_html( __( 'This chat bot is an artificial intelligence built inside the website. It is specially trained on the articles and pages of this website. You can ask it questions in human language and it will give direct answers. Among other things, it can help you search the site for information. Please feel free to talk to him as a live consultant!', 'talk-to-website' ) ); ?>
                        </div>
                        <div class="ttw-ai-about-back-to-chat-button ttw-button ttw-button-mini ttw-green-button" id="ttw-ai-about-back-to-chat-button"><?php echo esc_html( __( 'Back to chat', 'talk-to-website' ) ); ?></div>
                    </div>
                    <div class="ttw-dialogue-window-triangle-container ttw-triangle-container-main-dialogue" style="<?php echo esc_attr( $chat_elements_styling_according_to_position_css_inline['arrow'] ); ?>">
                        <div class="ttw-dialogue-window-triangle-cloud-background-shadow"></div>
                        <div class="ttw-dialogue-window-triangle-cloud-arrow" id="ttw-dialogue-window-triangle-cloud-arrow"></div>
                    </div>
                    <div class="ttw-dialogue-powered-by-ttw-container">
						<?php
							//By default, this block is NOT displayed. This is in accordance with WordPress rules.
							$settings_show_powered_by_ttw_public_label = $settings_controller->try_get_setting( VAPPV_TTW_Settings::$settings_show_powered_by_ttw_public_label );
							if ( 'yes' === $settings_show_powered_by_ttw_public_label ) {
						?>
                        		<div class="ttw-dialogue-powered-by-ttw-text" style="<?php echo esc_attr( $chat_elements_styling_according_to_position_css_inline['copy'] ); ?>">
									<?php
										if ( false === $is_short_copy_promo_text ) {
											echo esc_html( __( 'Powered by', 'talk-to-website' ) ); ?> <a href="<?php echo esc_url( __( 'https://talktowebsite.com', 'talk-to-website' ) ); ?>" target="_blank" rel="nofollow"><?php echo esc_html( __( 'TalkToWebsite.com', 'talk-to-website' ) ); ?></a><?php
										}
										else {
											echo esc_html( __( 'By', 'talk-to-website' ) ); ?> <a href="<?php echo esc_url( __( 'https://talktowebsite.com', 'talk-to-website' ) ); ?>" target="_blank" rel="nofollow"><?php echo esc_html( __( 'TalkToWebsite.com', 'talk-to-website' ) ); ?></a><?php
										}
									?>
								</div>
                    	<?php
							}
						?>
					</div>
                </div>
                <div id="vappv-ttw-chat-promo-popup" class="vappv-ttw-chat-promo-popup" style="display: none; <?php echo esc_attr( $chat_elements_styling_according_to_position_css_inline['promo'] ); ?>">
                    <div class="ttw-chat-promo-popup-inner">
                        <div class="ttw-chat-promo-popup-head-image">
                            <svg width="100px" height="100px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M18.906 3.92194C17.8921 2.88646 16.4461 2.50452 15.0306 2.9073C14.6322 3.02066 14.2173 2.78959 14.104 2.39119C13.9906 1.99279 14.2217 1.57792 14.6201 1.46456C16.5583 0.913072 18.5747 1.43959 19.9778 2.8725C20.2676 3.16846 20.2626 3.64331 19.9666 3.9331C19.6706 4.2229 19.1958 4.2179 18.906 3.92194ZM11.1904 3.30839C10.9763 2.94131 10.3525 2.7187 9.71882 3.08085C9.08746 3.44168 8.97642 4.07772 9.18675 4.4384L11.7124 8.76952C11.9211 9.12734 11.8001 9.58656 11.4423 9.79522C11.0845 10.0039 10.6253 9.88296 10.4166 9.52514L7.89098 5.19403C7.89085 5.19381 7.8911 5.19424 7.89098 5.19403L7.04909 3.75032C6.83503 3.38324 6.21122 3.16063 5.57755 3.52278C4.94619 3.88361 4.83515 4.51965 5.04548 4.88033L8.83397 11.377C9.04263 11.7348 8.92171 12.1941 8.56389 12.4027C8.20607 12.6114 7.74685 12.4905 7.53819 12.1326L5.85442 9.24522C5.64036 8.87814 5.01655 8.65553 4.38288 9.01768C3.75152 9.37851 3.64048 10.0145 3.85081 10.3752L7.6393 16.8719C9.24824 19.631 13.2186 20.5264 16.5856 18.6021C19.9502 16.6792 21.1463 12.8377 19.5411 10.085L17.0154 5.75387C16.8013 5.3868 16.1775 5.16418 15.5439 5.52633C14.9125 5.88716 14.8015 6.5232 15.0118 6.88389L16.6956 9.7713C16.7963 9.94411 16.8239 10.15 16.7721 10.3432C16.7203 10.5365 16.5935 10.701 16.4198 10.8003C14.8774 11.6818 14.4047 13.3863 15.0799 14.5443C15.2886 14.9022 15.1677 15.3614 14.8099 15.57C14.4521 15.7787 13.9928 15.6578 13.7842 15.3C12.7249 13.4835 13.3917 11.2368 15.0475 9.92287L11.1904 3.30839ZM13.9186 5.00916L12.4861 2.55277C11.7703 1.32517 10.163 1.09928 8.97453 1.77853C8.60823 1.98787 8.29668 2.27483 8.06179 2.60775C7.26173 1.72687 5.8839 1.62001 4.83326 2.22046C3.64241 2.90104 3.03012 4.40197 3.74971 5.63596L4.75188 7.35452C4.36684 7.39635 3.98493 7.51742 3.63859 7.71536C2.44774 8.39595 1.83545 9.89687 2.55504 11.1309L6.34352 17.6275C8.45427 21.2471 13.408 22.1458 17.3299 19.9044C21.254 17.6617 22.9513 12.9554 20.8368 9.32937L18.3112 4.99825C17.5953 3.77065 15.9881 3.54476 14.7996 4.22401C14.4495 4.42406 14.1495 4.69498 13.9186 5.00916ZM4.41401 17.859C4.77183 17.6504 5.23105 17.7713 5.43971 18.1291C6.26657 19.5471 7.53066 20.6193 9.08954 21.3151C9.46779 21.4839 9.63757 21.9274 9.46875 22.3057C9.29993 22.6839 8.85645 22.8537 8.4782 22.6849C6.66668 21.8764 5.14688 20.6046 4.14393 18.8847C3.93527 18.5269 4.05619 18.0677 4.41401 17.859Z" fill="#1C274C"/>
                            </svg>
                        </div>
                        <div class="ttw-promo-popup-head-label"><?php echo esc_html( __( 'Hi there! I\'m an AI', 'talk-to-website' ) ); ?></div>
                        <div class="ttw-promo-popup-explanation"><?php echo esc_html( __( 'I live on this website and I can help you. Would you like to talk?', 'talk-to-website' ) ); ?></div>
                        <div class="ttw-promo-popup-inner-buttons">
                            <div class="ttw-button ttw-green-button" id="ttw-promo-popup-lets-chat-button"><?php echo esc_html( __( 'Let\'s chat!', 'talk-to-website' ) ); ?></div>
                            <div class="ttw-button" id="ttw-promo-popup-close-button"><?php echo esc_html( __( 'Close', 'talk-to-website' ) ); ?></div>
                        </div>
                    </div>
                    <div class="ttw-dialogue-window-triangle-container ttw-triangle-container-promo-popup" style="<?php echo esc_attr( $chat_elements_styling_according_to_position_css_inline['arrow'] ); ?>">
                        <div class="ttw-dialogue-window-triangle-cloud-background-shadow"></div>
                        <div class="ttw-dialogue-window-triangle-cloud-arrow"></div>
                    </div>
                </div>
                <div id="ttw-chat-floating-bubble" class="ttw-chat-floating-bubble <?php echo esc_attr( $settings_chat_bubble_ui_position ); ?>" aria-label="<?php echo esc_attr( __( 'Click to start dialogue with the AI assistant of the website', 'talk-to-website' ) ); ?>" title="<?php echo esc_attr( __( 'Click to start dialogue with the AI assistant of the website', 'talk-to-website' ) ); ?>" style="<?php echo esc_attr( $chat_elements_styling_according_to_position_css_inline['bubble'] ); ?>">
                    <img src="<?php echo esc_url( $settings_chat_bubble_image_url ); ?>" alt="<?php echo esc_attr( __( 'Talk To Website AI live chat', 'talk-to-website' ) ); ?>" />
                </div>
                <div class="ttw-chat-website-background-overlay-mobile" id="ttw-chat-website-background-overlay-mobile" style="display: none;"></div>
				<div style="display: none;" id="ttw-variables">
					<?php
						// Prepare TTW variables (settings) for public chat
						$settings_show_promo_popup_after_n_seconds          = $settings_controller->try_get_setting( VAPPV_TTW_Settings::$settings_show_promo_popup_after_n_seconds );
						$settings_show_promo_popup_time_frequency_n_minutes = $settings_controller->try_get_setting( VAPPV_TTW_Settings::$settings_show_promo_popup_time_frequency_n_minutes );
						$settings_try_intercept_leaving_users               = $settings_controller->try_get_setting_as_string( VAPPV_TTW_Settings::$settings_try_intercept_leaving_users );
						$settings_chat_bot_name                             = $settings_controller->try_get_setting_as_string( VAPPV_TTW_Settings::$settings_chat_bot_name );
						$settings_welcome_message_html                      = $settings_controller->try_get_setting_as_string( VAPPV_TTW_Settings::$settings_welcome_message_html );
						$settings_robot_messages_post_scriptum              = $settings_controller->try_get_setting_as_string( VAPPV_TTW_Settings::$settings_robot_messages_post_scriptum );
					?>
					<input id="ttw-settings-show-promo-popup-after-n-seconds" type="hidden" style="display: none;" value="<?php echo esc_attr( sanitize_text_field ( intval( $settings_show_promo_popup_after_n_seconds ) ) ); ?>" />
					<input id="ttw-settings-show-promo-popup-time-frequency-n-minutes" type="hidden" style="display: none;" value="<?php echo esc_attr( sanitize_text_field ( intval( $settings_show_promo_popup_time_frequency_n_minutes ) ) ); ?>" />
					<input id="ttw-settings-try-intercept-leaving-users" type="hidden" style="display: none;" value="<?php echo esc_attr( sanitize_text_field ( intval( $settings_try_intercept_leaving_users ) ) ); ?>" />
					<input id="ttw-settings-robot-name" type="hidden" style="display: none;" value="<?php echo esc_attr( sanitize_text_field( $settings_chat_bot_name ) ); ?>" />
					<textarea id="ttw-settings-welcome-message-html" style="display: none;"><?php echo esc_textarea( sanitize_textarea_field( $settings_welcome_message_html ) ); ?></textarea>
					<textarea id="ttw-settings-robot-messages-post-scriptum" style="display: none;"><?php echo esc_textarea( sanitize_textarea_field( $settings_robot_messages_post_scriptum ) ); ?></textarea>
					<div id="ttw-js-messages"
						 data-ttwmessages-enteryourname="<?php echo esc_attr( __( 'Please enter your name', 'talk-to-website' ) ); ?>"
						 data-ttwmessages-enteryouremail="<?php echo esc_attr( __( 'Please enter correct Email', 'talk-to-website' ) ); ?>"
						 data-ttwmessages-robotisresting_placeholder="<?php echo esc_attr( __('The robot had a lot of interaction with users and got tired. He will be unavailable today. Please come back tomorrow and talk to the robot!', 'talk-to-website' ) ); ?>"
						 data-ttwmessages-cannot-get-user-messages-history-jsonexception="<?php esc_attr( __( 'Failed to get the history of messages between the user and the AI / Exception when unpacking JSON from the server.', 'talk-to-website' ) ); ?>"
						 data-ttwmessages-cannot-get-user-messages-history-common="<?php esc_attr( __( 'Failed to get the history of messages between the user and the AI / Common Exception.', 'talk-to-website' ) ); ?>"
						 data-ttwmessages-cannot-get-user-messages-history-unexpected-response="<?php echo esc_attr( __( 'Cannot load chat messages / Unexpected server response.', 'talk-to-website' ) ); ?>"
						 data-ttwmessages-cannot-get-user-messages-history-ajaxexception="<?php echo esc_attr( __( 'Cannot load chat messages / AJAX call failed.', 'talk-to-website' ) ); ?>"
						 data-ttwmessages-message-is-empty="<?php echo esc_attr( __( 'Message is empty. Please complete message.', 'talk-to-website' ) ); ?>"
						 data-ttwmessages-cannot-send-message-jsonexception="<?php echo esc_attr( __( 'Failed to send message to the chat / Exception when unpacking JSON from the server.', 'talk-to-website' ) ); ?>"
						 data-ttwmessages-cannot-send-message-common="<?php echo esc_attr( __( 'Failed to send message to the chat / Common Exception.', 'talk-to-website' ) ); ?>"
						 data-ttwmessages-cannot-send-message-unexpected-response="<?php echo esc_attr( __( 'Failed to send message to the chat / Unexpected server response.', 'talk-to-website' ) ); ?>"
						 data-ttwmessages-cannot-send-message-ajaxexception="<?php echo esc_attr( __( 'Cannot send message to the chat / AJAX call failed.', 'talk-to-website' ) ); ?>"
						 data-ttwmessages-cannot-get-ai-response-jsnexception="<?php echo esc_attr( __( 'Failed to get a response from the AI / Exception when unpacking JSON from the server.', 'talk-to-website' ) ) ?>"
						 data-ttwmessages-cannot-get-ai-response-common="<?php echo esc_attr( __( 'Failed to get a response from the AI / Common Exception.', 'talk-to-website' ) ); ?>"
						 data-ttwmessages-cannot-get-ai-response-unexpected-response="<?php esc_attr( __( 'Failed to get a response from the AI / Unexpected server response.', 'talk-to-website' ) ); ?>"
						 data-ttwmessages-cannot-get-ai-response-ajaxexception="<?php echo esc_attr( __( 'Failed to get a response from the AI / AJAX call failed.', 'talk-to-website' ) ); ?>"
						 data-ttwmessages-waiting-for-ai-response="<?php echo esc_attr( __( 'Waiting for AI response', 'talk-to-website' ) ) ?>"
						 data-ttwmessages-loading-messages="<?php echo esc_attr( __( 'Loading messages', 'talk-to-website' ) ); ?>"
						 data-ttwmessages-welcome-message-default="<?php echo esc_attr( __( 'Hi there! I am an AI smart robot. Please ask any question about the website!', 'talk-to-website' ) ); ?>"
						 data-ttwmessages-close="<?php echo esc_attr( __( 'Close', 'talk-to-website' ) ); ?>"
					></div>
				</div>
            </div>
<?php
        }
        else {
            // ChatBOT is disabled. Don't do anything.
            ?><input type="hidden" id="vappv-ttw-plugin-disabled" value="yes" /><?php
        }
    }

    /*
        © 2024 Copyright Vitalii A. Popov. All rights reserved.
    */

?>