GROQ Chat Application

A Flutter chat application with AI integration using GROQ API. Built with clean architecture, BLoC state management, and dependency injection.

ScreenRecording_08-15-2025.10-27-25_1.MP4

Features

• GROQ AI Integration: Real-time chat with GROQ's LLaMA model
• Text-Only Chat: Send and receive text messages only
• Clean Architecture: Feature-based folder structure with dependency injection
• BLoC State Management: Reactive state management with flutter_bloc
• Message Distinction: Clear visual distinction between user and AI messages
• Send Restrictions: Disabled send button while waiting for AI response
• Modern UI: Material 3 design with light/dark theme support
• Environment Configuration: Secure API key management with .env files

Architecture

Clean Architecture with Feature-Based Structure

lib/
├── core/                           # Shared application core
│   ├── config/
│   │   └── app_config.dart         # Application configuration
│   ├── constants/
│   │   └── app_constants.dart      # App-wide constants
│   ├── di/
│   │   └── service_locator.dart    # GetIt dependency injection setup
│   └── theme/
│       └── app_theme.dart          # Material 3 theme configuration
├── features/                       # Feature-based modules
│   └── chat/
│       ├── bloc/                   # State management
│       │   ├── chat_bloc.dart      # BLoC implementation
│       │   └── chat_event.dart     # Chat events
│       ├── models/                 # Data models
│       │   ├── message.dart        # Message entity
│       │   └── chat_state.dart     # Chat state model
│       ├── screens/                # UI screens
│       │   └── chat_screen.dart    # Main chat interface
│       ├── services/               # Business logic
│       │   └── message_service.dart # GROQ API service
│       └── widgets/                # Reusable UI components
│           ├── chat_input.dart     # Message input component
│           ├── message_bubble.dart # Message display component
│           └── message_list.dart   # Messages list with scroll
└── main.dart                       # App entry point & DI initialization

Key Architectural Patterns

• Feature-Based Organization: Each feature is self-contained with its own models, services, and UI
• Dependency Injection: GetIt service locator for singleton management
• Environment Configuration: Secure API key management with flutter_dotenv
• BLoC Pattern: Reactive state management with clear separation of concerns
• Repository Pattern: Abstract service interfaces for testability

Dependencies

Core Dependencies

• flutter_bloc: Reactive state management
• get_it: Dependency injection service locator
• flutter_dotenv: Environment variable management
• http: HTTP client for API calls

Utilities

• equatable: Value equality for models
• uuid: Unique message ID generation
• intl: Date/time formatting

Getting Started

Prerequisites

• Flutter SDK 3.6.2+
• GROQ API key (Get one here)

Setup

1. Clone and install dependencies:

   cd it_3264_groq
   flutter pub get

2. Configure environment:

   # Edit .env file and add your GROQ API key
   GROQ_API_KEY=your_actual_groq_api_key_here

3. Run the app:

   flutter run

Usage

1. Text Chat: Type your message in the input field and tap send to chat with GROQ AI
2. Real-time Responses: Watch the typing indicator while GROQ generates responses
3. Message History: View conversation history with timestamps
4. Clear Chat: Use the refresh button in the app bar to start a new conversation

Technical Details

State Management

• ChatBloc: Manages conversation state and AI interactions
• ChatEvent: Defines user actions (send message, clear chat, etc.)
• ChatState: Immutable state with message history and loading states
• GetIt: Singleton service registration and dependency resolution

AI Integration

• GroqMessageService: Handles communication with GROQ API
• LLaMA Model: Uses llama-3.1-70b-versatile model
• Error Handling: Graceful degradation for API failures
• Rate Limiting: Built-in request management

Security

• Environment Variables: API keys stored securely in .env files
• Git Ignored: Sensitive data excluded from version control

UI/UX Features

• Message Distinction: Different colors and alignments for user vs AI messages
• Send Button State: Disabled while waiting for AI response
• Typing Indicator: Animated dots showing AI is responding
• Empty State: Helpful onboarding when chat is empty

Package Information

• Package Name: com.extrawest.okholiavko.groq
• App Name: GROQ Chat
• Version: 1.0.0+1

Customization

UI Customization

• Themes: Modify AppTheme in core/theme/app_theme.dart
• Colors: Update AppColors class for custom message styling
• Constants: Adjust UI constants in core/constants/app_constants.dart

AI Configuration

• Model Selection: Change GROQ model in AppConstants.groqModel
• API URL: Modify endpoint in AppConstants.groqApiUrl
• Response Handling: Customize AI response processing in GroqMessageService

Future Enhancements

Potential Features

• Message Search: Find previous conversations
• Export Chat: Save conversations as text files
• Message Reactions: Add emoji reactions to messages
• Voice Input: Speech-to-text integration
• Multiple Conversations: Support for multiple chat sessions

Technical Improvements

• Offline Support: Local message caching
• Performance: Message virtualization for large conversations
• Testing: Unit and integration test coverage
• CI/CD: Automated build and deployment pipeline

📝 License

This project is licensed under the BSD-3-Clause license License - see the LICENSE file for details.

👥 Authors

Created by Oleksandr Kholiavko
Extrawest.com, 2025