AI Operator Flyout

Estimated reading: 4 minutes 17 views

The AI Operator component in Ademin Flutkit brings an AI assistant and workspace tools directly into your portal layout. It provides a multi-tab side drawer (flyout) capable of handling 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.