Ui Component Inventory Mobile

Mon, 01 Jan 0001 00:00:00 +0000

For mobile developers. A reference catalogue of the Flutter app widgets.

Summary

Total Dart Files: 76
UI Components: 14
Design System Components: 6
Design System Tokens: 5
Services: 12
Config: 5
i18n Locales: 13

Design System (`lib/design_system/`)

DS Components (`lib/design_system/components/`)

Component	Description
`ds_button.dart`	Button primitive with variants (primary, secondary, ghost, danger)
`ds_card.dart`	Container card with elevation and border radius
`ds_input.dart`	Text input field with label, validation states, and error messaging
`ds_modal.dart`	Modal dialog overlay with content slot
`ds_spinner.dart`	Loading spinner animation (circular progress indicator)
`ds_state_display.dart`	Empty/error/loading state display component

DS Tokens (`lib/design_system/tokens/`)

Token File	Description
`app_tokens.dart`	Global design tokens (typography, colors, spacing scale)
`color_utils.dart`	Color utilities (lighten, darken, opacity, theme mapping)
`spacing.dart`	Spacing scale constants (xs, sm, md, lg, xl)
`radii.dart`	Border radius tokens (sm, md, lg, xl, full)

DS Theme (`lib/design_system/theme/`)

File	Description
`app_theme.dart`	Material theme configuration (light/dark, color schemes)

Chat Components (`lib/components/chat/`)

Component	Description
`chatbot_component.dart`	Main chat interface with message list and input area
`right_sidebar_component.dart`	Right sidebar displaying context, documents, or service info
`chat_response_feedback_dialog.dart`	Feedback dialog for rating chat responses (thumbs up/down)
`web_file_utils.dart`	File utility functions for web platform
`stub_file_utils.dart`	File utility stubs for non-web platforms
`right_sidebar_stub.dart`	Stub implementation for right sidebar (conditional compilation)

Sidebar Components (`lib/components/sidebar/`)

Component	Description
`sidebar_component.dart`	Left sidebar with conversation history and navigation
`chat_folders_panel.dart`	Conversation folder management (create, rename, delete)
`service_tree_panel.dart`	Hierarchical tree view of service categories

Authentication Components (`lib/components/auth/`)

Component	Description
`oidc_login_screen.dart`	OIDC login screen with Keycloak authentication flow

User Components (`lib/components/user/`)

Component	Description
`user_profile_component.dart`	User profile display and edit form

Settings Components (`lib/components/settings/`)

Component	Description
`settings_component.dart`	Application settings panel (theme, language, preferences)
`about_screen.dart`	About screen with app version, license, and links

Shared Components (`lib/components/shared/`)

Component	Description
`nav_bar_component.dart`	Bottom navigation bar (mobile app navigation)
`confirm_dialog.dart`	Generic confirmation dialog (confirm/cancel actions)
`language_selector.dart`	Language selection dropdown for i18n

Application Structure (`lib/src/`)

File	Description
`app.dart`	Root app widget with router and global providers
`sample_feature/`	Sample feature code (Flutter template, may be unused)
`settings/`	Settings controller and service (legacy, may be unused)
`localization/`	App localization delegates

Services (`lib/services/`)

Authentication Services (`lib/services/auth/`)

Service	Description
`app_auth.dart`	Authentication state management and token handling
`auth_interceptor.dart`	HTTP request interceptor for auth token injection
`auth_logger.dart`	Authentication event logging
`auth_notifier.dart`	Authentication state change notifications
`auth_state.dart`	Authentication state enum and data classes
`auth_providers.dart`	Riverpod providers for auth services
`token_storage.dart`	Secure token storage (Keychain/Keystore)
`connectivity_checker.dart`	Network connectivity status checker
`network_error_classifier.dart`	Network error classification and retry logic
`insecure_http_client.dart`	HTTP client for dev environments (bypasses SSL)

Other Services (`lib/services/`)

Service	Description
`keycloak/keycloak_service.dart`	Keycloak OIDC service wrapper
`connectivity_service.dart`	Network connectivity monitoring
`notification_service.dart`	Push notification handling
`user_service.dart`	User profile and preferences service
`i18n_service.dart`	Internationalization service
`genie_ai_config.dart`	GENIE.AI configuration loader
`fallback_localizations.dart`	Fallback localization delegates
`sse_parser.dart`	Server-Sent Events (SSE) stream parser

Configuration (`lib/config/`)

File	Description
`keycloak_config.dart`	Keycloak OIDC client configuration
`dev_config.dart`	Development environment configuration
`staging_config.dart`	Staging environment configuration
`e2e_config.dart`	E2E testing configuration
`flavors/itu.dart`	ITU flavor-specific configuration
`flavors/template.dart`	Flavor configuration template

Providers (`lib/providers/`)

File	Description
`api_providers.dart`	Riverpod providers for API clients

Utilities (`lib/utils/`)

File	Description
`theme_manager.dart`	Theme switching and persistence
`chart_theme_utils.dart`	Chart theme utilities (for analytics charts)
`dialog_theme_utils.dart`	Dialog theme utilities

Internationalization (`lib/i18n/locales/`)

Supported languages (14 locales):

Mobile Architecture

Mon, 01 Jan 0001 00:00:00 +0000

For mobile developers and integrators. The Flutter app’s architecture — layers, state, and platform integration.

Overview

The Flutter mobile app (genie_ai_mobile) is a sophisticated AI chat application with OIDC authentication, multi-language support, and responsive design patterns.

1. API Layer

Service & Provider Layer

The app does not use a proxy pattern. API access is structured around Riverpod providers and a thin set of domain services:

Riverpod providers (lib/providers/api_providers.dart) — define the API calls (chat/query, feedback, user profile, analytics, admin) as providers consumed by the UI.
Domain services (lib/services/):
- user_service.dart — user profile operations.
- connectivity_service.dart — network connectivity state.
- i18n_service.dart — locale and translation orchestration.
- notification_service.dart, sse_parser.dart, genie_ai_config.dart, fallback_localizations.dart.
- auth/ and keycloak/ subdirectories — OIDC auth state, token storage, and Keycloak integration.

The flavor-specific base URL comes from the flavor config (see §2).

Mobile Deployment Guide

Mon, 01 Jan 0001 00:00:00 +0000

Overview

This guide walks deployment technicians through creating a new institutional deployment of the GENIE.AI mobile app. Each deployment produces a dedicated build with its own app ID, Keycloak client, backend URL, and deep link scheme — all compiled at build-time via Flutter flavors.

Target audience: Deployment technicians familiar with Flutter, Gradle, Xcode, and Docker.

Estimated time: Under a day for a single deployment.

Prerequisites

Requirement	Purpose
Flutter SDK 3.10+	Build the mobile app
Android Studio (with SDK)	Android builds, Gradle, emulator
Xcode 14+ (macOS only)	iOS builds, signing, IPA creation
Docker + Docker Compose	Run Keycloak locally for testing
Device or emulator	End-to-end validation
Access to deployment `.env`	Configure Keycloak client and redirect scheme
Keystore for Android signing	Release builds (see Step 5: Android Signing)

Step 1: Environment Variables

Add two required variables to the deployment .env file:

Mobile (genie_ai_mobile) on GENIE.AI

Ui Component Inventory Mobile

Summary

Design System (lib/design_system/)

DS Components (lib/design_system/components/)

DS Tokens (lib/design_system/tokens/)

DS Theme (lib/design_system/theme/)

Chat Components (lib/components/chat/)

Sidebar Components (lib/components/sidebar/)

Authentication Components (lib/components/auth/)

User Components (lib/components/user/)

Settings Components (lib/components/settings/)

Shared Components (lib/components/shared/)

Application Structure (lib/src/)

Services (lib/services/)

Authentication Services (lib/services/auth/)

Other Services (lib/services/)

Configuration (lib/config/)

Providers (lib/providers/)

Utilities (lib/utils/)

Internationalization (lib/i18n/locales/)

Mobile Architecture

Overview

1. API Layer

Service & Provider Layer

Mobile Deployment Guide

Overview

Prerequisites

Step 1: Environment Variables

Design System (`lib/design_system/`)

DS Components (`lib/design_system/components/`)

DS Tokens (`lib/design_system/tokens/`)

DS Theme (`lib/design_system/theme/`)

Chat Components (`lib/components/chat/`)

Sidebar Components (`lib/components/sidebar/`)

Authentication Components (`lib/components/auth/`)

User Components (`lib/components/user/`)

Settings Components (`lib/components/settings/`)

Shared Components (`lib/components/shared/`)

Application Structure (`lib/src/`)

Services (`lib/services/`)

Authentication Services (`lib/services/auth/`)

Other Services (`lib/services/`)

Configuration (`lib/config/`)

Providers (`lib/providers/`)

Utilities (`lib/utils/`)

Internationalization (`lib/i18n/locales/`)