Popup State Management

The Supervised AI Bot uses a lightweight JavaScript controller to manage the visibility of the chatbot interface. This state management is handled through two primary functions that interact with the Document Object Model (DOM) to show or hide the chatbot container.

JavaScript API

`togglePopup()`

This is the primary function used to switch the chatbot's visibility. It acts as a toggle switch between the "open" and "closed" states.

Behavior:
- Checks the current display style of the element with the ID popup.
- If the element is currently visible (display: block), it hides it.
- If the element is hidden, it displays it.
Usage: Typically bound to the .circle-button element (the floating action button) to allow users to open and close the chat at will.

// Example: Manual trigger from a custom button
<button onclick="togglePopup()">Chat with us</button>

`closePopup()`

This function provides an explicit instruction to hide the chatbot interface, regardless of its current state.

Behavior:
- Directly sets the display style of the element with the ID popup to none.
Usage: Used for "close" icons within the chat header or programmatically dismissing the chat after a specific user action.

// Example: Closing the popup programmatically
closePopup();

Implementation Requirements

For these functions to operate correctly within your WordPress theme or custom implementation, the following structural requirements must be met:

Element ID: The chatbot container must have the ID popup.
Initial State: The container should default to display: none in your CSS (as defined in the custom-popup-style.css) to ensure the bot is hidden on page load.
Z-Index: The state management functions interact with elements that have high z-index values (9999 for the button and 1001 for the popup) to ensure the UI remains accessible over other page content.

Summary of State Transitions