@digilogiclabs/create-saas-app 1.17.1 → 1.18.0

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

@@ -0,0 +1,683 @@
+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,
+  },
+});