File Structure Analysis

Project Overview

The wpai plugin is structured to provide a lightweight, non-intrusive integration of Supervised AI chatbots into WordPress. The architecture separates the presentation layer (CSS), the interaction logic (JavaScript), and the core WordPress integration (PHP/Shortcodes).

File Breakdown

1. Style Assets (custom-popup-style.css)

This file controls the visual presentation of the chatbot interface on your website. It ensures the bot appears as a modern, floating element that does not interfere with your site's main content.

• Responsibilities:
  • Positioning: Fixes the chatbot toggle button and the chat window to the bottom-right corner of the viewport.
  • Responsive Sizing: Defines the chat window dimensions (defaulting to 400px width and 670px height).
  • UI Components: Styles the circle-button (the launcher) and the iframe-container (the bot display area).
• Key Selectors for Customization:
  • .circle-button: Modify this to change the launcher's background color or size.
  • .popup-container: Modify this to adjust the chat window's border radius or shadow effects.

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

This script manages the behavior of the chatbot popup. It handles the transition between the "hidden" state and the "visible" state when a user interacts with the launcher.

• Public Functions:
  • togglePopup(): Switches the visibility of the chat window. Typically bound to the click event of the floating action button.
  • closePopup(): Explicitly hides the chat window.
• Usage Context: These functions interact with a DOM element with the ID popup. Ensure that any custom templates maintain this ID to preserve functionality.

3. Core Plugin Logic (PHP / README Context)

While the primary logic is handled via the WordPress Admin and Shortcode engine, the plugin's core responsibility is mapping user-defined URLs to specific IDs.

• Settings Management: Provides a textarea in the WordPress Admin for inputting Supervised AI bot URLs (one per line).
• Shortcode Parsing: Translates the [supervised_ai_bot] shortcode into the HTML structure required by the CSS and JS files.

Public Interface & Usage

The plugin's functionality is exposed to the end-user through a simple shortcode interface. This allows you to place a specific chatbot on any page or post.

Shortcode Syntax

[supervised_ai_bot id="X"]

| Attribute | Type | Description | | :--- | :--- | :--- | | id | Integer | The row number of the bot URL as defined in the plugin settings page (e.g., 1 for the first URL). |

Example Implementation

To embed the first chatbot configured in your settings, add the following to your page editor:

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

Internal Component Mapping

For technical users looking to understand how the files interact:

1. Trigger: The user clicks a .circle-button rendered by the plugin.
2. Action: The togglePopup() function in custom-popup-script.js is fired.
3. Display: The .popup-container defined in custom-popup-style.css changes from display: none to display: block.
4. Content: An <iframe> inside the container loads the URL associated with the id provided in the shortcode.