@digilogiclabs/create-saas-app 2.10.0 → 2.12.0

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

@@ -1,655 +0,0 @@
-# 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)