@digilogiclabs/create-saas-app 1.0.1

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

@@ -0,0 +1,522 @@
+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 - v0.22.0 with Native AI Components
+import {
+  // AI Components
+  AIProvider,
+  AIChat,
+  AITextGenerator,
+  AIAudioGenerator,
+  AIVideoGenerator,
+  AISetupStatus,
+  
+  // 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,
+} from '@digilogiclabs/saas-factory-ui/native';
+
+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,
+  });
+  const { theme, isDark } = useTheme();
+
+  // AI Configuration - would normally come from environment
+  const aiConfig = {
+    providers: {
+      openai: {
+        apiKey: process.env.EXPO_PUBLIC_OPENAI_API_KEY || '',
+        models: {
+          text: 'gpt-4',
+          audio: 'tts-1',
+        }
+      },
+      elevenlabs: {
+        apiKey: process.env.EXPO_PUBLIC_ELEVENLABS_API_KEY || '',
+      },
+      replicate: {
+        apiKey: process.env.EXPO_PUBLIC_REPLICATE_API_TOKEN || '',
+      }
+    }
+  };
+
+  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 aiTabs = [
+    {
+      id: 'dashboard',
+      label: 'Dashboard',
+      icon: <Brain width={20} height={20} color={activeTab === 'dashboard' ? '#3b82f6' : '#64748b'} />,
+      component: renderDashboard(),
+    },
+    {
+      id: 'text',
+      label: 'Text AI',
+      icon: <MessageSquare 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: 'chat',
+      label: 'AI Chat',
+      icon: <Sparkles width={20} height={20} color={activeTab === 'chat' ? '#3b82f6' : '#64748b'} />,
+      component: renderAIChat(),
+    },
+  ];
+
+  function renderDashboard() {
+    return (
+      <ScrollView style={styles.tabContent} showsVerticalScrollIndicator={false}>
+        <Container padding={16}>
+          {/* AI Setup Status */}
+          <Card style={styles.card}>
+            <AISetupStatus 
+              config={aiConfig}
+              onSetupComplete={() => {
+                Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+              }}
+              style={styles.setupStatus}
+            />
+          </Card>
+
+          {/* AI Stats */}
+          <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.textGenerations}
+                </Text>
+                <Text style={[styles.statLabel, { color: theme.colors.textMuted }]}>
+                  Text Generations
+                </Text>
+              </View>
+              <View style={styles.statItem}>
+                <Text style={[styles.statNumber, { color: '#10b981' }]}>
+                  {aiStats.audioGenerations}
+                </Text>
+                <Text style={[styles.statLabel, { color: theme.colors.textMuted }]}>
+                  Audio Generations
+                </Text>
+              </View>
+              <View style={styles.statItem}>
+                <Text style={[styles.statNumber, { color: '#f59e0b' }]}>
+                  {aiStats.videoGenerations}
+                </Text>
+                <Text style={[styles.statLabel, { color: theme.colors.textMuted }]}>
+                  Video Generations
+                </Text>
+              </View>
+              <View style={styles.statItem}>
+                <Text style={[styles.statNumber, { color: '#8b5cf6' }]}>
+                  {(aiStats.totalTokens / 1000).toFixed(1)}K
+                </Text>
+                <Text style={[styles.statLabel, { color: theme.colors.textMuted }]}>
+                  Total Tokens
+                </Text>
+              </View>
+            </Grid>
+          </Card>
+
+          {/* Quick Actions */}
+          <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('text')}
+                style={styles.quickActionButton}
+              >
+                <MessageSquare width={20} height={20} color="#3b82f6" />
+                <Text style={styles.quickActionText}>Generate Text</Text>
+              </Button>
+              <Button
+                variant="outline"
+                size="lg"
+                onPress={() => setActiveTab('audio')}
+                style={styles.quickActionButton}
+              >
+                <Mic width={20} height={20} color="#10b981" />
+                <Text style={styles.quickActionText}>Create Audio</Text>
+              </Button>
+              <Button
+                variant="outline"
+                size="lg"
+                onPress={() => setActiveTab('video')}
+                style={styles.quickActionButton}
+              >
+                <Video width={20} height={20} color="#f59e0b" />
+                <Text style={styles.quickActionText}>Make Video</Text>
+              </Button>
+              <Button
+                variant="outline"
+                size="lg"
+                onPress={() => setActiveTab('chat')}
+                style={styles.quickActionButton}
+              >
+                <Sparkles width={20} height={20} color="#8b5cf6" />
+                <Text style={styles.quickActionText}>AI Chat</Text>
+              </Button>
+            </Grid>
+          </Card>
+
+          {/* Recent Generations */}
+          <Card style={styles.card}>
+            <Text style={[styles.cardTitle, { color: theme.colors.text }]}>
+              Recent Generations
+            </Text>
+            <VirtualScrollList
+              data={[
+                { id: '1', type: 'text', title: 'Blog post about AI trends', time: '2 min ago', status: 'completed' },
+                { id: '2', type: 'audio', title: 'Podcast intro voice', time: '5 min ago', status: 'completed' },
+                { id: '3', type: 'video', title: 'Product demo video', time: '12 min ago', status: 'processing' },
+                { id: '4', type: 'text', title: 'Email marketing copy', time: '15 min ago', status: 'completed' },
+              ]}
+              renderItem={({ item }) => (
+                <SwipeableCard
+                  rightActions={[
+                    { label: 'View', color: '#3b82f6', onPress: () => console.log('View', item.id) },
+                    { label: 'Share', color: '#10b981', onPress: () => console.log('Share', item.id) },
+                  ]}
+                  style={styles.recentItem}
+                >
+                  <View style={styles.recentItemContent}>
+                    <View style={styles.recentItemIcon}>
+                      {item.type === 'text' && <MessageSquare width={16} height={16} color="#3b82f6" />}
+                      {item.type === 'audio' && <Mic width={16} height={16} color="#10b981" />}
+                      {item.type === 'video' && <Video width={16} height={16} color="#f59e0b" />}
+                    </View>
+                    <View style={styles.recentItemText}>
+                      <Text style={[styles.recentItemTitle, { color: theme.colors.text }]}>
+                        {item.title}
+                      </Text>
+                      <Text style={[styles.recentItemTime, { color: theme.colors.textMuted }]}>
+                        {item.time}
+                      </Text>
+                    </View>
+                    <Badge
+                      variant={item.status === 'completed' ? 'success' : 'warning'}
+                      size="sm"
+                    >
+                      {item.status}
+                    </Badge>
+                  </View>
+                </SwipeableCard>
+              )}
+              estimatedItemSize={80}
+              style={styles.recentList}
+            />
+          </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'
+              ]}
+              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 renderAIChat() {
+    return (
+      <Container padding={16} style={styles.chatContainer}>
+        <AIChat
+          placeholder="Ask me anything..."
+          showTypingIndicator={true}
+          enableFileUpload={false} // Disabled for mobile for now
+          maxMessages={50}
+          onMessage={(message) => console.log('Chat message:', message)}
+          style={styles.aiChat}
+        />
+      </Container>
+    );
+  }
+
+  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="primary" size="sm">
+                v3.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,
+  },
+  setupStatus: {
+    marginBottom: 0,
+  },
+  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(59, 130, 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,
+  },
+  aiChat: {
+    flex: 1,
+  },
+});