File Architecture

Plugin Architecture Overview

The Supervised AI Bots (wpai) plugin is designed as a lightweight wrapper for integrating external Supervised AI chatbot instances into WordPress. The architecture is split between a server-side PHP core (for administration and shortcode processing) and client-side assets that handle the UI presentation and behavior.

The plugin follows standard WordPress development practices, ensuring that scripts and styles are enqueued only when needed to maintain site performance.

Directory Structure

A typical installation of the plugin contains the following core files:

supervised-ai-bots/
├── wpai.php                    # Main plugin loader and admin logic
├── custom-popup-script.js       # Frontend UI interaction logic
├── custom-popup-style.css       # Layout and widget styling
└── README.md                   # Plugin documentation

Component Analysis

1. Main Plugin Loader (`wpai.php`)

While this file serves as the internal engine, it exposes the primary Public Interface used by site administrators: the Shortcode System.

Role: Handles plugin activation, registers the admin settings page, and processes the [supervised_ai_bot] shortcode.
Public Interface: [supervised_ai_bot id="n"]
Attributes:
- id (integer): Refers to the row number of the chatbot URL saved in the plugin settings.

2. UI Logic (`custom-popup-script.js`)

This script manages the state of the chatbot interface on the frontend. It controls the visibility of the chat popup when a user interacts with the floating trigger button.

Public Functions

Users or developers can programmatically trigger the chatbot UI using the following global functions:

Example Usage:

// Programmatically open the bot from a custom "Contact Us" button
document.querySelector('#my-custom-btn').addEventListener('click', function() {
    togglePopup();
});

3. Presentation Layer (`custom-popup-style.css`)

The styling architecture uses a fixed-position layout to ensure the chatbot remains accessible as the user scrolls.

Key CSS Selectors

If you need to customize the chatbot's appearance via your theme's "Additional CSS" section, target these classes:

.circle-button: Styles the floating launcher button (default: blue, bottom-right).
.popup-container: Controls the dimensions and position of the chat window (default: 400px width, 670px height).
.iframe-container: Manages the scaling of the Supervised AI bot within the popup.

Usage Example (Overriding position):

/* Move the chatbot trigger to the left side of the screen */
.circle-button, .popup-container {
    right: auto;
    left: 20px;
}

Asset Enqueueing

The plugin is architected to load its CSS and JavaScript assets globally or via shortcode detection (depending on version configuration).

Scripts: Enqueued with a dependency on jquery (if required) and placed in the footer for optimal page load speed.
Styles: Injected into the <head> to prevent Flash of Unstyled Content (FOUC) when the floating button renders.