@umituz/react-native-ai-generation-content 1.17.60 → 1.17.62

package/package.json

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

package/src/features/ai-hug/presentation/components/AIHugFeature.tsx

@@ -13,6 +13,7 @@ import {
 } from "@umituz/react-native-design-system";
 import { DualImagePicker } from "../../../../presentation/components/image-picker/DualImagePicker";
 import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
+import { AIGenerationResult } from "../../../../presentation/components/display/AIGenerationResult";
 import { useAIHugFeature } from "../hooks";
 import type {
   AIHugTranslations,
@@ -85,31 +86,19 @@ export const AIHugFeature: React.FC<AIHugFeatureProps> = ({
         contentContainerStyle={styles.content}
         showsVerticalScrollIndicator={false}
       >
-        <AtomicText
-          type="headlineMedium"
-          style={[styles.successText, { color: tokens.colors.success }]}
+        <AIGenerationResult
+          successText={translations.successText}
+          primaryAction={{
+            label: translations.saveButtonText,
+            onPress: handleSave,
+          }}
+          secondaryAction={{
+            label: translations.tryAnotherText,
+            onPress: feature.reset,
+          }}
         >
-          {translations.successText}
-        </AtomicText>
-
-        <View style={styles.resultVideoContainer}>
           {renderVideoPlayer({ videoUrl: feature.processedVideoUrl, size: videoSize })}
-        </View>
-
-        <View style={styles.resultActions}>
-          <AtomicButton
-            title={translations.saveButtonText}
-            onPress={handleSave}
-            variant="primary"
-            size="lg"
-          />
-          <AtomicButton
-            title={translations.tryAnotherText}
-            onPress={feature.reset}
-            variant="secondary"
-            size="lg"
-          />
-        </View>
+        </AIGenerationResult>
       </ScrollView>
     );
   }

package/src/features/ai-kiss/presentation/components/AIKissFeature.tsx

@@ -13,6 +13,7 @@ import {
 } from "@umituz/react-native-design-system";
 import { DualImagePicker } from "../../../../presentation/components/image-picker/DualImagePicker";
 import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
+import { AIGenerationResult } from "../../../../presentation/components/display/AIGenerationResult";
 import { useAIKissFeature } from "../hooks";
 import type {
   AIKissTranslations,
@@ -79,31 +80,19 @@ export const AIKissFeature: React.FC<AIKissFeatureProps> = ({
         contentContainerStyle={styles.content}
         showsVerticalScrollIndicator={false}
       >
-        <AtomicText
-          type="headlineMedium"
-          style={[styles.successText, { color: tokens.colors.success }]}
+        <AIGenerationResult
+          successText={translations.successText}
+          primaryAction={{
+            label: translations.saveButtonText,
+            onPress: handleSave,
+          }}
+          secondaryAction={{
+            label: translations.tryAnotherText,
+            onPress: feature.reset,
+          }}
         >
-          {translations.successText}
-        </AtomicText>
-
-        <View style={styles.resultVideoContainer}>
           {renderVideoPlayer({ videoUrl: feature.processedVideoUrl, size: videoSize })}
-        </View>
-
-        <View style={styles.resultActions}>
-          <AtomicButton
-            title={translations.saveButtonText}
-            onPress={handleSave}
-            variant="primary"
-            size="lg"
-          />
-          <AtomicButton
-            title={translations.tryAnotherText}
-            onPress={feature.reset}
-            variant="secondary"
-            size="lg"
-          />
-        </View>
+        </AIGenerationResult>
       </ScrollView>
     );
   }

package/src/features/anime-selfie/presentation/components/AnimeSelfieFeature.tsx

@@ -13,6 +13,7 @@ import {
 } from "@umituz/react-native-design-system";
 import { PhotoUploadCard } from "../../../../presentation/components/PhotoUploadCard";
 import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
+import { AIGenerationResult } from "../../../../presentation/components/display/AIGenerationResult";
 import { useAnimeSelfieFeature } from "../hooks";
 import type {
   AnimeSelfieTranslations,
@@ -77,35 +78,23 @@ export const AnimeSelfieFeature: React.FC<AnimeSelfieFeatureProps> = ({
         contentContainerStyle={styles.content}
         showsVerticalScrollIndicator={false}
       >
-        <AtomicText
-          type="headlineMedium"
-          style={[styles.successText, { color: tokens.colors.success }]}
+        <AIGenerationResult
+          successText={translations.successText}
+          primaryAction={{
+            label: translations.saveButtonText,
+            onPress: handleSave,
+          }}
+          secondaryAction={{
+            label: translations.tryAnotherText,
+            onPress: feature.reset,
+          }}
         >
-          {translations.successText}
-        </AtomicText>
-
-        <View style={styles.resultImageContainer}>
           <Image
             source={{ uri: feature.processedUrl }}
             style={[styles.resultImage, { width: imageSize, height: imageSize }]}
             resizeMode="contain"
           />
-        </View>
-
-        <View style={styles.resultActions}>
-          <AtomicButton
-            title={translations.saveButtonText}
-            onPress={handleSave}
-            variant="primary"
-            size="lg"
-          />
-          <AtomicButton
-            title={translations.tryAnotherText}
-            onPress={feature.reset}
-            variant="secondary"
-            size="lg"
-          />
-        </View>
+        </AIGenerationResult>
       </ScrollView>
     );
   }

package/src/features/face-swap/presentation/components/FaceSwapFeature.tsx

@@ -13,6 +13,7 @@ import {
 } from "@umituz/react-native-design-system";
 import { DualImagePicker } from "../../../../presentation/components/image-picker/DualImagePicker";
 import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
+import { AIGenerationResult } from "../../../../presentation/components/display/AIGenerationResult";
 import { useFaceSwapFeature } from "../hooks";
 import type {
   FaceSwapTranslations,
@@ -76,35 +77,23 @@ export const FaceSwapFeature: React.FC<FaceSwapFeatureProps> = ({
         contentContainerStyle={styles.content}
         showsVerticalScrollIndicator={false}
       >
-        <AtomicText
-          type="headlineMedium"
-          style={[styles.successText, { color: tokens.colors.success }]}
+        <AIGenerationResult
+          successText={translations.successText}
+          primaryAction={{
+            label: translations.saveButtonText,
+            onPress: handleSave,
+          }}
+          secondaryAction={{
+            label: translations.tryAnotherText,
+            onPress: feature.reset,
+          }}
         >
-          {translations.successText}
-        </AtomicText>
-
-        <View style={styles.resultImageContainer}>
           <Image
             source={{ uri: feature.processedUrl }}
             style={[styles.resultImage, { width: imageSize, height: imageSize }]}
             resizeMode="contain"
           />
-        </View>
-
-        <View style={styles.resultActions}>
-          <AtomicButton
-            title={translations.saveButtonText}
-            onPress={handleSave}
-            variant="primary"
-            size="lg"
-          />
-          <AtomicButton
-            title={translations.tryAnotherText}
-            onPress={feature.reset}
-            variant="secondary"
-            size="lg"
-          />
-        </View>
+        </AIGenerationResult>
       </ScrollView>
     );
   }

package/src/features/hd-touch-up/presentation/components/HDTouchUpFeature.tsx

@@ -13,6 +13,7 @@ import {
 } from "@umituz/react-native-design-system";
 import { PhotoUploadCard } from "../../../../presentation/components/PhotoUploadCard";
 import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
+import { AIGenerationResult } from "../../../../presentation/components/display/AIGenerationResult";
 import { useHDTouchUpFeature } from "../hooks";
 import type {
   HDTouchUpTranslations,
@@ -77,35 +78,23 @@ export const HDTouchUpFeature: React.FC<HDTouchUpFeatureProps> = ({
         contentContainerStyle={styles.content}
         showsVerticalScrollIndicator={false}
       >
-        <AtomicText
-          type="headlineMedium"
-          style={[styles.successText, { color: tokens.colors.success }]}
+        <AIGenerationResult
+          successText={translations.successText}
+          primaryAction={{
+            label: translations.saveButtonText,
+            onPress: handleSave,
+          }}
+          secondaryAction={{
+            label: translations.tryAnotherText,
+            onPress: feature.reset,
+          }}
         >
-          {translations.successText}
-        </AtomicText>
-
-        <View style={styles.resultImageContainer}>
           <Image
             source={{ uri: feature.processedUrl }}
             style={[styles.resultImage, { width: imageSize, height: imageSize }]}
             resizeMode="contain"
           />
-        </View>
-
-        <View style={styles.resultActions}>
-          <AtomicButton
-            title={translations.saveButtonText}
-            onPress={handleSave}
-            variant="primary"
-            size="lg"
-          />
-          <AtomicButton
-            title={translations.tryAnotherText}
-            onPress={feature.reset}
-            variant="secondary"
-            size="lg"
-          />
-        </View>
+        </AIGenerationResult>
       </ScrollView>
     );
   }

package/src/features/remove-background/presentation/components/RemoveBackgroundFeature.tsx

@@ -13,6 +13,7 @@ import {
 } from "@umituz/react-native-design-system";
 import { PhotoUploadCard } from "../../../../presentation/components/PhotoUploadCard";
 import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
+import { AIGenerationResult } from "../../../../presentation/components/display/AIGenerationResult";
 import { useRemoveBackgroundFeature } from "../hooks";
 import type {
   RemoveBackgroundTranslations,
@@ -77,35 +78,23 @@ export const RemoveBackgroundFeature: React.FC<RemoveBackgroundFeatureProps> = (
         contentContainerStyle={styles.content}
         showsVerticalScrollIndicator={false}
       >
-        <AtomicText
-          type="headlineMedium"
-          style={[styles.successText, { color: tokens.colors.success }]}
+        <AIGenerationResult
+          successText={translations.successText}
+          primaryAction={{
+            label: translations.saveButtonText,
+            onPress: handleSave,
+          }}
+          secondaryAction={{
+            label: translations.tryAnotherText,
+            onPress: feature.reset,
+          }}
         >
-          {translations.successText}
-        </AtomicText>
-
-        <View style={styles.resultImageContainer}>
           <Image
             source={{ uri: feature.processedUrl }}
             style={[styles.resultImage, { width: imageSize, height: imageSize }]}
             resizeMode="contain"
           />
-        </View>
-
-        <View style={styles.resultActions}>
-          <AtomicButton
-            title={translations.saveButtonText}
-            onPress={handleSave}
-            variant="primary"
-            size="lg"
-          />
-          <AtomicButton
-            title={translations.tryAnotherText}
-            onPress={feature.reset}
-            variant="secondary"
-            size="lg"
-          />
-        </View>
+        </AIGenerationResult>
       </ScrollView>
     );
   }

package/src/features/remove-object/presentation/components/RemoveObjectFeature.tsx

@@ -13,6 +13,7 @@ import {
 } from "@umituz/react-native-design-system";
 import { PhotoUploadCard } from "../../../../presentation/components/PhotoUploadCard";
 import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
+import { AIGenerationResult } from "../../../../presentation/components/display/AIGenerationResult";
 import { useRemoveObjectFeature } from "../hooks";
 import type {
   RemoveObjectTranslations,
@@ -76,35 +77,23 @@ export const RemoveObjectFeature: React.FC<RemoveObjectFeatureProps> = ({
         contentContainerStyle={styles.content}
         showsVerticalScrollIndicator={false}
       >
-        <AtomicText
-          type="headlineMedium"
-          style={[styles.successText, { color: tokens.colors.success }]}
+        <AIGenerationResult
+          successText={translations.successText}
+          primaryAction={{
+            label: translations.saveButtonText,
+            onPress: handleSave,
+          }}
+          secondaryAction={{
+            label: translations.tryAnotherText,
+            onPress: feature.reset,
+          }}
         >
-          {translations.successText}
-        </AtomicText>
-
-        <View style={styles.resultImageContainer}>
           <Image
             source={{ uri: feature.processedUrl }}
             style={[styles.resultImage, { width: imageSize, height: imageSize }]}
             resizeMode="contain"
           />
-        </View>
-
-        <View style={styles.resultActions}>
-          <AtomicButton
-            title={translations.saveButtonText}
-            onPress={handleSave}
-            variant="primary"
-            size="lg"
-          />
-          <AtomicButton
-            title={translations.tryAnotherText}
-            onPress={feature.reset}
-            variant="secondary"
-            size="lg"
-          />
-        </View>
+        </AIGenerationResult>
       </ScrollView>
     );
   }

package/src/presentation/components/AIGenerationForm.tsx

@@ -5,6 +5,7 @@ import { AspectRatioSelector } from "./selectors/AspectRatioSelector";
 import { PromptInput } from "./PromptInput";
 import { GenerateButton } from "./buttons/GenerateButton";
 import { ExamplePrompts } from "./prompts/ExamplePrompts";
+import { AIGenerationProgressInline } from "./AIGenerationProgressInline";
 import type { StyleOption } from "./selectors/types";
 import type { AspectRatioOption } from "./selectors/types";
 
@@ -17,6 +18,8 @@ export interface AIGenerationFormTranslations {
   examplePromptsTitle?: string;
   generateButton: string;
   generatingButton: string;
+  progressTitle?: string;
+  progressHint?: string;
 }
 
 export interface AIGenerationFormProps extends PropsWithChildren {
@@ -47,6 +50,9 @@ export interface AIGenerationFormProps extends PropsWithChildren {
   isGenerating: boolean;
   hideGenerateButton?: boolean;
   
+  // Optional: Generation Progress
+  progress?: number;
+  
   // Custom Generate Button Props
   generateButtonProps?: {
     costLabel?: string;
@@ -81,6 +87,7 @@ export const AIGenerationForm: React.FC<AIGenerationFormProps> = ({
   onGenerate,
   isGenerating,
   hideGenerateButton,
+  progress,
   
   generateButtonProps,
   
@@ -136,6 +143,14 @@ export const AIGenerationForm: React.FC<AIGenerationFormProps> = ({
       
       {/* Custom children injected here */}
       {children}
+
+      {isGenerating && progress !== undefined && (
+        <AIGenerationProgressInline
+          progress={progress}
+          title={translations.progressTitle || translations.generatingButton}
+          hint={translations.progressHint}
+        />
+      )}
       
       {!hideGenerateButton && (
         <GenerateButton

package/src/presentation/components/display/AIGenerationResult.tsx

@@ -0,0 +1,124 @@
+import React, { PropsWithChildren } from "react";
+import { View, StyleSheet, Dimensions } from "react-native";
+import {
+  useAppDesignTokens,
+  AtomicText,
+  AtomicButton,
+} from "@umituz/react-native-design-system";
+
+export interface AIGenerationResultAction {
+  label: string;
+  onPress: () => void;
+  variant?: "primary" | "secondary" | "outline";
+  icon?: string;
+}
+
+export interface AIGenerationResultTranslations {
+  successText?: string;
+}
+
+export interface AIGenerationResultProps extends PropsWithChildren {
+  /** Success message shown at the top */
+  successText?: string;
+  /** Primary action (usually Save/Download) */
+  primaryAction?: AIGenerationResultAction;
+  /** Secondary action (usually Try Again/Reset) */
+  secondaryAction?: AIGenerationResultAction;
+  /** Additional actions */
+  extraActions?: AIGenerationResultAction[];
+  /** Standard translations */
+  translations?: AIGenerationResultTranslations;
+  /** Custom style for the content container */
+  contentStyle?: any;
+}
+
+/**
+ * Standardized AI Generation Result View
+ * Handles success message, content display (children), and action buttons.
+ */
+export const AIGenerationResult: React.FC<AIGenerationResultProps> = ({
+  successText,
+  primaryAction,
+  secondaryAction,
+  extraActions = [],
+  translations,
+  contentStyle,
+  children,
+}) => {
+  const tokens = useAppDesignTokens();
+  const screenWidth = Dimensions.get("window").width;
+  const contentSize = screenWidth - 48;
+
+  const displaySuccessText = successText || translations?.successText;
+
+  return (
+    <View style={styles.container}>
+      {displaySuccessText && (
+        <AtomicText
+          type="headlineMedium"
+          style={[styles.successText, { color: tokens.colors.success }]}
+        >
+          {displaySuccessText}
+        </AtomicText>
+      )}
+
+      <View style={[styles.contentContainer, { width: contentSize }, contentStyle]}>
+        {children}
+      </View>
+
+      <View style={styles.actionsContainer}>
+        {primaryAction && (
+          <AtomicButton
+            title={primaryAction.label}
+            onPress={primaryAction.onPress}
+            variant="primary"
+            size="lg"
+            leftIcon={primaryAction.icon}
+          />
+        )}
+
+        {secondaryAction && (
+          <AtomicButton
+            title={secondaryAction.label}
+            onPress={secondaryAction.onPress}
+            variant="secondary"
+            size="lg"
+            leftIcon={secondaryAction.icon}
+          />
+        )}
+
+        {extraActions.map((action, index) => (
+          <AtomicButton
+            key={`extra-action-${index}`}
+            title={action.label}
+            onPress={action.onPress}
+            variant={action.variant || "outline"}
+            size="lg"
+            leftIcon={action.icon}
+          />
+        ))}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingVertical: 16,
+  },
+  successText: {
+    textAlign: "center",
+    marginBottom: 24,
+  },
+  contentContainer: {
+    alignSelf: "center",
+    marginBottom: 24,
+    borderRadius: 16,
+    overflow: "hidden",
+  },
+  actionsContainer: {
+    marginHorizontal: 24,
+    gap: 12,
+  },
+});

package/src/presentation/components/display/index.ts

@@ -3,4 +3,9 @@ export {
   type ResultDisplayProps,
   type ResultDisplayAction,
 } from "./ResultDisplay";
+export {
+  AIGenerationResult,
+  type AIGenerationResultProps,
+  type AIGenerationResultAction,
+} from "./AIGenerationResult";
 export { ErrorDisplay, type ErrorDisplayProps } from "./ErrorDisplay";