@umituz/react-native-ai-generation-content 1.20.21 → 1.20.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.20.21",
+  "version": "1.20.22",
   "description": "Provider-agnostic AI generation orchestration for React Native with result preview components",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/features/partner-upload/presentation/screens/PartnerStepScreen.tsx

@@ -33,6 +33,7 @@ export interface PartnerStepScreenTranslations {
   readonly maxFileSize: string;
   readonly error: string;
   readonly uploadFailed: string;
+  readonly aiDisclosure?: string;
 }
 
 export interface PartnerStepScreenConfig {
@@ -175,6 +176,16 @@ export const PartnerStepScreen: React.FC<PartnerStepScreenProps> = ({
             maxNameLength={config.maxNameLength}
           />
         )}
+        {translations.aiDisclosure && (
+          <View style={styles.disclosureContainer}>
+            <AtomicText
+              type="labelSmall"
+              style={[styles.disclosureText, { color: tokens.colors.textSecondary }]}
+            >
+              {translations.aiDisclosure}
+            </AtomicText>
+          </View>
+        )}
       </ScreenLayout>
     </View>
   );
@@ -205,4 +216,16 @@ const createStyles = (tokens: DesignTokens) =>
       fontWeight: "800",
       marginRight: 4,
     },
+    disclosureContainer: {
+      marginTop: 24,
+      marginHorizontal: 24,
+      padding: 16,
+      borderRadius: 12,
+      backgroundColor: tokens.colors.surfaceVariant + "40",
+    },
+    disclosureText: {
+      textAlign: "center",
+      lineHeight: 18,
+      opacity: 0.8,
+    },
   });

package/src/index.ts

@@ -69,6 +69,7 @@ export type { ModerationResult, ModerationConfig, SynchronousGenerationInput, Sy
 export {
   useGeneration, usePendingJobs, useBackgroundGeneration,
   useGenerationFlow, useAIFeatureCallbacks,
+  useAIGenerateState, AIGenerateStep,
   useGenerationOrchestrator, useImageGeneration, useVideoGeneration,
   createGenerationError, getAlertMessage, parseError,
 } from "./presentation/hooks";
@@ -82,6 +83,7 @@ export type {
   GenerationError, GenerationErrorType, AlertMessages, UseGenerationOrchestratorReturn,
   SingleImageInput, DualImageInput, ImageGenerationInput, ImageGenerationConfig,
   DualImageVideoInput, VideoGenerationConfig,
+  UploadedImage,
 } from "./presentation/hooks";
 
 export {
@@ -92,6 +94,7 @@ export {
   GenerateButton, ResultDisplay, AIGenerationResult, ErrorDisplay, FeatureHeader,
   AIGenScreenHeader, CreditBadge, PhotoUploadCard, SettingsSheet, StyleSelector,
   AspectRatioSelector, DurationSelector, GridSelector, StylePresetsGrid, AIGenerationForm,
+  AIGenerationConfig,
   createAspectRatioOptions, createDurationOptions, createStyleOptions, createStyleOptionsFromConfig,
   ASPECT_RATIO_IDS, COMMON_DURATIONS,
 } from "./presentation/components";
@@ -122,6 +125,7 @@ export type {
   AspectRatioSelectorProps, DurationSelectorProps, GridSelectorProps, GridSelectorOption,
   StyleOption, AspectRatioOption, DurationValue, AspectRatioTranslations, DurationOption,
   StyleTranslations, AIGenerationFormProps, AIGenerationFormTranslations,
+  AIGenerationConfigProps,
 } from "./presentation/components";
 
 export { DEFAULT_SINGLE_PHOTO_FLOW, DEFAULT_DUAL_PHOTO_FLOW } from "./presentation/types/flow-config.types";

package/src/presentation/components/AIGenerationConfig.tsx

@@ -0,0 +1,83 @@
+
+import React from "react";
+import { View, Image, StyleSheet } from "react-native";
+import { AIGenerationHero } from "./AIGenerationHero";
+import { AIGenerationForm } from "./AIGenerationForm";
+import type { AIGenerationFormProps } from "./AIGenerationForm.types";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+
+export interface AIGenerationConfigProps extends Omit<AIGenerationFormProps, "isGenerating" | "progress"> {
+  readonly heroTitle: string;
+  readonly heroSubtitle: string;
+  readonly heroIcon?: string;
+  readonly images?: { uri: string; previewUrl?: string }[];
+  readonly isGenerating?: boolean;
+  readonly progress?: number;
+}
+
+export const AIGenerationConfig: React.FC<AIGenerationConfigProps> = ({
+  heroTitle,
+  heroSubtitle,
+  heroIcon = "sparkles-outline",
+  images = [],
+  isGenerating = false,
+  progress = 0,
+  ...formProps
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.container}>
+      <AIGenerationHero
+        title={heroTitle}
+        subtitle={heroSubtitle}
+        iconName={heroIcon}
+      />
+
+      {images.length > 0 && (
+        <View style={styles.imagePreviewContainer}>
+          {images.map((img, index) => (
+            <View key={index} style={styles.imageWrapper}>
+              <Image
+                source={{ uri: img.previewUrl || img.uri }}
+                style={styles.previewImage}
+              />
+            </View>
+          ))}
+        </View>
+      )}
+
+      <AIGenerationForm
+        isGenerating={isGenerating}
+        progress={progress}
+        {...formProps}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  imagePreviewContainer: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 12,
+    paddingHorizontal: 16,
+    marginBottom: 24,
+    justifyContent: "center",
+  },
+  imageWrapper: {
+    width: 80,
+    height: 80,
+    borderRadius: 12,
+    overflow: "hidden",
+    borderWidth: 1,
+    borderColor: "rgba(255,255,255,0.1)",
+  },
+  previewImage: {
+    width: "100%",
+    height: "100%",
+  },
+});

package/src/presentation/components/flows/AIGenerateWizardFlow.tsx

@@ -0,0 +1,347 @@
+
+import React, { useMemo, useCallback, useEffect } from "react";
+import { View, ScrollView, Platform, TouchableOpacity, Image } from "react-native";
+import {
+  useAppDesignTokens,
+  AtomicText,
+  AtomicIcon,
+  ScreenLayout,
+  AtomicKeyboardAvoidingView,
+} from "@umituz/react-native-design-system";
+
+import { AIGenScreenHeader } from "../headers/AIGenScreenHeader";
+import { PartnerStepScreen } from "../../../features/partner-upload/presentation/screens/PartnerStepScreen";
+import { AIGenerationConfig } from "../AIGenerationConfig";
+import { GenerationProgressContent } from "../GenerationProgressContent";
+import { AIGenerationResult } from "../display/AIGenerationResult";
+import { useAIGenerateState, AIGenerateStep } from "../../hooks/generation/useAIGenerateState";
+import { getAIFeatureConfig, hasAIFeature } from "../../screens/ai-feature/registry";
+
+export interface AIGenerateWizardFlowProps {
+  readonly featureType: string;
+  readonly translations: {
+    headerTitle: string;
+    uploadSubtitle: string;
+    uploadSubtitle2: string;
+    continue: string;
+    tapToUpload: string;
+    selectPhoto: string;
+    change: string;
+    analyzing: string;
+    error: string;
+    uploadFailed: string;
+    aiDisclosure: string;
+    heroTitle: string;
+    heroSubtitle: string;
+    presetsTitle: string;
+    showAdvancedLabel: string;
+    hideAdvancedLabel: string;
+    promptTitle: string;
+    promptPlaceholder: string;
+    styleTitle: string;
+    durationTitle: string;
+    generateButton: string;
+    generatingButton: string;
+    processingTitle: string;
+    processingMessage: string;
+    processingHint: string;
+    successTitle: string;
+    saveButton: string;
+    tryAgainButton: string;
+    fileTooLarge: string;
+    maxFileSize: string;
+  };
+  readonly styleOptions: any[];
+  readonly presets: any[];
+  readonly durationOptions: number[];
+  readonly onGenerate: (data: {
+    prompt: string;
+    style: string;
+    duration: number;
+    images: { uri: string }[];
+  }) => Promise<string | null>;
+  readonly onBack?: () => void;
+  readonly t: (key: string) => string;
+}
+
+export const AIGenerateWizardFlow: React.FC<AIGenerateWizardFlowProps> = ({
+  featureType,
+  translations,
+  styleOptions,
+  presets,
+  durationOptions,
+  onGenerate,
+  onBack: onBackProp,
+  t,
+}) => {
+  const tokens = useAppDesignTokens();
+  const {
+    currentStep,
+    setCurrentStep,
+    images,
+    setStepImage,
+    prompt,
+    setPrompt,
+    selectedStyle,
+    setSelectedStyle,
+    selectedDuration,
+    setSelectedDuration,
+    showAdvanced,
+    toggleAdvanced,
+    isGenerating,
+    setIsGenerating,
+    progress,
+    setProgress,
+    result,
+    setResult,
+  } = useAIGenerateState();
+
+  const imageCountRequired = useMemo(() => {
+    if (!featureType || !hasAIFeature(featureType)) return 0;
+    const config = getAIFeatureConfig(featureType as any);
+    if (config.mode === "dual" || config.mode === "dual-video") return 2;
+    if (config.mode === "single" || config.mode === "single-with-prompt")
+      return 1;
+    return 0;
+  }, [featureType]);
+
+  useEffect(() => {
+    if (currentStep === AIGenerateStep.INFO) {
+      if (imageCountRequired > 0) {
+        setCurrentStep(AIGenerateStep.UPLOAD_1);
+      } else {
+        setCurrentStep(AIGenerateStep.CONFIG);
+      }
+    }
+  }, [featureType, imageCountRequired, setCurrentStep, currentStep]);
+
+  const handleBack = useCallback(() => {
+    if (currentStep === AIGenerateStep.UPLOAD_1) {
+      onBackProp?.();
+    } else if (currentStep === AIGenerateStep.UPLOAD_2) {
+      setCurrentStep(AIGenerateStep.UPLOAD_1);
+    } else if (currentStep === AIGenerateStep.CONFIG) {
+      if (imageCountRequired > 1) {
+        setCurrentStep(AIGenerateStep.UPLOAD_2);
+      } else if (imageCountRequired > 0) {
+        setCurrentStep(AIGenerateStep.UPLOAD_1);
+      } else {
+        onBackProp?.();
+      }
+    } else if (currentStep === AIGenerateStep.RESULT) {
+      setCurrentStep(AIGenerateStep.CONFIG);
+    }
+  }, [currentStep, setCurrentStep, imageCountRequired, onBackProp]);
+
+  const handleNext = useCallback(() => {
+    if (currentStep === AIGenerateStep.UPLOAD_1) {
+      if (imageCountRequired > 1) {
+        setCurrentStep(AIGenerateStep.UPLOAD_2);
+      } else {
+        setCurrentStep(AIGenerateStep.CONFIG);
+      }
+    } else if (currentStep === AIGenerateStep.UPLOAD_2) {
+      setCurrentStep(AIGenerateStep.CONFIG);
+    }
+  }, [currentStep, setCurrentStep, imageCountRequired]);
+
+  const handleGenerate = useCallback(async () => {
+    setIsGenerating(true);
+    setProgress(10);
+    setCurrentStep(AIGenerateStep.GENERATING);
+
+    try {
+      const output = await onGenerate({
+        prompt,
+        style: selectedStyle,
+        duration: selectedDuration,
+        images,
+      });
+      setResult(output);
+      setCurrentStep(AIGenerateStep.RESULT);
+    } catch (error) {
+      // Error handling should be added here
+      console.error("Generation failed", error);
+      setCurrentStep(AIGenerateStep.CONFIG);
+    } finally {
+      setIsGenerating(false);
+      setProgress(0);
+    }
+  }, [onGenerate, prompt, selectedStyle, selectedDuration, images, setCurrentStep, setIsGenerating, setProgress, setResult]);
+
+  switch (currentStep) {
+    case AIGenerateStep.UPLOAD_1:
+    case AIGenerateStep.UPLOAD_2: {
+      const isStep2 = currentStep === AIGenerateStep.UPLOAD_2;
+      return (
+        <PartnerStepScreen
+          t={t}
+          onBack={handleBack}
+          onContinue={(img: any) => {
+            setStepImage(isStep2 ? 1 : 0, {
+              uri: img.uri,
+              previewUrl: img.previewUrl || img.uri,
+            });
+            handleNext();
+          }}
+          translations={{
+            title: translations.headerTitle,
+            subtitle: isStep2 ? translations.uploadSubtitle2 : translations.uploadSubtitle,
+            continue: translations.continue,
+            tapToUpload: translations.tapToUpload,
+            selectPhoto: translations.selectPhoto,
+            change: translations.change,
+            analyzing: translations.analyzing,
+            fileTooLarge: translations.fileTooLarge,
+            maxFileSize: translations.maxFileSize,
+            error: translations.error,
+            uploadFailed: translations.uploadFailed,
+            aiDisclosure: translations.aiDisclosure,
+          }}
+          initialName=""
+          config={{
+            showFaceDetection: featureType === "face-swap",
+            showNameInput: false,
+            showPhotoTips: true,
+          }}
+        />
+      );
+    }
+
+    case AIGenerateStep.GENERATING:
+      return (
+        <ScreenLayout
+          header={
+            <AIGenScreenHeader
+              title={translations.headerTitle}
+              onNavigationPress={handleBack}
+            />
+          }
+        >
+          <View style={{ flex: 1, padding: tokens.spacing.xl }}>
+            <GenerationProgressContent
+              progress={progress}
+              title={translations.processingTitle}
+              message={translations.processingMessage}
+              hint={translations.processingHint}
+            />
+          </View>
+        </ScreenLayout>
+      );
+
+    case AIGenerateStep.RESULT:
+      return (
+        <ScreenLayout
+          header={
+            <AIGenScreenHeader
+              title={translations.headerTitle}
+              onNavigationPress={handleBack}
+            />
+          }
+        >
+          <AIGenerationResult
+            successText={translations.successTitle}
+            primaryAction={{
+              label: translations.saveButton,
+              onPress: () => {},
+              icon: "download",
+            }}
+            secondaryAction={{
+              label: translations.tryAgainButton,
+              onPress: () => setCurrentStep(AIGenerateStep.CONFIG),
+              icon: "refresh",
+            }}
+          >
+            <Image
+              source={{ uri: result || "" }}
+              style={{ width: "100%", aspectRatio: 2 / 3, borderRadius: 16 }}
+              resizeMode="cover"
+            />
+          </AIGenerationResult>
+        </ScreenLayout>
+      );
+
+    default:
+      return (
+        <AtomicKeyboardAvoidingView
+          offset={Platform.OS === "ios" ? 94 : 0}
+        >
+          <ScrollView
+            style={{ backgroundColor: tokens.colors.backgroundPrimary }}
+            contentContainerStyle={{ paddingBottom: 100 }}
+            showsVerticalScrollIndicator={false}
+            keyboardShouldPersistTaps="handled"
+          >
+            <AIGenScreenHeader
+              title={translations.headerTitle}
+              onNavigationPress={handleBack}
+              rightContent={
+                <TouchableOpacity
+                  onPress={handleGenerate}
+                  disabled={isGenerating || !prompt.trim()}
+                  activeOpacity={0.7}
+                  style={{
+                    flexDirection: "row",
+                    alignItems: "center",
+                    backgroundColor: !isGenerating && prompt.trim() ? tokens.colors.primary : tokens.colors.surfaceVariant,
+                    paddingHorizontal: tokens.spacing.md,
+                    paddingVertical: tokens.spacing.xs,
+                    borderRadius: tokens.borders.radius.full,
+                    opacity: !isGenerating && prompt.trim() ? 1 : 0.5,
+                  }}
+                >
+                  <AtomicText
+                    type="bodyMedium"
+                    style={{
+                      fontWeight: "800",
+                      color: !isGenerating && prompt.trim() ? tokens.colors.onPrimary : tokens.colors.textSecondary,
+                      marginRight: 4,
+                    }}
+                  >
+                    {isGenerating ? translations.generatingButton : translations.generateButton}
+                  </AtomicText>
+                  <AtomicIcon
+                    name={isGenerating ? "refresh" : "sparkles"}
+                    size="sm"
+                    color={!isGenerating && prompt.trim() ? "onPrimary" : "textSecondary"}
+                  />
+                </TouchableOpacity>
+              }
+            />
+            <AIGenerationConfig
+              heroTitle={translations.heroTitle}
+              heroSubtitle={translations.heroSubtitle}
+              isGenerating={isGenerating}
+              progress={progress}
+              presets={presets}
+              onPresetPress={handleGenerate as any}
+              prompt={prompt}
+              onPromptChange={setPrompt}
+              styles={styleOptions}
+              selectedStyle={selectedStyle}
+              onStyleSelect={setSelectedStyle}
+              duration={selectedDuration}
+              durationOptions={durationOptions}
+              onDurationSelect={setSelectedDuration}
+              showAdvanced={showAdvanced}
+              onAdvancedToggle={toggleAdvanced}
+              onGenerate={handleGenerate}
+              images={images}
+              hideGenerateButton={true}
+              translations={{
+                presetsTitle: translations.presetsTitle,
+                showAdvancedLabel: translations.showAdvancedLabel,
+                hideAdvancedLabel: translations.hideAdvancedLabel,
+                promptTitle: translations.promptTitle,
+                promptPlaceholder: translations.promptPlaceholder,
+                styleTitle: translations.styleTitle,
+                durationTitle: translations.durationTitle,
+                generateButton: translations.generateButton,
+                generatingButton: translations.generatingButton,
+              }}
+            />
+          </ScrollView>
+        </AtomicKeyboardAvoidingView>
+      );
+  }
+};

package/src/presentation/components/headers/AIGenScreenHeader.tsx

@@ -49,6 +49,15 @@ export const AIGenScreenHeader: React.FC<AIGenScreenHeaderProps> = ({
   return (
     <View style={styles.header}>
       <View style={styles.headerTop}>
+        {onNavigationPress && (
+          <TouchableOpacity
+            onPress={onNavigationPress}
+            style={[buttonStyle, { marginRight: 12 }]}
+            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+          >
+            <AtomicIcon name={iconName} size="md" color={iconColor} />
+          </TouchableOpacity>
+        )}
         <View style={styles.titleContainer}>
           <AtomicText
             type={titleType}
@@ -62,15 +71,6 @@ export const AIGenScreenHeader: React.FC<AIGenScreenHeaderProps> = ({
         </View>
         <View style={styles.headerActions}>
           {rightContent}
-          {onNavigationPress && (
-            <TouchableOpacity
-              onPress={onNavigationPress}
-              style={buttonStyle}
-              hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-            >
-              <AtomicIcon name={iconName} size="md" color={iconColor} />
-            </TouchableOpacity>
-          )}
         </View>
       </View>
       {showDescription && description && (

package/src/presentation/components/index.ts

@@ -8,6 +8,8 @@ export { AIGenerationHero } from "./AIGenerationHero";
 export * from "./StylePresetsGrid";
 export * from "./AIGenerationForm";
 export * from "./AIGenerationForm.types";
+export * from "./AIGenerationConfig";
+export * from "./flows/AIGenerateWizardFlow";
 
 export type { GenerationProgressContentProps } from "./GenerationProgressContent";
 export type { GenerationProgressBarProps } from "./GenerationProgressBar";

package/src/presentation/hooks/generation/orchestrator.ts

@@ -70,7 +70,7 @@ export const useGenerationOrchestrator = <TInput, TResult>(
 
   const offlineStore = useOfflineStore();
   const { showError, showSuccess } = useAlert();
-  const defaultCredits = useDeductCredit({ userId, onCreditsExhausted });
+  const defaultCredits = useDeductCredit({ userId, onCreditsExhausted }) as any;
 
   // Use provided credit callbacks or default to useDeductCredit hook
   const checkCredits = credits?.checkCredits ?? defaultCredits.checkCredits;

package/src/presentation/hooks/generation/useAIGenerateState.ts

@@ -0,0 +1,81 @@
+
+export enum AIGenerateStep {
+  INFO = "INFO",
+  UPLOAD_1 = "UPLOAD_1",
+  UPLOAD_2 = "UPLOAD_2",
+  CONFIG = "CONFIG",
+  GENERATING = "GENERATING",
+  RESULT = "RESULT",
+}
+
+export interface UploadedImage {
+  uri: string;
+  previewUrl?: string;
+  name?: string;
+}
+
+import { useState, useCallback } from "react";
+
+export function useAIGenerateState() {
+  const [currentStep, setCurrentStep] = useState<AIGenerateStep>(
+    AIGenerateStep.INFO,
+  );
+  const [images, setImages] = useState<UploadedImage[]>([]);
+  const [prompt, setPrompt] = useState("");
+  const [selectedStyle, setSelectedStyle] = useState("modern");
+  const [selectedDuration, setSelectedDuration] = useState(15);
+  const [showAdvanced, setShowAdvanced] = useState(false);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [result, setResult] = useState<string | null>(null);
+
+  const toggleAdvanced = useCallback(() => {
+    setShowAdvanced((prev) => !prev);
+  }, []);
+
+  const goToStep = useCallback((step: AIGenerateStep) => {
+    setCurrentStep(step);
+  }, []);
+
+  const setStepImage = useCallback((index: number, image: UploadedImage) => {
+    setImages((prev) => {
+      const next = [...prev];
+      next[index] = image;
+      return next;
+    });
+  }, []);
+
+  const reset = useCallback(() => {
+    setImages([]);
+    setPrompt("");
+    setSelectedStyle("modern");
+    setSelectedDuration(15);
+    setIsGenerating(false);
+    setProgress(0);
+    setResult(null);
+    setCurrentStep(AIGenerateStep.INFO);
+  }, []);
+
+  return {
+    currentStep,
+    setCurrentStep: goToStep,
+    images,
+    setImages,
+    setStepImage,
+    prompt,
+    setPrompt,
+    selectedStyle,
+    setSelectedStyle,
+    selectedDuration,
+    setSelectedDuration,
+    showAdvanced,
+    toggleAdvanced,
+    isGenerating,
+    setIsGenerating,
+    progress,
+    setProgress,
+    result,
+    setResult,
+    reset,
+  };
+}

package/src/presentation/hooks/index.ts

@@ -59,3 +59,6 @@ export type {
   AIFeatureCallbacks,
   AIFeatureGenerationResult,
 } from "./useAIFeatureCallbacks";
+
+export { useAIGenerateState, AIGenerateStep } from "./generation/useAIGenerateState";
+export type { UploadedImage } from "./generation/useAIGenerateState";