🇲🇾 GMAiH Chatbot - MyGovHub AI Assistant

A React Native chatbot application built with Expo for the Great Malaysia AI Hackathon. This WhatsApp-style chat interface connects users with MyGovHub's AI-powered government services assistant.

Features

🔐 eKYC Onboarding Flow

• IC Verification: OCR-powered MyKad scanning with real-time validation
• OTP Verification: Email/phone number verification via OTP
• Face Recognition: Biometric face matching using AWS Rekognition
• TNB Account Linking: Bill scanning and account verification
• Secure Registration: Password hashing with salt encryption
• Biometric Authentication: Face ID/Touch ID integration for secure login
• Progress Tracking: 8-step guided onboarding with visual progress indicators

🎙️ Voice Messaging

• Audio Recording: Record voice messages with pause/resume/restart controls
• Real-time Transcription: Automatic speech-to-text using AWS transcription API
• Audio Playback: Play voice messages with waveform visualization
• Transcription Display: View transcribed text in bottom drawer

💬 Rich Messaging

• Text Messages: Markdown-style chat interface with markdown support (bold text)
• Image Sharing: Camera capture and photo library integration
• File Attachments: PDF document sharing with preview

🤖 AI Integration

• MCP API: Connects to MyGovHub Model Context Protocol for AI responses
• Session Management: Maintains conversation context across messages
• Timeout Handling: Robust error handling with retry mechanisms
• Loading States: Visual feedback during API calls

💾 Data Persistence

• SQLite Database: Local storage for messages, users, and TNB accounts
• S3 File Upload: Secure cloud storage for media files
• Message History: Persistent chat history across app sessions
• User Management: Secure user authentication and profile storage

🛠️ Tech Stack

• Framework: React Native with Expo (~54.0.8)
• Navigation: Expo Router with file-based routing
• Database: Expo SQLite for local data storage
• Authentication: Expo Local Authentication (biometrics)
• Camera: Expo Camera for IC/face/document capture
• Audio: Expo Audio for recording and playback
• Security: CryptoJS for password hashing
• Animations: Lottie React Native for loading animations
• UI Components: Custom WhatsApp-style components
• State Management: React hooks and context
• File Handling: Expo Document Picker and Image Picker

📁 Project Structure

├── api/                    # API service layers
│   ├── mcp.ts             # MCP API integration
│   ├── transcribe.ts      # Audio transcription service
│   ├── upload.ts          # S3 file upload service
│   ├── face_rekon.ts      # AWS Rekognition face comparison
│   ├── link_tnb.ts        # TNB bill verification
│   └── payment.ts         # Payment processing (temp)
├── app/                   # Expo Router pages
│   ├── (app)/             # Main app screens
│   │   ├── index.tsx      # Chat list screen
│   │   └── settings.tsx   # User settings
│   ├── (onboarding)/      # eKYC onboarding flow
│   │   ├── index.tsx      # Welcome screen
│   │   ├── login.tsx      # User login
│   │   ├── verify-ic.tsx  # IC verification
│   │   ├── verify-face.tsx# Face verification
│   │   ├── link-tnb.tsx   # TNB account linking
│   │   ├── set-password.tsx# Password setup
│   │   ├── enable-biometrics.tsx# Biometric setup
│   │   └── signup-success.tsx# Completion screen
│   └── _layout.tsx        # Root layout
├── components/            # Reusable UI components
│   ├── OnboardingScreen.tsx# Consistent onboarding UI
│   ├── loading-animation.tsx# Lottie loading component
│   └── whatsapp/          # WhatsApp-style components
├── services/              # Core services
│   └── database.ts        # SQLite database setup
├── context/               # React context providers
│   ├── AuthContext.tsx    # User authentication
│   └── OnboardingContext.tsx# Onboarding state management
└── constants/             # App constants and themes

⚙️ Setup & Installation

1. Clone the repository

   git clone <repository-url>
   cd GMAiH-Chatbot

2. Install dependencies

   npm install

3. Environment Configuration

   cp .env.example .env

   Configure the following environment variables:

   EXPO_PUBLIC_MCP_API_BASE_URL=your_mcp_api_url
   EXPO_PUBLIC_UPLOAD_SERVICE_URL=your_s3_upload_url
   EXPO_PUBLIC_TRANSCRIBE_API_URL=your_transcription_api_url
   EXPO_PUBLIC_API_GATEWAY_URL=your_api_gateway_url
   EXPO_PUBLIC_EKYC_VERIFY_USERID_API_URL=your_ic_verification_api
   EXPO_PUBLIC_EKYC_FACE_REKON_API_URL=your_face_recognition_api
   EXPO_PUBLIC_EKYC_VERIFY_TNB_API_URL=your_tnb_verification_api
   

4. Start the development server

   npm run android   # For Android
   npm run ios       # For iOS

👨‍💻 Development

🚀 Running on Different Platforms

• iOS Simulator: npx expo run:android
• iOS Simulator: npx expo run:ios
• Android Emulator: npx expo run:android
• Web Browser: npx expo start --web

🔧 Key Components

• Onboarding Flow (app/(onboarding)/): Complete eKYC registration process with IC scanning, face verification, and TNB linking
• OnboardingScreen Component (components/OnboardingScreen.tsx): Reusable UI wrapper for consistent onboarding experience
• Chat Interface (app/(app)/index.tsx): Main chat screen with voice recording, message rendering, and AI integration
• Message Components (components/whatsapp/): WhatsApp-style UI components for messages, attachments, and interactions
• Database Service (services/database.ts): SQLite schema for users, messages, and TNB accounts
• Context Providers (context/): State management for authentication and onboarding data

🌐 API Integration

The app integrates with six main APIs:

1. MCP API: Handles AI chat responses and conversation management
2. Transcription API: Converts audio recordings to text
3. Upload API: Manages file uploads to S3 storage
4. IC Verification API: OCR processing for MyKad document scanning
5. Face Recognition API: AWS Rekognition for biometric face matching
6. TNB Verification API: Bill scanning and account number extraction

📋 Features in Detail

🔐 eKYC Onboarding Process

1. Welcome & Login: Initial screen with existing user login option
2. IC Verification: Camera capture of MyKad with OCR validation
3. Face Verification: Selfie capture with biometric matching against IC photo
4. TNB Account Linking: Optional bill scanning for utility account integration
5. Password Setup: Secure password creation with hashing
6. Email/Phone Verification: Contact information validation
7. Biometric Setup: Optional Face ID/Touch ID enrollment
8. Success Screen: Registration completion with app access

🎙️ Voice Recording Flow

1. User taps microphone icon to start recording
2. Recording modal shows with timer and waveform visualization
3. User can pause, resume, restart, or stop recording
4. Audio is uploaded to S3 and transcribed automatically
5. Transcribed text is sent to MCP API for AI response

💬 Message Types

• Text: Standard text messages with markdown formatting
• Audio: Voice messages with playback controls and transcription
• Images: Photos from camera or gallery with full-screen viewer
• Files: PDF documents with download/preview functionality

🗄️ Database Schema

• users: User profiles with encrypted passwords and biometric data
• messages: Chat messages with attachments and metadata
• tnbAccounts: Linked TNB utility accounts per user

🔒 Security Features

• Password Encryption: SHA256 hashing with random salt generation
• Biometric Authentication: Face ID/Touch ID integration
• Secure Storage: AsyncStorage for sensitive user preferences
• Face Matching: AWS Rekognition for identity verification

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📄 License

This project was created for the Great Malaysia AI Hackathon.