@digilogiclabs/create-saas-app 1.17.1 → 1.18.0

package/src/templates/mobile/ui-auth-payments-ai-rag/template/README.md

@@ -0,0 +1,655 @@
+# Mobile AI Knowledge App with RAG v4.0.0
+
+A powerful React Native/Expo application with AI-powered knowledge base using Retrieval-Augmented Generation (RAG), featuring offline support, voice input, and native mobile optimizations.
+
+## 📱 Mobile-First Features
+
+### AI & Knowledge Base
+- **RAG-Powered Chat**: Intelligent conversations with your knowledge base
+- **Voice Input**: Speak your queries with native speech recognition
+- **Offline Mode**: Cached responses and queued queries for offline use
+- **Touch-Optimized UI**: Native mobile interactions and gestures
+- **Push Notifications**: Real-time updates for new knowledge
+- **Haptic Feedback**: Enhanced tactile user experience
+
+### Native Integrations
+- **Camera Integration**: Scan documents to add to knowledge base
+- **File System Access**: Import documents from device storage
+- **Background Sync**: Knowledge updates while app is backgrounded
+- **Biometric Auth**: Face ID/Touch ID for secure access
+- **Deep Linking**: Share knowledge items with native URLs
+
+### Performance Optimizations
+- **Lazy Loading**: Efficient memory usage with virtualized lists
+- **Image Caching**: Optimized asset loading and caching
+- **Bundle Splitting**: Reduced initial app size
+- **Native Performance**: 60fps animations and smooth scrolling
+
+## 🏗️ Architecture
+
+```
+app/
+├── (tabs)/                # Tab-based navigation
+│   ├── ai.tsx            # Main AI interface
+│   ├── knowledge.tsx     # Knowledge management
+│   └── analytics.tsx     # Usage analytics
+├── auth/                 # Authentication screens
+│   ├── login.tsx
+│   └── signup.tsx
+├── onboarding/          # First-time user experience
+hooks/
+├── useRAGSystem.ts      # Core RAG functionality
+├── useOfflineSync.ts    # Offline synchronization
+└── useVoiceInput.ts     # Voice recognition
+lib/
+├── rag/
+│   ├── config.ts        # Mobile-optimized RAG config
+│   └── cache.ts         # Offline caching strategy
+├── supabase.ts          # Mobile Supabase client
+└── storage.ts           # AsyncStorage utilities
+```
+
+## 🛠️ Quick Start
+
+### 1. Installation
+
+```bash
+# Create new mobile project
+npm create saas-app my-mobile-ai-app --template=mobile-ai-rag
+
+# Navigate to project
+cd my-mobile-ai-app
+
+# Install dependencies
+npx expo install
+```
+
+### 2. Environment Setup
+
+Create `.env.local`:
+
+```env
+# Supabase Configuration
+EXPO_PUBLIC_SUPABASE_URL=your_supabase_url
+EXPO_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
+
+# OpenAI Configuration (client-side - use cautiously)
+EXPO_PUBLIC_OPENAI_API_KEY=your_openai_api_key
+
+# App Configuration
+APP_VARIANT=development
+EAS_PROJECT_ID=your_eas_project_id
+```
+
+**⚠️ Important**: Environment variables in React Native are embedded in the build. Use server-side API routes for sensitive operations in production.
+
+### 3. Database Setup
+
+```bash
+# Setup RAG system
+npm run setup:rag
+
+# Seed with mobile-optimized knowledge
+npm run seed:knowledge
+```
+
+### 4. Development
+
+```bash
+# Start Expo development server
+npx expo start
+
+# Run on iOS simulator
+npx expo start --ios
+
+# Run on Android emulator
+npx expo start --android
+
+# Open in Expo Go app
+# Scan the QR code with your phone
+```
+
+## 📱 Mobile-Specific Usage
+
+### Voice-Enabled Chat
+
+```typescript
+import { useRAGSystem } from '@/hooks/useRAGSystem'
+import { RAGChatPanel } from '@digilogiclabs/saas-factory-ui/native'
+
+export default function ChatScreen() {
+  const ragSystem = useRAGSystem({
+    domain: 'generic',
+    enableOffline: true,
+    enableVoice: true
+  })
+
+  return (
+    <RAGChatPanel
+      ragSystem={ragSystem.ragSystem}
+      enableVoiceInput={true}
+      enableOfflineMode={true}
+      mobileOptimized={true}
+      showSources={true}
+      showConfidenceScore={false} // Simplified for mobile
+    />
+  )
+}
+```
+
+### Offline-First Knowledge Management
+
+```typescript
+import { useOfflineSync } from '@/hooks/useOfflineSync'
+
+export default function KnowledgeScreen() {
+  const ragSystem = useRAGSystem()
+  const offlineSync = useOfflineSync({
+    syncInterval: 300000, // 5 minutes
+    autoSync: true
+  })
+
+  return (
+    <KnowledgeManagementPanel
+      ragSystem={ragSystem.ragSystem}
+      offlineMode={!ragSystem.isOnline}
+      syncStatus={offlineSync.status}
+      onSync={offlineSync.syncNow}
+    />
+  )
+}
+```
+
+### Native UI Components
+
+```typescript
+import {
+  TabbedInterface,
+  SwipeableCard,
+  VirtualScrollList,
+  NativeFeatureHighlight
+} from '@digilogiclabs/saas-factory-ui/native'
+
+// Swipeable knowledge cards
+<SwipeableCard
+  rightActions={[
+    { label: 'Edit', color: '#3b82f6', onPress: handleEdit },
+    { label: 'Delete', color: '#ef4444', onPress: handleDelete }
+  ]}
+>
+  <KnowledgeCard item={knowledge} />
+</SwipeableCard>
+
+// High-performance lists
+<VirtualScrollList
+  data={knowledgeItems}
+  renderItem={renderKnowledgeItem}
+  estimatedItemSize={120}
+  onEndReached={loadMore}
+/>
+```
+
+## 🔄 Offline Capabilities
+
+### Caching Strategy
+```typescript
+// lib/rag/cache.ts
+export class MobileRAGCache {
+  private cache = new Map<string, CachedResponse>()
+  private maxSize = 100 // Configurable cache size
+
+  async getCached(query: string): Promise<RAGResponse | null> {
+    const cached = this.cache.get(query)
+    if (cached && !this.isExpired(cached)) {
+      return cached.response
+    }
+    return null
+  }
+
+  async setCached(query: string, response: RAGResponse) {
+    if (this.cache.size >= this.maxSize) {
+      this.evictOldest()
+    }
+    this.cache.set(query, {
+      response,
+      timestamp: Date.now(),
+      expiresAt: Date.now() + (24 * 60 * 60 * 1000) // 24 hours
+    })
+  }
+}
+```
+
+### Offline Queue Management
+```typescript
+// hooks/useOfflineSync.ts
+export function useOfflineSync() {
+  const [offlineQueue, setOfflineQueue] = useState<OfflineQuery[]>([])
+
+  const queueQuery = async (query: string) => {
+    const offlineQuery: OfflineQuery = {
+      id: uuid(),
+      query,
+      timestamp: new Date(),
+      synced: false
+    }
+
+    setOfflineQueue(prev => [...prev, offlineQuery])
+    await AsyncStorage.setItem('offline_queue', JSON.stringify(offlineQueue))
+  }
+
+  const syncQueue = async () => {
+    // Process queued queries when online
+    for (const query of offlineQueue) {
+      try {
+        await ragSystem.query(query.query)
+        query.synced = true
+      } catch (error) {
+        console.error('Sync failed:', error)
+      }
+    }
+  }
+}
+```
+
+## 🎤 Voice Integration
+
+### Speech-to-Text
+```typescript
+import { useVoiceRecognition } from '@/hooks/useVoiceRecognition'
+
+export function VoiceInput() {
+  const {
+    isListening,
+    transcript,
+    startListening,
+    stopListening,
+    clearTranscript
+  } = useVoiceRecognition({
+    language: 'en-US',
+    continuous: false,
+    interimResults: true
+  })
+
+  return (
+    <TouchableOpacity
+      onPress={isListening ? stopListening : startListening}
+      style={styles.voiceButton}
+    >
+      <Mic color={isListening ? '#ef4444' : '#3b82f6'} size={24} />
+    </TouchableOpacity>
+  )
+}
+```
+
+### Text-to-Speech
+```typescript
+import * as Speech from 'expo-speech'
+
+const speakResponse = (text: string) => {
+  Speech.speak(text, {
+    language: 'en-US',
+    pitch: 1.0,
+    rate: 0.8,
+    voice: 'com.apple.ttsbundle.Samantha-compact'
+  })
+}
+```
+
+## 📊 Native Analytics
+
+### Performance Monitoring
+```typescript
+import { useRAGAnalytics } from '@/hooks/useRAGAnalytics'
+
+export function AnalyticsScreen() {
+  const analytics = useRAGAnalytics({
+    trackAppState: true,
+    trackMemoryUsage: true,
+    trackNetworkStatus: true
+  })
+
+  return (
+    <ScrollView>
+      <PerformanceMetrics
+        responseTime={analytics.averageResponseTime}
+        cacheHitRate={analytics.cacheHitRate}
+        offlineQueryRate={analytics.offlineQueryRate}
+      />
+
+      <UsageCharts
+        queryVolume={analytics.queryVolume}
+        userSessions={analytics.sessionData}
+        knowledgeGrowth={analytics.knowledgeGrowth}
+      />
+    </ScrollView>
+  )
+}
+```
+
+## 🔐 Security & Privacy
+
+### Secure Storage
+```typescript
+import * as SecureStore from 'expo-secure-store'
+
+// Store sensitive data securely
+await SecureStore.setItemAsync('user_token', authToken)
+
+// Retrieve secure data
+const token = await SecureStore.getItemAsync('user_token')
+```
+
+### Biometric Authentication
+```typescript
+import * as LocalAuthentication from 'expo-local-authentication'
+
+const authenticateWithBiometrics = async () => {
+  const hasHardware = await LocalAuthentication.hasHardwareAsync()
+  const supportedTypes = await LocalAuthentication.supportedAuthenticationTypesAsync()
+
+  if (hasHardware && supportedTypes.length > 0) {
+    const result = await LocalAuthentication.authenticateAsync({
+      promptMessage: 'Authenticate to access your AI assistant',
+      fallbackLabel: 'Use passcode'
+    })
+
+    return result.success
+  }
+
+  return false
+}
+```
+
+## 🚀 Build & Distribution
+
+### EAS Build Configuration
+```json
+{
+  "expo": {
+    "name": "AI Knowledge Assistant",
+    "slug": "ai-knowledge-assistant",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "platforms": ["ios", "android"],
+    "assetBundlePatterns": ["**/*"]
+  },
+  "build": {
+    "preview": {
+      "android": {
+        "buildType": "apk"
+      }
+    },
+    "preview2": {
+      "android": {
+        "gradleCommand": ":app:assembleRelease"
+      }
+    },
+    "preview3": {
+      "developmentClient": true
+    },
+    "production": {}
+  },
+  "submit": {
+    "production": {}
+  }
+}
+```
+
+### Building for Production
+```bash
+# Build for iOS
+eas build --platform ios --profile production
+
+# Build for Android
+eas build --platform android --profile production
+
+# Submit to app stores
+eas submit --platform ios
+eas submit --platform android
+```
+
+## 📱 Platform-Specific Features
+
+### iOS Features
+```typescript
+// Push notifications
+import * as Notifications from 'expo-notifications'
+
+Notifications.setNotificationHandler({
+  handleNotification: async () => ({
+    shouldShowAlert: true,
+    shouldPlaySound: true,
+    shouldSetBadge: true,
+  }),
+})
+
+// Background app refresh
+import * as BackgroundFetch from 'expo-background-fetch'
+import * as TaskManager from 'expo-task-manager'
+
+const BACKGROUND_SYNC_TASK = 'background-sync'
+
+TaskManager.defineTask(BACKGROUND_SYNC_TASK, () => {
+  // Background sync logic
+  return BackgroundFetch.BackgroundFetchResult.NewData
+})
+```
+
+### Android Features
+```typescript
+// File system access
+import * as DocumentPicker from 'expo-document-picker'
+
+const pickDocument = async () => {
+  const result = await DocumentPicker.getDocumentAsync({
+    type: ['text/plain', 'text/markdown', 'application/pdf'],
+    copyToCacheDirectory: true,
+    multiple: true
+  })
+
+  if (result.type === 'success') {
+    // Process selected documents
+    await addDocumentToKnowledge(result)
+  }
+}
+
+// Deep linking
+import * as Linking from 'expo-linking'
+
+const url = Linking.createURL('knowledge', {
+  queryParams: { id: 'doc123' }
+})
+// myapp://knowledge?id=doc123
+```
+
+## 🧪 Testing
+
+### Unit Tests
+```bash
+npm run test
+```
+
+### Component Testing
+```typescript
+import { render, fireEvent } from '@testing-library/react-native'
+import { RAGChatPanel } from '@/components/RAGChatPanel'
+
+test('sends query on button press', () => {
+  const mockQuery = jest.fn()
+  const { getByTestId } = render(
+    <RAGChatPanel onQuery={mockQuery} />
+  )
+
+  fireEvent.press(getByTestId('send-button'))
+  expect(mockQuery).toHaveBeenCalled()
+})
+```
+
+### E2E Testing with Detox
+```javascript
+describe('AI Chat Flow', () => {
+  beforeEach(async () => {
+    await device.reloadReactNative()
+  })
+
+  it('should navigate to chat and send message', async () => {
+    await element(by.id('ai-tab')).tap()
+    await element(by.id('chat-input')).typeText('Hello AI')
+    await element(by.id('send-button')).tap()
+    await expect(element(by.id('chat-message'))).toBeVisible()
+  })
+})
+```
+
+## 🔧 Configuration
+
+### Domain-Specific Mobile Configs
+```typescript
+// lib/rag/mobileConfig.ts
+export const mobileRAGConfigs = {
+  plants: {
+    voice: {
+      plantNamesRecognition: true,
+      scientificNamesSupport: true
+    },
+    camera: {
+      plantIdentification: true,
+      diseaseDetection: true
+    },
+    notifications: {
+      wateringReminders: true,
+      seasonalTips: true
+    }
+  },
+
+  ecommerce: {
+    voice: {
+      productSearch: true,
+      priceQueries: true
+    },
+    camera: {
+      barcodeScanning: true,
+      visualSearch: true
+    },
+    notifications: {
+      priceAlerts: true,
+      stockUpdates: true
+    }
+  }
+}
+```
+
+## 📈 Performance Best Practices
+
+### Memory Management
+```typescript
+// Efficient list rendering
+import { FlashList } from '@shopify/flash-list'
+
+<FlashList
+  data={knowledge}
+  renderItem={renderKnowledgeItem}
+  estimatedItemSize={120}
+  getItemType={(item) => item.category}
+  removeClippedSubviews={true}
+/>
+
+// Image optimization
+import { Image } from 'expo-image'
+
+<Image
+  source={{ uri: imageUrl }}
+  placeholder={blurhash}
+  contentFit="cover"
+  transition={200}
+/>
+```
+
+### Battery Optimization
+```typescript
+// Debounced search to reduce API calls
+import { useDebouncedCallback } from 'use-debounce'
+
+const debouncedSearch = useDebouncedCallback(
+  (query: string) => ragSystem.query(query),
+  500 // 500ms delay
+)
+
+// Background task limiting
+import * as BackgroundFetch from 'expo-background-fetch'
+
+await BackgroundFetch.setMinimumIntervalAsync(
+  BackgroundFetch.BackgroundFetchInterval.Never
+)
+```
+
+## 🎯 Advanced Mobile Features
+
+### Augmented Reality Integration
+```typescript
+// ARCore/ARKit for visual knowledge search
+import { Camera } from 'expo-camera'
+import { BarCodeScanner } from 'expo-barcode-scanner'
+
+const ARKnowledgeScanner = () => {
+  const handleBarCodeScanned = ({ data }) => {
+    // Search knowledge base for scanned item
+    ragSystem.query(`Information about ${data}`)
+  }
+
+  return (
+    <Camera
+      style={styles.camera}
+      onBarCodeScanned={handleBarCodeScanned}
+      barCodeScannerSettings={{
+        barCodeTypes: [BarCodeScanner.Constants.BarCodeType.qr],
+      }}
+    />
+  )
+}
+```
+
+### Machine Learning Integration
+```typescript
+// On-device ML for enhanced privacy
+import * as tf from '@tensorflow/tfjs-react-native'
+
+const processImageLocally = async (imageUri: string) => {
+  // Load pre-trained model for image classification
+  const modelUrl = bundleResourceIO(modelJson, modelWeights)
+  const model = await tf.loadLayersModel(modelUrl)
+
+  // Process image and search knowledge
+  const predictions = await model.predict(processedImage)
+  const searchQuery = interpretPredictions(predictions)
+
+  return ragSystem.query(searchQuery)
+}
+```
+
+## 🤝 Contributing
+
+1. Fork the repository
+2. Create a feature branch: `git checkout -b feature/amazing-feature`
+3. Make your changes and test on both iOS and Android
+4. Run tests: `npm run test`
+5. Submit a pull request
+
+## 📄 License
+
+MIT License - see LICENSE file for details
+
+## 🆘 Support
+
+- 📖 [Mobile Documentation](https://docs.example.com/mobile-rag)
+- 💬 [Discord Community](https://discord.gg/example)
+- 🐛 [Issue Tracker](https://github.com/example/mobile-issues)
+- 📱 [Mobile-Specific FAQ](https://docs.example.com/mobile-faq)
+
+---
+
+Built with ❤️ using Expo, React Native, Supabase, OpenAI, and RAG v4.0.0
+
+**Download from:**
+- 🍎 [App Store](https://apps.apple.com/app/example)
+- 🤖 [Google Play](https://play.google.com/store/apps/example)