Directory Structure

Directory Structure

The supervised-ai-bots plugin follows a lightweight, flat directory structure designed for seamless integration into WordPress. Below is a map of the primary files and their roles in the plugin's architecture.

supervised-ai-bots/
├── wpai.php                 # Main plugin entry point
├── custom-popup-script.js    # Frontend interaction logic
├── custom-popup-style.css    # UI styling and layout
└── README.md                # Documentation and usage guide

Core Components

1. Main Plugin File (wpai.php)

This is the heart of the plugin. It initializes the Supervised AI integration within the WordPress lifecycle.

• Public Interface: Registers the [supervised_ai_bot] shortcode.
• Administration: Generates the settings menu in the WordPress dashboard where you manage bot URLs.
• Asset Management: Handles the "enqueuing" (loading) of the CSS and JavaScript files only when needed to ensure optimal site performance.

2. Frontend Logic (custom-popup-script.js)

This file manages the client-side behavior of the chatbot widget. If you need to programmatically trigger the chat window from other parts of your site, you can utilize the following global functions:

• togglePopup(): Used to open or close the chat interface.
• closePopup(): Specifically used to hide the chat interface.

3. Visual Styles (custom-popup-style.css)

This stylesheet defines the look and feel of the chatbot popup. It controls the "floating" behavior and the dimensions of the chat window. Key areas for customization include:

• Positioning: By default, the bot is fixed to the bottom-right corner (bottom: 20px; right: 20px;).
• Dimensions: The default width is 400px (with a max-width of 800px) and a height of 670px.
• Trigger Button: The .circle-button class defines the appearance of the floating blue button used to launch the chat.

4. Documentation (README.md)

Provides the essential manual for the plugin. It includes installation steps, a guide on how to use the ID-based shortcode system, and basic troubleshooting information.

Usage in Environment

When the plugin is active, the files interact as follows:

1. wpai.php detects the [supervised_ai_bot id="1"] shortcode on a page.
2. It injects the custom-popup-style.css to create the hidden iframe container.
3. It loads custom-popup-script.js to listen for clicks on the floating action button.
4. The user clicks the button, triggering togglePopup(), which reveals the Supervised AI interface.