@digilogiclabs/create-saas-app 2.11.0 → 2.12.0

package/dist/templates/mobile/ui-auth-payments-ai-rag/template/app/(tabs)/ai.tsx

@@ -1,683 +0,0 @@
-import React, { useState, useRef } from 'react';
-import { View, Text, ScrollView, StyleSheet, Dimensions, Alert } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import * as Haptics from 'expo-haptics';
-
-// UI Components with RAG support
-import {
-  // AI Components with RAG
-  AIProvider,
-  RAGChatPanel,
-  KnowledgeSearchPanel,
-  RAGAnalytics,
-  KnowledgeManagementPanel,
-  AISetupStatus,
-  
-  // Standard AI Components
-  AIChat,
-  AITextGenerator,
-  AIAudioGenerator,
-  AIVideoGenerator,
-  
-  // Native UI Components
-  Card,
-  Button,
-  Badge,
-  PageTransition,
-  TabbedInterface,
-  LazyImage,
-  ProgressiveImage,
-  NativeFeatureHighlight,
-  VirtualScrollList,
-  SwipeableCard,
-  useTheme,
-  
-  // Layout Components
-  Container,
-  Grid,
-  
-  // Icons
-  Sparkles,
-  Mic,
-  Video,
-  MessageSquare,
-  Zap,
-  Brain,
-  Database,
-  Search,
-  BarChart3,
-  Settings,
-  BookOpen,
-  Lightbulb,
-} from '@digilogiclabs/saas-factory-ui/native';
-
-import { useRAGSystem } from '../../hooks/useRAGSystem';
-import type { GenericRAGDocumentSchema } from '@digilogiclabs/saas-factory-ai-types';
-
-const { width } = Dimensions.get('window');
-
-export default function AIScreen() {
-  const [activeTab, setActiveTab] = useState('dashboard');
-  const [aiStats, setAiStats] = useState({
-    textGenerations: 42,
-    audioGenerations: 18,
-    videoGenerations: 7,
-    totalTokens: 125300,
-    knowledgeDocuments: 156,
-    ragQueries: 89,
-  });
-  
-  const { theme, isDark } = useTheme();
-  
-  // Initialize RAG system - domain can be configured based on app type
-  const ragSystem = useRAGSystem<GenericRAGDocumentSchema>({
-    domain: 'generic', // Can be: 'plants', 'ecommerce', 'education', etc.
-    enableOffline: true,
-    autoSync: true,
-    cacheResults: true
-  });
-
-  // AI Configuration with RAG integration
-  const aiConfig = {
-    providers: {
-      openai: {
-        apiKey: process.env.EXPO_PUBLIC_OPENAI_API_KEY || '',
-        models: {
-          text: 'gpt-4',
-          audio: 'tts-1',
-          embedding: 'text-embedding-ada-002'
-        }
-      },
-      elevenlabs: {
-        apiKey: process.env.EXPO_PUBLIC_ELEVENLABS_API_KEY || '',
-      },
-      replicate: {
-        apiKey: process.env.EXPO_PUBLIC_REPLICATE_API_TOKEN || '',
-      }
-    },
-    rag: {
-      enabled: true,
-      system: ragSystem.ragSystem,
-      options: {
-        enhanceWithKnowledge: true,
-        showSources: true,
-        confidenceThreshold: 0.7
-      }
-    }
-  };
-
-  const handleTabChange = (tabId: string) => {
-    setActiveTab(tabId);
-    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-  };
-
-  const handleAIGeneration = async (type: string, result: any) => {
-    try {
-      // Update local stats
-      setAiStats(prev => ({
-        ...prev,
-        [`${type}Generations`]: prev[`${type}Generations` as keyof typeof prev] + 1,
-        totalTokens: prev.totalTokens + (result.tokens || 100)
-      }));
-      
-      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
-      Alert.alert('Success', `${type} generation completed successfully!`);
-    } catch (error) {
-      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
-      Alert.alert('Error', `${type} generation failed. Please try again.`);
-    }
-  };
-
-  const handleRAGQuery = async (query: string) => {
-    try {
-      const response = await ragSystem.query(query);
-      setAiStats(prev => ({
-        ...prev,
-        ragQueries: prev.ragQueries + 1
-      }));
-      return response;
-    } catch (error) {
-      console.error('RAG query error:', error);
-      throw error;
-    }
-  };
-
-  const aiTabs = [
-    {
-      id: 'dashboard',
-      label: 'Dashboard',
-      icon: <Brain width={20} height={20} color={activeTab === 'dashboard' ? '#3b82f6' : '#64748b'} />,
-      component: renderDashboard(),
-    },
-    {
-      id: 'rag-chat',
-      label: 'AI Chat',
-      icon: <MessageSquare width={20} height={20} color={activeTab === 'rag-chat' ? '#3b82f6' : '#64748b'} />,
-      component: renderRAGChat(),
-    },
-    {
-      id: 'knowledge',
-      label: 'Knowledge',
-      icon: <BookOpen width={20} height={20} color={activeTab === 'knowledge' ? '#3b82f6' : '#64748b'} />,
-      component: renderKnowledgeBase(),
-    },
-    {
-      id: 'text',
-      label: 'Text AI',
-      icon: <Lightbulb width={20} height={20} color={activeTab === 'text' ? '#3b82f6' : '#64748b'} />,
-      component: renderTextGenerator(),
-    },
-    {
-      id: 'audio',
-      label: 'Audio AI',
-      icon: <Mic width={20} height={20} color={activeTab === 'audio' ? '#3b82f6' : '#64748b'} />,
-      component: renderAudioGenerator(),
-    },
-    {
-      id: 'video',
-      label: 'Video AI',
-      icon: <Video width={20} height={20} color={activeTab === 'video' ? '#3b82f6' : '#64748b'} />,
-      component: renderVideoGenerator(),
-    },
-    {
-      id: 'analytics',
-      label: 'Analytics',
-      icon: <BarChart3 width={20} height={20} color={activeTab === 'analytics' ? '#3b82f6' : '#64748b'} />,
-      component: renderAnalytics(),
-    },
-  ];
-
-  function renderDashboard() {
-    return (
-      <ScrollView style={styles.tabContent} showsVerticalScrollIndicator={false}>
-        <Container padding={16}>
-          {/* RAG System Status */}
-          <Card style={styles.card}>
-            <Text style={[styles.cardTitle, { color: theme.colors.text }]}>
-              AI & Knowledge System Status
-            </Text>
-            <View style={styles.statusGrid}>
-              <View style={styles.statusItem}>
-                <View style={[styles.statusDot, { backgroundColor: ragSystem.isReady ? '#10b981' : '#f59e0b' }]} />
-                <Text style={[styles.statusText, { color: theme.colors.text }]}>
-                  {ragSystem.isReady ? 'Ready' : 'Loading...'}
-                </Text>
-              </View>
-              <View style={styles.statusItem}>
-                <View style={[styles.statusDot, { backgroundColor: ragSystem.isOnline ? '#10b981' : '#ef4444' }]} />
-                <Text style={[styles.statusText, { color: theme.colors.text }]}>
-                  {ragSystem.isOnline ? 'Online' : 'Offline'}
-                </Text>
-              </View>
-              {ragSystem.offlineQueueSize > 0 && (
-                <View style={styles.statusItem}>
-                  <View style={[styles.statusDot, { backgroundColor: '#f59e0b' }]} />
-                  <Text style={[styles.statusText, { color: theme.colors.text }]}>
-                    {ragSystem.offlineQueueSize} queued
-                  </Text>
-                </View>
-              )}
-            </View>
-          </Card>
-
-          {/* Enhanced AI Stats with RAG */}
-          <Card style={[styles.card, styles.statsCard]}>
-            <Text style={[styles.cardTitle, { color: theme.colors.text }]}>
-              AI Usage Statistics
-            </Text>
-            <Grid columns={2} gap={12} style={styles.statsGrid}>
-              <View style={styles.statItem}>
-                <Text style={[styles.statNumber, { color: '#3b82f6' }]}>
-                  {aiStats.ragQueries}
-                </Text>
-                <Text style={[styles.statLabel, { color: theme.colors.textMuted }]}>
-                  RAG Queries
-                </Text>
-              </View>
-              <View style={styles.statItem}>
-                <Text style={[styles.statNumber, { color: '#8b5cf6' }]}>
-                  {aiStats.knowledgeDocuments}
-                </Text>
-                <Text style={[styles.statLabel, { color: theme.colors.textMuted }]}>
-                  Knowledge Docs
-                </Text>
-              </View>
-              <View style={styles.statItem}>
-                <Text style={[styles.statNumber, { color: '#10b981' }]}>
-                  {aiStats.textGenerations}
-                </Text>
-                <Text style={[styles.statLabel, { color: theme.colors.textMuted }]}>
-                  Text Generated
-                </Text>
-              </View>
-              <View style={styles.statItem}>
-                <Text style={[styles.statNumber, { color: '#f59e0b' }]}>
-                  {(aiStats.totalTokens / 1000).toFixed(1)}K
-                </Text>
-                <Text style={[styles.statLabel, { color: theme.colors.textMuted }]}>
-                  Total Tokens
-                </Text>
-              </View>
-            </Grid>
-          </Card>
-
-          {/* Quick Actions with RAG */}
-          <Card style={styles.card}>
-            <Text style={[styles.cardTitle, { color: theme.colors.text }]}>
-              Quick Actions
-            </Text>
-            <Grid columns={2} gap={12} style={styles.quickActions}>
-              <Button
-                variant="outline"
-                size="lg"
-                onPress={() => setActiveTab('rag-chat')}
-                style={styles.quickActionButton}
-                disabled={!ragSystem.canQuery}
-              >
-                <MessageSquare width={20} height={20} color="#3b82f6" />
-                <Text style={styles.quickActionText}>RAG Chat</Text>
-              </Button>
-              <Button
-                variant="outline"
-                size="lg"
-                onPress={() => setActiveTab('knowledge')}
-                style={styles.quickActionButton}
-              >
-                <Database width={20} height={20} color="#8b5cf6" />
-                <Text style={styles.quickActionText}>Knowledge Base</Text>
-              </Button>
-              <Button
-                variant="outline"
-                size="lg"
-                onPress={() => setActiveTab('text')}
-                style={styles.quickActionButton}
-              >
-                <Lightbulb width={20} height={20} color="#10b981" />
-                <Text style={styles.quickActionText}>Generate Text</Text>
-              </Button>
-              <Button
-                variant="outline"
-                size="lg"
-                onPress={() => setActiveTab('analytics')}
-                style={styles.quickActionButton}
-              >
-                <BarChart3 width={20} height={20} color="#f59e0b" />
-                <Text style={styles.quickActionText}>Analytics</Text>
-              </Button>
-            </Grid>
-          </Card>
-
-          {/* Recent RAG Queries */}
-          <Card style={styles.card}>
-            <Text style={[styles.cardTitle, { color: theme.colors.text }]}>
-              Recent RAG Queries
-            </Text>
-            <VirtualScrollList
-              data={ragSystem.recentQueries.slice(0, 5).map((query, index) => ({
-                id: index.toString(),
-                query: query.query,
-                category: query.category || 'General',
-                time: new Date(query.timestamp).toLocaleTimeString(),
-              }))}
-              renderItem={({ item }) => (
-                <SwipeableCard
-                  rightActions={[
-                    { label: 'Repeat', color: '#3b82f6', onPress: () => handleRAGQuery(item.query) },
-                  ]}
-                  style={styles.recentItem}
-                >
-                  <View style={styles.recentItemContent}>
-                    <View style={styles.recentItemIcon}>
-                      <Database width={16} height={16} color="#8b5cf6" />
-                    </View>
-                    <View style={styles.recentItemText}>
-                      <Text style={[styles.recentItemTitle, { color: theme.colors.text }]}>
-                        {item.query}
-                      </Text>
-                      <Text style={[styles.recentItemTime, { color: theme.colors.textMuted }]}>
-                        {item.category} • {item.time}
-                      </Text>
-                    </View>
-                  </View>
-                </SwipeableCard>
-              )}
-              estimatedItemSize={80}
-              style={styles.recentList}
-            />
-          </Card>
-        </Container>
-      </ScrollView>
-    );
-  }
-
-  function renderRAGChat() {
-    return (
-      <Container padding={16} style={styles.chatContainer}>
-        <RAGChatPanel
-          ragSystem={ragSystem.ragSystem}
-          placeholder="Ask me anything about our knowledge base..."
-          showTypingIndicator={true}
-          showSources={true}
-          showConfidenceScore={false} // Hidden on mobile for cleaner UI
-          enableVoiceInput={true}
-          enableOfflineMode={true}
-          onQuery={handleRAGQuery}
-          style={styles.ragChat}
-          mobileOptimized={true}
-        />
-      </Container>
-    );
-  }
-
-  function renderKnowledgeBase() {
-    return (
-      <ScrollView style={styles.tabContent} showsVerticalScrollIndicator={false}>
-        <Container padding={16}>
-          <Card style={styles.card}>
-            <KnowledgeSearchPanel
-              ragSystem={ragSystem.ragSystem}
-              placeholder="Search knowledge base..."
-              showCategories={true}
-              showFilters={false} // Simplified for mobile
-              onSearch={ragSystem.searchKnowledge}
-              style={styles.knowledgeSearch}
-            />
-          </Card>
-          
-          <Card style={styles.card}>
-            <KnowledgeManagementPanel
-              ragSystem={ragSystem.ragSystem}
-              allowAdd={true}
-              allowEdit={true}
-              allowDelete={true}
-              showBulkActions={false} // Simplified for mobile
-              onAdd={ragSystem.addKnowledge}
-              onUpdate={ragSystem.updateKnowledge}
-              style={styles.knowledgeManagement}
-            />
-          </Card>
-        </Container>
-      </ScrollView>
-    );
-  }
-
-  function renderTextGenerator() {
-    return (
-      <ScrollView style={styles.tabContent} showsVerticalScrollIndicator={false}>
-        <Container padding={16}>
-          <Card style={styles.card}>
-            <AITextGenerator
-              placeholder="Describe what you want to generate..."
-              templates={[
-                'Blog post',
-                'Email marketing',
-                'Social media content',
-                'Product description',
-                'Code documentation',
-                'Creative writing'
-              ]}
-              enhanceWithRAG={true}
-              ragSystem={ragSystem.ragSystem}
-              showWordCount={true}
-              maxLength={2000}
-              onGenerate={(result) => handleAIGeneration('text', result)}
-              style={styles.aiGenerator}
-            />
-          </Card>
-        </Container>
-      </ScrollView>
-    );
-  }
-
-  function renderAudioGenerator() {
-    return (
-      <ScrollView style={styles.tabContent} showsVerticalScrollIndicator={false}>
-        <Container padding={16}>
-          <Card style={styles.card}>
-            <AIAudioGenerator
-              placeholder="Describe the audio you want to generate..."
-              supportedFormats={['mp3', 'wav', 'ogg']}
-              showWaveform={true}
-              maxDuration={300}
-              voices={[
-                { id: 'alloy', name: 'Alloy', language: 'en-US' },
-                { id: 'echo', name: 'Echo', language: 'en-US' },
-                { id: 'fable', name: 'Fable', language: 'en-US' },
-                { id: 'onyx', name: 'Onyx', language: 'en-US' },
-                { id: 'nova', name: 'Nova', language: 'en-US' },
-                { id: 'shimmer', name: 'Shimmer', language: 'en-US' },
-              ]}
-              onGenerate={(result) => handleAIGeneration('audio', result)}
-              style={styles.aiGenerator}
-            />
-          </Card>
-        </Container>
-      </ScrollView>
-    );
-  }
-
-  function renderVideoGenerator() {
-    return (
-      <ScrollView style={styles.tabContent} showsVerticalScrollIndicator={false}>
-        <Container padding={16}>
-          <Card style={styles.card}>
-            <AIVideoGenerator
-              placeholder="Describe the video you want to generate..."
-              supportedFormats={['mp4', 'webm']}
-              resolution="1080p"
-              showPreview={true}
-              maxDuration={60}
-              styles={[
-                'Photorealistic',
-                'Cartoon',
-                'Anime',
-                'Watercolor',
-                'Oil painting',
-                'Digital art'
-              ]}
-              onGenerate={(result) => handleAIGeneration('video', result)}
-              style={styles.aiGenerator}
-            />
-          </Card>
-        </Container>
-      </ScrollView>
-    );
-  }
-
-  function renderAnalytics() {
-    return (
-      <ScrollView style={styles.tabContent} showsVerticalScrollIndicator={false}>
-        <Container padding={16}>
-          <Card style={styles.card}>
-            <RAGAnalytics
-              ragSystem={ragSystem.ragSystem}
-              showUsageStats={true}
-              showPerformanceMetrics={true}
-              showPopularQueries={true}
-              showKnowledgeGaps={true}
-              timeRange="7d"
-              style={styles.analytics}
-            />
-          </Card>
-        </Container>
-      </ScrollView>
-    );
-  }
-
-  return (
-    <AIProvider config={aiConfig}>
-      <PageTransition type="slide" duration={300}>
-        <SafeAreaView style={[styles.container, { backgroundColor: theme.colors.background }]}>
-          <View style={styles.header}>
-            <Text style={[styles.title, { color: theme.colors.text }]}>
-              AI Studio
-            </Text>
-            <View style={styles.headerActions}>
-              <Badge 
-                variant={ragSystem.isReady ? "success" : "warning"} 
-                size="sm"
-              >
-                RAG {ragSystem.isReady ? 'Ready' : 'Loading'}
-              </Badge>
-              <Badge variant="primary" size="sm">
-                v4.0.0
-              </Badge>
-            </View>
-          </View>
-
-          <TabbedInterface
-            tabs={aiTabs}
-            activeTabId={activeTab}
-            onTabChange={handleTabChange}
-            variant="pills"
-            showLabels={true}
-            scrollable={true}
-            hapticFeedback={true}
-            style={styles.tabbedInterface}
-          />
-        </SafeAreaView>
-      </PageTransition>
-    </AIProvider>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    borderBottomWidth: 1,
-    borderBottomColor: 'rgba(0, 0, 0, 0.1)',
-  },
-  title: {
-    fontSize: 28,
-    fontWeight: '700',
-  },
-  headerActions: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-  },
-  tabbedInterface: {
-    flex: 1,
-  },
-  tabContent: {
-    flex: 1,
-  },
-  card: {
-    marginBottom: 16,
-    padding: 16,
-  },
-  cardTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    marginBottom: 16,
-  },
-  statusGrid: {
-    flexDirection: 'row',
-    gap: 16,
-    flexWrap: 'wrap',
-  },
-  statusItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-  },
-  statusDot: {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-  },
-  statusText: {
-    fontSize: 14,
-    fontWeight: '500',
-  },
-  statsCard: {
-    backgroundColor: 'rgba(59, 130, 246, 0.05)',
-  },
-  statsGrid: {
-    marginTop: 8,
-  },
-  statItem: {
-    alignItems: 'center',
-    padding: 12,
-  },
-  statNumber: {
-    fontSize: 24,
-    fontWeight: '700',
-    marginBottom: 4,
-  },
-  statLabel: {
-    fontSize: 12,
-    textAlign: 'center',
-  },
-  quickActions: {
-    marginTop: 8,
-  },
-  quickActionButton: {
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: 80,
-    gap: 8,
-  },
-  quickActionText: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: '#64748b',
-  },
-  recentList: {
-    maxHeight: 300,
-  },
-  recentItem: {
-    marginBottom: 8,
-  },
-  recentItemContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 12,
-    gap: 12,
-  },
-  recentItemIcon: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
-    backgroundColor: 'rgba(139, 92, 246, 0.1)',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  recentItemText: {
-    flex: 1,
-  },
-  recentItemTitle: {
-    fontSize: 14,
-    fontWeight: '500',
-    marginBottom: 2,
-  },
-  recentItemTime: {
-    fontSize: 12,
-  },
-  aiGenerator: {
-    minHeight: 400,
-  },
-  chatContainer: {
-    flex: 1,
-  },
-  ragChat: {
-    flex: 1,
-  },
-  knowledgeSearch: {
-    minHeight: 200,
-  },
-  knowledgeManagement: {
-    minHeight: 400,
-  },
-  analytics: {
-    minHeight: 500,
-  },
-});