Articom UI

Articom UI is the official Flutter component library designed for building customer engagement interfaces within the Articom ecosystem.

Tailored for Articom's Voice and Chat Agents, this package provides a set of glassmorphic user interface components. It facilitates the integration of AI backend logic with a consistent and responsive frontend experience.

Key Features

AI Voice & Conversational Intelligence

  • Voice Integration: VoicePage and VoiceAssistantButton widgets for connection to Voice Agents and Call Center Automation workflows.
  • Dynamic Chat: ChatInputBar and ChatBubble components supporting text, voice input, and media attachments, optimized for Live Chat and Bot interactions.

Glassmorphism Design System

  • Glassmorphism: A unified design language featuring frosted glass effects for high-depth user interfaces.
  • Visual Consistency: Centralized AppTheme and ThemeManager to ensure branding consistency across the application.

Content Display

  • Interactive Cards: CardComponent, MiniCard, and SwipeCard widgets for presenting products, tickets, or events.
  • Media Support: UniversalVideoCard for embedding video content.

Installation

To use this package in your Flutter project, add the following to your pubspec.yaml file:

dependencies:
  articom_ui:
    git:
      url: https://github.com/Inforwaves/articom-base-mobile.git
      path: packages/articom_ui

Note: This package requires a Flutter SDK version matching your project's configuration.

Usage Example

import 'package:flutter/material.dart';
import 'package:articom_ui/articom_ui.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Articom Demo',
      // Apply the Articom Glass Theme
      theme: AppTheme.lightTheme, 
      darkTheme: AppTheme.darkTheme,
      home: Scaffold(
        body: Center(
          child: VoiceAssistantButton(
            // Trigger Voice Agent
            onPressed: () => print("Listening..."),
          ),
        ),
      ),
    );
  }
}

Component Deep Dive

1. CardComponent

A versatile card widget used for presenting content. It features a glassmorphic design, supports images, titles, descriptions, action buttons, and can expand on interaction.

Parameters:

  • imageUrl (String): Required. URL of the main display image.
  • title (String): Required. The primary title of the card.
  • description (String?): Optional body text describing the content.
  • priceText (String?): Optional price label (e.g., "$25.00").
  • subText (String?): Secondary subtitle text.
  • actions (List
  • size (CardComponentSize): Preset size variant (large, small).
  • showCtaPill (bool): Whether to show the floating glass call-to-action pill.
  • expandOnImageTap (bool): If true, tapping the image opens it in a fullscreen viewer.

2. ChatInputBar

An input bar designed for chat interfaces, supporting text, voice, and file attachments.

Parameters:

  • onSend (Function): Callback when a message is sent (text, attachments).
  • onVoiceTapped (VoidCallback): Handler for the voice/microphone button.
  • helperText (String): Placeholder text (default: 'Ask anything...').
  • enabled (bool): Whether the input is active.
  • backgroundColor (Color?): Custom background color override.

Key Features:

  • Dynamic Actions: The trailing button adapts from "Mic" to "Send" based on input content.
  • Attachment Manager: Built-in UI for picking and previewing files.

3. UniversalVideoCard

A video component that handles multiple video sources including direct MP4s, YouTube, and social embeds (prioritizing WebView for complex embeds).

Parameters:

  • url (String): Required. The video source URL.
  • aspectRatio (double): Aspect ratio of the player (default: ~1.58).
  • playButtonSize (double): Size of the glass play/pause button.
  • directHeaders (Map<String, String>?): Custom HTTP headers for direct streams.

Key Features:

  • Source Detection: Detects YouTube, Direct, or WebView-based sources.
  • Inline & Fullscreen: Plays supported formats inline, with a toggle for fullscreen mode.
  • Social Embeds: Renders social media iframes via WebView.

4. SwipeCard

A swipeable card stack or carousel for browsing image galleries.

Parameters:

  • imageUrls (List
  • width/height (double): Dimensions of the card.
  • borderRadius (double): Corner radius.

5. MiniCard

A compact card component for grids, supporting four layouts based on position.

Parameters:

  • title (String): Required. Title text.
  • imageUrl (String): Required. Image URL.
  • position (CardPosition): Layout variant:
    • top: Image on top, text below.
    • bottom: Text on top, image below.
    • left: Image on left, text on right.
    • right: Text on left, image on right.

6. VoiceAssistantButton

A button to trigger voice interactions, integrating with voice workflows.

Parameters:

  • onPressed (VoidCallback): Trigger action.
  • isListening (bool): Visual state to indicate active listening (pulsing effect).

7. VoicePage

A WebView wrapper optimized for web-based Voice Agents.

Parameters:

  • agentUrl (String): URL of the hosted voice agent.

Key Features:

  • Theme Injection: Injects CSS/JS to match the app's AppTheme.
  • Permission Handling: Management of microphone permissions.

License

MIT License. See LICENSE for details.

Libraries

articom_ui