AI Operator Flyout

Estimated reading: 4 minutes 97 views

The AI Operator Flyout is an advanced feature available in selected FlutKit products, including Ademin. It brings an AI assistant and workspace tools directly into your portal layout through a multi-tab side drawer (flyout), providing access to chat threads, AI agents, action shortcuts, insights, operational logs, and settings.

1. Quick Start & Enabling AI Operator

To activate the AI Operator widget, pass an AIFlyoutConfig object into the aiFlyout parameter of your PortalMasterLayout:

Dart

PortalMasterLayout(
  aiFlyout: AIFlyoutConfig(
    enabled: true,
    dataSource: StaticDataSource(mockData),
    drawerWidth: 640,
    badgeCount: mockData.conversations.fold<int>(
      0,
      (sum, conversation) => sum + conversation.unreadCount,
    ),
  ),
  body: YourMainContentWidget(),
)

PortalMasterLayout(
  aiFlyout: AIFlyoutConfig(
    enabled: true,
    dataSource: StaticDataSource(mockData),
    drawerWidth: 640,
    badgeCount: mockData.conversations.fold<int>(
      0,
      (sum, conversation) => sum + conversation.unreadCount,
    ),
  ),
  body: YourMainContentWidget(),
)

2. Configuration Parameters (`AIFlyoutConfig`)

The AIFlyoutConfig object allows you to control the behavior, data feeds, and appearance of the AI Operator flyout:

Parameter	Type	Description
`enabled`	`bool`	Toggles the visibility and availability of the AI Operator trigger button and side drawer.
`dataSource`	`AIDataSource`	Sets the data provider (e.g., `StaticDataSource(mockData)`) that feeds conversations, agent states, insights, and logs to the drawer.
`drawerWidth`	`double`	Defines the width of the slide-out side drawer in logical pixels (default standard: `640`).
`badgeCount`	`int`	Controls the numerical notification badge displayed on the AI trigger button (typically calculated from unread chat count).

3. Directory & File Structure

All source code and components for the AI Operator are located at:

lib/widgets/ai/ai_flyout/

Plaintext

Markdown

lib/widgets/ai/ai_flyout/
├── models/
│   ├── ai_action_model.dart
│   ├── ai_activity_model.dart
│   ├── ai_agent_model.dart
│   ├── ai_chat_model.dart
│   ├── ai_history_model.dart
│   ├── ai_insight_model.dart
│   ├── ai_logs_model.dart
│   ├── ai_operator_model.dart
│   └── ai_settings_model.dart
├── ai_actions_tab.dart
├── ai_agents_tab.dart
├── ai_chat_input_bar.dart
├── ai_chat_tab.dart
├── ai_filter_tab.dart
├── ai_flyout_button.dart
├── ai_flyout_host.dart
├── ai_insight_helpers.dart
├── ai_insights_tab.dart
├── ai_logs_tab.dart
└── ai_settings_tab.dart

lib/widgets/ai/ai_flyout/
├── models/
│   ├── ai_action_model.dart
│   ├── ai_activity_model.dart
│   ├── ai_agent_model.dart
│   ├── ai_chat_model.dart
│   ├── ai_history_model.dart
│   ├── ai_insight_model.dart
│   ├── ai_logs_model.dart
│   ├── ai_operator_model.dart
│   └── ai_settings_model.dart
├── ai_actions_tab.dart
├── ai_agents_tab.dart
├── ai_chat_input_bar.dart
├── ai_chat_tab.dart
├── ai_filter_tab.dart
├── ai_flyout_button.dart
├── ai_flyout_host.dart
├── ai_insight_helpers.dart
├── ai_insights_tab.dart
├── ai_logs_tab.dart
└── ai_settings_tab.dart

4. Component Breakdown

Data Models (`/models`)

ai_action_model.dart: Data structures representing executable AI tasks and quick action shortcuts.
ai_activity_model.dart: Models tracking recent activity history and execution logs.
ai_agent_model.dart: Defines available AI agents, their operational statuses, and capacities.
ai_chat_model.dart: Models for messaging threads, prompt payloads, and chat histories.
ai_history_model.dart: Historical records of prior user queries and model outputs.
ai_insight_model.dart: Analytics, telemetry metrics, and AI-generated dynamic insights.
ai_logs_model.dart: System log event data structures.
ai_operator_model.dart: The core composite model combining states for the AI Operator flyout.
ai_settings_model.dart: Configuration options for custom AI behavior and preferences.

UI Shell & Core Widgets

ai_flyout_host.dart: Main container widget hosting the side drawer layout, tab navigation headers, and dynamic tab switcher.
ai_flyout_button.dart: Trigger button rendered in the header or layout floating bar, featuring an unread badge indicator (badgeCount).
ai_chat_input_bar.dart: Specialized input field widget equipped with action triggers, prompt submission controls, and attachment buttons.
ai_insight_helpers.dart: Utility components and UI builders used for rendering charts, key performance indicators (KPIs), and insight cards.

Tab Views

ai_chat_tab.dart: Primary conversational interface tab.
ai_actions_tab.dart: Tab listing available automated shortcuts and bulk action macros.
ai_agents_tab.dart: Tab displaying available AI agent persona profiles and active states.
ai_insights_tab.dart: Visual dashboard tab showcasing generated AI recommendations and data metrics.
ai_logs_tab.dart: Operational view tab listing detailed AI query traces and event logs.
ai_filter_tab.dart: Contextual tab facilitating filtering and search parameters across chats and logs.
ai_settings_tab.dart: Settings view for model selection, agent behavior customization, and panel preferences.