Core Architecture

Architecture Overview

The Supervised AI Bots plugin utilizes a lightweight architecture designed to bridge WordPress backend configurations with a reactive frontend interface. The core logic follows a standard WordPress shortcode-to-asset injection pattern, ensuring that the heavy lifting (the AI interface) is offloaded to a secure iframe while the plugin manages the display state and styling.

Shortcode Implementation

The primary public interface for this plugin is the [supervised_ai_bot] shortcode. This serves as the hook that triggers the injection of the chatbot UI into specific pages or posts.

Usage:

[supervised_ai_bot id="1"]

• id (Required): An integer representing the row index of the chatbot URL stored in the plugin settings. For example, id="1" fetches the first URL defined in the administration textarea.

Asset Registration and Enqueueing

To maintain performance, the plugin conditionally enqueues the necessary frontend assets only when the shortcode is detected.

• Styles (custom-popup-style.css): Handles the positioning of the floating action button (FAB) and the fixed-position popup container. It ensures the chatbot remains visible at the bottom-right of the viewport (z-index: 1001).
• Scripts (custom-popup-script.js): Manages the DOM-level visibility of the chatbot interface. It exposes global functions used to toggle the UI state.

Iframe Injection Mechanism

The architecture uses a "Shadow Container" approach. Instead of loading the chatbot content directly into the WordPress DOM, the plugin generates an iframe-based wrapper. This ensures:

1. CSS Isolation: No style leakage between the chatbot and your WordPress theme.
2. Security: The Supervised AI interface runs in its own origin.
3. Performance: The parent page remains responsive while the iframe loads the AI assets.

DOM Structure

When the shortcode is processed, the following structure is injected into the footer:

<!-- Trigger Button -->
<div class="circle-button" onclick="togglePopup()">...</div>

<!-- Chatbot Container -->
<div id="popup" class="popup-container">
    <div class="popup-body">
        <div class="iframe-container">
            <iframe src="YOUR_SUPERVISED_AI_URL" ...></iframe>
        </div>
    </div>
</div>

Public JavaScript API

While the plugin handles most interactions automatically, the following functions are available globally for custom integrations or manual triggers:

| Function | Description | | :--- | :--- | | togglePopup() | Reverses the current display state of the chatbot (switches between block and none). | | closePopup() | Explicitly hides the chatbot interface. |

Configuration Mapping

The backend settings page acts as a simple key-value store where each line in the configuration textarea is mapped to an internal index.

1. Input: A list of URLs in the Admin Dashboard.
2. Processing: The PHP backend parses the list into an array.
3. Resolution: When id="X" is called, the plugin retrieves array[X-1] and injects it as the src attribute of the frontend iframe.