Project Architecture

Plugin Architecture Overview

The Supervised AI Bots plugin is built on a decoupled architecture that separates administrative configuration, front-end presentation, and interactive behavior. The system functions by capturing external AI chatbot URLs via a WordPress admin interface and rendering them within a secure, sandboxed environment on the front end.

System Components

The plugin is structured into three primary layers:

1. Core Logic (PHP): Manages the WordPress lifecycle, including shortcode registration, settings persistence, and asset enqueuing.
2. Presentation Layer (CSS): Defines the visual layout of the chatbot container, including its fixed positioning and responsive iframe scaling.
3. Interaction Layer (JS): Manages the state of the chatbot UI (toggle/close events) without requiring page reloads.

File Organization

The following represents the key files within the plugin and their functional roles:

| File | Type | Role | | :--- | :--- | :--- | | supervised-ai-bots.php | PHP | Main entry point. Registers shortcodes and enqueues JS/CSS assets. | | custom-popup-style.css | CSS | Controls the layout of the floating action button and the iframe popup. | | custom-popup-script.js | JS | Handles the client-side logic for opening and closing the chatbot interface. |

Implementation Workflow

1. Configuration & Storage

The plugin provides a central settings page in the WordPress Admin. Chatbot URLs are stored as a list, where each line corresponds to an index (ID) used by the shortcode.

2. Shortcode Processing

The public interface is driven by the [supervised_ai_bot] shortcode. When the shortcode is processed, the plugin:

• Identifies the URL associated with the provided id.
• Generates a hidden div container (#popup) containing an iframe.
• Injects the toggle button into the page footer.

Example Usage:

<!-- Display the first chatbot configured in settings -->
[supervised_ai_bot id="1"]

3. Frontend Execution

The UI relies on a Floating Action Button (FAB) pattern. The relationship between the visual components is governed by the following logic:

• Display Logic: The chatbot is loaded into an .iframe-container to ensure it maintains a consistent aspect ratio and remains isolated from the site's global styles.
• State Management: The togglePopup() function in custom-popup-script.js triggers the visibility of the .popup-container.

// Internal logic for UI state
function togglePopup() {
    var popup = document.getElementById('popup');
    // Toggles visibility between 'none' and 'block'
}

Styling and Layout

The plugin uses a fixed-positioning strategy to ensure the chatbot is accessible regardless of page scroll.

• Z-Index Management: The chatbot container is set to z-index: 1001 and the toggle button to z-index: 9999 to ensure they appear above standard theme elements.
• Dimensions: The default interface is optimized for a width of 400px and a height of 670px, providing a mobile-app-like experience within the browser.

Data Flow Diagram

1. Admin Input: User saves Bot URLs in WordPress Dashboard.
2. Shortcode Call: [supervised_ai_bot id="x"] is placed on a Page/Post.
3. PHP Rendering: Plugin retrieves URL x, enqueues custom-popup-style.css and custom-popup-script.js.
4. Client-Side: User clicks the circle-button; JS reveals the iframe; AI bot loads directly from the Supervised AI source.