Popup UI Mechanics

The wpai plugin employs a non-intrusive, floating interface designed to provide instant access to the Supervised AI chatbot without disrupting the user's browsing experience. This interface consists of two primary components: the Floating Action Button (FAB) and the Chat Overlay Container.

Floating Action Button (FAB)

The entry point for the chatbot is a persistent circular button located at the bottom-right corner of the screen.

Visibility: The button is set with a high z-index (9999) to ensure it remains visible above all other page elements.
Interaction: Clicking this button triggers the togglePopup() function, which alternates the visibility of the chatbot interface.
Visual Style: By default, the button is a 60x60px blue circle (#007bff) containing the chat trigger icon.

Chat Overlay Container

When activated, the chatbot appears within a fixed-position container. This container is optimized for readability and interaction while maintaining a compact footprint.

Dimensions and Positioning

Location: Fixed to the bottom-right of the viewport (20px margin from the edges).
Default Size: The container is set to a width of 400px and a height of 670px.
Responsive Width: It supports a max-width of 800px, allowing for flexibility on larger screens if CSS overrides are applied.

Content Delivery (Iframe)

The chatbot content is served via an iframe nested within an .iframe-container. This ensures that the Supervised AI logic remains isolated from the WordPress theme's styles, preventing CSS conflicts.

Interaction Logic

The UI state is managed through two primary JavaScript functions. While these are handled automatically by the plugin, understanding them is useful for developers looking to trigger the popup programmatically.

`togglePopup()`

Switches the display state of the chatbot. If the chat window is hidden, it will open; if it is open, it will close.

// Example: Programmatically toggling the chat window
togglePopup();

`closePopup()`

Explicitly hides the chatbot container regardless of its current state.

// Example: Closing the chat window via a custom event
closePopup();

UI Customization

The interface is styled using standard CSS classes. Users with technical knowledge can override these styles in their theme's "Additional CSS" section to match their brand identity.

Example: Changing the Button Color To change the floating button to a different brand color (e.g., Green), you can apply the following CSS:

.circle-button {
    background-color: #28a745 !important;
}