Agent - Context

Contexts are CSS configurations that determine how the Agent panel displays alongside your WordPress content. They ensure the agent screen integrates properly with different WordPress environments.

Understanding Contexts

When you open Agent mode, the current WordPress screen needs to adjust its layout to accommodate the agent panel on the left. A context defines the CSS rules needed to make this work for different types of pages.

Think of contexts as layout adapters. The block editor needs different adjustments than a standard admin page because they have different DOM structures and positioning requirements.

How Contexts Work

Contexts are detected automatically based on a CSS class on the body element. When you open Agent mode, SleekAI checks which context matches the current page and applies the appropriate CSS rules.

Each context defines:

• selector.bodyClass: The body class that identifies this environment
• styling.needsTopPadding: Whether the content needs top padding adjustment
• styling.needsBottomPadding: Whether the content needs bottom padding adjustment
• styling.css: An array of CSS rules to apply to specific elements

Built-in Contexts

SleekAI includes contexts for common WordPress environments:

wp-admin

Used for standard WordPress admin pages. Detected by the wp-admin body class. Adjusts the admin bar and main content area to fit alongside the agent panel.

block-editor

Optimized for the Gutenberg block editor. Detected by the block-editor-page body class. Handles the unique layout requirements of the full-screen editor, including the sidebar, notices, and modal overlays.

Context vs Mode

It's important to understand the difference:

• Context: CSS configuration that makes the layout work. Detected automatically based on body class. Handles display concerns only.
• Mode: AI assistant configuration. Chosen by the user. Determines what the AI knows and can do.

You can use any mode within any context. The context just ensures the Agent panel displays correctly. The mode determines what kind of help the AI provides.

Registering Custom Contexts

Use Agent::registerContext() to register contexts for custom admin screens.

            use SleekAi\Agent\Agent;

    Agent::registerContext([
      'id' => 'my-plugin-admin',
      'selector' => [
        'bodyClass' => 'my-plugin-admin-page',
      ],
      'styling' => [
        'needsTopPadding' => true,
        'needsBottomPadding' => true,
        'css' => [
          [
            'selector' => '#wpadminbar',
            'styles' => [],
            'watchSelector' => '#wpadminbar',
            'visibleStyles' => [
              'inset-inline-start' => 'var(--sleekai-agent-width)',
              'width' => 'calc(100% - var(--sleekai-agent-width))',
            ],
          ],
          [
            'selector' => '.my-plugin-container',
            'styles' => [
              'margin-left' => 'var(--sleekai-agent-width)',
            ],
          ],
        ],
      ],
    ]);
  
                    

                Copy
                
                                 
            
            

CSS Rule Properties

Each CSS rule in the css array can have:

• selector: The CSS selector to target
• styles: CSS properties to always apply
• watchSelector: An element to observe for visibility changes
• visibleStyles: CSS properties to apply when the watched element is visible
• hiddenStyles: CSS properties to apply when the watched element is hidden

CSS Variables

These CSS variables are available in your rules:

• --sleekai-agent-width - Width of the agent panel
• --sleekai-context-gap - Gap between agent panel and content
• --sleekai-toolbar-height - Height of the agent toolbar

When to Create a Custom Context

Create a custom context when:

• Agent mode doesn't display correctly on your custom admin page
• Your plugin has a full-screen interface that needs special handling
• You're building a page builder or other complex admin UI

If your admin page uses standard WordPress admin markup, the wp-admin context should work automatically.